From ed08fa9c0c7e4d79486a7eec6f039553a1e0df14 Mon Sep 17 00:00:00 2001 From: Anthony Le Courric Date: Thu, 28 Sep 2023 15:22:05 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=A5(lti)=20delete=20SidebarUploads?= =?UTF-8?q?Indicator=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SidebarUploadsIndicator is not used anywhere in the app, we delete it. --- .../SidebarUploadsIndicator/index.spec.tsx | 135 ------------------ .../SidebarUploadsIndicator/index.tsx | 90 ------------ 2 files changed, 225 deletions(-) delete mode 100644 src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.spec.tsx delete mode 100644 src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.tsx diff --git a/src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.spec.tsx b/src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.spec.tsx deleted file mode 100644 index d28dd7e689..0000000000 --- a/src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.spec.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { screen } from '@testing-library/react'; -import { - UploadManagerContext, - UploadManagerStatus, - modelName, -} from 'lib-components'; -import { render } from 'lib-tests'; -import React from 'react'; - -import { SidebarUploadsIndicator } from '.'; - -jest.mock('lib-components', () => ({ - ...jest.requireActual('lib-components'), - useAppConfig: () => ({ - static: { - svg: { - icons: '/path/to/icons.svg', - }, - }, - }), -})); - -describe('', () => { - it('shows a link to the uploads view with a counter for the active downloads', () => { - const { rerender } = render( - - - , - ); - - screen.getByRole('link', { name: 'File uploads 2' }); - - rerender( - - - , - ); - - screen.getByRole('link', { name: 'File uploads 1' }); - - rerender( - - - , - ); - - expect( - screen.getByRole('link', { name: 'File uploads' }), - ).toBeInTheDocument(); - }); -}); diff --git a/src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.tsx b/src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.tsx deleted file mode 100644 index 25ec2ad8b2..0000000000 --- a/src/frontend/apps/lti_site/components/SidebarUploadsIndicator/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { Box } from 'grommet'; -import { normalizeColor } from 'grommet/utils'; -import { theme } from 'lib-common'; -import { - Spinner, - StyledLink, - UploadManagerStatus, - UploadSVG, - useUploadManager, -} from 'lib-components'; -import React from 'react'; -import { FormattedMessage, defineMessages } from 'react-intl'; -import styled from 'styled-components'; - -const messages = defineMessages({ - title: { - defaultMessage: 'File uploads', - description: 'Message for the sidebar uploads indicator link.', - id: 'components.SidebarUploadsIndicator.title', - }, -}); - -const styledLinkCSS = ` - &:active { - text-decoration: none; - color: inherit; - } - - &:hover { - background: white; - color: ${normalizeColor('brand', theme)}; - - // Force the underline only on the link part, not on the count - & .link-underlined-part { - text-decoration: underline; - } - } -`; - -const CountContainer = styled.div` - height: 1rem; - display: flex; - align-items: center; -`; - -const CountBox = styled(Box)` - transform: scale(0.8); - font-weight: 700; - border-radius: 1.25rem; -`; - -export const SidebarUploadsIndicator = () => { - const { uploadManagerState } = useUploadManager(); - - const activeUploadsCount = Object.values(uploadManagerState).filter((state) => - [UploadManagerStatus.INIT, UploadManagerStatus.UPLOADING].includes( - state.status, - ), - ).length; - - return ( - - - -
- -
- {activeUploadsCount > 0 ? ( - - - - {activeUploadsCount} - - - ) : null} - - - ); -}; From cfe9302550a1e74b04dfbd74a0deabba925994ff Mon Sep 17 00:00:00 2001 From: Anthony Le Courric Date: Thu, 28 Sep 2023 15:18:43 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=E2=9C=A8(lib-component)=20create=20compone?= =?UTF-8?q?nt=20BoxLoader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Create the component BoxLoader, it will replace CenterLoader, Spinner, ContentSpinner, and Loader. It uses the Cunningham Loader. --- .../src/components/Spinner/ContentSpinner.tsx | 20 --- .../src/components/Spinner/index.tsx | 1 - .../src/common/Loader/BoxLoader.spec.tsx | 50 ++++++++ .../src/common/Loader/BoxLoader.tsx | 37 ++++++ .../src/common/Loader/CenterLoader.tsx | 20 --- .../src/common/Loader/index.spec.tsx | 41 ------ .../src/common/Loader/index.tsx | 121 +----------------- .../lib_components/src/common/index.tsx | 1 - 8 files changed, 88 insertions(+), 203 deletions(-) delete mode 100644 src/frontend/apps/standalone_site/src/components/Spinner/ContentSpinner.tsx delete mode 100644 src/frontend/apps/standalone_site/src/components/Spinner/index.tsx create mode 100644 src/frontend/packages/lib_components/src/common/Loader/BoxLoader.spec.tsx create mode 100644 src/frontend/packages/lib_components/src/common/Loader/BoxLoader.tsx delete mode 100644 src/frontend/packages/lib_components/src/common/Loader/CenterLoader.tsx delete mode 100644 src/frontend/packages/lib_components/src/common/Loader/index.spec.tsx diff --git a/src/frontend/apps/standalone_site/src/components/Spinner/ContentSpinner.tsx b/src/frontend/apps/standalone_site/src/components/Spinner/ContentSpinner.tsx deleted file mode 100644 index cee5cf1df1..0000000000 --- a/src/frontend/apps/standalone_site/src/components/Spinner/ContentSpinner.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Box, BoxProps, Spinner, SpinnerProps } from 'grommet'; - -export const ContentSpinner = ({ - boxProps, - spinnerProps, -}: { - boxProps?: BoxProps; - spinnerProps?: SpinnerProps; -}) => ( - - - -); diff --git a/src/frontend/apps/standalone_site/src/components/Spinner/index.tsx b/src/frontend/apps/standalone_site/src/components/Spinner/index.tsx deleted file mode 100644 index 33012871da..0000000000 --- a/src/frontend/apps/standalone_site/src/components/Spinner/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './ContentSpinner'; diff --git a/src/frontend/packages/lib_components/src/common/Loader/BoxLoader.spec.tsx b/src/frontend/packages/lib_components/src/common/Loader/BoxLoader.spec.tsx new file mode 100644 index 0000000000..28cf20f4b5 --- /dev/null +++ b/src/frontend/packages/lib_components/src/common/Loader/BoxLoader.spec.tsx @@ -0,0 +1,50 @@ +import { screen } from '@testing-library/react'; +import { render } from 'lib-tests'; +import React from 'react'; + +import { BoxLoader } from './BoxLoader'; + +describe(``, () => { + it('renders a loader', () => { + render(); + + expect(screen.getByRole('status')).toHaveClass('c__loader'); + expect(screen.getByLabelText('loader')).toHaveAttribute( + 'aria-live', + 'polite', + ); + }); + + it('renders a loader with white background', () => { + render(); + + expect(screen.getByLabelText('loader')).toHaveStyleRule( + 'background-color', + '#ffffff', + ); + }); + + it('renders a loader with small size', () => { + render(); + + expect(screen.getByRole('status')).toHaveClass('c__loader--small'); + }); + + it('renders a loader with boxProps', () => { + render( + , + ); + + expect(screen.getByLabelText('loader')).toHaveStyleRule('margin', '555px'); + }); + + it('renders a loader with aria-label', () => { + render(); + + expect(screen.getByLabelText('My aria label')).toBeInTheDocument(); + }); +}); diff --git a/src/frontend/packages/lib_components/src/common/Loader/BoxLoader.tsx b/src/frontend/packages/lib_components/src/common/Loader/BoxLoader.tsx new file mode 100644 index 0000000000..8035f0fd2e --- /dev/null +++ b/src/frontend/packages/lib_components/src/common/Loader/BoxLoader.tsx @@ -0,0 +1,37 @@ +import { Loader } from '@openfun/cunningham-react'; +import { Box, BoxProps } from 'grommet'; +import { ComponentPropsWithoutRef } from 'react'; + +type LoaderProps = ComponentPropsWithoutRef; +export interface BoxLoaderProps extends LoaderProps { + boxProps?: BoxProps; + whiteBackground?: boolean; +} +export const BoxLoader = ({ + boxProps, + whiteBackground, + ...loaderProps +}: BoxLoaderProps) => { + let boxPropsAdd: BoxProps = { ...boxProps }; + if (whiteBackground) { + boxPropsAdd = { + ...boxProps, + background: 'white', + round: 'full', + pad: '2px', + }; + } + + return ( + + + + ); +}; diff --git a/src/frontend/packages/lib_components/src/common/Loader/CenterLoader.tsx b/src/frontend/packages/lib_components/src/common/Loader/CenterLoader.tsx deleted file mode 100644 index 142e02d1d3..0000000000 --- a/src/frontend/packages/lib_components/src/common/Loader/CenterLoader.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Loader } from '@openfun/cunningham-react'; -import { Box, BoxProps } from 'grommet'; -import { ComponentPropsWithoutRef } from 'react'; - -type LoaderProps = ComponentPropsWithoutRef; -interface CenterLoaderProps { - boxProps?: BoxProps; - loaderProps?: LoaderProps; -} -export const CenterLoader = ({ boxProps, loaderProps }: CenterLoaderProps) => ( - - - -); diff --git a/src/frontend/packages/lib_components/src/common/Loader/index.spec.tsx b/src/frontend/packages/lib_components/src/common/Loader/index.spec.tsx deleted file mode 100644 index c097a61026..0000000000 --- a/src/frontend/packages/lib_components/src/common/Loader/index.spec.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { screen } from '@testing-library/react'; -import { render } from 'lib-tests'; -import React from 'react'; - -import { Loader, Spinner } from '.'; - -for (const Component of [Spinner, Loader]) { - describe(`<${Component.name} />`, () => { - it('renders a spinner as an accessible status region', () => { - render( - - Loading some object... - , - ); - - const region = screen.getByRole('status', { - name: 'Loading some object...', - }); - expect(region).toHaveAttribute('aria-live', 'polite'); - }); - - it('renders a spinner as an accessible alert region', () => { - render( - - Loading some important object... - , - ); - - const region = screen.getByRole('alert', { - name: 'Loading some important object...', - }); - expect(region).toHaveAttribute('aria-live', 'assertive'); - }); - - it('renders a spinner that is hidden from the accessibility tree', () => { - render(); - expect(screen.queryByRole('status')).toBeNull(); - expect(screen.queryByRole('alert')).toBeNull(); - }); - }); -} diff --git a/src/frontend/packages/lib_components/src/common/Loader/index.tsx b/src/frontend/packages/lib_components/src/common/Loader/index.tsx index e5e5644688..604d98dc09 100644 --- a/src/frontend/packages/lib_components/src/common/Loader/index.tsx +++ b/src/frontend/packages/lib_components/src/common/Loader/index.tsx @@ -1,120 +1 @@ -import { Box } from 'grommet'; -import { normalizeColor } from 'grommet/utils'; -import { theme } from 'lib-common'; -import React, { PropsWithChildren, useState } from 'react'; -import styled from 'styled-components'; -import { v4 as uuidv4 } from 'uuid'; - -/** - * Visually move an element offscreen, so it is not visible while still present in the - * accessibility tree and for screen reader users. - */ -const Offscreen = styled.div` - border: 0; - clip: rect(0, 0, 0, 0); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -`; - -const Preloader = styled(Box)` - width: 100%; - height: 100%; - top: 0px; - position: fixed; - z-index: 99999; - background-color: rgba(255, 255, 255, 0.4); -`; - -export interface SpinnerLookProps { - color?: string; - size?: 'small' | 'medium' | 'large'; -} - -const SpinnerLook = styled.div` - border: 0.125rem solid transparent; - border-left-color: ${(props) => - normalizeColor(props.color || 'brand', theme)}; - border-top-color: ${(props) => normalizeColor(props.color || 'brand', theme)}; - border-radius: 50%; - width: ${(props) => - props.size === 'small' - ? '1rem' - : props.size === 'medium' - ? '2rem' - : '3rem'}; - height: ${(props) => - props.size === 'small' - ? '1rem' - : props.size === 'medium' - ? '2rem' - : '3rem'}; - animation: spin 0.8s linear infinite; - display: inline-block; - margin: 0 auto; - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -`; - -interface SpinnerProps extends SpinnerLookProps { - 'aria-hidden'?: boolean; - role?: 'alert' | 'status'; -} - -/** - * Displays a rotating CSS loader - * @param aria-hidden Passthrough to remove the whole spinner from accessible tree. - * @param role The role of the aria region. Informs aria-live. Defaults to "status". - * @param size Set of available sizes for the spinner. Defaults to "medium". - * @param color Color of the rotating spinner. Defaults to "brand". - */ -export const Spinner = (props: PropsWithChildren) => { - const { children } = props; - const ariaHidden = props['aria-hidden'] || false; - const role = props.role || 'status'; - const size = props.size || 'medium'; - - const [uniqueID] = useState(uuidv4()); - - return ( - - - {children} - - ); -}; - -/** - * Displays a full-page, fixed transparent gray overlay with a rotating CSS loader. - * @param aria-hidden Passthrough to remove the whole spinner from accessible tree. - * @param role The role of the aria region. Informs aria-live. Defaults to "status". - * @param size Set of available sizes for the spinner. Defaults to "medium". - */ -export const Loader = (props: PropsWithChildren) => { - const ariaHidden = props['aria-hidden'] || false; - - return ( - - - - ); -}; +export { BoxLoader } from './BoxLoader'; diff --git a/src/frontend/packages/lib_components/src/common/index.tsx b/src/frontend/packages/lib_components/src/common/index.tsx index d0643eb7c1..53d2f9e4c3 100644 --- a/src/frontend/packages/lib_components/src/common/index.tsx +++ b/src/frontend/packages/lib_components/src/common/index.tsx @@ -13,7 +13,6 @@ export * from './Headings'; export * from './ItemList'; export * from './List'; export * from './Loader'; -export * from './Loader/CenterLoader'; export * from './Modal'; export * from './NoSelectBox'; export * from './ObjectStatusPicker'; From e61b477ddd3f95e7f32710a7278da75adc003432 Mon Sep 17 00:00:00 2001 From: Anthony Le Courric Date: Wed, 4 Oct 2023 09:39:19 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20replace=20th?= =?UTF-8?q?e=20loaders=20with=20Cunningham=20Loader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace all the loaders with Cunningham Loader --- CHANGELOG.md | 1 + .../apps/classroom/components/Routes.tsx | 4 +- .../Dashboard/DashboardInstructor/index.tsx | 4 +- .../Dashboard/DashboardStudent/index.tsx | 9 +- .../components/Dashboard/index.spec.tsx | 6 +- .../deposit/components/Dashboard/index.tsx | 10 +- .../apps/deposit/components/Routes.tsx | 4 +- .../apps/markdown/components/Routes.tsx | 4 +- .../components/App/AppContentLoader/index.tsx | 4 +- .../apps/lti_site/components/App/index.tsx | 4 +- .../components/Dashboard/index.spec.tsx | 6 +- .../lti_site/components/LTIRoutes/index.tsx | 4 +- .../components/PlaylistPage/index.spec.tsx | 10 +- .../PlaylistPortability/index.spec.tsx | 2 +- .../components/PlaylistPortability/index.tsx | 8 +- .../SelectContent/SelectContentTabs/index.tsx | 4 +- .../SelectContentTargetedResource/index.tsx | 4 +- .../src/features/App/AppConfig.spec.tsx | 12 +- .../src/features/App/AppConfig.tsx | 10 +- .../src/features/App/AppRoutes.tsx | 33 ++--- .../ContentsWrapper/ContentsWrapper.spec.tsx | 6 +- .../ManageAPIState/ManageAPIState.spec.tsx | 6 +- .../ManageAPIState/ManageAPIState.tsx | 4 +- .../components/Read/ClassRooms.spec.tsx | 6 +- .../Live/components/Read/Lives.spec.tsx | 6 +- .../components/Update/LiveUpdate.spec.tsx | 6 +- .../Video/components/Read/Videos.spec.tsx | 6 +- .../components/Update/VideoUpdate.spec.tsx | 6 +- .../PagesApi/components/PagesApi.spec.tsx | 2 +- .../features/PagesApi/components/PagesApi.tsx | 6 +- .../Playlist/components/PlaylistForm.tsx | 10 +- .../components/PlaylistUserList.tsx | 10 +- .../components/SearchUserList.tsx | 4 +- .../components/UpdatePlaylistPage.tsx | 4 +- .../components/AcceptRejectButtons.tsx | 4 +- .../components/PortabilityRequests.tsx | 4 +- .../components/DashboardClassroom/index.tsx | 6 +- .../DashboardClassroomInstructor/index.tsx | 6 +- .../src/common/Button/ButtonLoader/index.tsx | 17 +-- .../src/common/ObjectStatusPicker/index.tsx | 7 +- .../src/common/UploadForm/index.tsx | 10 +- .../src/utils/useFetchButton.spec.tsx | 4 +- .../src/utils/useFetchButton.tsx | 15 +- .../src/components/MarkdownEditor/index.tsx | 10 +- .../src/components/MarkdownViewer/index.tsx | 4 +- .../src/components/MdxRenderer/index.tsx | 4 +- .../DashboardLiveTabAttendance/index.spec.tsx | 2 +- .../DashboardLiveTabAttendance/index.tsx | 15 +- .../DashboardTabStatistics/index.tsx | 4 +- .../common/VideoWidgetProvider/index.spec.tsx | 4 +- .../widgets/LicenseManager/index.tsx | 4 +- .../widgets/UploadVideo/index.tsx | 5 +- .../VODCreation/HarvestVOD/index.spec.tsx | 2 +- .../VODCreation/PublishVOD/index.spec.tsx | 2 +- .../widgets/VODCreation/index.tsx | 6 +- .../widgets/WidgetThumbnail/index.spec.tsx | 4 +- .../widgets/WidgetThumbnail/index.tsx | 132 +++++++++--------- .../VideoWizard/ConfigureLiveButton/index.tsx | 4 +- .../src/components/live/Student/Dashboard.tsx | 4 +- .../StartLiveButton/index.spec.tsx | 6 +- .../StartLiveButton/index.tsx | 19 ++- .../StopLiveButton/index.spec.tsx | 8 +- .../StopLiveButton/index.tsx | 12 +- .../TeacherLiveLifecycleControls/index.tsx | 10 +- .../StartRecording/index.tsx | 33 +++-- .../StopRecording/index.tsx | 35 +++-- .../live/common/Chat/ChatLayout/index.tsx | 7 +- .../common/ConverseInitializer/index.spec.tsx | 10 +- .../live/common/ConverseInitializer/index.tsx | 13 +- 69 files changed, 321 insertions(+), 336 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9456623a0c..56afb8df3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ Versioning](https://semver.org/spec/v2.0.0.html). ### Changed - Replace grommet Heading (#2410) +- Replace all the loaders by Cunningham Loader (#2436) - Upgrade to python 3.11 - Upgrade channels and channels-redis to version 4 diff --git a/src/frontend/apps/lti_site/apps/classroom/components/Routes.tsx b/src/frontend/apps/lti_site/apps/classroom/components/Routes.tsx index 60bfc87849..d531ff6d2c 100644 --- a/src/frontend/apps/lti_site/apps/classroom/components/Routes.tsx +++ b/src/frontend/apps/lti_site/apps/classroom/components/Routes.tsx @@ -1,10 +1,10 @@ import { DASHBOARD_CLASSROOM_ROUTE } from 'lib-classroom'; import { lazyImport } from 'lib-common'; import { + BoxLoader, ErrorComponents, FULL_SCREEN_ERROR_ROUTE, FullScreenError, - Loader, WithParams, builderFullScreenErrorRoute, useAppConfig, @@ -37,7 +37,7 @@ const Routes = () => { return ( - }> + }> {isLoading ? ( - + ) : isError ? ( ) : ( diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx index 612ec140b5..b92937320f 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx @@ -1,5 +1,10 @@ import { Box, Grid, Paragraph } from 'grommet'; -import { FileDepository, Heading, Loader, useResponsive } from 'lib-components'; +import { + BoxLoader, + FileDepository, + Heading, + useResponsive, +} from 'lib-components'; import React from 'react'; import { FormattedMessage, defineMessages } from 'react-intl'; @@ -63,7 +68,7 @@ export const DashboardStudent = ({ fileDepository }: DashboardStudentProps) => { {isLoading ? ( - + ) : isError ? ( ) : ( diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.spec.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.spec.tsx index d676b40c88..4f2dcd01df 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.spec.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.spec.tsx @@ -81,7 +81,7 @@ describe('', () => { fetchMock.get('/api/filedepositories/1/', fileDepositoryDeferred.promise); render(); - screen.getByText('Loading file depository...'); + screen.getByLabelText('Loading file depository...'); fileDepositoryDeferred.resolve(fileDepository); await screen.findByText('File depository loaded.'); expect(screen.getByText('Student view')).toBeInTheDocument(); @@ -98,7 +98,7 @@ describe('', () => { fetchMock.get('/api/filedepositories/1/', fileDepositoryDeferred.promise); render(); - screen.getByText('Loading file depository...'); + screen.getByLabelText('Loading file depository...'); fileDepositoryDeferred.resolve(fileDepository); await screen.findByText('File depository loaded.'); expect(screen.getByText('Instructor view')).toBeInTheDocument(); @@ -123,7 +123,7 @@ describe('', () => { render(, { queryOptions: { client: queryClient }, }); - screen.getByText('Loading file depository...'); + screen.getByLabelText('Loading file depository...'); fileDepositoryDeferred.resolve(500); expect( await screen.findByText('File depository not loaded!'), diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx index 95a88032c3..7ec94a107b 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx @@ -1,9 +1,10 @@ -import { Box, Spinner, ThemeContext, ThemeType } from 'grommet'; +import { Loader } from '@openfun/cunningham-react'; +import { Box, ThemeContext, ThemeType } from 'grommet'; import { normalizeColor } from 'grommet/utils'; import { theme } from 'lib-common'; import { UploadManager, useCurrentResourceContext } from 'lib-components'; import React, { Fragment } from 'react'; -import { FormattedMessage, defineMessages } from 'react-intl'; +import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { depositAppData } from 'apps/deposit/data/depositAppData'; import { useFileDepository } from 'apps/deposit/data/queries'; @@ -66,6 +67,7 @@ const extendedTheme: ThemeType = { }; const Dashboard = () => { + const intl = useIntl(); const [context] = useCurrentResourceContext(); const canUpdate = context.permissions.can_update; @@ -94,9 +96,7 @@ const Dashboard = () => { useFileDepositoryStatus === 'loading' ) { content = ( - - - + ); } diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Routes.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Routes.tsx index 5b0402e472..c2b69bc2af 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Routes.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Routes.tsx @@ -1,8 +1,8 @@ import { + BoxLoader, ErrorComponents, FULL_SCREEN_ERROR_ROUTE, FullScreenError, - Loader, WithParams, builderFullScreenErrorRoute, useAppConfig, @@ -23,7 +23,7 @@ const RoutesDeposit = () => { const appData = useAppConfig(); return ( - }> + }> } /> diff --git a/src/frontend/apps/lti_site/apps/markdown/components/Routes.tsx b/src/frontend/apps/lti_site/apps/markdown/components/Routes.tsx index 5a9f98d80e..e580c20a72 100644 --- a/src/frontend/apps/lti_site/apps/markdown/components/Routes.tsx +++ b/src/frontend/apps/lti_site/apps/markdown/components/Routes.tsx @@ -1,9 +1,9 @@ import { lazyImport } from 'lib-common'; import { + BoxLoader, ErrorComponents, FULL_SCREEN_ERROR_ROUTE, FullScreenError, - Loader, UploadManager, WithParams, builderFullScreenErrorRoute, @@ -35,7 +35,7 @@ const RoutesMarkdown = () => { const markdownDocument = MarkdownAppData.markdownDocument; return ( - }> + }> diff --git a/src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx b/src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx index 3b89401bfc..263a895ff7 100644 --- a/src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx +++ b/src/frontend/apps/lti_site/components/App/AppContentLoader/index.tsx @@ -5,9 +5,9 @@ import { Grommet } from 'grommet'; import { colors, theme } from 'lib-common'; import { BoundaryScreenError, + BoxLoader, CurrentResourceContextProvider, DecodedJwtLTI, - Loader, ResourceContext, User, appNames, @@ -210,7 +210,7 @@ const AppContentLoader = () => { }, }} /> - }> + }> diff --git a/src/frontend/apps/lti_site/components/App/index.tsx b/src/frontend/apps/lti_site/components/App/index.tsx index 8975351272..fb6620407d 100644 --- a/src/frontend/apps/lti_site/components/App/index.tsx +++ b/src/frontend/apps/lti_site/components/App/index.tsx @@ -1,4 +1,4 @@ -import { AppConfigProvider, Loader } from 'lib-components'; +import { AppConfigProvider, BoxLoader } from 'lib-components'; import React, { Suspense, lazy } from 'react'; import { parseDataElements } from 'utils/parseDataElements/parseDataElements'; @@ -14,7 +14,7 @@ export const App = () => { return ( - }> + }> diff --git a/src/frontend/apps/lti_site/components/Dashboard/index.spec.tsx b/src/frontend/apps/lti_site/components/Dashboard/index.spec.tsx index d235e8dd9f..0cc9eda52b 100644 --- a/src/frontend/apps/lti_site/components/Dashboard/index.spec.tsx +++ b/src/frontend/apps/lti_site/components/Dashboard/index.spec.tsx @@ -1,7 +1,7 @@ import { screen } from '@testing-library/react'; import { + BoxLoader, Document, - Loader, Video, decodeJwt, liveState, @@ -61,7 +61,7 @@ describe('', () => { } as any); render( - }> + }> , ); @@ -78,7 +78,7 @@ describe('', () => { } as any); render( - }> + }> , ); diff --git a/src/frontend/apps/lti_site/components/LTIRoutes/index.tsx b/src/frontend/apps/lti_site/components/LTIRoutes/index.tsx index 26350cdeb6..2f13c0a213 100644 --- a/src/frontend/apps/lti_site/components/LTIRoutes/index.tsx +++ b/src/frontend/apps/lti_site/components/LTIRoutes/index.tsx @@ -1,9 +1,9 @@ import { + BoxLoader, DASHBOARD_ROUTE, ErrorComponents, FULL_SCREEN_ERROR_ROUTE, FullScreenError, - Loader, UPLOAD_FORM_ROUTE, UploadForm, UploadHandlers, @@ -58,7 +58,7 @@ export const LTIInnerRoutes = () => {
- }> + }> } /> diff --git a/src/frontend/apps/lti_site/components/PlaylistPage/index.spec.tsx b/src/frontend/apps/lti_site/components/PlaylistPage/index.spec.tsx index 6503cd5f1d..8d0fd018cf 100644 --- a/src/frontend/apps/lti_site/components/PlaylistPage/index.spec.tsx +++ b/src/frontend/apps/lti_site/components/PlaylistPage/index.spec.tsx @@ -1,5 +1,5 @@ import { screen } from '@testing-library/react'; -import { Loader, modelName, useAppConfig } from 'lib-components'; +import { BoxLoader, modelName, useAppConfig } from 'lib-components'; import { render } from 'lib-tests'; import React, { Suspense } from 'react'; @@ -40,12 +40,12 @@ describe('', () => { } as any); render( - }> + }> , ); - expect(screen.getByText('Loading playlist...')).toBeInTheDocument(); + expect(screen.getByLabelText('Loading playlist...')).toBeInTheDocument(); await screen.findByText('Dashboard'); }); @@ -62,12 +62,12 @@ describe('', () => { } as any); render( - }> + }> , ); - expect(screen.getByText('Loading playlist...')).toBeInTheDocument(); + expect(screen.getByLabelText('Loading playlist...')).toBeInTheDocument(); await screen.findByText('Dashboard'); }); }); diff --git a/src/frontend/apps/lti_site/components/PlaylistPortability/index.spec.tsx b/src/frontend/apps/lti_site/components/PlaylistPortability/index.spec.tsx index 0e9f1bec86..5a325d5c03 100644 --- a/src/frontend/apps/lti_site/components/PlaylistPortability/index.spec.tsx +++ b/src/frontend/apps/lti_site/components/PlaylistPortability/index.spec.tsx @@ -55,7 +55,7 @@ describe('', () => { render(); - screen.getByText('Loading playlist...'); + screen.getByLabelText('Loading playlist...'); expect(fetchMock.lastCall()![0]).toEqual( `/api/playlists/${currentPlaylist.id}/`, diff --git a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx index 099bb5c2a6..ad8a95cec2 100644 --- a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx +++ b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx @@ -1,5 +1,5 @@ -import { Input } from '@openfun/cunningham-react'; -import { Box, Button, Spinner, Text } from 'grommet'; +import { Input, Loader } from '@openfun/cunningham-react'; +import { Box, Button, Text } from 'grommet'; import { AddCircle, Trash } from 'grommet-icons'; import { CopyClipboard, @@ -264,9 +264,7 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => { usePlaylistStatus === 'loading' ) { content = ( - - - + ); } diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx index c8582aaee2..b3f3d798cf 100644 --- a/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx +++ b/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx @@ -3,10 +3,10 @@ import { deepMerge } from 'grommet/utils'; import { Document as DocumentIcon } from 'grommet-icons'; import { theme as baseTheme } from 'lib-common'; import { + BoxLoader, Document, Live, LiveModeType, - Loader, PlaySVG, Playlist, Video, @@ -243,7 +243,7 @@ export const SelectContentTabs = ({ )} {appTabs.map((LazyComponent, index) => ( - }> + }> {playlist && ( }>, ); content = ( - }> + }> { it('should have features active', async () => { render(My app); - expect( - screen.getByRole('alert', { - name: /spinner/i, - }), - ).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); deferredConfig.resolve(config); @@ -266,11 +262,7 @@ describe('AppConfig', () => { deferredConfig.resolve(config); render(My app); - expect( - screen.getByRole('alert', { - name: /spinner/i, - }), - ).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); window.isCDNLoaded = true; act(() => { diff --git a/src/frontend/apps/standalone_site/src/features/App/AppConfig.tsx b/src/frontend/apps/standalone_site/src/features/App/AppConfig.tsx index 86d7925cee..1298eedf71 100644 --- a/src/frontend/apps/standalone_site/src/features/App/AppConfig.tsx +++ b/src/frontend/apps/standalone_site/src/features/App/AppConfig.tsx @@ -1,9 +1,13 @@ -import { useP2PConfig, useSentry, useSiteConfig } from 'lib-components'; +import { + BoxLoader, + useP2PConfig, + useSentry, + useSiteConfig, +} from 'lib-components'; import { PropsWithChildren, useEffect, useState } from 'react'; import { RawIntlProvider } from 'react-intl'; import { useConfig } from 'api/useConfig'; -import { ContentSpinner } from 'components/Spinner'; import { featureContentLoader, useContentFeatures } from 'features/Contents'; import { useLanguage } from 'features/Language'; @@ -63,7 +67,7 @@ const AppConfig = ({ children }: PropsWithChildren) => { }, [setSentry, setP2PConfig, config, setSiteConfig]); if (!isConfigReady) { - return ; + return ; } return {children}; diff --git a/src/frontend/apps/standalone_site/src/features/App/AppRoutes.tsx b/src/frontend/apps/standalone_site/src/features/App/AppRoutes.tsx index 7b779a13bd..c0b5bd30f5 100644 --- a/src/frontend/apps/standalone_site/src/features/App/AppRoutes.tsx +++ b/src/frontend/apps/standalone_site/src/features/App/AppRoutes.tsx @@ -1,11 +1,10 @@ import { lazyImport } from 'lib-common'; -import { Loader } from 'lib-components'; +import { BoxLoader } from 'lib-components'; import { Suspense, useEffect } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import { MainLayout } from 'components/Layout'; -import { ContentSpinner } from 'components/Spinner'; import { Text404 } from 'components/Text'; import { useAuthenticator } from 'features/Authentication'; import { Footer } from 'features/Footer'; @@ -59,7 +58,7 @@ const AppRoutes = () => { }, [intl]); if (isLoading) { - return ; + return ; } if (isAuthenticated) { @@ -74,7 +73,7 @@ const AnonymousRoutes = () => { const routes = useRoutes(); if (isPagesLoading) { - return ; + return ; } return ( @@ -90,9 +89,7 @@ const AnonymousRoutes = () => { pad: { horizontal: 'medium', vertical: 'small' }, }} > - } - > + }> @@ -112,9 +109,7 @@ const AnonymousRoutes = () => { pad: { horizontal: 'medium', vertical: 'small' }, }} > - } - > + }> @@ -125,9 +120,7 @@ const AnonymousRoutes = () => { } - > + }> } @@ -152,7 +145,7 @@ const AuthenticatedRoutes = () => { }, [navigate, pathname, routes]); if (isPagesLoading) { - return ; + return ; } return ( @@ -163,7 +156,7 @@ const AuthenticatedRoutes = () => { }> + }> } @@ -172,7 +165,7 @@ const AuthenticatedRoutes = () => { }> + }> } @@ -181,7 +174,7 @@ const AuthenticatedRoutes = () => { }> + }> } @@ -190,7 +183,7 @@ const AuthenticatedRoutes = () => { }> + }> } @@ -201,7 +194,7 @@ const AuthenticatedRoutes = () => { key={route} path={route} element={ - }> + }> } @@ -211,7 +204,7 @@ const AuthenticatedRoutes = () => { }> + }> } diff --git a/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsWrapper/ContentsWrapper.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsWrapper/ContentsWrapper.spec.tsx index 924cc45ae9..5edd30cb28 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsWrapper/ContentsWrapper.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsWrapper/ContentsWrapper.spec.tsx @@ -58,11 +58,7 @@ describe('', () => { test('renders ContentsWrapper with Loading', () => { render(); - expect( - screen.getByRole('alert', { - name: /spinner/i, - }), - ).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect(screen.getByText('Filter')).toBeInTheDocument(); }); diff --git a/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.spec.tsx index b83cfd7472..2d0a51b5f0 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.spec.tsx @@ -69,11 +69,7 @@ describe('', () => { , ); expect(screen.queryByText(/My state/i)).not.toBeInTheDocument(); - expect( - screen.getByRole('alert', { - name: 'spinner', - }), - ).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); }); test('state with success', () => { diff --git a/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.tsx b/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.tsx index 3c827d6efd..bef39d03c5 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/components/ManageAPIState/ManageAPIState.tsx @@ -1,10 +1,10 @@ import { Box, Text } from 'grommet'; import { Alert } from 'grommet-icons'; +import { BoxLoader } from 'lib-components'; import { Fragment, PropsWithChildren, ReactElement } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { ReactComponent as ContentsIcon } from 'assets/svg/iko_webinairesvg.svg'; -import { ContentSpinner } from 'components/Spinner'; const messages = defineMessages({ NoThing: { @@ -82,7 +82,7 @@ const ManageAPIState = ({ ); } } else if (isLoading) { - content = ; + content = ; } else if (hasResult) { content = {children}; } diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRooms.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRooms.spec.tsx index 50c2ff7d53..cea707371d 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRooms.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRooms.spec.tsx @@ -87,7 +87,7 @@ describe('', () => { client: queryClient, }, }); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/Sorry, an error has occurred./i), @@ -105,7 +105,7 @@ describe('', () => { fetchMock.get('/api/classrooms/?limit=20&offset=0&playlist=', someStuff); render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/There is no classroom to display./i), ).toBeInTheDocument(); @@ -115,7 +115,7 @@ describe('', () => { fetchMock.get('/api/classrooms/?limit=20&offset=0&playlist=', someResponse); render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect(await screen.findByText(/some title/i)).toBeInTheDocument(); expect(screen.getByText(/some description/i)).toBeInTheDocument(); expect(screen.getByText(/some welcome text/i)).toBeInTheDocument(); diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Lives.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Lives.spec.tsx index 2e76a857ce..cdca59f213 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Lives.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Lives.spec.tsx @@ -83,7 +83,7 @@ describe('', () => { client: queryClient, }, }); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/Sorry, an error has occurred./i), @@ -104,7 +104,7 @@ describe('', () => { ); render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/There is no webinar to display./i), ).toBeInTheDocument(); @@ -117,7 +117,7 @@ describe('', () => { ); render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect(await screen.findByText(/New webinar title/)).toBeInTheDocument(); expect(screen.getByText(/New webinar description/)).toBeInTheDocument(); expect( diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Update/LiveUpdate.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Update/LiveUpdate.spec.tsx index fcffc4a523..f20e0f9123 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Update/LiveUpdate.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Update/LiveUpdate.spec.tsx @@ -52,7 +52,7 @@ describe('', () => { }), ); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/My DashboardVideoWrapper/i), ).toBeInTheDocument(); @@ -70,7 +70,7 @@ describe('', () => { deferred.resolve(500); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/Sorry, an error has occurred./i), ).toBeInTheDocument(); @@ -88,7 +88,7 @@ describe('', () => { deferred.resolve(404); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText( /We didn't find the webinar you are looking for./i, diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Videos.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Videos.spec.tsx index 62fec064cc..75ba8a34d8 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Videos.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Videos.spec.tsx @@ -83,7 +83,7 @@ describe('', () => { client: queryClient, }, }); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/Sorry, an error has occurred./i), @@ -104,7 +104,7 @@ describe('', () => { ); render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/There is no video to display./i), ).toBeInTheDocument(); @@ -117,7 +117,7 @@ describe('', () => { ); render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect(await screen.findByText(/New video title/)).toBeInTheDocument(); expect(screen.getByText(/New video description/)).toBeInTheDocument(); expect( diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Update/VideoUpdate.spec.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Update/VideoUpdate.spec.tsx index d033cc34df..7143baacfb 100644 --- a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Update/VideoUpdate.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Update/VideoUpdate.spec.tsx @@ -51,7 +51,7 @@ describe('', () => { }), ); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/My DashboardVideoWrapper/i), ).toBeInTheDocument(); @@ -69,7 +69,7 @@ describe('', () => { deferred.resolve(500); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/Sorry, an error has occurred./i), ).toBeInTheDocument(); @@ -87,7 +87,7 @@ describe('', () => { deferred.resolve(404); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); expect( await screen.findByText(/We don't find the video you are looking for./i), ).toBeInTheDocument(); diff --git a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.spec.tsx b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.spec.tsx index 658cc4d3ad..29dbe34f3d 100644 --- a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.spec.tsx +++ b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.spec.tsx @@ -22,7 +22,7 @@ describe('', () => { render(); - expect(screen.getByRole('alert', { name: /spinner/i })).toBeInTheDocument(); + expect(screen.getByLabelText('loader')).toBeInTheDocument(); deferred.resolve({ status: 200, diff --git a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx index e52142bfe0..51fa9f87f7 100644 --- a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx +++ b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx @@ -1,13 +1,11 @@ import { Box } from 'grommet'; import { normalizeColor } from 'grommet/utils'; import { theme } from 'lib-common'; -import { Heading } from 'lib-components'; +import { BoxLoader, Heading } from 'lib-components'; import ReactMarkdown from 'react-markdown'; import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; -import { ContentSpinner } from 'components/Spinner'; - import { usePageApi } from '../api/usePageApi'; const BoxMarkdown = styled(Box)` @@ -30,7 +28,7 @@ const PagesApi = () => { return ( {isLoading ? ( - + ) : ( - - - - - ); + return ; } if (isError) { diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.tsx index a84e1b6faa..33beb5814f 100644 --- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.tsx +++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/PlaylistUserList.tsx @@ -1,6 +1,6 @@ import { DataGrid, usePagination } from '@openfun/cunningham-react'; import { Box, Button, Text } from 'grommet'; -import { Spinner } from 'lib-components'; +import { BoxLoader } from 'lib-components'; import { useEffect } from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -70,13 +70,7 @@ export const PlaylistUserList = ({ playlistId }: PlaylistUserListProps) => { }, [data?.count, pageSize, setPagesCount]); if (isLoading && !isError) { - return ( - - - - - - ); + return ; } if (isError) { diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/SearchUserList.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/SearchUserList.tsx index babd193f2a..8ebcb99c4b 100644 --- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/SearchUserList.tsx +++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/SearchUserList.tsx @@ -1,6 +1,6 @@ import { Box, Button, Paragraph } from 'grommet'; import { Nullable } from 'lib-common'; -import { Spinner } from 'lib-components'; +import { BoxLoader } from 'lib-components'; import { Dispatch, SetStateAction } from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -75,7 +75,7 @@ export const SearchUserList = ({ ))} )} - {isLoading && } + {isLoading && } {(!users || users.count === 0) && !isError && !isLoading && ( {intl.formatMessage(messages.noResults)} )} diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.tsx index 9d341c84e7..9274e5bdcf 100644 --- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.tsx +++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UpdatePlaylistPage.tsx @@ -1,5 +1,5 @@ import { Box } from 'grommet'; -import { Heading, Spinner, report } from 'lib-components'; +import { BoxLoader, Heading, report } from 'lib-components'; import toast from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; @@ -61,7 +61,7 @@ export const UpdatePlaylistPage = ({ playlistId }: UpdatePlaylistPageProps) => { ); if (isLoading || !playlist) { - return ; + return ; } return ( diff --git a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/AcceptRejectButtons.tsx b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/AcceptRejectButtons.tsx index d647906f44..647582f852 100644 --- a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/AcceptRejectButtons.tsx +++ b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/AcceptRejectButtons.tsx @@ -1,6 +1,6 @@ import { Box, Button } from 'grommet'; import { FormCheckmark, FormClose } from 'grommet-icons'; -import { PortabilityRequest, Spinner } from 'lib-components'; +import { BoxLoader, PortabilityRequest } from 'lib-components'; import { Fragment, useEffect, useState } from 'react'; import { toast } from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; @@ -72,7 +72,7 @@ export const AcceptRejectButtons = ({ }); if (isLoadingRejectPortabilityRequest || isLoadingAcceptPortabilityRequest) { - return ; + return ; } if (!displayButtons) { diff --git a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx index d7e95478c5..08e5e86bcb 100644 --- a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx +++ b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequests.tsx @@ -1,6 +1,6 @@ import { DataGrid, SortModel, usePagination } from '@openfun/cunningham-react'; import { Box, Button, Text } from 'grommet'; -import { CenterLoader, Heading, PortabilityRequest } from 'lib-components'; +import { BoxLoader, Heading, PortabilityRequest } from 'lib-components'; import { useEffect, useMemo, useState } from 'react'; import { IntlShape, defineMessages, useIntl } from 'react-intl'; @@ -193,7 +193,7 @@ export const PortabilityRequests = ({ {intl.formatMessage(messages.title)} - {isLoading && } + {isLoading && } {isError && ( { useClassroomFetchStatus === 'idle' || useClassroomStatus === 'loading' ) { - content = ; + content = ; } return ( - }>{content} + }>{content} ); }; diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx index 7c4173838f..a9e5f99ebd 100644 --- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx +++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx @@ -1,6 +1,6 @@ import { Box, Button, Grid } from 'grommet'; import { Breakpoints, Nullable } from 'lib-common'; -import { Classroom, Spinner, useResponsive } from 'lib-components'; +import { BoxLoader, Classroom, useResponsive } from 'lib-components'; import React, { Suspense, lazy } from 'react'; import { toast } from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; @@ -78,7 +78,7 @@ const DashboardClassroomInstructor = ({ if (!classroom.started) { return ( - }> + }> ); @@ -148,7 +148,7 @@ const DashboardClassroomInstructor = ({ } return ( - }> + }> ); diff --git a/src/frontend/packages/lib_components/src/common/Button/ButtonLoader/index.tsx b/src/frontend/packages/lib_components/src/common/Button/ButtonLoader/index.tsx index 5961213909..4332a55f44 100644 --- a/src/frontend/packages/lib_components/src/common/Button/ButtonLoader/index.tsx +++ b/src/frontend/packages/lib_components/src/common/Button/ButtonLoader/index.tsx @@ -1,6 +1,9 @@ -import { Box, Button, ButtonExtendedProps, Stack } from 'grommet'; +import { Button, ButtonExtendedProps, Stack } from 'grommet'; -import { Spinner, SpinnerLookProps } from '@lib-components/common/Loader'; +import { + BoxLoader, + BoxLoaderProps, +} from '@lib-components/common/Loader/BoxLoader'; export enum ButtonLoaderStyle { DEFAULT = 'DEFAULT', @@ -11,7 +14,7 @@ interface ButtonLoaderProps { isDisabled?: boolean; isSubmitting?: boolean; onClickSubmit?: () => void; - spinnerProps?: SpinnerLookProps; + spinnerProps?: BoxLoaderProps; style?: ButtonLoaderStyle; } @@ -45,13 +48,7 @@ export const ButtonLoader = ({ } {...buttonProps} /> - {isSubmitting && ( - - - - - - )} + {isSubmitting && } ); }; diff --git a/src/frontend/packages/lib_components/src/common/ObjectStatusPicker/index.tsx b/src/frontend/packages/lib_components/src/common/ObjectStatusPicker/index.tsx index eb53149968..f8112455a6 100644 --- a/src/frontend/packages/lib_components/src/common/ObjectStatusPicker/index.tsx +++ b/src/frontend/packages/lib_components/src/common/ObjectStatusPicker/index.tsx @@ -2,7 +2,6 @@ import { Box } from 'grommet'; import React, { Fragment } from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import { Spinner } from '@lib-components/common/Loader'; import { UploadManagerStatus } from '@lib-components/common/UploadManager'; import { UploadableObject, @@ -11,6 +10,8 @@ import { uploadState, } from '@lib-components/types/tracks'; +import { BoxLoader } from '../Loader/BoxLoader'; + const { DELETED, ERROR, PENDING, PROCESSING } = uploadState; const { HARVESTING } = liveState; @@ -141,7 +142,7 @@ export const ObjectStatusPicker = ({ uploadStatus, )) ) { - icon = ; + icon = ; } else if ([DELETED, ERROR, PENDING].includes(object.upload_state)) { icon = '❌'; } else { @@ -149,7 +150,7 @@ export const ObjectStatusPicker = ({ } return ( - + {intl.formatMessage(message)}   {icon} diff --git a/src/frontend/packages/lib_components/src/common/UploadForm/index.tsx b/src/frontend/packages/lib_components/src/common/UploadForm/index.tsx index cd92401bd4..d3c04c30df 100644 --- a/src/frontend/packages/lib_components/src/common/UploadForm/index.tsx +++ b/src/frontend/packages/lib_components/src/common/UploadForm/index.tsx @@ -1,6 +1,6 @@ import { Maybe } from 'lib-common'; import { useEffect, useState } from 'react'; -import { FormattedMessage, defineMessages } from 'react-intl'; +import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import { Link, Navigate } from 'react-router-dom'; import styled from 'styled-components'; @@ -10,7 +10,6 @@ import { } from '@lib-components/common/ErrorComponents/route'; import { Heading } from '@lib-components/common/Headings'; import { LayoutMainArea } from '@lib-components/common/LayoutMainArea'; -import { Loader } from '@lib-components/common/Loader'; import { UploadField } from '@lib-components/common/UploadField'; import { UploadManagerStatus, @@ -22,6 +21,8 @@ import { useAppConfig } from '@lib-components/data/stores/useAppConfig'; import { modelName, uploadableModelName } from '@lib-components/types/models'; import { TimedText, UploadableObject } from '@lib-components/types/tracks'; +import { BoxLoader } from '../Loader/BoxLoader'; + const messages = defineMessages({ linkToDashboard: { defaultMessage: 'Back to dashboard', @@ -115,6 +116,7 @@ export const UploadForm = ({ objectType, parentId, }: UploadFormProps) => { + const intl = useIntl(); const appData = useAppConfig(); const { uploadManagerState, resetUpload } = useUploadManager(); const objectStatus = uploadManagerState[objectId]?.status; @@ -150,9 +152,7 @@ export const UploadForm = ({ if (object === undefined) { return ( - - - + ); } diff --git a/src/frontend/packages/lib_components/src/utils/useFetchButton.spec.tsx b/src/frontend/packages/lib_components/src/utils/useFetchButton.spec.tsx index b4025b0881..dd284120a6 100644 --- a/src/frontend/packages/lib_components/src/utils/useFetchButton.spec.tsx +++ b/src/frontend/packages/lib_components/src/utils/useFetchButton.spec.tsx @@ -59,8 +59,8 @@ describe('useFetchButton', () => { await userEvent.click(screen.getByRole('button', { name: 'my label' })); await screen.findByText('button is loading'); - expect(screen.getByRole('button', { name: 'my label' })).toBeDisabled(); - screen.getByTestId('loader-id'); + expect(screen.getByRole('button', { name: /my label/ })).toBeDisabled(); + expect(screen.getByRole('status')).toBeInTheDocument(); }); it('toasts default error message and resets the state', async () => { diff --git a/src/frontend/packages/lib_components/src/utils/useFetchButton.tsx b/src/frontend/packages/lib_components/src/utils/useFetchButton.tsx index c532fb4ed8..d9e59a89b3 100644 --- a/src/frontend/packages/lib_components/src/utils/useFetchButton.tsx +++ b/src/frontend/packages/lib_components/src/utils/useFetchButton.tsx @@ -1,4 +1,4 @@ -import { Box, Button, ButtonProps, Spinner } from 'grommet'; +import { Box, Button, ButtonProps } from 'grommet'; import React, { CSSProperties, Dispatch, @@ -10,6 +10,8 @@ import React, { import toast from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; +import { BoxLoader } from '..'; + const messages = defineMessages({ defaultErrorMessage: { defaultMessage: 'An error occurred, please try again later.', @@ -52,13 +54,16 @@ export const useFetchButton = ( flex margin="auto" style={{ whiteSpace: 'nowrap' }} + align="center" > {label} {state.type === 'loading' && ( - )} diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx index 0402f4efdd..ca511b77f6 100644 --- a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx +++ b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx @@ -2,7 +2,7 @@ import { Input } from '@openfun/cunningham-react'; import { useQueryClient } from '@tanstack/react-query'; import { Anchor, Box, Button, Footer, Text } from 'grommet'; import { Nullable } from 'lib-common'; -import { Loader, MarkdownDocumentRenderingOptions } from 'lib-components'; +import { BoxLoader, MarkdownDocumentRenderingOptions } from 'lib-components'; import React, { Suspense, useEffect } from 'react'; import { toast } from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; @@ -247,13 +247,13 @@ export const MarkdownEditor = ({ markdownDocumentId }: MarkdownEditorProps) => { // Don't try to load components while the document has not been fetched if (!markdownDocument) { - return ; + return ; } return ( - }> - {isSaving && } + }> + {isSaving && } { ) : ( - + )} { ); if (htmlContent === null) { - return ; + return ; } return ( diff --git a/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.tsx b/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.tsx index c824071212..9528a61a49 100644 --- a/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.tsx +++ b/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.tsx @@ -9,9 +9,9 @@ import DOMPurify from 'dompurify'; import langLatex from 'highlight.js/lib/languages/latex'; // Support LaTeX code highlighting. import { Nullable } from 'lib-common'; import { + BoxLoader, MarkdownDocumentRenderingOptions, MarkdownImage, - Spinner, } from 'lib-components'; import { debounce } from 'lodash'; import React from 'react'; @@ -221,6 +221,6 @@ export const MdxRenderer = ({ dangerouslySetInnerHTML={{ __html: renderedText }} /> ) : ( - + ); }; diff --git a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.spec.tsx index 155c5321e1..1543f5c9b7 100644 --- a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.spec.tsx +++ b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.spec.tsx @@ -42,7 +42,7 @@ describe('', () => { ); render(wrapInVideo(, mockedVideo)); - screen.getByText('Loading attendances...'); + screen.getByLabelText('Loading attendances...'); deferred.resolve({ count: 3, diff --git a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.tsx b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.tsx index b614c5db85..daf568585d 100644 --- a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardLiveTabAttendance/index.tsx @@ -1,11 +1,12 @@ -import { Box, Spinner } from 'grommet'; +import { Box } from 'grommet'; import { + BoxLoader, ErrorComponents, ErrorMessage, ShouldNotHappen, liveState, } from 'lib-components'; -import { FormattedMessage, defineMessages } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; import { useLiveAttendances } from '@lib-video/api/useLiveAttendances'; import { POLL_FOR_ATTENDANCES } from '@lib-video/conf/sideEffects'; @@ -29,6 +30,7 @@ interface InternalProps { } const Internal = ({ live_state, video_id }: InternalProps) => { + const intl = useIntl(); const refetchInterval = [liveState.STOPPING, liveState.RUNNING].includes( live_state, ) @@ -45,11 +47,10 @@ const Internal = ({ live_state, video_id }: InternalProps) => { switch (status) { case 'loading': return ( - - - - - + ); case 'error': return ( diff --git a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx index 9bdbf88e77..8a5997f4fb 100644 --- a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx @@ -1,5 +1,5 @@ import { Box, Grid, Text } from 'grommet'; -import { Loader } from 'lib-components'; +import { BoxLoader } from 'lib-components'; import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -43,7 +43,7 @@ export const DashboardTabStatistics = () => { }); if (isLoading) { - return ; + return ; } return ( diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx index 343049c37c..21f7f6a7a3 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/index.spec.tsx @@ -241,7 +241,9 @@ describe('', () => { // DashboardLiveWidgetThumbnail await screen.findByText('Thumbnail'); - const img = screen.getByRole('img', { name: 'Live video thumbnail' }); + const img = await screen.findByRole('img', { + name: 'Live video thumbnail', + }); expect(img.getAttribute('src')).toEqual( 'https://example.com/default_thumbnail/144', ); diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx index aa0f1128c4..0396e85131 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/LicenseManager/index.tsx @@ -1,5 +1,5 @@ import { Select } from '@openfun/cunningham-react'; -import { CenterLoader, FoldableItem } from 'lib-components'; +import { BoxLoader, FoldableItem } from 'lib-components'; import React, { useEffect, useMemo, useState } from 'react'; import toast from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; @@ -121,7 +121,7 @@ export const LicenseManager = () => { text={intl.formatMessage(messages.selectLicenseInfo)} /> ) : ( - + )} ); diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/UploadVideo/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/UploadVideo/index.tsx index 5d602e8cd3..8dbdfce618 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/UploadVideo/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/UploadVideo/index.tsx @@ -1,6 +1,7 @@ -import { Box, Button, Spinner, Text } from 'grommet'; +import { Box, Button, Text } from 'grommet'; import { Nullable } from 'lib-common'; import { + BoxLoader, FoldableItem, ProgressionBar, UploadManagerStatus, @@ -105,7 +106,7 @@ export const UploadVideo = () => { pad="small" round="xsmall" > - + {intl.formatMessage(messages.videoProcessing)} diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.spec.tsx index 1b84b4cec4..64f7ec74b7 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.spec.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.spec.tsx @@ -63,7 +63,7 @@ describe('HarvestVOD', () => { await waitFor(() => expect( - screen.getByRole('button', { name: 'Generate file' }), + screen.getByRole('button', { name: /Generate file/ }), ).toBeDisabled(), ); expect(useVideo.getState().addResource).not.toHaveBeenCalled(); diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/PublishVOD/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/PublishVOD/index.spec.tsx index 360fdae533..55195ba946 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/PublishVOD/index.spec.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/PublishVOD/index.spec.tsx @@ -86,7 +86,7 @@ describe('PublishVOD', () => { await waitFor(() => expect( - screen.getByRole('button', { name: 'Convert into VOD' }), + screen.getByRole('button', { name: /Convert into VOD/ }), ).toBeDisabled(), ); expect(useVideo.getState().addResource).not.toHaveBeenCalled(); diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/index.tsx index ac8f6b71c9..ddba8e3557 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/index.tsx @@ -1,5 +1,5 @@ -import { Box, Paragraph, Spinner } from 'grommet'; -import { FoldableItem, liveState } from 'lib-components'; +import { Box, Paragraph } from 'grommet'; +import { BoxLoader, FoldableItem, liveState } from 'lib-components'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; @@ -64,7 +64,7 @@ export const VODCreation = () => { > {intl.formatMessage(messages.harvestingInProgress)} - + ); diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.spec.tsx index 146958ba37..c76e5d856e 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.spec.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.spec.tsx @@ -81,7 +81,7 @@ describe('', () => { name: 'Delete thumbnail', }), ).toEqual(null); - const img = screen.getByRole('img'); + const img = await screen.findByRole('img'); expect(img.getAttribute('src')).toEqual('path/to/image.png'); screen.getByRole('button', { name: 'Upload an image' }); }); @@ -361,7 +361,7 @@ describe('', () => { name: 'Delete thumbnail', }), ).toEqual(null); - const img = screen.getByRole('img'); + const img = await screen.findByRole('img'); expect(img.getAttribute('src')).toEqual('path/to/image.png'); screen.getByRole('button', { name: 'Upload an image' }); }); diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx index a225484d8f..73c6daaf8d 100644 --- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/index.tsx @@ -2,8 +2,8 @@ import { Box, Button, Stack, Text } from 'grommet'; import { normalizeColor } from 'grommet/utils'; import { Nullable, theme } from 'lib-common'; import { + BoxLoader, FoldableItem, - Loader, PictureSVG, ThumbnailDisplayer, UploadManagerStatus, @@ -137,10 +137,6 @@ export const WidgetThumbnail = ({ isLive = true }: WidgetThumbnailProps) => { } }, [thumbnail?.upload_state, resetUpload, uploadManagerState, thumbnail?.id]); - if (isLoading) { - return ; - } - return ( { } initialOpenValue={true} > - - {!thumbnail || - (thumbnail && !thumbnail.urls && !uploadManagerState[thumbnail.id]) ? ( - - - - ) : ( - + {isLoading ? ( + + ) : ( + + {!thumbnail || + (thumbnail && + !thumbnail.urls && + !uploadManagerState[thumbnail.id]) ? ( - - - - )} + ) : ( + + + + + + + )} - { - handleChange(event); - }} - ref={hiddenFileInputRef} - style={{ display: 'none' }} - type="file" - /> -