Add new property to show edit button for cluster table dependent on p…

…ermission

Signed-off-by: Mirjam Aulbach <[email protected]>

coral/src/app/features/configuration/clusters/Clusters.tsx

@@ -212,6 +212,7 @@ function Clusters() {
                 ? handleShowDeleteModal
                 : undefined
             }
+            showEdit={permissions.addDeleteEditClusters}
             ariaLabel={`Cluster overview, page ${clusters?.currentPage ?? 0} of ${
               clusters?.totalPages ?? 0
             }`}

coral/src/app/features/configuration/clusters/components/ClustersTable.test.tsx

@@ -264,20 +264,28 @@ describe("ClusterTable.tsx", () => {
   describe("shows all clusters as a table (user with permissions.addDeleteEditClusters)", () => {
     const tableLabel = "Cluster overview";
     beforeAll(() => {
+      Object.defineProperty(window, "location", {
+        value: {
+          assign: jest.fn(),
+        },
+        writable: true,
+      });
+
       customRender(
         <ClustersTable
           clusters={testCluster}
           ariaLabel={tableLabel}
           handleShowConnectModal={mockHandleShowConnectModal}
           handleShowDeleteModal={mockHandleShowDeleteModal}
+          showEdit={true}
         />,
         { queryClient: true }
       );
     });
 
     afterAll(cleanup);
 
-    it("renders a table with an acessible name", async () => {
+    it("renders a table with an accessible name", async () => {
       const table = screen.getByRole("table", {
         name: tableLabel,
       });
@@ -490,6 +498,30 @@ describe("ClusterTable.tsx", () => {
           },
         });
       });
+
+      it(`displays an edit button that redirects to Klaw for ${cluster.clusterName}`, async () => {
+        const table = screen.getByRole("table", {
+          name: tableLabel,
+        });
+        const row = within(table).getByRole("row", {
+          name: new RegExp(`${cluster.clusterName}`),
+        });
+        const menuButton = within(row).getByRole("button", {
+          name: "Context menu",
+        });
+
+        await userEvent.click(menuButton);
+
+        const editButton = screen.getByRole("menuitem", {
+          name: "Edit",
+        });
+
+        await userEvent.click(editButton);
+
+        expect(window.location.assign).toHaveBeenCalledWith(
+          "http://localhost/modifyCluster?clusterId=1&clusterType=kafka"
+        );
+      });
     });
   });
 });

coral/src/app/features/configuration/clusters/components/ClustersTable.tsx

@@ -13,16 +13,20 @@ import { ClusterDetails } from "src/domain/cluster";
 import { clusterTypeToString } from "src/services/formatter/cluster-type-formatter";
 import { kafkaFlavorToString } from "src/services/formatter/kafka-flavor-formatter";
 import deleteIcon from "@aivenio/aquarium/dist/src/icons/delete";
+import editIcon from "@aivenio/aquarium/dist/src/icons/edit";
+import camelCase from "lodash/camelCase";
 
 type ClustersTableProps = {
   clusters: ClusterDetails[];
   ariaLabel: string;
   handleShowConnectModal?: ({ show, data }: ClusterConnectModalState) => void;
   handleShowDeleteModal?: ({ show, data }: ClusterDeleteModalState) => void;
+  showEdit?: boolean;
 };
 
 interface ClustersTableRow {
   id: ClusterDetails["clusterId"];
+  type: ClusterDetails["clusterType"];
   clusterName: ClusterDetails["clusterName"];
   bootstrapServers: ClusterDetails["bootstrapServers"];
   protocol: ClusterDetails["protocol"];
@@ -37,11 +41,18 @@ interface ClustersTableRow {
 }
 
 const ClustersTable = (props: ClustersTableProps) => {
-  const { clusters, ariaLabel, handleShowConnectModal, handleShowDeleteModal } =
-    props;
+  const {
+    clusters,
+    ariaLabel,
+    showEdit,
+    handleShowConnectModal,
+    handleShowDeleteModal,
+  } = props;
 
   const isAdminUser =
-    handleShowConnectModal !== undefined && handleShowDeleteModal !== undefined;
+    handleShowConnectModal !== undefined &&
+    handleShowDeleteModal !== undefined &&
+    showEdit === true;
 
   const columns: Array<DataTableColumn<ClustersTableRow>> = [
     {
@@ -129,6 +140,7 @@ const ClustersTable = (props: ClustersTableProps) => {
   const rows: ClustersTableRow[] = clusters.map((cluster) => {
     return {
       id: cluster.clusterId,
+      type: cluster.clusterType,
       clusterName: cluster.clusterName,
       bootstrapServers: cluster.bootstrapServers,
       protocol: cluster.protocol,
@@ -155,6 +167,9 @@ const ClustersTable = (props: ClustersTableProps) => {
       noWrap={false}
       menu={
         <DropdownMenu.Items>
+          <DropdownMenu.Item icon={editIcon} key="edit">
+            Edit
+          </DropdownMenu.Item>
           <DropdownMenu.Item icon={deleteIcon} key="delete">
             Remove
           </DropdownMenu.Item>
@@ -171,6 +186,13 @@ const ClustersTable = (props: ClustersTableProps) => {
             },
           });
         }
+        if (action === "edit") {
+          const { id, type } = data;
+          const typeForUrl = camelCase(type).toLowerCase();
+          window.location.assign(
+            `${window.origin}/modifyCluster?clusterId=${id}&clusterType=${typeForUrl}`
+          );
+        }
       }}
     />
   ) : (