mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Switch from CodiconButton to VSCodeButton

Browse Source
This commit is contained in:
Koen Vlaswinkel
2023-10-09 13:52:51 +02:00
parent 6be98f3f8d
commit 323c5368ba
5 changed files with 104 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/ql-vscode/src/view/common/icon/Codicon.tsx
View File

@@ -4,7 +4,7 @@ import classNames from "classnames";
type Props = {
name: string;
label: string;
label?: string;
className?: string;
slot?: string;
};

44
extensions/ql-vscode/src/view/common/icon/CodiconButton.tsx
View File

@@ -1,44 +0,0 @@
import * as React from "react";
import { styled } from "styled-components";
import classNames from "classnames";
const StyledButton = styled.button`
background: none;
color: var(--vscode-textLink-foreground);
border: none;
cursor: pointer;
padding: 0;
vertical-align: text-bottom;
&:disabled {
color: var(--vscode-disabledForeground);
cursor: default;
}
`;
export const CodiconButton = ({
onClick,
className,
name,
label,
disabled,
}: {
onClick: (e: React.MouseEvent) => void;
className?: string;
name: string;
label: string;
disabled?: boolean;
}) => (
<StyledButton
onClick={onClick}
className={className}
disabled={disabled}
aria-label={label}
title={label}
>
<span
role="img"
className={classNames("codicon", `codicon-${name}`, className)}
/>
</StyledButton>
);

1
extensions/ql-vscode/src/view/common/icon/index.ts
View File

@@ -1,5 +1,4 @@
export * from "./Codicon";
export * from "./CodiconButton";
export * from "./ErrorIcon";
export * from "./LoadingIcon";
export * from "./SuccessIcon";

23
extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx
View File

@@ -4,7 +4,8 @@ import { Method } from "../../model-editor/method";
import { ModeledMethod } from "../../model-editor/modeled-method";
import { styled } from "styled-components";
import { MethodModelingInputs } from "./MethodModelingInputs";
import { CodiconButton } from "../common";
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
import { Codicon } from "../common";
export type MultipleModeledMethodsPanelProps = {
method: Method;
@@ -63,26 +64,30 @@ export const MultipleModeledMethodsPanel = ({
)}
<Footer>
<PaginationActions>
<CodiconButton
name="chevron-left"
label="Previous modeling"
<VSCodeButton
appearance="icon"
aria-label="Previous modeling"
onClick={handlePreviousClick}
disabled={modeledMethods.length < 2 || selectedIndex === 0}
/>
>
<Codicon name="chevron-left" />
</VSCodeButton>
{modeledMethods.length > 1 && (
<div>
{selectedIndex + 1}/{modeledMethods.length}
</div>
)}
<CodiconButton
name="chevron-right"
label="Next modeling"
<VSCodeButton
appearance="icon"
aria-label="Next modeling"
onClick={handleNextClick}
disabled={
modeledMethods.length < 2 ||
selectedIndex === modeledMethods.length - 1
}
/>
>
<Codicon name="chevron-right" />
</VSCodeButton>
</PaginationActions>
</Footer>
</Container>

106
extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { render as reactRender, screen } from "@testing-library/react";
import { render as reactRender, screen, waitFor } from "@testing-library/react";
import { createMethod } from "../../../../test/factories/model-editor/method-factories";
import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
import {
@@ -41,8 +41,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
onChange,
});
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeDisabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeDisabled();
expect(screen.queryByText("0/0")).not.toBeInTheDocument();
expect(screen.queryByText("1/0")).not.toBeInTheDocument();
});
@@ -81,8 +87,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
onChange,
});
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeDisabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeDisabled();
expect(screen.queryByText("1/1")).not.toBeInTheDocument();
});
});
@@ -139,8 +151,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
onChange,
});
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeDisabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeEnabled();
});
it("can use the pagination", async () => {
@@ -152,8 +170,22 @@ describe(MultipleModeledMethodsPanel.name, () => {
await userEvent.click(screen.getByLabelText("Next modeling"));
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
await waitFor(() => {
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
});
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeDisabled();
expect(screen.getByText("2/2")).toBeInTheDocument();
expect(
@@ -196,14 +228,34 @@ describe(MultipleModeledMethodsPanel.name, () => {
onChange,
});
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeDisabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeEnabled();
expect(screen.getByText("1/3")).toBeInTheDocument();
await userEvent.click(screen.getByLabelText("Next modeling"));
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
await waitFor(() => {
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
});
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeEnabled();
expect(screen.getByText("2/3")).toBeInTheDocument();
expect(
@@ -214,8 +266,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
await userEvent.click(screen.getByLabelText("Next modeling"));
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeDisabled();
expect(screen.getByText("3/3")).toBeInTheDocument();
expect(
@@ -226,8 +284,22 @@ describe(MultipleModeledMethodsPanel.name, () => {
await userEvent.click(screen.getByLabelText("Previous modeling"));
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
await waitFor(() => {
expect(
screen
.getByLabelText("Next modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
});
expect(
screen
.getByLabelText("Previous modeling")
.getElementsByTagName("input")[0],
).toBeEnabled();
expect(
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
).toBeEnabled();
expect(screen.getByText("2/3")).toBeInTheDocument();
expect(