[MM-57719] Convert form_error.tsx to function component (#27914)

* solve conflicts

* update snapshots

* Fix types

* update snapshots
Этот коммит содержится в:
Tasnim Tantawi
2024-08-28 12:03:41 +03:00
коммит произвёл GitHub
родитель 5030e2cdb2
Коммит 60ffd00d30
27 изменённых файлов: 148 добавлений и 234 удалений

Просмотреть файл

@@ -46,8 +46,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -151,8 +150,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -266,8 +264,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -393,8 +390,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -508,8 +504,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -635,8 +630,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -790,8 +784,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -945,8 +938,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
className="setting-list-item"
>
<hr />
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",

Просмотреть файл

@@ -193,9 +193,8 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -395,9 +394,8 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -197,9 +197,8 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -405,9 +404,8 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -613,9 +611,8 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -821,9 +818,8 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -421,9 +421,8 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -492,9 +492,8 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -994,9 +993,8 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -146,9 +146,8 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -417,9 +416,8 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -574,9 +572,8 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -845,9 +842,8 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -179,9 +179,8 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -313,9 +312,8 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -683,15 +683,13 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
className="error-message"
data-testid="errorMessage"
>
<FormError
<Memo(FormError)
error=""
errors={Array []}
iconClassName="fa-exclamation-triangle"
textClassName="has-warning"
/>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -188,15 +188,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
className="error-message"
data-testid="errorMessage"
>
<FormError
<Memo(FormError)
error=""
errors={Array []}
iconClassName="fa-exclamation-triangle"
textClassName="has-warning"
/>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -242,15 +240,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
className="error-message"
data-testid="errorMessage"
>
<FormError
<Memo(FormError)
error=""
errors={Array []}
iconClassName="fa-exclamation-triangle"
textClassName="has-warning"
/>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -446,15 +442,13 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
className="error-message"
data-testid="errorMessage"
>
<FormError
<Memo(FormError)
error=""
errors={Array []}
iconClassName="fa-exclamation-triangle"
textClassName="has-warning"
/>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -38,9 +38,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -87,9 +86,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -136,9 +134,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -185,9 +182,8 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -50,10 +50,7 @@ exports[`components/OpenIdConvert should match snapshot 1`] = `
className="error-message"
data-testid="errorMessage"
>
<FormError
error={null}
errors={Array []}
/>
<Memo(FormError) />
</div>
</div>
</div>

Просмотреть файл

@@ -459,9 +459,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -810,9 +809,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -1161,9 +1159,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -1512,9 +1509,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_system_
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>

Просмотреть файл

@@ -336,9 +336,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -727,9 +726,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -1120,9 +1118,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -1579,9 +1576,8 @@ exports[`components/admin_console/permission_schemes_settings/permission_team_sc
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>

Просмотреть файл

@@ -266,9 +266,8 @@ exports[`components/PluginManagement should match snapshot 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -543,9 +542,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -629,9 +627,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -906,9 +903,8 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -1185,9 +1181,8 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -1466,9 +1461,8 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -1743,9 +1737,8 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -1997,9 +1990,8 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -2274,9 +2266,8 @@ exports[`components/PluginManagement should match snapshot, text entered into th
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -2558,9 +2549,8 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -2898,9 +2888,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -3206,9 +3195,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -3514,9 +3502,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -3822,9 +3809,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>
@@ -4162,9 +4148,8 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</WithTooltip>

Просмотреть файл

@@ -138,9 +138,8 @@ exports[`SystemUserDetail should match default snapshot 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -330,9 +329,8 @@ exports[`SystemUserDetail should match snapshot if MFA is enabled 1`] = `
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -522,9 +520,8 @@ exports[`SystemUserDetail should not show manage user settings button when user
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -723,9 +720,8 @@ exports[`SystemUserDetail should show manage user settings button as activated 1
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>
@@ -915,9 +911,8 @@ exports[`SystemUserDetail should show manage user settings button as disabled wh
<div
className="error-message"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
/>
</div>
</div>

Просмотреть файл

@@ -107,9 +107,8 @@ exports[`components/emoji/components/AddEmoji should match snapshot 1`] = `
<div
className="backstage-form__footer"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
type="backstage"
/>
<Link
@@ -283,9 +282,8 @@ exports[`components/emoji/components/AddEmoji should select a file and match sna
<div
className="backstage-form__footer"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
type="backstage"
/>
<Link
@@ -423,9 +421,8 @@ exports[`components/emoji/components/AddEmoji should update emoji name and match
<div
className="backstage-form__footer"
>
<FormError
<Memo(FormError)
error={null}
errors={Array []}
type="backstage"
/>
<Link

Просмотреть файл

@@ -3,6 +3,9 @@
import React from 'react';
const TYPE_MODAL = 'modal';
const TYPE_BACKSTAGE = 'backstage';
// accepts either a single error or an array of errors
type Props = {
type?: React.ReactNode;
@@ -11,71 +14,71 @@ type Props = {
iconClassName?: string;
margin?: boolean;
errors?: React.ReactNode[];
}
};
export default class FormError extends React.PureComponent<Props> {
public static defaultProps = {
error: null,
errors: [],
};
public render() {
const {error = null, errors = [], iconClassName, margin, textClassName, type} = this.props;
const EMPTY_ERROR_LIST: React.ReactNode[] = [];
if (!error && errors.length === 0) {
return null;
}
const FormError: React.FC<Props> = ({
error = null,
errors = EMPTY_ERROR_LIST,
iconClassName,
margin,
textClassName,
type,
}) => {
if (!error && errors.length === 0) {
return null;
}
// look for the first truthy error to display
let message = error;
// look for the first truthy error to display
let message = error;
if (!message) {
for (const err of errors) {
if (err) {
message = err;
}
if (!message) {
for (const err of errors) {
if (err) {
message = err;
}
}
}
if (!message) {
return null;
}
if (type === 'modal') {
return (
<div className='form-group'>
<label className='col-sm-12 has-error'>
{message}
</label>
</div>
);
}
if (type === 'backstage') {
return (
<div className='pull-left has-error'>
<label className='control-label'>
{message}
</label>
</div>
);
}
if (margin) {
return (
<div className='form-group has-error'>
<label className='control-label'>
{message}
</label>
</div>
);
}
if (!message) {
return null;
}
if (type === TYPE_MODAL) {
return (
<div className={`col-sm-12 ${textClassName || 'has-error'}`}>
<label className='control-label'>
<i className={`fa ${iconClassName || 'fa-exclamation-circle'}`}/> {message}
</label>
<div className='form-group'>
<label className='col-sm-12 has-error'>{message}</label>
</div>
);
}
}
if (type === TYPE_BACKSTAGE) {
return (
<div className='pull-left has-error'>
<label className='control-label'>{message}</label>
</div>
);
}
if (margin) {
return (
<div className='form-group has-error'>
<label className='control-label'>{message}</label>
</div>
);
}
return (
<div className={`col-sm-12 ${textClassName || 'has-error'}`}>
<label className='control-label'>
<i
className={`fa ${iconClassName || 'fa-exclamation-circle'}`}
/>{' '}
{message}
</label>
</div>
);
};
export default React.memo(FormError);

Просмотреть файл

@@ -409,8 +409,7 @@ exports[`components/integrations/AbstractCommand should match snapshot 1`] = `
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -858,8 +857,7 @@ exports[`components/integrations/AbstractCommand should match snapshot when head
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -1307,8 +1305,7 @@ exports[`components/integrations/AbstractCommand should match snapshot, displays
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"server error",

Просмотреть файл

@@ -223,8 +223,7 @@ exports[`components/integrations/AbstractIncomingWebhook should call action func
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -484,8 +483,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot 1
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -745,8 +743,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -976,8 +973,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -1204,8 +1200,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -1465,8 +1460,7 @@ exports[`components/integrations/AbstractIncomingWebhook should match snapshot,
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"serverError",

Просмотреть файл

@@ -264,8 +264,7 @@ https://test.com/callback2"
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -568,8 +567,7 @@ exports[`components/integrations/AbstractOAuthApp should match snapshot, display
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"serverError",

Просмотреть файл

@@ -309,8 +309,7 @@ callbackUrl2.com
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",

Просмотреть файл

@@ -320,8 +320,7 @@ exports[`components/integrations/bots/AddBot blank 1`] = `
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",

Просмотреть файл

@@ -298,9 +298,8 @@ exports[`components/integrations/InstalledOAuthApp should match snapshot, on err
/>
</div>
</div>
<FormError
<Memo(FormError)
error="error"
errors={Array []}
/>
<div
className="item-details__row"

Просмотреть файл

@@ -392,8 +392,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -960,8 +959,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"serverError",
@@ -989,7 +987,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
</FormattedMessage>
</label>
</div>
</FormError>
</Memo(FormError)>
<Link
className="btn btn-tertiary"
to="/test/integrations/outgoing-oauth2-connections"

Просмотреть файл

@@ -384,8 +384,7 @@ exports[`components/integrations/AddOutgoingOAuthConnection should match snapsho
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",

Просмотреть файл

@@ -459,8 +459,7 @@ https://myothersite.com/api/v2"
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -1180,8 +1179,7 @@ https://myothersite.com/api/v2"
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",
@@ -1900,8 +1898,7 @@ https://myothersite.com/api/v2"
<div
className="backstage-form__footer"
>
<FormError
error={null}
<Memo(FormError)
errors={
Array [
"",

Просмотреть файл

@@ -112,7 +112,7 @@ describe('components/integrations/AbstractOutgoingOAuthConnection', () => {
expect(submitAction).not.toBeCalled();
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('FormError').exists()).toBe(true);
expect(wrapper.find('Memo(FormError)').exists()).toBe(true);
});
test('should call action function', async () => {