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

Add in-progress UI state for modeling methods (#2675)

Browse Source
This commit is contained in:
Charis Kyriakou
2023-08-07 12:58:41 +01:00
committed by GitHub
parent f1204ce8f4
commit 55557df53f
7 changed files with 111 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
extensions/ql-vscode/src/common/interface-types.ts
View File

@@ -510,6 +510,11 @@ interface AddModeledMethodsMessage {
modeledMethods: Record<string, ModeledMethod>;
}
interface SetInProgressMethodsMessage {
t: "setInProgressMethods";
inProgressMethods: string[];
}
interface SwitchModeMessage {
t: "switchMode";
mode: Mode;
@@ -556,7 +561,8 @@ export type ToDataExtensionsEditorMessage =
| SetExtensionPackStateMessage
| SetExternalApiUsagesMessage
| LoadModeledMethodsMessage
| AddModeledMethodsMessage;
| AddModeledMethodsMessage
| SetInProgressMethodsMessage;
export type FromDataExtensionsEditorMessage =
| ViewLoadedMsg

8
extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
View File

@@ -91,6 +91,10 @@ export function DataExtensionsEditor({
new Set(),
);
const [inProgressSignatures, setInProgressSignatures] = useState<Set<string>>(
new Set(),
);
const [hideModeledApis, setHideModeledApis] = useState(true);
const [modeledMethods, setModeledMethods] = useState<
@@ -135,6 +139,9 @@ export function DataExtensionsEditor({
]),
);
break;
case "setInProgressMethods":
setInProgressSignatures(new Set(msg.inProgressMethods));
break;
default:
assertNever(msg);
}
@@ -330,6 +337,7 @@ export function DataExtensionsEditor({
externalApiUsages={externalApiUsages}
modeledMethods={modeledMethods}
modifiedSignatures={modifiedSignatures}
inProgressSignatures={inProgressSignatures}
viewState={viewState}
hideModeledApis={hideModeledApis}
onChange={onChange}

23
extensions/ql-vscode/src/view/data-extensions-editor/InProgressDropdown.tsx Normal file
View File

@@ -0,0 +1,23 @@
import * as React from "react";
import { Dropdown } from "../common/Dropdown";
export const InProgressDropdown = () => {
const options: Array<{ label: string; value: string }> = [
{
label: "Thinking...",
value: "Thinking...",
},
];
const noop = () => {
// Do nothing
};
return (
<Dropdown
value="Thinking..."
options={options}
disabled={false}
onChange={noop}
/>
);
};

3
extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
View File

@@ -72,6 +72,7 @@ type Props = {
externalApiUsages: ExternalApiUsage[];
modeledMethods: Record<string, ModeledMethod>;
modifiedSignatures: Set<string>;
inProgressSignatures: Set<string>;
viewState: DataExtensionEditorViewState;
hideModeledApis: boolean;
onChange: (
@@ -97,6 +98,7 @@ export const LibraryRow = ({
externalApiUsages,
modeledMethods,
modifiedSignatures,
inProgressSignatures,
viewState,
hideModeledApis,
onChange,
@@ -209,6 +211,7 @@ export const LibraryRow = ({
externalApiUsages={externalApiUsages}
modeledMethods={modeledMethods}
modifiedSignatures={modifiedSignatures}
inProgressSignatures={inProgressSignatures}
mode={viewState.mode}
hideModeledApis={hideModeledApis}
onChange={onChangeWithModelName}

92
extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx
View File

@@ -2,6 +2,7 @@ import {
VSCodeDataGridCell,
VSCodeDataGridRow,
VSCodeLink,
VSCodeProgressRing,
} from "@vscode/webview-ui-toolkit/react";
import * as React from "react";
import { ChangeEvent, useCallback, useMemo } from "react";
@@ -23,6 +24,7 @@ import {
ModelingStatus,
ModelingStatusIndicator,
} from "./ModelingStatusIndicator";
import { InProgressDropdown } from "./InProgressDropdown";
const ApiOrMethodCell = styled(VSCodeDataGridCell)`
display: flex;
@@ -43,6 +45,12 @@ const ViewLink = styled(VSCodeLink)`
white-space: nowrap;
`;
const ProgressRing = styled(VSCodeProgressRing)`
width: 16px;
height: 16px;
margin-left: auto;
`;
const modelTypeOptions: Array<{ value: ModeledMethodType; label: string }> = [
{ value: "none", label: "Unmodeled" },
{ value: "source", label: "Source" },
@@ -55,6 +63,7 @@ type Props = {
externalApiUsage: ExternalApiUsage;
modeledMethod: ModeledMethod | undefined;
methodIsUnsaved: boolean;
modelingInProgress: boolean;
mode: Mode;
hideModeledApis: boolean;
onChange: (
@@ -216,38 +225,59 @@ function ModelableMethodRow(props: Props) {
</UsagesButton>
)}
<ViewLink onClick={jumpToUsage}>View</ViewLink>
{props.modelingInProgress && <ProgressRing />}
</ApiOrMethodCell>
<VSCodeDataGridCell gridColumn={2}>
<Dropdown
value={modeledMethod?.type ?? "none"}
options={modelTypeOptions}
onChange={handleTypeInput}
/>
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={3}>
<Dropdown
value={modeledMethod?.input}
options={inputOptions}
disabled={!showInputCell}
onChange={handleInputInput}
/>
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={4}>
<Dropdown
value={modeledMethod?.output}
options={outputOptions}
disabled={!showOutputCell}
onChange={handleOutputInput}
/>
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={5}>
<KindInput
kinds={predicate?.supportedKinds || []}
value={modeledMethod?.kind}
disabled={!showKindCell}
onChange={handleKindChange}
/>
</VSCodeDataGridCell>
{props.modelingInProgress && (
<>
<VSCodeDataGridCell gridColumn={2}>
<InProgressDropdown />
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={3}>
<InProgressDropdown />
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={4}>
<InProgressDropdown />
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={5}>
<InProgressDropdown />
</VSCodeDataGridCell>
</>
)}
{!props.modelingInProgress && (
<>
<VSCodeDataGridCell gridColumn={2}>
<Dropdown
value={modeledMethod?.type ?? "none"}
options={modelTypeOptions}
onChange={handleTypeInput}
/>
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={3}>
<Dropdown
value={modeledMethod?.input}
options={inputOptions}
disabled={!showInputCell}
onChange={handleInputInput}
/>
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={4}>
<Dropdown
value={modeledMethod?.output}
options={outputOptions}
disabled={!showOutputCell}
onChange={handleOutputInput}
/>
</VSCodeDataGridCell>
<VSCodeDataGridCell gridColumn={5}>
<KindInput
kinds={predicate?.supportedKinds || []}
value={modeledMethod?.kind}
disabled={!showKindCell}
onChange={handleKindChange}
/>
</VSCodeDataGridCell>
</>
)}
</VSCodeDataGridRow>
);
}

7
extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx
View File

@@ -15,6 +15,7 @@ type Props = {
externalApiUsages: ExternalApiUsage[];
modeledMethods: Record<string, ModeledMethod>;
modifiedSignatures: Set<string>;
inProgressSignatures: Set<string>;
mode: Mode;
hideModeledApis: boolean;
onChange: (
@@ -27,6 +28,7 @@ export const ModeledMethodDataGrid = ({
externalApiUsages,
modeledMethods,
modifiedSignatures,
inProgressSignatures,
mode,
hideModeledApis,
onChange,
@@ -37,7 +39,7 @@ export const ModeledMethodDataGrid = ({
);
return (
<VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr">
<VSCodeDataGrid gridTemplateColumns="0.5fr 0.125fr 0.125fr 0.125fr 0.125fr 0.125fr">
<VSCodeDataGridRow rowType="header">
<VSCodeDataGridCell cellType="columnheader" gridColumn={1}>
API or method
@@ -61,6 +63,9 @@ export const ModeledMethodDataGrid = ({
externalApiUsage={externalApiUsage}
modeledMethod={modeledMethods[externalApiUsage.signature]}
methodIsUnsaved={modifiedSignatures.has(externalApiUsage.signature)}
modelingInProgress={inProgressSignatures.has(
externalApiUsage.signature,
)}
mode={mode}
hideModeledApis={hideModeledApis}
onChange={onChange}

3
extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
View File

@@ -14,6 +14,7 @@ type Props = {
externalApiUsages: ExternalApiUsage[];
modeledMethods: Record<string, ModeledMethod>;
modifiedSignatures: Set<string>;
inProgressSignatures: Set<string>;
viewState: DataExtensionEditorViewState;
hideModeledApis: boolean;
onChange: (
@@ -41,6 +42,7 @@ export const ModeledMethodsList = ({
externalApiUsages,
modeledMethods,
modifiedSignatures,
inProgressSignatures,
viewState,
hideModeledApis,
onChange,
@@ -84,6 +86,7 @@ export const ModeledMethodsList = ({
externalApiUsages={grouped[libraryName]}
modeledMethods={modeledMethods}
modifiedSignatures={modifiedSignatures}
inProgressSignatures={inProgressSignatures}
viewState={viewState}
hideModeledApis={hideModeledApis}
onChange={onChange}