diff --git a/ui/package.json b/ui/package.json index 2c8a54b12..5717f8a46 100644 --- a/ui/package.json +++ b/ui/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.35", + "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "@testing-library/jest-dom": "^5.11.4", diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js index de11d4205..6b2fa4d09 100644 --- a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js +++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js @@ -73,12 +73,13 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst, } - {configuration && } - - - } + {configuration && + } + + + } ); } \ No newline at end of file diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js index b8d6e8df2..fb3043cdb 100644 --- a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js +++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js @@ -1,60 +1,47 @@ -import { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons'; +import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React from 'react'; import FormattedDate from '../../../../core/components/FormattedDate'; import Translate from '../../../../i18n/components/translate'; import { usePropertyWidth } from '../../../component/properties/hooks'; +import { MetadataFilterVersionListItem } from './MetadataFilterVersionListItem'; - - - -export function MetadataFilterVersionList ({ configuration, columns }) { +export function MetadataFilterVersionList ({ configuration, limited, columns }) { const width = usePropertyWidth(columns); const [comparing, setComparing] = React.useState(false); const [selected, setSelected] = React.useState(null); + const resetFilterComparison = () => { + setComparing(false); + setSelected(null); + } + return ( { configuration && configuration.dates.length > 0 && -
+ {!comparing ?
- {configuration.dates.map(d => - + {configuration.dates.map((d, didx) => + ) } -
+
:
} {configuration.filters.map((version, i) => -
-
- { i + 1 } -
- {version.map((filter, n) => -
- {filter ? -
-
-

{ filter.name }

-

{ filter['@type'] }

-
- { filter.comparable && - - } -
- : -
-
- } -
- )} -
+ setSelected(id)} /> ) } { configuration && @@ -65,9 +52,16 @@ export function MetadataFilterVersionList ({ configuration, columns }) { :
- + : + + }
} @@ -75,8 +69,5 @@ export function MetadataFilterVersionList ({ configuration, columns }) { } - - - ); } diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js new file mode 100644 index 000000000..cd00341ca --- /dev/null +++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js @@ -0,0 +1,72 @@ +import React from 'react'; +import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { MetadataConfiguration } from '../../../component/MetadataConfiguration'; +import { getDefinition } from '../../../domain/index'; +import { useMetadataSchema } from '../../../hooks/api'; +import { useMetadataConfiguration } from '../../../hooks/configuration'; + +export function MetadataFilterVersionListItem ({ filters, width, selected, index, comparing, limited, onSelect }) { + + const filter = filters.find(f => f.hasOwnProperty('@type')); + const type = filter['@type']; + + React.useEffect(() => console.log(filters), [filters]); + + const definition = React.useMemo(() => getDefinition(type), [type]); + + const { get, response } = useMetadataSchema(); + + const [schema, setSchema] = React.useState(); + + async function loadSchema(d) { + const source = await get(`/${d.schema}`) + if (response.ok) { + setSchema(source); + } + } + + /*eslint-disable react-hooks/exhaustive-deps*/ + React.useEffect(() => { loadSchema(definition) }, [definition]); + + const config = useMetadataConfiguration([...filters.filter(f => !!f)], schema, definition, limited); + + return ( + + {!comparing && +
+
+ {index + 1} +
+ {filters.map((filter, n) => + + +
+ {filter ? +
+
+

{filter.name}

+

{filter['@type']}

+
+ {filter.comparable && + + } +
+ : +
-
+ } +
+ + + )} +
+ } + {comparing === filter.resourceId && + + } + + ); +} \ No newline at end of file diff --git a/ui/src/app/metadata/hoc/MetadataVersionLoader.js b/ui/src/app/metadata/hoc/MetadataVersionLoader.js index a2c62c10e..40b6f2bdf 100644 --- a/ui/src/app/metadata/hoc/MetadataVersionLoader.js +++ b/ui/src/app/metadata/hoc/MetadataVersionLoader.js @@ -38,9 +38,10 @@ export function MetadataVersionLoader ({versions, children}) { loadVersion(v); } + /*eslint-disable react-hooks/exhaustive-deps*/ React.useEffect(() => { loadNext(versions[0]); - }, []); + }, [versions]); return ( {children(versions.map(v => list[v]).filter(v => !!v))} diff --git a/ui/src/app/metadata/hooks/schema.js b/ui/src/app/metadata/hooks/schema.js index ae1a4872e..ad5acdb65 100644 --- a/ui/src/app/metadata/hooks/schema.js +++ b/ui/src/app/metadata/hooks/schema.js @@ -1,6 +1,4 @@ -import { MetadataFilterTypes } from "../domain/filter"; - -export function getDefinition(path, definitions) { +function getDefinition(path, definitions) { let def = path.split('/').pop(); return definitions[def]; } diff --git a/ui/src/app/metadata/view/MetadataComparison.js b/ui/src/app/metadata/view/MetadataComparison.js index a945c2578..b1b792134 100644 --- a/ui/src/app/metadata/view/MetadataComparison.js +++ b/ui/src/app/metadata/view/MetadataComparison.js @@ -31,6 +31,11 @@ export function MetadataComparison () { return ( <> +

+ Compare  + Source +  Configuration +

{versions && {(v) => @@ -61,7 +66,7 @@ export function MetadataComparison () { - {(c) => } + {(c) => } } diff --git a/ui/src/app/metadata/view/MetadataHistory.js b/ui/src/app/metadata/view/MetadataHistory.js index 64d7e7de2..2bd83db69 100644 --- a/ui/src/app/metadata/view/MetadataHistory.js +++ b/ui/src/app/metadata/view/MetadataHistory.js @@ -7,6 +7,8 @@ import FormattedDate from '../../core/components/FormattedDate'; import Translate from '../../i18n/components/translate'; import { useMetadataHistory } from '../hooks/api'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faUndo } from '@fortawesome/free-solid-svg-icons'; const sortVersionsByDate = (versions) => { return versions.sort((a, b) => { @@ -34,8 +36,8 @@ export function MetadataHistory () { }; const restore = () => {}; const compare = (versions) => { - const sorted = sortVersionsByDate(versions); - const path = `/metadata/${type}/${id}/configuration/compare?${queryString.stringify({versions: sorted.map(s => s.id)}, { + const s = sortVersionsByDate(versions); + const path = `/metadata/${type}/${id}/configuration/compare?${queryString.stringify({versions: s.map(s => s.id)}, { skipNull: true, })}`; history.push(path); @@ -71,7 +73,7 @@ export function MetadataHistory () { - {data.map((version, i) => + {sorted.map((version, i) =>
toggleVersionSelected(version)}> @@ -95,7 +97,7 @@ export function MetadataHistory () { {i > 0 && } diff --git a/ui/src/app/metadata/view/MetadataVersion.js b/ui/src/app/metadata/view/MetadataVersion.js index db3bf3d81..2e4d23262 100644 --- a/ui/src/app/metadata/view/MetadataVersion.js +++ b/ui/src/app/metadata/view/MetadataVersion.js @@ -37,6 +37,7 @@ export function MetadataVersion() { } } + /*eslint-disable react-hooks/exhaustive-deps*/ React.useEffect(() => { loadVersion(versionId); }, [versionId]); @@ -85,7 +86,7 @@ export function MetadataVersion() {   - Add Filter + Add Filter
diff --git a/ui/src/theme/assets/exclamation-circle.svg b/ui/src/theme/assets/exclamation-circle.svg new file mode 100644 index 000000000..8d35be07c --- /dev/null +++ b/ui/src/theme/assets/exclamation-circle.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/ui/src/theme/project/utility.scss b/ui/src/theme/project/utility.scss index f3ff5e38b..1a79b3eec 100644 --- a/ui/src/theme/project/utility.scss +++ b/ui/src/theme/project/utility.scss @@ -28,14 +28,16 @@ position: relative; border-color: #CCC !important; &::before { - $size: 24px; - content: "\f06a"; + $size: 16px; + content: ""; + opacity: 0.75; + background: url('../assets/exclamation-circle.svg'); font-family: 'FontAwesome'; text-align: center; width: $size; height: $size; position: absolute; - left: -$size; - top: 0.5rem; + left: -$size - 4; + top: 0.75rem; } } \ No newline at end of file diff --git a/ui/yarn.lock b/ui/yarn.lock index 43d217b52..549119ae0 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1189,6 +1189,13 @@ dependencies: "@fortawesome/fontawesome-common-types" "^0.2.35" +"@fortawesome/free-regular-svg-icons@^5.15.3": + version "5.15.3" + resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz#1ec4f2410ff638db549c5c5484fc60b66407dbe6" + integrity sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ== + dependencies: + "@fortawesome/fontawesome-common-types" "^0.2.35" + "@fortawesome/free-solid-svg-icons@^5.15.3": version "5.15.3" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"