From 31723a399ebef2dc463427d331ba07dc649604ab Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Tue, 6 Feb 2024 11:02:29 +0000
Subject: [PATCH 1/2] Use suggest box for type path suggestions

---
 .../src/view/model-editor/MethodRow.tsx       |  1 +
 .../model-editor/ModelInputSuggestBox.tsx     | 12 +++-
 .../model-editor/ModelTypePathSuggestBox.tsx  | 68 +++++++++++++++++++
 3 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 extensions/ql-vscode/src/view/model-editor/ModelTypePathSuggestBox.tsx

diff --git a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
index e54e52d48a5..4b3b9e0dfc3 100644
--- a/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
@@ -278,6 +278,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                     <ModelInputSuggestBox
                       modeledMethod={modeledMethod}
                       suggestions={inputAccessPathSuggestions}
+                      typePathSuggestions={outputAccessPathSuggestions ?? []}
                       onChange={modeledMethodChangedHandlers[index]}
                     />
                   )}
diff --git a/extensions/ql-vscode/src/view/model-editor/ModelInputSuggestBox.tsx b/extensions/ql-vscode/src/view/model-editor/ModelInputSuggestBox.tsx
index 16ef1a3305b..b290dff43ae 100644
--- a/extensions/ql-vscode/src/view/model-editor/ModelInputSuggestBox.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/ModelInputSuggestBox.tsx
@@ -4,7 +4,6 @@ import {
   calculateNewProvenance,
   modeledMethodSupportsInput,
 } from "../../model-editor/modeled-method";
-import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 import type { AccessPathOption } from "../../model-editor/suggestions";
 import { SuggestBox } from "../common/SuggestBox";
 import { useDebounceCallback } from "../common/useDebounceCallback";
@@ -14,10 +13,12 @@ import {
   validateAccessPath,
 } from "../../model-editor/shared/access-paths";
 import { ModelSuggestionIcon } from "./ModelSuggestionIcon";
+import { ModelTypePathSuggestBox } from "./ModelTypePathSuggestBox";
 
 type Props = {
   modeledMethod: ModeledMethod | undefined;
   suggestions: AccessPathOption[];
+  typePathSuggestions: AccessPathOption[];
   onChange: (modeledMethod: ModeledMethod) => void;
 };
 
@@ -33,6 +34,7 @@ const getDetails = (option: AccessPathOption) => option.details;
 export const ModelInputSuggestBox = ({
   modeledMethod,
   suggestions,
+  typePathSuggestions,
   onChange,
 }: Props) => {
   const [value, setValue] = useState<string | undefined>(
@@ -75,7 +77,13 @@ export const ModelInputSuggestBox = ({
   );
 
   if (modeledMethod?.type === "type") {
-    return <ReadonlyDropdown value={modeledMethod.path} aria-label="Path" />;
+    return (
+      <ModelTypePathSuggestBox
+        modeledMethod={modeledMethod}
+        suggestions={typePathSuggestions}
+        onChange={onChange}
+      />
+    );
   }
 
   return (
diff --git a/extensions/ql-vscode/src/view/model-editor/ModelTypePathSuggestBox.tsx b/extensions/ql-vscode/src/view/model-editor/ModelTypePathSuggestBox.tsx
new file mode 100644
index 00000000000..044c6576614
--- /dev/null
+++ b/extensions/ql-vscode/src/view/model-editor/ModelTypePathSuggestBox.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import type { TypeModeledMethod } from "../../model-editor/modeled-method";
+import type { AccessPathOption } from "../../model-editor/suggestions";
+import { SuggestBox } from "../common/SuggestBox";
+import { useDebounceCallback } from "../common/useDebounceCallback";
+import type { AccessPathDiagnostic } from "../../model-editor/shared/access-paths";
+import {
+  parseAccessPathTokens,
+  validateAccessPath,
+} from "../../model-editor/shared/access-paths";
+import { ModelSuggestionIcon } from "./ModelSuggestionIcon";
+
+type Props = {
+  modeledMethod: TypeModeledMethod;
+  suggestions: AccessPathOption[];
+  onChange: (modeledMethod: TypeModeledMethod) => void;
+};
+
+const parseValueToTokens = (value: string) =>
+  parseAccessPathTokens(value).map((t) => t.text);
+
+const getIcon = (option: AccessPathOption) => (
+  <ModelSuggestionIcon name={option.icon} />
+);
+
+const getDetails = (option: AccessPathOption) => option.details;
+
+export const ModelTypePathSuggestBox = ({
+  modeledMethod,
+  suggestions,
+  onChange,
+}: Props) => {
+  const [value, setValue] = useState<string | undefined>(modeledMethod.path);
+
+  useEffect(() => {
+    setValue(modeledMethod.path);
+  }, [modeledMethod]);
+
+  // Debounce the callback to avoid updating the model too often.
+  // Not doing this results in a lot of lag when typing.
+  useDebounceCallback(
+    value,
+    (path: string | undefined) => {
+      if (path === undefined) {
+        return;
+      }
+
+      onChange({
+        ...modeledMethod,
+        path,
+      });
+    },
+    500,
+  );
+
+  return (
+    <SuggestBox<AccessPathOption, AccessPathDiagnostic>
+      value={value}
+      options={suggestions}
+      onChange={setValue}
+      parseValueToTokens={parseValueToTokens}
+      validateValue={validateAccessPath}
+      getIcon={getIcon}
+      getDetails={getDetails}
+      aria-label="Path"
+    />
+  );
+};

From 20516296b9a29e28727064a3d9b80e5bb564c038 Mon Sep 17 00:00:00 2001
From: shati-patel <42641846+shati-patel@users.noreply.github.com>
Date: Tue, 6 Feb 2024 11:05:35 +0000
Subject: [PATCH 2/2] Make "related type name" editable again

(I'd accidentally copied some outdated code from before we'd added the type textbox)
---
 .../src/view/model-editor/ModelOutputSuggestBox.tsx       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/extensions/ql-vscode/src/view/model-editor/ModelOutputSuggestBox.tsx b/extensions/ql-vscode/src/view/model-editor/ModelOutputSuggestBox.tsx
index d7ebfc4dd2d..0aeb3d6de05 100644
--- a/extensions/ql-vscode/src/view/model-editor/ModelOutputSuggestBox.tsx
+++ b/extensions/ql-vscode/src/view/model-editor/ModelOutputSuggestBox.tsx
@@ -4,7 +4,6 @@ import {
   calculateNewProvenance,
   modeledMethodSupportsOutput,
 } from "../../model-editor/modeled-method";
-import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 import type { AccessPathOption } from "../../model-editor/suggestions";
 import { SuggestBox } from "../common/SuggestBox";
 import { useDebounceCallback } from "../common/useDebounceCallback";
@@ -14,6 +13,7 @@ import {
   validateAccessPath,
 } from "../../model-editor/shared/access-paths";
 import { ModelSuggestionIcon } from "./ModelSuggestionIcon";
+import { ModelTypeTextbox } from "./ModelTypeTextbox";
 
 type Props = {
   modeledMethod: ModeledMethod | undefined;
@@ -76,8 +76,10 @@ export const ModelOutputSuggestBox = ({
 
   if (modeledMethod?.type === "type") {
     return (
-      <ReadonlyDropdown
-        value={modeledMethod.relatedTypeName}
+      <ModelTypeTextbox
+        modeledMethod={modeledMethod}
+        typeInfo="relatedTypeName"
+        onChange={onChange}
         aria-label="Related type name"
       />
     );