901187442

pending completion

Build # 901187442

Build Type

Pull #3795

gitlab-ci

Committed by

mzedel

Commit Message

feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

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

Pull Request Pull Request #3795: feat: increased chances of adopting our intended navigation patterns instead of unsupported browser navigation

Run Details

4389 of 6365 branches covered (68.96%)

5 of 5 new or added lines in 1 file covered. (100.0%)

1729 existing lines in 165 files now uncovered.

8274 of 10019 relevant lines covered (82.58%)

144.86 hits per line

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

73.68

/src/js/components/settings/organization/ssoeditor.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, { useCallback, useEffect, useRef, useState } from 'react';
import Dropzone from 'react-dropzone';

// material ui
import { Close as CloseIcon, CloudUpload, FileCopyOutlined as CopyPasteIcon } from '@mui/icons-material';
import { Button, Divider, Drawer, IconButton } from '@mui/material';

import Editor, { loader } from '@monaco-editor/react';
import copy from 'copy-to-clipboard';

import { createFileDownload } from '../../../helpers';
import Loader from '../../common/loader';

loader.config({ paths: { vs: '/ui/vs' } });

const editorProps = {
  defaultLanguage: 'xml',
  height: 700,
  language: 'xml',
  loading: <Loader show />,
  options: {
    autoClosingOvertype: 'auto',
    codeLens: false,
    contextmenu: false,
    enableSplitViewResizing: false,
    formatOnPaste: true,
    lightbulb: { enabled: false },
    lineNumbers: 'off',
    minimap: { enabled: false },
    quickSuggestions: false,
    readOnly: true,
    renderOverviewRuler: false,
    scrollBeyondLastLine: false,
    wordWrap: 'on'
  }
};

export const SSOEditor = ({ config, fileContent, hasSSOConfig, open, onCancel, onClose, onSave, setFileContent }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [isMetadataValid, setIsMetadataValid] = useState(false);
  const editorRef = useRef();

  useEffect(() => {
    if (!fileContent) {
      return;
    }
    const parser = new DOMParser();
    const theDom = parser.parseFromString(fileContent, 'application/xml');
    setIsMetadataValid(!theDom.getElementsByTagName('parsererror').length);
  }, [fileContent]);

  const onEditClick = () => setIsEditing(true);

  const onDownloadClick = () => createFileDownload(fileContent, 'metadata.xml');

  const onCancelClick = useCallback(() => {
    if (isEditing) {
      setFileContent(config);
      if (!hasSSOConfig) {
        return onCancel();
      }
      return setIsEditing(false);
    }
    onCancel();
  }, [config, isEditing, onCancel]);

  const onSubmitClick = () => {
    onSave();
    setIsEditing(false);
  };

  const onCopyClick = () => copy(fileContent);

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

  const handleEditorDidMount = (editor, monaco) => {
    monaco.languages.html.registerHTMLLanguageService('xml', {}, { documentFormattingEdits: true });
    editorRef.current = { editor, monaco, modifiedEditor: editor };
  };

  return (
    <Drawer className={`${open ? 'fadeIn' : 'fadeOut'}`} anchor="right" open={open} onClose={onClose} PaperProps={{ style: { minWidth: '75vw' } }}>
      <div className="flexbox margin-bottom-small space-between">
        <h3>SAML metadata</h3>
        <div className="flexbox center-aligned">
          <Dropzone multiple={false} onDrop={onDrop}>
            {({ getRootProps, getInputProps }) => (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                <Button color="secondary" startIcon={<CloudUpload fontSize="small" />}>
                  Import from a file
                </Button>
              </div>
            )}
          </Dropzone>

          <IconButton onClick={onClose} size="large">
            <CloseIcon />
          </IconButton>
        </div>
      </div>
      <Divider light />
      <Editor
        {...editorProps}
        options={{
          ...editorProps.options,
          readOnly: hasSSOConfig && !isEditing
        }}
        className="editor modified"
        onChange={setFileContent}
        onMount={handleEditorDidMount}
        value={fileContent}
      />
      {!isMetadataValid && fileContent.length > 4 && <div className="error">There was an error parsing the metadata.</div>}
      <Divider className="margin-top-large margin-bottom" light />
      <div>
        {hasSSOConfig && !isEditing ? (
          <div className="flexbox center-aligned">
            <Button onClick={onEditClick}>Edit</Button>
            <Button onClick={onDownloadClick}>Download file</Button>
            <Button onClick={onCopyClick} startIcon={<CopyPasteIcon />}>
              Copy to clipboard
            </Button>
          </div>
        ) : (
          <>
            <Button onClick={onCancelClick}>Cancel</Button>
            <Button variant="contained" disabled={!isMetadataValid} onClick={onSubmitClick} color="secondary" style={{ marginLeft: 10 }}>
              Save
            </Button>
          </>
        )}
      </div>
    </Drawer>
  );
};

export default SSOEditor;

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, { useCallback, useEffect, useRef, useState } from 'react';
15	import Dropzone from 'react-dropzone';
16
17	// material ui
18	import { Close as CloseIcon, CloudUpload, FileCopyOutlined as CopyPasteIcon } from '@mui/icons-material';
19	import { Button, Divider, Drawer, IconButton } from '@mui/material';
20
21	import Editor, { loader } from '@monaco-editor/react';
22	import copy from 'copy-to-clipboard';
23
24	import { createFileDownload } from '../../../helpers';
25	import Loader from '../../common/loader';
26
27	loader.config({ paths: { vs: '/ui/vs' } });	8✔
28
29	const editorProps = {	8✔
30	defaultLanguage: 'xml',
31	height: 700,
32	language: 'xml',
33	loading: <Loader show />,
34	options: {
35	autoClosingOvertype: 'auto',
36	codeLens: false,
37	contextmenu: false,
38	enableSplitViewResizing: false,
39	formatOnPaste: true,
40	lightbulb: { enabled: false },
41	lineNumbers: 'off',
42	minimap: { enabled: false },
43	quickSuggestions: false,
44	readOnly: true,
45	renderOverviewRuler: false,
46	scrollBeyondLastLine: false,
47	wordWrap: 'on'
48	}
49	};
50
51	export const SSOEditor = ({ config, fileContent, hasSSOConfig, open, onCancel, onClose, onSave, setFileContent }) => {	8✔
52	const [isEditing, setIsEditing] = useState(false);	11✔
53	const [isMetadataValid, setIsMetadataValid] = useState(false);	11✔
54	const editorRef = useRef();	11✔
55
56	useEffect(() => {	11✔
57	if (!fileContent) {	7✔
58	return;	4✔
59	}
60	const parser = new DOMParser();	3✔
61	const theDom = parser.parseFromString(fileContent, 'application/xml');	3✔
62	setIsMetadataValid(!theDom.getElementsByTagName('parsererror').length);	3✔
63	}, [fileContent]);
64
65	const onEditClick = () => setIsEditing(true);	11✔
66
67	const onDownloadClick = () => createFileDownload(fileContent, 'metadata.xml');	11✔
68
69	const onCancelClick = useCallback(() => {	11✔
70	if (isEditing) {	1!
UNCOV 71	setFileContent(config);	×
UNCOV 72	if (!hasSSOConfig) {	×
UNCOV 73	return onCancel();	×
74	}
UNCOV 75	return setIsEditing(false);	×
76	}
77	onCancel();	1✔
78	}, [config, isEditing, onCancel]);
79
80	const onSubmitClick = () => {	11✔
UNCOV 81	onSave();	×
UNCOV 82	setIsEditing(false);	×
83	};
84
85	const onCopyClick = () => copy(fileContent);	11✔
86
87	const onDrop = acceptedFiles => {	11✔
88	let reader = new FileReader();	1✔
89	reader.fileName = acceptedFiles[0].name;	1✔
90	reader.onerror = error => {	1✔
UNCOV 91	console.log('Error: ', error);	×
UNCOV 92	setIsEditing(false);	×
93	};
94	reader.onload = () => {	1✔
UNCOV 95	setFileContent(reader.result);	×
UNCOV 96	setIsEditing(true);	×
97	};
98	reader.readAsBinaryString(acceptedFiles[0]);	1✔
99	};
100
101	const handleEditorDidMount = (editor, monaco) => {	11✔
UNCOV 102	monaco.languages.html.registerHTMLLanguageService('xml', {}, { documentFormattingEdits: true });	×
UNCOV 103	editorRef.current = { editor, monaco, modifiedEditor: editor };	×
104	};
105
106	return (	11✔
107	<Drawer className={`${open ? 'fadeIn' : 'fadeOut'}`} anchor="right" open={open} onClose={onClose} PaperProps={{ style: { minWidth: '75vw' } }}>	11✔
108	<div className="flexbox margin-bottom-small space-between">
109	<h3>SAML metadata</h3>
110	<div className="flexbox center-aligned">
111	<Dropzone multiple={false} onDrop={onDrop}>
112	{({ getRootProps, getInputProps }) => (
113	<div {...getRootProps()}>	10✔
114	<input {...getInputProps()} />
115	<Button color="secondary" startIcon={<CloudUpload fontSize="small" />}>
116	Import from a file
117	</Button>
118	</div>
119	)}
120	</Dropzone>
121
122	<IconButton onClick={onClose} size="large">
123	<CloseIcon />
124	</IconButton>
125	</div>
126	</div>
127	<Divider light />
128	<Editor
129	{...editorProps}
130	options={{
131	...editorProps.options,
132	readOnly: hasSSOConfig && !isEditing	15✔
133	}}
134	className="editor modified"
135	onChange={setFileContent}
136	onMount={handleEditorDidMount}
137	value={fileContent}
138	/>
139	{!isMetadataValid && fileContent.length > 4 && <div className="error">There was an error parsing the metadata.</div>}	23✔
140	<Divider className="margin-top-large margin-bottom" light />
141	<div>
142	{hasSSOConfig && !isEditing ? (	26✔
143	<div className="flexbox center-aligned">
144	<Button onClick={onEditClick}>Edit</Button>
145	<Button onClick={onDownloadClick}>Download file</Button>
146	<Button onClick={onCopyClick} startIcon={<CopyPasteIcon />}>
147	Copy to clipboard
148	</Button>
149	</div>
150	) : (
151	<>
152	<Button onClick={onCancelClick}>Cancel</Button>
153	<Button variant="contained" disabled={!isMetadataValid} onClick={onSubmitClick} color="secondary" style={{ marginLeft: 10 }}>
154	Save
155	</Button>
156	</>
157	)}
158	</div>
159	</Drawer>
160	);
161	};
162
163	export default SSOEditor;

mendersoftware / gui / 901187442

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