feat: roles and permissions button redirect added (#2975)

* feat: roles and permissions button redirect added

Author: jesusbalderramawgu

src/header/hooks.test.tsx

@@ -108,7 +108,7 @@ describe('header utils', () => {
       });
       const actualItems =
         renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() }).result.current;
-      expect(actualItems).toHaveLength(6);
+      expect(actualItems).toHaveLength(7);
     });
     it('when certificate page disabled should not include certificates option', () => {
       setConfig({
@@ -117,7 +117,7 @@ describe('header utils', () => {
       });
       const actualItems =
         renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() }).result.current;
-      expect(actualItems).toHaveLength(5);
+      expect(actualItems).toHaveLength(6);
     });
     it('when user has access to advanced settings should include advanced settings option', () => {
       const actualItemsTitle = renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() }).result
@@ -174,6 +174,20 @@ describe('header utils', () => {
         expect(actualItemsTitle).not.toContain('Advanced Settings');
       });
     });
+
+    it('should include roles and permissions option', () => {
+      setConfig({
+        ...getConfig(),
+        ADMIN_CONSOLE_URL: 'http://admin-console.example.com',
+      });
+      const actualItems =
+        renderHook(() => useSettingMenuItems('course-123'), { wrapper: createWrapper() }).result.current;
+      const rolesPermissionsItem = actualItems.find(item => item.title === 'Roles and Permissions');
+      expect(rolesPermissionsItem).toEqual({
+        href: 'http://admin-console.example.com/authz?scope=course-123',
+        title: 'Roles and Permissions',
+      });
+    });
   });
 
   describe('getToolsMenuItems', () => {
@@ -227,7 +241,21 @@ describe('header utils', () => {
   });
 
   describe('useLibrarySettingsMenuItems', () => {
+    let originalConfig: any;
+
+    beforeEach(() => {
+      originalConfig = { ...getConfig() };
+    });
+
+    afterEach(() => {
+      setConfig(originalConfig);
+    });
+
     it('should contain team access url', () => {
+      const configWithoutAdminConsole = { ...getConfig() };
+      delete configWithoutAdminConsole.ADMIN_CONSOLE_URL;
+      setConfig(configWithoutAdminConsole);
+
       const items =
         renderHook(() => useLibrarySettingsMenuItems('library-123', false), { wrapper: createWrapper() }).result
           .current;

src/header/hooks.tsx

@@ -92,6 +92,10 @@ export const useSettingMenuItems = (courseId: string) => {
       href: `/course/${courseId}/settings/grading`,
       title: intl.formatMessage(messages['header.links.grading']),
     },
+    {
+      href: `${getConfig().ADMIN_CONSOLE_URL}/authz?scope=${courseId}`,
+      title: intl.formatMessage(messages['header.links.roles.permissions']),
+    },
     {
       href: `/course/${courseId}/course_team`,
       title: intl.formatMessage(messages['header.links.courseTeam']),

src/header/messages.ts

@@ -61,6 +61,11 @@ const messages = defineMessages({
     defaultMessage: 'Grading',
     description: 'Link to Studio Grading page',
   },
+  'header.links.roles.permissions': {
+    id: 'header.links.roles.permissions',
+    defaultMessage: 'Roles and Permissions',
+    description: 'Link to Studio Roles and Permissions page',
+  },
   'header.links.courseTeam': {
     id: 'header.links.courseTeam',
     defaultMessage: 'Course Team',

src/studio-home/StudioHome.test.tsx

@@ -1,4 +1,5 @@
 import * as reactRedux from 'react-redux';
+import { getConfig, setConfig } from '@edx/frontend-platform';
 
 import {
   fireEvent,
@@ -91,6 +92,18 @@ describe('<StudioHome />', () => {
       within(header).getByRole('button', { name: 'New course' }); // will error if not found
     });
 
+    it('should render roles and permissions button', async () => {
+      setConfig({
+        ...getConfig(),
+        ADMIN_CONSOLE_URL: 'https://admin-console.example.com',
+      });
+
+      render(<StudioHome />, { path: '/home' });
+      const header = getHeaderElement();
+      const rolesButton = within(header).getByRole('link', { name: 'Roles and permissions' });
+      expect(rolesButton).toHaveAttribute('href', 'https://admin-console.example.com/authz');
+    });
+
     it('should show verify email layout if user inactive', async () => {
       mockUseSelector.mockReturnValue({
         ...studioHomeMock,

src/studio-home/StudioHome.tsx

@@ -7,8 +7,9 @@ import {
   MailtoLink,
   Row,
 } from '@openedx/paragon';
-import { Add as AddIcon, Error } from '@openedx/paragon/icons';
+import { Add as AddIcon, Error, ManageAccounts } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -47,6 +48,8 @@ const StudioHome = () => {
     librariesV2Enabled,
   } = useStudioHome();
 
+  const adminConsoleUrl = `${getConfig().ADMIN_CONSOLE_URL}/authz`;
+
   const v1LibraryTab = librariesV1Enabled && location?.pathname.split('/').pop() === 'libraries-v1';
   const showV2LibraryURL = librariesV2Enabled && !v1LibraryTab;
 
@@ -71,6 +74,20 @@ const StudioHome = () => {
       );
     }
 
+    headerButtons.push(
+      <div className="border-right mr-3 pr-4 py-2">
+        <Button
+          as="a"
+          href={adminConsoleUrl}
+          variant="primary"
+          iconBefore={ManageAccounts}
+          size="sm"
+        >
+          {intl.formatMessage(messages.addRolesPermissionsBtnText)}
+        </Button>
+      </div>,
+    );
+
     if (hasAbilityToCreateNewCourse) {
       headerButtons.push(
         <Button

src/studio-home/messages.ts

@@ -13,6 +13,11 @@ const messages = defineMessages({
     id: 'course-authoring.studio-home.add-new-library.btn.text',
     defaultMessage: 'New library',
   },
+  addRolesPermissionsBtnText: {
+    id: 'course-authoring.studio-home.add-roles-permissions.btn.text',
+    defaultMessage: 'Roles and permissions',
+    description: 'Text for the button that links to the Admin Console Roles and Permissions page.',
+  },
   homePageLoadFailedMessage: {
     id: 'course-authoring.studio-home.page-load.failed.message',
     defaultMessage: 'Failed to load Studio home. Please try again later.',