Use readonly dropdowns for showing type models

Author: koesie10

extensions/ql-vscode/src/view/common/ReadonlyDropdown.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { Dropdown } from "./Dropdown";
+
+type Props = {
+  value: string;
+  className?: string;
+
+  "aria-label"?: string;
+};
+
+export function ReadonlyDropdown({ value, ...props }: Props) {
+  const options = useMemo(() => {
+    return [
+      {
+        value,
+        label: value,
+      },
+    ];
+  }, [value]);
+
+  return (
+    <Dropdown
+      value={value}
+      disabledPlaceholder={value}
+      disabled={true}
+      options={options}
+      {...props}
+    />
+  );
+}

extensions/ql-vscode/src/view/model-editor/ModelInputDropdown.tsx

@@ -6,6 +6,7 @@ import {
   modeledMethodSupportsInput,
 } from "../../model-editor/modeled-method";
 import { Method, getArgumentsList } from "../../model-editor/method";
+import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 
 type Props = {
   method: Method;
@@ -60,6 +61,10 @@ export const ModelInputDropdown = ({
       ? modeledMethod.input
       : undefined;
 
+  if (modeledMethod?.type === "type") {
+    return <ReadonlyDropdown value={modeledMethod.path} aria-label="Path" />;
+  }
+
   return (
     <Dropdown
       value={value}

extensions/ql-vscode/src/view/model-editor/ModelOutputDropdown.tsx

@@ -6,6 +6,7 @@ import {
   modeledMethodSupportsOutput,
 } from "../../model-editor/modeled-method";
 import { Method, getArgumentsList } from "../../model-editor/method";
+import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 
 type Props = {
   method: Method;
@@ -61,6 +62,15 @@ export const ModelOutputDropdown = ({
       ? modeledMethod.output
       : undefined;
 
+  if (modeledMethod?.type === "type") {
+    return (
+      <ReadonlyDropdown
+        value={modeledMethod.relatedTypeName}
+        aria-label="Related type name"
+      />
+    );
+  }
+
   return (
     <Dropdown
       value={value}

extensions/ql-vscode/src/view/model-editor/ModelTypeDropdown.tsx

@@ -10,6 +10,7 @@ import {
 import { Method, getArgumentsList } from "../../model-editor/method";
 import { createEmptyModeledMethod } from "../../model-editor/modeled-method-empty";
 import { Mutable } from "../../common/mutable";
+import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 
 const options: Array<{ value: ModeledMethodType; label: string }> = [
   { value: "none", label: "Unmodeled" },
@@ -78,7 +79,13 @@ export const ModelTypeDropdown = ({
   const isShownOption = options.some((option) => option.value === value);
 
   if (!isShownOption) {
-    return <>{value}</>;
+    return (
+      <ReadonlyDropdown
+        // Try to show this like a normal type with uppercased first letter
+        value={value.charAt(0).toUpperCase() + value.slice(1)}
+        aria-label="Model type"
+      />
+    );
   }
 
   return (