diff --git a/extensions/ql-vscode/package-lock.json b/extensions/ql-vscode/package-lock.json index d5a9d902a19..8f52c1b679a 100644 --- a/extensions/ql-vscode/package-lock.json +++ b/extensions/ql-vscode/package-lock.json @@ -14,6 +14,7 @@ "@octokit/plugin-retry": "^7.2.0", "@octokit/plugin-throttling": "^9.6.0", "@octokit/rest": "^21.1.1", + "@vscode-elements/react-elements": "^0.9.0", "@vscode/codicons": "^0.0.36", "@vscode/debugadapter": "^1.59.0", "@vscode/debugprotocol": "^1.68.0", @@ -4283,6 +4284,30 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lit-labs/ssr-dom-shim": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz", + "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==", + "license": "BSD-3-Clause" + }, + "node_modules/@lit/react": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.7.tgz", + "integrity": "sha512-cencnwwLXQKiKxjfFzSgZRngcWJzUDZi/04E0fSaF86wZgchMdvTyu+lE36DrUfvuus3bH8+xLPrhM1cTjwpzw==", + "license": "BSD-3-Clause", + "peerDependencies": { + "@types/react": "17 || 18 || 19" + } + }, + "node_modules/@lit/reactive-element": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz", + "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0" + } + }, "node_modules/@mdx-js/react": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", @@ -6794,6 +6819,12 @@ "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==" }, + "node_modules/@types/trusted-types": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", + "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", + "license": "MIT" + }, "node_modules/@types/undertaker": { "version": "1.2.11", "resolved": "https://registry.npmjs.org/@types/undertaker/-/undertaker-1.2.11.tgz", @@ -7754,6 +7785,28 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/@vscode-elements/elements": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/elements/-/elements-1.14.0.tgz", + "integrity": "sha512-fUOP8O/Pwy8zbD8hGSy1plBg/764hdM9jIMu8uG7GQJOrOB+uQ/ystYxkiUcN6P7OBHvqkBKO1j6vDrkaOJg6Q==", + "license": "MIT", + "dependencies": { + "lit": "^3.2.1" + } + }, + "node_modules/@vscode-elements/react-elements": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@vscode-elements/react-elements/-/react-elements-0.9.0.tgz", + "integrity": "sha512-pGWp6OBDAZXJ0tZqN+2SCiKhvhW3/cE4XJyiVHXH4Ft6KteuNVg20oexFv0M66U9iAZElQjPF8M9pBBABLaUZg==", + "license": "ISC", + "dependencies": { + "@lit/react": "^1.0.6", + "@vscode-elements/elements": "^1.13.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@vscode/codicons": { "version": "0.0.36", "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.36.tgz", @@ -17858,6 +17911,37 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/lit": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.1.tgz", + "integrity": "sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^2.0.4", + "lit-element": "^4.1.0", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-element": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.1.tgz", + "integrity": "sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit-labs/ssr-dom-shim": "^1.2.0", + "@lit/reactive-element": "^2.0.4", + "lit-html": "^3.2.0" + } + }, + "node_modules/lit-html": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz", + "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, "node_modules/load-json-file": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz", diff --git a/extensions/ql-vscode/package.json b/extensions/ql-vscode/package.json index 4a809b6cdb6..8e7bf1cc788 100644 --- a/extensions/ql-vscode/package.json +++ b/extensions/ql-vscode/package.json @@ -1972,6 +1972,7 @@ "@octokit/plugin-retry": "^7.2.0", "@octokit/plugin-throttling": "^9.6.0", "@octokit/rest": "^21.1.1", + "@vscode-elements/react-elements": "^0.9.0", "@vscode/codicons": "^0.0.36", "@vscode/debugadapter": "^1.59.0", "@vscode/debugprotocol": "^1.68.0", diff --git a/extensions/ql-vscode/src/stories/Overview.mdx b/extensions/ql-vscode/src/stories/Overview.mdx index cc06ee5cfca..7d9939cb4d9 100644 --- a/extensions/ql-vscode/src/stories/Overview.mdx +++ b/extensions/ql-vscode/src/stories/Overview.mdx @@ -1,7 +1,5 @@ import { Canvas, Meta, Story } from '@storybook/blocks'; -import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'; - import iframeImage from './images/update-css-variables-iframe.png'; import stylesImage from './images/update-css-variables-styles.png'; import bodyImage from './images/update-css-variables-body.png'; diff --git a/extensions/ql-vscode/src/stories/common/Alert.stories.tsx b/extensions/ql-vscode/src/stories/common/Alert.stories.tsx index f82eaa17100..c2074d1df62 100644 --- a/extensions/ql-vscode/src/stories/common/Alert.stories.tsx +++ b/extensions/ql-vscode/src/stories/common/Alert.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryFn } from "@storybook/react"; -import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"; +import { VSCodeLink } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { VariantAnalysisContainer } from "../../view/variant-analysis/VariantAnalysisContainer"; import { Alert } from "../../view/common"; @@ -84,8 +85,8 @@ ErrorWithButtons.args = { "Request to https://api.github.com/repos/octodemo/Hello-World/code-scanning/codeql/queries failed. Try running this query again.", actions: ( <> - View actions logs - Retry + View actions logs + Retry ), }; diff --git a/extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx b/extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx index 423a948cd0e..16cb303b786 100644 --- a/extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx +++ b/extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx @@ -220,6 +220,7 @@ LibraryRow.args = { ], }, modifiedSignatures: new Set(["org.sql2o.Sql2o#Sql2o(String)"]), + selectedSignatures: new Set(["org.sql2o.Sql2o#Sql2o(String)"]), viewState: createMockModelEditorViewState({ showGenerateButton: true, }), diff --git a/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx b/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx index 6d86c7e8182..dfad2a2e13d 100644 --- a/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx +++ b/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx @@ -1,9 +1,7 @@ import type { ChangeEvent } from "react"; import { styled } from "styled-components"; -import { - VSCodeButton, - VSCodeTextField, -} from "@vscode/webview-ui-toolkit/react"; +import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { Codicon } from "../common"; export class Renaming { @@ -86,21 +84,21 @@ export function RenamingInput(props: RenamingInputProps) { setRenamings(newRenamings); }} > - setRenamings(renamings.filter((_, i) => i !== index)) } > - +
))} - setRenamings([...renamings, new Renaming("", "")])} > Add renaming rule - + ); } diff --git a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx index bb2fd6b2ab5..30b78c3fed1 100644 --- a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx @@ -7,7 +7,6 @@ import { } from "../../model-editor/shared/multiple-modeled-methods"; import { styled } from "styled-components"; import { MethodModelingInputs } from "./MethodModelingInputs"; -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; import { Codicon } from "../common"; import { validateModeledMethods } from "../../model-editor/shared/validation"; import { ModeledMethodAlert } from "./ModeledMethodAlert"; @@ -15,6 +14,7 @@ import type { QueryLanguage } from "../../common/query-language"; import { createEmptyModeledMethod } from "../../model-editor/modeled-method-empty"; import { sendTelemetry } from "../common/telemetry"; import type { ModelConfig } from "../../model-editor/languages"; +import { VscodeButton } from "@vscode-elements/react-elements"; export type MultipleModeledMethodsPanelProps = { language: QueryLanguage; @@ -168,20 +168,20 @@ export const MultipleModeledMethodsPanel = ({ )} diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx index e99689634d2..8094aaeba12 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx @@ -1,5 +1,5 @@ import { styled } from "styled-components"; -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis"; type ModelAlertsActionsProps = { @@ -14,7 +14,7 @@ const Container = styled.div` gap: 1em; `; -const Button = styled(VSCodeButton)` +const Button = styled(VscodeButton)` white-space: nowrap; `; diff --git a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx index bd285c7000f..55229e448b8 100644 --- a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx @@ -7,14 +7,11 @@ import { calculateModeledPercentage } from "../../model-editor/shared/modeled-pe import { percentFormatter } from "./formatters"; import { Codicon } from "../common"; import { Mode } from "../../model-editor/shared/mode"; -import { - VSCodeButton, - VSCodeDivider, - VSCodeTag, -} from "@vscode/webview-ui-toolkit/react"; +import { VSCodeDivider, VSCodeTag } from "@vscode/webview-ui-toolkit/react"; import type { ModelEditorViewState } from "../../model-editor/shared/view-state"; import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions"; import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state"; +import { VscodeButton } from "@vscode-elements/react-elements"; const LibraryContainer = styled.div` background-color: var(--vscode-peekViewResult-background); @@ -173,16 +170,16 @@ export const LibraryRow = ({ {viewState.showGenerateButton && viewState.mode === Mode.Application && ( - +  Model from source - + )} {viewState.mode === Mode.Application && ( - +  Model dependency - + )} {isExpanded && ( @@ -203,9 +200,9 @@ export const LibraryRow = ({ /> - + {selectedSignatures.size === 0 ? "Save" : "Save selected"} - + )} diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx index 46b7e7bee78..b9c20b645b0 100644 --- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx @@ -1,8 +1,5 @@ -import { - VSCodeBadge, - VSCodeButton, - VSCodeLink, -} from "@vscode/webview-ui-toolkit/react"; +import { VSCodeBadge, VSCodeLink } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { forwardRef, useCallback, @@ -63,7 +60,7 @@ const ViewLink = styled(VSCodeLink)` white-space: nowrap; `; -const CodiconRow = styled(VSCodeButton)` +const CodiconRow = styled(VscodeButton)` min-height: calc(var(--input-height) * 1px); align-items: center; `; diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx index 02c235d5029..24044994047 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx @@ -1,10 +1,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import type { ToModelEditorMessage } from "../../common/interface-types"; -import { - VSCodeButton, - VSCodeCheckbox, - VSCodeTag, -} from "@vscode/webview-ui-toolkit/react"; +import { VSCodeCheckbox, VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { styled } from "styled-components"; import type { Method } from "../../model-editor/method"; import type { ModeledMethod } from "../../model-editor/modeled-method"; @@ -334,27 +331,27 @@ export function ModelEditor({ - {selectedSignatures.size === 0 ? "Save all" : "Save selected"} - - + Deselect all - - + + Refresh - + {viewState.showGenerateButton && viewState.mode === Mode.Framework && ( - + Generate - + )} {shouldShowEvaluateButton && ( - Evaluate - + )} {shouldShowStopButton && ( - + Stop evaluation - + )} {shouldShowEvaluationRunLink && ( diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx index ed1b473c66a..615b6441c40 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx @@ -1,5 +1,5 @@ import { styled } from "styled-components"; -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis"; export type VariantAnalysisActionsProps = { @@ -24,7 +24,7 @@ const Container = styled.div` gap: 1em; `; -const Button = styled(VSCodeButton)` +const Button = styled(VscodeButton)` white-space: nowrap; `;