fix(ui): only fetch scripts if they have not been fetched before (#2210)

Author: Caleb Ellis

ui/src/app/machines/views/MachineList/MachineListHeader/ActionFormWrapper/CommissionForm/CommissionForm.tsx

@@ -95,8 +95,12 @@ export const CommissionForm = ({ setSelectedAction }: Props): JSX.Element => {
   );
 
   useEffect(() => {
-    dispatch(scriptActions.fetch());
-  }, [dispatch]);
+    if (!scriptsLoaded) {
+      // scripts are fetched via http, so we explicitly check if they're already
+      // loaded here.
+      dispatch(scriptActions.fetch());
+    }
+  }, [dispatch, scriptsLoaded]);
 
   return (
     <ActionForm

ui/src/app/machines/views/MachineList/MachineListHeader/ActionFormWrapper/TestForm/TestForm.js

@@ -54,8 +54,12 @@ export const TestForm = ({ setSelectedAction }) => {
   }, {});
 
   useEffect(() => {
-    dispatch(scriptActions.fetch());
-  }, [dispatch]);
+    if (!scriptsLoaded) {
+      // scripts are fetched via http, so we explicitly check if they're already
+      // loaded here.
+      dispatch(scriptActions.fetch());
+    }
+  }, [dispatch, scriptsLoaded]);
 
   return (
     <ActionForm

ui/src/app/machines/views/MachineList/MachineListTable/MachineListTable.js

@@ -21,7 +21,6 @@ import ZoneColumn from "./ZoneColumn";
 import {
   general as generalActions,
   machine as machineActions,
-  scripts as scriptActions,
 } from "app/base/actions";
 import TableHeader from "app/base/components/TableHeader";
 import { nodeStatus } from "app/base/enum";
@@ -497,7 +496,6 @@ export const MachineListTable = ({
     dispatch(generalActions.fetchPowerTypes());
     dispatch(generalActions.fetchVersion());
     dispatch(resourcePoolActions.fetch());
-    dispatch(scriptActions.fetch());
     dispatch(tagActions.fetch());
     dispatch(userActions.fetch());
     dispatch(zoneActions.fetch());

ui/src/app/settings/views/Scripts/ScriptsList/ScriptsList.test.tsx

@@ -68,8 +68,9 @@ describe("ScriptsList", () => {
     });
   });
 
-  it("dispatches action to fetch scripts load", () => {
+  it("fetches scripts if they haven't been loaded yet", () => {
     const state = { ...initialState };
+    state.scripts.loaded = false;
     const store = mockStore(state);
 
     mount(
@@ -80,11 +81,27 @@ describe("ScriptsList", () => {
       </Provider>
     );
 
-    expect(store.getActions()).toEqual([
-      {
-        type: "FETCH_SCRIPTS",
-      },
-    ]);
+    expect(
+      store.getActions().some((action) => action.type === "FETCH_SCRIPTS")
+    ).toBe(true);
+  });
+
+  it("does not fetch scripts if they've already been loaded", () => {
+    const state = { ...initialState };
+    state.scripts.loaded = true;
+    const store = mockStore(state);
+
+    mount(
+      <Provider store={store}>
+        <MemoryRouter initialEntries={[{ pathname: "/" }]}>
+          <ScriptsList />
+        </MemoryRouter>
+      </Provider>
+    );
+
+    expect(
+      store.getActions().some((action) => action.type === "FETCH_SCRIPTS")
+    ).toBe(false);
   });
 
   it("Displays commissioning scripts by default", () => {
@@ -194,7 +211,9 @@ describe("ScriptsList", () => {
     wrapper.find("TableRow").at(1).find("Button").at(1).simulate("click");
     // Click on the delete confirm button
     wrapper.find("TableRow").at(1).find("Button").at(3).simulate("click");
-    expect(store.getActions()[1]).toEqual({
+    expect(
+      store.getActions().find((action) => action.type === "DELETE_SCRIPT")
+    ).toEqual({
       type: "DELETE_SCRIPT",
       payload: {
         id: 1,

ui/src/app/settings/views/Scripts/ScriptsList/ScriptsList.tsx

@@ -171,8 +171,12 @@ const ScriptsList = ({ type = "commissioning" }: Props): JSX.Element => {
   };
 
   useEffect(() => {
-    dispatch(scriptActions.fetch());
-  }, [dispatch, type]);
+    if (!scriptsLoaded) {
+      // scripts are fetched via http, so we explicitly check if they're already
+      // loaded here.
+      dispatch(scriptActions.fetch());
+    }
+  }, [dispatch, scriptsLoaded, type]);
 
   return (
     <SettingsTable