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 d67f637a2b4..592cd6b0f93 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 83112bc4255..00000000000
--- 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 4b505dd1929..00000000000
--- 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 6d6d90a566e..00000000000
--- 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 05ec280ea74..00000000000
--- 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 18ff3801dbc..00000000000
--- 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 00000000000..38d90229c1a
--- /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 00000000000..e303ffa2c49
--- /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 6a08352b918..19ed42927cf 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 00000000000..11b0d2f0762
--- /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 b53fae98e6e..929bf12e39a 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 d2c7029f994..76d5b53d83f 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 df2a4c1b068..16dc748b62d 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 ee42bc8387f..975a3171cbb 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 14191d133c7..b15a353995c 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 00000000000..e84406ccc9a
--- /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 5946805a497..884c9f6e67e 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 5817b85d6c6..ad6f93390c1 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 00000000000..95ff4dc9a06
--- /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 00000000000..997c842f2d6
--- /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 00000000000..79ea4513f6d
--- /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 00000000000..9b252bf843a
--- /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 c03aced8b5a..e119c581741 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 00000000000..14210a285c4
--- /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 ef1baf47f16..d26d80e8863 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 ff509e08fc4..69466eba374 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 00000000000..09694b6d000
--- /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 a5935eb47bc..00000000000
--- 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 00000000000..2b2a35b00a6
--- /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 c9148547b95..6856e1bf2f2 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 a497738b954..ae8fb0dabf2 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 53ecc93609b..7254b5386f3 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 713a2693599..a858555e46d 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 00000000000..468abb7a3f9
--- /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 eeecf9cc380..782bf34122b 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 3b7c873f226..1056bd47c3d 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 00000000000..4a658a36e57
--- /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 7269a07e9b3..8e6d297e433 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;
--
GitLab