1301920191

Committed 23 May 2024 07:13AM UTC coverage: 83.42% (-16.5%) from 99.964%

Build # 1301920191

Build Type

Pull #4421

gitlab-ci

Committed by

mzedel

Commit Message

fix: fixed an issue that sometimes prevented reopening paginated auditlog links

Ticket: None
Changelog: Title
Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #4421: MEN-7034 - device information in auditlog entries

Run Details

4456 of 6367 branches covered (69.99%)

34 of 35 new or added lines in 7 files covered. (97.14%)

1668 existing lines in 162 files now uncovered.

8473 of 10157 relevant lines covered (83.42%)

140.52 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

80.49

/src/js/components/settings/organization/ssoconfig.js

// Copyright 2022 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useEffect, useState } from 'react';
import Dropzone from 'react-dropzone';

// material ui
import { CloudUpload } from '@mui/icons-material';
import { Button } from '@mui/material';
import { listItemTextClasses } from '@mui/material/ListItemText';
import { makeStyles } from 'tss-react/mui';

import { XML_METADATA_FORMAT } from '../../../constants/organizationConstants.js';
import { useradmApiUrl } from '../../../constants/userConstants';
import { toggle } from '../../../helpers';
import ExpandableAttribute from '../../common/expandable-attribute';
import { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';
import { maxWidth } from './organizationsettingsitem';
import SSOEditor from './ssoeditor';

const useStyles = makeStyles()(theme => ({
  configDetail: {
    maxWidth,
    [`.${listItemTextClasses.primary}`]: {
      color: theme.palette.text.disabled,
      fontSize: 'smaller'
    }
  },
  uploadIcon: {
    marginBottom: theme.spacing(-0.5),
    marginRight: theme.spacing()
  },
  tinyMargin: {
    marginLeft: theme.spacing(0.5),
    marginRight: theme.spacing(0.5)
  },
  wrapper: {
    alignItems: 'start',
    columnGap: theme.spacing(2),
    display: 'grid',
    gridTemplateColumns: `minmax(max-content, ${maxWidth}px) max-content max-content`,
    position: 'relative',
    ['&.has-sso']: {
      gridTemplateColumns: `${maxWidth - 45}px 1fr`
    }
  }
}));

export const getSsoStartUrlById = id => `${window.location.origin}${useradmApiUrl}/auth/sso/${id}/login`;

const defaultDetails = [
  { key: 'entityID', label: 'Entity ID', getValue: id => `${window.location.origin}${useradmApiUrl}/sso/sp/metadata/${id}` },
  { key: 'acs', label: 'ACS URL', getValue: id => `${window.location.origin}${useradmApiUrl}/auth/sso/${id}/acs` },
  { key: 'startURL', label: 'Start URL', getValue: id => getSsoStartUrlById(id) }
];

export const SSOConfig = ({ ssoItem, config, onCancel, onSave, setSnackbar, token }) => {
  const [configDetails, setConfigDetails] = useState([]);
  const [fileContent, setFileContentState] = useState('');
  const [hasSSOConfig, setHasSSOConfig] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const { id, ...content } = config || {};
  const configContent = content.config || '';

  // file content should be text, otherwise editor will fail
  const setFileContent = content => setFileContentState(typeof content === 'object' ? JSON.stringify(content) : content);

  const { classes } = useStyles();

  useEffect(() => {
    setHasSSOConfig(!!config);
    setFileContent(configContent);
    if (config?.id) {
      setConfigDetails(defaultDetails.map(item => ({ ...item, value: item.getValue(config.id) })));
    }
  }, [config, configContent]);

  const onCancelSSOSettings = () => {
    setHasSSOConfig(!!config);
    setFileContent(configContent);
    setIsEditing(false);
    onCancel();
  };

  const onSaveSSOSettings = () => {
    onSave(id, fileContent);
    setIsEditing(false);
  };

  const onDrop = acceptedFiles => {
    let reader = new FileReader();
    reader.fileName = acceptedFiles[0].name;
    reader.onerror = error => console.log('Error: ', error);
    reader.onload = () => {
      setIsEditing(true);
      setFileContent(reader.result);
    };
    reader.readAsBinaryString(acceptedFiles[0]);
  };

  const onOpenEditorClick = () => setIsEditing(toggle);

  // disable save button if there is no metadata content and metadata format is not xml that means SAML. As we allow to save empty SAML SSO config
  const saveButtonDisabled = !fileContent && ssoItem.metadataFormat !== XML_METADATA_FORMAT;

  return (
    <>
      <div className={`flexbox center-aligned ${classes.wrapper} ${hasSSOConfig ? 'has-sso' : ''}`}>
        {hasSSOConfig ? (
          <a onClick={onOpenEditorClick}>View metadata in the text editor</a>
        ) : (
          <>
            <MenderHelpTooltip id={HELPTOOLTIPS.ssoMetadata.id} style={{ position: 'absolute', left: -35 }} placement="left" />
            <Dropzone multiple={false} onDrop={onDrop}>
              {({ getRootProps, getInputProps }) => (
                <div {...getRootProps()} className="dropzone onboard dashboard-placeholder flexbox centered">
                  <input {...getInputProps()} />
                  <CloudUpload className={classes.uploadIcon} fontSize="small" /> Drag here or <a className={classes.tinyMargin}>browse</a> to upload a metadata
                  document
                </div>
              )}
            </Dropzone>
            <div>
              or <a onClick={onOpenEditorClick}>input with the text editor</a>
            </div>
          </>
        )}
        <div className="flexbox">
          {hasSSOConfig && !isEditing ? (
            <Button onClick={onOpenEditorClick}>Edit</Button>
          ) : (
            <>
              <Button onClick={onCancelSSOSettings}>Cancel</Button>
              <Button className={classes.tinyMargin} onClick={onSaveSSOSettings} disabled={saveButtonDisabled} variant="contained">
                Save
              </Button>
            </>
          )}
        </div>
      </div>
      {hasSSOConfig && (
        <div className="flexbox column margin-top">
          {configDetails.map(item => (
            <ExpandableAttribute
              className={classes.configDetail}
              copyToClipboard
              key={item.key}
              primary={item.label}
              secondary={item.value}
              setSnackbar={setSnackbar}
              disableGutters
              dividerDisabled
            />
          ))}
        </div>
      )}
      <SSOEditor
        open={isEditing}
        ssoItem={ssoItem}
        config={configContent}
        fileContent={fileContent}
        hasSSOConfig={hasSSOConfig}
        onCancel={onCancelSSOSettings}
        onClose={onOpenEditorClick}
        onSave={onSaveSSOSettings}
        setFileContent={setFileContent}
        token={token}
      />
    </>
  );
};

export default SSOConfig;

1	// Copyright 2022 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useEffect, useState } from 'react';
15	import Dropzone from 'react-dropzone';
16
17	// material ui
18	import { CloudUpload } from '@mui/icons-material';
19	import { Button } from '@mui/material';
20	import { listItemTextClasses } from '@mui/material/ListItemText';
21	import { makeStyles } from 'tss-react/mui';
22
23	import { XML_METADATA_FORMAT } from '../../../constants/organizationConstants.js';
24	import { useradmApiUrl } from '../../../constants/userConstants';
25	import { toggle } from '../../../helpers';
26	import ExpandableAttribute from '../../common/expandable-attribute';
27	import { HELPTOOLTIPS, MenderHelpTooltip } from '../../helptips/helptooltips';
28	import { maxWidth } from './organizationsettingsitem';
29	import SSOEditor from './ssoeditor';
30
31	const useStyles = makeStyles()(theme => ({	184✔
32	configDetail: {
33	maxWidth,
34	[`.${listItemTextClasses.primary}`]: {
35	color: theme.palette.text.disabled,
36	fontSize: 'smaller'
37	}
38	},
39	uploadIcon: {
40	marginBottom: theme.spacing(-0.5),
41	marginRight: theme.spacing()
42	},
43	tinyMargin: {
44	marginLeft: theme.spacing(0.5),
45	marginRight: theme.spacing(0.5)
46	},
47	wrapper: {
48	alignItems: 'start',
49	columnGap: theme.spacing(2),
50	display: 'grid',
51	gridTemplateColumns: `minmax(max-content, ${maxWidth}px) max-content max-content`,
52	position: 'relative',
53	['&.has-sso']: {
54	gridTemplateColumns: `${maxWidth - 45}px 1fr`
55	}
56	}
57	}));
58
59	export const getSsoStartUrlById = id => `${window.location.origin}${useradmApiUrl}/auth/sso/${id}/login`;	184✔
60
61	const defaultDetails = [	184✔
62	{ key: 'entityID', label: 'Entity ID', getValue: id => `${window.location.origin}${useradmApiUrl}/sso/sp/metadata/${id}` },	3✔
63	{ key: 'acs', label: 'ACS URL', getValue: id => `${window.location.origin}${useradmApiUrl}/auth/sso/${id}/acs` },	3✔
64	{ key: 'startURL', label: 'Start URL', getValue: id => getSsoStartUrlById(id) }	3✔
65	];
66
67	export const SSOConfig = ({ ssoItem, config, onCancel, onSave, setSnackbar, token }) => {	184✔
68	const [configDetails, setConfigDetails] = useState([]);	13✔
69	const [fileContent, setFileContentState] = useState('');	13✔
70	const [hasSSOConfig, setHasSSOConfig] = useState(false);	13✔
71	const [isEditing, setIsEditing] = useState(false);	13✔
72	const { id, ...content } = config \|\| {};	13✔
73	const configContent = content.config \|\| '';	13✔
74
75	// file content should be text, otherwise editor will fail
76	const setFileContent = content => setFileContentState(typeof content === 'object' ? JSON.stringify(content) : content);	13✔
77
78	const { classes } = useStyles();	13✔
79
80	useEffect(() => {	13✔
81	setHasSSOConfig(!!config);	4✔
82	setFileContent(configContent);	4✔
83	if (config?.id) {	4✔
84	setConfigDetails(defaultDetails.map(item => ({ ...item, value: item.getValue(config.id) })));	9✔
85	}
86	}, [config, configContent]);
87
88	const onCancelSSOSettings = () => {	13✔
UNCOV 89	setHasSSOConfig(!!config);	×
UNCOV 90	setFileContent(configContent);	×
UNCOV 91	setIsEditing(false);	×
UNCOV 92	onCancel();	×
93	};
94
95	const onSaveSSOSettings = () => {	13✔
UNCOV 96	onSave(id, fileContent);	×
UNCOV 97	setIsEditing(false);	×
98	};
99
100	const onDrop = acceptedFiles => {	13✔
101	let reader = new FileReader();	1✔
102	reader.fileName = acceptedFiles[0].name;	1✔
103	reader.onerror = error => console.log('Error: ', error);	1✔
104	reader.onload = () => {	1✔
UNCOV 105	setIsEditing(true);	×
UNCOV 106	setFileContent(reader.result);	×
107	};
108	reader.readAsBinaryString(acceptedFiles[0]);	1✔
109	};
110
111	const onOpenEditorClick = () => setIsEditing(toggle);	13✔
112
113	// disable save button if there is no metadata content and metadata format is not xml that means SAML. As we allow to save empty SAML SSO config
114	const saveButtonDisabled = !fileContent && ssoItem.metadataFormat !== XML_METADATA_FORMAT;	13✔
115
116	return (	13✔
117	<>
118	<div className={`flexbox center-aligned ${classes.wrapper} ${hasSSOConfig ? 'has-sso' : ''}`}>	13✔
119	{hasSSOConfig ? (	13✔
120	<a onClick={onOpenEditorClick}>View metadata in the text editor</a>
121	) : (
122	<>
123	<MenderHelpTooltip id={HELPTOOLTIPS.ssoMetadata.id} style={{ position: 'absolute', left: -35 }} placement="left" />
124	<Dropzone multiple={false} onDrop={onDrop}>
125	{({ getRootProps, getInputProps }) => (
126	<div {...getRootProps()} className="dropzone onboard dashboard-placeholder flexbox centered">	8✔
127	<input {...getInputProps()} />
128	<CloudUpload className={classes.uploadIcon} fontSize="small" /> Drag here or <a className={classes.tinyMargin}>browse</a> to upload a metadata
129	document
130	</div>
131	)}
132	</Dropzone>
133	<div>
134	or <a onClick={onOpenEditorClick}>input with the text editor</a>
135	</div>
136	</>
137	)}
138	<div className="flexbox">
139	{hasSSOConfig && !isEditing ? (	36✔
140	<Button onClick={onOpenEditorClick}>Edit</Button>
141	) : (
142	<>
143	<Button onClick={onCancelSSOSettings}>Cancel</Button>
144	<Button className={classes.tinyMargin} onClick={onSaveSSOSettings} disabled={saveButtonDisabled} variant="contained">
145	Save
146	</Button>
147	</>
148	)}
149	</div>
150	</div>
151	{hasSSOConfig && (	23✔
152	<div className="flexbox column margin-top">
153	{configDetails.map(item => (
154	<ExpandableAttribute	30✔
155	className={classes.configDetail}
156	copyToClipboard
157	key={item.key}
158	primary={item.label}
159	secondary={item.value}
160	setSnackbar={setSnackbar}
161	disableGutters
162	dividerDisabled
163	/>
164	))}
165	</div>
166	)}
167	<SSOEditor
168	open={isEditing}
169	ssoItem={ssoItem}
170	config={configContent}
171	fileContent={fileContent}
172	hasSSOConfig={hasSSOConfig}
173	onCancel={onCancelSSOSettings}
174	onClose={onOpenEditorClick}
175	onSave={onSaveSSOSettings}
176	setFileContent={setFileContent}
177	token={token}
178	/>
179	</>
180	);
181	};
182
183	export default SSOConfig;

mendersoftware / gui / 1301920191

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous