Merge pull request #294 from stone-lyl/feat-add-node

feat: move Save from SlotComponents to a first-class citizen in dataStoryControls

packages/docs/components/Playground.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { DataStory, WorkspaceApiJSClient, WorkspaceSocketClient } from '@data-story/ui';
-import { SaveComponent } from './Save';
 import { useRequestApp } from './hooks/useRequestApp';
+import { ToastComponent } from './Toast';
 
 export default Playground;
 
@@ -20,11 +20,10 @@ function Playground({ mode }: {mode?: 'js' | 'node'}) {
     <div className="w-full" style={{ height: 'calc(100vh - 72px)' }} data-cy="playground">
       <DataStory
         client={client}
-        slotComponents={[
-          <SaveComponent/>,
-        ]}
         initSidebarKey="explorer"
-      />
+      >
+        <ToastComponent />
+      </DataStory>
     </div>
   );
 };

packages/docs/components/Save.tsx → packages/docs/components/Toast.tsx

@@ -1,11 +1,7 @@
-import { ControlButton } from '@xyflow/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
-  type DataStoryControlsType,
   DataStoryEvents,
   DataStoryEventType,
-  SaveIcon,
-  useDataStoryControls,
   useDataStoryEvent
 } from '@data-story/ui';
 import { Bounce, toast, ToastContainer, ToastOptions } from 'react-toastify';
@@ -32,37 +28,28 @@ export function successToast(content: string): void {
 }
 
 const initToast = (event: DataStoryEventType) => {
-  if (event.type === DataStoryEvents.RUN_SUCCESS) {
-    successToast('Diagram executed successfully!');
-  }
-
-  if (event.type === DataStoryEvents.RUN_ERROR) {
-    errorToast('Diagram execution failed!');
+  switch (event.type) {
+    case DataStoryEvents.RUN_SUCCESS:
+      successToast('Diagram executed successfully!');
+      break;
+    case DataStoryEvents.RUN_ERROR:
+      console.error(event.payload);
+      errorToast('Diagram execution failed!');
+      break;
+    case DataStoryEvents.SAVE_SUCCESS:
+      successToast('Diagram saved successfully!');
+      break;
+    case DataStoryEvents.SAVE_ERROR:
+      console.error(event.payload);
+      errorToast('Diagram save failed!');
   }
 };
 
-export const SaveComponent = () => {
-  const { onSave } = useDataStoryControls() as DataStoryControlsType;
-
+export const ToastComponent = () => {
   useDataStoryEvent(initToast);
 
-  const handleSave = useCallback(async() => {
-    try {
-      await onSave?.();
-      successToast('Diagram saved successfully!');
-    } catch (error) {
-      errorToast('Diagram save failed!');
-    }
-  }, [onSave]);
-
   return (
     <>
-      <ControlButton
-        title="Save"
-        aria-label="Save"
-        onClick={handleSave}>
-        <SaveIcon/>
-      </ControlButton>
       <ToastContainer/>
     </>
   );

packages/docs/components/demos/ObserversDemo.tsx

@@ -24,6 +24,7 @@ export default ({ mode, observers }:
       <DataStory
         client={client}
         observers={observers}
+        hideControls={['save']}
       />
     </div>
   );

packages/docs/components/demos/TinkerDemo.tsx

@@ -30,6 +30,7 @@ export default () => {
     <div className="w-full h-1/2">
       <DataStory
         client={client}
+        hideControls={['save']}
       />
     </div>
   );

packages/docs/components/demos/Tree/AddNodeDescription.tsx

@@ -36,6 +36,7 @@ export default () => {
       <DataStory
         client={client}
         hideActivityBar={true}
+        hideControls={['save']}
       />
     </div>
   );

packages/docs/components/demos/Tree/MultipleDiagram.tsx

@@ -17,6 +17,7 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
+        hideControls={['save']}
       />
     </div>
   );

packages/docs/components/demos/UnfoldingDemo.tsx

@@ -77,13 +77,16 @@ export default ({ part }: {part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED'}) => {
   return (
     <div className="w-full h-1/4">
       {part === 'MAIN' && <DataStory
+        hideControls={['save']}
         onInitialize={({ run }) => run()}
         client={mainClient}
       />}
       {part === 'NESTED_NODE' && <DataStory
+        hideControls={['save']}
         client={nestedNodeClient}
       />}
       {part === 'MAIN_UNFOLDED' && <DataStory
+        hideControls={['save']}
         client={mainUnfoldedClient}
       />}
     </div>

packages/docs/components/demos/VisualizeDemo.tsx

@@ -107,6 +107,7 @@ export default () => {
             setPoints([])
             run()
           }}
+          hideControls={['save']}
           client={client}
           observers={{
             inputObservers: [{ nodeId: 'Table.1', portId: 'input' }],

packages/ui/src/components/DataStory/DataStory.tsx

@@ -13,6 +13,8 @@ import { LoadingMask } from './common/loadingMask';
 import { Diagram, Tree } from '@data-story/core';
 import { ActivityGroups, findFirstFileNode, LocalStorageKey } from './common/method';
 import { NodeApi } from 'react-arborist';
+import { DataStoryEvents } from './events/dataStoryEventType';
+import { eventManager } from './events/eventManager';
 
 function handleRequestError(requestError?: Error): void {
   if (requestError) console.error(`Error fetching : ${requestError?.message}`);
@@ -21,7 +23,7 @@ function handleRequestError(requestError?: Error): void {
 export const DataStoryComponent = (
   props: DataStoryProps
 ) => {
-  const { client, initSidebarKey } = props
+  const { client, initSidebarKey, children } = props;
   const [selectedNode, setSelectedNode] = useState<ReactFlowNode>();
   const [isSidebarClose, setIsSidebarClose] = useState(!!props.hideSidebar);
   const [updateSelectedNodeData, setUpdateSelectedNodeData] = useState<ReactFlowNode['data']>();
@@ -68,7 +70,18 @@ export const DataStoryComponent = (
     }
     updateTree(newTree);
 
-    client.updateTree({ path: LocalStorageKey, tree: 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>) => {
@@ -119,6 +132,7 @@ export const DataStoryComponent = (
   return (
     <DataStoryCanvasProvider>
       <div className="relative h-full w-full">
+        { children }
         {
           (treeLoading && !tree)
             ? <LoadingMask/>

packages/ui/src/components/DataStory/DataStoryCanvas.tsx

@@ -41,7 +41,7 @@ export const DataStoryCanvas = React.memo(DataStoryCanvasComponent);
 
 const Flow = ({
   initDiagram,
-  hideControls = false,
+  hideControls,
   slotComponents,
   observers,
   onInitialize,

packages/ui/src/components/DataStory/dataStoryControls.tsx

@@ -3,8 +3,9 @@ import { RunIcon } from './icons/runIcon';
 import { AddNodeIcon } from './icons/addNodeIcon';
 import { Diagram } from '@data-story/core';
 import { useStore } from './store/store';
-import React, { useMemo } from 'react';
-import { DataStoryCanvasProps, StoreSchema } from './types';
+import React, { useCallback, useMemo } from 'react';
+import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from './types';
+import { SaveIcon } from './icons/saveIcon';
 
 export type DataStoryControlsType = {
   getDiagram: () => Diagram;
@@ -29,7 +30,7 @@ export function DataStoryControls({
   slotComponents,
   onSave,
 }: {
-  hideControls?: boolean;
+  hideControls?: DataStoryProps['hideControls'];
   setShowRun: (showRun: boolean) => void;
   setShowAddNode: (showAddNode: boolean) => void;
   slotComponents?: React.ReactNode[];
@@ -52,24 +53,42 @@ export function DataStoryControls({
     onSave: onSave
   }), [updateDiagram, toDiagram]);
 
-  if (hideControls) return null;
+  const handleSave = useCallback(() => {
+    onSave?.();
+  }, [onSave]);
+
+  if (hideControls === true) return null;
 
   return <Controls position={'top-left'} showInteractive={false} showZoom={false} showFitView={false}>
-    <ControlButton
+    {[<ControlButton
       title="Run"
-      aria-label="Run"
+      aria-label="run"
+      key="run"
       onClick={() => setShowRun(true)}
     >
       <RunIcon/>
-    </ControlButton>
+    </ControlButton>,
     <ControlButton
       onClick={() => setShowAddNode(true)}
       title="Add Node"
       data-cy="add-node-button"
-      aria-label="Add Node"
+      key="addNode"
+      aria-label="addNode"
     >
       <AddNodeIcon/>
-    </ControlButton>
+    </ControlButton>,
+    <ControlButton
+      title="Save"
+      aria-label="save"
+      key="save"
+      onClick={handleSave}>
+      <SaveIcon/>
+    </ControlButton>].filter((ControlButton) => {
+      if (Array.isArray(hideControls)) {
+        return !hideControls.includes(ControlButton.props['aria-label']);
+      }
+      return true;
+    })}
 
     <DataStoryControlsContext.Provider value={context}>
       {(slotComponents || []).map((component, index) => (

packages/ui/src/components/DataStory/events/dataStoryEventType.ts

@@ -5,6 +5,7 @@ export enum DataStoryEvents {
   'RUN_SUCCESS' = 'RUN_SUCCESS',
   'RUN_ERROR' = 'RUN_ERROR',
   'SAVE_SUCCESS' = 'SAVE_SUCCESS',
+  'SAVE_ERROR' = 'SAVE_ERROR',
 }
 
 export type DataStoryEventType = {

packages/ui/src/components/DataStory/types.ts

@@ -55,11 +55,12 @@ export interface ClientRunParams {
 }
 
 export type AcitvityBarType = 'node' | 'diagram' | 'settings' | 'explorer';
-
+type ControlsType = 'run' | 'addNode' | 'save';
 export type DataStoryProps = {
+  children?: React.ReactNode;
   client: WorkspaceApiClient,
   initDiagram?: Diagram | null;
-  hideControls?: boolean
+  hideControls?: boolean | ControlsType[];
   slotComponents?: React.ReactNode[];
   observers?: DataStoryObservers;
   onInitialize?: DataStoryCallback;