refactor(eslint): Enable react/no-children-prop

apps/meteor/client/components/PageSkeleton.tsx

@@ -6,7 +6,9 @@ const PageSkeleton = (): ReactElement => (
 	<Page>
 		<PageHeader title={<Skeleton width='x320' maxWidth='full' />}>
 			<ButtonGroup>
-				<Button children={<Skeleton width='x80' />} disabled />
+				<Button disabled>
+					<Skeleton width='x80' />
+				</Button>
 			</ButtonGroup>
 		</PageHeader>
 		<PageContent>

apps/meteor/client/components/UserCard/UserCardRole.tsx

@@ -3,7 +3,7 @@ import type { ReactNode, ReactElement } from 'react';
 
 const UserCardRole = ({ children }: { children: ReactNode }): ReactElement => (
 	<Box m={2} fontScale='c2'>
-		<Tag children={children} />
+		<Tag>{children}</Tag>
 	</Box>
 );
 

apps/meteor/client/components/UserInfo/UserInfoABACAttribute.tsx

@@ -5,7 +5,7 @@ type UserInfoABACAttributeProps = {
 };
 
 const UserInfoABACAttribute = ({ attribute }: UserInfoABACAttributeProps) => {
-	return <Tag variant='secondary-warning' children={attribute} />;
+	return <Tag variant='secondary-warning'>{attribute}</Tag>;
 };
 
 export default UserInfoABACAttribute;

apps/meteor/client/components/message/content/attachments/structure/AttachmentBlock.tsx

@@ -16,8 +16,9 @@ const AttachmentBlock = ({ pre, color = 'annotation', children }: AttachmentBloc
 			borderInlineStartStyle='solid'
 			borderInlineStartWidth='default'
 			borderInlineStartColor={color}
-			children={children}
-		/>
+		>
+			{children}
+		</Box>
 	</Attachment>
 );
 

apps/meteor/client/portals/SidebarPortal/index.tsx

@@ -8,10 +8,10 @@ const SidebarPortal = ({ children }: { children: ReactNode }) => {
 	return (
 		<FeaturePreview feature='secondarySidebar'>
 			<FeaturePreviewOff>
-				<SidebarPortalV1 children={children} />
+				<SidebarPortalV1>{children}</SidebarPortalV1>
 			</FeaturePreviewOff>
 			<FeaturePreviewOn>
-				<SidebarPortalV2 children={children} />
+				<SidebarPortalV2>{children}</SidebarPortalV2>
 			</FeaturePreviewOn>
 		</FeaturePreview>
 	);

apps/meteor/client/providers/AppsProvider.tsx

@@ -8,7 +8,7 @@ type AppsProviderProps = {
 };
 
 const AppsProvider = ({ children }: AppsProviderProps) => {
-	return <AppsContext.Provider children={children} value={AppClientOrchestratorInstance} />;
+	return <AppsContext.Provider value={AppClientOrchestratorInstance}>{children}</AppsContext.Provider>;
 };
 
 export default AppsProvider;

apps/meteor/client/providers/AttachmentProvider.tsx

@@ -32,7 +32,7 @@ const AttachmentProvider = ({ children, width = 360, height = 360 }: AttachmentP
 		[collapsedByDefault, reducedData, autoLoadEmbedMedias, saveMobileBandwidth, isMobile, width, height],
 	);
 
-	return <AttachmentContext.Provider children={children} value={contextValue} />;
+	return <AttachmentContext.Provider value={contextValue}>{children}</AttachmentContext.Provider>;
 };
 
 export default AttachmentProvider;

apps/meteor/client/providers/AuthenticationProvider/AuthenticationProvider.tsx

@@ -130,7 +130,7 @@ const AuthenticationProvider = ({ children }: AuthenticationProviderProps): Reac
 		[isLoggingIn, loginMethod],
 	);
 
-	return <AuthenticationContext.Provider children={children} value={contextValue} />;
+	return <AuthenticationContext.Provider value={contextValue}>{children}</AuthenticationContext.Provider>;
 };
 
 export default AuthenticationProvider;

apps/meteor/client/providers/AuthorizationProvider.tsx

@@ -35,7 +35,7 @@ const AuthorizationProvider = ({ children }: AuthorizationProviderProps) => {
 		[userId],
 	);
 
-	return <AuthorizationContext.Provider children={children} value={contextValue} />;
+	return <AuthorizationContext.Provider value={contextValue}>{children}</AuthorizationContext.Provider>;
 };
 
 export default AuthorizationProvider;

apps/meteor/client/providers/AvatarUrlProvider.tsx

@@ -34,7 +34,7 @@ const AvatarUrlProvider = ({ children }: AvatarUrlProviderProps) => {
 		};
 	}, []);
 
-	return <AvatarUrlContext.Provider children={children} value={contextValue} />;
+	return <AvatarUrlContext.Provider value={contextValue}>{children}</AvatarUrlContext.Provider>;
 };
 
 export default AvatarUrlProvider;

apps/meteor/client/providers/CustomSoundProvider/CustomSoundProvider.tsx

@@ -126,7 +126,7 @@ const CustomSoundProvider = ({ children }: CustomSoundProviderProps) => {
 		});
 	}, [queryClient, streamAll]);
 
-	return <CustomSoundContext.Provider children={children} value={contextValue} />;
+	return <CustomSoundContext.Provider value={contextValue}>{children}</CustomSoundContext.Provider>;
 };
 
 export default CustomSoundProvider;

apps/meteor/client/providers/LayoutProvider.tsx

@@ -54,7 +54,6 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 
 	return (
 		<LayoutContext.Provider
-			children={children}
 			value={useMemo(
 				() => ({
 					isMobile,
@@ -108,7 +107,9 @@ const LayoutProvider = ({ children }: LayoutProviderProps) => {
 					router,
 				],
 			)}
-		/>
+		>
+			{children}
+		</LayoutContext.Provider>
 	);
 };
 

apps/meteor/client/providers/OmnichannelProvider.tsx

@@ -220,7 +220,7 @@ const OmnichannelProvider = ({ children }: OmnichannelProviderProps) => {
 		isOverMacLimit,
 	]);
 
-	return <OmnichannelContext.Provider children={children} value={contextValue} />;
+	return <OmnichannelContext.Provider value={contextValue}>{children}</OmnichannelContext.Provider>;
 };
 
 export default memo<typeof OmnichannelProvider>(OmnichannelProvider);

apps/meteor/client/providers/RouterProvider.tsx

@@ -11,6 +11,6 @@ type RouterProviderProps = {
 	children?: ReactNode;
 };
 
-const RouterProvider = ({ children }: RouterProviderProps) => <RouterContext.Provider children={children} value={router} />;
+const RouterProvider = ({ children }: RouterProviderProps) => <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;
 
 export default RouterProvider;

apps/meteor/client/providers/ServerProvider.tsx

@@ -104,7 +104,7 @@ const ServerProvider = ({ children }: ServerProviderProps) => {
 		[connected, retryCount, retryTime, status],
 	);
 
-	return <ServerContext.Provider children={children} value={value} />;
+	return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
 };
 
 export default ServerProvider;

apps/meteor/client/providers/SessionProvider.tsx

@@ -15,6 +15,8 @@ type SessionProviderProps = {
 	children?: ReactNode;
 };
 
-const SessionProvider = ({ children }: SessionProviderProps) => <SessionContext.Provider children={children} value={contextValue} />;
+const SessionProvider = ({ children }: SessionProviderProps) => (
+	<SessionContext.Provider value={contextValue}>{children}</SessionContext.Provider>
+);
 
 export default SessionProvider;

apps/meteor/client/providers/SettingsProvider.tsx

@@ -121,7 +121,7 @@ const SettingsProvider = ({ children }: SettingsProviderProps) => {
 		[canManageSettings, querySetting, querySettings, dispatch],
 	);
 
-	return <SettingsContext.Provider children={children} value={contextValue} />;
+	return <SettingsContext.Provider value={contextValue}>{children}</SettingsContext.Provider>;
 };
 
 export default SettingsProvider;

apps/meteor/client/providers/ToastMessagesProvider.tsx

@@ -71,7 +71,7 @@ const ToastMessageInnerProvider = ({ children }: ToastMessageInnerProviderProps)
 		[dispatchToastBar],
 	);
 
-	return <ToastMessagesContext.Provider children={children} value={contextValue} />;
+	return <ToastMessagesContext.Provider value={contextValue}>{children}</ToastMessagesContext.Provider>;
 };
 
 type ToastMessagesProviderProps = {
@@ -81,7 +81,7 @@ type ToastMessagesProviderProps = {
 // eslint-disable-next-line react/no-multi-comp
 const ToastMessagesProvider = ({ children }: ToastMessagesProviderProps) => (
 	<ToastBarProvider>
-		<ToastMessageInnerProvider children={children} />
+		<ToastMessageInnerProvider>{children}</ToastMessageInnerProvider>
 	</ToastBarProvider>
 );
 

apps/meteor/client/providers/TranslationProvider.tsx

@@ -245,7 +245,7 @@ const TranslationProvider = ({ children }: TranslationProviderProps): ReactEleme
 
 	return (
 		<I18nextProvider i18n={i18nextInstance}>
-			<TranslationProviderInner children={children} availableLanguages={availableLanguages} />
+			<TranslationProviderInner availableLanguages={availableLanguages}>{children}</TranslationProviderInner>
 		</I18nextProvider>
 	);
 };
@@ -286,7 +286,7 @@ const TranslationProviderInner = ({
 		[availableLanguages, i18n, t],
 	);
 
-	return <TranslationContext.Provider children={children} value={value} />;
+	return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
 };
 
 export default TranslationProvider;

apps/meteor/client/providers/UserProvider/UserProvider.tsx

@@ -187,7 +187,7 @@ const UserProvider = ({ children }: UserProviderProps): ReactElement => {
 		previousUserId.current = userId;
 	}, [queryClient, userId]);
 
-	return <UserContext.Provider children={children} value={contextValue} />;
+	return <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>;
 };
 
 export default UserProvider;

apps/meteor/client/sidebar/header/MatrixFederationSearch/FederatedRoomListErrorBoundary.tsx

@@ -16,7 +16,6 @@ const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomLi
 		<QueryErrorResetBoundary>
 			{({ reset }) => (
 				<ErrorBoundary
-					children={children}
 					resetKeys={resetKeys}
 					fallbackRender={({ resetErrorBoundary }) => (
 						<States>
@@ -35,7 +34,9 @@ const FederatedRoomListErrorBoundary = ({ children, resetKeys }: FederatedRoomLi
 							</StatesActions>
 						</States>
 					)}
-				/>
+				>
+					{children}
+				</ErrorBoundary>
 			)}
 		</QueryErrorResetBoundary>
 	);

apps/meteor/client/sidebar/hooks/useRoomList.spec.tsx

@@ -83,8 +83,9 @@ const getWrapperSettings = ({
 						queryIncomingCalls: () => [() => () => undefined, () => emptyArr],
 					} as any
 				}
-				children={children}
-			/>
+			>
+				{children}
+			</VideoConfContext.Provider>
 		))
 		.withUser(user)
 		.withSubscriptions([...fakeRooms, fakeRoom && fakeRoom].filter(Boolean) as unknown as SubscriptionWithRoom[])

apps/meteor/client/stories/contexts/ModalContextMock.tsx

@@ -28,7 +28,7 @@ const ModalContextMock = ({ children }: ModalContextMockProps): ReactElement =>
 		[context],
 	);
 
-	return <ModalContext.Provider children={children} value={value} />;
+	return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
 };
 
 export default ModalContextMock;

apps/meteor/client/stories/contexts/RouterContextMock.tsx

@@ -28,7 +28,7 @@ const RouterContextMock = ({ children }: RouterContextMockProps): ReactElement =
 		[parent],
 	);
 
-	return <RouterContext.Provider children={children} value={value} />;
+	return <RouterContext.Provider value={value}>{children}</RouterContext.Provider>;
 };
 
 export default RouterContextMock;

apps/meteor/client/stories/contexts/ServerContextMock.tsx

@@ -181,7 +181,7 @@ const ServerContextMock = ({
 		};
 	}, [baseURL, callEndpoint, callMethod, overrides, parent]);
 
-	return <ServerContext.Provider children={children} value={value} />;
+	return <ServerContext.Provider value={value}>{children}</ServerContext.Provider>;
 };
 
 export default ServerContextMock;

apps/meteor/client/stories/contexts/TranslationContextMock.tsx

@@ -61,7 +61,7 @@ const TranslationContextMock = ({ children }: TranslationContextMockProps): Reac
 		};
 	}, [parent]);
 
-	return <TranslationContext.Provider children={children} value={value} />;
+	return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
 };
 
 export default TranslationContextMock;

apps/meteor/client/views/admin/customUserStatus/CustomUserStatusDisabledModal.tsx

@@ -10,22 +10,18 @@ const CustomUserStatusDisabledModal = ({ isAdmin, onConfirm, onClose }: CustomUs
 			title={t('User_status_disabled_learn_more')}
 			cancelText={t('Close')}
 			confirmText={t('Go_to_workspace_settings')}
-			children={t('User_status_disabled_learn_more_description')}
 			onConfirm={onConfirm}
 			onClose={onClose}
 			onCancel={onClose}
 			icon={null}
 			variant='warning'
-		/>
+		>
+			{t('User_status_disabled_learn_more_description')}
+		</GenericModal>
 	) : (
-		<GenericModal
-			title={t('User_status_disabled_learn_more')}
-			confirmText={t('Close')}
-			children={t('User_status_disabled_learn_more_description')}
-			onConfirm={onConfirm}
-			onClose={onClose}
-			icon={null}
-		/>
+		<GenericModal title={t('User_status_disabled_learn_more')} confirmText={t('Close')} onConfirm={onConfirm} onClose={onClose} icon={null}>
+			{t('User_status_disabled_learn_more_description')}
+		</GenericModal>
 	);
 };
 

apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardCardErrorBoundary.tsx

@@ -24,7 +24,6 @@ const EngagementDashboardCardErrorBoundary = ({ children }: EngagementDashboardC
 		<QueryErrorResetBoundary>
 			{({ reset }): ReactElement => (
 				<ErrorBoundary
-					children={children}
 					onError={errorHandler}
 					onReset={reset}
 					fallbackRender={({ resetErrorBoundary }): ReactElement => (
@@ -37,7 +36,9 @@ const EngagementDashboardCardErrorBoundary = ({ children }: EngagementDashboardC
 							</StatesActions>
 						</States>
 					)}
-				/>
+				>
+					{children}
+				</ErrorBoundary>
 			)}
 		</QueryErrorResetBoundary>
 	);

apps/meteor/client/views/admin/engagementDashboard/EngagementDashboardPage.stories.tsx

@@ -5,7 +5,7 @@ import EngagementDashboardPage from './EngagementDashboardPage';
 
 export default {
 	component: EngagementDashboardPage,
-	decorators: [(fn): ReactElement => <div children={fn()} style={{ height: '100vh' }} />],
+	decorators: [(fn): ReactElement => <div style={{ height: '100vh' }}>{fn()}</div>],
 } satisfies Meta<typeof EngagementDashboardPage>;
 
 export const Default: StoryFn<typeof EngagementDashboardPage> = () => <EngagementDashboardPage tab='users' />;

apps/meteor/client/views/admin/engagementDashboard/channels/ChannelsTab.stories.tsx

@@ -5,7 +5,7 @@ import ChannelsTab from './ChannelsOverview';
 
 export default {
 	component: ChannelsTab,
-	decorators: [(fn) => <Margins children={fn()} all='x24' />],
+	decorators: [(fn) => <Margins all='x24'>{fn()}</Margins>],
 } satisfies Meta<typeof ChannelsTab>;
 
 export const Default: StoryFn<typeof ChannelsTab> = () => <ChannelsTab />;

apps/meteor/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx

@@ -7,7 +7,7 @@ import { monochromaticColors, polychromaticColors } from './colors';
 
 export default {
 	component: LegendSymbol,
-	decorators: [(fn): ReactElement => <Margins children={fn()} all='x16' />],
+	decorators: [(fn): ReactElement => <Margins all='x16'>{fn()}</Margins>],
 } satisfies Meta<typeof LegendSymbol>;
 
 export const withoutColor: StoryFn<typeof LegendSymbol> = () => (

apps/meteor/client/views/admin/engagementDashboard/messages/MessagesTab.stories.tsx

@@ -5,7 +5,7 @@ import MessagesTab from './MessagesTab';
 
 export default {
 	component: MessagesTab,
-	decorators: [(fn) => <Margins children={fn()} all='x24' />],
+	decorators: [(fn) => <Margins all='x24'>{fn()}</Margins>],
 } satisfies Meta<typeof MessagesTab>;
 
 export const Default: StoryFn<typeof MessagesTab> = () => <MessagesTab timezone='utc' />;

apps/meteor/client/views/admin/engagementDashboard/users/UsersTab.stories.tsx

@@ -6,7 +6,7 @@ import UsersTab from './UsersTab';
 
 export default {
 	component: UsersTab,
-	decorators: [(fn): ReactElement => <Margins children={fn()} all='x24' />],
+	decorators: [(fn): ReactElement => <Margins all='x24'>{fn()}</Margins>],
 } satisfies Meta<typeof UsersTab>;
 
 export const Default: StoryFn<typeof UsersTab> = () => <UsersTab timezone='utc' />;

apps/meteor/client/views/admin/invites/InvitesPage.tsx

@@ -55,14 +55,15 @@ const InvitesPage = (): ReactElement => {
 		setModal(
 			<GenericModal
 				title={t('Are_you_sure')}
-				children={t('Are_you_sure_you_want_to_delete_this_record')}
 				variant='danger'
 				confirmText={t('Yes')}
 				cancelText={t('No')}
 				onClose={(): void => setModal()}
 				onCancel={(): void => setModal()}
 				onConfirm={confirmRemove}
-			/>,
+			>
+				{t('Are_you_sure_you_want_to_delete_this_record')}
+			</GenericModal>,
 		);
 	};