From 9bf3eba2861b90f52ce00f228ff1e60b29f179b6 Mon Sep 17 00:00:00 2001 From: roro-lv Date: Thu, 24 Mar 2022 14:29:55 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20move=20on-stage=20request=20?= =?UTF-8?q?functional=20to=20the=20ViewersList?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move on-stage request functional (in Instructor view) from under the video to the ViewersList in the right panel. Layout of the ViewersList (for instructor and student) is also reworked, in order to display a different background on hovering. --- CHANGELOG.md | 2 + .../DashboardJoinDiscussion/index.spec.tsx | 113 ------------------ .../DashboardJoinDiscussion/index.tsx | 68 ----------- .../index.spec.tsx | 45 ------- .../index.tsx | 39 ------ .../index.spec.tsx | 40 ------- .../index.tsx | 36 ------ .../index.spec.tsx | 37 ------ .../index.tsx | 35 ------ .../components/DashboardVideoLive/index.tsx | 4 - .../DashboardVideoLiveRunning/index.spec.tsx | 41 ------- .../DashboardVideoLiveRunning/index.tsx | 21 ---- src/frontend/components/ViewersList/index.tsx | 4 +- 13 files changed, 4 insertions(+), 481 deletions(-) delete mode 100644 src/frontend/components/DashboardJoinDiscussion/index.spec.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussion/index.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx delete mode 100644 src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx delete mode 100644 src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx delete mode 100644 src/frontend/components/DashboardVideoLiveRunning/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a0f8745d7..cc0a817a28 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,8 @@ right (and close / open it) ### Changed - rename LiveRegistration model in LiveSession +- Move on-stage request functional (in Instructor view) from under +the video to the ViewersList in the right panel ### Fixed diff --git a/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx deleted file mode 100644 index 612516a956..0000000000 --- a/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { render, screen, within } from '@testing-library/react'; -import React from 'react'; - -import { videoMockFactory } from 'utils/tests/factories'; -import { wrapInIntlProvider } from 'utils/tests/intl'; -import { DashboardJoinDiscussion } from '.'; - -jest.mock('utils/window', () => ({ - converse: { - acceptParticipantToJoin: jest.fn(), - kickParticipant: jest.fn(), - rejectParticipantToJoin: jest.fn(), - }, -})); - -describe('', () => { - it('renders the components and updates the participant list', () => { - const participant1 = { - id: 'participant1', - name: 'John Doe', - }; - const participant2 = { - id: 'participant2', - name: 'Jane Doe', - }; - - const video = videoMockFactory(); - - // participant 1 is in the waiting list - const { rerender } = render( - wrapInIntlProvider( - , - ), - ); - - const askParticipant1 = screen.getByTestId('ask-participant1'); - within(askParticipant1).getByText('John Doe'); - within(askParticipant1).getByRole('button', { name: 'accept' }); - within(askParticipant1).getByRole('button', { - name: 'reject', - }); - - // reject the request - rerender( - wrapInIntlProvider( - , - ), - ); - - // nobody is in the waiting list - expect(screen.queryByTestId('ask-participant1')).not.toBeInTheDocument(); - expect(screen.queryByTestId('ask-participant2')).not.toBeInTheDocument(); - - // add participant 2 to the waiting list - rerender( - wrapInIntlProvider( - , - ), - ); - - const askParticipant2 = screen.getByTestId('ask-participant2'); - within(askParticipant2).getByText('Jane Doe'); - within(askParticipant2).getByRole('button', { - name: 'accept', - }); - within(askParticipant1).getByRole('button', { name: 'reject' }); - - // nobody is in the discussion - expect(screen.queryByTestId('in-participant1')).not.toBeInTheDocument(); - expect(screen.queryByTestId('in-participant2')).not.toBeInTheDocument(); - - // accept the participant 2 - rerender( - wrapInIntlProvider( - , - ), - ); - - // participant 2 is in the discussion - const inParticipant2 = screen.getByTestId('in-participant2'); - - within(inParticipant2).getByRole('button', { - name: 'kick out participant', - }); - - // remove participant 2 from discussion - rerender( - wrapInIntlProvider( - , - ), - ); - - // nobody in the waiting list nor in the discussion - expect(screen.queryByTestId('ask-participant1')).not.toBeInTheDocument(); - expect(screen.queryByTestId('ask-participant2')).not.toBeInTheDocument(); - expect(screen.queryByTestId('in-participant1')).not.toBeInTheDocument(); - expect(screen.queryByTestId('in-participant2')).not.toBeInTheDocument(); - }); -}); diff --git a/src/frontend/components/DashboardJoinDiscussion/index.tsx b/src/frontend/components/DashboardJoinDiscussion/index.tsx deleted file mode 100644 index 506ebad684..0000000000 --- a/src/frontend/components/DashboardJoinDiscussion/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Box, Text } from 'grommet'; -import React from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; - -import { DashboardJoinDiscussionAcceptButton } from 'components/DashboardJoinDiscussionAcceptButton'; -import { DashboardJoinDiscussionRejectButton } from 'components/DashboardJoinDiscussionRejectButton'; -import { DashboardJoinDiscussionKickButton } from 'components/DashboardJoinDiscussionKickButton'; -import { Video } from 'types/tracks'; - -const messages = defineMessages({ - participantAsking: { - defaultMessage: 'is asking to join the discussion.', - description: - 'Message to inform the instructor that a participant is asking to join the discussion', - id: 'components.DashboardJoinDiscussion.participantAsking', - }, - participantInDiscussion: { - defaultMessage: 'has joined the discussion.', - description: - 'Message to inform the instructor that a participant has joined the discussion', - id: 'components.DashboardJoinDiscussion.participantInDiscussion', - }, -}); - -interface DashboardJoinDiscussionProps { - video: Video; -} - -export const DashboardJoinDiscussion = ({ - video, -}: DashboardJoinDiscussionProps) => ( - - {video.participants_asking_to_join?.map((participant) => ( - - - {participant.name}{' '} - - - - - - ))} - {video.participants_in_discussion?.map((participant) => ( - - - {participant.name}{' '} - - - - - ))} - -); diff --git a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx deleted file mode 100644 index 9eadaab395..0000000000 --- a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; - -import { videoMockFactory } from '../../utils/tests/factories'; -import { wrapInIntlProvider } from '../../utils/tests/intl'; -import * as mockWindow from '../../utils/window'; -import { DashboardJoinDiscussionAcceptButton } from '.'; - -jest.mock('../../utils/window', () => ({ - converse: { - acceptParticipantToJoin: jest.fn(), - }, -})); - -describe('', () => { - afterEach(() => { - jest.resetAllMocks(); - }); - it('renders the accept button and click on it', () => { - const participant = { - id: 'participant1', - name: 'John Doe', - }; - - const video = videoMockFactory(); - - render( - wrapInIntlProvider( - , - ), - ); - - const acceptButton = screen.getByRole('button', { name: 'accept' }); - - fireEvent.click(acceptButton); - - expect(mockWindow.converse.acceptParticipantToJoin).toHaveBeenCalledWith( - participant, - video, - ); - }); -}); diff --git a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx deleted file mode 100644 index e6eaa484d6..0000000000 --- a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { Button } from 'grommet'; -import React from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; - -import { Participant } from '../../types/Participant'; -import { Video } from '../../types/tracks'; -import { converse } from '../../utils/window'; - -const messages = defineMessages({ - acceptParticipant: { - defaultMessage: 'accept', - description: 'Accept the participant in the discussion', - id: 'components.DashboardJoinDiscussionAcceptButton.acceptParticipant', - }, -}); - -interface DashboardJoinDiscussionAcceptButtonProps { - participant: Participant; - video: Video; -} - -export const DashboardJoinDiscussionAcceptButton = ({ - participant, - video, -}: DashboardJoinDiscussionAcceptButtonProps) => { - const onClick = () => { - converse.acceptParticipantToJoin(participant, video); - }; - - return ( -