Merge pull request #1236 from merico-dev/1231-able-to-download-panel-schema-and-import-a-panel-with-its-schema

1231 able to download panel schema and import a panel with its schema

Author: GerilLeto

api/package.json

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

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.44.4",
+  "version": "10.45.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/filter/filter-settings/filter-setting.tsx

@@ -20,13 +20,22 @@ const editors = {
   'date-range': FilterEditorDateRange,
 };
 
+export const filterTypeNames = {
+  select: 'Select',
+  'multi-select': 'Multi Select',
+  'tree-select': 'Tree Select',
+  'text-input': 'Text Input',
+  checkbox: 'Checkbox',
+  'date-range': 'Date Range',
+};
+
 const filterTypeOptions = [
-  { label: 'Select', value: 'select' },
-  { label: 'Multi Select', value: 'multi-select' },
-  { label: 'Tree Select', value: 'tree-select' },
-  { label: 'Text Input', value: 'text-input' },
-  { label: 'Checkbox', value: 'checkbox' },
-  { label: 'Date Range', value: 'date-range' },
+  { label: filterTypeNames['select'], value: 'select' },
+  { label: filterTypeNames['multi-select'], value: 'multi-select' },
+  { label: filterTypeNames['tree-select'], value: 'tree-select' },
+  { label: filterTypeNames['text-input'], value: 'text-input' },
+  { label: filterTypeNames['checkbox'], value: 'checkbox' },
+  { label: filterTypeNames['date-range'], value: 'date-range' },
 ];
 
 interface IFilterSetting {

dashboard/src/components/panel/panel-editor/dropdown-menu/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Menu } from '@mantine/core';
 import { useModals } from '@mantine/modals';
-import { IconCamera } from '@tabler/icons-react';
+import { IconCamera, IconCode } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import { ArrowsMaximize, Copy, Download, Refresh, Settings, Trash } from 'tabler-icons-react';
@@ -54,6 +54,9 @@ export const PanelDropdownMenu = observer(({ view }: { view: ViewMetaInstance })
             <Menu.Item onClick={panel.downloadData} icon={<Download size={14} />}>
               Download Data
             </Menu.Item>
+            <Menu.Item onClick={panel.downloadSchema} icon={<IconCode size={14} />}>
+              Download Schema
+            </Menu.Item>
             <Menu.Item onClick={downloadPanelScreenshot} icon={<IconCamera size={14} />}>
               Screenshot
             </Menu.Item>

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 { TAdditionalQueryInfo } from '~/api-caller/request';
 import {
   formatSQLSnippet,
   getInitialFiltersConfig,
@@ -29,10 +30,10 @@ import {
   TPayloadForSQL,
   TPayloadForViz,
 } from '~/model';
-import { PanelModelInstance, PanelsModel } from '../panels';
-import { getInitialDashboardViewsModel, ViewsModel } from '../views';
 import { payloadToDashboardState } from '~/utils/dashboard-state';
-import { TAdditionalQueryInfo } from '~/api-caller/request';
+import { UsageRegs } from '~/utils/usage';
+import { PanelsModel } from '../panels';
+import { getInitialDashboardViewsModel, ViewsModel } from '../views';
 
 const _ContentModel = types
   .model({
@@ -233,12 +234,11 @@ const _ContentModel = types
     },
     get sqlSnippetsUsage() {
       const usages: SQLSnippetUsageType[] = [];
-      const reg = /(?<=sql_snippets\.)([^}.]+)/gm;
       self.queries.current.forEach((q) => {
         if (!q.typedAsSQL) {
           return;
         }
-        const keys = _.uniq(q.sql.match(reg));
+        const keys = _.uniq(q.sql.match(UsageRegs.sqlSnippet));
         keys.forEach((k) => {
           usages.push({
             queryID: q.id,
@@ -285,6 +285,42 @@ const _ContentModel = types
       self.panels.append(getNewPanel(id));
       self.views.findByID(viewID)?.appendPanelID(id);
     },
+    applyJSONSchema(partialSchema: AnyObject) {
+      const { panels, filters, definition = {} } = partialSchema;
+      const { queries, sqlSnippets, mock_context } = definition;
+
+      // PANELS
+      if (Array.isArray(panels)) {
+        const newPanels = panels.map((p) => ({
+          ...p,
+          id: new Date().getTime().toString(),
+        }));
+        self.panels.appendMultiple(newPanels);
+
+        const panelIDs = newPanels.map((p) => p.id);
+        self.views.VIE?.appendPanelIDs(panelIDs);
+      }
+
+      // FILTERS
+      if (Array.isArray(filters)) {
+        self.filters.appendMultiple(filters);
+      }
+
+      // QUERIES
+      if (Array.isArray(queries)) {
+        self.queries.appendMultiple(queries);
+      }
+
+      // SQL SNIPPETS
+      if (Array.isArray(sqlSnippets)) {
+        self.sqlSnippets.appendMultiple(sqlSnippets);
+      }
+
+      // MOCK_CONTEXT
+      if (mock_context && Object.keys(mock_context).length > 0) {
+        self.mock_context.defaults(mock_context);
+      }
+    },
   }))
   .actions((self) => {
     function setupAutoSave() {

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

@@ -24,6 +24,7 @@ export type NavActionType = {
     | '_Add_A_QUERY_'
     | '_Add_A_VIEW_'
     | '_Add_A_PANEL_'
+    | '_FILTERS_SETTINGS_'
     | '_SQL_SNIPPETS_SETTINGS_'
     | '_QUERIES_SETTINGS_';
   parentID?: string; // for panel only
@@ -47,6 +48,7 @@ function getActionOption(_action_type: NavActionType['_action_type']): NavAction
 export type ValidEditorPathType =
   | ['_QUERY_VARS_']
   | ['_MOCK_CONTEXT_']
+  | ['_FILTERS_']
   | ['_FILTERS_', string]
   | ['_SQL_SNIPPETS_']
   | ['_SQL_SNIPPETS_', string]
@@ -108,7 +110,7 @@ export const EditorModel = types
           label: 'Filters',
           value: '_FILTERS_',
           Icon: IconFilter,
-          children: [...filters.options, getActionOption('_Add_A_Filter_')],
+          children: [getActionOption('_FILTERS_SETTINGS_'), ...filters.options, getActionOption('_Add_A_Filter_')],
           _type: 'GROUP',
         },
         {

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import {
   addDisposer,
   addMiddleware,
@@ -40,6 +41,12 @@ export const FiltersModel = types
     }),
   )
   .views((self) => ({
+    get idSet() {
+      return new Set(self.current.map((f) => f.id));
+    },
+    get keySet() {
+      return new Set(self.current.map((f) => f.key));
+    },
     get options() {
       return self.current.map(
         (f) =>
@@ -67,6 +74,9 @@ export const FiltersModel = types
         value: f.key,
       }));
     },
+    get sortedList() {
+      return _.sortBy(self.current, (o) => o.label.toLowerCase());
+    },
   }))
   .actions((self) => {
     return {
@@ -76,6 +86,14 @@ export const FiltersModel = types
       append(item: FilterMetaInstance) {
         self.current.push(item);
       },
+      appendMultiple(items: FilterMetaInstance[]) {
+        if (items.length === 0) {
+          return;
+        }
+
+        const newItems = items.filter((item) => !self.idSet.has(item.id));
+        self.current.push(...newItems);
+      },
       remove(index: number) {
         self.current.splice(index, 1);
       },

dashboard/src/dashboard-editor/model/panels/panels.ts

@@ -47,6 +47,13 @@ export const PanelsModel = types
     append(item: PanelModelSnapshotIn) {
       self.list.push(item);
     },
+    appendMultiple(items: PanelModelSnapshotIn[]) {
+      if (items.length === 0) {
+        return;
+      }
+
+      self.list.push(...items);
+    },
     remove(index: number) {
       self.list.splice(index, 1);
     },

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

@@ -24,6 +24,14 @@ export const QueriesModel = QueriesRenderModel.views((self) => ({
   append(item: QueryRenderModelInstance) {
     self.current.push(item);
   },
+  appendMultiple(items: QueryRenderModelInstance[]) {
+    if (items.length === 0) {
+      return;
+    }
+
+    const newItems = items.filter((item) => !self.idSet.has(item.id));
+    self.current.push(...newItems);
+  },
   remove(index: number) {
     self.current.splice(index, 1);
   },

dashboard/src/dashboard-editor/model/sql-snippets/index.ts

@@ -25,6 +25,15 @@ export const SQLSnippetsModel = SQLSnippetsRenderModel.views((self) => ({
     append(item: SQLSnippetRenderModelSnapshotIn) {
       self.current.push(item);
     },
+
+    appendMultiple(items: SQLSnippetRenderModelSnapshotIn[]) {
+      if (items.length === 0) {
+        return;
+      }
+
+      const newItems = items.filter((item) => !self.keySet.has(item.key));
+      self.current.push(...newItems);
+    },
     remove(index: number) {
       self.current.splice(index, 1);
     },