✨ Update business services table to use ActionsColumn (#1921)

Related to #1318 ![image](https://github.com/konveyor/tackle2-ui/assets/60384172/c8a51e2e-171d-4637-865b-2f784b213f89) OR ![image](https://github.com/konveyor/tackle2-ui/assets/60384172/cff3f0bf-99dc-41f2-b578-6e119e3b4d9c) --------- Signed-off-by: Maayan Hadasi <[email protected]> Signed-off-by: Scott Dickerson <[email protected]> Co-authored-by: Scott Dickerson <[email protected]>
konveyor · Jun 20, 2024 · ffe06ee · ffe06ee
1 parent 349911b
commit ffe06ee
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 11 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -227,6 +227,7 @@
     "unlinkTicket": "Unlink from Jira",
     "noTagsAvailable": "No tags available",
     "noAssociatedTags": "This tag category has no associated tags.",
+    "cannotRemoveBusinessServiceAssociatedWithApplication": "Cannot remove a business service associated with application(s)",
     "updateFailed": "Update failed.",
     "updateRequestSubmitted": "Update request submitted.",
     "cancelationFailed": "Cancelation failed.",

diff --git a/client/src/app/pages/controls/ControlTableActionButtons.tsx b/client/src/app/pages/controls/ControlTableActionButtons.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { controlsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
+import { ActionsColumn, Td } from "@patternfly/react-table";
+import { Button, Tooltip } from "@patternfly/react-core";
+import { PencilAltIcon } from "@patternfly/react-icons";
+
+export interface ControlTableActionButtonsProps {
+  isDeleteEnabled?: boolean;
+  deleteTooltipMessage?: string;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export const ControlTableActionButtons: React.FC<
+  ControlTableActionButtonsProps
+> = ({
+  isDeleteEnabled = false,
+  deleteTooltipMessage = "",
+  onEdit,
+  onDelete,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <RBAC allowedPermissions={controlsWriteScopes} rbacType={RBAC_TYPE.Scope}>
+      <Td isActionCell id="pencil-action">
+        <Tooltip content={t("actions.edit")}>
+          <Button variant="plain" icon={<PencilAltIcon />} onClick={onEdit} />
+        </Tooltip>
+      </Td>
+      <Td isActionCell id="row-actions">
+        <ActionsColumn
+          items={[
+            {
+              isAriaDisabled: isDeleteEnabled,
+              tooltipProps: {
+                content: isDeleteEnabled ? deleteTooltipMessage : "",
+              },
+              isDanger: isDeleteEnabled == false,
+              title: t("actions.delete"),
+              onClick: onDelete,
+            },
+          ]}
+        />
+      </Td>
+    </RBAC>
+  );
+};
diff --git a/client/src/app/pages/controls/business-services/business-services.tsx b/client/src/app/pages/controls/business-services/business-services.tsx
@@ -26,7 +26,6 @@ import {
   useFetchBusinessServices,
 } from "@app/queries/businessservices";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import { AppTableActionButtons } from "@app/components/AppTableActionButtons";
 import { ConditionalRender } from "@app/components/ConditionalRender";
 import { AppPlaceholder } from "@app/components/AppPlaceholder";
 import { ConfirmDialog } from "@app/components/ConfirmDialog";
@@ -38,6 +37,8 @@ import {
   TableRowContentWithControls,
 } from "@app/components/TableControls";
 import { CubesIcon } from "@patternfly/react-icons";
+import { controlsWriteScopes, RBAC, RBAC_TYPE } from "@app/rbac";
+import { ControlTableActionButtons } from "../ControlTableActionButtons";
 
 export const BusinessServices: React.FC = () => {
   const { t } = useTranslation();
@@ -184,15 +185,20 @@ export const BusinessServices: React.FC = () => {
               <FilterToolbar {...filterToolbarProps} />
               <ToolbarGroup variant="button-group">
                 <ToolbarItem>
-                  <Button
-                    type="button"
-                    id="create-business-service"
-                    aria-label="Create new business service"
-                    variant={ButtonVariant.primary}
-                    onClick={() => setCreateUpdateModalState("create")}
+                  <RBAC
+                    allowedPermissions={controlsWriteScopes}
+                    rbacType={RBAC_TYPE.Scope}
                   >
-                    {t("actions.createNew")}
-                  </Button>
+                    <Button
+                      type="button"
+                      id="create-business-service"
+                      aria-label="Create new business service"
+                      variant={ButtonVariant.primary}
+                      onClick={() => setCreateUpdateModalState("create")}
+                    >
+                      {t("actions.createNew")}
+                    </Button>
+                  </RBAC>
                 </ToolbarItem>
               </ToolbarGroup>
               <ToolbarItem {...paginationToolbarItemProps}>
@@ -263,9 +269,11 @@ export const BusinessServices: React.FC = () => {
                         <Td width={10} {...getTdProps({ columnKey: "owner" })}>
                           {businessService.owner?.name}
                         </Td>
-                        <AppTableActionButtons
+                        <ControlTableActionButtons
                           isDeleteEnabled={isAssignedToApplication}
-                          tooltipMessage="Cannot remove a business service associated with application(s)"
+                          deleteTooltipMessage={t(
+                            "message.cannotRemoveBusinessServiceAssociatedWithApplication"
+                          )}
                           onEdit={() =>
                             setCreateUpdateModalState(businessService)
                           }