Fix bugs with select

GilbertCherrie · GilbertCherrie · commit 28818489aebd · 2025-03-26T12:23:00.000-04:00
diff --git a/app/javascript/components/automate-entry-points/index.jsx b/app/javascript/components/automate-entry-points/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Loading, Modal, ModalBody } from 'carbon-components-react';
-import PropTypes, { number } from 'prop-types';
+import PropTypes from 'prop-types';
 import {
   Document16,
   Folder16,
@@ -18,12 +18,14 @@ const initialData = [
   },
 ];
 
-const MultiSelectCheckboxAsync = () => {
+const AutomateEntryPoints = ({
+  selected, selectedValue, showModal, setShowModal, setSelectedValue,
+}) => {
   const [data, setData] = useState(initialData);
+  const [isLoading, setIsLoading] = useState(true);
   const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState([]);
-  const [open, setOpen] = useState(true);
-  const [selectedValue, setSelectedValue] = useState();
   const [disableSubmit, setDisableSubmit] = useState(true);
+  const [selectedNode, setSelectedNode] = useState();
 
   const updateTreeData = (list, id, children) => {
     const data = list.map((node) => {
@@ -35,6 +37,18 @@ const MultiSelectCheckboxAsync = () => {
     return data.concat(children);
   };
 
+  useEffect(() => {
+    if (selectedValue.element) {
+      data.forEach((node) => {
+        if (node.id === selectedValue.element.id) {
+          console.log(document.getElementById(node.id));
+          document.getElementById(node.id).classList.add('currently-selected');
+          document.getElementById(node.id).style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
+        }
+      });
+    }
+  }, [selectedValue]);
+
   useEffect(() => {
     miqSparkleOn();
     const newChildren = [];
@@ -57,6 +71,7 @@ const MultiSelectCheckboxAsync = () => {
         resolve();
       }, 1000);
     })).then(() => {
+      setIsLoading(false);
       miqSparkleOff();
     });
   }, []);
@@ -120,18 +135,40 @@ const MultiSelectCheckboxAsync = () => {
     }
   };
   wrappedOnLoadData.propTypes = {
-    element: PropTypes.objectOf({ children: PropTypes.array, id: number }).isRequired,
+    element: PropTypes.objectOf({ children: PropTypes.array, id: PropTypes.number }).isRequired,
   };
   wrappedOnLoadData.defaultProps = {
   };
 
   const onSelect = (value) => {
+    console.log(value.element);
     if (value.isBranch === false && value.isSelected) {
-      setSelectedValue(value);
+      data.forEach((node) => {
+        if (selectedNode && (node.id === selectedNode.element.id)) {
+          console.log(selectedNode);
+          document.getElementById(node.id).style.backgroundColor = 'transparent';
+          // #b8b8b8
+          // document.getElementById(node.id).classList.remove('prevSelected');
+          // document.getElementById(node.id).parentNode.className = 'tree-leaf-list-item';
+          // document.getElementById(node.id).className = 'tree-node';
+          // document.getElementById(node.id).setAttribute('aria-selected', 'false');
+        }
+      });
+      document.getElementById(value.element.id).style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
+      setSelectedNode(value);
       setDisableSubmit(false);
     }
   };
 
+  const onExpand = ((value) => {
+    console.log('test');
+    console.log(value);
+    console.log(selectedNode);
+    if (value.isExpanded && selectedNode && document.getElementById(selectedNode.element.id)) {
+      document.getElementById(selectedNode.element.id).style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
+    }
+  });
+
   const FolderIcon = ({ isOpen }) =>
     (isOpen ? (
       <FolderOpen16 className="icon" />
@@ -148,31 +185,32 @@ const MultiSelectCheckboxAsync = () => {
 
   const FileIcon = () => <Document16 className="icon" />;
 
-  return (
+  return !isLoading && (
     <Modal
-      open={open}
+      open={showModal}
       primaryButtonText={__('OK')}
       secondaryButtonText={__('Cancel')}
       onRequestSubmit={() => {
-        console.log(selectedValue);
-        setOpen(false);
+        setSelectedValue(selectedNode);
+        setShowModal(false);
       }}
       onRequestClose={() => {
-        setOpen(false);
+        setShowModal(false);
       }}
       onSecondarySubmit={() => {
-        setOpen(false);
+        setShowModal(false);
       }}
       primaryButtonDisabled={disableSubmit}
     >
       <ModalBody>
         <div>
-          <div className="checkbox">
+          <div className="automate_entry_points">
             <TreeView
               data={data}
-              aria-label="Checkbox tree"
+              aria-label="Automate Entry Points tree"
               onSelect={(value) => onSelect(value)}
               onLoadData={wrappedOnLoadData}
+              onExpand={(value) => onExpand(value)}
               togglableSelect
               nodeRenderer={({
                 element,
@@ -192,6 +230,7 @@ const MultiSelectCheckboxAsync = () => {
                   <div
                     {...getNodeProps()}
                     style={{ marginLeft: 40 * (level - 1) }}
+                    id={element.id}
                   >
                     {isBranch && branchNode(isExpanded, element)}
                     {isBranch ? (
@@ -215,10 +254,20 @@ const MultiSelectCheckboxAsync = () => {
   );
 };
 
-MultiSelectCheckboxAsync.propTypes = {
+AutomateEntryPoints.propTypes = {
+  field: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  selected: PropTypes.string,
+  selectedValue: PropTypes.objectOf(PropTypes.any),
+  showModal: PropTypes.bool,
+  setShowModal: PropTypes.func.isRequired,
+  setSelectedValue: PropTypes.func.isRequired,
 };
 
-MultiSelectCheckboxAsync.defaultProps = {
+AutomateEntryPoints.defaultProps = {
+  selected: '',
+  selectedValue: {},
+  showModal: false,
 };
 
-export default MultiSelectCheckboxAsync;
+export default AutomateEntryPoints;
diff --git a/app/javascript/components/automate-entry-points/styles.css b/app/javascript/components/automate-entry-points/styles.css
@@ -58,59 +58,61 @@
   margin-right: 1rem;
 }
 
-.checkbox {
+.automate_entry_points {
   font-size: 16px;
   user-select: none;
   min-height: 320px;
   padding: 20px;
   box-sizing: content-box;
 }
 
-.checkbox .tree,
-.checkbox .tree-node,
-.checkbox .tree-node-group {
+.automate_entry_points .tree,
+.automate_entry_points .tree-node,
+.automate_entry_points .tree-node-group {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.checkbox .tree-branch-wrapper,
-.checkbox .tree-node__leaf {
+.automate_entry_points .tree-branch-wrapper,
+.automate_entry_points .tree-node__leaf {
   outline: none;
 }
 
-.checkbox .tree-node {
+.automate_entry_points .tree-node {
   cursor: pointer;
 }
 
-.checkbox .tree-node .name:hover {
+.automate_entry_points .tree-node .name:hover {
   background: rgba(0, 0, 0, 0.1);
+  background-color: transparent;
 }
 
-.checkbox .tree-node--focused .name {
+.automate_entry_points .tree-node--focused .name {
   background: rgba(0, 0, 0, 0.2);
+  background-color: transparent;
 }
 
-.checkbox .tree-node {
+.automate_entry_points .tree-node {
   display: inline-block;
 }
 
-.checkbox .checkbox-icon {
+.automate_entry_points .checkbox-icon {
   margin: 0 5px;
   vertical-align: middle;
 }
 
-.checkbox button {
+.automate_entry_points button {
   border: none;
   background: transparent;
   cursor: pointer;
 }
 
-.checkbox .arrow {
+.automate_entry_points .arrow {
   margin-left: 5px;
   vertical-align: middle;
 }
 
-.checkbox .arrow--open {
+.automate_entry_points .arrow--open {
   transform: rotate(270deg);
 }
diff --git a/app/javascript/components/embedded-automate-entry-point/index.jsx b/app/javascript/components/embedded-automate-entry-point/index.jsx
@@ -12,12 +12,13 @@ const EmbeddedAutomateEntryPoint = (props) => {
   const { input } = useFieldApi(props);
 
   const [showModal, setShowModal] = useState(false);
-  const [selectedValue, setSelectedValue] = useState({});
+  const [selectedValue, setSelectedValue] = useState();
   const [textValue, setTextValue] = useState('');
 
   useEffect(() => {
-    if (selectedValue && selectedValue.name && selectedValue.name.text) {
-      setTextValue(selectedValue.name.text);
+    console.log(selectedValue);
+    if (selectedValue && selectedValue.element && selectedValue.element.name && selectedValue.element.metadata) {
+      setTextValue(selectedValue.element.metadata.fqname);
     } else {
       setTextValue('');
     }
@@ -32,15 +33,15 @@ const EmbeddedAutomateEntryPoint = (props) => {
 
   return (
     <div>
-      {showModal ? (
-        <AutomateEntryPoints
-          field={field}
-          selected={selected}
-          type={type}
-          setShowModal={setShowModal}
-          setSelectedValue={setSelectedValue}
-        />
-      ) : undefined}
+      <AutomateEntryPoints
+        field={field}
+        selected={selected}
+        selectedValue={selectedValue}
+        showModal={showModal}
+        type={type}
+        setShowModal={setShowModal}
+        setSelectedValue={setSelectedValue}
+      />
       <div className="entry-point-wrapper">
         <div className="entry-point-text-input">
           <TextInput id={id} type="text" labelText={__(label)} onChange={(value) => setTextValue(value.target.value)} value={textValue} />
diff --git a/app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js b/app/javascript/components/terraform-template-catalog-form/terraform-template-catalog-form.schema.js
@@ -38,30 +38,30 @@ const basicInformationTabSchema = (availableCatalogs, tenantTree, roleAllows, zo
         initialValue: 'embedded_automate',
         options: [{ value: 'embedded_automate', label: __('Embedded Automate') }, { value: 'embedded_workflow', label: __('Embedded Workflow') }],
       },
-      {
-        component: componentTypes.TEXT_FIELD,
-        id: 'provisioning_entry_point_automate',
-        name: 'provisioning_entry_point_automate',
-        label: __('Provisioning Entry Point'),
-        initialValue: '/Service/Generic/StateMachines/GenericLifecycle/provision',
-        condition: {
-          when: 'provisioning_entry_point_type',
-          is: 'embedded_automate',
-        },
-      },
       // {
-      //   component: 'embedded-automate-entry-point',
+      //   component: componentTypes.TEXT_FIELD,
       //   id: 'provisioning_entry_point_automate',
       //   name: 'provisioning_entry_point_automate',
-      //   label: 'Provisioning Entry Point',
-      //   field: 'fqname',
-      //   selected: '',
-      //   type: 'provision',
+      //   label: __('Provisioning Entry Point'),
+      //   initialValue: '/Service/Generic/StateMachines/GenericLifecycle/provision',
       //   condition: {
       //     when: 'provisioning_entry_point_type',
       //     is: 'embedded_automate',
       //   },
       // },
+      {
+        component: 'embedded-automate-entry-point',
+        id: 'provisioning_entry_point_automate',
+        name: 'provisioning_entry_point_automate',
+        label: 'Provisioning Entry Point',
+        field: 'fqname',
+        selected: '',
+        type: 'provision',
+        condition: {
+          when: 'provisioning_entry_point_type',
+          is: 'embedded_automate',
+        },
+      },
       {
         component: 'embedded-workflow-entry-point',
         id: 'provisioning_entry_point_workflow',
diff --git a/app/javascript/components/visual-settings-form/index.jsx b/app/javascript/components/visual-settings-form/index.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { Loading } from 'carbon-components-react';
 import MiqFormRenderer from '@@ddf';
 import createSchema from './visual-settings-form.schema';
-import DirectoryTreeView from '../automate-entry-points';
 
 const VisualSettingsForm = ({ recordId }) => {
   const [{ initialValues, timezoneOptions, isLoading }, setState] = useState({ isLoading: true });
@@ -43,7 +42,6 @@ const VisualSettingsForm = ({ recordId }) => {
   }
   return (
     <div>
-      <DirectoryTreeView />
       <MiqFormRenderer
         schema={createSchema(timezoneOptions)}
         initialValues={initialValues}
diff --git a/app/javascript/components/visual-settings-form/visual-settings-form.schema.js b/app/javascript/components/visual-settings-form/visual-settings-form.schema.js
@@ -1,26 +1,20 @@
 import { componentTypes } from '@@ddf';
 
-// const loadData = API.get('/api/automate?depth=1&attributes=klass,id,fqname,domain_fqname,name').then((data) => {
-//   console.log(data);
-//   const tree = [];
-//   if (data && data.resources) {
-//     data.resources.forEach((domain) => {
-//       // console.log(domain);
-//       tree.push({
-//         key: domain.fqname,
-//         icon: 'pficon pficon-folder-close',
-//         selectable: false,
-//         text: domain.name,
-//         tooltip: 'root node',
-//         state: {},
-//       });
-//     });
-//   }
-//   return tree;
-// });
-
 const createSchema = (timezoneOptions) => ({
   fields: [
+    {
+      component: 'embedded-automate-entry-point',
+      id: 'provisioning_entry_point_automate',
+      name: 'provisioning_entry_point_automate',
+      label: 'Provisioning Entry Point',
+      field: 'fqname',
+      selected: '',
+      type: 'provision',
+      // condition: {
+      //   when: 'provisioning_entry_point_type',
+      //   is: 'embedded_automate',
+      // },
+    },
     {
       component: componentTypes.SUB_FORM,
       name: 'general-subform',
diff --git a/app/javascript/components/workflows/workflow-entry-points.jsx b/app/javascript/components/workflows/workflow-entry-points.jsx
