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

Remove showMultipleModels from view states

Browse Source
This commit is contained in:
Koen Vlaswinkel
2023-12-12 14:43:42 +01:00
parent 5a29d35c98
commit 6ec0f51a54
13 changed files with 42 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/ql-vscode/src/model-editor/method-modeling/method-modeling-view-provider.ts
View File

@@ -48,7 +48,6 @@ export class MethodModelingViewProvider extends AbstractWebviewViewProvider<
t: "setMethodModelingPanelViewState",
viewState: {
language: this.language,
showMultipleModels: true,
},
});
}

1
extensions/ql-vscode/src/model-editor/model-editor-view.ts
View File

@@ -385,7 +385,6 @@ export class ModelEditorView extends AbstractWebview<
language: this.language,
showGenerateButton,
showLlmButton,
showMultipleModels: true,
mode: this.modelingStore.getMode(this.databaseItem),
showModeSwitchButton,
sourceArchiveAvailable,

2
extensions/ql-vscode/src/model-editor/shared/view-state.ts
View File

@@ -7,7 +7,6 @@ export interface ModelEditorViewState {
language: QueryLanguage;
showGenerateButton: boolean;
showLlmButton: boolean;
showMultipleModels: boolean;
mode: Mode;
showModeSwitchButton: boolean;
sourceArchiveAvailable: boolean;
@@ -15,5 +14,4 @@ export interface ModelEditorViewState {
export interface MethodModelingPanelViewState {
language: QueryLanguage | undefined;
showMultipleModels: boolean;
}

1
extensions/ql-vscode/src/stories/model-editor/LibraryRow.stories.tsx
View File

@@ -216,7 +216,6 @@ LibraryRow.args = {
viewState: createMockModelEditorViewState({
showGenerateButton: true,
showLlmButton: true,
showMultipleModels: true,
}),
hideModeledMethods: false,
};

12
extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx
View File

@@ -6,10 +6,7 @@ import { Meta, StoryFn } from "@storybook/react";
import { MethodRow as MethodRowComponent } from "../../view/model-editor/MethodRow";
import { CallClassification, Method } from "../../model-editor/method";
import { ModeledMethod } from "../../model-editor/modeled-method";
import {
MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS,
SINGLE_MODEL_GRID_TEMPLATE_COLUMNS,
} from "../../view/model-editor/ModeledMethodDataGrid";
import { MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS } from "../../view/model-editor/ModeledMethodDataGrid";
import { DataGrid } from "../../view/common/DataGrid";
import { createMockModelEditorViewState } from "../../../test/factories/model-editor/view-state";
@@ -35,12 +32,8 @@ const Template: StoryFn<typeof MethodRowComponent> = (args) => {
[args],
);
const gridTemplateColumns = args.viewState?.showMultipleModels
? MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS
: SINGLE_MODEL_GRID_TEMPLATE_COLUMNS;
return (
<DataGrid gridTemplateColumns={gridTemplateColumns}>
<DataGrid gridTemplateColumns={MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS}>
<MethodRowComponent
{...args}
modeledMethods={modeledMethods}
@@ -100,7 +93,6 @@ const modeledMethod: ModeledMethod = {
const viewState = createMockModelEditorViewState({
showGenerateButton: true,
showLlmButton: true,
showMultipleModels: true,
});
export const Unmodeled = Template.bind({});

1
extensions/ql-vscode/src/stories/model-editor/ModelEditor.stories.tsx
View File

@@ -30,7 +30,6 @@ ModelEditor.args = {
},
showGenerateButton: true,
showLlmButton: true,
showMultipleModels: true,
}),
initialMethods: [
{

2
extensions/ql-vscode/src/view/method-modeling/MethodModelingView.tsx
View File

@@ -110,7 +110,7 @@ export function MethodModelingView({ initialViewState }: Props): JSX.Element {
method={method}
modeledMethods={modeledMethods}
isModelingInProgress={isModelingInProgress}
showMultipleModels={viewState?.showMultipleModels}
showMultipleModels={true}
onChange={onChange}
/>
);

7
extensions/ql-vscode/src/view/model-editor/HiddenMethodsRow.tsx
View File

@@ -2,7 +2,6 @@ import * as React from "react";
import { styled } from "styled-components";
import { pluralize } from "../../common/word";
import { DataGridCell, DataGridRow } from "../common/DataGrid";
import { ModelEditorViewState } from "../../model-editor/shared/view-state";
const HiddenMethodsCell = styled(DataGridCell)`
text-align: center;
@@ -11,23 +10,19 @@ const HiddenMethodsCell = styled(DataGridCell)`
interface Props {
numHiddenMethods: number;
someMethodsAreVisible: boolean;
viewState: ModelEditorViewState;
}
export function HiddenMethodsRow({
numHiddenMethods,
someMethodsAreVisible,
viewState,
}: Props) {
if (numHiddenMethods === 0) {
return null;
}
const gridColumn = viewState.showMultipleModels ? "span 6" : "span 5";
return (
<DataGridRow>
<HiddenMethodsCell gridColumn={gridColumn}>
<HiddenMethodsCell gridColumn="span 6">
{someMethodsAreVisible && "And "}
{pluralize(numHiddenMethods, "method", "methods")} modeled in other
CodeQL packs

69
extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
View File

@@ -136,8 +136,8 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
}, [focusedIndex]);
const modeledMethods = useMemo(
() => modeledMethodsToDisplay(modeledMethodsProp, method, viewState),
[modeledMethodsProp, method, viewState],
() => modeledMethodsToDisplay(modeledMethodsProp, method),
[modeledMethodsProp, method],
);
const validationErrors = useMemo(
@@ -219,13 +219,11 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
<DataGridCell>
<InProgressDropdown />
</DataGridCell>
{viewState.showMultipleModels && (
<DataGridCell>
<CodiconRow appearance="icon" disabled={true}>
<Codicon name="add" label="Add new model" />
</CodiconRow>
</DataGridCell>
)}
<DataGridCell>
<CodiconRow appearance="icon" disabled={true}>
<Codicon name="add" label="Add new model" />
</CodiconRow>
</DataGridCell>
</>
)}
{!props.modelingInProgress && (
@@ -267,28 +265,26 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
onChange={modeledMethodChangedHandlers[index]}
/>
</DataGridCell>
{viewState.showMultipleModels && (
<DataGridCell>
{index === 0 ? (
<CodiconRow
appearance="icon"
aria-label="Add new model"
onClick={handleAddModelClick}
disabled={addModelButtonDisabled}
>
<Codicon name="add" />
</CodiconRow>
) : (
<CodiconRow
appearance="icon"
aria-label="Remove model"
onClick={removeModelClickedHandlers[index]}
>
<Codicon name="trash" />
</CodiconRow>
)}
</DataGridCell>
)}
<DataGridCell>
{index === 0 ? (
<CodiconRow
appearance="icon"
aria-label="Add new model"
onClick={handleAddModelClick}
disabled={addModelButtonDisabled}
>
<Codicon name="add" />
</CodiconRow>
) : (
<CodiconRow
appearance="icon"
aria-label="Remove model"
onClick={removeModelClickedHandlers[index]}
>
<Codicon name="trash" />
</CodiconRow>
)}
</DataGridCell>
</DataGridRow>
))}
{validationErrors.map((error, index) => (
@@ -336,9 +332,7 @@ const UnmodelableMethodRow = forwardRef<
<ViewLink onClick={jumpToMethod}>View</ViewLink>
</ApiOrMethodRow>
</DataGridCell>
<DataGridCell gridColumn={`span ${viewState.showMultipleModels ? 5 : 4}`}>
Method already modeled
</DataGridCell>
<DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
</DataGridRow>
);
});
@@ -354,15 +348,10 @@ function sendJumpToMethodMessage(method: Method) {
function modeledMethodsToDisplay(
modeledMethods: ModeledMethod[],
method: Method,
viewState: ModelEditorViewState,
): ModeledMethod[] {
if (modeledMethods.length === 0) {
return [createEmptyModeledMethod("none", method)];
}
if (viewState.showMultipleModels) {
return modeledMethods;
} else {
return modeledMethods.slice(0, 1);
}
return modeledMethods;
}

17
extensions/ql-vscode/src/view/model-editor/ModeledMethodDataGrid.tsx
View File

@@ -9,8 +9,6 @@ import { ModelEditorViewState } from "../../model-editor/shared/view-state";
import { ScreenReaderOnly } from "../common/ScreenReaderOnly";
import { DataGrid, DataGridCell } from "../common/DataGrid";
export const SINGLE_MODEL_GRID_TEMPLATE_COLUMNS =
"0.5fr 0.125fr 0.125fr 0.125fr 0.125fr";
export const MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS =
"0.5fr 0.125fr 0.125fr 0.125fr 0.125fr max-content";
@@ -61,12 +59,8 @@ export const ModeledMethodDataGrid = ({
const someMethodsAreVisible = methodsWithModelability.length > 0;
const gridTemplateColumns = viewState.showMultipleModels
? MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS
: SINGLE_MODEL_GRID_TEMPLATE_COLUMNS;
return (
<DataGrid gridTemplateColumns={gridTemplateColumns}>
<DataGrid gridTemplateColumns={MULTIPLE_MODELS_GRID_TEMPLATE_COLUMNS}>
{someMethodsAreVisible && (
<>
<DataGridCell rowType="header">API or method</DataGridCell>
@@ -74,11 +68,9 @@ export const ModeledMethodDataGrid = ({
<DataGridCell rowType="header">Input</DataGridCell>
<DataGridCell rowType="header">Output</DataGridCell>
<DataGridCell rowType="header">Kind</DataGridCell>
{viewState.showMultipleModels && (
<DataGridCell rowType="header">
<ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
</DataGridCell>
)}
<DataGridCell rowType="header">
<ScreenReaderOnly>Add or remove models</ScreenReaderOnly>
</DataGridCell>
{methodsWithModelability.map(({ method, methodCanBeModeled }) => {
const modeledMethods = modeledMethodsMap[method.signature] ?? [];
return (
@@ -100,7 +92,6 @@ export const ModeledMethodDataGrid = ({
<HiddenMethodsRow
numHiddenMethods={numHiddenMethods}
someMethodsAreVisible={someMethodsAreVisible}
viewState={viewState}
/>
</DataGrid>
);

33
extensions/ql-vscode/src/view/model-editor/__tests__/HiddenMethodsRow.spec.tsx
View File

@@ -1,18 +1,11 @@
import * as React from "react";
import { render, screen } from "@testing-library/react";
import { HiddenMethodsRow } from "../HiddenMethodsRow";
import { createMockModelEditorViewState } from "../../../../test/factories/model-editor/view-state";
describe(HiddenMethodsRow.name, () => {
const viewState = createMockModelEditorViewState();
it("does not render with 0 hidden methods", () => {
const { container } = render(
<HiddenMethodsRow
numHiddenMethods={0}
someMethodsAreVisible={true}
viewState={viewState}
/>,
<HiddenMethodsRow numHiddenMethods={0} someMethodsAreVisible={true} />,
);
expect(container).toBeEmptyDOMElement();
@@ -20,11 +13,7 @@ describe(HiddenMethodsRow.name, () => {
it("renders with 1 hidden methods and no visible methods", () => {
render(
<HiddenMethodsRow
numHiddenMethods={1}
someMethodsAreVisible={false}
viewState={viewState}
/>,
<HiddenMethodsRow numHiddenMethods={1} someMethodsAreVisible={false} />,
);
expect(
@@ -34,11 +23,7 @@ describe(HiddenMethodsRow.name, () => {
it("renders with 1 hidden methods and visible methods", () => {
render(
<HiddenMethodsRow
numHiddenMethods={1}
someMethodsAreVisible={true}
viewState={viewState}
/>,
<HiddenMethodsRow numHiddenMethods={1} someMethodsAreVisible={true} />,
);
expect(
@@ -48,11 +33,7 @@ describe(HiddenMethodsRow.name, () => {
it("renders with 3 hidden methods and no visible methods", () => {
render(
<HiddenMethodsRow
numHiddenMethods={3}
someMethodsAreVisible={false}
viewState={viewState}
/>,
<HiddenMethodsRow numHiddenMethods={3} someMethodsAreVisible={false} />,
);
expect(
@@ -62,11 +43,7 @@ describe(HiddenMethodsRow.name, () => {
it("renders with 3 hidden methods and visible methods", () => {
render(
<HiddenMethodsRow
numHiddenMethods={3}
someMethodsAreVisible={true}
viewState={viewState}
/>,
<HiddenMethodsRow numHiddenMethods={3} someMethodsAreVisible={true} />,
);
expect(

83
extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx
View File

@@ -195,10 +195,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "sink" },
{ ...modeledMethod, type: "summary" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
const kindInputs = screen.getAllByRole("combobox", { name: "Model type" });
@@ -208,24 +204,6 @@ describe(MethodRow.name, () => {
expect(kindInputs[2]).toHaveValue("summary");
});
it("renders only first model when showMultipleModels feature flag is disabled", () => {
render({
modeledMethods: [
{ ...modeledMethod, type: "source" },
{ ...modeledMethod, type: "sink" },
{ ...modeledMethod, type: "summary" },
],
viewState: {
...viewState,
showMultipleModels: false,
},
});
const kindInputs = screen.getAllByRole("combobox", { name: "Model type" });
expect(kindInputs.length).toBe(1);
expect(kindInputs[0]).toHaveValue("source");
});
it("can update fields when there are multiple models", async () => {
render({
modeledMethods: [
@@ -233,10 +211,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "sink", kind: "code-injection" },
{ ...modeledMethod, type: "summary" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
onChange.mockReset();
@@ -268,26 +242,9 @@ describe(MethodRow.name, () => {
expect(screen.getByText("Method already modeled")).toBeInTheDocument();
});
it("doesn't show add/remove buttons when multiple methods feature flag is disabled", async () => {
render({
modeledMethods: [modeledMethod],
viewState: {
...viewState,
showMultipleModels: false,
},
});
expect(screen.queryByLabelText("Add new model")).not.toBeInTheDocument();
expect(screen.queryByLabelText("Remove model")).not.toBeInTheDocument();
});
it("shows disabled button add new model when there are no modeled methods", async () => {
render({
modeledMethods: [],
viewState: {
...viewState,
showMultipleModels: true,
},
});
const addButton = screen.queryByLabelText("Add new model");
@@ -300,10 +257,6 @@ describe(MethodRow.name, () => {
it("disabled button to add new model when there is one unmodeled method", async () => {
render({
modeledMethods: [{ ...modeledMethod, type: "none" }],
viewState: {
...viewState,
showMultipleModels: true,
},
});
const addButton = screen.queryByLabelText("Add new model");
@@ -316,10 +269,6 @@ describe(MethodRow.name, () => {
it("enabled button to add new model when there is one modeled method", async () => {
render({
modeledMethods: [modeledMethod],
viewState: {
...viewState,
showMultipleModels: true,
},
});
const addButton = screen.queryByLabelText("Add new model");
@@ -335,10 +284,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "source" },
{ ...modeledMethod, type: "none" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
const addButton = screen.queryByLabelText("Add new model");
@@ -358,10 +303,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "summary" },
{ ...modeledMethod, type: "none" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
const addButtons = screen.queryAllByLabelText("Add new model");
@@ -378,10 +319,6 @@ describe(MethodRow.name, () => {
it("can add a new model", async () => {
render({
modeledMethods: [modeledMethod],
viewState: {
...viewState,
showMultipleModels: true,
},
});
onChange.mockReset();
@@ -409,10 +346,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "none" },
{ ...modeledMethod, type: "summary" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
onChange.mockReset();
@@ -434,10 +367,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "none" },
{ ...modeledMethod, type: "summary" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
onChange.mockReset();
@@ -457,10 +386,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "source" },
{ ...modeledMethod, type: "sink" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
@@ -472,10 +397,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "source" },
{ ...modeledMethod, type: "source" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
expect(screen.getByRole("alert")).toBeInTheDocument();
@@ -494,10 +415,6 @@ describe(MethodRow.name, () => {
{ ...modeledMethod, type: "source" },
{ ...modeledMethod, type: "neutral", kind: "source" },
],
viewState: {
...viewState,
showMultipleModels: true,
},
});
expect(screen.getAllByRole("alert").length).toBe(2);

1
extensions/ql-vscode/test/factories/model-editor/view-state.ts
View File

@@ -11,7 +11,6 @@ export function createMockModelEditorViewState(
mode: Mode.Application,
showGenerateButton: false,
showLlmButton: false,
showMultipleModels: false,
showModeSwitchButton: true,
extensionPack: createMockExtensionPack(),
sourceArchiveAvailable: true,