fix: gate studio home roles and permissions button on authz waffle flag

src/studio-home/StudioHome.test.tsx

@@ -1,5 +1,6 @@
 import * as reactRedux from 'react-redux';
 import { getConfig, setConfig } from '@edx/frontend-platform';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 import {
   fireEvent,
@@ -92,18 +93,31 @@ describe('<StudioHome />', () => {
       within(header).getByRole('button', { name: 'New course' }); // will error if not found
     });
 
-    it('should render roles and permissions button', async () => {
+    it('should render roles and permissions button when authz is enabled', async () => {
       setConfig({
         ...getConfig(),
         ADMIN_CONSOLE_URL: 'https://admin-console.example.com',
       });
+      mockWaffleFlags({ enableAuthzCourseAuthoring: true });
 
       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 not render roles and permissions button when authz is disabled', async () => {
+      setConfig({
+        ...getConfig(),
+        ADMIN_CONSOLE_URL: 'https://admin-console.example.com',
+      });
+      mockWaffleFlags({ enableAuthzCourseAuthoring: false });
+
+      render(<StudioHome />, { path: '/home' });
+      const header = getHeaderElement();
+      expect(within(header).queryByRole('link', { name: 'Roles and permissions' })).not.toBeInTheDocument();
+    });
+
     it('should show verify email layout if user inactive', async () => {
       mockUseSelector.mockReturnValue({
         ...studioHomeMock,

src/studio-home/StudioHome.tsx

@@ -13,6 +13,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useWaffleFlags } from '@src/data/apiHooks';
 import Loading from '../generic/Loading';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
 import Header from '../header';
@@ -48,6 +49,8 @@ const StudioHome = () => {
     librariesV2Enabled,
   } = useStudioHome();
 
+  const waffleFlags = useWaffleFlags();
+  const isAuthzEnabled = waffleFlags?.enableAuthzCourseAuthoring ?? false;
   const adminConsoleUrl = `${getConfig().ADMIN_CONSOLE_URL}/authz`;
 
   const v1LibraryTab = librariesV1Enabled && location?.pathname.split('/').pop() === 'libraries-v1';
@@ -74,20 +77,22 @@ 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"
-          target="_blank"
-        >
-          {intl.formatMessage(messages.addRolesPermissionsBtnText)}
-        </Button>
-      </div>,
-    );
+    if (isAuthzEnabled && getConfig().ADMIN_CONSOLE_URL) {
+      headerButtons.push(
+        <div className="border-right mr-3 pr-4 py-2">
+          <Button
+            as="a"
+            href={adminConsoleUrl}
+            variant="primary"
+            iconBefore={ManageAccounts}
+            size="sm"
+            target="_blank"
+          >
+            {intl.formatMessage(messages.addRolesPermissionsBtnText)}
+          </Button>
+        </div>,
+      );
+    }
 
     if (hasAbilityToCreateNewCourse) {
       headerButtons.push(
@@ -125,7 +130,7 @@ const StudioHome = () => {
     }
 
     return headerButtons;
-  }, [location, userIsActive, isFailedLoadingPage]);
+  }, [location, userIsActive, isFailedLoadingPage, isAuthzEnabled]);
 
   const headerButtons = userIsActive ? getHeaderButtons() : [];
   if (isLoadingPage && !isFiltered) {