chore: Refactor Omnichannel EditCustomField UI (RocketChat#30786)

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

@@ -1,7 +1,7 @@
 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 CustomFieldsAdditionalForm from '../../../ee/client/omnichannel/additionalForms/CustomFieldsAdditionalForm';
 import DepartmentBusinessHours from '../../../ee/client/omnichannel/additionalForms/DepartmentBusinessHours';
 import DepartmentForwarding from '../../../ee/client/omnichannel/additionalForms/DepartmentForwarding';
 import EeNumberInput from '../../../ee/client/omnichannel/additionalForms/EeNumberInput';
@@ -13,7 +13,7 @@ import PrioritiesSelect from '../../../ee/client/omnichannel/additionalForms/Pri
 import SlaPoliciesSelect from '../../../ee/client/omnichannel/additionalForms/SlaPoliciesSelect';
 
 export {
-	CustomFieldsAdditionalFormContainer,
+	CustomFieldsAdditionalForm,
 	MaxChatsPerAgentContainer,
 	MaxChatsPerAgentDisplay,
 	EeNumberInput,

apps/meteor/client/views/omnichannel/customFields/CustomFieldsForm.stories.tsx

@@ -1,37 +1,20 @@
 import { Box } from '@rocket.chat/fuselage';
-import { action } from '@storybook/addon-actions';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import NewCustomFieldsForm from './NewCustomFieldsForm';
+import EditCustomFields from './EditCustomFields';
 
 export default {
-	title: 'Omnichannel/NewCustomFieldsForm',
-	component: NewCustomFieldsForm,
+	title: 'Omnichannel/CustomFields',
+	component: EditCustomFields,
 	decorators: [
 		(fn) => (
 			<Box maxWidth='x600' alignSelf='center' w='full' m={24}>
 				{fn()}
 			</Box>
 		),
 	],
-} as ComponentMeta<typeof NewCustomFieldsForm>;
+} as ComponentMeta<typeof EditCustomFields>;
 
-export const Default: ComponentStory<typeof NewCustomFieldsForm> = (args) => <NewCustomFieldsForm {...args} />;
+export const Default: ComponentStory<typeof EditCustomFields> = (args) => <EditCustomFields {...args} />;
 Default.storyName = 'CustomFieldsForm';
-Default.args = {
-	values: {
-		field: '',
-		label: '',
-		scope: 'visitor',
-		visibility: true,
-		regexp: '',
-	},
-	handlers: {
-		handleField: action('handleField'),
-		handleLabel: action('handleLabel'),
-		handleScope: action('handleScope'),
-		handleVisibility: action('handleVisibility'),
-		handleRegexp: action('handleRegexp'),
-	},
-};

apps/meteor/client/views/omnichannel/customFields/CustomFieldsPage.tsx

@@ -1,30 +1,33 @@
 import { Button } from '@rocket.chat/fuselage';
-import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
-import type { MutableRefObject } from 'react';
+import { useRouteParameter, useRouter, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import Page from '../../../components/Page';
 import CustomFieldsTable from './CustomFieldsTable';
+import EditCustomFields from './EditCustomFields';
+import EditCustomFieldsWithData from './EditCustomFieldsWithData';
 
-const CustomFieldsPage = ({ reload }: { reload: MutableRefObject<() => void> }) => {
+const CustomFieldsPage = () => {
 	const t = useTranslation();
-	const router = useRoute('omnichannel-customfields');
+	const router = useRouter();
 
-	const onAddNew = useMutableCallback(() => router.push({ context: 'new' }));
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
 
 	return (
 		<Page flexDirection='row'>
 			<Page>
 				<Page.Header title={t('Custom_Fields')}>
-					<Button data-qa-id='CustomFieldPageBtnNew' onClick={onAddNew}>
+					<Button data-qa-id='CustomFieldPageBtnNew' onClick={() => router.navigate('/omnichannel/customfields/new')}>
 						{t('Create_custom_field')}
 					</Button>
 				</Page.Header>
 				<Page.Content>
-					<CustomFieldsTable reload={reload} />
+					<CustomFieldsTable />
 				</Page.Content>
 			</Page>
+			{context === 'edit' && id && <EditCustomFieldsWithData customFieldId={id} />}
+			{context === 'new' && <EditCustomFields />}
 		</Page>
 	);
 };

apps/meteor/client/views/omnichannel/customFields/CustomFieldsRoute.tsx

@@ -1,33 +1,17 @@
-import { useRouteParameter, usePermission } from '@rocket.chat/ui-contexts';
-import React, { useRef, useCallback } from 'react';
+import { usePermission } from '@rocket.chat/ui-contexts';
+import React from 'react';
 
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import CustomFieldsPage from './CustomFieldsPage';
-import EditCustomFieldsPage from './EditCustomFieldsPageContainer';
-import NewCustomFieldsPage from './NewCustomFieldsPage';
 
 const CustomFieldsRoute = () => {
-	const reload = useRef(() => null);
 	const canViewCustomFields = usePermission('view-livechat-customfields');
-	const context = useRouteParameter('context');
-
-	const handleReload = useCallback(() => {
-		reload.current();
-	}, [reload]);
 
 	if (!canViewCustomFields) {
 		return <NotAuthorizedPage />;
 	}
 
-	if (context === 'new') {
-		return <NewCustomFieldsPage reload={handleReload} />;
-	}
-
-	if (context === 'edit') {
-		return <EditCustomFieldsPage reload={handleReload} />;
-	}
-
-	return <CustomFieldsPage reload={reload} />;
+	return <CustomFieldsPage />;
 };
 
 export default CustomFieldsRoute;

apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx

@@ -1,9 +1,8 @@
-import { Pagination } from '@rocket.chat/fuselage';
+import { IconButton, Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
 import { useQuery, hashQueryKey } from '@tanstack/react-query';
-import type { MutableRefObject } from 'react';
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import FilterByText from '../../../components/FilterByText';
 import GenericNoResults from '../../../components/GenericNoResults';
@@ -18,9 +17,9 @@ import {
 } from '../../../components/GenericTable';
 import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../components/GenericTable/hooks/useSort';
-import RemoveCustomFieldButton from './RemoveCustomFieldButton';
+import { useRemoveCustomField } from './useRemoveCustomField';
 
-const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> }) => {
+const CustomFieldsTable = () => {
 	const t = useTranslation();
 	const router = useRouter();
 	const [filter, setFilter] = useState('');
@@ -32,6 +31,8 @@ const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> })
 	const handleAddNew = useMutableCallback(() => router.navigate('/omnichannel/customfields/new'));
 	const onRowClick = useMutableCallback((id) => () => router.navigate(`/omnichannel/customfields/edit/${id}`));
 
+	const handleDelete = useRemoveCustomField();
+
 	const query = useMemo(
 		() => ({
 			text: debouncedFilter,
@@ -43,18 +44,11 @@ const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> })
 	);
 
 	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
-	const { data, isSuccess, isLoading, refetch } = useQuery(['livechat-customFields', query, debouncedFilter], async () =>
-		getCustomFields(query),
-	);
+	const { data, isSuccess, isLoading } = useQuery(['livechat-customFields', query, debouncedFilter], async () => getCustomFields(query));
 
 	const [defaultQuery] = useState(hashQueryKey([query]));
 	const queryHasChanged = defaultQuery !== hashQueryKey([query]);
 
-	useEffect(() => {
-		reload.current = refetch;
-	}, [reload, refetch]);
-	reload.current = refetch;
-
 	const headers = (
 		<>
 			<GenericTableHeaderCell key='field' direction={sortDirection} active={sortBy === '_id'} onClick={setSort} sort='_id'>
@@ -75,9 +69,7 @@ const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> })
 			>
 				{t('Visibility')}
 			</GenericTableHeaderCell>
-			<GenericTableHeaderCell key='remove' w='x60'>
-				{t('Remove')}
-			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='remove' w='x60' />
 		</>
 	);
 
@@ -116,7 +108,17 @@ const CustomFieldsTable = ({ reload }: { reload: MutableRefObject<() => void> })
 									<GenericTableCell withTruncatedText>{label}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{scope === 'visitor' ? t('Visitor') : t('Room')}</GenericTableCell>
 									<GenericTableCell withTruncatedText>{visibility === 'visible' ? t('Visible') : t('Hidden')}</GenericTableCell>
-									<RemoveCustomFieldButton _id={_id} reload={refetch} />
+									<GenericTableCell withTruncatedText>
+										<IconButton
+											icon='trash'
+											small
+											title={t('Remove')}
+											onClick={(e) => {
+												e.stopPropagation();
+												handleDelete(_id);
+											}}
+										/>
+									</GenericTableCell>
 								</GenericTableRow>
 							))}
 						</GenericTableBody>