Merge branch 'develop' into fix/slashcommands-limitation

.github/workflows/ci-code-check.yml

@@ -27,7 +27,7 @@ jobs:
         with:
           swap-size-gb: 4
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup NodeJS
         uses: ./.github/actions/setup-node

.github/workflows/ci-test-e2e.yml

@@ -88,7 +88,7 @@ jobs:
           mongodb-version: ${{ matrix.mongodb-version }}
           mongodb-replica-set: rs0
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup NodeJS
         uses: ./.github/actions/setup-node

.github/workflows/ci-test-unit.yml

@@ -21,7 +21,7 @@ jobs:
     name: Unit Tests
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup NodeJS
         uses: ./.github/actions/setup-node

.github/workflows/ci.yml

@@ -100,7 +100,7 @@ jobs:
         with:
           swap-size-gb: 4
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup NodeJS
         uses: ./.github/actions/setup-node
@@ -138,7 +138,7 @@ jobs:
           echo "github.event_name: ${{ github.event_name }}"
           cat $GITHUB_EVENT_PATH
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: ./.github/actions/meteor-build
         with:
@@ -162,7 +162,7 @@ jobs:
           echo "github.event_name: ${{ github.event_name }}"
           cat $GITHUB_EVENT_PATH
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: ./.github/actions/meteor-build
         with:
@@ -187,7 +187,7 @@ jobs:
         platform: ['official', 'alpine']
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # we only build and publish the actual docker images if not a PR from a fork
       - uses: ./.github/actions/build-docker
@@ -216,7 +216,7 @@ jobs:
         platform: ['official', 'alpine']
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: ./.github/actions/build-docker
         with:
@@ -415,7 +415,7 @@ jobs:
     needs: [build, checks, release-versions]
     if: github.event_name == 'release' || github.ref == 'refs/heads/develop'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Restore build
         uses: actions/download-artifact@v3

.github/workflows/codeql-analysis.yml

@@ -13,7 +13,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.

.github/workflows/new-release.yml

@@ -25,7 +25,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.inputs.base-ref }}
           fetch-depth: 0

.github/workflows/publish-release.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
           token: ${{ secrets.CI_PAT }}

apps/meteor/client/components/Omnichannel/Tags.tsx

@@ -4,7 +4,7 @@ import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-context
 import type { ChangeEvent, ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
 
-import { useFormsSubscription } from '../../views/omnichannel/additionalForms';
+import { CurrentChatTags } from '../../views/omnichannel/additionalForms';
 import { FormSkeleton } from './Skeleton';
 import { useLivechatTags } from './hooks/useLivechatTags';
 
@@ -18,12 +18,6 @@ type TagsProps = {
 
 const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps): ReactElement => {
 	const t = useTranslation();
-	const forms = useFormsSubscription() as any;
-
-	// TODO: Refactor the formsSubscription to use components instead of hooks (since the only thing the hook does is return a component)
-	const { useCurrentChatTags } = forms;
-	// Conditional hook was required since the whole formSubscription uses hooks in an incorrect manner
-	const EETagsComponent = useCurrentChatTags?.();
 
 	const { data: tagsResult, isInitialLoading } = useLivechatTags({
 		department,
@@ -75,9 +69,9 @@ const Tags = ({ tags = [], handler, error, tagRequired, department }: TagsProps)
 				{t('Tags')}
 			</FieldLabel>
 
-			{EETagsComponent && tagsResult?.tags && tagsResult?.tags.length ? (
+			{tagsResult?.tags && tagsResult?.tags.length ? (
 				<FieldRow>
-					<EETagsComponent
+					<CurrentChatTags
 						value={paginatedTagValue}
 						handler={(tags: { label: string; value: string }[]): void => {
 							handler(tags.map((tag) => tag.label));

apps/meteor/client/views/omnichannel/additionalForms.tsx

@@ -1,44 +1,29 @@
-import type { ReactElement } from 'react';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-empty-interface
-export interface EEFormHooks {}
-
-const createFormSubscription = (): {
-	registerForm: (form: EEFormHooks) => void;
-	unregisterForm: (form: keyof EEFormHooks) => void;
-	formsSubscription: readonly [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => EEFormHooks];
-	getForm: (form: keyof EEFormHooks) => () => ReactElement;
-} => {
-	let forms = {} as EEFormHooks;
-	let updateCb = (): void => undefined;
-
-	const formsSubscription = [
-		(cb: () => void): (() => void) => {
-			updateCb = cb;
-			return (): void => {
-				updateCb = (): void => undefined;
-			};
-		},
-		(): EEFormHooks => forms,
-	] as const;
-
-	const registerForm = (newForm: EEFormHooks): void => {
-		forms = { ...forms, ...newForm };
-		updateCb();
-	};
-	const unregisterForm = (form: keyof EEFormHooks): void => {
-		delete forms[form];
-		updateCb();
-	};
-
-	const getForm = (form: keyof EEFormHooks): (() => ReactElement) => (forms as any)[form] as any;
-
-	return { registerForm, unregisterForm, formsSubscription, getForm };
+import BusinessHoursMultipleContainer from '../../../ee/client/omnichannel/additionalForms/BusinessHoursMultipleContainer';
+import ContactManager from '../../../ee/client/omnichannel/additionalForms/ContactManager';
+import CurrentChatTags from '../../../ee/client/omnichannel/additionalForms/CurrentChatTags';
+import CustomFieldsAdditionalFormContainer from '../../../ee/client/omnichannel/additionalForms/CustomFieldsAdditionalFormContainer';
+import DepartmentBusinessHours from '../../../ee/client/omnichannel/additionalForms/DepartmentBusinessHours';
+import DepartmentForwarding from '../../../ee/client/omnichannel/additionalForms/DepartmentForwarding';
+import EeNumberInput from '../../../ee/client/omnichannel/additionalForms/EeNumberInput';
+import EeTextAreaInput from '../../../ee/client/omnichannel/additionalForms/EeTextAreaInput';
+import EeTextInput from '../../../ee/client/omnichannel/additionalForms/EeTextInput';
+import MaxChatsPerAgentContainer from '../../../ee/client/omnichannel/additionalForms/MaxChatsPerAgentContainer';
+import MaxChatsPerAgentDisplay from '../../../ee/client/omnichannel/additionalForms/MaxChatsPerAgentDisplay';
+import PrioritiesSelect from '../../../ee/client/omnichannel/additionalForms/PrioritiesSelect';
+import SlaPoliciesSelect from '../../../ee/client/omnichannel/additionalForms/SlaPoliciesSelect';
+
+export {
+	CustomFieldsAdditionalFormContainer,
+	MaxChatsPerAgentContainer,
+	MaxChatsPerAgentDisplay,
+	EeNumberInput,
+	EeTextAreaInput,
+	BusinessHoursMultipleContainer,
+	EeTextInput,
+	ContactManager,
+	CurrentChatTags,
+	DepartmentBusinessHours,
+	DepartmentForwarding,
+	SlaPoliciesSelect,
+	PrioritiesSelect,
 };
-
-const { registerForm, unregisterForm, formsSubscription, getForm } = createFormSubscription();
-
-export { registerForm, unregisterForm, getForm };
-
-export const useFormsSubscription = (): EEFormHooks => useSyncExternalStore(...formsSubscription);

apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx

@@ -14,14 +14,14 @@ import {
 } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch, useRoute, useSetting, useMethod, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
-import type { FC, ReactElement } from 'react';
+import type { FC } from 'react';
 import React, { useMemo, useRef, useState } from 'react';
 
 import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
 import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
 import UserInfo from '../../../components/UserInfo';
 import { useForm } from '../../../hooks/useForm';
-import { useFormsSubscription } from '../additionalForms';
+import { MaxChatsPerAgentContainer } from '../additionalForms';
 
 // TODO: TYPE:
 // Department
@@ -63,7 +63,6 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 		() => (userDepartments.departments ? userDepartments.departments.map(({ departmentId }) => departmentId) : []),
 		[userDepartments],
 	);
-	const eeForms = useFormsSubscription();
 
 	const saveRef = useRef({
 		values: {},
@@ -82,8 +81,6 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 		}
 	});
 
-	const { useMaxChatsPerAgent = (): ReactElement | null => null } = eeForms as any; // TODO: Find out how to use ts with eeForms
-
 	const { values, handlers, hasUnsavedChanges, commit } = useForm({
 		departments: initialDepartmentValue,
 		status: statusLivechat,
@@ -98,8 +95,6 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 		voipExtension: string;
 	};
 
-	const MaxChats = useMaxChatsPerAgent();
-
 	const saveAgentInfo = useMethod('livechat:saveAgentInfo');
 	const saveAgentStatus = useEndpoint('POST', '/v1/livechat/agent.status');
 
@@ -177,7 +172,7 @@ const AgentEdit: FC<AgentEditProps> = ({ data, userDepartments, availableDepartm
 						/>
 					</FieldRow>
 				</Field>
-				{MaxChats && <MaxChats data={user} onChange={onChangeMaxChats} />}
+				<MaxChatsPerAgentContainer data={user as any} onChange={onChangeMaxChats} />
 				{voipEnabled && (
 					<Field>
 						<FieldLabel>{t('VoIP_Extension')}</FieldLabel>

apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx

@@ -9,7 +9,7 @@ import UserInfo from '../../../components/UserInfo';
 import { UserStatus } from '../../../components/UserStatus';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { useEndpointData } from '../../../hooks/useEndpointData';
-import { useFormsSubscription } from '../additionalForms';
+import { MaxChatsPerAgentDisplay } from '../additionalForms';
 
 type AgentInfoProps = {
 	uid: string;
@@ -19,10 +19,6 @@ const AgentInfo = memo<AgentInfoProps>(function AgentInfo({ uid, children, ...pr
 	const t = useTranslation();
 	const result = useEndpointData('/v1/livechat/users/agent/:_id', { keys: { _id: uid } });
 
-	const { useMaxChatsPerAgentDisplay } = useFormsSubscription();
-
-	const MaxChats = useMaxChatsPerAgentDisplay?.();
-
 	if (result.phase === AsyncStatePhase.LOADING) {
 		return <FormSkeleton />;
 	}
@@ -58,7 +54,7 @@ const AgentInfo = memo<AgentInfoProps>(function AgentInfo({ uid, children, ...pr
 					</>
 				)}
 
-				{MaxChats && <MaxChats data={user} />}
+				<MaxChatsPerAgentDisplay data={user} />
 			</Margins>
 		</ContextualbarScrollableContent>
 	);

apps/meteor/client/views/omnichannel/businessHours/BusinessHoursFormContainer.js

@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react';
 import { businessHourManager } from '../../../../app/livechat/client/views/app/business-hours/BusinessHours';
 import { useForm } from '../../../hooks/useForm';
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
-import { useFormsSubscription } from '../additionalForms';
+import { BusinessHoursMultipleContainer } from '../additionalForms';
 import BusinessHourForm from './BusinessHoursForm';
 import BusinessHoursTimeZone from './BusinessHoursTimeZone';
 
@@ -22,18 +22,10 @@ const getInitalData = ({ workHours }) => ({
 	}, {}),
 });
 
-const cleanFunc = () => {};
-
 const BusinessHoursFormContainer = ({ data, saveRef, onChange = () => {} }) => {
-	const forms = useFormsSubscription();
-
 	const [hasChangesMultiple, setHasChangesMultiple] = useState(false);
 	const [hasChangesTimeZone, setHasChangesTimeZone] = useState(false);
 
-	const { useBusinessHoursMultiple = cleanFunc } = forms;
-
-	const MultipleBHForm = useBusinessHoursMultiple();
-
 	const showMultipleBHForm = useReactiveValue(useMutableCallback(() => businessHourManager.showCustomTemplate(data)));
 
 	const onChangeTimezone = useChangeHandler('timezone', saveRef);
@@ -50,8 +42,8 @@ const BusinessHoursFormContainer = ({ data, saveRef, onChange = () => {} }) => {
 	return (
 		<Box maxWidth='600px' w='full' alignSelf='center'>
 			<FieldGroup>
-				{showMultipleBHForm && MultipleBHForm && (
-					<MultipleBHForm onChange={onChangeMultipleBHForm} data={data} hasChangesAndIsValid={setHasChangesMultiple} />
+				{showMultipleBHForm && (
+					<BusinessHoursMultipleContainer onChange={onChangeMultipleBHForm} data={data} hasChangesAndIsValid={setHasChangesMultiple} />
 				)}
 				<BusinessHoursTimeZone
 					onChange={onChangeTimezone}

apps/meteor/client/views/omnichannel/currentChats/FilterByText.tsx

@@ -8,7 +8,7 @@ import React, { useEffect } from 'react';
 import AutoCompleteAgent from '../../../components/AutoCompleteAgent';
 import AutoCompleteDepartment from '../../../components/AutoCompleteDepartment';
 import GenericModal from '../../../components/GenericModal';
-import { useFormsSubscription } from '../additionalForms';
+import { CurrentChatTags } from '../additionalForms';
 import Label from './Label';
 import RemoveAllClosed from './RemoveAllClosed';
 
@@ -59,14 +59,6 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 		setCustomFields(undefined);
 	});
 
-	const forms = useFormsSubscription() as any;
-
-	// TODO: Refactor the formsSubscription to use components instead of hooks (since the only thing the hook does is return a component)
-	// Conditional hook was required since the whole formSubscription uses hooks in an incorrect manner
-	const { useCurrentChatTags = (): void => undefined } = forms;
-
-	const EETagsComponent = useCurrentChatTags();
-
 	const onSubmit = useMutableCallback((e) => e.preventDefault());
 
 	useEffect(() => {
@@ -146,11 +138,11 @@ const FilterByText: FilterByTextType = ({ setFilter, reload, customFields, setCu
 					<AutoCompleteDepartment haveAll showArchived value={department} onChange={handleDepartment} onlyMyDepartments />
 				</Box>
 			</Box>
-			{EETagsComponent && (
+			{CurrentChatTags && (
 				<Box display='flex' flexDirection='row' marginBlockStart={8} {...props}>
 					<Box display='flex' mie={8} flexGrow={1} flexDirection='column'>
 						<Label mb={4}>{t('Tags')}</Label>
-						<EETagsComponent value={tags} handler={handleTags} viewAll />
+						<CurrentChatTags value={tags} handler={handleTags} viewAll />
 					</Box>
 				</Box>
 			)}