Added delete to sources detail

TIER · Apr 28, 2021 · cfa28e0 · cfa28e0
1 parent 1cf70d1
commit cfa28e0
Show file tree

Hide file tree

Showing 11 changed files with 234 additions and 216 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -20,6 +20,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "react-scroll": "^1.8.2",
     "reactstrap": "^8.9.0",
     "sass": "^1.32.11",
     "use-http": "^1.0.20",

diff --git a/ui/src/app/dashboard/container/SourcesTab.js b/ui/src/app/dashboard/container/SourcesTab.js
@@ -11,21 +11,18 @@ export function SourcesTab () {
 
     const [sources, setSources] = React.useState([]);
 
-    const { get, del, response } = useMetadataEntities('source');
+    const { get, response } = useMetadataEntities('source', {
+        cachePolicy: 'no-cache'
+    });
 
     async function loadSources() {
-        const sources = await get('/')
+        const sources = await get('/');
         if (response.ok) {
             setSources(sources);
         }
     }
 
-    async function deleteSource(id) {
-        await del(`/${id}`);
-        if (response.ok) {
-            loadSources();
-        }
-    }
+    const updateSources = () => loadSources();
 
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => { loadSources() }, []);
@@ -40,7 +37,7 @@ export function SourcesTab () {
                 </div>
                 <div className="p-3">
                     <Search entities={sources} searchable={searchProps}>
-                        {(searched) => <SourceList entities={ searched } onDelete={ deleteSource }></SourceList>}
+                        {(searched) => <SourceList entities={ searched } onDelete={ updateSources }></SourceList>}
                     </Search>
                 </div>
             </div>

diff --git a/ui/src/app/metadata/component/MetadataConfiguration.js b/ui/src/app/metadata/component/MetadataConfiguration.js
@@ -35,36 +35,3 @@ export function MetadataConfiguration ({ configuration }) {
         </>
     );
 }
-
-/*<ng-container *ngFor="let section of configuration.sections; let i = index;">
-        <section class="mb-4 config-section-list-item" *ngIf="section && section.properties && section.properties.length">
-            <div class="config-group">
-                <div class="numbered-header d-flex justify-content-start bg-light align-items-center">
-                    <h2 class="title h4 m-0 flex-grow-1">
-                        <span *ngIf="numbered"
-                            class="d-inline-block px-2 py-1 mb-0 h4 number border border-secondary bg-white rounded-lg">
-                            <span *ngIf="i + 1 < 10">0</span>{{ i + 1 }}
-                        </span>
-                        <span class="text ml-2">{{ section.label | translate }}</span>
-                    </h2>
-                    <div class="actions px-2" *ngIf="editable">
-                        <button class="btn btn-link edit-link change-view" (click)="edit(section.id)">
-                            <i class="fa fa-edit"></i>&nbsp;
-                            <translate-i18n key="action.edit">Edit</translate-i18n>
-                        </button>
-                    </div>
-                </div>
-                <div class="p-2">
-                    <ng-container *ngIf="section && section.properties && section.properties.length">
-                        <div class="d-flex border-bottom border-light border-2 py-2">
-                            <strong [ngStyle]="{'width': width}"><translate-i18n key="label.option">Option</translate-i18n></strong>
-                            <strong *ngFor="let date of configuration.dates" [ngStyle]="{'width': width}">
-                                <translate-i18n key="label.value" *ngIf="configuration.dates.length <= 1">Value</translate-i18n>
-                                <span *ngIf="configuration.dates.length > 1">{{ date | date:DATE_FORMAT }}</span>
-                            </strong>
-                        </div>
-                        
-                    </ng-container>
-                </div>
-            </div>
-        </section>*/
diff --git a/ui/src/app/metadata/component/MetadataHeader.js b/ui/src/app/metadata/component/MetadataHeader.js
@@ -3,9 +3,9 @@ import FormattedDate from '../../core/components/FormattedDate';
 
 import Translate from '../../i18n/components/translate';
 
-export function MetadataHeader ({ model, current = true, enabled = true }) {
+export function MetadataHeader ({ model, current = true, enabled = true, children, ...props }) {
     return (
-        <div className="card enabled-status">
+        <div className="card enabled-status" {...props}>
             <div className="card-body">
                 <div className="d-flex justify-content-between">
                     <h5 className="card-title version-title">
@@ -17,7 +17,7 @@ export function MetadataHeader ({ model, current = true, enabled = true }) {
                         <Translate value="label.by">By</Translate>:&nbsp;
                         <span className="author">{model.createdBy }</span>
                     </h5>
-
+                    {children}
                 </div>
 
                 <p className="card-text">

diff --git a/ui/src/app/metadata/component/MetadataOptions.js b/ui/src/app/metadata/component/MetadataOptions.js
@@ -1,7 +1,9 @@
-import { faArrowDown, faHistory } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { faArrowDown, faHistory, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link, useHistory, useParams } from 'react-router-dom';
+
+import { scroller } from 'react-scroll';
 
 import Translate from '../../i18n/components/translate';
 
@@ -12,33 +14,56 @@ import { MetadataConfiguration } from './MetadataConfiguration';
 
 import { useMetadataConfiguration } from '../hooks/configuration';
 import { MetadataViewToggle } from './MetadataViewToggle';
+import { DeleteSourceConfirmation } from '../domain/source/component/DeleteSourceConfirmation';
 
 export function MetadataOptions () {
 
     const metadata = React.useContext(MetadataObjectContext);
+    const history = useHistory();
 
     const { type, id } = useParams();
 
     const configuration = useMetadataConfiguration([metadata]);
 
+    const onScrollTo = (element, offset = 0) => {
+        scroller.scrollTo(element, {
+            duration: 500,
+            smooth: true,
+            offset
+        });
+    };
+
+    const redirectOnDelete = () => history.push('/dashboard');
+
     return (
-        <>
-            <h2 className="mb-4">
+        <DeleteSourceConfirmation>
+            {(onDeleteSource) =>
+            <>
+            <h2 className="mb-4" id="header">
                 <Translate value={`label.${type}-configuration`}>[{type}] configuration</Translate>
             </h2>
             <div className="container">
                 <MetadataHeader
                     current={true}
-                    enabled={type === 'source' ? metadata.enabled : metadata.serviceEnabled}
-                    model={metadata} />
+                    enabled={type === 'source' ? metadata.serviceEnabled : metadata.enabled}
+                    model={metadata}>
+                    {type === 'source' &&
+                        <button className="btn btn-outline btn-sm btn-danger align-self-start"
+                            disabled={metadata.serviceEnabled}
+                            onClick={() => onDeleteSource(metadata.id, redirectOnDelete)}>
+                            <Translate value="action.delete" />
+                            <FontAwesomeIcon icon={faTrash} className="ml-2" />
+                        </button>
+                    }
+                </MetadataHeader>
                 <div className="px-3 my-3 d-flex justify-content-between" id="navigation">
                     <div>
                         <Link className="btn btn-link" to={`/metadata/${type}/${id}/configuration/history`}>
                             <FontAwesomeIcon icon={ faHistory } />&nbsp;
                             <Translate value="action.version-history">Version History</Translate>
                         </Link>
                         {type === 'provider' &&
-                            <button className="btn btn-link" onClick={() => console.log("onScrollTo('filters')")}>
+                            <button className="btn btn-link" onClick={() => onScrollTo('filters')}>
                                 <FontAwesomeIcon icon={faArrowDown} />&nbsp;
                                 <Translate value="label.filters">Filters</Translate>
                             </button>
@@ -47,7 +72,35 @@ export function MetadataOptions () {
                     <MetadataViewToggle />
                 </div>
                 <MetadataConfiguration configuration={ configuration } />
+                <div id="filters">
+                    {type === 'provider' &&
+                        <>
+                            <div className="numbered-header d-flex justify-content-start bg-light align-items-center">
+                                <h2 className="title h4 m-0 ml-2 flex-grow-1">
+                                    <span className="text"><Translate value="label.filters">Filters</Translate></span>
+                                </h2>
+                                <div className="actions px-2">
+                                    <Link className="btn btn-link edit-link change-view"
+                                        to={`/metadata/provider/${id}/filter/new`}>
+                                        <i className="fa fa-gear"></i>&nbsp;
+                                        <Translate value="action.add-filter">Add Filter</Translate>
+                                    </Link>
+                                </div>
+                            </div>
+                            {/*<filter-configuration-list
+                                (onUpdateOrderDown)="updateOrderDown($event)"
+                                (onUpdateOrderUp)="updateOrderUp($event)"
+                                (onRemove)="removeFilter($event)"
+                            [filters]="filters$ | async"></filter-configuration-list>*/}
+                        </>
+                    }
+                </div>
+                <button className="btn btn-link" onClick={ () => onScrollTo('header', -60) }>
+                    <i className="fa fa-chevron-up sr-hidden"></i>&nbsp;
+                    <Translate value="action.back-to-top">Back to Top</Translate>
+                </button>
             </div>
-        </>
+            </>}
+        </DeleteSourceConfirmation>
     );
 }
diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -43,17 +43,25 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
                 <div className={ property.differences ? 'bg-diff' : '' }>
                     <div className="p-2" role="term"><Translate value={property.name}>{ property.name }</Translate></div>
                     {range.map((i) =>
-                        <div className={`py-2 border-top ${!property.differences ? 'bg-diff' : ''}`}>
+                        <div key={i} className={`py-2 border-top ${property.differences ? 'bg-diff' : ''}`}>
                             {Object.keys(property.items.properties).map((prop, n) =>
-                                <div className="d-flex py-2" tabIndex="0">
+                                <div className="d-flex py-2" tabIndex="0" key={`${i}-${n}`}>
                                     {property.differences && <span className="sr-only">Changed:</span> }
                                     {property.items.properties &&
                                         <div style={{ width }} className="pl-4">
                                             <Translate value={property.items.properties[prop].title}>{property.items.properties[prop].title}</Translate>
                                         </div>
                                     }
                                     { property.value.map((version, vIdx) => 
-                                        <PropertyValue columns={columns} value={version} />
+                                        <React.Fragment key={vIdx}>
+                                            {version && version[vIdx] &&
+                                                <PropertyValue name={property.name} columns={columns} value={version[i][prop]} />
+                                            }
+                                            {(!version || !version[vIdx]) && <div style={{ width }}>
+                                                -
+                                            </div>
+                                            }
+                                        </React.Fragment>
                                     )}
                                 </div>
                             )}
@@ -75,15 +83,15 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
                                     {(v && v.length > 0) &&
                                         <ul style={ {width} } className="list-unstyled py-2 m-0">
                                             {v.map((item, idx) => 
-                                                <li className={`text-truncate border-bottom border-light ${v.length > 1 ? 'py-2' : ''} ${'border-0'}`}>
+                                                <li key={idx} className={`text-truncate border-bottom border-light ${v.length > 1 ? 'py-2' : ''} ${'border-0'}`}>
                                                     {onPreview && isUrl(item) &&
                                                         <>
                                                         <button className="btn btn-link" onClick={() => onPreview(item)}>
                                                             <FontAwesomeIcon icon={faEye} size="lg" className="text-success" />
                                                         </button>&nbsp;
                                                         </>
                                                     }
-                                                    { item }
+                                                    <PropertyValue value={item} name={property.name} />
                                                 </li>
                                             )}
                                         </ul>

diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js
@@ -18,11 +18,11 @@ export function PropertyValue ({ name, value, columns }) {
                     id={`Popover-${id}`}
                     className="d-block text-truncate"
                     role="definition"
-                    style={{ width }}>
+                    style={columns ? { width } : {}}>
                     {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}
                 </span>
                 <UncontrolledPopover color="info" trigger="hover" placement="left" target={`Popover-${id}`} delay={500}>
-                    <PopoverBody>{value}</PopoverBody>
+                    <PopoverBody>{value.toString()}</PopoverBody>
                 </UncontrolledPopover>
             </>
         : '-'}

diff --git a/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js b/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js
@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+
+import { useMetadataEntity } from '../../../hooks/api';
+import Translate from '../../../../i18n/components/translate';
+import { noop } from 'lodash';
+
+export function DeleteSourceConfirmation ({children}) {
+
+    const { del, response } = useMetadataEntity('source');
+
+    const cb = React.useRef(null);
+
+    const [deleting, setDeleting] = React.useState(null);
+
+    const onConfirm = (id, cb = () => {}) => {
+        deleteSource(deleting);
+        setDeleting(null);
+    }
+
+    const onDeleteSource = (id, onComplete) => {
+        setDeleting(id);
+        cb.current = onComplete;
+    };
+
+    async function deleteSource(id) {
+        await del(`/${id}`);
+        if (response.ok) {
+            cb.current && typeof cb.current === 'function' ? cb.current() : noop();
+        }
+    }
+
+    return (
+        <>
+            {children(onDeleteSource)}
+            <Modal isOpen={!!deleting} toggle={() => setDeleting(null)}>
+                <ModalHeader toggle={() => setDeleting(null)}><Translate value="message.delete-source-title">Delete Metadata Source?</Translate></ModalHeader>
+                <ModalBody className="d-flex align-content-center">
+                    <FontAwesomeIcon className="text-danger mr-4" size="4x" icon={faExclamationTriangle} />
+                    <p className="text-danger font-weight-bold mb-0">
+                        <Translate value="message.delete-source-body">You are deleting a metadata source. This cannot be undone. Continue?</Translate>
+                    </p>
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="danger" onClick={() => onConfirm(deleting)}>
+                        <Translate value="action.delete">Delete</Translate>
+                    </Button>{' '}
+                    <Button color="secondary" onClick={() => setDeleting(null)}>
+                        <Translate value="action.cancel">Cancel</Translate>
+                    </Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    );
+}