Disabled guard

assets/js/common/DisabledGuard/DisabledGuard.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Tooltip from '@common/Tooltip';
+
+const ALL_PERMITTED = ['all:all'];
+
+const DEFAULT_TOOLTIP_MESSAGE = 'You are not authorized for this action';
+
+// DisabledGuard adds the `disabled` prop to the guarded element.
+// The children element must be of one element.
+// If the coming children is wrapped with a tooltip, the authorization tooltip
+// supersedes the original tooltip in case of unauthorized access.
+
+function DisabledGuard({
+  userAbilities,
+  permitted,
+  withTooltip = true,
+  tooltipMessage = DEFAULT_TOOLTIP_MESSAGE,
+  tooltipPlace = 'bottom',
+  children,
+}) {
+  const permittedFor = ALL_PERMITTED.concat(permitted);
+
+  const isPermitted = userAbilities
+    .map(({ name, resource }) => `${name}:${resource}`)
+    .some((ability) => permittedFor.includes(ability));
+
+  if (isPermitted) {
+    return children;
+  }
+
+  const guardedElement =
+    children.type === Tooltip ? children.props.children : children;
+
+  const disabledElement = React.cloneElement(guardedElement, {
+    disabled: true,
+  });
+
+  return (
+    <Tooltip
+      isEnabled={withTooltip}
+      content={tooltipMessage}
+      place={tooltipPlace}
+      wrap={false}
+    >
+      <div>{disabledElement}</div>
+    </Tooltip>
+  );
+}
+
+export default DisabledGuard;

assets/js/common/DisabledGuard/DisabledGuard.stories.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+
+import Button from '@common/Button';
+import Tooltip from '@common/Tooltip';
+import { PLACES } from '@common/Tooltip/Tooltip';
+
+import DisabledGuard from '.';
+
+export default {
+  title: 'Components/DisabledGuard',
+  component: DisabledGuard,
+  argTypes: {
+    userAbilities: {
+      control: { type: 'object' },
+      description: 'Current user abilities',
+    },
+    permitted: {
+      control: { type: 'object' },
+      description: 'Abilities that authorize the usage of the guarded element',
+    },
+    withTooltip: {
+      control: { type: 'boolean' },
+      description: 'Add tooltip saying user is not authorized for this action',
+    },
+    tooltipMessage: {
+      control: { type: 'text' },
+      description: 'Tooltip message',
+    },
+    tooltipPlace: {
+      control: { type: 'radio' },
+      options: PLACES,
+      description: 'Tooltip place',
+    },
+  },
+};
+
+const guardElement = (args) => (
+  <div className="pt-10 pl-32 w-64">
+    <DisabledGuard {...args}>
+      <Button>Click me!</Button>
+    </DisabledGuard>
+  </div>
+);
+
+const guardElementWithTooltip = (args) => (
+  <div className="pt-10 pl-32 w-64">
+    <DisabledGuard {...args}>
+      <Tooltip content="Original tooltip!">
+        <Button>Click me!</Button>
+      </Tooltip>
+    </DisabledGuard>
+  </div>
+);
+
+export const Authorized = {
+  args: {
+    userAbilities: [{ name: 'all', resource: 'all' }],
+    tooltipMessage: 'Some tooltip',
+  },
+  render: (args) => guardElement(args),
+};
+
+export const Disabled = {
+  args: {
+    ...Authorized.args,
+    userAbilities: [],
+    permitted: ['action:resource'],
+    withTooltip: false,
+  },
+  render: (args) => guardElement(args),
+};
+
+export const DisabledWithTooltip = {
+  args: {
+    ...Disabled.args,
+    withTooltip: true,
+  },
+  render: (args) => guardElement(args),
+};
+
+export const AuthorizedWithOriginalTooltip = {
+  args: {
+    ...Authorized.args,
+  },
+  render: (args) => guardElementWithTooltip(args),
+};
+
+export const DisabledWithOriginalTooltip = {
+  args: {
+    ...DisabledWithTooltip.args,
+  },
+  render: (args) => guardElementWithTooltip(args),
+};

assets/js/common/DisabledGuard/DisabledGuard.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { render, screen, act, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import Button from '@common/Button';
+import Tooltip from '@common/Tooltip';
+
+import DisabledGuard from './DisabledGuard';
+
+describe('DisabledGuard component', () => {
+  it('should disable the children component if the user is not authorized', () => {
+    render(
+      <DisabledGuard userAbilities={[]} permitted={['action:resource']}>
+        <Button>Click me!</Button>
+      </DisabledGuard>
+    );
+
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('should not disable children component if the user is authorized', () => {
+    render(
+      <DisabledGuard
+        userAbilities={[{ name: 'action', resource: 'resource' }]}
+        permitted={['action:resource']}
+      >
+        <Button>Click me!</Button>
+      </DisabledGuard>
+    );
+
+    expect(screen.getByRole('button')).not.toBeDisabled();
+  });
+
+  it('should not disable children component if the user has all:all ability', () => {
+    render(
+      <DisabledGuard
+        userAbilities={[{ name: 'all', resource: 'all' }]}
+        permitted={['action:resource']}
+      >
+        <Button>Click me!</Button>
+      </DisabledGuard>
+    );
+
+    expect(screen.getByRole('button')).not.toBeDisabled();
+  });
+
+  it('should supersede the tooltip if the user is not authorized', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <DisabledGuard userAbilities={[]} permitted={['action:resource']}>
+        <Tooltip content="This is my tooltip text" wrap={false}>
+          <Button>Click me!</Button>
+        </Tooltip>
+      </DisabledGuard>
+    );
+
+    expect(screen.getByRole('button')).toBeDisabled();
+
+    await act(async () => user.hover(screen.getByRole('button')));
+
+    await waitFor(() =>
+      expect(
+        screen.queryByText('You are not authorized for this action')
+      ).toBeVisible()
+    );
+  });
+});

assets/js/common/DisabledGuard/index.js

@@ -0,0 +1,3 @@
+import DisabledGuard from './DisabledGuard';
+
+export default DisabledGuard;

assets/js/pages/Layout/Layout.jsx

@@ -24,8 +24,7 @@ import TrentoLogo from '@static/trento-logo-stacked.svg';
 
 import classNames from 'classnames';
 import ProfileMenu from '@common/ProfileMenu';
-
-import ForbiddenGuard from '@pages/ForbiddenGuard';
+import ForbiddenGuard from '@common/ForbiddenGuard';
 
 const navigation = [
   { name: 'Dashboard', href: '/', icon: EOS_HOME_OUTLINED },

assets/js/trento.jsx

@@ -18,7 +18,7 @@ import DatabasesOverviewPage from '@pages/DatabasesOverview';
 import DatabaseDetails from '@pages//DatabaseDetails';
 import { ExecutionResultsPage } from '@pages/ExecutionResults';
 import Guard from '@pages/Guard';
-import ForbiddenGuard from '@pages/ForbiddenGuard';
+import ForbiddenGuard from '@common/ForbiddenGuard';
 import Home from '@pages/Home';
 import HostDetailsPage from '@pages/HostDetailsPage';
 import HostSettingsPage from '@pages/HostSettingsPage';