refactor: replace Spinner of Shell with the DS one (#430)

* refactor: replace Spinner of Shell with the DS one Refs: WSC-1759 * fix: add Container to match the one in Shell Refs: WSC-1759 --------- Co-authored-by: Dennis <dennis.ceron@zextras.com>
zextras · Nov 26, 2024 · 791e149 · 791e149
1 parent 85404c3
commit 791e149
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 22 deletions.
diff --git a/__mocks__/@zextras/carbonio-shell-ui.tsx b/__mocks__/@zextras/carbonio-shell-ui.tsx
@@ -79,8 +79,6 @@ export const getNotificationManager: typeof Shell.getNotificationManager = () =>
 
 export const SettingsHeader: typeof Shell.SettingsHeader = () => <div>settings header</div>;
 
-export const Spinner: typeof Shell.Spinner = () => <div>spinner</div>;
-
 export const pushHistory: typeof Shell.pushHistory = pushHistoryMock;
 
 export const replaceHistory: typeof Shell.replaceHistory = replaceHistoryMock;

diff --git a/src/chats/components/creationModal/ChatCreationContactSelection.test.tsx b/src/chats/components/creationModal/ChatCreationContactSelection.test.tsx
@@ -100,7 +100,7 @@ describe('Chat Creation Modal Contact Selector - search', () => {
 		await user.type(chipInput, contactUser1.displayName[0]);
 
 		// AutoCompleteRequest trigger an initial "Spinner" state and then render contact list
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		const list2 = await screen.findByTestId('list_creation_modal');
 		expect(list2).toBeVisible();
 		expect(list2.children).toHaveLength(1);
@@ -136,7 +136,7 @@ describe('Chat Creation Modal Contact Selector - search', () => {
 		const chipInput = await screen.findByTestId('chip_input_creation_modal');
 		await user.type(chipInput, contactUser1.displayName[0]);
 
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		const placeholderLabel = await screen.findByText(
 			'There are no items that match this search in your company.'
 		);
@@ -158,7 +158,7 @@ describe('Chat Creation Modal Contact Selector - search', () => {
 		);
 
 		// Initial AutoCompleteRequest trigger an initial "Spinner" state and then render contact list
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		const list = await screen.findByTestId('list_creation_modal');
 		expect(list).toBeVisible();
 		expect(list.children[0].children).toHaveLength(0);
@@ -168,7 +168,7 @@ describe('Chat Creation Modal Contact Selector - search', () => {
 		await user.type(chipInput, contactUser1.displayName[0]);
 
 		// AutoCompleteRequest trigger an initial "Spinner" state and then render the empty contact list
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		const list2 = await screen.findByTestId('list_creation_modal');
 		expect(list2).toBeVisible();
 		expect(list2.children[0].children).toHaveLength(0);
@@ -333,7 +333,7 @@ describe('Add participant Modal Contact Selector', () => {
 		await user.type(chipInput, contactUser2.displayName[0]);
 
 		// AutoCompleteRequest trigger an initial "Spinner" state and then render contact list
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		const list = await screen.findByTestId('list_creation_modal');
 		expect(list).toBeVisible();
 

diff --git a/src/chats/components/creationModal/ChatCreationContactsSelection.tsx b/src/chats/components/creationModal/ChatCreationContactsSelection.tsx
@@ -22,9 +22,9 @@ import {
 	List,
 	Padding,
 	Text,
-	ChipAction
+	ChipAction,
+	Spinner
 } from '@zextras/carbonio-design-system';
-import { Spinner } from '@zextras/carbonio-shell-ui';
 import {
 	debounce,
 	difference,
@@ -339,7 +339,11 @@ const ChatCreationContactsSelection = ({
 
 	const contentToDisplay = useMemo(() => {
 		if (loading) {
-			return <Spinner />;
+			return (
+				<Container>
+					<Spinner color={'primary'} />
+				</Container>
+			);
 		}
 		if (!error) {
 			return <List data-testid="list_creation_modal">{items}</List>;

diff --git a/src/chats/components/infoPanel/conversationActionsAccordion/AddNewMemberAction.test.tsx b/src/chats/components/infoPanel/conversationActionsAccordion/AddNewMemberAction.test.tsx
@@ -92,7 +92,7 @@ describe('Add new member action', () => {
 		const chipInput = await screen.findByTestId('chip_input_creation_modal');
 		await user.type(chipInput, zimbraUser2.displayName[0]);
 
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		const list = await screen.findByTestId('list_creation_modal');
 		expect(list).toBeVisible();
 

diff --git a/src/chats/components/infoPanel/conversationActionsAccordion/AddNewMemberModal.test.tsx b/src/chats/components/infoPanel/conversationActionsAccordion/AddNewMemberModal.test.tsx
@@ -50,7 +50,7 @@ describe('Add new Member Modal', () => {
 			/>
 		);
 
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		await screen.findByTestId('list_creation_modal');
 
 		const title = screen.getByText(new RegExp(`Add new members to ${testRoom.name}`, 'i'));
@@ -87,7 +87,7 @@ describe('Add new Member Modal', () => {
 			/>
 		);
 
-		await screen.findByText('spinner');
+		await screen.findByTestId('spinner');
 		await screen.findByTestId('list_creation_modal');
 
 		const title = screen.getByText(new RegExp(`Add new members to ${testRoom.name}`, 'i'));

diff --git a/src/chats/initChats.tsx b/src/chats/initChats.tsx
@@ -6,8 +6,8 @@
 
 import React, { lazy, Suspense, useEffect } from 'react';
 
-import { Container, ModalManager } from '@zextras/carbonio-design-system';
-import { addRoute, SecondaryBarComponentProps, Spinner } from '@zextras/carbonio-shell-ui';
+import { Container, ModalManager, Spinner } from '@zextras/carbonio-design-system';
+import { addRoute, SecondaryBarComponentProps } from '@zextras/carbonio-shell-ui';
 
 import ConnectionSnackbarManager from './components/ConnectionSnackbarManager';
 import { CHATS_ROUTE, PRODUCT_NAME } from '../constants/appConstants';
@@ -34,7 +34,13 @@ const ChatsMain = (): React.JSX.Element => (
 );
 
 const SecondaryBar = (props: SecondaryBarComponentProps): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
+	<Suspense
+		fallback={
+			<Container>
+				<Spinner color={'primary'} />
+			</Container>
+		}
+	>
 		<ModalManager>
 			<SecondaryBarView {...props} />
 		</ModalManager>

diff --git a/src/settings/initSettings.tsx b/src/settings/initSettings.tsx
@@ -5,8 +5,8 @@
  */
 import React, { lazy, Suspense, useEffect } from 'react';
 
-import { ModalManager } from '@zextras/carbonio-design-system';
-import { addSettingsView, Spinner } from '@zextras/carbonio-shell-ui';
+import { Container, ModalManager, Spinner } from '@zextras/carbonio-design-system';
+import { addSettingsView } from '@zextras/carbonio-shell-ui';
 
 import { CHATS_ROUTE, PRODUCT_NAME } from '../constants/appConstants';
 
@@ -15,7 +15,13 @@ const LazySettingsView = lazy(
 );
 
 const SettingsView = (): React.JSX.Element => (
-	<Suspense fallback={<Spinner />}>
+	<Suspense
+		fallback={
+			<Container>
+				<Spinner color={'primary'} />
+			</Container>
+		}
+	>
 		<ModalManager>
 			<LazySettingsView />
 		</ModalManager>

diff --git a/src/settings/views/SettingsView.test.tsx b/src/settings/views/SettingsView.test.tsx
@@ -21,6 +21,6 @@ describe('SettingsView tests', () => {
 
 	test('SettingsView renders Spinner if session user is not loaded', () => {
 		setup(<SettingsView />);
-		expect(screen.getByText('spinner')).toBeInTheDocument();
+		expect(screen.getByTestId('spinner')).toBeInTheDocument();
 	});
 });
diff --git a/src/settings/views/SettingsView.tsx b/src/settings/views/SettingsView.tsx
@@ -6,15 +6,19 @@
 
 import React, { ReactElement } from 'react';
 
-import { Spinner } from '@zextras/carbonio-shell-ui';
+import { Container, Spinner } from '@zextras/carbonio-design-system';
 
 import useStore from '../../store/Store';
 import Settings from '../components/Settings';
 
 const SettingsView = (): ReactElement => {
 	const id: string | undefined = useStore((store) => store.session.id);
 	if (!id) {
-		return <Spinner data-testid="spinner" />;
+		return (
+			<Container>
+				<Spinner color={'primary'} />
+			</Container>
+		);
 	}
 	return <Settings />;
 };