Merge pull request #1240 from merico-dev/1239-able-to-download-view-schema-and-import-a-view-with-its-schema

1239 able to download view schema and import a view with its schema

Author: GerilLeto

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.45.2",
+  "version": "10.46.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.45.2",
+  "version": "10.46.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -41,7 +41,8 @@
     "popmotion": "^11.0.3",
     "rc-select": "14.1.0",
     "rc-tree-select": "5.5.5",
-    "reactflow": "^11.5.3"
+    "reactflow": "^11.5.3",
+    "uuid": "9.0.1"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "11.11.0",
@@ -83,6 +84,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-grid-layout": "^1.3.2",
+    "@types/uuid": "9.0.5",
     "ahooks": "^3.3.11",
     "ajv": "8.12.0",
     "axios": "^0.27.2",

dashboard/src/dashboard-editor/model/content/index.ts

@@ -18,6 +18,7 @@ import { FiltersModel } from '../filters';
 import { QueriesModel } from '../queries';
 import { SQLSnippetsModel } from '../sql-snippets';
 
+import { v4 as uuidv4 } from 'uuid';
 import { TAdditionalQueryInfo } from '~/api-caller/request';
 import {
   formatSQLSnippet,
@@ -281,24 +282,45 @@ const _ContentModel = types
       self.views.findByID(viewID)?.removePanelID(panelID);
     },
     addANewPanel(viewID: string) {
-      const id = new Date().getTime().toString();
+      const id = uuidv4();
       self.panels.append(getNewPanel(id));
       self.views.findByID(viewID)?.appendPanelID(id);
     },
     applyJSONSchema(partialSchema: AnyObject) {
-      const { panels, filters, definition = {} } = partialSchema;
+      const { views, panels, filters, definition = {} } = partialSchema;
       const { queries, sqlSnippets, mock_context } = definition;
+      const panelIDMap: Map<string, string> = new Map(); // old -> new
 
       // PANELS
       if (Array.isArray(panels)) {
-        const newPanels = panels.map((p) => ({
-          ...p,
-          id: new Date().getTime().toString(),
-        }));
+        const newPanels = panels.map((p) => {
+          const newID = uuidv4();
+          panelIDMap.set(p.id, newID);
+          return {
+            ...p,
+            id: newID,
+          };
+        });
         self.panels.appendMultiple(newPanels);
 
-        const panelIDs = newPanels.map((p) => p.id);
-        self.views.VIE?.appendPanelIDs(panelIDs);
+        // import panels to current view
+        if (!Array.isArray(views) || views.length === 0) {
+          const panelIDs = newPanels.map((p) => p.id);
+          self.views.VIE?.appendPanelIDs(panelIDs);
+        }
+      }
+
+      // VIEWS
+      if (Array.isArray(views)) {
+        const newViews = views.map((v) => {
+          const panelIDs = v.panelIDs.map((oldID: string) => panelIDMap.get(oldID) ?? oldID);
+          return {
+            ...v,
+            id: uuidv4(),
+            panelIDs,
+          };
+        });
+        self.views.appendMultiple(newViews);
       }
 
       // FILTERS

dashboard/src/dashboard-editor/model/views/index.ts

@@ -4,12 +4,14 @@ import { IDashboardView } from '~/types';
 import { PanelsModelInstance } from '../panels';
 
 import { ViewDivisionConfigSnapshotIn, ViewMetaInstance, ViewModalConfigSnapshotIn } from '~/model';
+import { ViewModel, ViewModelInstance } from './view';
 
 export const ViewsModel = types
   .compose(
     'ViewsModel',
     ViewsRenderModel,
     types.model({
+      current: types.optional(types.array(ViewModel), []),
       idOfVIE: types.string, // VIE: view in edit
     }),
   )
@@ -21,7 +23,7 @@ export const ViewsModel = types
       return self.current[0].id === self.idOfVIE;
     },
     get VIE() {
-      return self.current.find(({ id }) => id === self.idOfVIE);
+      return self.current.find(({ id }) => id === self.idOfVIE) as ViewModelInstance;
     },
     get options() {
       return self.current.map((v) => ({
@@ -70,6 +72,13 @@ export const ViewsModel = types
     append(item: ViewRenderModelInstance) {
       self.current.push(item);
     },
+    appendMultiple(items: ViewRenderModelInstance[]) {
+      if (items.length === 0) {
+        return;
+      }
+
+      self.current.push(...items);
+    },
     remove(index: number) {
       self.current.splice(index, 1);
     },

dashboard/src/dashboard-editor/model/views/view.ts

@@ -0,0 +1,41 @@
+import _ from 'lodash';
+import { Instance, SnapshotIn } from 'mobx-state-tree';
+import { EViewComponentType, ViewRenderModel } from '~/model';
+import { AnyObject } from '~/types';
+import { downloadJSON } from '~/utils/download';
+
+export const ViewModel = ViewRenderModel.actions((self) => ({
+  getSchema() {
+    const view = self.json;
+    const panels: AnyObject[] = [];
+    const queries: AnyObject[] = [];
+    self.panels.forEach((p: any) => {
+      const ps = p.getSchema();
+      panels.push(ps.panel);
+      if (ps.queries.length > 0) {
+        queries.push(...ps.queries);
+      }
+    });
+
+    const ret = {
+      views: [view],
+      panels: panels,
+      definition: {
+        queries: _.uniqBy(queries, (q) => q.id),
+      },
+    };
+    return ret;
+  },
+  downloadSchema() {
+    if (self.type === EViewComponentType.Tabs) {
+      console.error(new Error('Please choose a tab first'));
+      return;
+    }
+    const schema = JSON.stringify(this.getSchema(), null, 2);
+    const filename = self.name;
+    downloadJSON(filename, schema);
+  },
+}));
+
+export type ViewModelInstance = Instance<typeof ViewModel>;
+export type ViewModelSnapshotIn = SnapshotIn<ViewModelInstance>;

dashboard/src/dashboard-editor/ui/header/download-this-view/index.tsx

@@ -0,0 +1,55 @@
+import { Button, Sx, Tooltip } from '@mantine/core';
+import { IconCode, IconPlaylistAdd } from '@tabler/icons-react';
+import { observer } from 'mobx-react-lite';
+import { useEditContentModelContext } from '~/contexts';
+import { EViewComponentType } from '~/model';
+
+const ButtonSx: Sx = {
+  height: '30px',
+  borderRight: 'none',
+  borderTop: 'none',
+  borderLeft: '1px solid #e9ecef',
+  borderBottom: '1px solid #e9ecef',
+};
+
+export const DownloadThisView = observer(() => {
+  const contentModel = useEditContentModelContext();
+  const cant = contentModel.views.VIE?.type === EViewComponentType.Tabs;
+  const download = () => contentModel.views.VIE?.downloadSchema();
+  if (cant) {
+    return (
+      <Tooltip label="Please choose a tab first">
+        <Button
+          variant="outline"
+          color="gray"
+          radius={0}
+          size="xs"
+          leftIcon={<IconCode size={16} />}
+          sx={{
+            ...ButtonSx,
+            transform: 'none !important',
+          }}
+        >
+          Download this View
+        </Button>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Button
+      variant="outline"
+      color="blue"
+      radius={0}
+      size="xs"
+      onClick={download}
+      leftIcon={<IconCode size={16} />}
+      sx={{
+        ...ButtonSx,
+        // background: 'rgb(231, 245, 255)',
+      }}
+    >
+      Download this View
+    </Button>
+  );
+});

dashboard/src/dashboard-editor/ui/header/import-with-schema/explain-json-schema.tsx

@@ -165,7 +165,7 @@ const SQLSnippets = ({ content }: Props) => {
 
 const MockContext = ({ content }: Props) => {
   const list = Object.keys(content.definition?.mock_context ?? {});
-  if (!list) {
+  if (list.length === 0) {
     return null;
   }
 

dashboard/src/dashboard-editor/ui/header/import-with-schema/index.tsx

@@ -9,9 +9,9 @@ import { useBoolean } from 'ahooks';
 
 const ButtonSx: Sx = {
   height: '30px',
-  borderRight: 'none',
+  borderLeft: 'none',
   borderTop: 'none',
-  borderLeft: '1px solid #e9ecef',
+  borderRight: '1px solid #e9ecef',
   borderBottom: '1px solid #e9ecef',
 };
 
@@ -35,7 +35,7 @@ export const ImportWithSchema = observer(() => {
             transform: 'none !important',
           }}
         >
-          Import
+          Import...
         </Button>
       </Tooltip>
     );
@@ -52,10 +52,10 @@ export const ImportWithSchema = observer(() => {
         leftIcon={<IconFileImport size={16} />}
         sx={{
           ...ButtonSx,
-          background: 'rgb(231, 245, 255)',
+          // background: 'rgb(231, 245, 255)',
         }}
       >
-        Import
+        Import...
       </Button>
       <Modal
         opened={opened}

dashboard/src/dashboard-editor/ui/header/sub-header.tsx

@@ -2,6 +2,7 @@ import { Box, Group, Sx } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { AddAPanel } from './add-a-panel';
 import { ImportWithSchema } from './import-with-schema';
+import { DownloadThisView } from './download-this-view';
 
 const SubHeaderSx: Sx = {
   position: 'fixed',
@@ -18,9 +19,14 @@ export const SubHeader = observer(() => {
   return (
     <Box sx={SubHeaderSx} pl={{ base: 200, xs: 200, sm: 200, md: 220, lg: 240, xl: 260 }}>
       <Group position="apart" align="center" sx={{ height: '30px' }}>
-        <AddAPanel />
+        <Group position="left" spacing={0}>
+          <AddAPanel />
+          <ImportWithSchema />
+        </Group>
         <Box />
-        <ImportWithSchema />
+        <Group position="right" spacing={0}>
+          <DownloadThisView />
+        </Group>
       </Group>
     </Box>
   );

dashboard/src/model/render-model/dashboard/content/panels/panel.ts

@@ -73,18 +73,22 @@ export const PanelRenderModel = PanelMeta.views((self) => ({
         __TRIGGERS: {},
       };
 
-      const ret = {
+      return {
+        panel,
+        queries: self.queries.map((q) => q.json),
+      };
+    },
+    downloadSchema() {
+      const { panel, queries } = this.getSchema();
+      const schema = {
         panels: [panel],
         definition: {
-          queries: self.queries.map((q) => q.json),
+          queries,
         },
       };
-      return ret;
-    },
-    downloadSchema() {
-      const schema = JSON.stringify(this.getSchema(), null, 2);
+      const schemaStr = JSON.stringify(schema, null, 2);
       const filename = self.name;
-      downloadJSON(filename, schema);
+      downloadJSON(filename, schemaStr);
     },
   }));