Added filter target preview

TIER · May 27, 2021 · 4bfd910 · 4bfd910
1 parent 48841fa
commit 4bfd910
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 51 deletions.
diff --git a/backend/src/main/resources/entity-attributes-filters-ui-schema.json b/backend/src/main/resources/entity-attributes-filters-ui-schema.json
@@ -45,13 +45,6 @@
                 "value": {
                     "title": "label.filter-target-value",
                     "type": "array",
-                    "buttons": [
-                        {
-                            "id": "preview",
-                            "label": "action.preview",
-                            "widget": "icon-button"
-                        }
-                    ],
                     "minItems": 1,
                     "uniqueItems": true,
                     "items": {

diff --git a/ui/src/app/core/utility/download_as_xml.js b/ui/src/app/core/utility/download_as_xml.js
@@ -1,7 +1,6 @@
 import * as FileSaver from 'file-saver';
 
-export const downloadAsXml = (entity, xml) => {
-    const name = entity.name ? entity.name : entity.serviceProviderName;
+export const downloadAsXml = (fileName, xml) => {
     const blob = new Blob([xml], { type: 'text/xml;charset=utf-8' });
-    FileSaver.saveAs(blob, `${name}.xml`);
+    FileSaver.saveAs(blob, `${fileName}.xml`);
 }
diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 import Translate from '../../../i18n/components/translate';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAsterisk, faCaretDown, faCaretUp, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+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';
@@ -12,6 +12,8 @@ import queryString from 'query-string';
 import API_BASE_PATH from '../../../App.constant';
 import isNil from 'lodash/isNil';
 
+import { FilterTargetPreview } from '../../../metadata/hoc/FilterTargetPreview';
+
 const ToggleButton = ({ isOpen, onClick, disabled }) => (
     <button
         type="button"
@@ -242,19 +244,25 @@ const FilterTargetField = ({
                         <ul className="list-group list-group-sm list-group-scroll">
                         {selectedTarget.map(id => 
                             <li key={id} className="list-group-item d-flex justify-content-between align-items-center">
-                                { id }
-                                <span>
-                                    {/*getButtonConfig(id).map(button => (
-
-                                        <sf-form-element-action
-                                        [button] = "button"
-                                        [formProperty] = "formProperty" >
-                                        </sf-form-element-action>
-                                    ))*/}
-                                    <button className="btn btn-link text-right" onClick={() => removeId(id)}>
-                                        <FontAwesomeIcon icon={faTrash} size="lg" className="text-danger" />
-                                    </button>
-                                </span>
+                                <FilterTargetPreview entityId={id}>
+                                    {(preview, loading, xml) => (
+                                        <React.Fragment>
+                                            {id}
+                                            <span>
+                                                {preview &&
+                                                    <button disabled={loading || !xml} type="button" className="btn btn-link text-right" onClick={() => preview(id)}>
+                                                        <FontAwesomeIcon icon={loading ? faSpinner : xml ? faEye : faEyeSlash} pulse={loading} size="lg" className="text-success sr-hidden" />
+                                                        <span className="sr-only"><Translate value="action.preview">Preview</Translate></span>
+                                                    </button>
+                                                }
+                                                <button type="button" className="btn btn-link text-right" onClick={() => removeId(id)}>
+                                                    <FontAwesomeIcon icon={faTrash} size="lg" className="text-danger sr-hidden" />
+                                                    <span className="sr-only"><Translate value="action.remove">Remove</Translate></span>
+                                                </button>
+                                            </span>
+                                        </React.Fragment>
+                                    )}
+                                </FilterTargetPreview>
                             </li>
                         )}
                         </ul>

diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -4,7 +4,7 @@ import React from 'react';
 import Translate from '../../../i18n/components/translate';
 import { usePropertyWidth } from './hooks';
 import { PropertyValue } from './PropertyValue';
-
+import { FilterTargetPreview } from '../../hoc/FilterTargetPreview';
 
 
 const isUri = (value) => {
@@ -20,7 +20,7 @@ const isUrl = (str) => {
     return isUri(str);
 }
 
-export function ArrayProperty ({ property, columns, onPreview }) {
+export function ArrayProperty ({ property, columns, preview }) {
 
     const width = usePropertyWidth(columns);
 
@@ -98,15 +98,20 @@ export function ArrayProperty ({ property, columns, onPreview }) {
                                     {(v && v.length > 0) &&
                                         <ul style={ {width} } className="list-unstyled py-2 m-0">
                                             {v.map((item, idx) => 
-                                                <li key={idx} className={`text-truncate border-bottom border-light py-2 ${v.length > 1 ? '' : 'border-0'}`}>
-                                                    {onPreview && isUrl(item) &&
-                                                        <>
-                                                        <button className="btn btn-link" onClick={() => onPreview(item)}>
-                                                            <FontAwesomeIcon icon={faEye} size="lg" className="text-success" />
-                                                        </button>&nbsp;
-                                                        </>
+                                                <li key={idx} className={`d-flex align-items-center justify-content-between w-100 text-truncate border-bottom border-light py-2 ${v.length > 1 ? '' : 'border-0'}`}>
+                                                    <PropertyValue value={item} name={property.name} className="mr-auto" />
+                                                    {preview && item &&
+                                                        <React.Fragment>
+                                                            <FilterTargetPreview entityId={item}>
+                                                                {(onPreview, loading, data) => (
+                                                                    <button className="btn btn-link" onClick={() => onPreview(item)}>
+                                                                        <FontAwesomeIcon icon={faEye} size="lg" className="text-success" />
+                                                                    </button>
+                                                                )}
+                                                            </FilterTargetPreview>
+                                                            &nbsp;
+                                                        </React.Fragment>
                                                     }
-                                                    <PropertyValue value={item} name={property.name} />
                                                 </li>
                                             )}
                                         </ul>

diff --git a/ui/src/app/metadata/component/properties/FilterTargetProperty.js b/ui/src/app/metadata/component/properties/FilterTargetProperty.js
@@ -2,13 +2,14 @@ import React from 'react';
 import { ArrayProperty } from './ArrayProperty';
 import { PrimitiveProperty } from './PrimitiveProperty';
 
-export function FilterTargetProperty ({ property, columns, onPreview }) {
+export function FilterTargetProperty ({ property, columns }) {
+
     return (
         <>
             {property.properties.map((prop, idx) =>
                 <React.Fragment key={idx}>
                     { prop.type === 'array' ?
-                    <ArrayProperty property={prop} columns={columns} onPreview={onPreview} />
+                    <ArrayProperty property={prop} columns={columns} preview={true} />
                     :
                     <PrimitiveProperty property={prop} columns={columns} />
                     }

diff --git a/ui/src/app/metadata/component/properties/ObjectProperty.js b/ui/src/app/metadata/component/properties/ObjectProperty.js
@@ -3,24 +3,18 @@ import React from 'react';
 import { PrimitiveProperty } from './PrimitiveProperty';
 import { ArrayProperty } from './ArrayProperty';
 import Translate from '../../../i18n/components/translate';
-import { FilterTargetProperty } from './FilterTargetProperty';
 
 export function ObjectProperty ({ property, columns, onPreview }) {
     const getProperty = (prop, idx) => {
         switch(prop.type) {
             case 'array':
-                return <ArrayProperty key={ `p-${idx}` } property={prop} columns={columns} />
+                return <ArrayProperty key={ `p-${idx}` } property={prop} columns={columns} preview={ prop.name === 'label.filter-target-value' } />
             case 'object':
                 return <React.Fragment key={`p-${idx}`}>
-                    {prop.widget && prop.widget.id && prop.widget.id === 'filter-target' ?
-                        <FilterTargetProperty property={prop} columns={columns} onPreview={onPreview} />
-                    :
-                        <React.Fragment>
-                            {prop.name && <h5 className="border-bottom py-2 mb-0 mt-3"><Translate value={prop.name} /></h5>}
-                            <ObjectProperty property={prop} columns={columns} onPreview={onPreview} />
-                        </React.Fragment>
-                    }
-
+                    <React.Fragment>
+                        {prop.name && <h5 className="border-bottom py-2 mb-0 mt-3"><Translate value={prop.name} /></h5>}
+                        <ObjectProperty property={prop} columns={columns} onPreview={onPreview} />
+                    </React.Fragment>
                 </React.Fragment>
             default:
                 return <PrimitiveProperty key={ `p-${idx}`} property={ prop } columns={columns} />

diff --git a/ui/src/app/metadata/component/properties/PropertyValue.js b/ui/src/app/metadata/component/properties/PropertyValue.js
@@ -4,7 +4,7 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 import { usePropertyWidth } from './hooks';
 
-export function PropertyValue ({ name, value, columns }) {
+export function PropertyValue ({ name, value, columns, className }) {
 
     const width = usePropertyWidth(columns);
 
@@ -17,13 +17,13 @@ export function PropertyValue ({ name, value, columns }) {
                     </Popover>
                 )}>
                 <span
-                    className="d-block text-truncate"
+                    className={`d-block text-truncate ${className}`}
                     role="definition"
                     style={columns ? { width } : {}}>
                     {value !== undefined ? value.toString() : (value === false) ? value.toString() : '-'}
                 </span>
             </OverlayTrigger>
-        : <span className="d-block text-truncate" style={columns ? { width } : {}}>-</span>}
+        : <span className={`d-block text-truncate ${className}`} style={columns ? { width } : {}}>-</span>}
         </>
     );
 }
diff --git a/ui/src/app/metadata/hoc/FilterTargetPreview.js b/ui/src/app/metadata/hoc/FilterTargetPreview.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import API_BASE_PATH from '../../App.constant';
+import { useFetch } from 'use-http';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import Translate from '../../i18n/components/translate';
+import { downloadAsXml } from '../../core/utility/download_as_xml';
+
+export function FilterTargetPreview ({ entityId, children }) {
+
+    const [show, setShow] = React.useState(false);
+
+    const preview = () => {
+        setShow(true);
+    };
+
+    const handleClose = () => {
+        setShow(false);
+    };
+
+    //encodeURIComponent(id)
+    /*eaders: new HttpHeaders({
+                    'Accept': 'application/xml'
+                }),
+                responseType: 'text'*/
+
+    const { data, loading } = useFetch(`${API_BASE_PATH}/entities/${ encodeURIComponent(entityId) }`, {
+        cachePolicy: 'no-cache',
+        headers: {
+            'Content-Type': 'application/xml',
+            'Accept': 'application/xml'
+        },
+        responseType: 'text'
+    }, [entityId]);
+
+    console.log(data);
+
+    return (
+        <React.Fragment>
+            {children(preview, loading, data)}
+            <Modal show={show} onHide={handleClose} dialogClassName="modal-xl">
+                <Modal.Header closeButton>
+                    <Modal.Title><Translate value="label.preview-provider">Preview XML</Translate></Modal.Title>
+                </Modal.Header>
+                <Modal.Body><pre className="border p-2 bg-light rounded"><code>{data}</code></pre></Modal.Body>
+                <Modal.Footer>
+                    <Button variant="secondary" onClick={() => downloadAsXml('metadata', data)}>
+                        <Translate value="action.download-file">Download File</Translate>
+                    </Button>
+                    <Button variant="primary" onClick={handleClose}>
+                        <Translate value="action.close">Close</Translate>
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </React.Fragment>
+    );
+}
diff --git a/ui/src/app/metadata/view/MetadataXml.js b/ui/src/app/metadata/view/MetadataXml.js
@@ -15,7 +15,7 @@ export function MetadataXml () {
     const entity = React.useContext(MetadataObjectContext);
     const { type } = useParams();
 
-    const download = () => downloadAsXml(entity, xml);
+    const download = () => downloadAsXml(entity.name ? entity.name : entity.serviceProviderName, xml);
 
     return (
         <>