FE: RBAC: ACL Delete Button is enabled despite no permissions (#1176)

Author: Nilumilak

frontend/src/components/ACLPage/List/List.styled.ts

@@ -7,9 +7,7 @@ export const EnumCell = styled.div`
 `;
 
 export const DeleteCell = styled.div`
-  svg {
-    cursor: pointer;
-  }
+  display: flex;
 `;
 
 export const Chip = styled.div<{

frontend/src/components/ACLPage/List/List.tsx

@@ -25,6 +25,7 @@ import Search from 'components/common/Search/Search';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import BreakableTextCell from 'components/common/NewTable/BreakableTextCell';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
+import { ActionPermissionWrapper } from 'components/common/ActionComponent';
 
 import * as S from './List.styled';
 
@@ -163,13 +164,23 @@ const ACList: React.FC = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ row }) => {
           return (
-            <S.DeleteCell onClick={() => handleDeleteClick(row.original)}>
-              <DeleteIcon
-                fill={
-                  rowId === row.id ? theme.acl.table.deleteIcon : 'transparent'
-                }
-              />
-            </S.DeleteCell>
+            <ActionPermissionWrapper
+              onAction={() => handleDeleteClick(row.original)}
+              permission={{
+                resource: ResourceType.ACL,
+                action: Action.EDIT,
+              }}
+            >
+              <S.DeleteCell>
+                <DeleteIcon
+                  fill={
+                    rowId === row.id
+                      ? theme.acl.table.deleteIcon
+                      : 'transparent'
+                  }
+                />
+              </S.DeleteCell>
+            </ActionPermissionWrapper>
           );
         },
         size: 76,

frontend/src/components/common/ActionComponent/ActionComponent.styled.ts

@@ -5,6 +5,7 @@ export const Wrapper = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  width: min-content;
 `;
 
 export const MessageTooltip = styled.div`

frontend/src/components/common/ActionComponent/ActionPermissionWrapper/ActionPermissionWrapper.tsx

@@ -0,0 +1,57 @@
+import React, { ReactElement } from 'react';
+import {
+  ActionComponentProps,
+  getDefaultActionMessage,
+} from 'components/common/ActionComponent/ActionComponent';
+import { usePermission } from 'lib/hooks/usePermission';
+import { useActionTooltip } from 'lib/hooks/useActionTooltip';
+import * as S from 'components/common/ActionComponent/ActionComponent.styled';
+
+interface Props extends ActionComponentProps {
+  children: ReactElement;
+  onAction: () => void;
+}
+
+const ActionPermissionWrapper: React.FC<Props> = ({
+  permission,
+  onAction,
+  children,
+  placement,
+  message = getDefaultActionMessage(),
+}) => {
+  const canDoAction = usePermission(
+    permission.resource,
+    permission.action,
+    permission.value
+  );
+
+  const { x, y, refs, strategy, open } = useActionTooltip(
+    !canDoAction,
+    placement
+  );
+
+  return (
+    <S.Wrapper
+      ref={refs.setReference}
+      onClick={() => canDoAction && onAction()}
+      style={{ cursor: canDoAction ? 'pointer' : 'not-allowed' }}
+    >
+      {children}
+      {open && (
+        <S.MessageTooltipLimited
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            width: 'max-content',
+          }}
+        >
+          {message}
+        </S.MessageTooltipLimited>
+      )}
+    </S.Wrapper>
+  );
+};
+
+export default ActionPermissionWrapper;

frontend/src/components/common/ActionComponent/ActionPermissionWrapper/__tests__/ActionPermissionWrapper.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import ActionPermissionWrapper from 'components/common/ActionComponent/ActionPermissionWrapper/ActionPermissionWrapper';
+import { render } from 'lib/testHelpers';
+import { Action, ResourceType } from 'generated-sources';
+import { usePermission } from 'lib/hooks/usePermission';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('lib/hooks/usePermission', () => ({
+  usePermission: jest.fn(),
+}));
+
+const onActionMock = jest.fn();
+
+const testText = 'test';
+const TestComponent = () => <div>{testText}</div>;
+
+describe('ActionPermissionWrapper', () => {
+  it('children renders', () => {
+    render(
+      <ActionPermissionWrapper
+        permission={{
+          action: Action.CREATE,
+          resource: ResourceType.CONNECT,
+        }}
+        onAction={onActionMock}
+      >
+        <TestComponent />
+      </ActionPermissionWrapper>
+    );
+    expect(screen.getByText(testText)).toBeInTheDocument();
+  });
+
+  it('action calls when allowed', async () => {
+    (usePermission as jest.Mock).mockImplementation(() => true);
+    render(
+      <ActionPermissionWrapper
+        permission={{
+          action: Action.CREATE,
+          resource: ResourceType.CONNECT,
+        }}
+        onAction={onActionMock}
+      >
+        <TestComponent />
+      </ActionPermissionWrapper>
+    );
+    await userEvent.click(screen.getByText(testText));
+    expect(onActionMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('action not calls when not allowed', async () => {
+    (usePermission as jest.Mock).mockImplementation(() => false);
+    render(
+      <ActionPermissionWrapper
+        permission={{
+          action: Action.CREATE,
+          resource: ResourceType.CONNECT,
+        }}
+        onAction={onActionMock}
+      >
+        <TestComponent />
+      </ActionPermissionWrapper>
+    );
+    await userEvent.click(screen.getByText(testText));
+    expect(onActionMock).not.toHaveBeenCalled();
+  });
+});

frontend/src/components/common/ActionComponent/index.ts

@@ -3,11 +3,13 @@ import ActionButton from './ActionButton/ActionButton';
 import ActionCanButton from './ActionButton/ActionCanButton/ActionCanButton';
 import ActionNavLink from './ActionNavLink/ActionNavLink';
 import ActionDropdownItem from './ActionDropDownItem/ActionDropdownItem';
+import ActionPermissionWrapper from './ActionPermissionWrapper/ActionPermissionWrapper';
 
 export {
   ActionSelect,
   ActionNavLink,
   ActionCanButton,
   ActionButton,
   ActionDropdownItem,
+  ActionPermissionWrapper,
 };