From 5d657eef559ff0bd5ac249bdb7af275886d2733b Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Mon, 19 Aug 2024 20:21:46 -0300
Subject: [PATCH] chore: Settings files sanitization (#33057)

---
 .../priorities/PriorityEditForm.tsx           |  2 +-
 .../admin/settings/GroupPage.stories.tsx      | 26 --------
 .../admin/settings/GroupSelector.stories.tsx  | 16 -----
 .../views/admin/settings/GroupSelector.tsx    | 43 --------------
 .../views/admin/settings/Section.stories.tsx  | 23 --------
 .../views/admin/settings/Setting.stories.tsx  | 59 -------------------
 .../{ => Setting}/MemoizedSetting.tsx         |  0
 .../ResetSettingButton.stories.tsx            |  0
 .../ResetSettingButton.tsx                    |  0
 .../Setting/ResetSettingButton/index.ts       |  1 +
 .../settings/Setting/Setting.stories.tsx      | 58 ++++++++++++++++++
 .../admin/settings/{ => Setting}/Setting.tsx  | 10 +---
 .../{ => Setting}/SettingSkeleton.tsx         |  0
 .../views/admin/settings/Setting/index.ts     |  1 +
 .../inputs/ActionSettingInput.stories.tsx     |  0
 .../inputs/ActionSettingInput.tsx             |  0
 .../inputs/AssetSettingInput.stories.tsx      |  0
 .../inputs/AssetSettingInput.styles.css       |  0
 .../inputs/AssetSettingInput.tsx              |  0
 .../inputs/BooleanSettingInput.stories.tsx    |  0
 .../inputs/BooleanSettingInput.tsx            |  0
 .../inputs/CodeMirror/CodeMirror.tsx          |  2 +-
 .../inputs/CodeMirror/CodeMirrorBox.tsx       |  0
 .../{ => Setting}/inputs/CodeMirror/index.ts  |  0
 .../inputs/CodeSettingInput.stories.tsx       |  0
 .../{ => Setting}/inputs/CodeSettingInput.tsx |  0
 .../inputs/ColorSettingInput.stories.tsx      |  0
 .../inputs/ColorSettingInput.tsx              |  0
 .../inputs/FontSettingInput.stories.tsx       |  0
 .../{ => Setting}/inputs/FontSettingInput.tsx |  0
 .../inputs/GenericSettingInput.stories.tsx    |  0
 .../inputs/GenericSettingInput.tsx            |  0
 .../inputs/IntSettingInput.stories.tsx        |  0
 .../{ => Setting}/inputs/IntSettingInput.tsx  |  0
 .../inputs/LanguageSettingInput.stories.tsx   |  0
 .../inputs/LanguageSettingInput.tsx           |  0
 .../inputs/LookupSettingInput.tsx             |  4 +-
 .../MultiSelectSettingInput.stories.tsx       |  0
 .../inputs/MultiSelectSettingInput.tsx        |  0
 .../inputs/PasswordSettingInput.stories.tsx   |  0
 .../inputs/PasswordSettingInput.tsx           |  0
 .../RelativeUrlSettingInput.stories.tsx       |  0
 .../inputs/RelativeUrlSettingInput.tsx        |  0
 .../inputs/RoomPickSettingInput.tsx           |  2 +-
 .../inputs/SelectSettingInput.stories.tsx     |  0
 .../inputs/SelectSettingInput.tsx             |  0
 .../inputs/SelectTimezoneSettingInput.tsx     |  0
 .../inputs/StringSettingInput.stories.tsx     |  0
 .../inputs/StringSettingInput.tsx             |  0
 .../inputs/TimespanSettingInput.spec.tsx      |  2 +-
 .../inputs/TimespanSettingInput.tsx           |  2 +-
 .../settings/{ => Setting}/inputs/types.ts    |  0
 .../SettingsGroupPage.stories.tsx             | 24 ++++++++
 .../SettingsGroupPage.tsx}                    | 18 +++---
 .../SettingsGroupPageSkeleton.tsx}            | 10 ++--
 .../admin/settings/SettingsGroupPage/index.ts |  1 +
 .../SettingsGroupSelector.stories.tsx         | 16 +++++
 .../SettingsGroupSelector.tsx                 | 42 +++++++++++++
 .../settings/SettingsGroupSelector/index.ts   |  1 +
 .../views/admin/settings/SettingsRoute.tsx    |  4 +-
 .../SettingsSection.stories.tsx               | 21 +++++++
 .../SettingsSection.tsx}                      | 24 ++++----
 .../SettingsSectionSkeleton.tsx}              |  8 +--
 .../admin/settings/SettingsSection/index.ts   |  1 +
 .../admin/settings/groups/AssetsGroupPage.tsx | 26 --------
 .../admin/settings/groups/BaseGroupPage.tsx   | 28 +++++++++
 .../settings/groups/GenericGroupPage.tsx      | 35 +++++++----
 .../admin/settings/groups/LDAPGroupPage.tsx   |  7 ++-
 .../{ => OAuthGroupPage}/CreateOAuthModal.tsx |  2 +-
 .../{ => OAuthGroupPage}/OAuthGroupPage.tsx   | 20 +++----
 .../settings/groups/OAuthGroupPage/index.ts   |  1 +
 .../admin/settings/groups/TabbedGroupPage.tsx | 49 +++++++--------
 .../AssignAgentButton.tsx                     |  0
 .../AssignAgentModal.tsx                      |  0
 .../RemoveAgentButton.tsx                     |  0
 .../VoipExtensionsPage.tsx                    |  0
 .../{ => VoipGroupPage}/VoipGroupPage.tsx     | 20 +++----
 .../settings/groups/VoipGroupPage/index.ts    |  1 +
 .../tabs/AppSettings/AppSetting.tsx           |  2 +-
 79 files changed, 305 insertions(+), 307 deletions(-)
 delete mode 100644 apps/meteor/client/views/admin/settings/GroupPage.stories.tsx
 delete mode 100644 apps/meteor/client/views/admin/settings/GroupSelector.stories.tsx
 delete mode 100644 apps/meteor/client/views/admin/settings/GroupSelector.tsx
 delete mode 100644 apps/meteor/client/views/admin/settings/Section.stories.tsx
 delete mode 100644 apps/meteor/client/views/admin/settings/Setting.stories.tsx
 rename apps/meteor/client/views/admin/settings/{ => Setting}/MemoizedSetting.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting/ResetSettingButton}/ResetSettingButton.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting/ResetSettingButton}/ResetSettingButton.tsx (100%)
 create mode 100644 apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/index.ts
 create mode 100644 apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx
 rename apps/meteor/client/views/admin/settings/{ => Setting}/Setting.tsx (95%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/SettingSkeleton.tsx (100%)
 create mode 100644 apps/meteor/client/views/admin/settings/Setting/index.ts
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/ActionSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/ActionSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/AssetSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/AssetSettingInput.styles.css (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/AssetSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/BooleanSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/BooleanSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/CodeMirror/CodeMirror.tsx (97%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/CodeMirror/CodeMirrorBox.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/CodeMirror/index.ts (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/CodeSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/CodeSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/ColorSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/ColorSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/FontSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/FontSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/GenericSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/GenericSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/IntSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/IntSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/LanguageSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/LanguageSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/LookupSettingInput.tsx (91%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/MultiSelectSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/MultiSelectSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/PasswordSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/PasswordSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/RelativeUrlSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/RelativeUrlSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/RoomPickSettingInput.tsx (93%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/SelectSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/SelectSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/SelectTimezoneSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/StringSettingInput.stories.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/StringSettingInput.tsx (100%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/TimespanSettingInput.spec.tsx (98%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/TimespanSettingInput.tsx (99%)
 rename apps/meteor/client/views/admin/settings/{ => Setting}/inputs/types.ts (100%)
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx
 rename apps/meteor/client/views/admin/settings/{GroupPage.tsx => SettingsGroupPage/SettingsGroupPage.tsx} (92%)
 rename apps/meteor/client/views/admin/settings/{GroupPageSkeleton.tsx => SettingsGroupPage/SettingsGroupPageSkeleton.tsx} (64%)
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsGroupPage/index.ts
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.tsx
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsGroupSelector/index.ts
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx
 rename apps/meteor/client/views/admin/settings/{Section.tsx => SettingsSection/SettingsSection.tsx} (86%)
 rename apps/meteor/client/views/admin/settings/{SectionSkeleton.tsx => SettingsSection/SettingsSectionSkeleton.tsx} (68%)
 create mode 100644 apps/meteor/client/views/admin/settings/SettingsSection/index.ts
 delete mode 100644 apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx
 create mode 100644 apps/meteor/client/views/admin/settings/groups/BaseGroupPage.tsx
 rename apps/meteor/client/views/admin/settings/groups/{ => OAuthGroupPage}/CreateOAuthModal.tsx (95%)
 rename apps/meteor/client/views/admin/settings/groups/{ => OAuthGroupPage}/OAuthGroupPage.tsx (88%)
 create mode 100644 apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/index.ts
 rename apps/meteor/client/views/admin/settings/groups/{voip => VoipGroupPage}/AssignAgentButton.tsx (100%)
 rename apps/meteor/client/views/admin/settings/groups/{voip => VoipGroupPage}/AssignAgentModal.tsx (100%)
 rename apps/meteor/client/views/admin/settings/groups/{voip => VoipGroupPage}/RemoveAgentButton.tsx (100%)
 rename apps/meteor/client/views/admin/settings/groups/{voip => VoipGroupPage}/VoipExtensionsPage.tsx (100%)
 rename apps/meteor/client/views/admin/settings/groups/{ => VoipGroupPage}/VoipGroupPage.tsx (70%)
 create mode 100644 apps/meteor/client/views/admin/settings/groups/VoipGroupPage/index.ts

diff --git a/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx b/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx
index d67f637a2b4e..592cd6b0f932 100644
--- a/apps/meteor/client/omnichannel/priorities/PriorityEditForm.tsx
+++ b/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 };
 
diff --git a/apps/meteor/client/views/admin/settings/GroupPage.stories.tsx b/apps/meteor/client/views/admin/settings/GroupPage.stories.tsx
deleted file mode 100644
index 83112bc42550..000000000000
--- a/apps/meteor/client/views/admin/settings/GroupPage.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import GroupPage from './GroupPage';
-
-export default {
-	title: 'Admin/Settings/GroupPage',
-	component: GroupPage,
-	subcomponents: {
-		'GroupPage.Skeleton': GroupPage.Skeleton,
-	},
-	parameters: {
-		layout: 'fullscreen',
-		controls: { hideNoControlsWarning: true },
-	},
-} as ComponentMeta<typeof GroupPage>;
-
-export const Default: ComponentStory<typeof GroupPage> = (args) => <GroupPage {...args} />;
-
-export const WithGroup: ComponentStory<typeof GroupPage> = (args) => <GroupPage {...args} />;
-WithGroup.args = {
-	_id: 'General',
-	i18nLabel: 'General',
-};
-
-export const Skeleton: ComponentStory<typeof GroupPage.Skeleton> = () => <GroupPage.Skeleton />;
diff --git a/apps/meteor/client/views/admin/settings/GroupSelector.stories.tsx b/apps/meteor/client/views/admin/settings/GroupSelector.stories.tsx
deleted file mode 100644
index 4b505dd19299..000000000000
--- a/apps/meteor/client/views/admin/settings/GroupSelector.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import GroupSelector from './GroupSelector';
-
-export default {
-	title: 'Admin/Settings/GroupSelector',
-	component: GroupSelector,
-	parameters: {
-		layout: 'fullscreen',
-		controls: { hideNoControlsWarning: true },
-	},
-} as ComponentMeta<typeof GroupSelector>;
-
-export const Default: ComponentStory<typeof GroupSelector> = (args) => <GroupSelector {...args} />;
-Default.storyName = 'GroupSelector';
diff --git a/apps/meteor/client/views/admin/settings/GroupSelector.tsx b/apps/meteor/client/views/admin/settings/GroupSelector.tsx
deleted file mode 100644
index 6d6d90a566eb..000000000000
--- a/apps/meteor/client/views/admin/settings/GroupSelector.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { GroupId } from '@rocket.chat/core-typings';
-import { useSettingStructure } from '@rocket.chat/ui-contexts';
-import React from 'react';
-
-import GroupPage from './GroupPage';
-import AssetsGroupPage from './groups/AssetsGroupPage';
-import LDAPGroupPage from './groups/LDAPGroupPage';
-import OAuthGroupPage from './groups/OAuthGroupPage';
-import TabbedGroupPage from './groups/TabbedGroupPage';
-import VoipGroupPage from './groups/VoipGroupPage';
-
-type GroupSelectorProps = {
-	groupId: GroupId;
-	onClickBack?: () => void;
-};
-
-const GroupSelector = ({ groupId, onClickBack }: GroupSelectorProps) => {
-	const group = useSettingStructure(groupId);
-
-	if (!group) {
-		return <GroupPage.Skeleton />;
-	}
-
-	if (groupId === 'Assets') {
-		return <AssetsGroupPage {...group} onClickBack={onClickBack} />;
-	}
-
-	if (groupId === 'OAuth') {
-		return <OAuthGroupPage {...group} onClickBack={onClickBack} />;
-	}
-
-	if (groupId === 'LDAP') {
-		return <LDAPGroupPage {...group} onClickBack={onClickBack} />;
-	}
-
-	if (groupId === 'Call_Center') {
-		return <VoipGroupPage {...group} onClickBack={onClickBack} />;
-	}
-
-	return <TabbedGroupPage {...group} onClickBack={onClickBack} />;
-};
-
-export default GroupSelector;
diff --git a/apps/meteor/client/views/admin/settings/Section.stories.tsx b/apps/meteor/client/views/admin/settings/Section.stories.tsx
deleted file mode 100644
index 05ec280ea74c..000000000000
--- a/apps/meteor/client/views/admin/settings/Section.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import Section from './Section';
-
-export default {
-	title: 'Admin/Settings/Section',
-	component: Section,
-	subcomponents: {
-		'Section.Skeleton': Section.Skeleton,
-	},
-	parameters: {
-		layout: 'fullscreen',
-		controls: { hideNoControlsWarning: true },
-	},
-} as ComponentMeta<typeof Section>;
-
-export const Default: ComponentStory<typeof Section> = (args) => <Section {...args} />;
-Default.args = {
-	groupId: 'General',
-};
-
-export const Skeleton: ComponentStory<typeof Section.Skeleton> = () => <Section.Skeleton />;
diff --git a/apps/meteor/client/views/admin/settings/Setting.stories.tsx b/apps/meteor/client/views/admin/settings/Setting.stories.tsx
deleted file mode 100644
index 18ff3801dbc9..000000000000
--- a/apps/meteor/client/views/admin/settings/Setting.stories.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { FieldGroup } from '@rocket.chat/fuselage';
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
-
-import Setting from './Setting';
-
-export default {
-	title: 'Admin/Settings/Setting',
-	component: Setting,
-	subcomponents: {
-		'Setting.Memoized': Setting.Memoized,
-	},
-	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 Setting.Memoized> = (args) => <Setting.Memoized {...args} />;
-Default.args = {
-	_id: 'setting-id',
-	label: 'Label',
-	hint: 'Hint',
-};
-
-export const WithCallout: ComponentStory<typeof Setting.Memoized> = (args) => <Setting.Memoized {...args} />;
-WithCallout.args = {
-	_id: 'setting-id',
-	label: 'Label',
-	hint: 'Hint',
-	callout: 'Callout text',
-};
-
-export const types = () => (
-	<FieldGroup>
-		<Setting.Memoized packageValue _id='setting-id-1' label='Label' type='action' actionText='Action text' />
-		<Setting.Memoized packageValue='' _id='setting-id-2' label='Label' type='asset' />
-		<Setting.Memoized packageValue _id='setting-id-3' label='Label' type='boolean' />
-		<Setting.Memoized packageValue='' _id='setting-id-4' label='Label' type='code' />
-		<Setting.Memoized packageValue='' _id='setting-id-5' label='Label' type='font' />
-		<Setting.Memoized packageValue={1} _id='setting-id-6' label='Label' type='int' />
-		<Setting.Memoized packageValue='' _id='setting-id-7' label='Label' type='language' />
-		<Setting.Memoized packageValue='' _id='setting-id-8' label='Label' type='password' />
-		<Setting.Memoized packageValue='' _id='setting-id-9' label='Label' type='relativeUrl' />
-		<Setting.Memoized packageValue='' _id='setting-id-10' label='Label' type='select' />
-		<Setting.Memoized packageValue='' _id='setting-id-11' label='Label' type='string' />
-	</FieldGroup>
-);
-
-export const skeleton = () => <Setting.Skeleton />;
diff --git a/apps/meteor/client/views/admin/settings/MemoizedSetting.tsx b/apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/MemoizedSetting.tsx
rename to apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx
diff --git a/apps/meteor/client/views/admin/settings/ResetSettingButton.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/ResetSettingButton.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/ResetSettingButton.tsx b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/ResetSettingButton.tsx
rename to apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/ResetSettingButton.tsx
diff --git a/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/index.ts b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/index.ts
new file mode 100644
index 000000000000..38d90229c1a9
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/Setting/ResetSettingButton/index.ts
@@ -0,0 +1 @@
+export { default } from './ResetSettingButton';
diff --git a/apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.stories.tsx
new file mode 100644
index 000000000000..e303ffa2c497
--- /dev/null
+++ b/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 />;
diff --git a/apps/meteor/client/views/admin/settings/Setting.tsx b/apps/meteor/client/views/admin/settings/Setting/Setting.tsx
similarity index 95%
rename from apps/meteor/client/views/admin/settings/Setting.tsx
rename to apps/meteor/client/views/admin/settings/Setting/Setting.tsx
index 6a08352b9180..19ed42927cfe 100644
--- a/apps/meteor/client/views/admin/settings/Setting.tsx
+++ b/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;
diff --git a/apps/meteor/client/views/admin/settings/SettingSkeleton.tsx b/apps/meteor/client/views/admin/settings/Setting/SettingSkeleton.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/SettingSkeleton.tsx
rename to apps/meteor/client/views/admin/settings/Setting/SettingSkeleton.tsx
diff --git a/apps/meteor/client/views/admin/settings/Setting/index.ts b/apps/meteor/client/views/admin/settings/Setting/index.ts
new file mode 100644
index 000000000000..11b0d2f07626
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/Setting/index.ts
@@ -0,0 +1 @@
+export { default } from './Setting';
diff --git a/apps/meteor/client/views/admin/settings/inputs/ActionSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/ActionSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/ActionSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/ActionSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.styles.css b/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.styles.css
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.styles.css
rename to apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.styles.css
diff --git a/apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/AssetSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/AssetSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/BooleanSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/BooleanSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirror.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx
similarity index 97%
rename from apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirror.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirror.tsx
index b53fae98e6e0..929bf12e39ad 100644
--- a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirror.tsx
+++ b/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'),
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/CodeMirror/CodeMirrorBox.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/CodeMirrorBox.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror/index.ts b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/index.ts
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/CodeMirror/index.ts
rename to apps/meteor/client/views/admin/settings/Setting/inputs/CodeMirror/index.ts
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/CodeSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/CodeSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/ColorSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/FontSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/FontSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/GenericSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/GenericSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/IntSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/IntSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/IntSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/LanguageSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx
similarity index 91%
rename from apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx
index d2c7029f994d..76d5b53d83f5 100644
--- a/apps/meteor/client/views/admin/settings/inputs/LookupSettingInput.tsx
+++ b/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';
 
diff --git a/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/MultiSelectSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/PasswordSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/RelativeUrlSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/RelativeUrlSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx
similarity index 93%
rename from apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx
index df2a4c1b0688..16dc748b62d6 100644
--- a/apps/meteor/client/views/admin/settings/inputs/RoomPickSettingInput.tsx
+++ b/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';
 
diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/SelectSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/SelectSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/SelectTimezoneSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.stories.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.stories.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/StringSettingInput.stories.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.stories.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/StringSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx
diff --git a/apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.spec.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx
similarity index 98%
rename from apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.spec.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.spec.tsx
index ee42bc8387f9..975a3171cbbf 100644
--- a/apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.spec.tsx
+++ b/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(() => ({
diff --git a/apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.tsx b/apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx
similarity index 99%
rename from apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.tsx
rename to apps/meteor/client/views/admin/settings/Setting/inputs/TimespanSettingInput.tsx
index 14191d133c75..b15a353995c9 100644
--- a/apps/meteor/client/views/admin/settings/inputs/TimespanSettingInput.tsx
+++ b/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';
 
diff --git a/apps/meteor/client/views/admin/settings/inputs/types.ts b/apps/meteor/client/views/admin/settings/Setting/inputs/types.ts
similarity index 100%
rename from apps/meteor/client/views/admin/settings/inputs/types.ts
rename to apps/meteor/client/views/admin/settings/Setting/inputs/types.ts
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.stories.tsx
new file mode 100644
index 000000000000..e84406ccc9a3
--- /dev/null
+++ b/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 />;
diff --git a/apps/meteor/client/views/admin/settings/GroupPage.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
similarity index 92%
rename from apps/meteor/client/views/admin/settings/GroupPage.tsx
rename to apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPage.tsx
index 5946805a497e..884c9f6e67e9 100644
--- a/apps/meteor/client/views/admin/settings/GroupPage.tsx
+++ b/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);
diff --git a/apps/meteor/client/views/admin/settings/GroupPageSkeleton.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPageSkeleton.tsx
similarity index 64%
rename from apps/meteor/client/views/admin/settings/GroupPageSkeleton.tsx
rename to apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPageSkeleton.tsx
index 5817b85d6c64..ad6f93390c1d 100644
--- a/apps/meteor/client/views/admin/settings/GroupPageSkeleton.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupPage/SettingsGroupPageSkeleton.tsx
@@ -1,10 +1,10 @@
 import { Accordion, Box, Skeleton } from '@rocket.chat/fuselage';
 import React, { useMemo } from 'react';
 
-import { Page, PageHeader, PageContent } from '../../../components/Page';
-import Section from './Section';
+import { Page, PageHeader, PageContent } from '../../../../components/Page';
+import SettingsSectionSkeleton from '../SettingsSection/SettingsSectionSkeleton';
 
-const GroupPageSkeleton = () => (
+const SettingsGroupPageSkeleton = () => (
 	<Page>
 		<PageHeader title={<Skeleton style={{ width: '20rem' }} />} />
 		<PageContent>
@@ -15,11 +15,11 @@ const GroupPageSkeleton = () => (
 					<Skeleton width='75%' />
 				</Box>
 				<Accordion className='page-settings'>
-					<Section.Skeleton />
+					<SettingsSectionSkeleton />
 				</Accordion>
 			</Box>
 		</PageContent>
 	</Page>
 );
 
-export default GroupPageSkeleton;
+export default SettingsGroupPageSkeleton;
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupPage/index.ts b/apps/meteor/client/views/admin/settings/SettingsGroupPage/index.ts
new file mode 100644
index 000000000000..95ff4dc9a06a
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupPage/index.ts
@@ -0,0 +1 @@
+export { default } from './SettingsGroupPage';
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx
new file mode 100644
index 000000000000..997c842f2d60
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.stories.tsx
@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import SettingsGroupSelector from './SettingsGroupSelector';
+
+export default {
+	title: 'Admin/Settings/SettingsGroupSelector',
+	component: SettingsGroupSelector,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { hideNoControlsWarning: true },
+	},
+} as ComponentMeta<typeof SettingsGroupSelector>;
+
+export const Default: ComponentStory<typeof SettingsGroupSelector> = (args) => <SettingsGroupSelector {...args} />;
+Default.storyName = 'GroupSelector';
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.tsx b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.tsx
new file mode 100644
index 000000000000..79ea4513f6d0
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/SettingsGroupSelector.tsx
@@ -0,0 +1,42 @@
+import type { GroupId } from '@rocket.chat/core-typings';
+import { useSettingStructure } from '@rocket.chat/ui-contexts';
+import React from 'react';
+
+import SettingsGroupPageSkeleton from '../SettingsGroupPage/SettingsGroupPageSkeleton';
+import BaseGroupPage from '../groups/BaseGroupPage';
+import LDAPGroupPage from '../groups/LDAPGroupPage';
+import OAuthGroupPage from '../groups/OAuthGroupPage';
+import VoipGroupPage from '../groups/VoipGroupPage';
+
+type SettingsGroupSelectorProps = {
+	groupId: GroupId;
+	onClickBack?: () => void;
+};
+
+const SettingsGroupSelector = ({ groupId, onClickBack }: SettingsGroupSelectorProps) => {
+	const group = useSettingStructure(groupId);
+
+	if (!group) {
+		return <SettingsGroupPageSkeleton />;
+	}
+
+	if (groupId === 'OAuth') {
+		return <OAuthGroupPage {...group} onClickBack={onClickBack} />;
+	}
+
+	if (groupId === 'LDAP') {
+		return <LDAPGroupPage {...group} onClickBack={onClickBack} />;
+	}
+
+	if (groupId === 'Call_Center') {
+		return <VoipGroupPage {...group} onClickBack={onClickBack} />;
+	}
+
+	if (groupId === 'Assets') {
+		return <BaseGroupPage {...group} onClickBack={onClickBack} hasReset={false} />;
+	}
+
+	return <BaseGroupPage {...group} onClickBack={onClickBack} />;
+};
+
+export default SettingsGroupSelector;
diff --git a/apps/meteor/client/views/admin/settings/SettingsGroupSelector/index.ts b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/index.ts
new file mode 100644
index 000000000000..9b252bf843aa
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/SettingsGroupSelector/index.ts
@@ -0,0 +1 @@
+export { default } from './SettingsGroupSelector';
diff --git a/apps/meteor/client/views/admin/settings/SettingsRoute.tsx b/apps/meteor/client/views/admin/settings/SettingsRoute.tsx
index c03aced8b5a0..e119c5817417 100644
--- a/apps/meteor/client/views/admin/settings/SettingsRoute.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsRoute.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import EditableSettingsProvider from './EditableSettingsProvider';
-import GroupSelector from './GroupSelector';
+import SettingsGroupSelector from './SettingsGroupSelector';
 import SettingsPage from './SettingsPage';
 
 export const SettingsRoute = (): ReactElement => {
@@ -22,7 +22,7 @@ export const SettingsRoute = (): ReactElement => {
 
 	return (
 		<EditableSettingsProvider>
-			<GroupSelector groupId={groupId} onClickBack={() => router.navigate('/admin/settings')} />
+			<SettingsGroupSelector groupId={groupId} onClickBack={() => router.navigate('/admin/settings')} />
 		</EditableSettingsProvider>
 	);
 };
diff --git a/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx
new file mode 100644
index 000000000000..14210a285c44
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.stories.tsx
@@ -0,0 +1,21 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import SettingsSection from './SettingsSection';
+import SettingsSectionSkeleton from './SettingsSectionSkeleton';
+
+export default {
+	title: 'Admin/Settings/SettingsSection',
+	component: SettingsSection,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { hideNoControlsWarning: true },
+	},
+} as ComponentMeta<typeof SettingsSection>;
+
+export const Default: ComponentStory<typeof SettingsSection> = (args) => <SettingsSection {...args} />;
+Default.args = {
+	groupId: 'General',
+};
+
+export const Skeleton: ComponentStory<typeof SettingsSectionSkeleton> = () => <SettingsSectionSkeleton />;
diff --git a/apps/meteor/client/views/admin/settings/Section.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx
similarity index 86%
rename from apps/meteor/client/views/admin/settings/Section.tsx
rename to apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx
index ef1baf47f165..d26d80e88637 100644
--- a/apps/meteor/client/views/admin/settings/Section.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSection.tsx
@@ -6,29 +6,30 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, ReactNode } from 'react';
 import React, { useMemo } from 'react';
 
-import { useEditableSettings, useEditableSettingsDispatch } from '../EditableSettingsContext';
-import SectionSkeleton from './SectionSkeleton';
-import Setting from './Setting';
+import { useEditableSettings, useEditableSettingsDispatch } from '../../EditableSettingsContext';
+import Setting from '../Setting';
 
-type SectionProps = {
+type SettingsSectionProps = {
 	groupId: string;
 	hasReset?: boolean;
 	sectionName: string;
-	tabName?: string;
+	currentTab?: string;
 	solo: boolean;
 	help?: ReactNode;
 	children?: ReactNode;
 };
 
-function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, help, children }: SectionProps): ReactElement {
+function SettingsSection({ groupId, hasReset = true, sectionName, currentTab, solo, help, children }: SettingsSectionProps): ReactElement {
+	const t = useTranslation();
+
 	const editableSettings = useEditableSettings(
 		useMemo(
 			() => ({
 				group: groupId,
 				section: sectionName,
-				tab: tabName,
+				tab: currentTab,
 			}),
-			[groupId, sectionName, tabName],
+			[groupId, sectionName, currentTab],
 		),
 	);
 
@@ -65,8 +66,6 @@ function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, he
 		);
 	});
 
-	const t = useTranslation();
-
 	const handleResetSectionClick = (): void => {
 		reset();
 	};
@@ -82,7 +81,6 @@ function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, he
 					{help}
 				</Box>
 			)}
-
 			<FieldGroup>
 				{editableSettings.map(
 					(setting) => isSetting(setting) && <Setting key={setting._id} settingId={setting._id} sectionChanged={changed} />,
@@ -104,6 +102,4 @@ function Section({ groupId, hasReset = true, sectionName, tabName = '', solo, he
 	);
 }
 
-export default Object.assign(Section, {
-	Skeleton: SectionSkeleton,
-});
+export default SettingsSection;
diff --git a/apps/meteor/client/views/admin/settings/SectionSkeleton.tsx b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSectionSkeleton.tsx
similarity index 68%
rename from apps/meteor/client/views/admin/settings/SectionSkeleton.tsx
rename to apps/meteor/client/views/admin/settings/SettingsSection/SettingsSectionSkeleton.tsx
index ff509e08fc45..69466eba374f 100644
--- a/apps/meteor/client/views/admin/settings/SectionSkeleton.tsx
+++ b/apps/meteor/client/views/admin/settings/SettingsSection/SettingsSectionSkeleton.tsx
@@ -2,9 +2,9 @@ import { Accordion, Box, FieldGroup, Skeleton } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
 import React from 'react';
 
-import Setting from './Setting';
+import SettingSkeleton from '../Setting/SettingSkeleton';
 
-function SectionSkeleton(): ReactElement {
+function SettingsSectionSkeleton(): ReactElement {
 	return (
 		<Accordion.Item noncollapsible title={<Skeleton />}>
 			<Box is='p' color='hint' fontScale='p2'>
@@ -13,11 +13,11 @@ function SectionSkeleton(): ReactElement {
 
 			<FieldGroup>
 				{Array.from({ length: 10 }).map((_, i) => (
-					<Setting.Skeleton key={i} />
+					<SettingSkeleton key={i} />
 				))}
 			</FieldGroup>
 		</Accordion.Item>
 	);
 }
 
-export default SectionSkeleton;
+export default SettingsSectionSkeleton;
diff --git a/apps/meteor/client/views/admin/settings/SettingsSection/index.ts b/apps/meteor/client/views/admin/settings/SettingsSection/index.ts
new file mode 100644
index 000000000000..09694b6d000d
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/SettingsSection/index.ts
@@ -0,0 +1 @@
+export { default } from './SettingsSection';
diff --git a/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx
deleted file mode 100644
index a5935eb47bc8..000000000000
--- a/apps/meteor/client/views/admin/settings/groups/AssetsGroupPage.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { ISetting } from '@rocket.chat/core-typings';
-import type { ReactElement } from 'react';
-import React, { memo } from 'react';
-
-import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
-import GroupPage from '../GroupPage';
-import Section from '../Section';
-
-type AssetsGroupPageProps = ISetting & {
-	onClickBack?: () => void;
-};
-
-function AssetsGroupPage({ _id, onClickBack, ...group }: AssetsGroupPageProps): ReactElement {
-	const sections = useEditableSettingsGroupSections(_id);
-	const solo = sections.length === 1;
-
-	return (
-		<GroupPage _id={_id} onClickBack={onClickBack} {...group}>
-			{sections.map((sectionName) => (
-				<Section key={sectionName} groupId={_id} hasReset={false} sectionName={sectionName} solo={solo} />
-			))}
-		</GroupPage>
-	);
-}
-
-export default memo(AssetsGroupPage);
diff --git a/apps/meteor/client/views/admin/settings/groups/BaseGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/BaseGroupPage.tsx
new file mode 100644
index 000000000000..2b2a35b00a63
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/groups/BaseGroupPage.tsx
@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { useEditableSettingsGroupSections, useEditableSettingsGroupTabs } from '../../EditableSettingsContext';
+import GenericGroupPage from './GenericGroupPage';
+import TabbedGroupPage from './TabbedGroupPage';
+
+type BaseGroupPageProps = {
+	_id: string;
+	i18nLabel: string;
+	headerButtons?: ReactElement;
+	hasReset?: boolean;
+	onClickBack?: () => void;
+};
+const BaseGroupPage = ({ _id, i18nLabel, headerButtons, hasReset, onClickBack, ...props }: BaseGroupPageProps) => {
+	const tabs = useEditableSettingsGroupTabs(_id);
+	const sections = useEditableSettingsGroupSections(_id);
+
+	if (tabs.length > 1) {
+		return (
+			<TabbedGroupPage _id={_id} i18nLabel={i18nLabel} headerButtons={headerButtons} tabs={tabs} onClickBack={onClickBack} {...props} />
+		);
+	}
+
+	return <GenericGroupPage _id={_id} i18nLabel={i18nLabel} sections={sections} onClickBack={onClickBack} hasReset={hasReset} {...props} />;
+};
+
+export default BaseGroupPage;
diff --git a/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx
index c9148547b955..6856e1bf2f20 100644
--- a/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/GenericGroupPage.tsx
@@ -1,25 +1,38 @@
-import type { ISetting } from '@rocket.chat/core-typings';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { memo } from 'react';
 
-import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
-import GroupPage from '../GroupPage';
-import Section from '../Section';
+import SettingsGroupPage from '../SettingsGroupPage';
+import Section from '../SettingsSection';
 
-type GenericGroupPageProps = ISetting & {
+type GenericGroupPageProps = {
+	_id: string;
+	i18nLabel: string;
+	tabs?: ReactNode;
+	currentTab?: string;
+	hasReset?: boolean;
+	sections: string[];
+	headerButtons?: ReactNode;
 	onClickBack?: () => void;
 };
 
-function GenericGroupPage({ _id, onClickBack, ...props }: GenericGroupPageProps): ReactElement {
-	const sections = useEditableSettingsGroupSections(_id);
+function GenericGroupPage({
+	_id,
+	i18nLabel,
+	sections,
+	tabs,
+	currentTab,
+	hasReset,
+	onClickBack,
+	...props
+}: GenericGroupPageProps): ReactElement {
 	const solo = sections.length === 1;
 
 	return (
-		<GroupPage _id={_id} onClickBack={onClickBack} {...props}>
+		<SettingsGroupPage _id={_id} i18nLabel={i18nLabel} onClickBack={onClickBack} tabs={tabs} {...props}>
 			{sections.map((sectionName) => (
-				<Section key={sectionName || ''} groupId={_id} sectionName={sectionName} solo={solo} />
+				<Section key={sectionName || ''} hasReset={hasReset} groupId={_id} sectionName={sectionName} currentTab={currentTab} solo={solo} />
 			))}
-		</GroupPage>
+		</SettingsGroupPage>
 	);
 }
 
diff --git a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
index a497738b9541..ae8fb0dabf2b 100644
--- a/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/LDAPGroupPage.tsx
@@ -8,13 +8,13 @@ import React, { memo, useMemo } from 'react';
 import GenericModal from '../../../../components/GenericModal';
 import { useExternalLink } from '../../../../hooks/useExternalLink';
 import { useEditableSettings } from '../../EditableSettingsContext';
-import TabbedGroupPage from './TabbedGroupPage';
+import BaseGroupPage from './BaseGroupPage';
 
 type LDAPGroupPageProps = ISetting & {
 	onClickBack?: () => void;
 };
 
-function LDAPGroupPage({ _id, onClickBack, ...group }: LDAPGroupPageProps) {
+function LDAPGroupPage({ _id, i18nLabel, onClickBack, ...group }: LDAPGroupPageProps) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const testConnection = useEndpoint('POST', '/v1/ldap.testConnection');
@@ -129,8 +129,9 @@ function LDAPGroupPage({ _id, onClickBack, ...group }: LDAPGroupPageProps) {
 	};
 
 	return (
-		<TabbedGroupPage
+		<BaseGroupPage
 			_id={_id}
+			i18nLabel={i18nLabel}
 			onClickBack={onClickBack}
 			{...group}
 			headerButtons={
diff --git a/apps/meteor/client/views/admin/settings/groups/CreateOAuthModal.tsx b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx
similarity index 95%
rename from apps/meteor/client/views/admin/settings/groups/CreateOAuthModal.tsx
rename to apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx
index 53ecc93609b5..7254b5386f33 100644
--- a/apps/meteor/client/views/admin/settings/groups/CreateOAuthModal.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/CreateOAuthModal.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement, FormEvent, SyntheticEvent } from 'react';
 import React, { useState } from 'react';
 
-import GenericModal from '../../../../components/GenericModal';
+import GenericModal from '../../../../../components/GenericModal';
 
 type CreateOAuthModalProps = {
 	onConfirm: (text: string) => Promise<void>;
diff --git a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/OAuthGroupPage.tsx
similarity index 88%
rename from apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
rename to apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/OAuthGroupPage.tsx
index 713a26935994..a858555e46d3 100644
--- a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/OAuthGroupPage.tsx
@@ -5,11 +5,11 @@ import { useToastMessageDispatch, useAbsoluteUrl, useMethod, useTranslation, use
 import type { ReactElement } from 'react';
 import React, { memo, useEffect, useState } from 'react';
 
-import { strRight } from '../../../../../lib/utils/stringUtils';
-import GenericModal from '../../../../components/GenericModal';
-import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
-import GroupPage from '../GroupPage';
-import Section from '../Section';
+import { strRight } from '../../../../../../lib/utils/stringUtils';
+import GenericModal from '../../../../../components/GenericModal';
+import { useEditableSettingsGroupSections } from '../../../EditableSettingsContext';
+import SettingsGroupPage from '../../SettingsGroupPage';
+import SettingsSection from '../../SettingsSection';
 import CreateOAuthModal from './CreateOAuthModal';
 
 type OAuthGroupPageProps = ISetting & {
@@ -94,7 +94,7 @@ function OAuthGroupPage({ _id, onClickBack, ...group }: OAuthGroupPageProps): Re
 		};
 
 	return (
-		<GroupPage
+		<SettingsGroupPage
 			_id={_id}
 			{...group}
 			onClickBack={onClickBack}
@@ -112,7 +112,7 @@ function OAuthGroupPage({ _id, onClickBack, ...group }: OAuthGroupPageProps): Re
 					const handleRemoveCustomOAuthButtonClick = removeCustomOauthFactory(id);
 
 					return (
-						<Section
+						<SettingsSection
 							key={sectionName}
 							groupId={_id}
 							help={
@@ -130,13 +130,13 @@ function OAuthGroupPage({ _id, onClickBack, ...group }: OAuthGroupPageProps): Re
 									{t('Remove_custom_oauth')}
 								</Button>
 							</div>
-						</Section>
+						</SettingsSection>
 					);
 				}
 
-				return <Section key={sectionName} groupId={_id} sectionName={sectionName} solo={solo} />;
+				return <SettingsSection key={sectionName} groupId={_id} sectionName={sectionName} solo={solo} />;
 			})}
-		</GroupPage>
+		</SettingsGroupPage>
 	);
 }
 
diff --git a/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/index.ts b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/index.ts
new file mode 100644
index 000000000000..468abb7a3f98
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/groups/OAuthGroupPage/index.ts
@@ -0,0 +1 @@
+export { default } from './OAuthGroupPage';
diff --git a/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx
index eeecf9cc3800..782bf34122bc 100644
--- a/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/TabbedGroupPage.tsx
@@ -1,54 +1,47 @@
-import type { ISetting } from '@rocket.chat/core-typings';
-import { Tabs } from '@rocket.chat/fuselage';
+import { Tabs, TabsItem } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React, { memo, useState, useMemo } from 'react';
 
-import { useEditableSettingsGroupSections, useEditableSettingsGroupTabs } from '../../EditableSettingsContext';
-import GroupPage from '../GroupPage';
-import Section from '../Section';
+import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
 import GenericGroupPage from './GenericGroupPage';
 
-type TabbedGroupPageProps = ISetting & {
+type TabbedGroupPageProps = {
 	headerButtons?: ReactElement;
+	_id: string;
+	i18nLabel: string;
+	tabs: string[];
 	onClickBack?: () => void;
 };
 
-function TabbedGroupPage({ _id, onClickBack, ...props }: TabbedGroupPageProps): JSX.Element {
+function TabbedGroupPage({ _id, tabs, i18nLabel, onClickBack, ...props }: TabbedGroupPageProps) {
 	const t = useTranslation();
-	const tabs = useEditableSettingsGroupTabs(_id);
 
-	const [tab, setTab] = useState(tabs[0]);
-	const handleTabClick = useMemo(() => (tab: string) => (): void => setTab(tab), [setTab]);
-	const sections = useEditableSettingsGroupSections(_id, tab);
-
-	const solo = sections.length === 1;
-
-	if (!tabs.length || (tabs.length === 1 && !tabs[0])) {
-		return <GenericGroupPage _id={_id} onClickBack={onClickBack} {...props} />;
-	}
-
-	if (!tab && tabs[0]) {
-		setTab(tabs[0]);
-	}
+	const [currentTab, setCurrentTab] = useState(tabs[0]);
+	const handleTabClick = useMemo(() => (tab: string) => (): void => setCurrentTab(tab), [setCurrentTab]);
+	const sections = useEditableSettingsGroupSections(_id, currentTab);
 
 	const tabsComponent = (
 		<Tabs>
 			{tabs.map((tabName) => (
-				<Tabs.Item key={tabName || ''} selected={tab === tabName} onClick={handleTabClick(tabName)}>
+				<TabsItem key={tabName || ''} selected={currentTab === tabName} onClick={handleTabClick(tabName)}>
 					{tabName ? t(tabName as TranslationKey) : t(_id as TranslationKey)}
-				</Tabs.Item>
+				</TabsItem>
 			))}
 		</Tabs>
 	);
 
 	return (
-		<GroupPage _id={_id} onClickBack={onClickBack} {...props} tabs={tabsComponent}>
-			{sections.map((sectionName) => (
-				<Section key={sectionName || ''} groupId={_id} sectionName={sectionName} tabName={tab} solo={solo} />
-			))}
-		</GroupPage>
+		<GenericGroupPage
+			_id={_id}
+			i18nLabel={i18nLabel}
+			onClickBack={onClickBack}
+			sections={sections}
+			currentTab={currentTab}
+			tabs={tabsComponent}
+			{...props}
+		/>
 	);
 }
 
diff --git a/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentButton.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/groups/voip/AssignAgentButton.tsx
rename to apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentButton.tsx
diff --git a/apps/meteor/client/views/admin/settings/groups/voip/AssignAgentModal.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentModal.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/groups/voip/AssignAgentModal.tsx
rename to apps/meteor/client/views/admin/settings/groups/VoipGroupPage/AssignAgentModal.tsx
diff --git a/apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/RemoveAgentButton.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/groups/voip/RemoveAgentButton.tsx
rename to apps/meteor/client/views/admin/settings/groups/VoipGroupPage/RemoveAgentButton.tsx
diff --git a/apps/meteor/client/views/admin/settings/groups/voip/VoipExtensionsPage.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/VoipExtensionsPage.tsx
similarity index 100%
rename from apps/meteor/client/views/admin/settings/groups/voip/VoipExtensionsPage.tsx
rename to apps/meteor/client/views/admin/settings/groups/VoipGroupPage/VoipExtensionsPage.tsx
diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/VoipGroupPage.tsx
similarity index 70%
rename from apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx
rename to apps/meteor/client/views/admin/settings/groups/VoipGroupPage/VoipGroupPage.tsx
index 3b7c873f2268..1056bd47c3d5 100644
--- a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage.tsx
+++ b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/VoipGroupPage.tsx
@@ -4,12 +4,12 @@ import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useSetting, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { memo, useMemo, useState } from 'react';
 
-import GenericNoResults from '../../../../components/GenericNoResults';
-import { PageScrollableContentWithShadow } from '../../../../components/Page';
-import { useEditableSettingsGroupSections } from '../../EditableSettingsContext';
-import GroupPage from '../GroupPage';
-import Section from '../Section';
-import VoipExtensionsPage from './voip/VoipExtensionsPage';
+import GenericNoResults from '../../../../../components/GenericNoResults';
+import { PageScrollableContentWithShadow } from '../../../../../components/Page';
+import { useEditableSettingsGroupSections } from '../../../EditableSettingsContext';
+import SettingsGroupPage from '../../SettingsGroupPage';
+import SettingsSection from '../../SettingsSection';
+import VoipExtensionsPage from './VoipExtensionsPage';
 
 type VoipGroupPageProps = ISetting & {
 	onClickBack?: () => void;
@@ -44,13 +44,13 @@ function VoipGroupPage({ _id, onClickBack, ...group }: VoipGroupPageProps) {
 			voipEnabled ? (
 				<VoipExtensionsPage />
 			) : (
-				<GenericNoResults icon='warning' title={t('Voip_is_disabled')} description={t('Voip_is_disabled_description')}></GenericNoResults>
+				<GenericNoResults icon='warning' title={t('Voip_is_disabled')} description={t('Voip_is_disabled_description')} />
 			),
 		[t, voipEnabled],
 	);
 
 	return (
-		<GroupPage _id={_id} {...group} tabs={tabsComponent} isCustom={true} onClickBack={onClickBack}>
+		<SettingsGroupPage _id={_id} {...group} tabs={tabsComponent} isCustom={true} onClickBack={onClickBack}>
 			{tab === 'Extensions' ? (
 				ExtensionsPageComponent
 			) : (
@@ -58,13 +58,13 @@ function VoipGroupPage({ _id, onClickBack, ...group }: VoipGroupPageProps) {
 					<Box marginBlock='none' marginInline='auto' width='full' maxWidth='x580'>
 						<Accordion className='page-settings'>
 							{sections.map((sectionName) => (
-								<Section key={sectionName || ''} groupId={_id} sectionName={sectionName} tabName={tab} solo={false} />
+								<SettingsSection key={sectionName || ''} groupId={_id} sectionName={sectionName} currentTab={tab} solo={false} />
 							))}
 						</Accordion>
 					</Box>
 				</PageScrollableContentWithShadow>
 			)}
-		</GroupPage>
+		</SettingsGroupPage>
 	);
 }
 
diff --git a/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/index.ts b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/index.ts
new file mode 100644
index 000000000000..4a658a36e572
--- /dev/null
+++ b/apps/meteor/client/views/admin/settings/groups/VoipGroupPage/index.ts
@@ -0,0 +1 @@
+export { default } from './VoipGroupPage';
diff --git a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSetting.tsx b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSetting.tsx
index 7269a07e9b3d..8e6d297e433e 100644
--- a/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSetting.tsx
+++ b/apps/meteor/client/views/marketplace/AppDetailsPage/tabs/AppSettings/AppSetting.tsx
@@ -7,7 +7,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import { Utilities } from '../../../../../../ee/lib/misc/Utilities';
 import MarkdownText from '../../../../../components/MarkdownText';
-import MemoizedSetting from '../../../../admin/settings/MemoizedSetting';
+import MemoizedSetting from '../../../../admin/settings/Setting/MemoizedSetting';
 
 type AppTranslationFunction = {
 	(key: string, ...replaces: unknown[]): string;