From ef97bfcf44507343fe674e9467be9f5ea803aaae Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 16 Aug 2023 23:17:28 +0800
Subject: [PATCH 1/4] feat(dashboard): no longer render content in TabsView
 expect tabs

---
 .../view/view-component/preview/index.tsx     |   2 +-
 .../view/view-component/preview/tabs.tsx      | 118 +++++++++---------
 .../view/view-component/render/index.tsx      |   2 +-
 .../view/view-component/render/tabs.tsx       |  74 +++++------
 4 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/dashboard/src/components/view/view-component/preview/index.tsx b/dashboard/src/components/view/view-component/preview/index.tsx
index eb485bbaa..c9da6de42 100644
--- a/dashboard/src/components/view/view-component/preview/index.tsx
+++ b/dashboard/src/components/view/view-component/preview/index.tsx
@@ -10,7 +10,7 @@ export const PreviewViewComponent = observer(({ view, children }: { view: ViewMe
     case EViewComponentType.Modal:
       return <PreviewViewModal view={view}>{children}</PreviewViewModal>;
     case EViewComponentType.Tabs:
-      return <PreviewViewTabs view={view}>{children}</PreviewViewTabs>;
+      return <PreviewViewTabs view={view} />;
     case EViewComponentType.Division:
     default:
       return <PreviewViewDivision view={view}>{children}</PreviewViewDivision>;
diff --git a/dashboard/src/components/view/view-component/preview/tabs.tsx b/dashboard/src/components/view/view-component/preview/tabs.tsx
index 378357cc1..d73b6dbe1 100644
--- a/dashboard/src/components/view/view-component/preview/tabs.tsx
+++ b/dashboard/src/components/view/view-component/preview/tabs.tsx
@@ -2,7 +2,7 @@ import { Box, Button, ColorInput, Overlay, Select, Stack, Sx, Tabs, TextInput }
 import { useModals } from '@mantine/modals';
 import { IconArrowsLeftRight, IconTrash } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
-import { ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Plus } from 'tabler-icons-react';
 import { DashboardViewRender } from '~/components/view';
 import { useEditContentModelContext } from '~/contexts';
@@ -40,7 +40,7 @@ const getTabSX = (t: TabModelInstance): Sx => {
   return {};
 };
 
-export const PreviewViewTabs = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
+export const PreviewViewTabs = observer(({ view }: { view: ViewMetaInstance }) => {
   const modals = useModals();
   const model = useEditContentModelContext();
   const options = useMemo(
@@ -64,71 +64,69 @@ export const PreviewViewTabs = observer(({ children, view }: { children: ReactNo
 
   const onlyOneTabLeft = config.tabs.length === 0;
   return (
-    <Box className="preview-view-tabs">
-      <Tabs
-        variant={config.variant}
-        orientation={config.orientation}
-        defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
-        styles={getStyles(config)}
-      >
-        <Tabs.List grow={config.grow}>
-          {config.tabs.map((t) => (
-            <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
-              {t.name ?? t.id}
-            </Tabs.Tab>
-          ))}
-          <Tabs.Tab onClick={config.addTab} value="add" className="add-a-tab">
-            <Plus size={18} color="#228be6" />
+    <Tabs
+      className="preview-view-tabs"
+      variant={config.variant}
+      orientation={config.orientation}
+      defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
+      styles={getStyles(config)}
+    >
+      <Tabs.List grow={config.grow}>
+        {config.tabs.map((t) => (
+          <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
+            {t.name ?? t.id}
           </Tabs.Tab>
-        </Tabs.List>
-        {config.tabs.map((t, i) => {
-          const tabView = model.views.findByID(t.view_id);
-          return (
-            <Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
-              <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
-                <Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
+        ))}
+        <Tabs.Tab onClick={config.addTab} value="add" className="add-a-tab">
+          <Plus size={18} color="#228be6" />
+        </Tabs.Tab>
+      </Tabs.List>
+      {config.tabs.map((t, i) => {
+        const tabView = model.views.findByID(t.view_id);
+        return (
+          <Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
+            <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
+              <Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
 
-                <Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
-                  <TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
-                  <Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
-                  <ColorInput
-                    label="Color"
-                    value={t.color}
-                    onChange={t.setColor}
-                    disabled={config.variant !== 'default'}
-                  />
-
-                  {tabView && (
-                    <Button
-                      mt={20}
-                      variant="gradient"
-                      leftIcon={<IconArrowsLeftRight size={18} />}
-                      gradient={{ from: 'cyan', to: 'indigo' }}
-                      onClick={() => model.views.setIDOfVIE(tabView.id)}
-                    >
-                      Swith to View: {tabView.name}
-                    </Button>
-                  )}
+              <Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
+                <TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
+                <Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
+                <ColorInput
+                  label="Color"
+                  value={t.color}
+                  onChange={t.setColor}
+                  disabled={config.variant !== 'default'}
+                />
 
+                {tabView && (
                   <Button
                     mt={20}
-                    variant="subtle"
-                    color="red"
-                    onClick={() => remove(i)}
-                    disabled={onlyOneTabLeft}
-                    leftIcon={<IconTrash size={14} />}
+                    variant="gradient"
+                    leftIcon={<IconArrowsLeftRight size={18} />}
+                    gradient={{ from: 'cyan', to: 'indigo' }}
+                    onClick={() => model.views.setIDOfVIE(tabView.id)}
                   >
-                    Delete This Tab
+                    Swith to View: {tabView.name}
                   </Button>
-                </Stack>
-              </Box>
+                )}
+
+                <Button
+                  mt={20}
+                  variant="subtle"
+                  color="red"
+                  onClick={() => remove(i)}
+                  disabled={onlyOneTabLeft}
+                  leftIcon={<IconTrash size={14} />}
+                >
+                  Delete This Tab
+                </Button>
+              </Stack>
+            </Box>
 
-              {tabView && <DashboardViewRender view={tabView} />}
-            </Tabs.Panel>
-          );
-        })}
-      </Tabs>
-      {children}
-    </Box>
+            {tabView && <DashboardViewRender view={tabView} />}
+          </Tabs.Panel>
+        );
+      })}
+    </Tabs>
   );
 });
diff --git a/dashboard/src/components/view/view-component/render/index.tsx b/dashboard/src/components/view/view-component/render/index.tsx
index 660563e3f..5d1f97281 100644
--- a/dashboard/src/components/view/view-component/render/index.tsx
+++ b/dashboard/src/components/view/view-component/render/index.tsx
@@ -10,7 +10,7 @@ export const RenderViewComponent = observer(({ view, children }: { view: ViewMet
     case EViewComponentType.Modal:
       return <RenderViewModal view={view}>{children}</RenderViewModal>;
     case EViewComponentType.Tabs:
-      return <RenderViewTabs view={view}>{children}</RenderViewTabs>;
+      return <RenderViewTabs view={view} />;
     case EViewComponentType.Division:
     default:
       return <RenderViewDivision view={view}>{children}</RenderViewDivision>;
diff --git a/dashboard/src/components/view/view-component/render/tabs.tsx b/dashboard/src/components/view/view-component/render/tabs.tsx
index 97dc9d0ce..13ffc86cd 100644
--- a/dashboard/src/components/view/view-component/render/tabs.tsx
+++ b/dashboard/src/components/view/view-component/render/tabs.tsx
@@ -1,6 +1,5 @@
-import { Box, Sx, Tabs } from '@mantine/core';
+import { Sx, Tabs } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
-import { ReactNode } from 'react';
 import { DashboardViewRender } from '~/components/view';
 import { useRenderContentModelContext } from '~/contexts';
 import { TabModelInstance, ViewMetaInstance, ViewTabsConfigInstance } from '~/model';
@@ -12,42 +11,45 @@ const getTabSX = (t: TabModelInstance): Sx => {
   return {};
 };
 
-export const RenderViewTabs = observer(({ children, view }: { children: ReactNode; view: ViewMetaInstance }) => {
+export const RenderViewTabs = observer(({ view }: { view: ViewMetaInstance }) => {
   const model = useRenderContentModelContext();
   const config = view.config as ViewTabsConfigInstance;
   return (
-    <Box className="render-view-tabs">
-      <Tabs
-        variant={config.variant}
-        orientation={config.orientation}
-        defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
-        styles={{
-          panel: {
-            padding: config.orientation === 'horizontal' ? '16px 0px' : '0',
-          },
-        }}
-        keepMounted={false}
-      >
-        <Tabs.List grow={config.grow}>
-          {config.tabs.map((t) => (
-            <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
-              {t.name ?? t.id}
-            </Tabs.Tab>
-          ))}
-        </Tabs.List>
-        {config.tabs.map((t) => {
-          const tabView = model.views.findByID(t.view_id);
-          if (!tabView) {
-            return null;
-          }
-          return (
-            <Tabs.Panel key={t.id} value={t.id}>
-              <DashboardViewRender view={tabView} />
-            </Tabs.Panel>
-          );
-        })}
-      </Tabs>
-      {children}
-    </Box>
+    <Tabs
+      className="render-view-tabs"
+      variant={config.variant}
+      orientation={config.orientation}
+      defaultValue={config.tabs.length > 0 ? config.tabs[0].id : '0'}
+      styles={{
+        root: {
+          height: '100%',
+        },
+        panel: {
+          padding: config.orientation === 'horizontal' ? '16px 0px' : '0',
+          height: '100%',
+          overflow: 'auto',
+        },
+      }}
+      keepMounted={false}
+    >
+      <Tabs.List grow={config.grow}>
+        {config.tabs.map((t) => (
+          <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
+            {t.name ?? t.id}
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+      {config.tabs.map((t) => {
+        const tabView = model.views.findByID(t.view_id);
+        if (!tabView) {
+          return null;
+        }
+        return (
+          <Tabs.Panel key={t.id} value={t.id}>
+            <DashboardViewRender view={tabView} />
+          </Tabs.Panel>
+        );
+      })}
+    </Tabs>
   );
 });

From 9e0cee0ee3b9531a618c6ca105700197efa7f65c Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 16 Aug 2023 23:20:43 +0800
Subject: [PATCH 2/4] feat(dashboard): disallow adding panels to tabs view

---
 dashboard/src/dashboard-editor/ui/header/sub-header.tsx       | 4 +++-
 .../ui/settings/navbar/add-item-button/add-a-panel.tsx        | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/dashboard/src/dashboard-editor/ui/header/sub-header.tsx b/dashboard/src/dashboard-editor/ui/header/sub-header.tsx
index 9abcbba01..2b6163a92 100644
--- a/dashboard/src/dashboard-editor/ui/header/sub-header.tsx
+++ b/dashboard/src/dashboard-editor/ui/header/sub-header.tsx
@@ -2,6 +2,7 @@ import { Box, Button, Group, Sx } from '@mantine/core';
 import { IconPlaylistAdd } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
 import { useEditContentModelContext } from '~/contexts';
+import { EViewComponentType } from '~/model';
 
 const SubHeaderSx: Sx = {
   position: 'fixed',
@@ -16,6 +17,7 @@ const SubHeaderSx: Sx = {
 
 export const SubHeader = observer(() => {
   const model = useEditContentModelContext();
+  const cant = model.views.VIE?.type === EViewComponentType.Tabs;
   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' }} pr={16}>
@@ -24,7 +26,7 @@ export const SubHeader = observer(() => {
           color="blue"
           radius={0}
           size="xs"
-          disabled={!model.views.VIE}
+          disabled={!model.views.VIE || cant}
           onClick={() => model.addANewPanel(model.views.idOfVIE)}
           leftIcon={<IconPlaylistAdd size={20} />}
           sx={{
diff --git a/dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx b/dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx
index f555853de..f2cc38c77 100644
--- a/dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx
+++ b/dashboard/src/dashboard-editor/ui/settings/navbar/add-item-button/add-a-panel.tsx
@@ -2,6 +2,7 @@ import { Button } from '@mantine/core';
 import { IconPlus } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
 import { useEditContentModelContext } from '~/contexts';
+import { EViewComponentType } from '~/model';
 
 interface IAddAPanel {
   parentID?: string;
@@ -13,7 +14,7 @@ export const AddAPanel = observer(({ parentID }: IAddAPanel) => {
     return null;
   }
   const view = model.views.findByID(parentID);
-  if (!view) {
+  if (!view || view.type === EViewComponentType.Tabs) {
     return null;
   }
   return (

From ff952419c6e13c2faaf20edb67ac78ff15151bdd Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 16 Aug 2023 23:22:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?style(dashboard):=20don=E2=80=99t=20allow?=
 =?UTF-8?q?=20scrolling=20in=20tabs-preview?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src/components/view/view-component/preview/tabs.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/dashboard/src/components/view/view-component/preview/tabs.tsx b/dashboard/src/components/view/view-component/preview/tabs.tsx
index d73b6dbe1..a47a62e54 100644
--- a/dashboard/src/components/view/view-component/preview/tabs.tsx
+++ b/dashboard/src/components/view/view-component/preview/tabs.tsx
@@ -10,6 +10,9 @@ import { EViewComponentType, TabModelInstance, ViewMetaInstance, ViewTabsConfigI
 
 const getStyles = ({ variant, orientation }: ViewTabsConfigInstance) => {
   const ret: Record<string, any> = {
+    root: {
+      height: '100%',
+    },
     tab: {},
     panel: {
       padding: '16px',

From 647b2e9771cdefbd112ed453e5b3169c7f51172c Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Wed, 16 Aug 2023 23:22:55 +0800
Subject: [PATCH 4/4] chore: publish v10.20.0

---
 api/package.json           | 2 +-
 dashboard/package.json     | 2 +-
 package.json               | 2 +-
 settings-form/package.json | 2 +-
 website/package.json       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/api/package.json b/api/package.json
index d5ac4192b..04ec61195 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/dashboard/package.json b/dashboard/package.json
index 26cbbd1aa..bc80c9fdb 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/package.json b/package.json
index 823ddfa45..6b59d09c5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "private": true,
   "workspaces": [
     "api",
diff --git a/settings-form/package.json b/settings-form/package.json
index 17b4903ca..090a18d02 100644
--- a/settings-form/package.json
+++ b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/website/package.json b/website/package.json
index 8789135d4..141190576 100644
--- a/website/package.json
+++ b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "10.19.0",
+  "version": "10.20.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"