Merge pull request #1167 from merico-dev/1165-able-to-list-delete-unused-queries

1165 able to list delete unused queries

Author: GerilLeto

api/package.json

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

dashboard/package.json

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

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

@@ -165,44 +165,68 @@ const _ContentModel = types
     },
   }))
   .views((self) => ({
-    findQueryUsage(queryID: string) {
+    get queriesUsage() {
       const panelIDMap = self.panels.idMap;
-      const panels: QueryUsageType[] = self.views.current.flatMap((v) =>
-        v.panelIDs
-          .map((id) => panelIDMap.get(id))
-          .filter((p): p is PanelModelInstance => p?.queryIDSet.has(queryID) ?? false)
-          .map((p) => ({
-            type: 'panel',
-            id: p.id,
-            label: p.title ? p.title : p.viz.type,
-            views: [
-              {
-                id: v.id,
-                label: v.name,
-              },
-            ],
-          })),
-      );
+      const usages: QueryUsageType[] = [];
+      self.views.current.forEach((v) => {
+        v.panelIDs.forEach((pid) => {
+          const p = panelIDMap.get(pid);
+          if (!p) {
+            return;
+          }
+
+          const type = 'panel';
+          const label = p.title ? p.title : p.viz.type;
+          const views = [
+            {
+              id: v.id,
+              label: v.name,
+            },
+          ];
+          p.queryIDs.forEach((queryID) => {
+            usages.push({
+              id: pid,
+              queryID,
+              type,
+              label,
+              views,
+            });
+          });
+        });
+      });
 
       const viewIDMap = self.views.idMap;
-      const filters: QueryUsageType[] = self.filters.current
+      self.filters.current
         .filter((f) => {
           const filterQueryID = _.get(f, 'config.options_query_id');
-          return filterQueryID === queryID;
+          return !!filterQueryID;
         })
         .map((f) => ({
           type: 'filter',
           id: f.id,
+          queryID: _.get(f, 'config.options_query_id'),
           label: f.label,
           views: f.visibleInViewsIDs.map((id) => ({
             id,
             label: viewIDMap.get(id)?.name ?? id,
           })),
         }));
-      return panels.concat(filters);
+
+      return _.groupBy(usages, 'queryID');
+    },
+    get hasUnusedQueries() {
+      return self.queries.current.length > Object.keys(this.queriesUsage).length;
+    },
+    findQueryUsage(queryID: string) {
+      return this.queriesUsage[queryID] ?? [];
     },
   }))
   .actions((self) => ({
+    removeUnusedQueries() {
+      const usedQueries = new Set(Object.keys(self.queriesUsage));
+      const ids = self.queries.current.filter((q) => !usedQueries.has(q.id)).map((q) => q.id);
+      self.queries.removeQueries(ids);
+    },
     duplicatePanelByID(panelID: string, viewID: string) {
       const newID = self.panels.duplicateByID(panelID);
       if (!newID) {

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

@@ -18,7 +18,13 @@ export type NavActionType = {
   label: string;
   value: string;
   _type: 'ACTION';
-  _action_type: '_Add_A_Filter_' | '_Add_A_SQL_SNIPPET_' | '_Add_A_QUERY_' | '_Add_A_VIEW_' | '_Add_A_PANEL_';
+  _action_type:
+    | '_Add_A_Filter_'
+    | '_Add_A_SQL_SNIPPET_'
+    | '_Add_A_QUERY_'
+    | '_Add_A_VIEW_'
+    | '_Add_A_PANEL_'
+    | '_QUERIES_SETTINGS_';
   parentID?: string; // for panel only
   Icon: null;
   children: null;
@@ -42,6 +48,7 @@ export type ValidEditorPathType =
   | ['_MOCK_CONTEXT_']
   | ['_FILTERS_', string]
   | ['_SQL_SNIPPETS_', string]
+  | ['_QUERIES_']
   | ['_QUERIES_', string]
   | ['_VIEWS_', string]
   | ['_VIEWS_', string, '_PANELS_', string]
@@ -113,7 +120,7 @@ export const EditorModel = types
           label: 'Queries',
           value: '_QUERIES_',
           Icon: IconDatabase,
-          children: [...queries.options, getActionOption('_Add_A_QUERY_')],
+          children: [getActionOption('_QUERIES_SETTINGS_'), ...queries.options, getActionOption('_Add_A_QUERY_')],
           _type: 'GROUP',
         },
         {

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

@@ -14,6 +14,9 @@ export const QueriesModel = QueriesRenderModel.views((self) => ({
     );
     return _.sortBy(options, (o) => o.label.toLowerCase());
   },
+  get sortedList() {
+    return _.sortBy(self.current, (o) => o.name.toLowerCase());
+  },
 })).actions((self) => ({
   replace(current: Array<QueryRenderModelInstance>) {
     self.current = cast(current);
@@ -34,6 +37,17 @@ export const QueriesModel = QueriesRenderModel.views((self) => ({
       self.current.remove(query);
     }
   },
+  removeQueries(queryIDs: string[]) {
+    const set = new Set(queryIDs);
+    self.current.forEach((q) => {
+      if (set.has(q.id)) {
+        detach(q);
+      }
+    });
+    const list = [...self.current];
+    _.remove(list, (q) => set.has(q.id));
+    self.current = cast(list);
+  },
 }));
 
 export type QueriesModelInstance = Instance<typeof QueriesModel>;

dashboard/src/dashboard-editor/ui/settings/content/edit-queries/index.tsx

@@ -0,0 +1,87 @@
+import { Box, Button, Flex, Stack, Table, Text } from '@mantine/core';
+import { useModals } from '@mantine/modals';
+import { IconTrash } from '@tabler/icons-react';
+import { observer } from 'mobx-react-lite';
+import { useEditDashboardContext } from '~/contexts';
+
+export const EditQueries = observer(() => {
+  const modals = useModals();
+  const model = useEditDashboardContext();
+  const navigateToQuery = (queryID: string) => {
+    model.editor.setPath(['_QUERIES_', queryID]);
+  };
+
+  const removeUnusedQueriesWithConfirmation = () => {
+    modals.openConfirmModal({
+      title: 'Delete ununsed queries?',
+      children: <Text size="sm">This action cannot be undone.</Text>,
+      labels: { confirm: 'Confirm', cancel: 'Cancel' },
+      onCancel: () => console.log('Cancel'),
+      onConfirm: () => model.content.removeUnusedQueries(),
+      confirmProps: { color: 'red' },
+      zIndex: 320,
+    });
+  };
+
+  const usages = model.content.queriesUsage;
+  return (
+    <Stack sx={{ height: '100%' }} spacing="sm" pb={'59px'}>
+      <Box pt={9} pb={8} sx={{ borderBottom: '1px solid #eee' }}>
+        <Text px="md" align="left" sx={{ userSelect: 'none', cursor: 'default' }}>
+          Manage Queries
+        </Text>
+      </Box>
+      <Flex justify="flex-end" align="center" px={12}>
+        <Button
+          variant="subtle"
+          size="xs"
+          color="red"
+          leftIcon={<IconTrash size={14} />}
+          disabled={!model.content.hasUnusedQueries}
+          onClick={removeUnusedQueriesWithConfirmation}
+        >
+          Delete unused queries
+        </Button>
+      </Flex>
+      <Box sx={{ flexGrow: 1, overflow: 'auto' }}>
+        <Table fontSize="sm" highlightOnHover sx={{ tableLayout: 'fixed' }}>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th style={{ width: '200px' }}>Data Source</th>
+              <th style={{ width: '100px', textAlign: 'right' }}>Type</th>
+              <th style={{ width: '100px', textAlign: 'center' }}>Usage</th>
+              <th style={{ width: '300px', paddingLeft: '24px' }}>Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {model.content.queries.sortedList.map((q) => {
+              const usageCount = usages[q.id]?.length ?? 0;
+              return (
+                <tr key={q.id}>
+                  <td>{q.name}</td>
+                  <td>{q.key}</td>
+                  <td style={{ textAlign: 'right' }}>{q.type}</td>
+                  <td
+                    style={{
+                      color: usageCount === 0 ? '#ff0000' : '#000',
+                      fontWeight: usageCount === 0 ? 'bold' : 'normal',
+                      textAlign: 'center',
+                    }}
+                  >
+                    {usageCount}
+                  </td>
+                  <td>
+                    <Button variant="subtle" size="xs" onClick={() => navigateToQuery(q.id)}>
+                      Open
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </Box>
+    </Stack>
+  );
+});

dashboard/src/dashboard-editor/ui/settings/content/index.tsx

@@ -7,8 +7,9 @@ import { EditPanel } from './edit-panel';
 import { EditQuery } from './edit-query';
 import { EditSQLSnippet } from './edit-sql-snippet';
 import { EditView } from './edit-view';
-import { isQueryVars, isMockContext, isFilter, isSQLSnippet, isQuery, isView, isPanel } from './utils';
+import { isQueryVars, isMockContext, isFilter, isSQLSnippet, isQuery, isView, isPanel, isQueries } from './utils';
 import { ViewQueryVars } from './view-query-vars';
+import { EditQueries } from './edit-queries';
 
 const Content = observer(() => {
   const editor = useEditDashboardContext().editor;
@@ -29,6 +30,9 @@ const Content = observer(() => {
   if (isSQLSnippet(path)) {
     return <EditSQLSnippet id={path[1]} />;
   }
+  if (isQueries(path)) {
+    return <EditQueries />;
+  }
   if (isQuery(path)) {
     return <EditQuery id={path[1]} />;
   }

dashboard/src/dashboard-editor/ui/settings/content/utils.ts

@@ -20,6 +20,10 @@ export function isQuery(path: ValidEditorPathType) {
   return path.length === 2 && path[0] === '_QUERIES_';
 }
 
+export function isQueries(path: ValidEditorPathType) {
+  return path.length === 1 && path[0] === '_QUERIES_';
+}
+
 export function isView(path: ValidEditorPathType) {
   return path.length === 2 && path[0] === '_VIEWS_';
 }