Only disable add button when there are no models yet

This will change the add button in the method modeling panel to only be
disabled if there is exactly 1 unmodeled method and there are no
unmodeled methods. This should be more intuitive for users since they
are able to see in 1 screen that there is an unmodeled method.

Author: koesie10

extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { Method } from "../../model-editor/method";
 import { ModeledMethod } from "../../model-editor/modeled-method";
 import { styled } from "styled-components";
@@ -88,13 +88,6 @@ export const MultipleModeledMethodsPanel = ({
     setSelectedIndex(newSelectedIndex);
   }, [onChange, modeledMethods, selectedIndex]);
 
-  const anyUnmodeled = useMemo(
-    () =>
-      modeledMethods.length === 0 ||
-      modeledMethods.some((m) => m.type === "none"),
-    [modeledMethods],
-  );
-
   const handleChange = useCallback(
     (modeledMethod: ModeledMethod) => {
       if (modeledMethods.length > 0) {
@@ -163,7 +156,10 @@ export const MultipleModeledMethodsPanel = ({
             appearance="icon"
             aria-label="Add modeling"
             onClick={handleAddClick}
-            disabled={anyUnmodeled}
+            disabled={
+              modeledMethods.length === 0 ||
+              (modeledMethods.length === 1 && modeledMethods[0].type === "none")
+            }
           >
             <Codicon name="add" />
           </VSCodeButton>

extensions/ql-vscode/src/view/method-modeling/__tests__/MultipleModeledMethodsPanel.spec.tsx

@@ -485,7 +485,7 @@ describe(MultipleModeledMethodsPanel.name, () => {
       }),
     ];
 
-    it("cannot add modeling", () => {
+    it("can add modeling", () => {
       render({
         method,
         modeledMethods,
@@ -494,7 +494,7 @@ describe(MultipleModeledMethodsPanel.name, () => {
 
       expect(
         screen.getByLabelText("Add modeling").getElementsByTagName("input")[0],
-      ).toBeDisabled();
+      ).toBeEnabled();
     });
 
     it("can delete first modeling", async () => {