Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Nov 26, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
61c9fb4
refactor: replace Spinner of Shell with the DS one
rodleyorosa Nov 13, 2024
e62740c
fix: add Container to match the one in Shell
rodleyorosa Nov 15, 2024
ee40331
Merge branch 'devel' into WSC-1759-Replace-Spinner-of-Shell-with-the-…
rodleyorosa Nov 15, 2024
25003c1
Merge remote-tracking branch 'origin/devel' into WSC-1759-Replace-Spi…
CerDennis Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions __mocks__/@zextras/carbonio-shell-ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions src/chats/components/creationModal/ChatCreationContactSelection.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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.'
);
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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();

Expand Down
10 changes: 7 additions & 3 deletions src/chats/components/creationModal/ChatCreationContactsSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>;
Expand Down
2 changes: 1 addition & 1 deletion src/chats/components/infoPanel/conversationActionsAccordion/AddNewMemberAction.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
4 changes: 2 additions & 2 deletions src/chats/components/infoPanel/conversationActionsAccordion/AddNewMemberModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down Expand Up @@ -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'));
Expand Down
12 changes: 9 additions & 3 deletions src/chats/initChats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand Down
12 changes: 9 additions & 3 deletions src/settings/initSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/settings/views/SettingsView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
8 changes: 6 additions & 2 deletions src/settings/views/SettingsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />;
};
Expand Down