#837 - Update panels component

2026-08-09 18:33:05 +02:00 · 2024-09-16 17:31:22 +02:00
parent 178207fd82
commit 06718c3577
3 changed files with 79 additions and 126 deletions
@@ -36,7 +36,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",
@@ -98,7 +97,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",
@@ -773,46 +772,6 @@
        "@lit-labs/ssr-dom-shim": "^1.2.0"
      }
    },
-    "node_modules/@microsoft/fast-element": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.12.0.tgz",
-      "integrity": "sha512-gQutuDHPKNxUEcQ4pypZT4Wmrbapus+P9s3bR/SEOLsMbNqNoXigGImITygI5zhb+aA5rzflM6O8YWkmRbGkPA==",
-      "dev": true
-    },
-    "node_modules/@microsoft/fast-foundation": {
-      "version": "2.49.5",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.5.tgz",
-      "integrity": "sha512-3PpG1BNmZ5kUM1goYU3SsxjsM2H7Rk0ZmpDJ7mnRhWDgKiM5SzJ02KvALRUqDrJQoeDnkW0Q2Q+r9SkEd68Gpg==",
-      "dev": true,
-      "dependencies": {
-        "@microsoft/fast-element": "^1.12.0",
-        "@microsoft/fast-web-utilities": "^5.4.1",
-        "tabbable": "^5.2.0",
-        "tslib": "^1.13.0"
-      }
-    },
-    "node_modules/@microsoft/fast-react-wrapper": {
-      "version": "0.3.23",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.3.23.tgz",
-      "integrity": "sha512-iuL+J2AFKJ1mwUBxSp+bqzt4X93kQwj1jpVgHgw2VRzCOTl7wzta6X+lvRIVg4eoyLfmeVSMkB+q3PD87T/MyQ==",
-      "dev": true,
-      "dependencies": {
-        "@microsoft/fast-element": "^1.12.0",
-        "@microsoft/fast-foundation": "^2.49.5"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0"
-      }
-    },
-    "node_modules/@microsoft/fast-web-utilities": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.1.tgz",
-      "integrity": "sha512-ReWYncndjV3c8D8iq9tp7NcFNc1vbVHvcBFPME2nNFKNbS1XCesYZGlIlf3ot5EmuOXPlrzUHOWzQ2vFpIkqDg==",
-      "dev": true,
-      "dependencies": {
-        "exenv-es6": "^1.1.1"
-      }
-    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2376,27 +2335,6 @@
      "integrity": "sha512-/yrv59IEnmh655z1oeDnGcvMYwnEzNzHLgeYcQCkhYX0xBvYWrAuefoiLcPBUkMpJsb46bqQ6Yv4pwTTQ4d3Qg==",
      "dev": true
    },
-    "node_modules/@vscode/webview-ui-toolkit": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-1.4.0.tgz",
-      "integrity": "sha512-modXVHQkZLsxgmd5yoP3ptRC/G8NBDD+ob+ngPiWNQdlrH6H1xR/qgOBD85bfU3BhOB5sZzFWBwwhp9/SfoHww==",
-      "dev": true,
-      "dependencies": {
-        "@microsoft/fast-element": "^1.12.0",
-        "@microsoft/fast-foundation": "^2.49.4",
-        "@microsoft/fast-react-wrapper": "^0.3.22",
-        "tslib": "^2.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0"
-      }
-    },
-    "node_modules/@vscode/webview-ui-toolkit/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
-    },
    "node_modules/@webassemblyjs/ast": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -4598,12 +4536,6 @@
        "url": "https://github.com/sindresorhus/execa?sponsor=1"
      }
    },
-    "node_modules/exenv-es6": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exenv-es6/-/exenv-es6-1.1.1.tgz",
-      "integrity": "sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ==",
-      "dev": true
-    },
    "node_modules/express": {
      "version": "4.19.2",
      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
@@ -11542,12 +11474,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/tabbable": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
-      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==",
-      "dev": true
-    },
    "node_modules/tailwind-merge": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz",
@@ -12447,9 +12373,9 @@
      }
    },
    "node_modules/vscrui": {
-      "version": "0.1.0-beta.1088540",
-      "resolved": "https://registry.npmjs.org/vscrui/-/vscrui-0.1.0-beta.1088540.tgz",
-      "integrity": "sha512-tdy0E1Cuj6YapZDhV8H2WRRHMFFIe4I5dkEEt+Nttc/KFbCoEQnCEInDw1LG9tKT02wnzp8qXm3Jdacq62CHgQ==",
+      "version": "0.1.0-beta.1088697",
+      "resolved": "https://registry.npmjs.org/vscrui/-/vscrui-0.1.0-beta.1088697.tgz",
+      "integrity": "sha512-De5dN6bQtEM6R0le7TqKjUkLYrQR0582/PiafJpz24g8l2XoZSlUFl93RRJpXkz1Z/zrNjGpZtrqpzfySSvq/A==",
      "dev": true,
      "funding": {
        "type": "github",
@@ -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",
@@ -10,12 +10,12 @@ 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 { }

@@ -23,6 +23,74 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
  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>
        )
      }