From 4d68c38249e6c5d2f78757977d4fd89626f511cf Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 14 Sep 2021 09:22:02 -0700
Subject: [PATCH] Implemented bundle creation

---
 ui/src/app/core/components/TruncateText.js    | 31 +++++++++++++++++++
 .../source/definition/SourceDefinition.js     |  4 +--
 .../app/metadata/hoc/MetadataFormContext.js   |  2 +-
 .../hoc/attribute/AttributeBundleApi.js       |  2 +-
 .../hoc/attribute/AttributeBundleSelector.js  |  2 +-
 .../view/MetadataAttributeBundleEdit.js       |  4 +--
 .../metadata/view/MetadataAttributeBundles.js |  5 ++-
 7 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 ui/src/app/core/components/TruncateText.js

diff --git a/ui/src/app/core/components/TruncateText.js b/ui/src/app/core/components/TruncateText.js
new file mode 100644
index 000000000..97949d349
--- /dev/null
+++ b/ui/src/app/core/components/TruncateText.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import truncate from 'lodash/truncate';
+
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
+import Button from 'react-bootstrap/Button';
+
+export function TruncateText ({text}) {
+
+    const truncated = React.useMemo(() => truncate(text, {
+        length: 100
+    }), [text]);
+
+    return (
+        <OverlayTrigger
+            placement="top"
+            overlay={
+                <Popover id="foo">
+                    <Popover.Content>
+                        {text}
+                    </Popover.Content>
+                </Popover>
+            }
+        >
+            <Button variant="text">{truncated}</Button>
+        </OverlayTrigger>
+    );
+}
+
+export default TruncateText;
\ No newline at end of file
diff --git a/ui/src/app/metadata/domain/source/definition/SourceDefinition.js b/ui/src/app/metadata/domain/source/definition/SourceDefinition.js
index c650a1f95..676d97aef 100644
--- a/ui/src/app/metadata/domain/source/definition/SourceDefinition.js
+++ b/ui/src/app/metadata/domain/source/definition/SourceDefinition.js
@@ -10,8 +10,8 @@ export const SourceBase = {
     label: 'Metadata Source',
     type: '@MetadataProvider',
     steps: [],
-    //schema: `${API_BASE_PATH}/ui/MetadataSources`,
-    schema: `/assets/schema/source/metadata-source.json`,
+    schema: `${API_BASE_PATH}/ui/MetadataSources`,
+    //schema: `/assets/schema/source/metadata-source.json`,
 
     parser: (data) => removeNull(data, true),
 
diff --git a/ui/src/app/metadata/hoc/MetadataFormContext.js b/ui/src/app/metadata/hoc/MetadataFormContext.js
index 12fd598e8..2fe2d1dff 100644
--- a/ui/src/app/metadata/hoc/MetadataFormContext.js
+++ b/ui/src/app/metadata/hoc/MetadataFormContext.js
@@ -64,7 +64,6 @@ function MetadataForm({ children, initial = {} }) {
         metadata
     });
 
-
     const contextValue = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
 
     return (
@@ -113,6 +112,7 @@ function useFormattedMetadata(initial = {}) {
     const definition = React.useContext(MetadataDefinitionContext);
     const schema = React.useContext(MetadataSchemaContext);
     const obj = React.useContext(MetadataObjectContext);
+
     return definition.formatter(initial ? initial : obj, schema);
 }
 
diff --git a/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js b/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js
index fd8651840..37e0dd1bf 100644
--- a/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js
+++ b/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js
@@ -28,7 +28,7 @@ export function AttributeBundleApi({ id, children }) {
     }
 
     async function update(id, body, cb) {
-        const b = await put(`/${id}`, body);
+        const b = await put(``, body);
         if (response.ok) {
             dispatch(createNotificationAction(
                 `Bundle has been updated.`
diff --git a/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js b/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js
index 7cf055b38..726ef1e1e 100644
--- a/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js
+++ b/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export function AttributeBundleSelector({ id, find, children }) {
-    const [bundle, setBundle] = React.useState([]);
+    const [bundle, setBundle] = React.useState();
 
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
diff --git a/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js b/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
index 914cb4347..87eeb9db0 100644
--- a/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
+++ b/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
@@ -54,11 +54,11 @@ export function MetadataAttributeBundleEdit() {
                                 {bundle &&
                                     <MetadataForm initial={bundle}>
                                         <MetadataAttributeEditor definition={definition}>
-                                            {(filter, errors) =>
+                                            {(data, errors) =>
                                                 <React.Fragment>
                                                     <Button variant="info" className="mr-2"
                                                         type="button"
-                                                        onClick={() => update(filter)}
+                                                        onClick={() => update(data.resourceId, data, gotoDetail)}
                                                         disabled={errors.length > 0 || loading}
                                                         aria-label="Save changes to the bundle">
                                                         <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
diff --git a/ui/src/app/metadata/view/MetadataAttributeBundles.js b/ui/src/app/metadata/view/MetadataAttributeBundles.js
index 969f25ba5..5d62d8a2d 100644
--- a/ui/src/app/metadata/view/MetadataAttributeBundles.js
+++ b/ui/src/app/metadata/view/MetadataAttributeBundles.js
@@ -10,6 +10,7 @@ import { Translate } from '../../i18n/components/translate';
 import { AttributeBundleApi } from '../hoc/attribute/AttributeBundleApi';
 
 import { AttributeBundleList } from '../hoc/attribute/AttributeBundleList';
+import { TruncateText } from '../../core/components/TruncateText';
 
 export function MetadataAttributeBundles({ entities, onDelete }) {
 
@@ -40,13 +41,15 @@ export function MetadataAttributeBundles({ entities, onDelete }) {
                                                         <th>
                                                             <Translate value="label.bundle-name">Bundle Name</Translate>
                                                         </th>
+                                                        <th><Translate value="label.bundled-attributes">Bundled Attributes</Translate></th>
                                                         <th><span className="sr-only"><Translate value="label.actions">Actions</Translate></span></th>
                                                     </tr>
                                                 </thead>
                                                 <tbody>
                                                     {bundles.map((bundle, i) =>
                                                         <tr key={i}>
-                                                            <td>{bundle.name}</td>
+                                                            <td>{ bundle.name }</td>
+                                                            <td><TruncateText text={ bundle?.attributes?.join(', ') } /></td>
                                                             <td className="text-right">
                                                                 <Link to={`../attributes/bundles/${bundle.resourceId}/edit`} className="btn btn-link text-primary">
                                                                     <FontAwesomeIcon icon={faEdit} size="lg" />