Skip to content

Commit 323c536

Browse files
koesie10koesie10
committed
Switch from CodiconButton to VSCodeButton
1 parent 6be98f3 commit 323c536

File tree

5 files changed

+104
-72
lines changed

5 files changed

+104
-72
lines changed

‎extensions/ql-vscode/src/view/common/icon/Codicon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classNames from "classnames";
44

55
type Props = {
66
name: string;
7-
label: string;
7+
label?: string;
88
className?: string;
99
slot?: string;
1010
};

‎extensions/ql-vscode/src/view/common/icon/CodiconButton.tsx‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎extensions/ql-vscode/src/view/common/icon/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export * from "./Codicon";
2-
export * from "./CodiconButton";
32
export * from "./ErrorIcon";
43
export * from "./LoadingIcon";
54
export * from "./SuccessIcon";

‎extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { Method } from "../../model-editor/method";
44
import { ModeledMethod } from "../../model-editor/modeled-method";
55
import { styled } from "styled-components";
66
import { MethodModelingInputs } from "./MethodModelingInputs";
7-
import { CodiconButton } from "../common";
7+
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
8+
import { Codicon } from "../common";
89

910
export type MultipleModeledMethodsPanelProps = {
1011
method: Method;
@@ -63,26 +64,30 @@ export const MultipleModeledMethodsPanel = ({
6364
)}
6465
<Footer>
6566
<PaginationActions>
66-
<CodiconButton
67-
name="chevron-left"
68-
label="Previous modeling"
67+
<VSCodeButton
68+
appearance="icon"
69+
aria-label="Previous modeling"
6970
onClick={handlePreviousClick}
7071
disabled={modeledMethods.length < 2 || selectedIndex === 0}
71-
/>
72+
>
73+
<Codicon name="chevron-left" />
74+
</VSCodeButton>
7275
{modeledMethods.length > 1 && (
7376
<div>
7477
{selectedIndex + 1}/{modeledMethods.length}
7578
</div>
7679
)}
77-
<CodiconButton
78-
name="chevron-right"
79-
label="Next modeling"
80+
<VSCodeButton
81+
appearance="icon"
82+
aria-label="Next modeling"
8083
onClick={handleNextClick}
8184
disabled={
8285
modeledMethods.length < 2 ||
8386
selectedIndex === modeledMethods.length - 1
8487
}
85-
/>
88+
>
89+
<Codicon name="chevron-right" />
90+
</VSCodeButton>
8691
</PaginationActions>
8792
</Footer>
8893
</Container>

‎extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx‎

Lines changed: 89 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { render as reactRender, screen } from "@testing-library/react";
2+
import { render as reactRender, screen, waitFor } from "@testing-library/react";
33
import { createMethod } from "../../../../test/factories/model-editor/method-factories";
44
import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
55
import {
@@ -41,8 +41,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
4141
onChange,
4242
});
4343

44-
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
45-
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
44+
expect(
45+
screen
46+
.getByLabelText("Previous modeling")
47+
.getElementsByTagName("input")[0],
48+
).toBeDisabled();
49+
expect(
50+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
51+
).toBeDisabled();
4652
expect(screen.queryByText("0/0")).not.toBeInTheDocument();
4753
expect(screen.queryByText("1/0")).not.toBeInTheDocument();
4854
});
@@ -81,8 +87,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
8187
onChange,
8288
});
8389

84-
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
85-
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
90+
expect(
91+
screen
92+
.getByLabelText("Previous modeling")
93+
.getElementsByTagName("input")[0],
94+
).toBeDisabled();
95+
expect(
96+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
97+
).toBeDisabled();
8698
expect(screen.queryByText("1/1")).not.toBeInTheDocument();
8799
});
88100
});
@@ -139,8 +151,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
139151
onChange,
140152
});
141153

142-
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
143-
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
154+
expect(
155+
screen
156+
.getByLabelText("Previous modeling")
157+
.getElementsByTagName("input")[0],
158+
).toBeDisabled();
159+
expect(
160+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
161+
).toBeEnabled();
144162
});
145163

146164
it("can use the pagination", async () => {
@@ -152,8 +170,22 @@ describe(MultipleModeledMethodsPanel.name, () => {
152170

153171
await userEvent.click(screen.getByLabelText("Next modeling"));
154172

155-
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
156-
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
173+
await waitFor(() => {
174+
expect(
175+
screen
176+
.getByLabelText("Previous modeling")
177+
.getElementsByTagName("input")[0],
178+
).toBeEnabled();
179+
});
180+
181+
expect(
182+
screen
183+
.getByLabelText("Previous modeling")
184+
.getElementsByTagName("input")[0],
185+
).toBeEnabled();
186+
expect(
187+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
188+
).toBeDisabled();
157189
expect(screen.getByText("2/2")).toBeInTheDocument();
158190

159191
expect(
@@ -196,14 +228,34 @@ describe(MultipleModeledMethodsPanel.name, () => {
196228
onChange,
197229
});
198230

199-
expect(screen.getByLabelText("Previous modeling")).toBeDisabled();
200-
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
231+
expect(
232+
screen
233+
.getByLabelText("Previous modeling")
234+
.getElementsByTagName("input")[0],
235+
).toBeDisabled();
236+
expect(
237+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
238+
).toBeEnabled();
201239
expect(screen.getByText("1/3")).toBeInTheDocument();
202240

203241
await userEvent.click(screen.getByLabelText("Next modeling"));
204242

205-
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
206-
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
243+
await waitFor(() => {
244+
expect(
245+
screen
246+
.getByLabelText("Previous modeling")
247+
.getElementsByTagName("input")[0],
248+
).toBeEnabled();
249+
});
250+
251+
expect(
252+
screen
253+
.getByLabelText("Previous modeling")
254+
.getElementsByTagName("input")[0],
255+
).toBeEnabled();
256+
expect(
257+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
258+
).toBeEnabled();
207259
expect(screen.getByText("2/3")).toBeInTheDocument();
208260

209261
expect(
@@ -214,8 +266,14 @@ describe(MultipleModeledMethodsPanel.name, () => {
214266

215267
await userEvent.click(screen.getByLabelText("Next modeling"));
216268

217-
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
218-
expect(screen.getByLabelText("Next modeling")).toBeDisabled();
269+
expect(
270+
screen
271+
.getByLabelText("Previous modeling")
272+
.getElementsByTagName("input")[0],
273+
).toBeEnabled();
274+
expect(
275+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
276+
).toBeDisabled();
219277
expect(screen.getByText("3/3")).toBeInTheDocument();
220278

221279
expect(
@@ -226,8 +284,22 @@ describe(MultipleModeledMethodsPanel.name, () => {
226284

227285
await userEvent.click(screen.getByLabelText("Previous modeling"));
228286

229-
expect(screen.getByLabelText("Previous modeling")).toBeEnabled();
230-
expect(screen.getByLabelText("Next modeling")).toBeEnabled();
287+
await waitFor(() => {
288+
expect(
289+
screen
290+
.getByLabelText("Next modeling")
291+
.getElementsByTagName("input")[0],
292+
).toBeEnabled();
293+
});
294+
295+
expect(
296+
screen
297+
.getByLabelText("Previous modeling")
298+
.getElementsByTagName("input")[0],
299+
).toBeEnabled();
300+
expect(
301+
screen.getByLabelText("Next modeling").getElementsByTagName("input")[0],
302+
).toBeEnabled();
231303
expect(screen.getByText("2/3")).toBeInTheDocument();
232304

233305
expect(

0 commit comments

Comments
 (0)