ICU Fixathon - clean up React.Fragment old syntax (#29006)

* ICU Fixathon - clean up React.Fragment old syntax

* enforce use of fragment shorthand over React.Fragment

* use short version of fragment
Этот коммит содержится в:
Pablo Vélez
2024-11-11 18:05:47 +01:00
коммит произвёл GitHub
родитель 2461d0fed6
Коммит 108117ba4d
35 изменённых файлов: 94 добавлений и 93 удалений

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

@@ -32,7 +32,8 @@
"react/style-prop-object": [2, {
"allow": ["Timestamp"]
}],
"formatjs/no-multiple-whitespaces": 2
"formatjs/no-multiple-whitespaces": 2,
"react/jsx-fragments": ["error", "syntax"]
},
"overrides": [
{

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

@@ -927,8 +927,8 @@ class PluginManagement extends OLDAdminSettings<Props, State> {
renderSettings = () => {
const {enableUploads} = this.state;
const enable = this.props.config?.PluginSettings?.Enable;
let serverError = <React.Fragment/>;
let lastMessage = <React.Fragment/>;
let serverError = <></>;
let lastMessage = <></>;
// Using props values to make sure these are set on the server and not just locally
const enableUploadButton = enableUploads && enable && !(this.props.config.PluginSettings && this.props.config.PluginSettings.RequirePluginSignature);

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

@@ -176,7 +176,7 @@ export default class TeamList extends React.PureComponent<Props, State> {
);
}
return (
<React.Fragment>
<>
<div>{serverError}</div>
<AbstractList
headerLabels={headerLabels}
@@ -187,7 +187,7 @@ export default class TeamList extends React.PureComponent<Props, State> {
emptyList={this.props.emptyList}
userId={this.props.userId}
/>
</React.Fragment>
</>
);
}
}

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

@@ -451,10 +451,10 @@ export class AppsForm extends React.PureComponent<Props, State> {
}
return (
<React.Fragment>
<>
{iconComponent}
{title}
</React.Fragment>
</>
);
}
@@ -487,7 +487,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
const {fields, header} = this.props.form;
return (fields || header) && (
<React.Fragment>
<>
{header && (
<AppsFormHeader
id='appsModalHeader'
@@ -495,7 +495,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
/>
)}
{this.renderElements()}
</React.Fragment>
</>
);
}
@@ -549,7 +549,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
}
return (
<React.Fragment>
<>
<div>
{this.state.formError && (
<div>
@@ -571,7 +571,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
</button>
{submitButtons}
</div>
</React.Fragment>
</>
);
}

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

@@ -73,26 +73,26 @@ export default class AppsFormField extends React.PureComponent<Props> {
const displayName = (field.modal_label || field.label) as string;
let displayNameContent: React.ReactNode = (field.modal_label || field.label) as string;
displayNameContent = (
<React.Fragment>
<>
{displayName}
{!field.is_required && (
<span className='light'>
{' (optional)'}
</span>
)}
</React.Fragment>
</>
);
const helpText = field.description;
let helpTextContent: React.ReactNode = <Markdown message={helpText}/>;
if (errorText) {
helpTextContent = (
<React.Fragment>
<>
<Markdown message={helpText}/>
<div className='error-text mt-3'>
{errorText}
</div>
</React.Fragment>
</>
);
}

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

@@ -339,7 +339,7 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
);
const body = this.state.loading ? <LoadingScreen/> : (
<React.Fragment>
<>
<SearchableChannelList
channels={this.activeChannels}
channelsPerPage={CHANNELS_PER_PAGE}
@@ -359,7 +359,7 @@ export default class BrowseChannels extends React.PureComponent<Props, State> {
channelsMemberCount={this.props.channelsMemberCount}
/>
{serverError}
</React.Fragment>
</>
);
const title = (

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

@@ -25,7 +25,7 @@ const ChannelHeaderTitleDirect = ({
const displayName = displayUsername(dmUser, teammateNameDisplaySetting);
return (
<React.Fragment>
<>
{currentUser.id !== dmUser?.id && displayName + ' '}
{currentUser.id === dmUser?.id &&
<FormattedMessage
@@ -34,7 +34,7 @@ const ChannelHeaderTitleDirect = ({
values={{displayName}}
/>}
{isGuest(dmUser?.roles ?? '') && <GuestTag/>}
</React.Fragment>
</>
);
};

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

@@ -48,7 +48,7 @@ const ChannelHeaderTitleGroup = ({
const displayNames = channel.display_name.split(', ');
return (
<React.Fragment>
<>
{displayNames.map((displayName, index) => {
if (!membersMap[displayName]) {
return displayName;
@@ -64,7 +64,7 @@ const ChannelHeaderTitleGroup = ({
</React.Fragment>
);
})}
</React.Fragment>
</>
);
};

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

@@ -105,7 +105,7 @@ export default class ChannelHeaderDropdown extends React.PureComponent<Props> {
});
return (
<React.Fragment>
<>
<MenuItemToggleInfo
show={channel.type !== Constants.DM_CHANNEL && channel.type !== Constants.GM_CHANNEL}
channel={channel}
@@ -344,7 +344,7 @@ export default class ChannelHeaderDropdown extends React.PureComponent<Props> {
/>
</ChannelPermissionGate>
</Menu.Group>
</React.Fragment>
</>
);
}
}

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

@@ -117,7 +117,7 @@ const ChannelNameFormField = (props: Props): JSX.Element => {
}, [displayNameError, urlError]);
return (
<React.Fragment>
<>
<Input
type='text'
autoComplete='off'
@@ -144,7 +144,7 @@ const ChannelNameFormField = (props: Props): JSX.Element => {
error={urlError || props.urlError}
onChange={handleOnURLChange}
/>
</React.Fragment>
</>
);
};

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

@@ -168,7 +168,7 @@ const ConvertGmToChannelModal = (props: Props) => {
);
} else {
subBody = (
<React.Fragment>
<>
<WarningTextSection channelMemberNames={channelMemberNames}/>
{
@@ -199,7 +199,7 @@ const ConvertGmToChannelModal = (props: Props) => {
</div>
}
</React.Fragment>
</>
);
}

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

@@ -37,7 +37,7 @@ export default class FileProgressPreview extends React.PureComponent<Props> {
previewImage = <div className={'file-icon ' + Utils.getIconClassName(fileType)}/>;
fileNameComponent = (
<React.Fragment>
<>
<FilenameOverlay
fileInfo={fileInfo}
compactDisplay={false}
@@ -50,16 +50,16 @@ export default class FileProgressPreview extends React.PureComponent<Props> {
defaultMessage='Processing...'
/>
) : (
<React.Fragment>
<>
<FormattedMessage
id='admin.plugin.uploading'
defaultMessage='Uploading...'
/>
<span>{percentTxt}</span>
</React.Fragment>
</>
)}
</span>
</React.Fragment>
</>
);
if (percent) {

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

@@ -151,7 +151,7 @@ export default class Bots extends React.PureComponent<Props, State> {
return React.cloneElement(child, {filter: props.filter});
});
return (
<React.Fragment>
<>
<div className='bot-disabled'>
<FormattedMessage
id='bots.disabled'
@@ -161,7 +161,7 @@ export default class Bots extends React.PureComponent<Props, State> {
<div className='bot-list__disabled'>
{botsToDisplay}
</div>
</React.Fragment>
</>
);
}
@@ -244,7 +244,7 @@ export default class Bots extends React.PureComponent<Props, State> {
/>
}
helpText={
<React.Fragment>
<>
<FormattedMessage
id='bots.manage.help1'
defaultMessage='Use {botAccounts} to integrate with Mattermost through plugins or the API. Bot accounts are available to everyone on your server. '
@@ -269,7 +269,7 @@ export default class Bots extends React.PureComponent<Props, State> {
a: (chunks: string) => <Link to='/admin_console/integrations/bot_accounts'>{chunks}</Link>,
}}
/>
</React.Fragment>
</>
}
searchPlaceholder={Utils.localizeMessage({id: 'bots.manage.search', defaultMessage: 'Search Bot Accounts'})}
loading={this.state.loading}

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

@@ -121,7 +121,7 @@ export default class DialogElement extends React.PureComponent<Props, State> {
let displayNameContent: React.ReactNode = displayName;
if (optional) {
displayNameContent = (
<React.Fragment>
<>
{displayName + ' '}
<span className='font-weight--normal light'>
<FormattedMessage
@@ -129,26 +129,26 @@ export default class DialogElement extends React.PureComponent<Props, State> {
defaultMessage='(optional)'
/>
</span>
</React.Fragment>
</>
);
} else {
displayNameContent = (
<React.Fragment>
<>
{displayName}
<span className='error-text'>{' *'}</span>
</React.Fragment>
</>
);
}
let helpTextContent: React.ReactNode = helpText;
if (errorText) {
helpTextContent = (
<React.Fragment>
<>
{helpText}
<div className='error-text mt-3'>
{errorText}
</div>
</React.Fragment>
</>
);
}

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

@@ -143,7 +143,7 @@ export default function AddToChannels(props: Props) {
</div>
)}
{props.customMessage.open && (
<React.Fragment>
<>
<div className={'AddToChannels__customMessageTitle ' + props.titleClass}>
<FormattedMessage
id='invitation_modal.guests.custom-message.title'
@@ -159,7 +159,7 @@ export default function AddToChannels(props: Props) {
onChange={(e) => props.setCustomMessage(e.target.value)}
value={props.customMessage.message}
/>
</React.Fragment>
</>
)}
</div>
</div>);

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

@@ -60,10 +60,10 @@ function KeyboardShortcutSequence({shortcut, hideDescription, hoistDescription,
));
return (
<React.Fragment>
<>
<span>{'\t|\t'}</span>
{shortcutKeys}
</React.Fragment>
</>
);
};

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

@@ -110,7 +110,7 @@ export default class LinkTooltip extends React.PureComponent<Props, State> {
'data-channel-mention': attributes['data-channel-mention'],
};
return (
<React.Fragment>
<>
{ReactDOM.createPortal(
<div
style={tooltipContainerStyles}
@@ -132,7 +132,7 @@ export default class LinkTooltip extends React.PureComponent<Props, State> {
>
{children}
</span>
</React.Fragment>
</>
);
}
}

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

@@ -378,9 +378,9 @@ export class CombinedSystemMessage extends React.PureComponent<Props> {
}
return (
<React.Fragment>
<>
{content}
</React.Fragment>
</>
);
}
}

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

@@ -156,13 +156,13 @@ export default class PostBodyAdditionalContent extends React.PureComponent<Props
if (hasValidEmbeddedBinding(this.props.post.props)) {
// TODO Put some log / message if the form is not valid?
return (
<React.Fragment>
<>
{this.props.children}
<EmbeddedBindings
embeds={this.props.post.props.app_bindings}
post={this.props.post}
/>
</React.Fragment>
</>
);
}
}

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

@@ -64,7 +64,7 @@ const PostImage = ({
imageMetadata={imageMetadata}
>
{(safeLink) => (
<React.Fragment>
<>
<SizeAwareImage
className='img-div attachment__image cursor--pointer'
src={safeLink}
@@ -72,7 +72,7 @@ const PostImage = ({
showLoader={true}
onClick={showModal}
/>
</React.Fragment>
</>
)}
</ExternalImage>
</div>

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

@@ -683,7 +683,7 @@ export default class PostList extends React.PureComponent<Props, State> {
aria-label={Utils.localizeMessage({id: 'accessibility.sections.centerContent', defaultMessage: 'message list main region'})}
>
{this.props.isMobileView && (
<React.Fragment>
<>
<FloatingTimestamp
isScrolling={this.state.isScrolling}
postId={this.state.topPostId}
@@ -693,7 +693,7 @@ export default class PostList extends React.PureComponent<Props, State> {
atBottom={Boolean(this.state.atBottom)}
onClick={this.scrollToBottom}
/>
</React.Fragment>
</>
)}
<div
className='post-list-holder-by-time'
@@ -709,7 +709,7 @@ export default class PostList extends React.PureComponent<Props, State> {
<LatestPostReader postIds={this.props.postListIds}/>
<AutoSizer>
{({height, width}) => (
<React.Fragment>
<>
<div>
<Pluggable
pluggableName='ChannelToast'
@@ -740,7 +740,7 @@ export default class PostList extends React.PureComponent<Props, State> {
>
{this.renderRow}
</DynamicSizeList>
</React.Fragment>
</>
)}
</AutoSizer>
</div>

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

@@ -80,7 +80,7 @@ export default class PostReaction extends React.PureComponent<Props, State> {
teamId={teamId}
permissions={[Permissions.ADD_REACTION]}
>
<React.Fragment>
<>
<EmojiPickerOverlay
show={showEmojiPicker}
target={this.props.getDotMenuRef}
@@ -107,7 +107,7 @@ export default class PostReaction extends React.PureComponent<Props, State> {
<EmojiIcon className='icon icon--small'/>
</button>
</WithTooltip>
</React.Fragment>
</>
</ChannelPermissionGate>
);
}

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

@@ -99,13 +99,13 @@ export default class PostRecentReactions extends React.PureComponent<Props, Stat
placement='top'
>
<div>
<React.Fragment>
<>
<EmojiItem
emoji={emoji}
onItemClick={this.handleToggleEmoji}
order={n}
/>
</React.Fragment>
</>
</div>
</WithTooltip>
</ChannelPermissionGate>

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

@@ -25,7 +25,7 @@ const MaxLengthInput: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
});
return (
<Fragment>
<>
<input
className={classes}
defaultValue={defaultValue}
@@ -38,7 +38,7 @@ const MaxLengthInput: FC<InputProps> = forwardRef<HTMLInputElement, InputProps>(
{excess}
</span>
)}
</Fragment>
</>
);
},
);

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

@@ -104,7 +104,7 @@ const SearchHint = (props: Props): JSX.Element => {
}
return (
<React.Fragment>
<>
{props.withTitle && (!props.searchType) &&
<h4 className='search-hint__title'>
<FormattedMessage
@@ -154,7 +154,7 @@ const SearchHint = (props: Props): JSX.Element => {
</div>
</li>))}
</ul>
</React.Fragment>
</>
);
};

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

@@ -210,9 +210,9 @@ export default class Sidebar extends React.PureComponent<Props, State> {
}
return (
<React.Fragment>
<>
{moreDirectChannelsModal}
</React.Fragment>
</>
);
};

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

@@ -173,7 +173,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
}
return (
<React.Fragment>
<>
<Draggable
draggableId={`NEW_CHANNEL_SPACER__${category.id}`}
isDragDisabled={true}
@@ -212,7 +212,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
</span>
</div>
</div>
</React.Fragment>
</>
);
};
@@ -270,7 +270,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
const addHelpLabel = localizeMessage({id: 'sidebar.createDirectMessage', defaultMessage: 'Create new direct message'});
categoryMenu = (
<React.Fragment>
<>
<SidebarCategorySortingMenu
category={category}
handleOpenDirectMessagesModal={this.handleOpenDirectMessagesModal}
@@ -297,7 +297,7 @@ export default class SidebarCategory extends React.PureComponent<Props, State> {
<i className='icon-plus'/>
</button>
</WithTooltip>
</React.Fragment>
</>
);
if (!channelIds || !channelIds.length) {

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

@@ -446,7 +446,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
const shouldShowImg = !this.dimensionsAvailable(dimensions) || this.state.loaded;
return (
<React.Fragment>
<>
{fallback}
<div
className='file-preview__button'
@@ -454,7 +454,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
>
{this.renderImageWithContainerIfNeeded()}
</div>
</React.Fragment>
</>
);
};

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

@@ -514,9 +514,9 @@ export class ToastWrapperClass extends React.PureComponent<Props, State> {
const toastToRender = this.getToastToRender();
return (
<React.Fragment>
<>
{toastToRender}
</React.Fragment>
</>
);
}
}

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

@@ -18,13 +18,13 @@ export default function ColorChooser(props: Props) {
};
return (
<React.Fragment>
<>
<label className='custom-label'>{props.label}</label>
<ColorInput
id={props.id}
value={props.value}
onChange={handleChange}
/>
</React.Fragment>
</>
);
}

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

@@ -130,11 +130,11 @@ export default class ChannelsInput<T extends Channel> extends React.PureComponen
icon = <PrivateChannelIcon className='private-channel-icon'/>;
}
return (
<React.Fragment>
<>
{icon}
{channel.display_name}
<span className='channel-name'>{channel.name}</span>
</React.Fragment>
</>
);
};

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

@@ -151,7 +151,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
return this.getCreateLabel((user as EmailInvite).value);
}
return (
<React.Fragment>
<>
<Avatar
size='lg'
username={(user as UserProfile).username}
@@ -160,21 +160,21 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
{this.renderUserName(user as UserProfile)}
{botBadge}
{guestBadge}
</React.Fragment>
</>
);
}
if ((user as EmailInvite).value && isEmail((user as EmailInvite).value)) {
return (
<React.Fragment>
<>
<MailIcon className='mail-icon'/>
<span>{(user as EmailInvite).value}</span>
</React.Fragment>
</>
);
}
return (
<React.Fragment>
<>
<Avatar
size='sm'
username={(user as UserProfile).username}
@@ -183,7 +183,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
{getDisplayName(user as UserProfile)}
{botBadge}
{guestBadge}
</React.Fragment>
</>
);
};
@@ -203,7 +203,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
};
getCreateLabel = (value: string) => (
<React.Fragment>
<>
<MailPlusIcon className='mail-plus-icon'/>
<FormattedMarkdownMessage
key='widgets.users_emails_input.valid_email'
@@ -211,7 +211,7 @@ export default class UsersEmailsInput extends React.PureComponent<Props, State>
values={{email: value}}
disableLinks={true}
/>
</React.Fragment>
</>
);
Input = (props: InputProps) => {

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

@@ -159,10 +159,10 @@ export default class SubMenuItem extends React.PureComponent<Props, State> {
let textProp = text;
if (icon) {
textProp = (
<React.Fragment>
<>
<span className={classNames(['icon', {'sorting-menu-icon': styleSelectableItem}])}>{icon}</span>
{textProp}
</React.Fragment>
</>
);
}

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

@@ -338,7 +338,7 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
/>
}
>
<React.Fragment>
<>
<PluginChannelHeaderIcon
id='pluginChannelHeaderIcon'
className='icon icon--standard icon__pluginChannelHeader'
@@ -350,7 +350,7 @@ class ChannelHeaderPlug extends React.PureComponent<ChannelHeaderPlugProps, Chan
>
{items.length}
</span>
</React.Fragment>
</>
</WithTooltip>
</CustomToggle>
<CustomMenu

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

@@ -123,8 +123,8 @@ export default function Pluggable(props: Props): JSX.Element | null {
}
return (
<React.Fragment>
<>
{content}
</React.Fragment>
</>
);
}