Update operator instance routes (#1932)

* Update operator instance routes. * Add info with link for operatorinstance views back to default cluster. * Remaining URLs switched to url helper. * Lint
vmware-tanzu · Aug 11, 2020 · d4632d5 · d4632d5
1 parent 1d3ab1e
commit d4632d5
Show file tree

Hide file tree

Showing 27 changed files with 137 additions and 39 deletions.
diff --git a/dashboard/src/components/AppList/AppList.tsx b/dashboard/src/components/AppList/AppList.tsx
@@ -168,7 +168,14 @@ class AppList extends React.Component<IAppListProps, IAppListState> {
             const csv = this.props.csvs.find(c =>
               c.spec.customresourcedefinitions.owned.some(crd => crd.kind === r.kind),
             );
-            return <CustomResourceListItem key={r.metadata.name} resource={r} csv={csv!} />;
+            return (
+              <CustomResourceListItem
+                cluster={cluster}
+                key={r.metadata.name}
+                resource={r}
+                csv={csv!}
+              />
+            );
           })}
         </CardGrid>
       </div>

diff --git a/dashboard/src/components/AppList/AppListGrid.tsx b/dashboard/src/components/AppList/AppListGrid.tsx
@@ -60,7 +60,14 @@ function AppListGrid(props: IAppListProps) {
           const csv = props.csvs.find(c =>
             c.spec.customresourcedefinitions.owned.some(crd => crd.kind === r.kind),
           );
-          return <CustomResourceListItem key={r.metadata.name} resource={r} csv={csv!} />;
+          return (
+            <CustomResourceListItem
+              cluster={cluster}
+              key={r.metadata.name}
+              resource={r}
+              csv={csv!}
+            />
+          );
         })}
       </>
     </CardGrid>

diff --git a/dashboard/src/components/AppList/CustomResourceListItem.tsx b/dashboard/src/components/AppList/CustomResourceListItem.tsx
@@ -1,19 +1,21 @@
 import * as React from "react";
 
+import * as url from "shared/url";
 import operatorIcon from "../../icons/operator-framework.svg";
 import placeholder from "../../placeholder.png";
 import { IClusterServiceVersion, IResource } from "../../shared/types";
 import UnexpectedErrorPage from "../ErrorAlert/UnexpectedErrorAlert";
 import InfoCard from "../InfoCard";
 
 interface ICustomResourceListItemProps {
+  cluster: string;
   resource: IResource;
   csv: IClusterServiceVersion;
 }
 
 class CustomResourceListItem extends React.Component<ICustomResourceListItemProps> {
   public render() {
-    const { resource, csv } = this.props;
+    const { cluster, resource, csv } = this.props;
     const icon = csv.spec.icon
       ? `data:${csv.spec.icon[0].mediatype};base64,${csv.spec.icon[0].base64data}`
       : placeholder;
@@ -29,7 +31,13 @@ class CustomResourceListItem extends React.Component<ICustomResourceListItemProp
     return (
       <InfoCard
         key={resource.metadata.name}
-        link={`/ns/${resource.metadata.namespace}/operators-instances/${csv.metadata.name}/${crd.name}/${resource.metadata.name}`}
+        link={url.app.operatorInstances.view(
+          cluster,
+          resource.metadata.namespace,
+          csv.metadata.name,
+          crd.name,
+          resource.metadata.name,
+        )}
         title={resource.metadata.name}
         icon={icon}
         info={`${resource.kind} v${csv.spec.version || "-"}`}

diff --git a/dashboard/src/components/AppList/CustomResourceListItem.v2.test.tsx b/dashboard/src/components/AppList/CustomResourceListItem.v2.test.tsx
@@ -5,6 +5,7 @@ import InfoCard from "../InfoCard/InfoCard.v2";
 import CustomResourceListItem from "./CustomResourceListItem.v2";
 
 const defaultProps = {
+  cluster: "default",
   resource: {
     kind: "Something",
     metadata: {
@@ -42,6 +43,7 @@ it("renders an cr item", () => {
     description: crd.description,
     icon: "placeholder.png",
     link: app.operatorInstances.view(
+      defaultProps.cluster,
       resource.metadata.namespace,
       csv.metadata.name,
       crd.name,

diff --git a/dashboard/src/components/AppList/CustomResourceListItem.v2.tsx b/dashboard/src/components/AppList/CustomResourceListItem.v2.tsx
@@ -8,12 +8,13 @@ import InfoCard from "../InfoCard/InfoCard.v2";
 import Alert from "../js/Alert";
 
 interface ICustomResourceListItemProps {
+  cluster: string;
   resource: IResource;
   csv: IClusterServiceVersion;
 }
 
 function CustomResourceListItem(props: ICustomResourceListItemProps) {
-  const { resource, csv } = props;
+  const { cluster, resource, csv } = props;
   const crd = findOwnedKind(csv, resource.kind);
   if (!crd) {
     // Unexpected error, CRD should be present if resource is defined
@@ -28,6 +29,7 @@ function CustomResourceListItem(props: ICustomResourceListItemProps) {
     <InfoCard
       key={resource.metadata.name}
       link={app.operatorInstances.view(
+        cluster,
         resource.metadata.namespace,
         csv.metadata.name,
         crd.name,

diff --git a/dashboard/src/components/AppList/__snapshots__/AppList.test.tsx.snap b/dashboard/src/components/AppList/__snapshots__/AppList.test.tsx.snap
@@ -136,6 +136,7 @@ exports[`when custom resources available matches the snapshot 1`] = `
       <div>
         <CardGrid>
           <CustomResourceListItem
+            cluster="defaultc"
             csv={
               Object {
                 "spec": Object {

diff --git a/dashboard/src/components/Catalog/Catalog.test.tsx b/dashboard/src/components/Catalog/Catalog.test.tsx
@@ -201,6 +201,7 @@ describe("renderization", () => {
         id: "bar",
         name: "bar",
         namespace: "kubeapps",
+        cluster: "default",
         repo: {
           name: "bar",
           namespace: "chart-namespace",
@@ -212,6 +213,7 @@ describe("renderization", () => {
         id: "foo",
         name: "foo",
         namespace: "kubeapps",
+        cluster: "default",
         repo: {
           name: "foo",
           namespace: "chart-namespace",
@@ -247,6 +249,7 @@ describe("renderization", () => {
         id: "foo",
         name: "foo",
         namespace: "kubeapps",
+        cluster: "default",
         repo: {
           name: "foo",
           namespace: "chart-namespace",

diff --git a/dashboard/src/components/Catalog/Catalog.tsx b/dashboard/src/components/Catalog/Catalog.tsx
@@ -199,6 +199,7 @@ class Catalog extends React.Component<ICatalogProps, ICatalogState> {
           description: c.attributes.description,
           repo: c.attributes.repo,
           namespace: this.props.namespace,
+          cluster: this.props.cluster,
         },
       });
     });
@@ -214,6 +215,7 @@ class Catalog extends React.Component<ICatalogProps, ICatalogState> {
             description: crd.description,
             csv: csv.metadata.name,
             namespace: this.props.namespace,
+            cluster: this.props.cluster,
           },
         });
       });

diff --git a/dashboard/src/components/Catalog/Catalog.v2.tsx b/dashboard/src/components/Catalog/Catalog.v2.tsx
@@ -148,7 +148,12 @@ function Catalog(props: ICatalogProps) {
             </Column>
             <Column span={10}>
               <CardGrid>
-                <CatalogItems charts={filteredCharts} csvs={filteredCSVs} namespace={namespace} />
+                <CatalogItems
+                  charts={filteredCharts}
+                  csvs={filteredCSVs}
+                  cluster={cluster}
+                  namespace={namespace}
+                />
               </CardGrid>
             </Column>
           </Row>

diff --git a/dashboard/src/components/Catalog/CatalogItem.test.tsx b/dashboard/src/components/Catalog/CatalogItem.test.tsx
@@ -24,6 +24,7 @@ const defaultItem = {
     name: "repo-name",
     namespace: "repo-namespace",
   } as IRepo,
+  cluster: "default",
   namespace: "repo-namespace",
   icon: "icon.png",
 } as IChartCatalogItem;
@@ -125,7 +126,7 @@ context("when the item is a catalog", () => {
   it("has the proper link", () => {
     const wrapper = shallow(<CatalogItem item={catalogItem} type={"operator"} />);
     expect(wrapper.find(InfoCard).prop("link")).toEqual(
-      `/ns/${defaultItem.namespace}/operators-instances/new/foo-cluster/foo1`,
+      `/c/default/ns/${defaultItem.namespace}/operators-instances/new/foo-cluster/foo1`,
     );
   });
 });
diff --git a/dashboard/src/components/Catalog/CatalogItem.tsx b/dashboard/src/components/Catalog/CatalogItem.tsx
@@ -14,6 +14,7 @@ export interface ICatalogItem {
   name: string;
   version: string;
   description: string;
+  cluster: string;
   namespace: string;
   icon?: string;
 }
@@ -53,12 +54,12 @@ const CatalogItem: React.SFC<ICatalogItemProps> = props => {
 };
 
 const OperatorCatalogItem: React.SFC<IOperatorCatalogItem> = props => {
-  const { icon, name, csv, version, description, namespace, id } = props;
+  const { icon, name, csv, version, description, cluster, namespace, id } = props;
   const iconSrc = icon || placeholder;
   // Cosmetic change, remove the version from the csv name
   const csvName = props.csv.split(".v")[0];
   const tag1 = <span>{csvName}</span>;
-  const link = url.app.operatorInstances.new(namespace, csv, id);
+  const link = url.app.operatorInstances.new(cluster, namespace, csv, id);
   const subIcon = operatorIcon;
   const descriptionC = (
     <div className="ListItem__content__description">{trimDescription(description)}</div>

diff --git a/dashboard/src/components/Catalog/CatalogItem.v2.tsx b/dashboard/src/components/Catalog/CatalogItem.v2.tsx
@@ -8,6 +8,7 @@ export interface ICatalogItem {
   name: string;
   version: string;
   description: string;
+  cluster: string;
   namespace: string;
   icon?: string;
 }

diff --git a/dashboard/src/components/Catalog/CatalogItems.test.tsx b/dashboard/src/components/Catalog/CatalogItems.test.tsx
@@ -47,6 +47,7 @@ const csv = {
 const defaultProps = {
   charts: [],
   csvs: [],
+  cluster: "default",
   namespace: "default",
 };
 const populatedProps = {

diff --git a/dashboard/src/components/Catalog/CatalogItems.tsx b/dashboard/src/components/Catalog/CatalogItems.tsx
@@ -6,10 +6,11 @@ import CatalogItem, { ICatalogItemProps } from "./CatalogItem.v2";
 interface ICatalogItemsProps {
   charts: IChart[];
   csvs: IClusterServiceVersion[];
+  cluster: string;
   namespace: string;
 }
 
-export default function CatalogItems({ charts, csvs, namespace }: ICatalogItemsProps) {
+export default function CatalogItems({ charts, csvs, cluster, namespace }: ICatalogItemsProps) {
   const chartItems: ICatalogItemProps[] = useMemo(
     () =>
       charts.map(c => {
@@ -23,11 +24,12 @@ export default function CatalogItems({ charts, csvs, namespace }: ICatalogItemsP
             version: c.relationships.latestChartVersion.data.app_version,
             description: c.attributes.description,
             repo: c.attributes.repo,
+            cluster,
             namespace,
           },
         };
       }),
-    [charts, namespace],
+    [charts, cluster, namespace],
   );
   const crdItems: ICatalogItemProps[] = useMemo(
     () =>
@@ -45,6 +47,7 @@ export default function CatalogItems({ charts, csvs, namespace }: ICatalogItemsP
                   version: crd.version,
                   description: crd.description,
                   csv: csv.metadata.name,
+                  cluster,
                   namespace,
                 },
               };
@@ -54,7 +57,7 @@ export default function CatalogItems({ charts, csvs, namespace }: ICatalogItemsP
           }
         })
         .flat(),
-    [csvs, namespace],
+    [csvs, cluster, namespace],
   );
 
   const sortedItems = chartItems

diff --git a/dashboard/src/components/Catalog/OperatorCatalogItem.tsx b/dashboard/src/components/Catalog/OperatorCatalogItem.tsx
@@ -6,22 +6,13 @@ import placeholder from "../../placeholder.png";
 import InfoCard from "../InfoCard/InfoCard.v2";
 import { IOperatorCatalogItem } from "./CatalogItem.v2";
 
-export interface ICatalogItem {
-  id: string;
-  name: string;
-  version: string;
-  description: string;
-  namespace: string;
-  icon?: string;
-}
-
 export default function OperatorCatalogItem(props: IOperatorCatalogItem) {
-  const { icon, name, csv, version, description, namespace, id } = props;
+  const { icon, name, csv, version, description, cluster, namespace, id } = props;
   const iconSrc = icon || placeholder;
   // Cosmetic change, remove the version from the csv name
   const csvName = props.csv.split(".")[0];
   const tag1 = <span>{csvName}</span>;
-  const link = app.operatorInstances.new(namespace, csv, id);
+  const link = app.operatorInstances.new(cluster, namespace, csv, id);
   const subIcon = operatorIcon;
   return (
     <InfoCard

diff --git a/dashboard/src/components/Catalog/__snapshots__/Catalog.test.tsx.snap b/dashboard/src/components/Catalog/__snapshots__/Catalog.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`renderization when charts available should render the list of charts 1`
           <CatalogItem
             item={
               Object {
+                "cluster": "default",
                 "description": "",
                 "icon": undefined,
                 "id": "bar",
@@ -48,6 +49,7 @@ exports[`renderization when charts available should render the list of charts 1`
           <CatalogItem
             item={
               Object {
+                "cluster": "default",
                 "description": "",
                 "icon": undefined,
                 "id": "foo",

diff --git a/dashboard/src/components/OperatorInstance/OperatorInstance.test.tsx b/dashboard/src/components/OperatorInstance/OperatorInstance.test.tsx
@@ -1,4 +1,5 @@
 import { IPartialAppViewState } from "components/AppView/AppView";
+import OperatorNotSupported from "components/OperatorList/OperatorsNotSupported";
 import { shallow } from "enzyme";
 import * as React from "react";
 import Modal from "react-modal";
@@ -31,6 +32,12 @@ itBehavesLike("aLoadingComponent", {
   props: { ...defaultProps, isFetching: true },
 });
 
+it("displays an alert if rendered for an additional cluster", () => {
+  const props = { ...defaultProps, cluster: "other-cluster" };
+  const wrapper = shallow(<OperatorInstance {...props} />);
+  expect(wrapper.find(OperatorNotSupported)).toExist();
+});
+
 it("gets a resource when loading the component", () => {
   const getResource = jest.fn();
   shallow(<OperatorInstance {...defaultProps} getResource={getResource} />);

diff --git a/dashboard/src/components/OperatorInstance/OperatorInstance.tsx b/dashboard/src/components/OperatorInstance/OperatorInstance.tsx
@@ -2,6 +2,7 @@ import { RouterAction } from "connected-react-router";
 import * as yaml from "js-yaml";
 import * as React from "react";
 
+import OperatorNotSupported from "components/OperatorList/OperatorsNotSupported";
 import AccessURLTable from "../../containers/AccessURLTableContainer";
 import ApplicationStatus from "../../containers/ApplicationStatusContainer";
 import placeholder from "../../placeholder.png";
@@ -159,12 +160,16 @@ class OperatorInstance extends React.Component<IOperatorInstanceProps, IOperator
       instanceName,
       csvName,
       crdName,
+      cluster,
       namespace,
       push,
     } = this.props;
+    if (cluster !== "default") {
+      return <OperatorNotSupported namespace={namespace} />;
+    }
     const { resources } = this.state;
     const onUpdateClick = () =>
-      push(app.operatorInstances.update(namespace, csvName, crdName, instanceName));
+      push(app.operatorInstances.update(cluster, namespace, csvName, crdName, instanceName));
     const error = errors.fetch || errors.delete || errors.update;
     return (
       <section className="AppView padding-b-big">

diff --git a/dashboard/src/components/OperatorInstanceForm/OperatorInstanceForm.test.tsx b/dashboard/src/components/OperatorInstanceForm/OperatorInstanceForm.test.tsx
@@ -1,3 +1,4 @@
+import OperatorNotSupported from "components/OperatorList/OperatorsNotSupported";
 import { mount, shallow } from "enzyme";
 import * as React from "react";
 import OperatorInstanceForm from ".";
@@ -9,6 +10,7 @@ const defaultProps: IOperatorInstanceFormProps = {
   csvName: "foo",
   crdName: "foo-cluster",
   isFetching: false,
+  cluster: "default",
   namespace: "kubeapps",
   getCSV: jest.fn(),
   createResource: jest.fn(),
@@ -35,6 +37,12 @@ const defaultCSV = {
   },
 } as any;
 
+it("displays an alert if rendered for an additional cluster", () => {
+  const props = { ...defaultProps, cluster: "other-cluster" };
+  const wrapper = shallow(<OperatorInstanceForm {...props} />);
+  expect(wrapper.find(OperatorNotSupported)).toExist();
+});
+
 it("retrieves CSV when mounted", () => {
   const getCSV = jest.fn();
   shallow(<OperatorInstanceForm {...defaultProps} getCSV={getCSV} />);