From 06718c3577ef065f4786c334db127a0660b1c43d Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Mon, 16 Sep 2024 17:31:22 +0200 Subject: [PATCH] #837 - Update panels component --- package-lock.json | 82 +----------- package.json | 3 +- .../components/SettingsView/SettingsView.tsx | 120 +++++++++++------- 3 files changed, 79 insertions(+), 126 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f22f67b..91891b6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index ed521441..99864924 100644 --- 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 index a3e2f354..9f8c354a 100644 --- a/src/dashboardWebView/components/SettingsView/SettingsView.tsx +++ b/src/dashboardWebView/components/SettingsView/SettingsView.tsx @@ -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 = (_: Rea const [loading, setLoading] = React.useState(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: + }, + { + id: "view-2", + content: ( +
+

{l10n.t(LocalizationKey.settingsContentFolders)}

+ + setLoading(isLoading)} /> +
+ ) + } + ]; + + if (settings?.crntFramework === 'astro') { + temp.push({ + id: "view-3", + content: ( +
+

{l10n.t(LocalizationKey.settingsContentTypes)}

+ + setLoading(isLoading)} + setStatus={_ => null} /> +
+ ) + }); + } + + temp.push({ + id: "view-4", + content: ( + + ) + }); + + return [ + ...temp + ]; + }, [settings]); + useEffect(() => { Messenger.send(DashboardMessage.setTitle, l10n.t(LocalizationKey.commonSettings)); }, []); @@ -52,51 +120,11 @@ export const SettingsView: React.FunctionComponent = (_: Rea - - {l10n.t(LocalizationKey.settingsViewCommon)} - {l10n.t(LocalizationKey.settingsViewContentFolders)} - - { - settings?.crntFramework === 'astro' && ( - {l10n.t(LocalizationKey.settingsViewAstro)} - ) - } - - {l10n.t(LocalizationKey.settingsViewIntegration)} - - - - - - -
-

{l10n.t(LocalizationKey.settingsContentFolders)}

- - setLoading(isLoading)} /> -
- - - { - settings?.crntFramework === 'astro' && ( - -
-

{l10n.t(LocalizationKey.settingsContentTypes)}

- - setLoading(isLoading)} - setStatus={_ => null} /> -
- - ) - } - - - - - + ) }