Use custom disabled placeholder text for InProgressDropdown

Author: robertbrignull

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

@@ -19,6 +19,7 @@ type Props = {
   value: string | undefined;
   options: Array<{ value: string; label: string }>;
   disabled?: boolean;
+  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,21 +2,16 @@ 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}
+      options={[]}
+      disabled={true}
+      disabledPlaceholder="Thinking..."
       onChange={noop}
     />
   );