Disable buttons instead of hiding them

Author: robertbrignull

extensions/ql-vscode/src/view/data-extensions-editor/KindInput.tsx

@@ -13,10 +13,11 @@ type Props = {
   kinds: Array<ModeledMethod["kind"]>;
 
   value: ModeledMethod["kind"] | undefined;
+  disabled?: boolean;
   onChange: (value: ModeledMethod["kind"]) => void;
 };
 
-export const KindInput = ({ kinds, value, onChange }: Props) => {
+export const KindInput = ({ kinds, value, disabled, onChange }: Props) => {
   const handleInput = useCallback(
     (e: InputEvent) => {
       const target = e.target as HTMLSelectElement;
@@ -37,7 +38,7 @@ export const KindInput = ({ kinds, value, onChange }: Props) => {
   }, [value, kinds, onChange]);
 
   return (
-    <Dropdown value={value} onInput={handleInput}>
+    <Dropdown value={value} disabled={disabled} onInput={handleInput}>
       {kinds.map((kind) => (
         <VSCodeOption key={kind} value={kind}>
           {kind}

extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx

@@ -171,52 +171,54 @@ export const MethodRow = ({
         <VSCodeLink onClick={jumpToUsage}>View</VSCodeLink>
       </ApiOrMethodCell>
       <VSCodeDataGridCell gridColumn={2}>
-        {showModelTypeCell && (
-          <Dropdown
-            value={modeledMethod?.type ?? "none"}
-            onInput={handleTypeInput}
-          >
-            <VSCodeOption value="none">Unmodeled</VSCodeOption>
-            <VSCodeOption value="source">Source</VSCodeOption>
-            <VSCodeOption value="sink">Sink</VSCodeOption>
-            <VSCodeOption value="summary">Flow summary</VSCodeOption>
-            <VSCodeOption value="neutral">Neutral</VSCodeOption>
-          </Dropdown>
-        )}
+        <Dropdown
+          value={showModelTypeCell && (modeledMethod?.type ?? "none")}
+          disabled={!showModelTypeCell}
+          onInput={handleTypeInput}
+        >
+          <VSCodeOption value="none">Unmodeled</VSCodeOption>
+          <VSCodeOption value="source">Source</VSCodeOption>
+          <VSCodeOption value="sink">Sink</VSCodeOption>
+          <VSCodeOption value="summary">Flow summary</VSCodeOption>
+          <VSCodeOption value="neutral">Neutral</VSCodeOption>
+        </Dropdown>
       </VSCodeDataGridCell>
       <VSCodeDataGridCell gridColumn={3}>
-        {showInputCell && (
-          <Dropdown value={modeledMethod?.input} onInput={handleInputInput}>
-            <VSCodeOption value="Argument[this]">Argument[this]</VSCodeOption>
-            {argumentsList.map((argument, index) => (
-              <VSCodeOption key={argument} value={`Argument[${index}]`}>
-                Argument[{index}]: {argument}
-              </VSCodeOption>
-            ))}
-          </Dropdown>
-        )}
+        <Dropdown
+          value={showInputCell && modeledMethod?.input}
+          disabled={!showInputCell}
+          onInput={handleInputInput}
+        >
+          <VSCodeOption value="Argument[this]">Argument[this]</VSCodeOption>
+          {argumentsList.map((argument, index) => (
+            <VSCodeOption key={argument} value={`Argument[${index}]`}>
+              Argument[{index}]: {argument}
+            </VSCodeOption>
+          ))}
+        </Dropdown>
       </VSCodeDataGridCell>
       <VSCodeDataGridCell gridColumn={4}>
-        {showOutputCell && (
-          <Dropdown value={modeledMethod?.output} onInput={handleOutputInput}>
-            <VSCodeOption value="ReturnValue">ReturnValue</VSCodeOption>
-            <VSCodeOption value="Argument[this]">Argument[this]</VSCodeOption>
-            {argumentsList.map((argument, index) => (
-              <VSCodeOption key={argument} value={`Argument[${index}]`}>
-                Argument[{index}]: {argument}
-              </VSCodeOption>
-            ))}
-          </Dropdown>
-        )}
+        <Dropdown
+          value={showOutputCell && modeledMethod?.output}
+          disabled={!showOutputCell}
+          onInput={handleOutputInput}
+        >
+          <VSCodeOption value="ReturnValue">ReturnValue</VSCodeOption>
+          <VSCodeOption value="Argument[this]">Argument[this]</VSCodeOption>
+          {argumentsList.map((argument, index) => (
+            <VSCodeOption key={argument} value={`Argument[${index}]`}>
+              Argument[{index}]: {argument}
+            </VSCodeOption>
+          ))}
+        </Dropdown>
       </VSCodeDataGridCell>
       <VSCodeDataGridCell gridColumn={5}>
-        {showKindCell && (
-          <KindInput
-            kinds={predicate?.supportedKinds || []}
-            value={modeledMethod?.kind}
-            onChange={handleKindChange}
-          />
-        )}
+        <KindInput
+          kinds={predicate?.supportedKinds || []}
+          value={showKindCell && modeledMethod?.kind}
+          disabled={!showKindCell}
+          onChange={handleKindChange}
+        />
       </VSCodeDataGridCell>
     </VSCodeDataGridRow>
   );