diff --git a/backend/src/main/resources/nameid-filter.schema.json b/backend/src/main/resources/nameid-filter.schema.json index d6d02c84f..0865d8f89 100644 --- 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 index a3a8ecc6b..2c8390979 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -12965,22 +12965,6 @@ } } }, - "react-contenteditable": { - "version": "3.3.5", - "resolved": "https://registry.npmjs.org/react-contenteditable/-/react-contenteditable-3.3.5.tgz", - "integrity": "sha512-38A7hlRQfb2KQAQT0kIJC2YlQUU7jcyYM4eh1fj6kAYb3Hmk6hHlr0snelyxVSpPXjPdFllrnSsPkzUS5AtrEA==", - "requires": { - "fast-deep-equal": "^2.0.1", - "prop-types": "^15.7.1" - }, - "dependencies": { - "fast-deep-equal": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" - } - } - }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -13417,6 +13401,11 @@ "prop-types": "^15.7.2" } }, + "react-simple-code-editor": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", + "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" + }, "react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", diff --git a/ui/package.json b/ui/package.json index 5ee7731d1..af87df3d6 100644 --- 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/core/components/FormattedDate.js b/ui/src/app/core/components/FormattedDate.js index e9298af73..4d74cc26d 100644 --- a/ui/src/app/core/components/FormattedDate.js +++ b/ui/src/app/core/components/FormattedDate.js @@ -1,8 +1,17 @@ import React from 'react'; import { format, parseISO } from 'date-fns'; +export function useDateFormatter() { + return (date, time) => format(parseISO(date), `MMM d, Y${time ? ' HH:mm:ss' : ''}`); +} + +export function useFormattedDate (date, time = false) { + const formatter = useDateFormatter(); + return React.useMemo(() => formatter(date, time), [date, time, formatter]); +} + export function FormattedDate ({ date, time = false }) { - const formatted = React.useMemo(() => format(parseISO(date), `MMM d, Y${time ? ' HH:mm:ss' : ''}`), [date, time]); + const formatted = useFormattedDate(date, time); return (<>{ formatted }); } diff --git a/ui/src/app/dashboard/view/Dashboard.js b/ui/src/app/dashboard/view/Dashboard.js index 5869e5695..d7892f028 100644 --- a/ui/src/app/dashboard/view/Dashboard.js +++ b/ui/src/app/dashboard/view/Dashboard.js @@ -40,7 +40,7 @@ export function Dashboard () { } async function loadSources() { - const s = sourceLoader.get(); + const s = await sourceLoader.get(); if (response.ok) { setSources(s); } diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js index 2bfd8484d..959306b71 100644 --- 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' && - <> - handleTextChange(value)} - html={ selectedTarget[0] } - innerRef={ref} - dangerouslySetInnerHTML={true}> - - +
+ code} + onValueChange={(code) => handleTextChange(code)} + padding={10} + className={`codearea border rounded ${!selectedTarget[0] && 'is-invalid border-danger'}`} + style={{ + fontFamily: 'monospace', + fontSize: 15, + }}> + + {!selectedTarget[0] && Required for Scripts - - } + } +
} {targetType === 'REGEX' && <> } /> - + + + } /> + } /> diff --git a/ui/src/app/metadata/component/properties/PrimitiveProperty.js b/ui/src/app/metadata/component/properties/PrimitiveProperty.js index f86a798b7..96440749f 100644 --- 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 (
{property.differences && Changed: } @@ -21,7 +25,7 @@ export function PrimitiveProperty ({ property, columns }) { { property.name } {property.value.map((v, valIdx) => - + ) }
diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js index 807c86e61..0476fdb01 100644 --- 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() : '-'} + + {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'} + : -} diff --git a/ui/src/app/metadata/domain/filter/definition/EntityAttributesFilterDefinition.js b/ui/src/app/metadata/domain/filter/definition/EntityAttributesFilterDefinition.js index 43004f035..aab3adb4d 100644 --- a/ui/src/app/metadata/domain/filter/definition/EntityAttributesFilterDefinition.js +++ b/ui/src/app/metadata/domain/filter/definition/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/definition/NameIdFilterDefinition.js b/ui/src/app/metadata/domain/filter/definition/NameIdFilterDefinition.js index 7db943d63..e4abd17eb 100644 --- a/ui/src/app/metadata/domain/filter/definition/NameIdFilterDefinition.js +++ b/ui/src/app/metadata/domain/filter/definition/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/hoc/MetadataVersionLoader.js b/ui/src/app/metadata/hoc/MetadataVersionLoader.js index b14e0f59a..e1d17747d 100644 --- a/ui/src/app/metadata/hoc/MetadataVersionLoader.js +++ b/ui/src/app/metadata/hoc/MetadataVersionLoader.js @@ -12,9 +12,7 @@ export function MetadataVersionLoader({children}) { const [metadata, setMetadata] = React.useState(); - const { get, response } = useMetadataEntity(type, { - cachePolicy: 'no-cache', - }, []); + const { get, response, loading } = useMetadataEntity(type, {}, []); async function loadVersion(v) { const l = await get(`/${id}/Versions/${v}`); @@ -29,10 +27,6 @@ export function MetadataVersionLoader({children}) { }, [versionId]); return ( - <> - {metadata && - {children(metadata)} - } - + {children(metadata, loading)} ); } diff --git a/ui/src/app/metadata/hooks/api.js b/ui/src/app/metadata/hooks/api.js index b80425e76..72d4304e8 100644 --- a/ui/src/app/metadata/hooks/api.js +++ b/ui/src/app/metadata/hooks/api.js @@ -23,6 +23,10 @@ export function getMetadataPath(type) { return `/${details[type]}`; } +export function useNonAdminSources() { + return useFetch(`${API_BASE_PATH}${getMetadataPath('source')}/disabledNonAdmin`); +} + export function getMetadataListPath(type) { return `/${lists[type]}`; } @@ -31,10 +35,6 @@ export function getSchemaPath(type) { return `/${schema[type]}`; } -export function useNonAdminSources() { - return useFetch(`/${getMetadataPath('source')}/disabledNonAdmin`); -} - export function useMetadataEntities(type = 'source', opts = {}, onMount) { return useFetch(`${API_BASE_PATH}${getMetadataListPath(type)}`, opts, onMount); } @@ -113,7 +113,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 index 5fce5d31f..4aacb1574 100644 --- a/ui/src/app/metadata/new/NewFilter.js +++ b/ui/src/app/metadata/new/NewFilter.js @@ -9,12 +9,14 @@ 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, {}); @@ -22,9 +24,12 @@ export function NewFilter() { 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 index bae6fa78e..5ac69fb8c 100644 --- 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/MetadataConfirmRestore.js b/ui/src/app/metadata/view/MetadataConfirmRestore.js new file mode 100644 index 000000000..abf791fbb --- /dev/null +++ b/ui/src/app/metadata/view/MetadataConfirmRestore.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { MetadataVersionLoader } from '../hoc/MetadataVersionLoader'; +import { Translate } from '../../i18n/components/translate'; +import { useDateFormatter } from '../../core/components/FormattedDate'; +import { faSpinner } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +export function MetadataConfirmRestore () { + + const formatter = useDateFormatter(); + + return ( + + {(metadata, loading) => +
+
+
+ + <>{loading ? +
+ + Loading... +
+ : + <>{metadata && + <> +

+ + Restore Version ( date ) + +

+
+
+
+

+ Create New Version from Previous Settings +

+

+ Restoring this version will copy the Version ( date ) configuration and create a new Version from the selected version settings. You can then edit the configuration before saving the new version. +

+ Cancel + Restore +
+
+
+ + } + } + + + +
+
+
+ } + + ) +} \ No newline at end of file diff --git a/ui/src/app/metadata/view/MetadataRestore.js b/ui/src/app/metadata/view/MetadataRestore.js index 9511c4c92..3dd257d4d 100644 --- a/ui/src/app/metadata/view/MetadataRestore.js +++ b/ui/src/app/metadata/view/MetadataRestore.js @@ -10,7 +10,8 @@ export function MetadataRestore() { return ( - {(metadata) => + {(metadata, loading) => <> + {metadata && - } + } + } ); } diff --git a/ui/src/app/metadata/view/MetadataVersion.js b/ui/src/app/metadata/view/MetadataVersion.js index 3bde185fa..16fda5c3e 100644 --- a/ui/src/app/metadata/view/MetadataVersion.js +++ b/ui/src/app/metadata/view/MetadataVersion.js @@ -5,7 +5,7 @@ import { Configuration } from '../hoc/Configuration'; import { MetadataConfiguration } from '../component/MetadataConfiguration'; import { Link, useParams } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowUp, faHistory, faPlus } from '@fortawesome/free-solid-svg-icons'; +import { faArrowUp, faHistory, faPlus, faSpinner } from '@fortawesome/free-solid-svg-icons'; import { scroller } from 'react-scroll'; @@ -35,7 +35,13 @@ export function MetadataVersion() { return ( - {(metadata) => + {(metadata, loading) => + <> + {loading &&
+ + Loading... +
} + {metadata && {(config) => <> @@ -87,6 +93,7 @@ export function MetadataVersion() { } + } } ); diff --git a/ui/src/theme/project/forms.scss b/ui/src/theme/project/forms.scss index b200b8191..8532aab7d 100644 --- 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; } } +