✨(front) remove StudentViewersList and use ViewersList instead

The StudentViewersList is not used anymore and the ViewersList replaces it. The
Viewers component makes some little changes to the UI of the viewers list and
add 'on-stage request' management features directly into the list.

CHANGELOG.md

@@ -27,6 +27,9 @@ right (and close / open it)
 - rename LiveRegistration model in LiveSession
 - Disable jitsi prejoin page
 - Admin can access all LiveSession belonging to a video
+- Move on-stage request functional (in Instructor view) from under
+the video to the ViewersList in the right panel
+
 
 ### Fixed
 

src/frontend/components/LiveVideoPanel/index.spec.tsx

@@ -1,29 +1,48 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { getDecodedJwt } from 'data/appData';
 import {
   LivePanelItem,
   useLivePanelState,
 } from 'data/stores/useLivePanelState';
-import { videoMockFactory } from 'utils/tests/factories';
+import { useParticipantsStore } from 'data/stores/useParticipantsStore';
+import {
+  participantMockFactory,
+  videoMockFactory,
+} from 'utils/tests/factories';
 import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
 import { wrapInIntlProvider } from 'utils/tests/intl';
-
+import { DecodedJwt } from 'types/jwt';
 import { LiveVideoPanel } from '.';
 
+const mockAskingParticipant = participantMockFactory();
+const mockParticipant = participantMockFactory();
+
+const mockVideo = videoMockFactory({
+  participants_asking_to_join: [mockAskingParticipant],
+  participants_in_discussion: [mockParticipant],
+});
+
 jest.mock('data/appData', () => ({
-  getDecodedJwt: () => ({
-    permissions: {
-      can_access_dashboard: false,
-      can_update: false,
-    },
-  }),
+  getDecodedJwt: jest.fn(),
 }));
-
-const video = videoMockFactory();
+const mockGetDecodedJwt = getDecodedJwt as jest.MockedFunction<
+  typeof getDecodedJwt
+>;
 
 describe('<LiveVideoPanel />', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('closes the panel if no item is selected', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     const mockSetPanelVisibility = jest.fn();
     useLivePanelState.setState({
       currentItem: undefined,
@@ -36,7 +55,7 @@ describe('<LiveVideoPanel />', () => {
     });
 
     const { container } = render(
-      wrapInIntlProvider(<LiveVideoPanel video={video} />),
+      wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />),
     );
 
     expect(mockSetPanelVisibility).toBeCalled();
@@ -47,6 +66,12 @@ describe('<LiveVideoPanel />', () => {
   });
 
   it('renders the content with selection', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [
@@ -56,7 +81,7 @@ describe('<LiveVideoPanel />', () => {
       ],
     });
 
-    render(wrapInIntlProvider(<LiveVideoPanel video={video} />));
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
 
     screen.getByRole('tablist');
     screen.getByRole('tab', { name: 'application' });
@@ -66,13 +91,96 @@ describe('<LiveVideoPanel />', () => {
     screen.getByText('application content');
   });
 
+  it('renders the correct viewers list if the user is not an instructor', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_update: false,
+      },
+    } as DecodedJwt);
+
+    useParticipantsStore.setState({
+      participants: [
+        {
+          ...mockParticipant,
+          isInstructor: false,
+          isOnStage: false,
+        },
+      ],
+    });
+    useLivePanelState.setState({
+      currentItem: LivePanelItem.VIEWERS_LIST,
+      availableItems: [
+        LivePanelItem.APPLICATION,
+        LivePanelItem.CHAT,
+        LivePanelItem.VIEWERS_LIST,
+      ],
+    });
+
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
+
+    screen.getByRole('tablist');
+    screen.getByRole('tab', { name: 'application' });
+    screen.getByRole('tab', { name: 'chat' });
+    screen.getByRole('tab', { name: 'viewers' });
+
+    screen.getByText('On stage');
+    screen.getByText(mockParticipant.name);
+    expect(screen.queryByText('Demands')).toEqual(null);
+    expect(screen.queryByText(mockAskingParticipant.name)).toEqual(null);
+  });
+
+  it('renders the correct viewers list if the user is an instructor', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_update: true,
+      },
+    } as DecodedJwt);
+
+    useParticipantsStore.setState({
+      participants: [
+        {
+          ...mockParticipant,
+          isInstructor: false,
+          isOnStage: false,
+        },
+      ],
+    });
+
+    useLivePanelState.setState({
+      currentItem: LivePanelItem.VIEWERS_LIST,
+      availableItems: [
+        LivePanelItem.APPLICATION,
+        LivePanelItem.CHAT,
+        LivePanelItem.VIEWERS_LIST,
+      ],
+    });
+
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
+
+    screen.getByRole('tablist');
+    screen.getByRole('tab', { name: 'application' });
+    screen.getByRole('tab', { name: 'chat' });
+    screen.getByRole('tab', { name: 'viewers' });
+
+    screen.getByText('On stage');
+    screen.getByText(mockParticipant.name);
+    screen.getByText('Demands');
+    screen.getByText(mockAskingParticipant.name);
+  });
+
   it('does not render tabs with only one item available', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [LivePanelItem.APPLICATION],
     });
 
-    render(wrapInIntlProvider(<LiveVideoPanel video={video} />));
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
 
     expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
     expect(
@@ -87,6 +195,12 @@ describe('<LiveVideoPanel />', () => {
   });
 
   it('renders with appropriate style on large screen', async () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [
@@ -96,10 +210,16 @@ describe('<LiveVideoPanel />', () => {
       ],
     });
 
-    await renderImageSnapshot(<LiveVideoPanel video={video} />);
+    await renderImageSnapshot(<LiveVideoPanel video={mockVideo} />);
   });
 
   it('renders with appropriate style on small screen', async () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [
@@ -109,6 +229,6 @@ describe('<LiveVideoPanel />', () => {
       ],
     });
 
-    await renderImageSnapshot(<LiveVideoPanel video={video} />, 300, 300);
+    await renderImageSnapshot(<LiveVideoPanel video={mockVideo} />, 300, 300);
   });
 });

src/frontend/components/LiveVideoPanel/index.tsx

@@ -3,15 +3,15 @@ import { Tabs, Box, Grommet, ResponsiveContext, ThemeType } from 'grommet';
 import styled from 'styled-components';
 
 import { Chat } from 'components/Chat';
-import { StudentViewersList } from 'components/StudentViewersList';
+import { ViewersList } from 'components/ViewersList';
+import { getDecodedJwt } from 'data/appData';
 import {
   LivePanelItem,
   useLivePanelState,
 } from 'data/stores/useLivePanelState';
 import { Video } from 'types/tracks';
 import { ShouldNotHappen } from 'utils/errors/exception';
 import { theme } from 'utils/theme/theme';
-
 import { LiveVideoTabPanel } from './LiveVideoTabPanel';
 
 const StyledGrommet = styled(Grommet)`
@@ -57,6 +57,7 @@ export const LiveVideoPanel = ({ video }: LiveVideoPanelProps) => {
       setPanelVisibility: state.setPanelVisibility,
     }),
   );
+  const canUpdate = getDecodedJwt().permissions.can_update;
 
   //  close panel if there is nothing to display
   useEffect(() => {
@@ -97,7 +98,7 @@ export const LiveVideoPanel = ({ video }: LiveVideoPanelProps) => {
       content = <p>application content</p>;
       break;
     case LivePanelItem.VIEWERS_LIST:
-      content = <StudentViewersList video={video} />;
+      content = <ViewersList isInstructor={canUpdate} video={video} />;
       break;
     default:
       throw new ShouldNotHappen(currentItem);

src/frontend/components/StudentLiveWrapper/index.spec.tsx

@@ -280,7 +280,8 @@ describe('<StudentLiveWrapper /> as a viewer', () => {
 
     const viewersTabButton = screen.getByRole('tab', { name: 'viewers' });
     userEvent.click(viewersTabButton);
-    screen.getByText('Other participants');
+    expect(screen.queryByText('On stage')).toBeNull();
+    expect(screen.queryByText('Other participants')).toBeNull();
 
     expect(useLivePanelState.getState().availableItems).toEqual([
       LivePanelItem.CHAT,
@@ -586,7 +587,8 @@ describe('<StudentLiveWrapper /> as a streamer', () => {
 
     const viewersTabButton = screen.getByRole('tab', { name: 'viewers' });
     userEvent.click(viewersTabButton);
-    screen.getByText('Other participants');
+    expect(screen.queryByText('On stage')).toBeNull();
+    expect(screen.queryByText('Other participants')).toBeNull();
 
     expect(useLivePanelState.getState().availableItems).toEqual([
       LivePanelItem.CHAT,