#837 - Update panels component

estruyf · Sep 16, 2024 · 06718c3 · 06718c3
1 parent 178207f
commit 06718c3
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 126 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2857,7 +2857,6 @@
     "@typescript-eslint/parser": "^5.50.0",
     "@vscode-elements/elements": "^1.2.0",
     "@vscode/l10n": "^0.0.14",
-    "@vscode/webview-ui-toolkit": "^1.2.2",
     "@webpack-cli/serve": "^1.7.0",
     "ajv": "^8.12.0",
     "array-move": "^4.0.0",
@@ -2919,7 +2918,7 @@
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
-    "vscrui": "^0.1.0-beta.1088540",
+    "vscrui": "^0.1.0-beta.1088697",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",

diff --git a/src/dashboardWebView/components/SettingsView/SettingsView.tsx b/src/dashboardWebView/components/SettingsView/SettingsView.tsx
@@ -10,19 +10,87 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { COMMAND_NAME } from '../../../constants';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from '@vscode/webview-ui-toolkit/react';
 import { CommonSettings } from './CommonSettings';
 import { IntegrationsView } from './IntegrationsView';
 import { useEffect } from 'react';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
+import { ITab, IView, Panels as VSCodePanels } from 'vscrui';
 
 export interface ISettingsViewProps { }
 
 export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: React.PropsWithChildren<ISettingsViewProps>) => {
   const [loading, setLoading] = React.useState<boolean>(false);
   const settings = useRecoilValue(SettingsSelector);
 
+  const tabs: ITab[] = React.useMemo(() => {
+    let temp = [
+      { id: "view-1", label: l10n.t(LocalizationKey.settingsViewCommon) },
+      { id: "view-2", label: l10n.t(LocalizationKey.settingsViewContentFolders) }
+    ];
+
+    if (settings?.crntFramework === 'astro') {
+      temp.push({ id: "view-3", label: l10n.t(LocalizationKey.settingsViewAstro) });
+    }
+
+    return [
+      ...temp,
+      { id: "view-4", label: l10n.t(LocalizationKey.settingsViewIntegration) }
+    ];
+  }, [settings]);
+
+  const views: IView[] = React.useMemo(() => {
+    if (!settings) {
+      return [];
+    }
+
+    let temp = [
+      {
+        id: "view-1",
+        content: <CommonSettings />
+      },
+      {
+        id: "view-2",
+        content: (
+          <div className='py-4'>
+            <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentFolders)}</h2>
+
+            <ContentFolders
+              settings={settings}
+              triggerLoading={(isLoading) => setLoading(isLoading)} />
+          </div>
+        )
+      }
+    ];
+
+    if (settings?.crntFramework === 'astro') {
+      temp.push({
+        id: "view-3",
+        content: (
+          <div className='py-4'>
+            <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentTypes)}</h2>
+
+            <AstroContentTypes
+              settings={settings}
+              triggerLoading={(isLoading) => setLoading(isLoading)}
+              setStatus={_ => null} />
+          </div>
+        )
+      });
+    }
+
+    temp.push({
+      id: "view-4",
+      content: (
+        <IntegrationsView />
+      )
+    });
+
+    return [
+      ...temp
+    ];
+  }, [settings]);
+
   useEffect(() => {
     Messenger.send(DashboardMessage.setTitle, l10n.t(LocalizationKey.commonSettings));
   }, []);
@@ -52,51 +120,11 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
               </a>
             </div>
 
-            <VSCodePanels className={`mt-4`}>
-              <VSCodePanelTab id="view-1">{l10n.t(LocalizationKey.settingsViewCommon)}</VSCodePanelTab>
-              <VSCodePanelTab id="view-2">{l10n.t(LocalizationKey.settingsViewContentFolders)}</VSCodePanelTab>
-
-              {
-                settings?.crntFramework === 'astro' && (
-                  <VSCodePanelTab id="view-3">{l10n.t(LocalizationKey.settingsViewAstro)}</VSCodePanelTab>
-                )
-              }
-
-              <VSCodePanelTab id="view-4">{l10n.t(LocalizationKey.settingsViewIntegration)}</VSCodePanelTab>
-
-              <VSCodePanelView id="view-1">
-                <CommonSettings />
-              </VSCodePanelView>
-
-              <VSCodePanelView id="view-2">
-                <div className='py-4'>
-                  <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentFolders)}</h2>
-
-                  <ContentFolders
-                    settings={settings}
-                    triggerLoading={(isLoading) => setLoading(isLoading)} />
-                </div>
-              </VSCodePanelView>
-
-              {
-                settings?.crntFramework === 'astro' && (
-                  <VSCodePanelView id="view-3">
-                    <div className='py-4'>
-                      <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentTypes)}</h2>
-
-                      <AstroContentTypes
-                        settings={settings}
-                        triggerLoading={(isLoading) => setLoading(isLoading)}
-                        setStatus={_ => null} />
-                    </div>
-                  </VSCodePanelView>
-                )
-              }
-
-              <VSCodePanelView id="view-4">
-                <IntegrationsView />
-              </VSCodePanelView>
-            </VSCodePanels>
+            <VSCodePanels
+              className={`mt-4`}
+              tabs={tabs}
+              views={views}
+            />
           </div>
         )
       }