feat: disable columns and tooltip added

Author: jesusbalderramawgu

src/authz-module/components/PermissionTable.tsx

@@ -1,6 +1,6 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Check, Close } from '@openedx/paragon/icons';
-import { Card, Icon } from '@openedx/paragon';
+import { Card, Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import { PermissionsResourceGrouped, Role } from '@src/types';
 import { actionsDictionary } from './RoleCard/constants';
 import ResourceTooltip from './ResourceTooltip';
@@ -23,7 +23,28 @@ const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProp
               {title}
             </th>
             {roles.map(role => (
-              <th key={role.name} className="text-center py-3 sticky-top bg-white">{role.name}</th>
+              <th
+                key={role.name}
+                className={`text-center py-3 sticky-top bg-white ${role.disable && 'text-muted opacity-50'}`}
+              >
+                {role.disable ? (
+                  <OverlayTrigger
+                    placement="top"
+                    overlay={(
+                      <Tooltip
+                        id={`tooltip-${role.name}`}
+                        variant="light"
+                      >
+                        {formatMessage(messages['authz.role.card.permission.for.role.status.disabled'])}
+                      </Tooltip>
+                    )}
+                  >
+                    <span style={{ cursor: 'help' }}>{role.name}</span>
+                  </OverlayTrigger>
+                ) : (
+                  role.name
+                )}
+              </th>
             ))}
           </tr>
         </thead>
@@ -46,12 +67,12 @@ const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProp
                     {permission.label}
                   </td>
                   {roles.map(role => (
-                    <td key={role.name} className="text-center">
+                    <td key={role.name} className={`text-center ${role.disable && 'opacity-50'}`}>
                       {
                       permission.roles[role.name]
                         ? (
                           <Icon
-                            className="d-inline-block"
+                            className={`d-inline-block ${role.disable && 'text-muted'}`}
                             src={Check}
                             aria-label={formatMessage(messages['authz.role.card.permission.for.role.status.granted'], {
                               roleName: role.name,
@@ -63,7 +84,7 @@ const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProp
                         )
                         : (
                           <Icon
-                            className="text-danger d-inline-block"
+                            className={`d-inline-block ${role.disable ? 'text-muted' : 'text-danger'}`}
                             src={Close}
                             aria-label={formatMessage(messages['authz.role.card.permission.for.role.status.not.granted'], {
                               roleName: role.name,

src/authz-module/components/messages.ts

@@ -11,6 +11,11 @@ const messages = defineMessages({
     defaultMessage: 'Permission not granted in {roleName} role',
     description: 'Label for not granted status of a permission in the permissions table',
   },
+  'authz.role.card.permission.for.role.status.disabled': {
+    id: 'authz.role.card.permission.for.role.status.disabled',
+    defaultMessage: 'We are expanding our permissions system. This role is currently unavailable but will be part of an upcoming update.',
+    description: 'Tooltip message for disabled roles in the permissions table',
+  },
   'authz.anchor.button.alt': {
     id: 'authz.anchor.button.alt',
     defaultMessage: 'Scroll to top',

src/authz-module/courses/constants.ts

@@ -400,6 +400,7 @@ export const rolesObject = [
     userCount: 1,
     name: 'Course Editor',
     description: 'building and maintaining course content and supporting assets, without operational controls or high impact actions that can affect a live course.',
+    disable: true,
   },
   {
     role: 'course_auditor',
@@ -417,6 +418,7 @@ export const rolesObject = [
     userCount: 1,
     name: 'Course Auditor',
     description: ' QA, compliance review, content review, and general oversight, no changes in Studio.',
+    disable: true,
   },
 
 ];

src/types.ts

@@ -32,6 +32,7 @@ export interface RoleMetadata {
 export interface Role extends RoleMetadata {
   userCount: number;
   permissions: string[];
+  disable?: boolean;
 }
 
 export type ResourceMetadata = {