Deprecate ActivityBar

ajthinking · Sep 17, 2024 · ed00447 · ed00447
1 parent cb4885f
commit ed00447
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 127 deletions.
diff --git a/packages/ui/src/components/DataStory/DataStory.tsx b/packages/ui/src/components/DataStory/DataStory.tsx
@@ -23,13 +23,13 @@ function handleRequestError(requestError?: Error): void {
 export const DataStoryComponent = (
   props: DataStoryProps
 ) => {
-  const { client, initSidebarKey, children } = props;
+  const { client, initSidebarKey, children, initDiagram } = props;
   const [selectedNode, setSelectedNode] = useState<ReactFlowNode>();
   const [isSidebarClose, setIsSidebarClose] = useState(!!props.hideSidebar);
   const [updateSelectedNodeData, setUpdateSelectedNodeData] = useState<ReactFlowNode['data']>();
   const [sidebarKey, setSidebarKey] = useState(initSidebarKey ?? '');
   const partialStoreRef = useRef<Partial<StoreSchema>>(null);
-  const [diagram, setDiagram] = useState<Diagram | null>(null);
+  const [diagram, setDiagram] = useState<Diagram | null>(initDiagram || new Diagram());
   const diagramMapRef = useRef<Map<string, Diagram | null>>(new Map())
   const [diagramKey, setDiagramKey] = useState<string>();
   const [activityGroups, setActivityGroups] = useState<Activity[]>([]);
@@ -52,38 +52,6 @@ export const DataStoryComponent = (
   });
   handleRequestError(getNodeDescriptionsError);
 
-  const saveTree = useCallback(async() => {
-    if (diagramKey) {
-      diagramMapRef.current.set(diagramKey, partialStoreRef?.current?.toDiagram?.() ?? null)
-    }
-    const newTree = structuredClone(tree) ?? [];
-    const updateTree = (tree: Tree[]) => {
-      for(const node of tree) {
-        if (node.type === 'file' && diagramMapRef.current.has(node.id)) {
-          node.content = diagramMapRef.current.get(node.id) as Diagram;
-        }
-
-        if (node.type === 'folder' && node.children) {
-          updateTree(node.children);
-        }
-      }
-    }
-    updateTree(newTree);
-
-    client.updateTree({ path: LocalStorageKey, tree: newTree })
-      .then(() => {
-        eventManager.emit({
-          type: DataStoryEvents.SAVE_SUCCESS
-        });
-      })
-      .catch((error) => {
-        eventManager.emit({
-          type: DataStoryEvents.SAVE_ERROR,
-          payload: error
-        });
-      });
-  }, [diagramKey, tree]);
-
   const handleClickExplorerNode = useCallback((node: NodeApi<Tree>) => {
     // store the diagram in the Ref before changing the diagramKey
     if (diagramKey) {
@@ -97,24 +65,6 @@ export const DataStoryComponent = (
     }
   }, [diagramKey]);
 
-  useEffect(() => {
-    if (tree) {
-      const firstFileNode = findFirstFileNode(tree);
-      setDiagram(firstFileNode?.content ?? null);
-      setDiagramKey(firstFileNode?.id);
-    }
-  }, [tree]);
-
-  useEffect(() => {
-    if (!tree?.length) {
-      setActivityGroups([]);
-    } else if (Array.isArray(props.hideActivityBar) && props.hideActivityBar.length) {
-      setActivityGroups(ActivityGroups.filter((activity) => !(props.hideActivityBar as AcitvityBarType[])?.includes(activity.id)));
-    } else {
-      setActivityGroups(ActivityGroups);
-    }
-  }, [tree]);
-
   useEffect(() => {
     if (sidebarKey !== 'node') {
       setSelectedNode(undefined);
@@ -129,6 +79,13 @@ export const DataStoryComponent = (
     }
   }, [sidebarKey]);
 
+  useEffect(() => {
+    if (selectedNode) {
+      setSidebarKey('node');
+      setIsSidebarClose(false);
+    }
+  }, [selectedNode]);
+
   return (
     <DataStoryCanvasProvider>
       <div className="relative h-full w-full">
@@ -137,31 +94,22 @@ export const DataStoryComponent = (
           (treeLoading && !tree)
             ? <LoadingMask/>
             : <Allotment className='h-full border-0.5 relative'>
-              <Allotment.Pane visible={!(props.hideActivityBar === true)} minSize={44} maxSize={44}>
-                <ActivityBar
-                  activityGroups={activityGroups}
-                  selectedNode={selectedNode}
-                  setActiveKey={setSidebarKey}
-                  activeKey={sidebarKey}
-                  onClose={setIsSidebarClose}/>
-              </Allotment.Pane>
               <Allotment.Pane visible={!isSidebarClose} snap maxSize={500} preferredSize={300}>
                 <Sidebar
-                  tree={tree}
-                  handleClickExplorerNode={handleClickExplorerNode}
-                  diagramKey={diagramKey}
-                  nodeDescriptions={nodeDescriptions} nodeDescriptionsLoading={nodeDescriptionsLoading}
+                  nodeDescriptions={nodeDescriptions}
+                  nodeDescriptionsLoading={nodeDescriptionsLoading}
                   partialStoreRef={partialStoreRef}
                   sidebarKey={sidebarKey}
-                  setSidebarKey={setSidebarKey} node={selectedNode}
+                  setSidebarKey={setSidebarKey}
+                  node={selectedNode}
                   onUpdateNodeData={setUpdateSelectedNodeData} onClose={setIsSidebarClose}/>
               </Allotment.Pane>
               {/*The Allotment.Pane will recalculate the width and height of the child components.*/}
               {/*The className is used to address the ReactFlow warning.*/}
               <Allotment.Pane minSize={300} className="h-full w-96">
                 <DataStoryCanvas
                   {...props}
-                  onSave={saveTree}
+                  onSave={() => new Promise(r => r)}
                   key={diagramKey}
                   initDiagram={diagram}
                   ref={partialStoreRef}

diff --git a/packages/ui/src/components/DataStory/sidebar/explorer/explorer.tsx b/packages/ui/src/components/DataStory/sidebar/explorer/explorer.tsx
diff --git a/packages/ui/src/components/DataStory/sidebar/sidebar.tsx b/packages/ui/src/components/DataStory/sidebar/sidebar.tsx
@@ -1,6 +1,5 @@
 import { NodeSettingsForm } from '../Form/nodeSettingsForm';
 import { NodeSettingsSidebarProps } from '../types';
-import { Explorer } from './explorer/explorer';
 import { Placeholder } from '../common/placeholder';
 import { NodeDescription } from '@data-story/core';
 import { Run } from './run';
@@ -10,7 +9,7 @@ import { LoadingMask } from '../common/loadingMask';
 
 const SidebarComponent = (props: NodeSettingsSidebarProps) => {
   const {
-    tree, node, onClose, onUpdateNodeData, sidebarKey, setSidebarKey, diagramKey, handleClickExplorerNode,
+    node, onClose, onUpdateNodeData, sidebarKey, setSidebarKey,
     partialStoreRef, nodeDescriptions, nodeDescriptionsLoading
   } = props;
 
@@ -28,12 +27,6 @@ const SidebarComponent = (props: NodeSettingsSidebarProps) => {
             addNodeFromDescription={(nodeDescription: NodeDescription) => partialStoreRef.current?.addNodeFromDescription?.(nodeDescription)}
             setSidebarKey={setSidebarKey}/>;
       }
-      case 'explorer':
-        return <Explorer handleClickExplorerNode={handleClickExplorerNode} diagramKey={diagramKey} tree={tree} />;
-      case 'diagram':
-        return <Placeholder content={'todo: show diagram configuration'}/>;
-      case 'settings':
-        return <Placeholder content={'todo: show diagram settings, including run and add modal features'}/>;
       case 'node':
         return node?.id && node?.data
           ? <NodeSettingsForm node={node} onClose={onClose} onUpdateNodeData={onUpdateNodeData}/>

diff --git a/packages/ui/src/components/DataStory/types.ts b/packages/ui/src/components/DataStory/types.ts
@@ -167,14 +167,10 @@ export type StoreSchema = {
 export type NodeSettingsSidebarProps = Omit<NodeSettingsFormProps, 'node'> & {
   nodeDescriptions?: NodeDescription[];
   nodeDescriptionsLoading?: boolean;
-  tree?: Tree[];
-  activeBar?: string;
-  diagramKey?: string;
   sidebarKey: string;
   node?: ReactFlowNode;
   setSidebarKey: React.Dispatch<React.SetStateAction<string>>;
   partialStoreRef: React.RefObject<Partial<StoreSchema>>;
-  handleClickExplorerNode: (node: NodeApi<Tree>) => void
 };
 
 export type Activity = {

diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
@@ -8,7 +8,6 @@ export { useDataStoryControls } from './components/DataStory/dataStoryControls';
 export { eventManager, useDataStoryEvent } from './components/DataStory/events/eventManager'
 export { DataStoryEvents, type DataStoryEventType } from './components/DataStory/events/dataStoryEventType'
 export type { DataStoryObservers, DataStoryProps } from './components/DataStory/types'
-export { Explorer } from './components/DataStory/sidebar/explorer/explorer';
 export { default as NodeComponent } from './components/Node/NodeComponent';
 export { WorkspaceApiJSClient } from './components/DataStory/clients/WorkspaceApiJSClient';
 export { WorkspaceSocketClient } from './components/DataStory/clients/WorkspaceSocketClient';