Merge pull request #2785 from github/robertbrignull/in-progress-dropdown

Adjust styling of disabled dropdowns when automodeling is in progress

Author: robertbrignull

extensions/ql-vscode/src/stories/model-editor/MethodRow.stories.tsx

@@ -101,3 +101,10 @@ AlreadyModeled.args = {
   method: { ...method, supported: true },
   modeledMethod: undefined,
 };
+
+export const ModelingInProgress = Template.bind({});
+ModelingInProgress.args = {
+  method,
+  modeledMethod,
+  modelingInProgress: true,
+};

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

@@ -19,7 +19,8 @@ type Props = {
   value: string | undefined;
   options: Array<{ value: string; label: string }>;
   disabled?: boolean;
-  onChange: (event: ChangeEvent<HTMLSelectElement>) => void;
+  disabledPlaceholder?: string;
+  onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
 };
 
 /**
@@ -32,16 +33,23 @@ type Props = {
  * See https://github.com/github/vscode-codeql/pull/2582#issuecomment-1622164429
  * for more info on the problem and other potential solutions.
  */
-export function Dropdown({ value, options, disabled, onChange }: Props) {
+export function Dropdown({
+  value,
+  options,
+  disabled,
+  disabledPlaceholder,
+  onChange,
+}: Props) {
+  const disabledValue = disabledPlaceholder ?? DISABLED_VALUE;
   return (
     <StyledDropdown
-      value={disabled ? DISABLED_VALUE : value}
+      value={disabled ? disabledValue : value}
       disabled={disabled}
       onChange={onChange}
     >
       {disabled ? (
-        <option key={DISABLED_VALUE} value={DISABLED_VALUE}>
-          {DISABLED_VALUE}
+        <option key={disabledValue} value={disabledValue}>
+          {disabledValue}
         </option>
       ) : (
         options.map((option) => (

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

@@ -2,22 +2,12 @@ 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}
+      options={[]}
+      disabled={true}
+      disabledPlaceholder="Thinking..."
     />
   );
 };