Merged in bugfix/SHIBUI-1972 (pull request #493)

Fixed script validation
TIER · Jun 23, 2021 · 4ca2119 · 4ca2119
2 parents 8ed495a + edd222f
commit 4ca2119
Show file tree

Hide file tree

Showing 13 changed files with 79 additions and 49 deletions.
diff --git a/backend/src/main/resources/nameid-filter.schema.json b/backend/src/main/resources/nameid-filter.schema.json
@@ -21,7 +21,7 @@
             "type": "object",
             "properties": {
                 "nameIdFormatFilterTargetType": {
-                    "title": "",
+                    "title": "label.filter-target-type",
                     "type": "string",
                     "default": "ENTITY",
                     "enum": [

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -20,12 +20,12 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-bootstrap-typeahead": "^5.1.4",
-    "react-contenteditable": "^3.3.5",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.5.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scroll": "^1.8.2",
+    "react-simple-code-editor": "^0.11.0",
     "use-http": "^1.0.20",
     "use-query-params": "^1.2.2",
     "web-vitals": "^1.0.1"

diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -6,12 +6,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAsterisk, faCaretDown, faCaretUp, faEye, faEyeSlash, faPlus, faSpinner, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { useTranslator } from '../../../i18n/hooks';
 import { InfoIcon } from '../InfoIcon';
-import ContentEditable from 'react-contenteditable';
 import { AsyncTypeahead } from 'react-bootstrap-typeahead';
 import useFetch from 'use-http';
 import queryString from 'query-string';
 import API_BASE_PATH from '../../../App.constant';
 import isNil from 'lodash/isNil';
+import Editor from 'react-simple-code-editor';
+// import { highlight, languages } from 'prismjs/components/prism-core';
+// import 'prismjs/components/prism-clike';
+// import 'prismjs/components/prism-javascript';
 
 import { FilterTargetPreview } from '../../../metadata/hoc/FilterTargetPreview';
 
@@ -89,8 +92,6 @@ const FilterTargetField = ({
     const displayType = selectedType?.label || '';
     const targetType = selectedType?.value || null;
 
-    const ref = React.useRef(selectedTarget[0]);
-
     var handleTextChange = function (value) {
         setSelectedTarget([value]);
     };
@@ -187,20 +188,22 @@ const FilterTargetField = ({
                                     </>
                                 }
                                 { targetType === 'CONDITION_SCRIPT' &&
-                                    <>
-                                    <ContentEditable
-                                        role="textbox"
-                                        className="codearea form-control"
-                                        rows="8"
-                                        onChange={({ target: { value } }) => handleTextChange(value)}
-                                        html={ selectedTarget[0] }
-                                        innerRef={ref}
-                                        dangerouslySetInnerHTML={true}>
-                                    </ContentEditable>
-                                    <small id="script-help" className="text-danger">
+                                    <div className="editor">
+                                    <Editor
+                                        value={selectedTarget[0]}
+                                        highlight={(code) => code}
+                                        onValueChange={(code) => handleTextChange(code)}
+                                        padding={10}
+                                        className={`codearea border rounded ${!selectedTarget[0] && 'is-invalid border-danger'}`}
+                                        style={{
+                                            fontFamily: 'monospace',
+                                            fontSize: 15,
+                                        }}>
+                                    </Editor>
+                                    {!selectedTarget[0] && <small id="script-help" className="text-danger">
                                         <Translate value="message.required-for-scripts">Required for Scripts</Translate>
-                                    </small>
-                                </> }
+                                    </small>}
+                                </div> }
                                 {targetType === 'REGEX' &&
                                     <>
                                         <input id="targetInput"

diff --git a/ui/src/app/metadata/component/properties/PrimitiveProperty.js b/ui/src/app/metadata/component/properties/PrimitiveProperty.js
@@ -9,6 +9,10 @@ export function PrimitiveProperty ({ property, columns }) {
 
     const width = usePropertyWidth(columns);
 
+    const getValue = (v) => {
+        return property.enum && property.enumNames ? property.enumNames[property.enum.indexOf(v)] : v;
+    }
+
     return (
         <div tabIndex="0">
             {property.differences && <span className="sr-only">Changed:</span> }
@@ -21,7 +25,7 @@ export function PrimitiveProperty ({ property, columns }) {
                                 <Translate value={property.name}>{ property.name }</Translate>
                         </span>
                         {property.value.map((v, valIdx) =>
-                            <PropertyValue key={`prop-${valIdx}`} value={v} name={property.name} columns={columns} index={valIdx} />
+                            <PropertyValue key={`prop-${valIdx}`} value={getValue(v)} name={property.name} columns={columns} index={valIdx} />
                         ) }
                     </div>
 

diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js
@@ -3,6 +3,7 @@ import Popover from 'react-bootstrap/Popover';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 import { usePropertyWidth } from './hooks';
+import Translate from '../../../i18n/components/translate';
 
 export function PropertyValue ({ name, value, columns, className }) {
 
@@ -20,7 +21,9 @@ export function PropertyValue ({ name, value, columns, className }) {
                     className={`d-block text-truncate ${className}`}
                     role="definition"
                     style={columns ? { width } : {}}>
-                    {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}
+                    <Translate value={value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}>
+                        {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}
+                    </Translate>
                 </span>
             </OverlayTrigger>
         : <span className={`d-block text-truncate ${className}`} style={columns ? { width } : {}}>-</span>}

diff --git a/ui/src/app/metadata/domain/filter/EntityAttributesFilterDefinition.js b/ui/src/app/metadata/domain/filter/EntityAttributesFilterDefinition.js
@@ -53,6 +53,13 @@ export const EntityAttributesFilterWizard = {
                     errors.entityAttributesFilterTarget.value.addError('message.invalid-regex-pattern');
                 }
             }
+
+            if (formData?.entityAttributesFilterTarget?.entityAttributesFilterTargetType === 'CONDITION_SCRIPT') {
+                const { entityAttributesFilterTarget: { value } } = formData;
+                if (!value[0]) {
+                    errors.entityAttributesFilterTarget.value.addError('message.required-for-scripts');
+                }
+            }
             return errors;
         }
     },

diff --git a/ui/src/app/metadata/domain/filter/NameIdFilterDefinition.js b/ui/src/app/metadata/domain/filter/NameIdFilterDefinition.js
@@ -41,6 +41,13 @@ export const NameIDFilterWizard = {
                     errors.nameIdFormatFilterTarget.value.addError('message.invalid-regex-pattern');
                 }
             }
+
+            if (formData?.nameIdFormatFilterTarget?.nameIdFormatFilterTargetType === 'CONDITION_SCRIPT') {
+                const { nameIdFormatFilterTarget: { value } } = formData;
+                if (!value[0]) {
+                    errors.nameIdFormatFilterTarget.value.addError('message.required-for-scripts');
+                }
+            }
             return errors;
         }
     },

diff --git a/ui/src/app/metadata/hooks/api.js b/ui/src/app/metadata/hooks/api.js
@@ -109,7 +109,11 @@ export function useMetadataUpdater (path, current) {
                 }));
             });
         }
-        return Promise.resolve(req);
+        if (response.ok) {
+            return Promise.resolve(req);
+        } else {
+            return Promise.reject(req);
+        }
     }
 
     return {

diff --git a/ui/src/app/metadata/new/NewFilter.js b/ui/src/app/metadata/new/NewFilter.js
@@ -9,22 +9,27 @@ import { MetadataForm } from '../hoc/MetadataFormContext';
 import { MetadataSchema } from '../hoc/MetadataSchema';
 import { useMetadataFilters, useMetadataFilterTypes } from '../hooks/api';
 import { MetadataFilterTypeSelector } from '../wizard/MetadataFilterTypeSelector';
+import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
 
 export function NewFilter() {
 
     const { id, section } = useParams();
     const history = useHistory();
     const types = useMetadataFilterTypes();
+    const dispatch = useNotificationDispatcher();
 
     const { post, response, loading } = useMetadataFilters(id, {});
 
     const [blocking, setBlocking] = React.useState(false);
 
 
     async function save(metadata) {
-        await post(``, metadata);
+        const resp = await post(``, metadata);
         if (response.ok) {
+            dispatch(createNotificationAction('Filter saved'));
             gotoDetail({ refresh: true });
+        } else {
+            dispatch(createNotificationAction(resp.cause, NotificationTypes.DANGER));
         }
     };
 

diff --git a/ui/src/app/metadata/view/EditFilter.js b/ui/src/app/metadata/view/EditFilter.js
@@ -11,9 +11,12 @@ import { MetadataSchema } from '../hoc/MetadataSchema';
 import { getMetadataPath, useMetadataUpdater } from '../hooks/api';
 import { useMetadataFilterObject } from '../hoc/MetadataFilterSelector';
 import API_BASE_PATH from '../../App.constant';
+import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
 
 export function EditFilter() {
 
+    const dispatch = useNotificationDispatcher();
+
     const { id, filterId } = useParams();
     const filter = useMetadataFilterObject();
     const history = useHistory();
@@ -33,10 +36,11 @@ export function EditFilter() {
 
     function save(metadata) {
         setBlocking(false);
-        update(``, metadata).then(() => {
+        update(``, metadata).then((resp) => {
+            dispatch(createNotificationAction('Filter saved'));
             gotoDetail({ refresh: true });
-        }).catch(() => {
-            window.location.reload();
+        }).catch((error) => {
+            dispatch(createNotificationAction(error.cause, NotificationTypes.DANGER));
         });
     };
 

diff --git a/ui/src/app/metadata/view/MetadataUpload.js b/ui/src/app/metadata/view/MetadataUpload.js
@@ -22,8 +22,6 @@ export function MetadataUpload() {
 
     async function save({serviceProviderName, file, url}) {
 
-        console.log(serviceProviderName, file);
-
         setSaving(true);
 
         const f = file?.length > 0 ? file[0] : null;

diff --git a/ui/src/theme/project/forms.scss b/ui/src/theme/project/forms.scss
@@ -74,16 +74,21 @@ select.form-control:disabled {
     @include component-validation-state("invalid", $form-feedback-invalid-color);
 }
 
+.editor {
+    tab-size: 4ch;
+    max-height: 400px;
+    overflow: auto;
+}
+
 .codearea {
-    white-space: pre-wrap;
-    resize: vertical;
-    font-family: monospace;
+    // white-space: pre-wrap;
+    // resize: vertical;
     min-height: 166px;
     margin-bottom: 0px;
     word-break: break-word;
-    &[contenteditable] {
-        overflow-x: hidden;
-        overflow-y: scroll;
+
+    &.is-invalid > pre, &.is-invalid > textarea {
+        outline-color: transparent;
     }
 }
 
@@ -123,3 +128,4 @@ mark {
         border-left: 0px;
     }
 }
+