Merge pull request #1218 from merico-dev/1217-able-to-set-panel-titles-visibility

1217 able to set panel titles visibility

Author: GerilLeto

api/package.json

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

api/src/dashboard_migration/handlers/10.41.0.ts

@@ -0,0 +1,29 @@
+function upgradePanels(panels: Record<string, any>[]) {
+  return panels.map((p) => {
+    const { title, ...rest } = p;
+    if (typeof title !== 'string') {
+      console.log(p);
+      throw new Error(`Unexpected type of panel.title: ${typeof title}`);
+    }
+    const name = title ? title : p.id;
+    return {
+      ...rest,
+      name,
+      title: {
+        show: !!title,
+      },
+    };
+  });
+}
+
+/**
+ * https://github.com/merico-dev/table/issues/1217
+ */
+export function main({ panels, ...rest }: Record<string, any>) {
+  const finalPanels = upgradePanels(panels);
+  return {
+    ...rest,
+    panels: finalPanels,
+    version: '10.41.0',
+  };
+}

api/src/dashboard_migration/index.ts

@@ -24,6 +24,7 @@ const versions = [
   '8.57.0',
   '9.11.0',
   '9.19.0',
+  '10.41.0',
   // ... future versions
 ];
 

dashboard/cypress/component/viz-table.cy.tsx

@@ -1,15 +1,14 @@
-import { get, set } from 'lodash';
+import { set } from 'lodash';
 import {
   IViewPanelInfo,
   IVizManager,
-  pluginManager,
   VizConfigComponent,
   VizManager,
   VizViewComponent,
+  pluginManager,
 } from '~/components/plugins';
-import { PanelContextProvider } from '~/contexts';
 import { ITableConf, ValueType } from '~/components/plugins/viz-components/table/type';
-import { IPanelInfoEditor } from '~/types/plugin';
+import { PanelContextProvider } from '~/contexts';
 
 const mockQueryID = 'queryID-01';
 const defaultConfig = {
@@ -84,42 +83,18 @@ describe('viz-table.cy.ts', () => {
   });
   describe('config panel', () => {
     it('render config panel', () => {
-      const panelEditor: IPanelInfoEditor = {
-        setDescription: cy.spy(),
-        addQueryID: cy.spy(),
-        removeQueryID: cy.spy(),
-        setTitle: cy.spy(),
-      };
       cy.mount(
         <PanelContextProvider value={{ panel: mockPanel, data: mockData, loading: false, errors: [] }}>
-          <VizConfigComponent
-            panel={mockPanel}
-            data={mockData}
-            vizManager={vizManager}
-            variables={[]}
-            panelInfoEditor={panelEditor}
-          />
+          <VizConfigComponent panel={mockPanel} data={mockData} vizManager={vizManager} variables={[]} />
         </PanelContextProvider>,
       );
       cy.findByText('Table Config');
     });
     it('update config', () => {
-      const panelEditor: IPanelInfoEditor = {
-        setDescription: cy.spy(),
-        addQueryID: cy.spy(),
-        removeQueryID: cy.spy(),
-        setTitle: cy.spy(),
-      };
       const instance = vizManager.getOrCreateInstance(mockPanel);
       cy.mount(
         <PanelContextProvider value={{ panel: mockPanel, data: mockData, loading: false, errors: [] }}>
-          <VizConfigComponent
-            panel={mockPanel}
-            data={mockData}
-            vizManager={vizManager}
-            variables={[]}
-            panelInfoEditor={panelEditor}
-          />
+          <VizConfigComponent panel={mockPanel} data={mockData} vizManager={vizManager} variables={[]} />
         </PanelContextProvider>,
       );
       cy.findByLabelText('Use Original Data Columns').click({ force: true });

dashboard/package.json

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

dashboard/src/components/panel/panel-render/description-popover/index.tsx

@@ -24,7 +24,7 @@ export const DescriptionPopover = observer(() => {
       <Modal
         opened={opened}
         onClose={() => setOpened(false)}
-        title={panel.title}
+        title={panel.name}
         withCloseButton={false}
         withinPortal
         zIndex={310}

dashboard/src/components/panel/panel-render/panel-render-base.tsx

@@ -19,9 +19,7 @@ const baseStyle: Sx = { border: '1px solid #e9ecef' };
 
 export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }: IPanelBase) => {
   const { ref, downloadPanelScreenshot } = useDownloadPanelScreenshot(panel);
-  const showTitle = !!panel.title;
-  const titleHeight = showTitle ? '60px' : '28px';
-  const contentHeight = !panel.title ? '100%' : `calc(100% - ${titleHeight})`;
+  const titleHeight = panel.title.show ? '60px' : '28px';
   return (
     <PanelContextProvider
       value={{
@@ -33,7 +31,7 @@ export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }:
       }}
     >
       <Box
-        className={`panel-root ${showTitle ? 'panel-root--show-title' : ''}`}
+        className={`panel-root ${panel.title.show ? 'panel-root--show-title' : ''}`}
         ref={ref}
         p={0}
         sx={{

dashboard/src/components/panel/panel-render/title-bar/index.tsx

@@ -4,15 +4,15 @@ import { useRenderPanelContext } from '~/contexts';
 
 export const PanelTitleBar = observer(function _PanelTitleBar() {
   const { panel } = useRenderPanelContext();
-  const { title } = panel;
+  const { name, title } = panel;
 
-  if (!title) {
+  if (!title.show) {
     return null;
   }
   return (
     <Group grow position="center" className="panel-title-wrapper" sx={{ flexGrow: 1 }}>
       <Text align="center" lineClamp={1} className="panel-title-text">
-        {title}
+        {name}
       </Text>
     </Group>
   );

dashboard/src/components/panel/panel-render/viz/viz.tsx

@@ -15,11 +15,12 @@ import { Box } from '@mantine/core';
 function usePluginViz(data: TPanelData, layout: IViewPanelInfo['layout']): ReactNode | null {
   const { vizManager } = useContext(PluginContext);
   const {
-    panel: { viz, title, id, description, queryIDs, variables },
+    panel: { viz, title, id, name, description, queryIDs, variables },
   } = useRenderPanelContext();
   const panel: IViewPanelInfo = {
-    title,
     id,
+    name,
+    title,
     description,
     queryIDs,
     viz,

dashboard/src/components/panel/plugin-adaptor.tsx

@@ -61,7 +61,7 @@ export function PluginVizConfigComponent({ setVizConf, ...props }: IConfigCompon
 
   const migrated = usePluginMigration(() => {
     showNotification({
-      title: `${panel.title} - Updated`,
+      title: `${panel.name} - Updated`,
       message: 'Your plugin configuration has been migrated to the latest version',
     });
   });
@@ -87,7 +87,7 @@ export function PluginVizViewComponent(props: IViewComponentProps & SetVizConfTy
     }
 
     showNotification({
-      title: `${panel.title} - Updated`,
+      title: `${panel.name} - Updated`,
       message: 'Your plugin configuration has been migrated to the latest version',
     });
   });