373 - Hide the DataPillPanel when there are no previous components to…

… provide the data
bytechefhq · Aug 8, 2023 · a329c3b · a329c3b
1 parent 1287f13
commit a329c3b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 42 deletions.
diff --git a/client/src/pages/automation/project/components/DataPillPanel.tsx b/client/src/pages/automation/project/components/DataPillPanel.tsx
@@ -4,6 +4,7 @@ import {
     TooltipProvider,
     TooltipTrigger,
 } from '@/components/ui/tooltip';
+import {useGetComponentDefinitionsQuery} from '@/queries/componentDefinitions.queries';
 import * as Dialog from '@radix-ui/react-dialog';
 import {Cross1Icon, InfoCircledIcon} from '@radix-ui/react-icons';
 import Button from 'components/Button/Button';
@@ -12,14 +13,16 @@ import {useCallback, useState} from 'react';
 
 import {useDataPillPanelStore} from '../stores/useDataPillPanelStore';
 import {useNodeDetailsDialogStore} from '../stores/useNodeDetailsDialogStore';
+import useWorkflowDefinitionStore from '../stores/useWorkflowDefinitionStore';
 import DataPillPanelBody from './DataPillPanelBody';
 
 const DataPillPanel = () => {
     const [panelContainerHeight, setPanelContainerHeight] = useState(0);
     const [dataPillFilterQuery, setDataPillFilterQuery] = useState('');
 
     const {dataPillPanelOpen, setDataPillPanelOpen} = useDataPillPanelStore();
-    const {nodeDetailsDialogOpen} = useNodeDetailsDialogStore();
+    const {currentNode, nodeDetailsDialogOpen} = useNodeDetailsDialogStore();
+    const {componentNames} = useWorkflowDefinitionStore();
 
     const panelContainerRef = useCallback(
         (panelContainer: HTMLDivElement) =>
@@ -29,9 +32,28 @@ const DataPillPanel = () => {
         []
     );
 
+    const currentNodeIndex = componentNames.indexOf(currentNode.name);
+
+    const previousComponentNames =
+        componentNames.length > 1
+            ? componentNames.slice(0, currentNodeIndex)
+            : [];
+
+    const {data: previousComponents} = useGetComponentDefinitionsQuery(
+        {
+            include: previousComponentNames,
+        },
+        !!previousComponentNames.length
+    );
+
     return (
         <Dialog.Root
-            open={nodeDetailsDialogOpen && dataPillPanelOpen}
+            open={
+                nodeDetailsDialogOpen &&
+                dataPillPanelOpen &&
+                !!previousComponentNames.length &&
+                !!previousComponents
+            }
             onOpenChange={() => setDataPillPanelOpen(!dataPillPanelOpen)}
             modal={false}
         >
@@ -91,6 +113,7 @@ const DataPillPanel = () => {
                             <DataPillPanelBody
                                 containerHeight={panelContainerHeight}
                                 dataPillFilterQuery={dataPillFilterQuery}
+                                previousComponents={previousComponents!}
                             />
                         </main>
                     </div>

diff --git a/client/src/pages/automation/project/components/DataPillPanelBody.tsx b/client/src/pages/automation/project/components/DataPillPanelBody.tsx
@@ -1,6 +1,6 @@
 import {ComponentDefinitionModel} from '@/middleware/helios/execution/models';
+import {ComponentDefinitionBasicModel} from '@/middleware/hermes/configuration';
 import {useGetActionDefinitionsQuery} from '@/queries/actionDefinitions.queries';
-import {useGetComponentDefinitionsQuery} from '@/queries/componentDefinitions.queries';
 import {PropertyType} from '@/types/projectTypes';
 import {
     Accordion,
@@ -11,41 +11,26 @@ import {
 import {ChevronDownIcon} from 'lucide-react';
 import InlineSVG from 'react-inlinesvg';
 
-import {useNodeDetailsDialogStore} from '../stores/useNodeDetailsDialogStore';
 import useWorkflowDefinitionStore from '../stores/useWorkflowDefinitionStore';
 import getFilteredProperties from '../utils/getFilteredProperties';
 import DataPill from './DataPill';
 
 const DataPillPanelBody = ({
     containerHeight,
     dataPillFilterQuery,
+    previousComponents,
 }: {
     containerHeight: number;
     dataPillFilterQuery: string;
+    previousComponents: ComponentDefinitionBasicModel[];
 }) => {
-    const {componentActions, componentNames} = useWorkflowDefinitionStore();
-
-    const {currentNode} = useNodeDetailsDialogStore();
+    const {componentActions} = useWorkflowDefinitionStore();
 
     const taskTypes = componentActions?.map(
         (componentAction) =>
             `${componentAction.componentName}/1/${componentAction.actionName}`
     );
 
-    const currentNodeIndex = componentNames.indexOf(currentNode.name);
-
-    const previousComponentNames =
-        componentNames.length > 1
-            ? componentNames.slice(0, currentNodeIndex)
-            : componentNames;
-
-    const {data: previousComponents} = useGetComponentDefinitionsQuery(
-        {
-            include: previousComponentNames,
-        },
-        !!componentNames.length
-    );
-
     const {data: actionData} = useGetActionDefinitionsQuery(
         {taskTypes},
         !!componentActions?.length

diff --git a/client/src/pages/automation/project/components/NodeDetailsDialog.tsx b/client/src/pages/automation/project/components/NodeDetailsDialog.tsx
@@ -109,13 +109,13 @@ const NodeDetailsDialog = () => {
     const previousComponentNames =
         componentNames.length > 1
             ? componentNames.slice(0, currentNodeIndex)
-            : componentNames;
+            : [];
 
     const {data: previousComponents} = useGetComponentDefinitionsQuery(
         {
             include: previousComponentNames,
         },
-        !!componentNames.length
+        !!previousComponentNames.length
     );
 
     const {data: actionData} = useGetActionDefinitionsQuery(
@@ -279,25 +279,29 @@ const NodeDetailsDialog = () => {
                     {currentComponent ? (
                         <div className="flex h-full flex-col divide-y divide-gray-100 bg-white shadow-xl">
                             <Dialog.Title className="flex content-center items-center p-4 text-lg font-medium text-gray-900">
-                                <Button
-                                    aria-label={
-                                        dataPillPanelOpen
-                                            ? 'Close the data pill panel'
-                                            : 'Open the data pill panel'
-                                    }
-                                    className="mr-auto p-0"
-                                    displayType="icon"
-                                    icon={
-                                        dataPillPanelOpen ? (
-                                            <PanelRightOpen className="h-6 w-6 cursor-pointer text-gray-900" />
-                                        ) : (
-                                            <PanelRightClose className="h-6 w-6 cursor-pointer text-gray-900" />
-                                        )
-                                    }
-                                    onClick={() =>
-                                        setDataPillPanelOpen(!dataPillPanelOpen)
-                                    }
-                                />
+                                {!!previousComponentNames.length && (
+                                    <Button
+                                        aria-label={
+                                            dataPillPanelOpen
+                                                ? 'Close the data pill panel'
+                                                : 'Open the data pill panel'
+                                        }
+                                        className="mr-auto p-0"
+                                        displayType="icon"
+                                        icon={
+                                            dataPillPanelOpen ? (
+                                                <PanelRightOpen className="h-6 w-6 cursor-pointer text-gray-900" />
+                                            ) : (
+                                                <PanelRightClose className="h-6 w-6 cursor-pointer text-gray-900" />
+                                            )
+                                        }
+                                        onClick={() =>
+                                            setDataPillPanelOpen(
+                                                !dataPillPanelOpen
+                                            )
+                                        }
+                                    />
+                                )}
 
                                 {currentNode.label}