From 55557df53f9ac67afadf30afbbfdc259cd16b8eb Mon Sep 17 00:00:00 2001
From: Charis Kyriakou <charisk@users.noreply.github.com>
Date: Mon, 7 Aug 2023 12:58:41 +0100
Subject: [PATCH] Add in-progress UI state for modeling methods (#2675)

---
 .../ql-vscode/src/common/interface-types.ts   |  8 +-
 .../DataExtensionsEditor.tsx                  |  8 ++
 .../InProgressDropdown.tsx                    | 23 +++++
 .../data-extensions-editor/LibraryRow.tsx     |  3 +
 .../view/data-extensions-editor/MethodRow.tsx | 92 ++++++++++++-------
 .../ModeledMethodDataGrid.tsx                 |  7 +-
 .../ModeledMethodsList.tsx                    |  3 +
 7 files changed, 111 insertions(+), 33 deletions(-)
 create mode 100644 extensions/ql-vscode/src/view/data-extensions-editor/InProgressDropdown.tsx

diff --git a/extensions/ql-vscode/src/common/interface-types.ts b/extensions/ql-vscode/src/common/interface-types.ts
index 713c0c4e8..c8c7b1880 100644
--- a/extensions/ql-vscode/src/common/interface-types.ts
+++ b/extensions/ql-vscode/src/common/interface-types.ts
@@ -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
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
index db74fdc5f..ae294d3b0 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx
@@ -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}
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/InProgressDropdown.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/InProgressDropdown.tsx
new file mode 100644
index 000000000..2297a8c79
--- /dev/null
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/InProgressDropdown.tsx
@@ -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}
+    />
+  );
+};
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
index 6bc2b9bb8..157221f0f 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
@@ -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}
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx
index 0032d5251..ad153defd 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx
@@ -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>
   );
 }
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx
index 14f1f8d84..304f5a0da 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodDataGrid.tsx
@@ -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}
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
index 780fc5a36..1b17292b3 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
@@ -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}