Skip to content

Commit 1b0077a

Browse files
koesie10koesie10
committed
Implement PR feedback
1 parent 58e80ec commit 1b0077a

7 files changed

Lines changed: 104 additions & 76 deletions

File tree

‎extensions/ql-vscode/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1188,8 +1188,8 @@
11881188
"watch:extension": "tsc --watch",
11891189
"watch:webpack": "gulp watchView",
11901190
"test": "npm-run-all -p test:*",
1191-
"test:mocha": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
1192-
"test:jest": "jest",
1191+
"test:unit": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
1192+
"test:view": "jest",
11931193
"preintegration": "rm -rf ./out/vscode-tests && gulp",
11941194
"integration": "node ./out/vscode-tests/run-integration-tests.js no-workspace,minimal-workspace",
11951195
"cli-integration": "npm run preintegration && node ./out/vscode-tests/run-integration-tests.js cli-integration",

‎extensions/ql-vscode/src/stories/variant-analysis/VariantAnalysisHeader.stories.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ export default {
1717
)
1818
],
1919
argTypes: {
20-
onOpenQueryClick: {
21-
action: 'open-query-clicked',
20+
onOpenQueryFileClick: {
21+
action: 'open-query-file-clicked',
2222
table: {
2323
disable: true,
2424
},
2525
},
26-
onViewQueryClick: {
27-
action: 'view-query-clicked',
26+
onViewQueryTextClick: {
27+
action: 'view-query-text-clicked',
2828
table: {
2929
disable: true,
3030
},
@@ -58,17 +58,17 @@ export const InProgress = Template.bind({});
5858
InProgress.args = {
5959
queryName: 'Query name',
6060
queryFileName: 'example.ql',
61-
status: VariantAnalysisStatus.InProgress,
61+
variantAnalysisStatus: VariantAnalysisStatus.InProgress,
6262
};
6363

6464
export const Succeeded = Template.bind({});
6565
Succeeded.args = {
6666
...InProgress.args,
67-
status: VariantAnalysisStatus.Succeeded,
67+
variantAnalysisStatus: VariantAnalysisStatus.Succeeded,
6868
};
6969

7070
export const Failed = Template.bind({});
7171
Failed.args = {
7272
...InProgress.args,
73-
status: VariantAnalysisStatus.Failed,
73+
variantAnalysisStatus: VariantAnalysisStatus.Failed,
7474
};

‎extensions/ql-vscode/src/view/variant-analysis/LinkIconButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { VSCodeLink } from '@vscode/webview-ui-toolkit/react';
22
import styled from 'styled-components';
33

44
export const LinkIconButton = styled(VSCodeLink)`
5-
svg {
6-
margin-right: 0.3em;
5+
.codicon {
6+
vertical-align: text-bottom;
77
}
88
`;

‎extensions/ql-vscode/src/view/variant-analysis/VariantAnalysis.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ export function VariantAnalysis(): JSX.Element {
99
<VariantAnalysisHeader
1010
queryName="Example query"
1111
queryFileName="example.ql"
12-
status={VariantAnalysisStatus.InProgress}
13-
onOpenQueryClick={() => void 0}
14-
onViewQueryClick={() => void 0}
15-
onStopQueryClick={() => void 0}
16-
onCopyRepositoryListClick={() => void 0}
17-
onExportResultsClick={() => void 0}
12+
variantAnalysisStatus={VariantAnalysisStatus.InProgress}
13+
onOpenQueryFileClick={() => console.log('Open query')}
14+
onViewQueryTextClick={() => console.log('View query')}
15+
onStopQueryClick={() => console.log('Stop query')}
16+
onCopyRepositoryListClick={() => console.log('Copy repository list')}
17+
onExportResultsClick={() => console.log('Export results')}
1818
/>
1919
</VariantAnalysisContainer>
2020
);

‎extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisHeader.tsx‎

Lines changed: 24 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import * as React from 'react';
2+
import styled from 'styled-components';
23
import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
34
import ViewTitle from '../remote-queries/ViewTitle';
4-
import { CodeSquareIcon, FileCodeIcon } from '@primer/octicons-react';
55
import { LinkIconButton } from './LinkIconButton';
6-
import styled from 'styled-components';
7-
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
6+
import { VariantAnalysisHeaderActions } from './VariantAnalysisHeaderActions';
87

98
export type VariantAnalysisHeaderProps = {
109
queryName: string;
1110
queryFileName: string;
12-
status: VariantAnalysisStatus;
11+
variantAnalysisStatus: VariantAnalysisStatus;
1312

14-
onOpenQueryClick: () => void;
15-
onViewQueryClick: () => void;
13+
onOpenQueryFileClick: () => void;
14+
onViewQueryTextClick: () => void;
1615

1716
onStopQueryClick: () => void;
1817

@@ -25,67 +24,46 @@ const Container = styled.div`
2524
align-items: center;
2625
`;
2726

28-
const TopRow = styled.div`
27+
const QueryDetails = styled.div`
2928
max-width: 100%;
3029
`;
3130

32-
const TopLinkButtons = styled.div`
33-
display: flex;
34-
gap: 1em;
35-
`;
36-
37-
const BottomButtons = styled.div`
38-
margin-left: auto;
31+
const QueryActions = styled.div`
3932
display: flex;
4033
gap: 1em;
4134
`;
4235

43-
const Button = styled(VSCodeButton)`
44-
white-space: nowrap;
45-
`;
46-
4736
export const VariantAnalysisHeader = ({
4837
queryName,
4938
queryFileName,
50-
status,
51-
onOpenQueryClick,
52-
onViewQueryClick,
39+
variantAnalysisStatus,
40+
onOpenQueryFileClick,
41+
onViewQueryTextClick,
5342
onStopQueryClick,
5443
onCopyRepositoryListClick,
5544
onExportResultsClick
5645
}: VariantAnalysisHeaderProps) => {
5746
return (
5847
<Container>
59-
<TopRow>
48+
<QueryDetails>
6049
<ViewTitle>{queryName}</ViewTitle>
61-
<TopLinkButtons>
62-
<LinkIconButton onClick={onOpenQueryClick}>
63-
<FileCodeIcon size={16} />
50+
<QueryActions>
51+
<LinkIconButton onClick={onOpenQueryFileClick}>
52+
<span slot="start" className="codicon codicon-file-code"></span>
6453
{queryFileName}
6554
</LinkIconButton>
66-
<LinkIconButton onClick={onViewQueryClick}>
67-
<CodeSquareIcon size={16} />
55+
<LinkIconButton onClick={onViewQueryTextClick}>
56+
<span slot="start" className="codicon codicon-code"></span>
6857
View query
6958
</LinkIconButton>
70-
</TopLinkButtons>
71-
</TopRow>
72-
<BottomButtons>
73-
{status === VariantAnalysisStatus.InProgress && (
74-
<VSCodeButton appearance="secondary" onClick={onStopQueryClick}>
75-
Stop query
76-
</VSCodeButton>
77-
)}
78-
{status === VariantAnalysisStatus.Succeeded && (
79-
<>
80-
<Button appearance="secondary" onClick={onCopyRepositoryListClick}>
81-
Copy repository list
82-
</Button>
83-
<Button appearance="primary" onClick={onExportResultsClick}>
84-
Export results
85-
</Button>
86-
</>
87-
)}
88-
</BottomButtons>
59+
</QueryActions>
60+
</QueryDetails>
61+
<VariantAnalysisHeaderActions
62+
variantAnalysisStatus={variantAnalysisStatus}
63+
onStopQueryClick={onStopQueryClick}
64+
onCopyRepositoryListClick={onCopyRepositoryListClick}
65+
onExportResultsClick={onExportResultsClick}
66+
/>
8967
</Container>
9068
);
9169
};

‎extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisHeaderActions.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
4+
import { VariantAnalysisStatus } from '../../remote-queries/shared/variant-analysis';
5+
6+
export type Props = {
7+
variantAnalysisStatus: VariantAnalysisStatus;
8+
9+
onStopQueryClick: () => void;
10+
11+
onCopyRepositoryListClick: () => void;
12+
onExportResultsClick: () => void;
13+
};
14+
15+
const Container = styled.div`
16+
margin-left: auto;
17+
display: flex;
18+
gap: 1em;
19+
`;
20+
21+
const Button = styled(VSCodeButton)`
22+
white-space: nowrap;
23+
`;
24+
25+
export const VariantAnalysisHeaderActions = ({
26+
variantAnalysisStatus,
27+
onStopQueryClick,
28+
onCopyRepositoryListClick,
29+
onExportResultsClick
30+
}: Props) => {
31+
return (
32+
<Container>
33+
{variantAnalysisStatus === VariantAnalysisStatus.InProgress && (
34+
<VSCodeButton appearance="secondary" onClick={onStopQueryClick}>
35+
Stop query
36+
</VSCodeButton>
37+
)}
38+
{variantAnalysisStatus === VariantAnalysisStatus.Succeeded && (
39+
<>
40+
<Button appearance="secondary" onClick={onCopyRepositoryListClick}>
41+
Copy repository list
42+
</Button>
43+
<Button appearance="primary" onClick={onExportResultsClick}>
44+
Export results
45+
</Button>
46+
</>
47+
)}
48+
</Container>
49+
);
50+
};

‎extensions/ql-vscode/src/view/variant-analysis/__tests__/VariantAnalysisHeader.spec.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ import { VariantAnalysisStatus } from '../../../remote-queries/shared/variant-an
55
import { userEvent } from '@storybook/testing-library';
66

77
describe(VariantAnalysisHeader.name, () => {
8-
const onOpenQueryClick = jest.fn();
9-
const onViewQueryClick = jest.fn();
8+
const onOpenQueryFileClick = jest.fn();
9+
const onViewQueryTextClick = jest.fn();
1010
const onStopQueryClick = jest.fn();
1111
const onCopyRepositoryListClick = jest.fn();
1212
const onExportResultsClick = jest.fn();
1313

1414
afterEach(() => {
15-
onOpenQueryClick.mockReset();
16-
onViewQueryClick.mockReset();
15+
onOpenQueryFileClick.mockReset();
16+
onViewQueryTextClick.mockReset();
1717
onStopQueryClick.mockReset();
1818
onCopyRepositoryListClick.mockReset();
1919
onExportResultsClick.mockReset();
@@ -24,9 +24,9 @@ describe(VariantAnalysisHeader.name, () => {
2424
<VariantAnalysisHeader
2525
queryName="Query name"
2626
queryFileName="example.ql"
27-
status={VariantAnalysisStatus.InProgress}
28-
onOpenQueryClick={onOpenQueryClick}
29-
onViewQueryClick={onViewQueryClick}
27+
variantAnalysisStatus={VariantAnalysisStatus.InProgress}
28+
onOpenQueryFileClick={onOpenQueryFileClick}
29+
onViewQueryTextClick={onViewQueryTextClick}
3030
onStopQueryClick={onStopQueryClick}
3131
onCopyRepositoryListClick={onCopyRepositoryListClick}
3232
onExportResultsClick={onExportResultsClick}
@@ -44,39 +44,39 @@ describe(VariantAnalysisHeader.name, () => {
4444
render();
4545

4646
userEvent.click(screen.getByText('example.ql'));
47-
expect(onOpenQueryClick).toHaveBeenCalledTimes(1);
47+
expect(onOpenQueryFileClick).toHaveBeenCalledTimes(1);
4848
});
4949

5050
it('renders a view query button', () => {
5151
render();
5252

5353
userEvent.click(screen.getByText('View query'));
54-
expect(onViewQueryClick).toHaveBeenCalledTimes(1);
54+
expect(onViewQueryTextClick).toHaveBeenCalledTimes(1);
5555
});
5656

5757
it('renders the stop query button when in progress', () => {
58-
render({ status: VariantAnalysisStatus.InProgress });
58+
render({ variantAnalysisStatus: VariantAnalysisStatus.InProgress });
5959

6060
userEvent.click(screen.getByText('Stop query'));
6161
expect(onStopQueryClick).toHaveBeenCalledTimes(1);
6262
});
6363

6464
it('renders the copy repository list button when succeeded', () => {
65-
render({ status: VariantAnalysisStatus.Succeeded });
65+
render({ variantAnalysisStatus: VariantAnalysisStatus.Succeeded });
6666

6767
userEvent.click(screen.getByText('Copy repository list'));
6868
expect(onCopyRepositoryListClick).toHaveBeenCalledTimes(1);
6969
});
7070

7171
it('renders the export results button when succeeded', () => {
72-
render({ status: VariantAnalysisStatus.Succeeded });
72+
render({ variantAnalysisStatus: VariantAnalysisStatus.Succeeded });
7373

7474
userEvent.click(screen.getByText('Export results'));
7575
expect(onExportResultsClick).toHaveBeenCalledTimes(1);
7676
});
7777

7878
it('does not render any buttons when failed', () => {
79-
const { container } = render({ status: VariantAnalysisStatus.Failed });
79+
const { container } = render({ variantAnalysisStatus: VariantAnalysisStatus.Failed });
8080

8181
expect(container.querySelectorAll('vscode-button').length).toEqual(0);
8282
});

0 commit comments

Comments
 (0)