IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

loading_spinner.tsx converted to functional component. (#25115)

Browse Source 
* loading_spinner.tsx converted to functional component.

* merging changes revised

* fixing CI failures

* fixing linting errors

* snapshot updation

* Update snapshot

* Update snapshot

* update snapshot

* Update snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Muzakir Shah 2023-11-07 14:51:21 +05:00 committed by GitHub
parent 42b3ef0238
commit 7f457ffed3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 51 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
View File

@ -4,7 +4,7 @@ exports[`components/LoadingImagePreview should match snapshot 1`] = `
<div
className="view-image__loading"
>
<injectIntl(LoadingSpinner) />
<Memo(LoadingSpinner) />
<span
className="loader-percent"
>
@ -17,7 +17,7 @@ exports[`components/LoadingImagePreview should match snapshot 2`] = `
<div
className="view-image__loading"
>
<injectIntl(LoadingSpinner) />
<Memo(LoadingSpinner) />
<span
className="loader-percent"
>

2
webapp/channels/src/components/__snapshots__/pdf_preview.test.jsx.snap
View File

@ -4,7 +4,7 @@ exports[`component/PDFPreview should match snapshot, loading 1`] = `
<div
className="view-image__loading"
>
<injectIntl(LoadingSpinner) />
<Memo(LoadingSpinner) />
</div>
`;

2
webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
View File

@ -19,7 +19,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot while
<div
className="DataGrid_loading"
>
<injectIntl(LoadingSpinner) />
<Memo(LoadingSpinner) />
<MemoizedFormattedMessage
defaultMessage="Loading"
id="admin.data_grid.loading"

2
webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
View File

@ -75,7 +75,7 @@ exports[`AppsFormComponent should set match snapshot 1`] = `
<div
className="apps-form-modal-body-common apps-form-modal-body-loaded"
>
<injectIntl(LoadingSpinner)
<Memo(LoadingSpinner)
style={
Object {
"fontSize": "24px",

128
webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap
View File

@ -19,64 +19,21 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner with text 1`]
loading={true}
text="test"
>
<injectIntl(LoadingSpinner)
<Memo(LoadingSpinner)
text="test"
>
<LoadingSpinner
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
text="test"
<span
className="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
className="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
className="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
test
</span>
</LoadingSpinner>
</injectIntl(LoadingSpinner)>
className="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
test
</span>
</Memo(LoadingSpinner)>
</Memo(LoadingWrapper)>
`;
@ -84,62 +41,19 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner without text
<Memo(LoadingWrapper)
loading={true}
>
<injectIntl(LoadingSpinner)
<Memo(LoadingSpinner)
text={null}
>
<LoadingSpinner
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
text={null}
<span
className="LoadingSpinner"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
className="LoadingSpinner"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
className="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
</span>
</LoadingSpinner>
</injectIntl(LoadingSpinner)>
className="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
</span>
</Memo(LoadingSpinner)>
</Memo(LoadingWrapper)>
`;

7
webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
View File

@ -1,19 +1,18 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {shallow} from 'enzyme';
import React from 'react';
import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
import LoadingSpinner from './loading_spinner';
describe('components/widgets/loadingLoadingSpinner', () => {
test('showing spinner with text', () => {
const wrapper = shallowWithIntl(<LoadingSpinner text='test'/>);
const wrapper = shallow(<LoadingSpinner text='test'/>);
expect(wrapper).toMatchSnapshot();
});
test('showing spinner without text', () => {
const wrapper = shallowWithIntl(<LoadingSpinner/>);
const wrapper = shallow(<LoadingSpinner/>);
expect(wrapper).toMatchSnapshot();
});
});

50
webapp/channels/src/components/widgets/loading/loading_spinner.tsx
View File

@ -1,36 +1,30 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {PureComponent} from 'react';
import type {ReactNode, CSSProperties} from 'react';
import {injectIntl, type IntlShape} from 'react-intl';
import classNames from 'classnames';
import React from 'react';
import {useIntl} from 'react-intl';
type Props = {
text?: ReactNode;
style?: CSSProperties;
intl: IntlShape;
text?: React.ReactNode;
style?: React.CSSProperties;
}
class LoadingSpinner extends PureComponent<Props> {
public static defaultProps: Partial<Props> = {
text: null,
};
public render() {
return (
const LoadingSpinner = ({text = null, style}: Props) => {
const {formatMessage} = useIntl();
return (
<span
id='loadingSpinner'
className={classNames('LoadingSpinner', {'with-text': Boolean(text)})}
style={style}
data-testid='loadingSpinner'
>
<span
id='loadingSpinner'
className={'LoadingSpinner' + (this.props.text ? ' with-text' : '')}
style={this.props.style}
data-testid='loadingSpinner'
>
<span
className='fa fa-spinner fa-fw fa-pulse spinner'
title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
/>
{this.props.text}
</span>
);
}
}
className='fa fa-spinner fa-fw fa-pulse spinner'
title={formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
/>
{text}
</span>
);
};
export default injectIntl(LoadingSpinner);
export default React.memo(LoadingSpinner);