From 9319c71ae3e5d0bd75f9dcf2e5ed1feac36c7d9c Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 7 Sep 2021 13:46:36 -0700
Subject: [PATCH] Implemented bundles for sources

---
 ui/src/app/core/components/Header.js          |  2 +-
 .../widgets/AttributeReleaseWidget.js         | 55 ++++++++++++++-----
 .../hoc/attribute/AttributeBundleApi.js       |  2 +-
 .../hoc/attribute/AttributeBundleList.js      |  1 +
 .../hoc/attribute/AttributeBundleSelector.js  |  2 +-
 .../metadata/view/MetadataAttributeBundles.js |  3 -
 ui/src/app/metadata/wizard/Wizard.js          |  2 +-
 7 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
index dbade4c52..4847c83f5 100644
--- a/ui/src/app/core/components/Header.js
+++ b/ui/src/app/core/components/Header.js
@@ -7,7 +7,7 @@ import Dropdown from 'react-bootstrap/Dropdown';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { faTh, faSignOutAlt, faPlusCircle, faCube, faCubes, faUsersCog, faSpinner, faUserCircle, faCog, faFileArchive, faUserTag, faBoxOpen, faTags, faIdBadge } from '@fortawesome/free-solid-svg-icons';
+import { faTh, faSignOutAlt, faPlusCircle, faCube, faCubes, faUsersCog, faSpinner, faUserCircle, faCog, faBoxOpen, faTags, faIdBadge } from '@fortawesome/free-solid-svg-icons';
 
 import Translate from '../../i18n/components/translate';
 import { useTranslator } from '../../i18n/hooks';
diff --git a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
index 8483f7931..1471f0485 100644
--- a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
+++ b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
@@ -1,10 +1,10 @@
 import React from "react";
 import Form from "react-bootstrap/Form";
+import intersection from 'lodash/intersection';
 import Translate from "../../../i18n/components/translate";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import Button from 'react-bootstrap/Button';
-import { useTranslator } from "../../../i18n/hooks";
 
 const selectValue = (value, selected, all) => {
     const at = all.indexOf(value);
@@ -71,13 +71,49 @@ const AttributeReleaseWidget = ({
         onChange(update);
     }
 
+    const onUncheckBundle = (option) => {
+        const all = (enumOptions).map(({ value }) => value);
+        let update = [
+            ...value
+        ];
+        (option.value).forEach(v => update = deselectValue(v, update, all));
+
+        onChange(update);
+    }
+
     const onClearAll = () => {
         onChange([]);
     }
 
+    const attrs = React.useMemo(() => enumOptions.filter(e => !(typeof e.value === 'string' ? false : true)), [enumOptions]);
+    const bundles = React.useMemo(() => enumOptions.filter(e => (typeof e.value === 'string' ? false : true)), [enumOptions]);
+
+    const bundlelist = React.useMemo(() => bundles.map((b) => (
+        {
+            ...b,
+            selected: intersection(b.value, value).length === b.value.length
+        }
+    )), [bundles, value]);
+    
     return (
         <fieldset>
             <legend><Translate value={label || schema.title} /></legend>
+            {bundles && bundles.length > 0 &&
+            <ul class="list-group list-group-flush">
+                {(bundlelist).map((option) => (
+                <li class="list-group-item d-flex justify-content-between px-1">
+                    <strong>{option.label}</strong>
+                    <Button variant={option.selected ? 'outline-primary' : 'primary'} size="sm"
+                        onClick={() => option.selected ? onUncheckBundle(option) : onCheckBundle(option) }
+                    >
+                        <span className="sr-only"><Translate value="action.select">Select</Translate></span>
+                        <FontAwesomeIcon icon={faCheck} className="" />
+                    </Button>
+                </li>
+                ))}
+            </ul>
+            }
+
             <table className="table table-striped table-sm">
                 <thead>
                     <tr className="table-secondary">
@@ -86,25 +122,15 @@ const AttributeReleaseWidget = ({
                     </tr>
                 </thead>
                 <tbody>
-                    {(enumOptions).map((option, index) => {
+                    {(attrs).map((option, index) => {
                         const checked = value.indexOf(option.value) !== -1;
                         const itemDisabled =
                             enumDisabled && (enumDisabled).indexOf(option.value) !== -1;
-                        const bundled = typeof option.value === 'string' ? false : true;
                         return (
-                            <tr key={index} className={bundled ? 'bg-secondary border-bottom py-4 text-white' : ''}>
-                                <td className="align-middle">{bundled ?
-                                    <strong>{option.label}</strong>
-                                    :
-                                    <Translate value={`label.attribute-${option.label}`}>{option.label}</Translate>
-                                }</td>
+                            <tr key={index}>
+                                <td className="align-middle"><Translate value={`label.attribute-${option.label}`}>{option.label}</Translate></td>
                                 <td className="">
                                     <fieldset className="d-flex justify-content-end">
-                                    {bundled ? 
-                                        <Button variant="outline-primary bg-light" size="sm"
-                                            onClick={() => onCheckBundle(option)}
-                                            >Select</Button>
-                                    :
                                         <div className="custom-control custom-checkbox">
                                             <Form.Check
                                                 custom
@@ -120,7 +146,6 @@ const AttributeReleaseWidget = ({
                                                 disabled={disabled || itemDisabled || readonly}
                                             />
                                         </div>
-                                    }
                                     </fieldset>
                                 </td>
                             </tr>
diff --git a/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js b/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js
index c7ce85380..5abc3d103 100644
--- a/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js
+++ b/ui/src/app/metadata/hoc/attribute/AttributeBundleApi.js
@@ -5,7 +5,7 @@ import API_BASE_PATH from '../../../App.constant';
 import { DeleteConfirmation } from '../../../core/components/DeleteConfirmation';
 import { createNotificationAction, NotificationContext } from '../../../notifications/hoc/Notifications';
 
-const api = '/custom/entity/bundles'
+const api = '/custom/entity/bundles';
 
 export function AttributeBundleApi({ id, children }) {
 
diff --git a/ui/src/app/metadata/hoc/attribute/AttributeBundleList.js b/ui/src/app/metadata/hoc/attribute/AttributeBundleList.js
index 0cf5b54d7..447ca0d1f 100644
--- a/ui/src/app/metadata/hoc/attribute/AttributeBundleList.js
+++ b/ui/src/app/metadata/hoc/attribute/AttributeBundleList.js
@@ -4,6 +4,7 @@ export function AttributeBundleList({ load, children }) {
 
     const [bundles, setBundles] = React.useState([]);
 
+    /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         load((list) => setBundles(list));
     }, []);
diff --git a/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js b/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js
index 2ec7ffe4d..7cf055b38 100644
--- a/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js
+++ b/ui/src/app/metadata/hoc/attribute/AttributeBundleSelector.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import { useParams } from 'react-router-dom';
 
 export function AttributeBundleSelector({ id, find, children }) {
     const [bundle, setBundle] = React.useState([]);
 
+    /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         find(id, (item) => setBundle(item));
     }, []);
diff --git a/ui/src/app/metadata/view/MetadataAttributeBundles.js b/ui/src/app/metadata/view/MetadataAttributeBundles.js
index 056994fcf..969f25ba5 100644
--- a/ui/src/app/metadata/view/MetadataAttributeBundles.js
+++ b/ui/src/app/metadata/view/MetadataAttributeBundles.js
@@ -6,7 +6,6 @@ import Button from 'react-bootstrap/Button';
 import { Link } from 'react-router-dom';
 
 import { Translate } from '../../i18n/components/translate';
-import { useTranslator } from '../../i18n/hooks';
 
 import { AttributeBundleApi } from '../hoc/attribute/AttributeBundleApi';
 
@@ -14,8 +13,6 @@ import { AttributeBundleList } from '../hoc/attribute/AttributeBundleList';
 
 export function MetadataAttributeBundles({ entities, onDelete }) {
 
-    const translator = useTranslator();
-
     return (
         <AttributeBundleApi>
             {(load, find, create, update, remove, loading) =>
diff --git a/ui/src/app/metadata/wizard/Wizard.js b/ui/src/app/metadata/wizard/Wizard.js
index 644c911a4..cc52249fe 100644
--- a/ui/src/app/metadata/wizard/Wizard.js
+++ b/ui/src/app/metadata/wizard/Wizard.js
@@ -6,7 +6,7 @@ const WizardContext = React.createContext();
 const { Provider, Consumer } = WizardContext;
 
 const initialState = {
-    current: 'attribute',
+    current: 'common',
     disabled: false,
     loading: false
 };