fix: add view in console button (#180)

Author: diana-villalvazo-wgu

src/courseInfo/types.ts

@@ -28,6 +28,7 @@ export interface CourseInfoResponse {
   },
   gradebookUrl: string,
   studioGradingUrl?: string,
+  adminConsoleUrl: string | null,
 }
 
 interface EnrollmentCounts extends Record<string, number> {

src/courseTeam/CourseTeamPage.test.tsx

@@ -8,10 +8,18 @@ jest.mock('react-router-dom', () => ({
   useParams: jest.fn(() => ({ courseId: 'course-v1:test-course' })),
 }));
 
-jest.mock('./data/apiHook', () => ({
+jest.mock('@src/courseTeam/data/apiHook', () => ({
   useAddTeamMember: () => ({ mutate: jest.fn() }),
 }));
 
+jest.mock('@src/data/apiHook', () => ({
+  useCourseInfo: jest.fn(() => ({
+    data: {
+      adminConsoleUrl: 'http://example.com/admin-console',
+    },
+  })),
+}));
+
 // Mock the child components but allow passing through props
 jest.mock('./components/MembersContent', () => {
   return function MembersContent({ onEdit }: { onEdit?: (user: any) => void }) {
@@ -171,4 +179,11 @@ describe('CourseTeamPage', () => {
     // Modal should be visible
     expect(screen.getByText('Edit Team Member Modal for testuser')).toBeInTheDocument();
   });
+
+  it('renders view studio roles button with correct URL', () => {
+    renderWithAlertAndIntl(<CourseTeamPage />);
+    const viewRolesButton = screen.getByRole('link', { name: /view studio roles/i });
+    expect(viewRolesButton).toBeInTheDocument();
+    expect(viewRolesButton).toHaveAttribute('href', 'http://example.com/admin-console');
+  });
 });

src/courseTeam/CourseTeamPage.tsx

@@ -1,20 +1,25 @@
 import { useState } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 import { Button, Tab, Tabs, useToggle } from '@openedx/paragon';
-import { Plus } from '@openedx/paragon/icons';
+import { Plus, TrendingUp } from '@openedx/paragon/icons';
 import AddTeamMemberModal from '@src/courseTeam/components/AddTeamMemberModal';
 import EditTeamMemberModal from '@src/courseTeam/components/EditTeamMemberModal';
 import MembersContent from '@src/courseTeam/components/MembersContent';
 import RolesContent from '@src/courseTeam/components/RolesContent';
 import messages from '@src/courseTeam/messages';
 import { AlertOutlet } from '@src/providers/AlertProvider';
 import { CourseTeamMember } from '@src/courseTeam/types';
+import { useParams } from 'react-router-dom';
+import { useCourseInfo } from '@src/data/apiHook';
 
 const CourseTeamPage = () => {
   const intl = useIntl();
+  const { courseId = '' } = useParams();
   const [isOpenAddModal, openAddModal, closeAddModal] = useToggle(false);
   const [isOpenEditModal, openEditModal, closeEditModal] = useToggle(false);
   const [selectedUser, setSelectedUser] = useState<CourseTeamMember | null>(null);
+  const { data } = useCourseInfo(courseId);
+  const { adminConsoleUrl = '' } = data || {};
 
   const handleEdit = (user: CourseTeamMember) => {
     setSelectedUser(user);
@@ -25,7 +30,10 @@ const CourseTeamPage = () => {
     <>
       <div className="d-flex justify-content-between align-items-center mb-3">
         <h3 className="text-primary-700 mb-0">{intl.formatMessage(messages.courseTeamTitle)}</h3>
-        <Button iconBefore={Plus} variant="primary" onClick={openAddModal}>{intl.formatMessage(messages.addTeamMember)}</Button>
+        <div>
+          {adminConsoleUrl && <Button iconBefore={TrendingUp} variant="outline-primary" className="mr-3" as="a" href={adminConsoleUrl}>{intl.formatMessage(messages.viewStudioRoles)}</Button>}
+          <Button iconBefore={Plus} variant="primary" onClick={openAddModal}>{intl.formatMessage(messages.addTeamMember)}</Button>
+        </div>
       </div>
       <AlertOutlet />
       <Tabs>

src/courseTeam/messages.ts

@@ -240,6 +240,11 @@ const messages = defineMessages({
     id: 'instruct.courseTeam.addRoleError',
     defaultMessage: 'Failed to add role to {username}.',
     description: 'Error message displayed when adding a role to a team member fails',
+  },
+  viewStudioRoles: {
+    id: 'instruct.courseTeam.viewStudioRoles',
+    defaultMessage: 'View Studio Roles',
+    description: 'Button label for viewing course team roles in Studio',
   }
 });
 

src/data/apiHook.test.tsx

@@ -35,6 +35,7 @@ const mockCourseData = {
     dataResearcher: false,
   },
   gradebookUrl: 'http://example.com/gradebook',
+  adminConsoleUrl: 'http://example.com/admin-console',
 };
 
 const createWrapper = () => {