Handle when the number of modeled methods decreases

Author: robertbrignull

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, useEffect, useMemo, useState } from "react";
 import { Method } from "../../model-editor/method";
 import { ModeledMethod } from "../../model-editor/modeled-method";
 import {
@@ -60,6 +60,14 @@ export const MultipleModeledMethodsPanel = ({
 }: MultipleModeledMethodsPanelProps) => {
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
+  useEffect(() => {
+    if (selectedIndex >= modeledMethods.length) {
+      setSelectedIndex(
+        modeledMethods.length > 0 ? modeledMethods.length - 1 : 0,
+      );
+    }
+  }, [modeledMethods.length, selectedIndex]);
+
   const handlePreviousClick = useCallback(() => {
     setSelectedIndex((previousIndex) => previousIndex - 1);
   }, []);

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

@@ -264,6 +264,33 @@ describe(MultipleModeledMethodsPanel.name, () => {
       ).toHaveValue("source");
     });
 
+    it("correctly updates selected pagination index when the number of models decreases", async () => {
+      const { rerender } = render({
+        method,
+        modeledMethods,
+        isModelingInProgress,
+        onChange,
+      });
+
+      await userEvent.click(screen.getByLabelText("Next modeling"));
+
+      rerender(
+        <MultipleModeledMethodsPanel
+          method={method}
+          modeledMethods={[modeledMethods[1]]}
+          isModelingInProgress={isModelingInProgress}
+          onChange={onChange}
+        />,
+      );
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+      expect(
+        screen.getByRole("combobox", {
+          name: "Model type",
+        }),
+      ).toHaveValue("source");
+    });
+
     it("does not show errors", () => {
       render({
         method,