From 27476d02a8df016d3b877cdb1e7dbd57d98b514a Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 1 Apr 2025 13:31:21 +0000 Subject: [PATCH 01/43] Add @vscode-elements/elements package --- extensions/ql-vscode/package-lock.json | 84 ++++++++++++++++++++++++++ extensions/ql-vscode/package.json | 1 + 2 files changed, 85 insertions(+) diff --git a/extensions/ql-vscode/package-lock.json b/extensions/ql-vscode/package-lock.json index 7d8c90bdf56..410eb784b9d 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", @@ -5051,6 +5052,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", @@ -7565,6 +7590,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", @@ -8525,6 +8556,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", @@ -20003,6 +20056,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 534055ad025..0c5d9b3d64d 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", From 25bb51c8f887f4f185caa4dd4fad9194d81d5e12 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 1 Apr 2025 13:32:11 +0000 Subject: [PATCH 02/43] Replace all VSCodeButton with VscodeButton --- extensions/ql-vscode/src/stories/Overview.mdx | 2 -- .../src/stories/common/Alert.stories.tsx | 6 ++--- .../compare-performance/RenamingInput.tsx | 14 +++++------ .../MultipleModeledMethodsPanel.tsx | 18 +++++++-------- .../view/model-alerts/ModelAlertsActions.tsx | 4 ++-- .../src/view/model-editor/LibraryRow.tsx | 19 +++++++-------- .../src/view/model-editor/MethodRow.tsx | 5 ++-- .../src/view/model-editor/ModelEditor.tsx | 23 ++++++++----------- .../src/view/model-editor/ModelEvaluation.tsx | 10 ++++---- .../VariantAnalysisActions.tsx | 4 ++-- 10 files changed, 48 insertions(+), 57 deletions(-) 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 1a5db4f14f6..29bad2ba33f 100644 --- a/extensions/ql-vscode/src/stories/common/Alert.stories.tsx +++ b/extensions/ql-vscode/src/stories/common/Alert.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryFn } from "@storybook/react"; -import { VSCodeButton } 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 +84,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/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 = ({ )}
- - + {modeledMethods.length > 1 && (
{selectedIndex + 1}/{modeledMethods.length}
)} - - + - - - + - +
diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx index e99689634d2..b37e94282ec 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx @@ -1,6 +1,6 @@ import { styled } from "styled-components"; -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis"; +import { VscodeButton } from "@vscode-elements/react-elements"; type ModelAlertsActionsProps = { variantAnalysisStatus: VariantAnalysisStatus; @@ -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 22dc54d2a48..e27ee0a6589 100644 --- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx @@ -1,4 +1,5 @@ -import { VSCodeBadge, VSCodeButton } from "@vscode/webview-ui-toolkit/react"; +import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton } from "@vscode-elements/react-elements"; import { forwardRef, useCallback, @@ -60,7 +61,7 @@ const ViewLink = styled(Link)` 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..891aefe4255 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx @@ -1,10 +1,6 @@ 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 { styled } from "styled-components"; import type { Method } from "../../model-editor/method"; import type { ModeledMethod } from "../../model-editor/modeled-method"; @@ -22,6 +18,7 @@ import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state"; import { ModelEvaluation } from "./ModelEvaluation"; import { useMessageFromExtension } from "../common/useMessageFromExtension"; +import { VscodeButton } from "@vscode-elements/react-elements"; const LoadingContainer = styled.div` text-align: center; @@ -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..eb76113c10b 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx @@ -1,6 +1,6 @@ import { styled } from "styled-components"; -import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; import { VariantAnalysisStatus } from "../../variant-analysis/shared/variant-analysis"; +import { VscodeButton } from "@vscode-elements/react-elements"; export type VariantAnalysisActionsProps = { variantAnalysisStatus: VariantAnalysisStatus; @@ -24,7 +24,7 @@ const Container = styled.div` gap: 1em; `; -const Button = styled(VSCodeButton)` +const Button = styled(VscodeButton)` white-space: nowrap; `; From 53363883d8e54b70042d270a7636a32333efb19d Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 1 Apr 2025 15:15:49 +0000 Subject: [PATCH 03/43] Make view tests run --- extensions/ql-vscode/src/view/jest.setup.ts | 11 +++++++++++ extensions/ql-vscode/test/jest-config.ts | 11 +++++++++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/extensions/ql-vscode/src/view/jest.setup.ts b/extensions/ql-vscode/src/view/jest.setup.ts index 23cb3e2f973..d4e03100de6 100644 --- a/extensions/ql-vscode/src/view/jest.setup.ts +++ b/extensions/ql-vscode/src/view/jest.setup.ts @@ -18,6 +18,17 @@ Object.defineProperty(window, "matchMedia", { // Used by Primer React window.CSS.supports = jest.fn().mockResolvedValue(false); +// Functions that are not implemented in jsdom +window.CSSStyleSheet.prototype.replaceSync = jest + .fn() + .mockReturnValue(undefined); +window.ElementInternals.prototype.setFormValue = jest + .fn() + .mockReturnValue(undefined); +window.ElementInternals.prototype.setValidity = jest + .fn() + .mockReturnValue(undefined); + // Store this on the window so we can mock it window.vsCodeApi = { postMessage: jest.fn(), diff --git a/extensions/ql-vscode/test/jest-config.ts b/extensions/ql-vscode/test/jest-config.ts index 5a6b6f64bef..8b5c584d16f 100644 --- a/extensions/ql-vscode/test/jest-config.ts +++ b/extensions/ql-vscode/test/jest-config.ts @@ -1,6 +1,12 @@ // These are all the packages that DO need to be transformed. All other packages will be ignored. // These pacakges all use ES modules, so need to be transformed -const transformScopes = ["@microsoft", "@octokit"]; +const transformScopes = [ + "@microsoft", + "@octokit", + "@vscode-elements", + "@lit", + "@lit-labs", +]; const transformPackages = [ "@vscode/webview-ui-toolkit", "before-after-hook", @@ -11,13 +17,14 @@ const transformPackages = [ "fetch-blob", "formdata-polyfill", "internmap", + "lit", "nanoid", "p-queue", "p-timeout", "robust-predicates", "universal-user-agent", ]; -const transformWildcards = ["d3-(.*)"]; +const transformWildcards = ["d3-(.*)", "lit-(.*)"]; const transformPatterns = [ ...transformScopes.map((scope) => `${scope}/.+`), ...transformPackages, From 73c38ae386e76326d17ac65dcccd17d6f20cd226 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 08:53:36 +0000 Subject: [PATCH 04/43] Fix tests --- .../MultipleModeledMethodsPanel.spec.tsx | 154 ++++++------------ .../model-editor/__tests__/MethodRow.spec.tsx | 26 +-- .../__tests__/ModelEvaluation.spec.tsx | 46 +++--- .../__tests__/VariantAnalysis.spec.tsx | 12 +- .../__tests__/VariantAnalysisActions.spec.tsx | 2 +- 5 files changed, 93 insertions(+), 147 deletions(-) diff --git a/extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx b/extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx index 9c0e0b464da..27372287bfc 100644 --- a/extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx @@ -52,32 +52,26 @@ describe(MultipleModeledMethodsPanel.name, () => { ).toHaveValue("none"); }); - it("disables all pagination", () => { + it("disables all pagination", async () => { render(); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeDisabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeDisabled(); + const prevButton = await screen.findByLabelText("Previous modeling"); + const nextButton = await screen.findByLabelText("Next modeling"); + + expect(prevButton).toBeDisabled(); + expect(nextButton).toBeDisabled(); expect(screen.queryByText("0/0")).not.toBeInTheDocument(); expect(screen.queryByText("1/0")).not.toBeInTheDocument(); }); - it("cannot add or delete modeling", () => { + it("cannot add or delete modeling", async () => { render(); - expect( - screen - .getByLabelText("Delete modeling") - .getElementsByTagName("input")[0], - ).toBeDisabled(); - expect( - screen.getByLabelText("Add modeling").getElementsByTagName("input")[0], - ).toBeDisabled(); + const deleteButton = await screen.findByLabelText("Delete modeling"); + const addButton = await screen.findByLabelText("Add modeling"); + + expect(deleteButton).toBeDisabled(); + expect(addButton).toBeDisabled(); }); }); @@ -104,28 +98,22 @@ describe(MultipleModeledMethodsPanel.name, () => { ).toHaveValue("sink"); }); - it("disables all pagination", () => { + it("disables all pagination", async () => { render(); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeDisabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeDisabled(); + const prevButton = await screen.findByLabelText("Previous modeling"); + const nextButton = await screen.findByLabelText("Next modeling"); + + expect(prevButton).toBeDisabled(); + expect(nextButton).toBeDisabled(); expect(screen.queryByText("1/1")).not.toBeInTheDocument(); }); - it("cannot delete modeling", () => { + it("cannot delete modeling", async () => { render(); - expect( - screen - .getByLabelText("Delete modeling") - .getElementsByTagName("input")[0], - ).toBeDisabled(); + const deleteButton = await screen.findByLabelText("Delete modeling"); + expect(deleteButton).toBeDisabled(); }); it("can add modeling", async () => { @@ -199,37 +187,26 @@ describe(MultipleModeledMethodsPanel.name, () => { it("disables the correct pagination", async () => { render(); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeDisabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeEnabled(); + const prevButton = await screen.findByLabelText("Previous modeling"); + const nextButton = await screen.findByLabelText("Next modeling"); + + expect(prevButton).toBeDisabled(); + expect(nextButton).toBeEnabled(); }); it("can use the pagination", async () => { render(); - await userEvent.click(screen.getByLabelText("Next modeling")); + const prevButton = await screen.findByLabelText("Previous modeling"); + const nextButton = await screen.findByLabelText("Next modeling"); + await userEvent.click(nextButton); await waitFor(() => { - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(prevButton).toBeEnabled(); }); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeDisabled(); + expect(prevButton).toBeEnabled(); + expect(nextButton).toBeDisabled(); expect(screen.getByText("2/2")).toBeInTheDocument(); expect( @@ -445,34 +422,20 @@ describe(MultipleModeledMethodsPanel.name, () => { it("can use the pagination", async () => { render(); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeDisabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeEnabled(); + const prevButton = await screen.findByLabelText("Previous modeling"); + const nextButton = await screen.findByLabelText("Next modeling"); + expect(prevButton).toBeDisabled(); + expect(nextButton).toBeEnabled(); expect(screen.getByText("1/3")).toBeInTheDocument(); - await userEvent.click(screen.getByLabelText("Next modeling")); + await userEvent.click(nextButton); await waitFor(() => { - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(prevButton).toBeEnabled(); }); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(prevButton).toBeEnabled(); + expect(nextButton).toBeEnabled(); expect(screen.getByText("2/3")).toBeInTheDocument(); expect( @@ -481,16 +444,10 @@ describe(MultipleModeledMethodsPanel.name, () => { }), ).toHaveValue("source"); - await userEvent.click(screen.getByLabelText("Next modeling")); + await userEvent.click(nextButton); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeDisabled(); + expect(prevButton).toBeEnabled(); + expect(nextButton).toBeDisabled(); expect(screen.getByText("3/3")).toBeInTheDocument(); expect( @@ -499,24 +456,14 @@ describe(MultipleModeledMethodsPanel.name, () => { }), ).toHaveValue("local"); - await userEvent.click(screen.getByLabelText("Previous modeling")); + await userEvent.click(prevButton); await waitFor(() => { - expect( - screen - .getByLabelText("Next modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(nextButton).toBeEnabled(); }); - expect( - screen - .getByLabelText("Previous modeling") - .getElementsByTagName("input")[0], - ).toBeEnabled(); - expect( - screen.getByLabelText("Next modeling").getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(prevButton).toBeEnabled(); + expect(nextButton).toBeEnabled(); expect(screen.getByText("2/3")).toBeInTheDocument(); expect( @@ -574,12 +521,11 @@ describe(MultipleModeledMethodsPanel.name, () => { const render = createRender(modeledMethods); - it("can add modeling", () => { + it("can add modeling", async () => { render(); - expect( - screen.getByLabelText("Add modeling").getElementsByTagName("input")[0], - ).toBeEnabled(); + const addButton = await screen.findByLabelText("Add modeling"); + expect(addButton).toBeEnabled(); }); it("can delete first modeling", async () => { diff --git a/extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx b/extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx index 3fac0dc0f99..6ce364b4393 100644 --- a/extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx +++ b/extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx @@ -243,9 +243,9 @@ describe(MethodRow.name, () => { modeledMethods: [], }); - const addButton = screen.queryByLabelText("Add new model"); + const addButton = await screen.findByLabelText("Add new model"); expect(addButton).toBeInTheDocument(); - expect(addButton?.getElementsByTagName("input")[0]).toBeDisabled(); + expect(addButton).toBeDisabled(); expect(screen.queryByLabelText("Remove model")).not.toBeInTheDocument(); }); @@ -255,9 +255,9 @@ describe(MethodRow.name, () => { modeledMethods: [{ ...modeledMethod, type: "none" }], }); - const addButton = screen.queryByLabelText("Add new model"); + const addButton = await screen.findByLabelText("Add new model"); expect(addButton).toBeInTheDocument(); - expect(addButton?.getElementsByTagName("input")[0]).toBeDisabled(); + expect(addButton).toBeDisabled(); expect(screen.queryByLabelText("Remove model")).not.toBeInTheDocument(); }); @@ -267,9 +267,9 @@ describe(MethodRow.name, () => { modeledMethods: [modeledMethod], }); - const addButton = screen.queryByLabelText("Add new model"); + const addButton = await screen.findByLabelText("Add new model"); expect(addButton).toBeInTheDocument(); - expect(addButton?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(addButton).toBeEnabled(); expect(screen.queryByLabelText("Remove model")).not.toBeInTheDocument(); }); @@ -282,16 +282,16 @@ describe(MethodRow.name, () => { ], }); - const addButton = screen.queryByLabelText("Add new model"); + const addButton = await screen.findByLabelText("Add new model"); expect(addButton).toBeInTheDocument(); - expect(addButton?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(addButton).toBeEnabled(); - const removeButton = screen.queryByLabelText("Remove model"); + const removeButton = await screen.findByLabelText("Remove model"); expect(removeButton).toBeInTheDocument(); - expect(removeButton?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(removeButton).toBeEnabled(); }); - it("shows add model button on first row and remove model button on all other rows", async () => { + it("shows add model button on first row and remove model button on all other rows", () => { render({ modeledMethods: [ { ...modeledMethod, type: "source" }, @@ -303,12 +303,12 @@ describe(MethodRow.name, () => { const addButtons = screen.queryAllByLabelText("Add new model"); expect(addButtons.length).toBe(1); - expect(addButtons[0]?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(addButtons[0]).toBeEnabled(); const removeButtons = screen.queryAllByLabelText("Remove model"); expect(removeButtons.length).toBe(3); for (const removeButton of removeButtons) { - expect(removeButton?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(removeButton).toBeEnabled(); } }); diff --git a/extensions/ql-vscode/src/view/model-editor/__tests__/ModelEvaluation.spec.tsx b/extensions/ql-vscode/src/view/model-editor/__tests__/ModelEvaluation.spec.tsx index 24897bfa098..150ace05b53 100644 --- a/extensions/ql-vscode/src/view/model-editor/__tests__/ModelEvaluation.spec.tsx +++ b/extensions/ql-vscode/src/view/model-editor/__tests__/ModelEvaluation.spec.tsx @@ -1,4 +1,4 @@ -import { render as reactRender, screen } from "@testing-library/react"; +import { render as reactRender, screen, waitFor } from "@testing-library/react"; import type { Props } from "../ModelEvaluation"; import { ModelEvaluation } from "../ModelEvaluation"; import { createMockModelEditorViewState } from "../../../../test/factories/model-editor/view-state"; @@ -39,47 +39,51 @@ describe(ModelEvaluation.name, () => { }); describe("when showEvaluationUi is true", () => { - it("renders evaluation UI with 'Evaluate' button enabled", () => { + it("renders evaluation UI with 'Evaluate' button enabled", async () => { render(); - const evaluateButton = screen.queryByText("Evaluate"); + const evaluateButton = await screen.findByText("Evaluate"); expect(evaluateButton).toBeInTheDocument(); - expect(evaluateButton?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(evaluateButton).toBeEnabled(); expect(screen.queryByText("Stop evaluation")).not.toBeInTheDocument(); expect(screen.queryByText("Evaluation run")).not.toBeInTheDocument(); }); - it("disables 'Evaluate' button when there are no custom models", () => { + it("disables 'Evaluate' button when there are no custom models", async () => { render({ modeledMethods: {}, }); - const evaluateButton = screen.queryByText("Evaluate"); + const evaluateButton = await screen.findByText("Evaluate"); expect(evaluateButton).toBeInTheDocument(); - expect(evaluateButton?.getElementsByTagName("input")[0]).toBeDisabled(); + await waitFor(() => { + expect(evaluateButton).toBeDisabled(); + }); expect(screen.queryByText("Stop evaluation")).not.toBeInTheDocument(); expect(screen.queryByText("Evaluation run")).not.toBeInTheDocument(); }); - it("disables 'Evaluate' button when there are unsaved changes", () => { + it("disables 'Evaluate' button when there are unsaved changes", async () => { render({ modifiedSignatures: new Set([method.signature]), }); - const evaluateButton = screen.queryByText("Evaluate"); + const evaluateButton = await screen.findByText("Evaluate"); expect(evaluateButton).toBeInTheDocument(); - expect(evaluateButton?.getElementsByTagName("input")[0]).toBeDisabled(); + await waitFor(() => { + expect(evaluateButton).toBeDisabled(); + }); expect(screen.queryByText("Stop evaluation")).not.toBeInTheDocument(); expect(screen.queryByText("Evaluation run")).not.toBeInTheDocument(); }); - it("renders 'Evaluate' button and 'Evaluation run' link when there is a completed evaluation", () => { + it("renders 'Evaluate' button and 'Evaluation run' link when there is a completed evaluation", async () => { render({ evaluationRun: { isPreparing: false, @@ -89,16 +93,16 @@ describe(ModelEvaluation.name, () => { }, }); - const evaluateButton = screen.queryByText("Evaluate"); + const evaluateButton = await screen.findByText("Evaluate"); expect(evaluateButton).toBeInTheDocument(); - expect(evaluateButton?.getElementsByTagName("input")[0]).toBeEnabled(); + expect(evaluateButton).toBeEnabled(); expect(screen.queryByText("Evaluation run")).toBeInTheDocument(); expect(screen.queryByText("Stop evaluation")).not.toBeInTheDocument(); }); - it("renders 'Stop evaluation' button when there is an in progress evaluation, but no variant analysis yet", () => { + it("renders 'Stop evaluation' button when there is an in progress evaluation, but no variant analysis yet", async () => { render({ evaluationRun: { isPreparing: true, @@ -106,18 +110,16 @@ describe(ModelEvaluation.name, () => { }, }); - const stopEvaluationButton = screen.queryByText("Stop evaluation"); + const stopEvaluationButton = await screen.findByText("Stop evaluation"); expect(stopEvaluationButton).toBeInTheDocument(); - expect( - stopEvaluationButton?.getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(stopEvaluationButton).toBeEnabled(); expect(screen.queryByText("Evaluation run")).not.toBeInTheDocument(); expect(screen.queryByText("Evaluate")).not.toBeInTheDocument(); }); - it("renders 'Stop evaluation' button and 'Evaluation run' link when there is an in progress evaluation with variant analysis", () => { + it("renders 'Stop evaluation' button and 'Evaluation run' link when there is an in progress evaluation with variant analysis", async () => { render({ evaluationRun: { isPreparing: false, @@ -127,11 +129,9 @@ describe(ModelEvaluation.name, () => { }, }); - const stopEvaluationButton = screen.queryByText("Stop evaluation"); + const stopEvaluationButton = await screen.findByText("Stop evaluation"); expect(stopEvaluationButton).toBeInTheDocument(); - expect( - stopEvaluationButton?.getElementsByTagName("input")[0], - ).toBeEnabled(); + expect(stopEvaluationButton).toBeEnabled(); expect(screen.queryByText("Evaluation run")).toBeInTheDocument(); diff --git a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysis.spec.tsx b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysis.spec.tsx index b8a7bfcd539..3279ed446d2 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysis.spec.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysis.spec.tsx @@ -1,4 +1,4 @@ -import { render as reactRender, screen, waitFor } from "@testing-library/react"; +import { render as reactRender, screen } from "@testing-library/react"; import { VariantAnalysisFailureReason, VariantAnalysisStatus, @@ -57,9 +57,6 @@ describe(VariantAnalysis.name, () => { const variantAnalysis = createMockVariantAnalysis({}); render({ variantAnalysis }); - await waitFor(() => screen.getByDisplayValue("All")); - await waitFor(() => screen.getByDisplayValue("Number of results")); - await postMessage({ t: "setFilterSortState", filterSortState: { @@ -69,8 +66,11 @@ describe(VariantAnalysis.name, () => { }, }); - expect(screen.getByDisplayValue("With results")).toBeInTheDocument(); - expect(screen.getByDisplayValue("Alphabetically")).toBeInTheDocument(); + const withResults = await screen.findByText("With results"); + expect(withResults).toBeInTheDocument(); + + const alphabetically = await screen.findByText("Alphabetically"); + expect(alphabetically).toBeInTheDocument(); expect(screen.queryByDisplayValue("All")).not.toBeInTheDocument(); expect( diff --git a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx index de19458646e..50502ee184e 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx @@ -52,7 +52,7 @@ describe(VariantAnalysisActions.name, () => { const button = screen.getByText("Stopping query"); expect(button).toBeInTheDocument(); - expect(button.getElementsByTagName("input")[0]).toBeDisabled(); + expect(button).toBeDisabled(); }); it("does not render a stop query button when canceling", async () => { From 5966cea62344118b05175a4f719250f80f9b0d89 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 13:23:07 +0000 Subject: [PATCH 05/43] Replace VSCodeTextField for VscodeTextfield --- extensions/ql-vscode/src/view/common/SearchBox.tsx | 4 ++-- .../ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx | 6 +++--- .../src/view/compare-performance/RenamingInput.tsx | 5 ++--- .../ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx | 4 ++-- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/SearchBox.tsx b/extensions/ql-vscode/src/view/common/SearchBox.tsx index 464d303fa7e..a158f40c4b1 100644 --- a/extensions/ql-vscode/src/view/common/SearchBox.tsx +++ b/extensions/ql-vscode/src/view/common/SearchBox.tsx @@ -1,9 +1,9 @@ import { useCallback } from "react"; import { styled } from "styled-components"; -import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; +import { VscodeTextfield } from "@vscode-elements/react-elements"; import { Codicon } from "./icon"; -const TextField = styled(VSCodeTextField)` +const TextField = styled(VscodeTextfield)` width: 100%; `; diff --git a/extensions/ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx b/extensions/ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx index 32240fac67e..7e190a6d05a 100644 --- a/extensions/ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx +++ b/extensions/ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx @@ -14,15 +14,15 @@ import { useRole, } from "@floating-ui/react"; import { css, styled } from "styled-components"; -import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; import type { Option } from "./options"; import { findMatchingOptions } from "./options"; import { SuggestBoxItem } from "./SuggestBoxItem"; import { LabelText } from "./LabelText"; import type { Diagnostic } from "./diagnostics"; import { useOpenKey } from "./useOpenKey"; +import { VscodeTextfield } from "@vscode-elements/react-elements"; -const Input = styled(VSCodeTextField)<{ $error: boolean }>` +const Input = styled(VscodeTextfield)<{ $error: boolean }>` width: 100%; font-family: var(--vscode-editor-font-family); @@ -96,7 +96,7 @@ export type SuggestBoxProps< /** * Can be used to render a different component for the input. This is used - * in testing to use default HTML components rather than the VSCodeTextField + * in testing to use default HTML components rather than the VscodeTextfield * for easier testing. * @param props The props returned by `getReferenceProps` of {@link useInteractions} */ diff --git a/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx b/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx index dfad2a2e13d..c938cc6d1a4 100644 --- a/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx +++ b/extensions/ql-vscode/src/view/compare-performance/RenamingInput.tsx @@ -1,7 +1,6 @@ import type { ChangeEvent } from "react"; import { styled } from "styled-components"; -import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; -import { VscodeButton } from "@vscode-elements/react-elements"; +import { VscodeButton, VscodeTextfield } from "@vscode-elements/react-elements"; import { Codicon } from "../common"; export class Renaming { @@ -23,7 +22,7 @@ function tryCompilePattern(pattern: string): RegExp | undefined { } } -const Input = styled(VSCodeTextField)` +const Input = styled(VscodeTextfield)` width: 20em; `; diff --git a/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx b/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx index d52ab1306bf..69f9a0829b9 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx @@ -4,8 +4,8 @@ import type { ModeledMethod, TypeModeledMethod, } from "../../model-editor/modeled-method"; -import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; import { useDebounceCallback } from "../common/useDebounceCallback"; +import { VscodeTextfield } from "@vscode-elements/react-elements"; type Props = { modeledMethod: TypeModeledMethod; @@ -53,7 +53,7 @@ export const ModelTypeTextbox = ({ ); return ( - Date: Wed, 2 Apr 2025 13:44:16 +0000 Subject: [PATCH 06/43] Replace VSCodeDropdown and VSCodeOption --- .../view/common/CodePaths/CodeFlowsDropdown.tsx | 13 ++++++++----- .../src/view/model-alerts/ModelAlertsSort.tsx | 13 ++++++++----- .../view/variant-analysis/RepositoriesFilter.tsx | 11 +++++++---- .../variant-analysis/RepositoriesResultFormat.tsx | 15 +++++++++------ .../view/variant-analysis/RepositoriesSort.tsx | 15 +++++++++------ 5 files changed, 41 insertions(+), 26 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx b/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx index 277013084f1..cc232060f0a 100644 --- a/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx +++ b/extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx @@ -1,6 +1,9 @@ import type { ChangeEvent, SetStateAction } from "react"; import { useCallback } from "react"; -import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"; +import { + VscodeOption, + VscodeSingleSelect, +} from "@vscode-elements/react-elements"; import type { CodeFlow } from "../../../variant-analysis/shared/analysis-result"; @@ -35,12 +38,12 @@ export const CodeFlowsDropdown = ({ .toString(); return ( - + {codeFlows.map((codeFlow, index) => ( - + {getCodeFlowName(codeFlow)} - + ))} - + ); }; diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx index 043355a5782..dbc80ea2ea7 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx @@ -1,10 +1,13 @@ import { useCallback } from "react"; import { styled } from "styled-components"; -import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"; +import { + VscodeOption, + VscodeSingleSelect, +} from "@vscode-elements/react-elements"; import { SortKey } from "../../model-editor/shared/model-alerts-filter-sort"; import { Codicon } from "../common"; -const Dropdown = styled(VSCodeDropdown)` +const Dropdown = styled(VscodeSingleSelect)` width: 100%; `; @@ -28,10 +31,10 @@ export const ModelAlertsSort = ({ value, onChange, className }: Props) => { return ( - Alphabetically - + Alphabetically + Number of results - + ); }; diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx index 56596b2ecbf..784d045d861 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx @@ -1,10 +1,13 @@ import { useCallback } from "react"; import { styled } from "styled-components"; -import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"; +import { + VscodeOption, + VscodeSingleSelect, +} from "@vscode-elements/react-elements"; import { Codicon } from "../common"; import { FilterKey } from "../../variant-analysis/shared/variant-analysis-filter-sort"; -const Dropdown = styled(VSCodeDropdown)` +const Dropdown = styled(VscodeSingleSelect)` width: 100%; `; @@ -28,8 +31,8 @@ export const RepositoriesFilter = ({ value, onChange, className }: Props) => { return ( - All - With results + All + With results ); }; diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx index 11ac814cc18..d2e19e1d090 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx @@ -1,10 +1,13 @@ import { useCallback } from "react"; import { styled } from "styled-components"; -import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"; +import { + VscodeOption, + VscodeSingleSelect, +} from "@vscode-elements/react-elements"; import { Codicon } from "../common"; import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format"; -const Dropdown = styled(VSCodeDropdown)` +const Dropdown = styled(VscodeSingleSelect)` width: 100%; `; @@ -32,12 +35,12 @@ export const RepositoriesResultFormat = ({ return ( - + {ResultFormat.Alerts} - - + + {ResultFormat.RawResults} - + ); }; diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx index d4383a3e1ea..874bca0de2c 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx @@ -1,10 +1,13 @@ import { useCallback } from "react"; import { styled } from "styled-components"; -import { VSCodeDropdown, VSCodeOption } from "@vscode/webview-ui-toolkit/react"; +import { + VscodeOption, + VscodeSingleSelect, +} from "@vscode-elements/react-elements"; import { SortKey } from "../../variant-analysis/shared/variant-analysis-filter-sort"; import { Codicon } from "../common"; -const Dropdown = styled(VSCodeDropdown)` +const Dropdown = styled(VscodeSingleSelect)` width: 100%; `; @@ -28,11 +31,11 @@ export const RepositoriesSort = ({ value, onChange, className }: Props) => { return ( - Alphabetically - + Alphabetically + Number of results - - Popularity + + Popularity ); }; From 24a3530189077ad21039dc14eb6c2148c38ce25b Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 14:02:03 +0000 Subject: [PATCH 07/43] Fix MethodRow stories --- .../src/stories/model-editor/MethodRow.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx b/extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx index 6b10353d0a9..f7bf0748b20 100644 --- a/extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx +++ b/extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx @@ -112,6 +112,7 @@ Source.args = { modeledMethods: [{ ...modeledMethod, type: "source" }], methodCanBeModeled: true, viewState, + onChange: () => {}, }; export const Sink = Template.bind({}); @@ -120,6 +121,7 @@ Sink.args = { modeledMethods: [{ ...modeledMethod, type: "sink" }], methodCanBeModeled: true, viewState, + onChange: () => {}, }; export const Summary = Template.bind({}); @@ -136,6 +138,7 @@ Neutral.args = { modeledMethods: [{ ...modeledMethod, type: "neutral" }], methodCanBeModeled: true, viewState, + onChange: () => {}, }; export const AlreadyModeled = Template.bind({}); @@ -155,6 +158,7 @@ MultipleModelings.args = { ], methodCanBeModeled: true, viewState, + onChange: () => {}, }; export const ValidationError = Template.bind({}); @@ -166,6 +170,7 @@ ValidationError.args = { ], methodCanBeModeled: true, viewState, + onChange: () => {}, }; export const MultipleValidationErrors = Template.bind({}); @@ -180,4 +185,5 @@ MultipleValidationErrors.args = { ], methodCanBeModeled: true, viewState, + onChange: () => {}, }; From 8e7a93bb2d31b934c77509a7c39bbaf650278ebb Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 15:01:23 +0000 Subject: [PATCH 08/43] Replace VSCodeBadge --- .../src/view/model-alerts/ModelAlertsResults.tsx | 4 ++-- .../ql-vscode/src/view/model-editor/MethodRow.tsx | 5 ++--- .../src/view/model-editor/ModelAlertsIndicator.tsx | 4 ++-- .../src/view/results/AlertTableResultRow.tsx | 4 ++-- .../src/view/variant-analysis/RepoRow.tsx | 7 ++++--- .../VariantAnalysisOutcomePanels.tsx | 14 +++++++------- 6 files changed, 19 insertions(+), 19 deletions(-) diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx index 8b27896d333..98be02b3e44 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx @@ -1,7 +1,7 @@ import { styled } from "styled-components"; import type { ModelAlerts } from "../../model-editor/model-alerts/model-alerts"; import { Codicon } from "../common"; -import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react"; +import { VscodeBadge } from "@vscode-elements/react-elements"; import { useCallback, useEffect, useRef, useState } from "react"; import { formatDecimal } from "../../common/number"; import AnalysisAlertResult from "../variant-analysis/AnalysisAlertResult"; @@ -103,7 +103,7 @@ export const ModelAlertsResults = ({ {!isExpanded && ( )} - {formatDecimal(modelAlerts.alerts.length)} + {formatDecimal(modelAlerts.alerts.length)} {modelAlerts.model.type} {listUnordered} - {shortestPath} + {shortestPath} {msg} diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx index fc381fe016f..f957f6ac358 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx @@ -1,7 +1,8 @@ import type { ChangeEvent } from "react"; import { useCallback, useEffect, useState } from "react"; import { styled } from "styled-components"; -import { VSCodeBadge, VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"; +import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"; +import { VscodeBadge } from "@vscode-elements/react-elements"; import type { VariantAnalysisScannedRepositoryState } from "../../variant-analysis/shared/variant-analysis"; import { isCompletedAnalysisRepoStatus, @@ -269,9 +270,9 @@ export const RepoRow = ({ )} {resultsLoading && } - + {resultCount === undefined ? "-" : formatDecimal(resultCount)} - + {repository.fullName} diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx index 469c7aa6d29..fd25b40ea54 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx @@ -2,11 +2,11 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import { styled } from "styled-components"; import { - VSCodeBadge, VSCodePanels, VSCodePanelTab, VSCodePanelView, } from "@vscode/webview-ui-toolkit/react"; +import { VscodeBadge } from "@vscode-elements/react-elements"; import { formatDecimal } from "../../common/number"; import type { VariantAnalysis, @@ -158,25 +158,25 @@ export const VariantAnalysisOutcomePanels = ({ {scannedReposCount > 0 && ( Analyzed - + {formatDecimal(variantAnalysis.scannedRepos?.length ?? 0)} - + )} {notFoundRepos?.repositoryCount && ( No access - + {formatDecimal(notFoundRepos.repositoryCount)} - + )} {noCodeqlDbRepos?.repositoryCount && ( No database - + {formatDecimal(noCodeqlDbRepos.repositoryCount)} - + )} {scannedReposCount > 0 && ( From 1db6add44f21864a4890f940dc48321085001f90 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 15:02:19 +0000 Subject: [PATCH 09/43] Fix AlertTable stories --- .../ql-vscode/src/stories/results/AlertTable.stories.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/extensions/ql-vscode/src/stories/results/AlertTable.stories.tsx b/extensions/ql-vscode/src/stories/results/AlertTable.stories.tsx index bfb179a1fed..d2cc19f3916 100644 --- a/extensions/ql-vscode/src/stories/results/AlertTable.stories.tsx +++ b/extensions/ql-vscode/src/stories/results/AlertTable.stories.tsx @@ -431,4 +431,7 @@ WithCodeFlows.args = { showRawResults={() => action("show-raw-results")} /> ), + userSettings: { + shouldShowProvenance: true, + }, }; From f466998d1abc0563787d494170b6dc9c4f88f82e Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 15:30:35 +0000 Subject: [PATCH 10/43] Replace VSCodeDivider and fix LibraryRow stories --- .../src/stories/model-editor/LibraryRow.stories.tsx | 1 + extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) 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/model-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx index 55229e448b8..ce2d0bcb7cc 100644 --- a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx @@ -7,11 +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 { VSCodeDivider, VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton, VscodeDivider } from "@vscode-elements/react-elements"; 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); @@ -34,7 +34,7 @@ const TitleContainer = styled.button` cursor: pointer; `; -const SectionDivider = styled(VSCodeDivider)` +const SectionDivider = styled(VscodeDivider)` padding-top: 0.3rem; padding-bottom: 0.3rem; `; From 82427ed1a272c396a8c8c22330b494c40c28a123 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 2 Apr 2025 15:34:07 +0000 Subject: [PATCH 11/43] Replace VSCodeCheckbox --- .../ql-vscode/src/view/model-editor/ModelEditor.tsx | 8 ++++---- .../ql-vscode/src/view/variant-analysis/RepoRow.tsx | 5 ++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx index 891aefe4255..da9a1e50439 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import type { ToModelEditorMessage } from "../../common/interface-types"; -import { VSCodeCheckbox, VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { VSCodeTag } from "@vscode/webview-ui-toolkit/react"; +import { VscodeButton, VscodeCheckbox } 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"; @@ -18,7 +19,6 @@ import type { AccessPathSuggestionOptions } from "../../model-editor/suggestions import type { ModelEvaluationRunState } from "../../model-editor/shared/model-evaluation-run-state"; import { ModelEvaluation } from "./ModelEvaluation"; import { useMessageFromExtension } from "../common/useMessageFromExtension"; -import { VscodeButton } from "@vscode-elements/react-elements"; const LoadingContainer = styled.div` text-align: center; @@ -367,12 +367,12 @@ export function ModelEditor({ - Hide modeled methods - + diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx index f957f6ac358..164aa112c23 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx @@ -1,8 +1,7 @@ import type { ChangeEvent } from "react"; import { useCallback, useEffect, useState } from "react"; import { styled } from "styled-components"; -import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react"; -import { VscodeBadge } from "@vscode-elements/react-elements"; +import { VscodeBadge, VscodeCheckbox } from "@vscode-elements/react-elements"; import type { VariantAnalysisScannedRepositoryState } from "../../variant-analysis/shared/variant-analysis"; import { isCompletedAnalysisRepoStatus, @@ -255,7 +254,7 @@ export const RepoRow = ({ disabled={disabled} aria-expanded={isExpanded} > - Date: Wed, 2 Apr 2025 16:06:43 +0000 Subject: [PATCH 12/43] Replace VSCodeProgressRing --- .../src/view/model-editor/ModelEditorProgressRing.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEditorProgressRing.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEditorProgressRing.tsx index 3994caddf82..523e8fd32c8 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEditorProgressRing.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEditorProgressRing.tsx @@ -1,7 +1,7 @@ -import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"; +import { VscodeProgressRing } from "@vscode-elements/react-elements"; import { styled } from "styled-components"; -export const ModelEditorProgressRing = styled(VSCodeProgressRing)` +export const ModelEditorProgressRing = styled(VscodeProgressRing)` width: 16px; height: 16px; margin-right: 5px; From 33d7a586c83be36adfd2912a939f43b54c9261d2 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Thu, 3 Apr 2025 10:04:39 +0000 Subject: [PATCH 13/43] Add new Badge component to apply border-radius by default --- extensions/ql-vscode/src/view/common/Badge.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 extensions/ql-vscode/src/view/common/Badge.tsx diff --git a/extensions/ql-vscode/src/view/common/Badge.tsx b/extensions/ql-vscode/src/view/common/Badge.tsx new file mode 100644 index 00000000000..70568f1b2a6 --- /dev/null +++ b/extensions/ql-vscode/src/view/common/Badge.tsx @@ -0,0 +1,9 @@ +import { VscodeBadge } from "@vscode-elements/react-elements"; + +// This applies the counter variant by default so the border-radius attribute is set +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const Badge = (props: any) => ( + + {props.children} + +); From 4a29babb93d99c934b5870185819b3b6ba4ba96d Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Thu, 3 Apr 2025 10:17:47 +0000 Subject: [PATCH 14/43] Use custom Badge component --- .../ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx | 4 ++-- extensions/ql-vscode/src/view/model-editor/MethodRow.tsx | 5 +++-- .../src/view/model-editor/ModelAlertsIndicator.tsx | 4 ++-- .../ql-vscode/src/view/results/AlertTableResultRow.tsx | 4 ++-- extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx | 7 ++++--- 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx index 98be02b3e44..d10757e3748 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx @@ -1,7 +1,6 @@ import { styled } from "styled-components"; import type { ModelAlerts } from "../../model-editor/model-alerts/model-alerts"; import { Codicon } from "../common"; -import { VscodeBadge } from "@vscode-elements/react-elements"; import { useCallback, useEffect, useRef, useState } from "react"; import { formatDecimal } from "../../common/number"; import AnalysisAlertResult from "../variant-analysis/AnalysisAlertResult"; @@ -11,6 +10,7 @@ import { vscode } from "../vscode-api"; import { createModeledMethodKey } from "../../model-editor/modeled-method"; import type { ModeledMethod } from "../../model-editor/modeled-method"; import { Link } from "../common/Link"; +import { Badge } from "../common/Badge"; // This will ensure that these icons have a className which we can use in the TitleContainer const ExpandCollapseCodicon = styled(Codicon)``; @@ -103,7 +103,7 @@ export const ModelAlertsResults = ({ {!isExpanded && ( )} - {formatDecimal(modelAlerts.alerts.length)} + {formatDecimal(modelAlerts.alerts.length)} {modelAlerts.model.type} {listUnordered} - {shortestPath} + {shortestPath} {msg} diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx index 164aa112c23..da0f00f4b41 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx @@ -1,7 +1,7 @@ import type { ChangeEvent } from "react"; import { useCallback, useEffect, useState } from "react"; import { styled } from "styled-components"; -import { VscodeBadge, VscodeCheckbox } from "@vscode-elements/react-elements"; +import { VscodeCheckbox } from "@vscode-elements/react-elements"; import type { VariantAnalysisScannedRepositoryState } from "../../variant-analysis/shared/variant-analysis"; import { isCompletedAnalysisRepoStatus, @@ -27,6 +27,7 @@ import StarCount from "../common/StarCount"; import { useTelemetryOnChange } from "../common/telemetry"; import { DeterminateProgressRing } from "../common/DeterminateProgressRing"; import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format"; +import { Badge } from "../common/Badge"; // This will ensure that these icons have a className which we can use in the TitleContainer const ExpandCollapseCodicon = styled(Codicon)``; @@ -269,9 +270,9 @@ export const RepoRow = ({ )} {resultsLoading && } - + {resultCount === undefined ? "-" : formatDecimal(resultCount)} - + {repository.fullName} From 3b1e9298b4808382af3b6e1ef010732719ba32b0 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Thu, 3 Apr 2025 10:34:50 +0000 Subject: [PATCH 15/43] Replace VSCodePanelTab --- .../VariantAnalysisOutcomePanels.tsx | 71 ++++++++++++------- 1 file changed, 45 insertions(+), 26 deletions(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx index fd25b40ea54..33031924f49 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx @@ -2,11 +2,10 @@ import type { Dispatch, SetStateAction } from "react"; import { useState } from "react"; import { styled } from "styled-components"; import { - VSCodePanels, - VSCodePanelTab, - VSCodePanelView, -} from "@vscode/webview-ui-toolkit/react"; -import { VscodeBadge } from "@vscode-elements/react-elements"; + VscodeTabHeader, + VscodeTabPanel, + VscodeTabs, +} from "@vscode-elements/react-elements"; import { formatDecimal } from "../../common/number"; import type { VariantAnalysis, @@ -21,6 +20,7 @@ import type { RepositoriesFilterSortState } from "../../variant-analysis/shared/ import { RepositoriesSearchSortRow } from "./RepositoriesSearchSortRow"; import { FailureReasonAlert } from "./FailureReasonAlert"; import { ResultFormat } from "../../variant-analysis/shared/variant-analysis-result-format"; +import { Badge } from "../common/Badge"; export type VariantAnalysisOutcomePanelProps = { variantAnalysis: VariantAnalysis; @@ -34,8 +34,27 @@ export type VariantAnalysisOutcomePanelProps = { setFilterSortState: Dispatch>; }; -const Tab = styled(VSCodePanelTab)` +const Tabs = styled(VscodeTabs)` + column-gap: 32px; + + > vscode-tab-header { + margin-right: 32px; + } +`; + +const TabHeader = styled(VscodeTabHeader)` text-transform: uppercase; + + > * { + // This copies the styles from VSCodePanelTab + &:last-child { + margin-left: 8px; + } + } +`; + +const TabPanel = styled(VscodeTabPanel)` + padding: 10px 6px; `; const WarningsContainer = styled.div` @@ -154,33 +173,33 @@ export const VariantAnalysisOutcomePanels = ({ onResultFormatChange={setResultFormat} variantAnalysisQueryKind={variantAnalysis.query.kind} /> - + {scannedReposCount > 0 && ( - + Analyzed - + {formatDecimal(variantAnalysis.scannedRepos?.length ?? 0)} - - + + )} {notFoundRepos?.repositoryCount && ( - + No access - + {formatDecimal(notFoundRepos.repositoryCount)} - - + + )} {noCodeqlDbRepos?.repositoryCount && ( - + No database - + {formatDecimal(noCodeqlDbRepos.repositoryCount)} - - + + )} {scannedReposCount > 0 && ( - + - + )} {notFoundRepos?.repositoryCount && ( - + - + )} {noCodeqlDbRepos?.repositoryCount && ( - + - + )} - + ); }; From f655fab8d6a30d74035ca79ec2b990657bffbf9a Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Thu, 3 Apr 2025 10:44:38 +0000 Subject: [PATCH 16/43] Remove vscode/webview-ui-toolkit --- extensions/ql-vscode/package-lock.json | 66 ------------------------ extensions/ql-vscode/package.json | 1 - extensions/ql-vscode/test/jest-config.ts | 1 - 3 files changed, 68 deletions(-) diff --git a/extensions/ql-vscode/package-lock.json b/extensions/ql-vscode/package-lock.json index 316b2df510f..7bbd7eaebd1 100644 --- a/extensions/ql-vscode/package-lock.json +++ b/extensions/ql-vscode/package-lock.json @@ -18,7 +18,6 @@ "@vscode/codicons": "^0.0.36", "@vscode/debugadapter": "^1.59.0", "@vscode/debugprotocol": "^1.68.0", - "@vscode/webview-ui-toolkit": "^1.0.1", "ajv": "^8.11.0", "chokidar": "^3.6.0", "d3": "^7.9.0", @@ -5115,47 +5114,6 @@ "node": ">= 14" } }, - "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==" - }, - "node_modules/@microsoft/fast-foundation": { - "version": "2.49.4", - "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.49.4.tgz", - "integrity": "sha512-5I2tSPo6bnOfVAIX7XzX+LhilahwvD7h+yzl3jW0t5IYmMX9Lci9VUVyx5f8hHdb1O9a8Y9Atb7Asw7yFO/u+w==", - "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-foundation/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/@microsoft/fast-react-wrapper": { - "version": "0.3.22", - "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.3.22.tgz", - "integrity": "sha512-XhlX4m6znh7XW92oPvlKoG9USUn9JtF9rP1qtUoIbkaDaFtUS+H8o1Jn6/oK/rS44LbBLJXrvRkInmSWlDiGFw==", - "dependencies": { - "@microsoft/fast-element": "^1.12.0", - "@microsoft/fast-foundation": "^2.49.4" - }, - "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==", - "dependencies": { - "exenv-es6": "^1.1.1" - } - }, "node_modules/@mswjs/interceptors": { "version": "0.37.3", "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.37.3.tgz", @@ -8806,20 +8764,6 @@ "win32" ] }, - "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==", - "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/@yarnpkg/lockfile": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz", @@ -13435,11 +13379,6 @@ "dev": true, "license": "ISC" }, - "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==" - }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -24633,11 +24572,6 @@ "url": "https://opencollective.com/unts" } }, - "node_modules/tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" - }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/extensions/ql-vscode/package.json b/extensions/ql-vscode/package.json index e2cd5fea803..567d944e591 100644 --- a/extensions/ql-vscode/package.json +++ b/extensions/ql-vscode/package.json @@ -1976,7 +1976,6 @@ "@vscode/codicons": "^0.0.36", "@vscode/debugadapter": "^1.59.0", "@vscode/debugprotocol": "^1.68.0", - "@vscode/webview-ui-toolkit": "^1.0.1", "ajv": "^8.11.0", "chokidar": "^3.6.0", "d3": "^7.9.0", diff --git a/extensions/ql-vscode/test/jest-config.ts b/extensions/ql-vscode/test/jest-config.ts index 8b5c584d16f..3270067df7a 100644 --- a/extensions/ql-vscode/test/jest-config.ts +++ b/extensions/ql-vscode/test/jest-config.ts @@ -8,7 +8,6 @@ const transformScopes = [ "@lit-labs", ]; const transformPackages = [ - "@vscode/webview-ui-toolkit", "before-after-hook", "d3", "data-uri-to-buffer", From 4eaee21915e3328bbdd6c90cd09586a0ba002fdc Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Thu, 3 Apr 2025 10:59:05 +0000 Subject: [PATCH 17/43] Fix RepoRow tests --- .../__tests__/RepoRow.spec.tsx | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/__tests__/RepoRow.spec.tsx b/extensions/ql-vscode/src/view/variant-analysis/__tests__/RepoRow.spec.tsx index b1f4df59a71..1c89400615d 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/__tests__/RepoRow.spec.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/__tests__/RepoRow.spec.tsx @@ -1,9 +1,4 @@ -import { - act, - render as reactRender, - screen, - waitFor, -} from "@testing-library/react"; +import { act, render as reactRender, screen } from "@testing-library/react"; import { VariantAnalysisRepoStatus, VariantAnalysisScannedRepositoryDownloadStatus, @@ -403,7 +398,8 @@ describe(RepoRow.name, () => { status: VariantAnalysisRepoStatus.InProgress, }); - expect(screen.getByRole("checkbox")).toBeDisabled(); + const checkbox = await screen.findByRole("checkbox"); + expect(checkbox).toBeDisabled(); }); it("does not allow selecting the item if the item has not been downloaded", async () => { @@ -411,7 +407,8 @@ describe(RepoRow.name, () => { status: VariantAnalysisRepoStatus.Succeeded, }); - expect(screen.getByRole("checkbox")).toBeDisabled(); + const checkbox = await screen.findByRole("checkbox"); + expect(checkbox).toBeDisabled(); }); it("does not allow selecting the item if the item has not been downloaded successfully", async () => { @@ -423,11 +420,8 @@ describe(RepoRow.name, () => { }, }); - // It seems like sometimes the first render doesn't have the checkbox disabled - // Might be related to https://github.com/microsoft/vscode-webview-ui-toolkit/issues/404 - await waitFor(() => { - expect(screen.getByRole("checkbox")).toBeDisabled(); - }); + const checkbox = await screen.findByRole("checkbox"); + expect(checkbox).toBeDisabled(); }); it("allows selecting the item if the item has been downloaded", async () => { @@ -440,6 +434,7 @@ describe(RepoRow.name, () => { }, }); - expect(screen.getByRole("checkbox")).toBeEnabled(); + const checkbox = await screen.findByRole("checkbox"); + expect(checkbox).toBeEnabled(); }); }); From 560c379df0dd8658dfafd542311566733d65a0bf Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Thu, 3 Apr 2025 11:03:19 +0000 Subject: [PATCH 18/43] Fix VariantAnalysisActions tests --- .../variant-analysis/__tests__/VariantAnalysisActions.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx index 50502ee184e..ff0a99099a3 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisActions.spec.tsx @@ -50,7 +50,7 @@ describe(VariantAnalysisActions.name, () => { variantAnalysisStatus: VariantAnalysisStatus.Canceling, }); - const button = screen.getByText("Stopping query"); + const button = await screen.findByText("Stopping query"); expect(button).toBeInTheDocument(); expect(button).toBeDisabled(); }); From 3941de8d70889b331c36c05a905e608280099642 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 08:53:07 +0000 Subject: [PATCH 19/43] Mock out assignedElements from HTMLSlotElement --- extensions/ql-vscode/src/view/jest.setup.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/extensions/ql-vscode/src/view/jest.setup.ts b/extensions/ql-vscode/src/view/jest.setup.ts index d4e03100de6..31dc6657d40 100644 --- a/extensions/ql-vscode/src/view/jest.setup.ts +++ b/extensions/ql-vscode/src/view/jest.setup.ts @@ -28,6 +28,9 @@ window.ElementInternals.prototype.setFormValue = jest window.ElementInternals.prototype.setValidity = jest .fn() .mockReturnValue(undefined); +window.HTMLSlotElement.prototype.assignedElements = jest + .fn() + .mockReturnValue([]); // Store this on the window so we can mock it window.vsCodeApi = { From 986399a3eb5777ec8da5de82c7503cb632ba24d1 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 09:55:01 +0000 Subject: [PATCH 20/43] Replace Button secondary attribute --- extensions/ql-vscode/src/stories/common/Alert.stories.tsx | 2 +- .../ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx | 4 ++-- extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx | 4 ++-- .../ql-vscode/src/view/model-editor/ModelEvaluation.tsx | 4 ++-- .../src/view/variant-analysis/VariantAnalysisActions.tsx | 6 +++--- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/extensions/ql-vscode/src/stories/common/Alert.stories.tsx b/extensions/ql-vscode/src/stories/common/Alert.stories.tsx index 29bad2ba33f..2267ccb2696 100644 --- a/extensions/ql-vscode/src/stories/common/Alert.stories.tsx +++ b/extensions/ql-vscode/src/stories/common/Alert.stories.tsx @@ -84,7 +84,7 @@ 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 + View actions logs Retry ), diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx index b37e94282ec..da73126d2fc 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsActions.tsx @@ -25,12 +25,12 @@ export const ModelAlertsActions = ({ return ( {variantAnalysisStatus === VariantAnalysisStatus.InProgress && ( - )} {variantAnalysisStatus === VariantAnalysisStatus.Canceling && ( - )} diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx index 5594ad0a5ab..344a0d32d98 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEditor.tsx @@ -338,13 +338,13 @@ export function ModelEditor({ {selectedSignatures.size === 0 ? "Save all" : "Save selected"} Deselect all - + Refresh {viewState.showGenerateButton && diff --git a/extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx b/extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx index 492f8903f59..ba0266c083f 100644 --- a/extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx +++ b/extensions/ql-vscode/src/view/model-editor/ModelEvaluation.tsx @@ -55,14 +55,14 @@ export const ModelEvaluation = ({ {shouldShowEvaluateButton && ( Evaluate )} {shouldShowStopButton && ( - + Stop evaluation diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx index eb76113c10b..8a573761ef0 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx @@ -67,7 +67,7 @@ export const VariantAnalysisActions = ({ {showResultActions && ( <> )} {variantAnalysisStatus === VariantAnalysisStatus.Canceling && ( - )} From 56bc3b413fcfec9796200132cb29dea02fd02578 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 10:00:42 +0000 Subject: [PATCH 21/43] Tidy up props for VariantAnalysisOutcomePanels --- .../variant-analysis/VariantAnalysisOutcomePanels.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx index 33031924f49..03849913f85 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx @@ -177,7 +177,7 @@ export const VariantAnalysisOutcomePanels = ({ {scannedReposCount > 0 && ( Analyzed - + {formatDecimal(variantAnalysis.scannedRepos?.length ?? 0)} @@ -185,17 +185,13 @@ export const VariantAnalysisOutcomePanels = ({ {notFoundRepos?.repositoryCount && ( No access - - {formatDecimal(notFoundRepos.repositoryCount)} - + {formatDecimal(notFoundRepos.repositoryCount)} )} {noCodeqlDbRepos?.repositoryCount && ( No database - - {formatDecimal(noCodeqlDbRepos.repositoryCount)} - + {formatDecimal(noCodeqlDbRepos.repositoryCount)} )} {scannedReposCount > 0 && ( From e9f85b09fa3513e0985f7b0566ecd0352f0fe76b Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 12:10:08 +0000 Subject: [PATCH 22/43] Add ActionButton component --- .../view/common/ActionButton/ActionButton.css | 58 +++++++++++++++++++ .../view/common/ActionButton/ActionButton.tsx | 12 ++++ 2 files changed, 70 insertions(+) create mode 100644 extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css create mode 100644 extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css new file mode 100644 index 00000000000..f3155c72b9e --- /dev/null +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css @@ -0,0 +1,58 @@ +.vscode-action-button { + align-items: center; + background-color: transparent; + border-color: transparent; + border-style: solid; + border-width: 1px; + border-radius: 5px; + color: var(--vscode-foreground); + display: inline-flex; + cursor: pointer; + padding: 0; + user-select: none; +} + +.vscode-action-button:disabled { + color: var(--vscode-disabledForeground); + cursor: default; + pointer-events: none; +} + +.vscode-action-button .codicon, +.vscode-action-button svg { + color: var(--vscode-icon-foreground); + display: block; + padding: 2px; +} + +.vscode-action-button svg { + box-sizing: content-box; + height: 16px; + width: 16px; +} + +.vscode-action-button:disabled .codicon, +.vscode-action-button:disabled svg { + color: var(--vscode-disabledForeground); +} + +.vscode-action-button:hover { + background-color: var(--vscode-toolbar-hoverBackground); +} + +.vscode-action-button:active { + background-color: var(--vscode-toolbar-activeBackground); +} + +.vscode-action-button:focus { + outline: none; +} + +.vscode-action-button:focus-visible { + border-color: var(--vscode-focusBorder); +} + +.label { + display: block; + padding: 0 5px 0 2px; +} diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx new file mode 100644 index 00000000000..0f798ed81f5 --- /dev/null +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx @@ -0,0 +1,12 @@ +import "./ActionButton.css"; + +// This is needed because vscode-elements/elements does not implement +// the same styles for icon buttons as vscode/webview-ui-toolkit +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const ActionButton = (props: any) => { + return ( + + ); +}; From d59a84be177082b6d52fb68938c270bb30ba52b4 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 12:20:50 +0000 Subject: [PATCH 23/43] Add --vscode-contrastActiveBorder to the rest of the stories themes --- extensions/ql-vscode/src/stories/vscode-theme-dark.css | 1 + .../ql-vscode/src/stories/vscode-theme-github-dark-default.css | 1 + .../ql-vscode/src/stories/vscode-theme-github-light-default.css | 1 + extensions/ql-vscode/src/stories/vscode-theme-light.css | 1 + 4 files changed, 4 insertions(+) diff --git a/extensions/ql-vscode/src/stories/vscode-theme-dark.css b/extensions/ql-vscode/src/stories/vscode-theme-dark.css index 27765d50057..9b598272c02 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-dark.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-dark.css @@ -18,6 +18,7 @@ --vscode-descriptionForeground: rgba(204, 204, 204, 0.7); --vscode-icon-foreground: #c5c5c5; --vscode-focusBorder: #007fd4; + --vscode-contrastActiveBorder: #f38518; --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18); --vscode-textLink-foreground: #3794ff; --vscode-textLink-activeForeground: #3794ff; diff --git a/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css b/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css index 5be183020e3..2c1dcb7ad45 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css @@ -19,6 +19,7 @@ --vscode-descriptionForeground: #8b949e; --vscode-icon-foreground: #8b949e; --vscode-focusBorder: #1f6feb; + --vscode-contrastActiveBorder: #f38518; --vscode-textSeparator-foreground: #21262d; --vscode-textLink-foreground: #58a6ff; --vscode-textLink-activeForeground: #58a6ff; diff --git a/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css b/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css index 641e38f8475..7e5466744d3 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css @@ -19,6 +19,7 @@ --vscode-descriptionForeground: #57606a; --vscode-icon-foreground: #57606a; --vscode-focusBorder: #0969da; + --vscode-contrastActiveBorder: #f38518; --vscode-textSeparator-foreground: #d8dee4; --vscode-textLink-foreground: #0969da; --vscode-textLink-activeForeground: #0969da; diff --git a/extensions/ql-vscode/src/stories/vscode-theme-light.css b/extensions/ql-vscode/src/stories/vscode-theme-light.css index 3ff0361ab14..5afb28a3f89 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-light.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-light.css @@ -18,6 +18,7 @@ --vscode-descriptionForeground: #717171; --vscode-icon-foreground: #424242; --vscode-focusBorder: #0090f1; + --vscode-contrastActiveBorder: #0f4a85; --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18); --vscode-textLink-foreground: #006ab1; --vscode-textLink-activeForeground: #006ab1; From bebde7cec3a54eaf37e2cd576542a18caaacead5 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 12:21:06 +0000 Subject: [PATCH 24/43] Tweak ActionButton styles and add comments --- .../src/view/common/ActionButton/ActionButton.css | 4 ++++ .../src/view/common/ActionButton/ActionButton.tsx | 12 +++++------- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css index f3155c72b9e..967cde10188 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css @@ -1,3 +1,5 @@ +/* Styles have been copied from https://vscode-elements.github.io/elements-lite/components/action-button/configurator/ */ + .vscode-action-button { align-items: center; background-color: transparent; @@ -38,6 +40,8 @@ .vscode-action-button:hover { background-color: var(--vscode-toolbar-hoverBackground); + outline: 1px dotted var(--vscode-contrastActiveBorder); + outline-offset: -1px; } .vscode-action-button:active { diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx index 0f798ed81f5..bc93ea0f0b0 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx @@ -3,10 +3,8 @@ import "./ActionButton.css"; // This is needed because vscode-elements/elements does not implement // the same styles for icon buttons as vscode/webview-ui-toolkit // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const ActionButton = (props: any) => { - return ( - - ); -}; +export const ActionButton = (props: any) => ( + +); From 5bf2ca56211133c2968aae019f64964201825789 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 15:00:47 +0000 Subject: [PATCH 25/43] Fix styles for icon buttons --- .../MultipleModeledMethodsPanel.tsx | 21 ++++++++----------- .../src/view/model-editor/LibraryRow.tsx | 9 ++++---- .../src/view/model-editor/MethodRow.tsx | 7 +++---- 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx index 30b78c3fed1..3a12f0a2119 100644 --- a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx @@ -15,6 +15,7 @@ import { createEmptyModeledMethod } from "../../model-editor/modeled-method-empt import { sendTelemetry } from "../common/telemetry"; import type { ModelConfig } from "../../model-editor/languages"; import { VscodeButton } from "@vscode-elements/react-elements"; +import { ActionButton } from "../common/ActionButton/ActionButton"; export type MultipleModeledMethodsPanelProps = { language: QueryLanguage; @@ -168,21 +169,19 @@ export const MultipleModeledMethodsPanel = ({ )}
- - + {modeledMethods.length > 1 && (
{selectedIndex + 1}/{modeledMethods.length}
)} - - + - - - + - +
diff --git a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx index 1821560ea28..31053db69da 100644 --- a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx @@ -12,6 +12,7 @@ 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 { Tag } from "../common/Tag"; +import { ActionButton } from "../common/ActionButton/ActionButton"; const LibraryContainer = styled.div` background-color: var(--vscode-peekViewResult-background); @@ -170,16 +171,16 @@ export const LibraryRow = ({ {viewState.showGenerateButton && viewState.mode === Mode.Application && ( - +  Model from source - + )} {viewState.mode === Mode.Application && ( - +  Model dependency - + )} {isExpanded && ( diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx index 5ca610827a1..95cc735775c 100644 --- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx @@ -1,4 +1,3 @@ -import { VscodeButton } from "@vscode-elements/react-elements"; import { forwardRef, useCallback, @@ -10,6 +9,8 @@ import { import { styled } from "styled-components"; import { vscode } from "../vscode-api"; import { Link } from "../common/Link"; +import { ActionButton } from "../common/ActionButton/ActionButton"; +import "../common/ActionButton/ActionButton.css"; import type { Method } from "../../model-editor/method"; import type { ModeledMethod } from "../../model-editor/modeled-method"; @@ -61,7 +62,7 @@ const ViewLink = styled(Link)` white-space: nowrap; `; -const CodiconRow = styled(VscodeButton)` +const CodiconRow = styled(ActionButton)` min-height: calc(var(--input-height) * 1px); align-items: center; `; @@ -319,7 +320,6 @@ const ModelableMethodRow = forwardRef( > {index === 0 ? ( { event.stopPropagation(); @@ -331,7 +331,6 @@ const ModelableMethodRow = forwardRef( ) : ( { event.stopPropagation(); From b801c782e1162f8c46e5b54b1c7be6fae63300b5 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 7 Apr 2025 15:48:50 +0000 Subject: [PATCH 26/43] Fix lint --- .../src/view/method-modeling/MultipleModeledMethodsPanel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx index 3a12f0a2119..ed55c497d71 100644 --- a/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx +++ b/extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx @@ -14,7 +14,6 @@ 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"; import { ActionButton } from "../common/ActionButton/ActionButton"; export type MultipleModeledMethodsPanelProps = { From 4eeea1098b67204fabf272cdf42fb9e2d7dda859 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 9 Apr 2025 08:46:28 +0000 Subject: [PATCH 27/43] Use correct css variables for Link --- extensions/ql-vscode/src/view/common/Link.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/Link.tsx b/extensions/ql-vscode/src/view/common/Link.tsx index 9fa73906433..a0e37b92bcd 100644 --- a/extensions/ql-vscode/src/view/common/Link.tsx +++ b/extensions/ql-vscode/src/view/common/Link.tsx @@ -3,12 +3,12 @@ import { styled } from "styled-components"; export const Link = styled.a` background: transparent; box-sizing: border-box; - color: var(--link-foreground); + color: var(--vscode-textLink-foreground); cursor: pointer; fill: currentcolor; - font-family: var(--font-family); - font-size: var(--type-ramp-base-font-size); - line-height: var(--type-ramp-base-line-height); + font-family: var(--vscode-font-family); + font-size: var(--vscode-font-size); + line-height: normal; outline: none; &:hover { From 6e225d37f3c485a97ad68ba8dd80cb667e586139 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 9 Apr 2025 09:38:50 +0000 Subject: [PATCH 28/43] Bring back icon for SearchBox --- extensions/ql-vscode/src/view/common/SearchBox.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/common/SearchBox.tsx b/extensions/ql-vscode/src/view/common/SearchBox.tsx index a158f40c4b1..7837c143e76 100644 --- a/extensions/ql-vscode/src/view/common/SearchBox.tsx +++ b/extensions/ql-vscode/src/view/common/SearchBox.tsx @@ -7,6 +7,10 @@ const TextField = styled(VscodeTextfield)` width: 100%; `; +const SearchIcon = styled(Codicon)` + margin: 0 8px; +`; + type Props = { value: string; placeholder: string; @@ -37,7 +41,7 @@ export const SearchBox = ({ onInput={handleInput} className={className} > - + ); }; From 8cd4b2012f5dc02e648d97f9b507bb0e2e73d0fc Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 9 Apr 2025 10:25:10 +0000 Subject: [PATCH 29/43] Change Dropdown prop from onInput to onChange --- extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx | 2 +- .../ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx | 2 +- .../src/view/variant-analysis/RepositoriesResultFormat.tsx | 2 +- .../ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx index dbc80ea2ea7..e5d4e9f2eb6 100644 --- a/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx +++ b/extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx @@ -29,7 +29,7 @@ export const ModelAlertsSort = ({ value, onChange, className }: Props) => { ); return ( - + Alphabetically diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx index 784d045d861..206b33586fb 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx @@ -29,7 +29,7 @@ export const RepositoriesFilter = ({ value, onChange, className }: Props) => { ); return ( - + All With results diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx index d2e19e1d090..380599017eb 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx @@ -33,7 +33,7 @@ export const RepositoriesResultFormat = ({ ); return ( - + {ResultFormat.Alerts} diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx index 874bca0de2c..96ec4c43dd4 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx @@ -29,7 +29,7 @@ export const RepositoriesSort = ({ value, onChange, className }: Props) => { ); return ( - + Alphabetically From cb9a79c7a0cb3452f1aefea8b4d8f2af0d09fbfd Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 9 Apr 2025 14:56:28 +0000 Subject: [PATCH 30/43] Add negative right margin to Checkbox --- extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx index da0f00f4b41..19edad08cc2 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx @@ -62,6 +62,10 @@ const MetadataContainer = styled.div` margin-left: auto; `; +const Checkbox = styled(VscodeCheckbox)` + margin-right: -9px; // VscodeCheckbox has 9px margin on the right by default +`; + type VisibilityProps = { isPrivate?: boolean; }; @@ -255,7 +259,7 @@ export const RepoRow = ({ disabled={disabled} aria-expanded={isExpanded} > - Date: Wed, 9 Apr 2025 15:06:28 +0000 Subject: [PATCH 31/43] Fix divider styling --- extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx index 31053db69da..f2f1065b4d9 100644 --- a/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/LibraryRow.tsx @@ -36,8 +36,8 @@ const TitleContainer = styled.button` `; const SectionDivider = styled(VscodeDivider)` - padding-top: 0.3rem; - padding-bottom: 0.3rem; + margin-top: 0.3rem; + margin-bottom: 0.8rem; `; const NameContainer = styled.div` From 6f39d9b8fe6d2e1c848df52f6c570a9c9a1224a1 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 9 Apr 2025 15:09:13 +0000 Subject: [PATCH 32/43] Remove eslint-disables --- .../ql-vscode/src/view/common/ActionButton/ActionButton.css | 1 - .../ql-vscode/src/view/common/ActionButton/ActionButton.tsx | 3 +-- extensions/ql-vscode/src/view/common/Badge.tsx | 3 +-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css index 967cde10188..fb4164fd038 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css @@ -1,5 +1,4 @@ /* Styles have been copied from https://vscode-elements.github.io/elements-lite/components/action-button/configurator/ */ - .vscode-action-button { align-items: center; background-color: transparent; diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx index bc93ea0f0b0..04ee778b0ba 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx @@ -2,8 +2,7 @@ import "./ActionButton.css"; // This is needed because vscode-elements/elements does not implement // the same styles for icon buttons as vscode/webview-ui-toolkit -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const ActionButton = (props: any) => ( +export const ActionButton = (props: React.ComponentProps<"button">) => ( diff --git a/extensions/ql-vscode/src/view/common/Badge.tsx b/extensions/ql-vscode/src/view/common/Badge.tsx index 70568f1b2a6..cb9826bcab8 100644 --- a/extensions/ql-vscode/src/view/common/Badge.tsx +++ b/extensions/ql-vscode/src/view/common/Badge.tsx @@ -1,8 +1,7 @@ import { VscodeBadge } from "@vscode-elements/react-elements"; // This applies the counter variant by default so the border-radius attribute is set -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const Badge = (props: any) => ( +export const Badge = (props: React.ComponentProps) => ( {props.children} From 8014162bc92bd5de47bf0bbef8ac1652e98cbb92 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Fri, 11 Apr 2025 14:42:45 +0000 Subject: [PATCH 33/43] Use css modules instead of global classes --- ...tionButton.css => ActionButton.module.css} | 22 +++++++++---------- .../view/common/ActionButton/ActionButton.tsx | 4 ++-- .../src/view/model-editor/MethodRow.tsx | 1 - 3 files changed, 13 insertions(+), 14 deletions(-) rename extensions/ql-vscode/src/view/common/ActionButton/{ActionButton.css => ActionButton.module.css} (73%) diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css similarity index 73% rename from extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css rename to extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css index fb4164fd038..b7fb646a79b 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.css +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css @@ -1,5 +1,5 @@ /* Styles have been copied from https://vscode-elements.github.io/elements-lite/components/action-button/configurator/ */ -.vscode-action-button { +.actionButton { align-items: center; background-color: transparent; border-color: transparent; @@ -13,45 +13,45 @@ user-select: none; } -.vscode-action-button:disabled { +.actionButton:disabled { color: var(--vscode-disabledForeground); cursor: default; pointer-events: none; } -.vscode-action-button .codicon, -.vscode-action-button svg { +.actionButton .codicon, +.actionButton svg { color: var(--vscode-icon-foreground); display: block; padding: 2px; } -.vscode-action-button svg { +.actionButton svg { box-sizing: content-box; height: 16px; width: 16px; } -.vscode-action-button:disabled .codicon, -.vscode-action-button:disabled svg { +.actionButton:disabled .codicon, +.actionButton:disabled svg { color: var(--vscode-disabledForeground); } -.vscode-action-button:hover { +.actionButton:hover { background-color: var(--vscode-toolbar-hoverBackground); outline: 1px dotted var(--vscode-contrastActiveBorder); outline-offset: -1px; } -.vscode-action-button:active { +.actionButton:active { background-color: var(--vscode-toolbar-activeBackground); } -.vscode-action-button:focus { +.actionButton:focus { outline: none; } -.vscode-action-button:focus-visible { +.actionButton:focus-visible { border-color: var(--vscode-focusBorder); } diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx index 04ee778b0ba..f673fd56f96 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.tsx @@ -1,9 +1,9 @@ -import "./ActionButton.css"; +import styles from "./ActionButton.module.css"; // This is needed because vscode-elements/elements does not implement // the same styles for icon buttons as vscode/webview-ui-toolkit export const ActionButton = (props: React.ComponentProps<"button">) => ( - ); diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx index 95cc735775c..ed9eb8e76ac 100644 --- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx @@ -10,7 +10,6 @@ import { styled } from "styled-components"; import { vscode } from "../vscode-api"; import { Link } from "../common/Link"; import { ActionButton } from "../common/ActionButton/ActionButton"; -import "../common/ActionButton/ActionButton.css"; import type { Method } from "../../model-editor/method"; import type { ModeledMethod } from "../../model-editor/modeled-method"; From c639f7d8344e56e53da60f8a42f6151de47ba66d Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Fri, 11 Apr 2025 15:03:42 +0000 Subject: [PATCH 34/43] Remove manually added css variable --- extensions/ql-vscode/src/stories/vscode-theme-dark.css | 1 - .../ql-vscode/src/stories/vscode-theme-github-dark-default.css | 1 - .../ql-vscode/src/stories/vscode-theme-github-light-default.css | 1 - extensions/ql-vscode/src/stories/vscode-theme-light.css | 1 - 4 files changed, 4 deletions(-) diff --git a/extensions/ql-vscode/src/stories/vscode-theme-dark.css b/extensions/ql-vscode/src/stories/vscode-theme-dark.css index 9b598272c02..27765d50057 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-dark.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-dark.css @@ -18,7 +18,6 @@ --vscode-descriptionForeground: rgba(204, 204, 204, 0.7); --vscode-icon-foreground: #c5c5c5; --vscode-focusBorder: #007fd4; - --vscode-contrastActiveBorder: #f38518; --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18); --vscode-textLink-foreground: #3794ff; --vscode-textLink-activeForeground: #3794ff; diff --git a/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css b/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css index 2c1dcb7ad45..5be183020e3 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-github-dark-default.css @@ -19,7 +19,6 @@ --vscode-descriptionForeground: #8b949e; --vscode-icon-foreground: #8b949e; --vscode-focusBorder: #1f6feb; - --vscode-contrastActiveBorder: #f38518; --vscode-textSeparator-foreground: #21262d; --vscode-textLink-foreground: #58a6ff; --vscode-textLink-activeForeground: #58a6ff; diff --git a/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css b/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css index 7e5466744d3..641e38f8475 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-github-light-default.css @@ -19,7 +19,6 @@ --vscode-descriptionForeground: #57606a; --vscode-icon-foreground: #57606a; --vscode-focusBorder: #0969da; - --vscode-contrastActiveBorder: #f38518; --vscode-textSeparator-foreground: #d8dee4; --vscode-textLink-foreground: #0969da; --vscode-textLink-activeForeground: #0969da; diff --git a/extensions/ql-vscode/src/stories/vscode-theme-light.css b/extensions/ql-vscode/src/stories/vscode-theme-light.css index 5afb28a3f89..3ff0361ab14 100644 --- a/extensions/ql-vscode/src/stories/vscode-theme-light.css +++ b/extensions/ql-vscode/src/stories/vscode-theme-light.css @@ -18,7 +18,6 @@ --vscode-descriptionForeground: #717171; --vscode-icon-foreground: #424242; --vscode-focusBorder: #0090f1; - --vscode-contrastActiveBorder: #0f4a85; --vscode-textSeparator-foreground: rgba(0, 0, 0, 0.18); --vscode-textLink-foreground: #006ab1; --vscode-textLink-activeForeground: #006ab1; From 5a799b2cda6357d91a25ce7c99dae0043d2cadfb Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 14 Apr 2025 08:56:13 +0000 Subject: [PATCH 35/43] Add default value for action button hover outline --- .../src/view/common/ActionButton/ActionButton.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css index b7fb646a79b..dfd812e2f8e 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css @@ -39,7 +39,7 @@ .actionButton:hover { background-color: var(--vscode-toolbar-hoverBackground); - outline: 1px dotted var(--vscode-contrastActiveBorder); + outline: 1px dotted var(--vscode-contrastActiveBorder, #f38518); outline-offset: -1px; } From 329ac0d882e9e72b71cc12bae3eb72f93f721a9b Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 14 Apr 2025 09:49:56 +0000 Subject: [PATCH 36/43] Default action button outline to transparent --- .../src/view/common/ActionButton/ActionButton.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css index dfd812e2f8e..4967da0238a 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css @@ -39,7 +39,7 @@ .actionButton:hover { background-color: var(--vscode-toolbar-hoverBackground); - outline: 1px dotted var(--vscode-contrastActiveBorder, #f38518); + outline: 1px dotted var(--vscode-contrastActiveBorder, transparent); outline-offset: -1px; } From 718cdc95e3b566f7d9b38a12abb113e092b042b2 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Mon, 14 Apr 2025 10:20:13 +0000 Subject: [PATCH 37/43] Fix check-types job --- extensions/ql-vscode/src/stories/types.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 extensions/ql-vscode/src/stories/types.d.ts diff --git a/extensions/ql-vscode/src/stories/types.d.ts b/extensions/ql-vscode/src/stories/types.d.ts new file mode 100644 index 00000000000..1eabbb4297e --- /dev/null +++ b/extensions/ql-vscode/src/stories/types.d.ts @@ -0,0 +1 @@ +declare module "*.module.css"; From 1d2a22aa67f0b128b4e9b1e90724daa3bef2e136 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Tue, 15 Apr 2025 09:11:44 +0000 Subject: [PATCH 38/43] Fix Badge for method modelling --- extensions/ql-vscode/src/view/model-editor/MethodRow.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx index ed9eb8e76ac..6e753c3532d 100644 --- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx +++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx @@ -55,6 +55,7 @@ const ModelButtonsContainer = styled.div` const UsagesButton = styled(Badge)` cursor: pointer; + display: table; `; const ViewLink = styled(Link)` From 881ef75da8823183193b15108abecdb747d7b0b5 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 16 Apr 2025 10:05:50 +0000 Subject: [PATCH 39/43] Don't render 0 if a result is falsy --- .../VariantAnalysisOutcomePanels.tsx | 68 ++++++++++--------- 1 file changed, 36 insertions(+), 32 deletions(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx index 03849913f85..39f9eaab1ac 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx @@ -182,18 +182,20 @@ export const VariantAnalysisOutcomePanels = ({ )} - {notFoundRepos?.repositoryCount && ( - - No access - {formatDecimal(notFoundRepos.repositoryCount)} - - )} - {noCodeqlDbRepos?.repositoryCount && ( - - No database - {formatDecimal(noCodeqlDbRepos.repositoryCount)} - - )} + {notFoundRepos?.repositoryCount !== undefined && + notFoundRepos?.repositoryCount > 0 && ( + + No access + {formatDecimal(notFoundRepos.repositoryCount)} + + )} + {noCodeqlDbRepos?.repositoryCount !== undefined && + noCodeqlDbRepos?.repositoryCount > 0 && ( + + No database + {formatDecimal(noCodeqlDbRepos.repositoryCount)} + + )} {scannedReposCount > 0 && ( )} - {notFoundRepos?.repositoryCount && ( - - - - )} - {noCodeqlDbRepos?.repositoryCount && ( - - - - )} + {notFoundRepos?.repositoryCount !== undefined && + notFoundRepos?.repositoryCount > 0 && ( + + + + )} + {noCodeqlDbRepos?.repositoryCount !== undefined && + noCodeqlDbRepos?.repositoryCount > 0 && ( + + + + )} ); From fca2ee7b45c137bd20b87eae6ca6cac2ae7da174 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 16 Apr 2025 10:50:58 +0000 Subject: [PATCH 40/43] Add changelog --- extensions/ql-vscode/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/extensions/ql-vscode/CHANGELOG.md b/extensions/ql-vscode/CHANGELOG.md index 03054c92082..34e224a8121 100644 --- a/extensions/ql-vscode/CHANGELOG.md +++ b/extensions/ql-vscode/CHANGELOG.md @@ -2,6 +2,8 @@ ## [UNRELEASED] +- Remove the use of `@vscode/webview-ui-toolkit`. [#3986] (https://github.com/github/vscode-codeql/pull/3986) + ## 1.17.2 - 27 March 2025 - Always authenticate when downloading databases from GitHub, instead of only when in canary mode. [#3941](https://github.com/github/vscode-codeql/pull/3941) From edf0f4686ef5ca3e6a09a4613365dcf5f0199c1f Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 16 Apr 2025 13:52:59 +0000 Subject: [PATCH 41/43] Revert change to CHANGELOG --- extensions/ql-vscode/CHANGELOG.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/extensions/ql-vscode/CHANGELOG.md b/extensions/ql-vscode/CHANGELOG.md index 34e224a8121..03054c92082 100644 --- a/extensions/ql-vscode/CHANGELOG.md +++ b/extensions/ql-vscode/CHANGELOG.md @@ -2,8 +2,6 @@ ## [UNRELEASED] -- Remove the use of `@vscode/webview-ui-toolkit`. [#3986] (https://github.com/github/vscode-codeql/pull/3986) - ## 1.17.2 - 27 March 2025 - Always authenticate when downloading databases from GitHub, instead of only when in canary mode. [#3941](https://github.com/github/vscode-codeql/pull/3941) From c263e3001cae3552ffe8b97dd0d2941621ada7a4 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 16 Apr 2025 13:53:51 +0000 Subject: [PATCH 42/43] Tidy up ActionButton css module --- .../src/view/common/ActionButton/ActionButton.module.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css index 4967da0238a..70a8e8a1577 100644 --- a/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css +++ b/extensions/ql-vscode/src/view/common/ActionButton/ActionButton.module.css @@ -19,7 +19,7 @@ pointer-events: none; } -.actionButton .codicon, +.actionButton :global(.codicon), .actionButton svg { color: var(--vscode-icon-foreground); display: block; @@ -32,7 +32,7 @@ width: 16px; } -.actionButton:disabled .codicon, +.actionButton:disabled :global(.codicon), .actionButton:disabled svg { color: var(--vscode-disabledForeground); } @@ -54,8 +54,3 @@ .actionButton:focus-visible { border-color: var(--vscode-focusBorder); } - -.label { - display: block; - padding: 0 5px 0 2px; -} From 4c49158a9826dca041be31eea1f3e9f6d4e22b99 Mon Sep 17 00:00:00 2001 From: Tuan Nguen Date: Wed, 16 Apr 2025 13:55:23 +0000 Subject: [PATCH 43/43] Make comment clearer --- .../src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx index 39f9eaab1ac..1f138ffd8cd 100644 --- a/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx +++ b/extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisOutcomePanels.tsx @@ -46,7 +46,7 @@ const TabHeader = styled(VscodeTabHeader)` text-transform: uppercase; > * { - // This copies the styles from VSCodePanelTab + // This copies the styles from @vscode/webview-ui-toolkit's VSCodePanelTab &:last-child { margin-left: 8px; }