Convert final OperatorInstanceUpdateForm.

Signed-off-by: Michael Nelson <[email protected]>

Author: absoludity

dashboard/src/components/OperatorInstance/OperatorInstance.test.tsx

@@ -15,21 +15,13 @@ import OperatorHeader from "components/OperatorView/OperatorHeader";
 import ApplicationStatusContainer from "containers/ApplicationStatusContainer";
 import { act } from "react-dom/test-utils";
 import * as ReactRedux from "react-redux";
-import { defaultStore, getStore, initialState, mountWrapper } from "shared/specs/mountWrapper";
+import { getStore, initialState, mountWrapper } from "shared/specs/mountWrapper";
 import { FetchError, IStoreState } from "shared/types";
 import OperatorInstance from "./OperatorInstance";
 import { IOperatorsState } from "reducers/operators";
 import { IClusterState } from "reducers/cluster";
 import { MemoryRouter, Route } from "react-router-dom";
 
-const defaultProps = {
-  csvName: "foo",
-  crdName: "foo.kubeapps.com",
-  cluster: initialState.config.kubeappsCluster,
-  namespace: "kubeapps",
-  instanceName: "bar",
-};
-
 const defaultCSV = {
   metadata: { name: "foo" },
   spec: {
@@ -117,7 +109,7 @@ it("renders a fetch error", () => {
         errors: { ...initialState.operators.errors, resource: { fetch: new FetchError("Boom!") } },
       },
     } as Partial<IStoreState>),
-    <OperatorInstance {...defaultProps} />,
+    <OperatorInstance />,
   );
   expect(wrapper.find(Alert)).toIncludeText("Boom!");
   expect(wrapper.find(OperatorHeader)).not.toExist();
@@ -131,7 +123,7 @@ it("renders an update error", () => {
         errors: { resource: { update: new Error("Boom!") } },
       },
     } as Partial<IStoreState>),
-    <OperatorInstance {...defaultProps} />,
+    <OperatorInstance />,
   );
   expect(wrapper.find(Alert)).toIncludeText("Boom!");
 });
@@ -144,7 +136,7 @@ it("renders an delete error", () => {
         errors: { resource: { update: new Error("Boom!") } },
       },
     } as Partial<IStoreState>),
-    <OperatorInstance {...defaultProps} />,
+    <OperatorInstance />,
   );
   expect(wrapper.find(Alert)).toIncludeText("Boom!");
 });
@@ -175,32 +167,28 @@ it("retrieves CSV and resource when mounted", () => {
       </Route>
     </MemoryRouter>,
   );
-  expect(getCSV).toHaveBeenCalledWith(
-    defaultProps.cluster,
-    defaultProps.namespace,
-    defaultProps.csvName,
-  );
+  expect(getCSV).toHaveBeenCalledWith("default-cluster", "kubeapps", "foo");
   expect(getResource).toHaveBeenCalledWith(
-    defaultProps.cluster,
-    defaultProps.namespace,
-    defaultProps.csvName,
-    defaultProps.crdName,
-    defaultProps.instanceName,
+    "default-cluster",
+    "kubeapps",
+    "foo",
+    "foo.kubeapps.com",
+    "bar",
   );
 });
 
 it("renders a loading wrapper", () => {
   const wrapper = mountWrapper(
     getStore({ operators: { isFetching: true } } as Partial<IStoreState>),
-    <OperatorInstance {...defaultProps} />,
+    <OperatorInstance />,
   );
   expect(wrapper.find(LoadingWrapper)).toExist();
 });
 
 it("renders all the subcomponents", () => {
   const wrapper = mountWrapper(
     getStore({ operators: { csv: defaultCSV, resource } } as Partial<IStoreState>),
-    <OperatorInstance {...defaultProps} />,
+    <OperatorInstance />,
   );
   expect(wrapper.find(ApplicationStatusContainer)).toExist();
   expect(wrapper.find(AccessURLTable)).toExist();
@@ -215,7 +203,7 @@ it("skips AppNotes and AppValues if the resource doesn't have spec or status", (
     getStore({
       operators: { csv: defaultCSV, resource: { ...resource, spec: undefined, status: undefined } },
     } as Partial<IStoreState>),
-    <OperatorInstance {...defaultProps} />,
+    <OperatorInstance />,
   );
   expect(wrapper.find(AppNotes)).not.toExist();
   expect(wrapper.find(AppValues)).not.toExist();
@@ -260,12 +248,7 @@ it("deletes the resource", async () => {
   await act(async () => {
     await (dialog.prop("onConfirm") as any)();
   });
-  expect(deleteResource).toHaveBeenCalledWith(
-    defaultProps.cluster,
-    defaultProps.namespace,
-    "foo",
-    resource,
-  );
+  expect(deleteResource).toHaveBeenCalledWith("default-cluster", "kubeapps", "foo", resource);
 });
 
 it("updates the state with the CRD resources", () => {

dashboard/src/components/OperatorInstanceUpdateForm/OperatorInstanceUpdateForm.test.tsx

@@ -8,17 +8,10 @@ import OperatorHeader from "components/OperatorView/OperatorHeader";
 import * as ReactRedux from "react-redux";
 import { defaultStore, getStore, initialState, mountWrapper } from "shared/specs/mountWrapper";
 import { FetchError, IStoreState } from "shared/types";
-import OperatorInstanceUpdateForm, {
-  IOperatorInstanceUpgradeFormProps,
-} from "./OperatorInstanceUpdateForm";
-
-const defaultProps: IOperatorInstanceUpgradeFormProps = {
-  csvName: "foo",
-  crdName: "foo-cluster",
-  cluster: initialState.config.kubeappsCluster,
-  namespace: "kubeapps",
-  resourceName: "my-foo",
-};
+import OperatorInstanceUpdateForm from "./OperatorInstanceUpdateForm";
+import { MemoryRouter, Route } from "react-router-dom";
+import { IOperatorsState } from "reducers/operators";
+import { IClusterState } from "reducers/cluster";
 
 const defaultResource = {
   kind: "Foo",
@@ -29,7 +22,7 @@ const defaultResource = {
 } as any;
 
 const defaultCRD = {
-  name: defaultProps.crdName,
+  name: "foo-cluster",
   kind: "Foo",
   description: "useful description",
 } as any;
@@ -102,21 +95,44 @@ afterEach(() => {
 
 it("gets resource and CSV", () => {
   const getResource = jest.fn();
+  const store = getStore({
+    operators: {
+      resource: defaultResource,
+      csv: defaultCSV,
+    } as Partial<IOperatorsState>,
+    clusters: {
+      currentCluster: "default-cluster",
+      clusters: {
+        "default-cluster": {
+          currentNamespace: "kubeapps",
+        } as Partial<IClusterState>,
+      },
+    },
+  } as Partial<IStoreState>);
   const getCSV = jest.fn();
   actions.operators.getResource = getResource;
   actions.operators.getCSV = getCSV;
-  mountWrapper(defaultStore, <OperatorInstanceUpdateForm {...defaultProps} />);
-  expect(getCSV).toHaveBeenCalledWith(
-    defaultProps.cluster,
-    defaultProps.namespace,
-    defaultProps.csvName,
+  mountWrapper(
+    store,
+    <MemoryRouter
+      initialEntries={[
+        "/c/default/ns/default/operators-instances/new/foo/foo-cluster/my-foo/update",
+      ]}
+    >
+      <Route
+        path={"/c/:cluster/ns/:namespace/operators-instances/new/:csv/:crd/:instanceName/update"}
+      >
+        <OperatorInstanceUpdateForm />
+      </Route>
+    </MemoryRouter>,
   );
+  expect(getCSV).toHaveBeenCalledWith("default-cluster", "kubeapps", "foo");
   expect(getResource).toHaveBeenCalledWith(
-    defaultProps.cluster,
-    defaultProps.namespace,
-    defaultProps.csvName,
-    defaultProps.crdName,
-    defaultProps.resourceName,
+    "default-cluster",
+    "kubeapps",
+    "foo",
+    "foo-cluster",
+    "my-foo",
   );
 });
 
@@ -128,7 +144,17 @@ it("set default and deployed values", () => {
         csv: defaultCSV,
       },
     } as Partial<IStoreState>),
-    <OperatorInstanceUpdateForm {...defaultProps} />,
+    <MemoryRouter
+      initialEntries={[
+        "/c/default/ns/default/operators-instances/new/foo/foo-cluster/my-foo/update",
+      ]}
+    >
+      <Route
+        path={"/c/:cluster/ns/:namespace/operators-instances/new/:csv/:crd/:instanceName/update"}
+      >
+        <OperatorInstanceUpdateForm />
+      </Route>
+    </MemoryRouter>,
   );
   expect(wrapper.find(OperatorInstanceFormBody).props()).toMatchObject({
     defaultValues: 'kind: "Foo"\napiVersion: "v1"\n',
@@ -137,7 +163,20 @@ it("set default and deployed values", () => {
 });
 
 it("renders an error if the resource is not populated", () => {
-  const wrapper = mountWrapper(defaultStore, <OperatorInstanceUpdateForm {...defaultProps} />);
+  const wrapper = mountWrapper(
+    defaultStore,
+    <MemoryRouter
+      initialEntries={[
+        "/c/default/ns/default/operators-instances/new/foo/foo-cluster/my-foo/update",
+      ]}
+    >
+      <Route
+        path={"/c/:cluster/ns/:namespace/operators-instances/new/:csv/:crd/:instanceName/update"}
+      >
+        <OperatorInstanceUpdateForm />
+      </Route>
+    </MemoryRouter>,
+  );
   expect(wrapper.find(Alert)).toIncludeText("Resource my-foo not found");
 });
 
@@ -153,7 +192,7 @@ it("renders only an error if the resource is not found", () => {
         },
       },
     } as Partial<IStoreState>),
-    <OperatorInstanceUpdateForm {...defaultProps} />,
+    <OperatorInstanceUpdateForm />,
   );
   expect(wrapper.find(Alert)).toIncludeText("not found");
   expect(wrapper.find(OperatorHeader)).not.toExist();
@@ -167,20 +206,38 @@ it("should submit the form", () => {
       operators: {
         resource: defaultResource,
         csv: defaultCSV,
+      } as Partial<IOperatorsState>,
+      clusters: {
+        currentCluster: "default-cluster",
+        clusters: {
+          "default-cluster": {
+            currentNamespace: "kubeapps",
+          } as Partial<IClusterState>,
+        },
       },
     } as Partial<IStoreState>),
-    <OperatorInstanceUpdateForm {...defaultProps} />,
+    <MemoryRouter
+      initialEntries={[
+        "/c/default/ns/default/operators-instances/new/foo/foo-cluster/my-foo/update",
+      ]}
+    >
+      <Route
+        path={"/c/:cluster/ns/:namespace/operators-instances/new/:csv/:crd/:instanceName/update"}
+      >
+        <OperatorInstanceUpdateForm />
+      </Route>
+    </MemoryRouter>,
   );
 
   const form = wrapper.find("form");
   form.simulate("submit", { preventDefault: jest.fn() });
 
   expect(updateResource).toHaveBeenCalledWith(
-    defaultProps.cluster,
-    defaultProps.namespace,
-    defaultResource.apiVersion,
-    defaultProps.crdName,
-    defaultProps.resourceName,
-    defaultResource,
+    "default-cluster",
+    "kubeapps",
+    "v1",
+    "foo-cluster",
+    "my-foo",
+    { apiVersion: "v1", kind: "Foo", metadata: { name: "my-foo" } },
   );
 });

dashboard/src/components/OperatorInstanceUpdateForm/OperatorInstanceUpdateForm.tsx

@@ -18,38 +18,25 @@ import { IClusterServiceVersionCRD, IResource, IStoreState } from "shared/types"
 import * as url from "shared/url";
 import { parseToString } from "shared/yamlUtils";
 import OperatorInstanceFormBody from "../OperatorInstanceFormBody/OperatorInstanceFormBody";
+import { useParams } from "react-router-dom";
 
-export interface IOperatorInstanceUpgradeFormProps {
-  csvName: string;
-  crdName: string;
-  cluster: string;
-  namespace: string;
-  resourceName: string;
-}
-
-function OperatorInstanceUpdateForm({
-  csvName,
-  crdName,
-  cluster,
-  namespace,
-  resourceName,
-}: IOperatorInstanceUpgradeFormProps) {
+function OperatorInstanceUpdateForm() {
   const dispatch: ThunkDispatch<IStoreState, null, Action> = useDispatch();
   const [defaultValues, setDefaultValues] = useState("");
   const [currentValues, setCurrentValues] = useState("");
   const [crd, setCRD] = useState(undefined as IClusterServiceVersionCRD | undefined);
   const [icon, setIcon] = useState(placeholder);
 
-  useEffect(() => {
-    // Clean up component state
-    setDefaultValues("");
-    setCurrentValues("");
-    setCRD(undefined);
-    setIcon(placeholder);
-    dispatch(actions.operators.getResource(cluster, namespace, csvName, crdName, resourceName));
-    dispatch(actions.operators.getCSV(cluster, namespace, csvName));
-  }, [dispatch, cluster, namespace, csvName, crdName, resourceName]);
-
+  type IOperatorInstanceUpdateFormParams = {
+    csv: string;
+    crd: string;
+    instanceName: string;
+  };
+  const {
+    csv: csvName,
+    crd: crdName,
+    instanceName: resourceName,
+  } = useParams<IOperatorInstanceUpdateFormParams>();
   const {
     operators: {
       isFetching,
@@ -59,7 +46,19 @@ function OperatorInstanceUpdateForm({
         resource: { fetch: fetchError, update: updateError },
       },
     },
+    clusters: { currentCluster: cluster, clusters },
   } = useSelector((state: IStoreState) => state);
+  const namespace = clusters[cluster].currentNamespace;
+
+  useEffect(() => {
+    // Clean up component state
+    setDefaultValues("");
+    setCurrentValues("");
+    setCRD(undefined);
+    setIcon(placeholder);
+    dispatch(actions.operators.getResource(cluster, namespace, csvName, crdName, resourceName));
+    dispatch(actions.operators.getCSV(cluster, namespace, csvName));
+  }, [dispatch, cluster, namespace, csvName, crdName, resourceName]);
 
   useEffect(() => {
     if (resource) {