✨ Update business services table to use ActionsColumn

client/public/locales/en/translation.json

@@ -226,7 +226,8 @@
     "noAnswers": "Are you sure you want to close the assessment? There are no answers to save.",
     "unlinkTicket": "Unlink from Jira",
     "noTagsAvailable": "No tags available",
-    "noAssociatedTags": "This tag category has no associated tags."
+    "noAssociatedTags": "This tag category has no associated tags.",
+    "cannotRemoveBusinessServiceAssociatedWithApplication": "Cannot remove a business service associated with application(s)"
   },
   "proposedActions": {
     "refactor": "Refactor",

client/src/app/components/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>
+  );
+};

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 "@app/components/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)
                           }