chore: Settings files sanitization (#33057)

apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx

@@ -7,7 +7,7 @@ import type { ReactElement } from 'react';
 import React, { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import StringSettingInput from '../../views/admin/settings/inputs/StringSettingInput';
+import StringSettingInput from '../../views/admin/settings/Setting/inputs/StringSettingInput';
 
 export type PriorityFormData = { name: string; reset: boolean };
 

apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/index.ts

@@ -0,0 +1 @@
+export { default } from './ResetSettingButton';

apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx

@@ -0,0 +1,58 @@
+import { FieldGroup } from '@rocket.chat/fuselage';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import MemoizedSetting from './MemoizedSetting';
+import Setting from './Setting';
+import SettingSkeleton from './SettingSkeleton';
+
+export default {
+	title: 'Admin/Settings/Setting',
+	component: Setting,
+	parameters: {
+		layout: 'centered',
+		actions: {
+			argTypesRegex: '^on.*',
+		},
+	},
+	decorators: [
+		(fn) => (
+			<div className='rc-old'>
+				<div className='page-settings'>{fn()}</div>
+			</div>
+		),
+	],
+} as ComponentMeta<typeof Setting>;
+
+export const Default: ComponentStory<typeof MemoizedSetting> = (args) => <MemoizedSetting {...args} />;
+Default.args = {
+	_id: 'setting-id',
+	label: 'Label',
+	hint: 'Hint',
+};
+
+export const WithCallout: ComponentStory<typeof MemoizedSetting> = (args) => <MemoizedSetting {...args} />;
+WithCallout.args = {
+	_id: 'setting-id',
+	label: 'Label',
+	hint: 'Hint',
+	callout: 'Callout text',
+};
+
+export const types = () => (
+	<FieldGroup>
+		<MemoizedSetting packageValue _id='setting-id-1' label='Label' type='action' actionText='Action text' />
+		<MemoizedSetting packageValue='' _id='setting-id-2' label='Label' type='asset' />
+		<MemoizedSetting packageValue _id='setting-id-3' label='Label' type='boolean' />
+		<MemoizedSetting packageValue='' _id='setting-id-4' label='Label' type='code' />
+		<MemoizedSetting packageValue='' _id='setting-id-5' label='Label' type='font' />
+		<MemoizedSetting packageValue={1} _id='setting-id-6' label='Label' type='int' />
+		<MemoizedSetting packageValue='' _id='setting-id-7' label='Label' type='language' />
+		<MemoizedSetting packageValue='' _id='setting-id-8' label='Label' type='password' />
+		<MemoizedSetting packageValue='' _id='setting-id-9' label='Label' type='relativeUrl' />
+		<MemoizedSetting packageValue='' _id='setting-id-10' label='Label' type='select' />
+		<MemoizedSetting packageValue='' _id='setting-id-11' label='Label' type='string' />
+	</FieldGroup>
+);
+
+export const Skeleton = () => <SettingSkeleton />;

apps/meteor/client/views/admin/settings/Setting.tsx → apps/meteor/client/views/admin/settings/Setting/Setting.tsx

@@ -6,10 +6,9 @@ import { useSettingStructure, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
 
-import MarkdownText from '../../../components/MarkdownText';
-import { useEditableSetting, useEditableSettingsDispatch, useIsEnterprise } from '../EditableSettingsContext';
+import MarkdownText from '../../../../components/MarkdownText';
+import { useEditableSetting, useEditableSettingsDispatch, useIsEnterprise } from '../../EditableSettingsContext';
 import MemoizedSetting from './MemoizedSetting';
-import SettingSkeleton from './SettingSkeleton';
 
 type SettingProps = {
 	className?: string;
@@ -165,7 +164,4 @@ function Setting({ className = undefined, settingId, sectionChanged }: SettingPr
 	);
 }
 
-export default Object.assign(Setting, {
-	Memoized: MemoizedSetting,
-	Skeleton: SettingSkeleton,
-});
+export default Setting;

apps/meteor/client/views/admin/settings/Setting/index.ts

@@ -0,0 +1 @@
+export { default } from './Setting';

apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirror.tsx → apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx

@@ -57,7 +57,7 @@ function CodeMirror({
 		const setupCodeMirror = async (): Promise<void> => {
 			const CodeMirror = await import('codemirror');
 			await Promise.all([
-				import('../../../../../../app/ui/client/lib/codeMirror/codeMirror'),
+				import('../../../../../../../app/ui/client/lib/codeMirror/codeMirror'),
 				import('codemirror/addon/edit/matchbrackets'),
 				import('codemirror/addon/edit/closebrackets'),
 				import('codemirror/addon/edit/matchtags'),

apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx → apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx

@@ -3,8 +3,8 @@ import type { PathPattern } from '@rocket.chat/rest-typings';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import type { AsyncState } from '../../../../hooks/useAsyncState';
-import { useEndpointData } from '../../../../hooks/useEndpointData';
+import type { AsyncState } from '../../../../../hooks/useAsyncState';
+import { useEndpointData } from '../../../../../hooks/useEndpointData';
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
 

apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx → apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx

@@ -3,7 +3,7 @@ import { Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import RoomAutoCompleteMultiple from '../../../../components/RoomAutoCompleteMultiple';
+import RoomAutoCompleteMultiple from '../../../../../components/RoomAutoCompleteMultiple';
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
 

apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.spec.tsx → apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { TIMEUNIT } from '../../../../lib/convertTimeUnit';
+import { TIMEUNIT } from '../../../../../lib/convertTimeUnit';
 import { default as TimespanSettingInput, getHighestTimeUnit } from './TimespanSettingInput';
 
 global.ResizeObserver = jest.fn().mockImplementation(() => ({

apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.tsx → apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { FormEventHandler, ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
 
-import { TIMEUNIT, timeUnitToMs, msToTimeUnit } from '../../../../lib/convertTimeUnit';
+import { TIMEUNIT, timeUnitToMs, msToTimeUnit } from '../../../../../lib/convertTimeUnit';
 import ResetSettingButton from '../ResetSettingButton';
 import type { SettingInputProps } from './types';
 

apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx

@@ -0,0 +1,24 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import SettingsGroupPage from './SettingsGroupPage';
+import SettingsGroupPageSkeleton from './SettingsGroupPageSkeleton';
+
+export default {
+	title: 'Admin/Settings/SettingsGroupPage',
+	component: SettingsGroupPage,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { hideNoControlsWarning: true },
+	},
+} as ComponentMeta<typeof SettingsGroupPage>;
+
+export const Default: ComponentStory<typeof SettingsGroupPage> = (args) => <SettingsGroupPage {...args} />;
+
+export const WithGroup: ComponentStory<typeof SettingsGroupPage> = (args) => <SettingsGroupPage {...args} />;
+WithGroup.args = {
+	_id: 'General',
+	i18nLabel: 'General',
+};
+
+export const Skeleton: ComponentStory<typeof SettingsGroupPageSkeleton> = () => <SettingsGroupPageSkeleton />;

apps/meteor/client/views/admin/settings/GroupPage.tsx → apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx

@@ -6,12 +6,11 @@ import { useToastMessageDispatch, useSettingsDispatch, useSettings, useTranslati
 import type { ReactNode, FormEvent, MouseEvent } from 'react';
 import React, { useMemo, memo } from 'react';
 
-import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../components/Page';
-import type { EditableSetting } from '../EditableSettingsContext';
-import { useEditableSettingsDispatch, useEditableSettings } from '../EditableSettingsContext';
-import GroupPageSkeleton from './GroupPageSkeleton';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '../../../../components/Page';
+import type { EditableSetting } from '../../EditableSettingsContext';
+import { useEditableSettingsDispatch, useEditableSettings } from '../../EditableSettingsContext';
 
-type GroupPageProps = {
+type SettingsGroupPageProps = {
 	children: ReactNode;
 	headerButtons?: ReactNode;
 	onClickBack?: () => void;
@@ -22,7 +21,7 @@ type GroupPageProps = {
 	isCustom?: boolean;
 };
 
-const GroupPage = ({
+const SettingsGroupPage = ({
 	children = undefined,
 	headerButtons = undefined,
 	onClickBack,
@@ -31,7 +30,7 @@ const GroupPage = ({
 	i18nDescription = undefined,
 	tabs = undefined,
 	isCustom = false,
-}: GroupPageProps) => {
+}: SettingsGroupPageProps) => {
 	const t = useTranslation();
 	const dispatch = useSettingsDispatch();
 	const dispatchToastMessage = useToastMessageDispatch();
@@ -133,7 +132,6 @@ const GroupPage = ({
 		return <Page>{children}</Page>;
 	}
 
-	// The settings
 	const isTranslationKey = (key: string): key is TranslationKey => (key as TranslationKey) !== undefined;
 
 	return (
@@ -178,6 +176,4 @@ const GroupPage = ({
 	);
 };
 
-export default Object.assign(memo(GroupPage), {
-	Skeleton: GroupPageSkeleton,
-});
+export default memo(SettingsGroupPage);