Add logic to change style for non-accepted suggestions

Author: charisk

extensions/ql-vscode/src/model-editor/modeled-method.ts

@@ -1,4 +1,5 @@
 import { MethodSignature } from "./method";
+import { ModelingStatus } from "./shared/modeling-status";
 
 export type ModeledMethodType =
   | "none"
@@ -109,3 +110,18 @@ export function modeledMethodSupportsProvenance(
     modeledMethod.type === "neutral"
   );
 }
+
+export function isModelAccepted(
+  modeledMethod: ModeledMethod | undefined,
+  modelingStatus: ModelingStatus,
+): boolean {
+  if (!modeledMethod) {
+    return true;
+  }
+
+  return (
+    modelingStatus !== "unsaved" ||
+    modeledMethod.type === "none" ||
+    modeledMethod.provenance !== "ai-generated"
+  );
+}

extensions/ql-vscode/src/stories/method-modeling/MethodModelingInputs.stories.tsx

@@ -60,3 +60,13 @@ ModelingInProgress.args = {
   modeledMethod,
   isModelingInProgress: true,
 };
+
+const generatedModeledMethod = createSinkModeledMethod({
+  provenance: "ai-generated",
+});
+export const ModelingNotAccepted = Template.bind({});
+ModelingNotAccepted.args = {
+  method,
+  modeledMethod: generatedModeledMethod,
+  modelingStatus: "unsaved",
+};

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

@@ -0,0 +1,6 @@
+import { styled } from "styled-components";
+import { Dropdown } from "../common/Dropdown";
+
+export const InputDropdown = styled(Dropdown)<{ $accepted: boolean }>`
+  font-style: ${(props) => (props.$accepted ? "normal" : "italic")};
+`;

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

@@ -1,15 +1,16 @@
 import * as React from "react";
 import { ChangeEvent, useCallback, useMemo } from "react";
-import { Dropdown } from "../common/Dropdown";
 import {
   ModeledMethod,
+  isModelAccepted,
   modeledMethodSupportsInput,
 } from "../../model-editor/modeled-method";
 import { Method } from "../../model-editor/method";
 import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 import { QueryLanguage } from "../../common/query-language";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import { ModelingStatus } from "../../model-editor/shared/modeling-status";
+import { InputDropdown } from "./InputDropdown";
 
 type Props = {
   language: QueryLanguage;
@@ -23,6 +24,7 @@ export const ModelInputDropdown = ({
   language,
   method,
   modeledMethod,
+  modelingStatus,
   onChange,
 }: Props): JSX.Element => {
   const options = useMemo(() => {
@@ -66,11 +68,14 @@ export const ModelInputDropdown = ({
     return <ReadonlyDropdown value={modeledMethod.path} aria-label="Path" />;
   }
 
+  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
+
   return (
-    <Dropdown
+    <InputDropdown
       value={value}
       options={options}
       disabled={!enabled}
+      $accepted={modelAccepted}
       onChange={handleChange}
       aria-label="Input"
     />

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

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { ChangeEvent, useCallback, useEffect, useMemo } from "react";
-import type {
+import {
   ModeledMethod,
   ModeledMethodKind,
+  modeledMethodSupportsKind,
+  isModelAccepted,
 } from "../../model-editor/modeled-method";
-import { modeledMethodSupportsKind } from "../../model-editor/modeled-method";
-import { Dropdown } from "../common/Dropdown";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import { QueryLanguage } from "../../common/query-language";
 import { ModelingStatus } from "../../model-editor/shared/modeling-status";
+import { InputDropdown } from "./InputDropdown";
 
 type Props = {
   language: QueryLanguage;
@@ -20,6 +21,7 @@ type Props = {
 export const ModelKindDropdown = ({
   language,
   modeledMethod,
+  modelingStatus,
   onChange,
 }: Props) => {
   const predicate = useMemo(() => {
@@ -83,11 +85,14 @@ export const ModelKindDropdown = ({
     }
   }, [modeledMethod, value, kinds, onChangeKind]);
 
+  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
+
   return (
-    <Dropdown
+    <InputDropdown
       value={value}
       options={options}
       disabled={disabled}
+      $accepted={modelAccepted}
       onChange={handleChange}
       aria-label="Kind"
     />

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

@@ -1,15 +1,16 @@
 import * as React from "react";
 import { ChangeEvent, useCallback, useMemo } from "react";
-import { Dropdown } from "../common/Dropdown";
 import {
   ModeledMethod,
+  isModelAccepted,
   modeledMethodSupportsOutput,
 } from "../../model-editor/modeled-method";
 import { Method } from "../../model-editor/method";
 import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import { QueryLanguage } from "../../common/query-language";
 import { ModelingStatus } from "../../model-editor/shared/modeling-status";
+import { InputDropdown } from "./InputDropdown";
 
 type Props = {
   language: QueryLanguage;
@@ -23,6 +24,7 @@ export const ModelOutputDropdown = ({
   language,
   method,
   modeledMethod,
+  modelingStatus,
   onChange,
 }: Props): JSX.Element => {
   const options = useMemo(() => {
@@ -72,11 +74,14 @@ export const ModelOutputDropdown = ({
     );
   }
 
+  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
+
   return (
-    <Dropdown
+    <InputDropdown
       value={value}
       options={options}
       disabled={!enabled}
+      $accepted={modelAccepted}
       onChange={handleChange}
       aria-label="Output"
     />

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChangeEvent, useCallback } from "react";
-import { Dropdown } from "../common/Dropdown";
 import {
+  isModelAccepted,
   ModeledMethod,
   modeledMethodSupportsProvenance,
   ModeledMethodType,
@@ -14,6 +14,7 @@ import { ReadonlyDropdown } from "../common/ReadonlyDropdown";
 import { QueryLanguage } from "../../common/query-language";
 import { getModelsAsDataLanguage } from "../../model-editor/languages";
 import { ModelingStatus } from "../../model-editor/shared/modeling-status";
+import { InputDropdown } from "./InputDropdown";
 
 const options: Array<{ value: ModeledMethodType; label: string }> = [
   { value: "none", label: "Unmodeled" },
@@ -35,6 +36,7 @@ export const ModelTypeDropdown = ({
   language,
   method,
   modeledMethod,
+  modelingStatus,
   onChange,
 }: Props): JSX.Element => {
   const handleChange = useCallback(
@@ -90,10 +92,13 @@ export const ModelTypeDropdown = ({
     );
   }
 
+  const modelAccepted = isModelAccepted(modeledMethod, modelingStatus);
+
   return (
-    <Dropdown
+    <InputDropdown
       value={modeledMethod?.type ?? "none"}
       options={options}
+      $accepted={modelAccepted}
       onChange={handleChange}
       aria-label="Model type"
     />