Fixed issues with provider loading, updated filter enable functionality

TIER · Jul 23, 2021 · 9938139 · 9938139
1 parent 5b04398
commit 9938139
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 57 deletions.
diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
@@ -18,13 +18,12 @@ export function Metadata () {
     let { path } = useRouteMatch();
 
     return (
-        <>
-            <MetadataSelector>
-                {(entity, reload) =>
+        <MetadataSelector>
+            {(entity, reload) =>
                 <MetadataXmlLoader>
                     <MetadataSchema type={entity['@type'] ? entity['@type'] : 'source'}>
                         <Switch>
-                            <Route path={`${path}/configuration/options`} render={ () =>
+                            <Route path={`${path}/configuration/options`} render={() =>
                                 <MetadataDetail>
                                     <MetadataOptions reload={reload}></MetadataOptions>
                                 </MetadataDetail>
@@ -34,36 +33,35 @@ export function Metadata () {
                                     <MetadataXml></MetadataXml>
                                 </MetadataDetail>
                             } />
-                            <Route path={`${path}/configuration/history`} render={ () =>
+                            <Route path={`${path}/configuration/history`} render={() =>
                                 <MetadataDetail>
                                     <MetadataHistory></MetadataHistory>
                                 </MetadataDetail>
                             } />
-                            <Route path={`${path}/configuration/compare`} render={ () =>
+                            <Route path={`${path}/configuration/compare`} render={() =>
                                 <MetadataDetail>
                                     <MetadataComparison></MetadataComparison>
                                 </MetadataDetail>
                             } />
-                            <Route path={`${path}/configuration/version/:versionId/options`} render={ () =>
+                            <Route path={`${path}/configuration/version/:versionId/options`} render={() =>
                                 <MetadataDetail>
                                     <MetadataVersion></MetadataVersion>
                                 </MetadataDetail>
                             } />
-                            <Route path={`${path}/edit/:section`} render={ () =>
+                            <Route path={`${path}/edit/:section`} render={() =>
                                 <MetadataEdit />
                             } />
-                            <Route path={`${path}/restore/:versionId/:section`} exact render={ () =>
+                            <Route path={`${path}/restore/:versionId/:section`} exact render={() =>
                                 <MetadataConfirmRestore />
                             } />
-                            <Route path={`${path}/restore/:versionId/:section/edit`} render={ () =>
+                            <Route path={`${path}/restore/:versionId/:section/edit`} render={() =>
                                 <MetadataRestore />
                             } />
                             <Redirect exact path={`${path}`} to={`${path}/configuration/options`} />
                         </Switch>
                     </MetadataSchema>
                 </MetadataXmlLoader>
-                }
-            </MetadataSelector>
-        </>
+            }
+        </MetadataSelector>
     );
 }
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationList.js
@@ -2,43 +2,50 @@ import React from 'react';
 
 import { Ordered } from '../../../../dashboard/component/Ordered';
 import { Translate } from '../../../../i18n/components/translate';
-import { MetadataFiltersContext } from './MetadataFilters';
+import { MetadataFilters, MetadataFiltersContext } from './MetadataFilters';
 
 import { MetadataFilterConfigurationListItem } from './MetadataFilterConfigurationListItem';
+import { MetadataFilterTypes } from '..';
 
 export function MetadataFilterConfigurationList ({provider, onDelete, editable = true}) {
-    const filters = React.useContext(MetadataFiltersContext);
+    // const filters = React.useContext(MetadataFiltersContext);
 
     return (
-        <Ordered path={`/MetadataResolvers/${provider.resourceId}/FiltersPositionOrder` } entities={filters}>
-            {(ordered, first, last, onOrderUp, onOrderDown) =>
-                <>
-                    {ordered.length > 0 && 
-                    <ul className="list-group list-group-flush">
-                        {ordered.map((filter, i) =>
-                            <li className="list-group-item" key={i}>
-                                <MetadataFilterConfigurationListItem
-                                    filter={ filter }
-                                    index={i}
-                                    isFirst={ first === filter.resourceId }
-                                    isLast={ last === filter.resourceId }
-                                    editable={ editable }
-                                    onOrderDown={onOrderDown}
-                                    onOrderUp={onOrderUp}
-                                    onRemove={() => onDelete(filter.resourceId)}
-                                />
-                            </li>
-                        )}
-                    </ul>
-                    }
-                    { filters && filters.length < 1 &&
-                    <div className="alert alert-info m-4">
-                        <h3><Translate value="message.no-filters">No Filters</Translate></h3>
-                        <p><Translate value="message.no-filters-added">No filters have been added to this Metadata Provider</Translate></p>
-                    </div>
-                    }
-                </>
+        <MetadataFilters providerId={provider.resourceId} types={MetadataFilterTypes}>
+            {(filters, onUpdate, onDelete, onEnable, loading) =>
+            <Ordered path={`/MetadataResolvers/${provider.resourceId}/FiltersPositionOrder` } entities={filters}>
+                {(ordered, first, last, onOrderUp, onOrderDown) =>
+                    <>
+                        {ordered.length > 0 && 
+                        <ul className="list-group list-group-flush">
+                            {ordered.map((filter, i) =>
+                                <li className="list-group-item" key={i}>
+                                    <MetadataFilterConfigurationListItem
+                                        filter={ filter }
+                                        index={i}
+                                        loading={loading}
+                                        isFirst={ first === filter.resourceId }
+                                        isLast={ last === filter.resourceId }
+                                        editable={ editable }
+                                        onOrderDown={onOrderDown}
+                                        onOrderUp={onOrderUp}
+                                        onEnable={ onEnable }
+                                        onRemove={() => onDelete(filter.resourceId)}
+                                    />
+                                </li>
+                            )}
+                        </ul>
+                        }
+                        { filters && filters.length < 1 &&
+                        <div className="alert alert-info m-4">
+                            <h3><Translate value="message.no-filters">No Filters</Translate></h3>
+                            <p><Translate value="message.no-filters-added">No filters have been added to this Metadata Provider</Translate></p>
+                        </div>
+                        }
+                    </>
+                }
+            </Ordered>
             }
-        </Ordered>
+        </MetadataFilters>
     );
 }
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowCircleDown, faArrowCircleUp, faChevronUp, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
 import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 
 import { Translate } from '../../../../i18n/components/translate';
 import { Link } from 'react-router-dom';
@@ -11,7 +12,7 @@ import { MetadataConfiguration } from '../../../component/MetadataConfiguration'
 import { useMetadataConfiguration } from '../../../hooks/configuration';
 import useFetch from 'use-http';
 
-export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst, onOrderUp, onOrderDown, editable, onRemove, index }) {
+export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst, onOrderUp, onOrderDown, onEnable, editable, onRemove, loading, index }) {
     const [open, setOpen] = React.useState(false);
 
     const definition = React.useMemo(() => getDefinition(filter['@type'], ), [filter]);
@@ -49,10 +50,15 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
             }
             <Button variant="link" className="mx-4" onClick={ () => setOpen(!open) }>{ filter.name }</Button>
             <span className="">{ filter['@type'] }</span>
-            <span className="ml-4">
-                <span className="badge badge-primary">
-                    <Translate value={filter.filterEnabled ? 'label.enabled' : 'label.disabled'} />
-                </span>
+            <span className="ml-auto">
+                <Form.Check type="switch"
+                    id={`customSwitch-${filter.resourceId}`}
+                    label={<Translate value={filter.filterEnabled ? 'label.enabled' : 'label.disabled'} />}
+                    checked={filter.filterEnabled}
+                    disabled={loading}
+                    onChange={({ target: { checked } }) => onEnable(filter, checked)} />
+                {filter.disabled && <i className="fa fa-spinner fa-pulse fa-lg fa-fw"></i>}
+
             </span>
         </div>
         {open &&

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
@@ -9,7 +9,7 @@ import { faArrowCircleDown, faArrowCircleUp, faEdit, faTrash } from '@fortawesom
 import { Ordered } from '../../../../dashboard/component/Ordered';
 import { Translate } from '../../../../i18n/components/translate';
 
-export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate, loading}) {
+export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate, onEnable, loading}) {
 
     return (
         <Ordered path={`/MetadataResolvers/${provider.resourceId}/FiltersPositionOrder` } entities={filters}>
@@ -51,7 +51,7 @@ export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate
                                             label={<span className="sr-only">Toggle this switch element</span>}
                                             checked={filter.filterEnabled}
                                             disabled={loading}
-                                            onChange={() => onUpdate({ ...filter, filterEnabled: !filter.filterEnabled })} />
+                                            onChange={({target: { checked }}) => onEnable(filter, checked)} />
                                         {filter.disabled && <i className="fa fa-spinner fa-pulse fa-lg fa-fw"></i>}
                                     </div>
                                 </td>

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilters.js b/ui/src/app/metadata/domain/filter/component/MetadataFilters.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import { useMetadataFilters } from '../../../hooks/api';
 import { DeleteConfirmation } from '../../../component/DeleteConfirmation';
+import { NotificationContext, createNotificationAction } from '../../../../notifications/hoc/Notifications';
 
 export const MetadataFiltersContext = React.createContext();
 
 export function MetadataFilters ({ providerId, types = [], filters, children }) {
 
+    const { dispatch } = React.useContext(NotificationContext);
+
     const { put, del, get, response, loading } = useMetadataFilters(providerId, {
         cachePolicy: 'no-cache'
     });
@@ -23,12 +26,31 @@ export function MetadataFilters ({ providerId, types = [], filters, children })
         await put(`/${filter.resourceId}`, filter);
         if (response.ok) {
             loadFilters(providerId);
+            dispatch(createNotificationAction(
+                `Metadata Filter has been updated.`
+            ));
+        }
+    }
+
+    async function enableFilter(filter, enabled) {
+        await put(`/${filter.resourceId}`, {
+            ...filter,
+            filterEnabled: enabled
+        });
+        if (response.ok) {
+            dispatch(createNotificationAction(
+                `Metadata Filter has been ${enabled ? 'enabled' : 'disabled'}.`
+            ));
+            loadFilters(providerId);
         }
     }
 
     async function deleteFilter(filterId) {
         await del(`/${filterId}`);
         if (response.ok) {
+            dispatch(createNotificationAction(
+                `Metadata Filter has been deleted.`
+            ));
             loadFilters();
         }
     }
@@ -50,7 +72,7 @@ export function MetadataFilters ({ providerId, types = [], filters, children })
         <DeleteConfirmation title={`message.delete-filter-title`} body={`message.delete-filter-body`}>
             {(block) =>
                 <MetadataFiltersContext.Provider value={filterData}>
-                    {children(filterData, onUpdate, (id) => block(() => onDelete(id)), loading)}
+                    {children(filterData, onUpdate, (id) => block(() => onDelete(id)), enableFilter, loading)}
                 </MetadataFiltersContext.Provider>
             }
         </DeleteConfirmation>

diff --git a/ui/src/app/metadata/editor/MetadataFilterList.js b/ui/src/app/metadata/editor/MetadataFilterList.js
@@ -90,12 +90,13 @@ export function MetadataFilterList() {
                         <div className="col-lg-9">
                             {definition && schema && current &&
                                 <MetadataFilters providerId={current.resourceId} types={MetadataFilterTypes}>
-                                    {(filters, onUpdate, onDelete, loading) =>
+                                    {(filters, onUpdate, onDelete, onEnable, loading) =>
                                         <MetadataFilterEditorList
                                             editable={true}
                                             loading={loading}
                                             provider={current}
                                             filters={filters}
+                                            onEnable={onEnable}
                                             onUpdate={onUpdate}
                                             onDelete={onDelete} />
                                     }

diff --git a/ui/src/app/metadata/hoc/MetadataSchema.js b/ui/src/app/metadata/hoc/MetadataSchema.js
@@ -9,7 +9,9 @@ export function MetadataSchema({ type, children, wizard = false }) {
 
     const definition = React.useMemo(() => wizard ? getWizard(type) : getDefinition(type), [type, wizard]);
 
-    const { get, response } = useFetch(``, {}, []);
+    const { get, response } = useFetch(``, {
+        cachePolicy: 'no-cache'
+    });
 
     const [schema, setSchema] = React.useState();
 

diff --git a/ui/src/app/metadata/hoc/MetadataSelector.js b/ui/src/app/metadata/hoc/MetadataSelector.js
@@ -23,7 +23,7 @@ export function MetadataSelector({ children, ...props }) {
 
     const { get, response } = useMetadataEntity(type);
 
-    const [metadata, setMetadata] = React.useState([]);
+    const [metadata, setMetadata] = React.useState();
 
     async function loadMetadata(id) {
         const source = await get(`/${id}`);
@@ -34,7 +34,7 @@ export function MetadataSelector({ children, ...props }) {
 
     const reload = () => loadMetadata(id);
 
-    React.useEffect(() => { loadMetadata(id) }, [id]);
+    React.useEffect(reload, [id]);
 
     return (
         <>

diff --git a/ui/src/app/metadata/hooks/api.js b/ui/src/app/metadata/hooks/api.js
@@ -61,7 +61,8 @@ export const xmlRequestInterceptor = ({ options }) => {
 export function useMetadataEntityXml(type = 'source', opts = {
     interceptors: {
         request: xmlRequestInterceptor
-    }
+    },
+    cachePolicy: 'no-cache'
 }) {
     return useFetch(`${API_BASE_PATH}${getMetadataPath(type)}`, opts);
 }