Merge pull request RocketChat#559 from Shailesh351/sb_fix_omni_filters

Fix OmniChannel Filters Setting
Shailesh351 · Mar 18, 2021 · 6f4ffbe · 6f4ffbe
2 parents 9b715c7 + 10bf406
commit 6f4ffbe
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 50 deletions.
diff --git a/client/omnichannel/routes.js b/client/omnichannel/routes.js
@@ -68,11 +68,6 @@ registerOmnichannelRoute('/triggers/:context?/:id?', {
 	lazyRouteComponent: () => import('./triggers/TriggersPage'),
 });
 
-registerOmnichannelRoute('/filters/:context?/:id?', {
-	name: 'omnichannel-filters',
-	lazyRouteComponent: () => import('./filters/FiltersPage'),
-});
-
 registerOmnichannelRoute('/facebook', {
 	name: 'omnichannel-facebook',
 	lazyRouteComponent: () => import('./facebook/FacebookPage'),

diff --git a/client/omnichannel/filters/EditFilterPage.js → ...ews/omnichannel/filters/EditFilterPage.js b/client/omnichannel/filters/EditFilterPage.js → ...ews/omnichannel/filters/EditFilterPage.js
@@ -1,25 +1,26 @@
 import React from 'react';
-import { Button, Callout, FieldGroup, ButtonGroup } from '@rocket.chat/fuselage';
+import { Margins, Callout, FieldGroup, Box, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import FiltersForm from './FiltersForm';
-import PageSkeleton from '../../components/PageSkeleton';
-import { useTranslation } from '../../contexts/TranslationContext';
-import { useMethod } from '../../contexts/ServerContext';
-import { useForm } from '../../hooks/useForm';
-import { useEndpointData, ENDPOINT_STATES } from '../../hooks/useEndpointData';
-import { useRoute } from '../../contexts/RouterContext';
-import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
+import PageSkeleton from '../../../components/PageSkeleton';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useMethod } from '../../../contexts/ServerContext';
+import { useForm } from '../../../hooks/useForm';
+import { useRoute } from '../../../contexts/RouterContext';
+import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 
 const EditFilterPageContainer = ({ id, onSave }) => {
 	const t = useTranslation();
-	const { data, state } = useEndpointData(`livechat/filters/${ id }`);
+	const { value: data, phase: state } = useEndpointData(`livechat/filters/${ id }`);
 
-	if (state === ENDPOINT_STATES.LOADING) {
+	if (state === AsyncStatePhase.LOADING) {
 		return <PageSkeleton />;
 	}
 
-	if (state === ENDPOINT_STATES.ERROR || !data?.filter) {
+	if (state === AsyncStatePhase.REJECTED || !data?.filter) {
 		return <Callout>
 			{t('Error')}: error
 		</Callout>;
@@ -50,7 +51,7 @@ const EditFilterPage = ({ data, onSave }) => {
 
 	const save = useMethod('livechat:saveFilter');
 
-	const { values, handlers } = useForm(getInitialValues(data));
+	const { values, handlers, hasUnsavedChanges } = useForm(getInitialValues(data));
 
 	const handleSave = useMutableCallback(async () => {
 		try {
@@ -66,15 +67,21 @@ const EditFilterPage = ({ data, onSave }) => {
 		}
 	});
 
+	const { name } = values;
+
+	const canSave = name && hasUnsavedChanges;
+
 	return 	<>
 		<FieldGroup>
 			<FiltersForm values={values} handlers={handlers}/>
 		</FieldGroup>
-		<ButtonGroup align='end'>
-			<Button primary onClick={handleSave}>
-				{t('Save')}
-			</Button>
-		</ButtonGroup>
+		<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>
+			<Margins inlineEnd='x4'>
+				<Button flexGrow={1} primary onClick={handleSave} disabled={!canSave}>
+					{t('Save')}
+				</Button>
+			</Margins>
+		</Box>
 	</>;
 };
 

diff --git a/...mnichannel/filters/FiltersForm.stories.js → ...mnichannel/filters/FiltersForm.stories.js b/...mnichannel/filters/FiltersForm.stories.js → ...mnichannel/filters/FiltersForm.stories.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { FieldGroup, Box } from '@rocket.chat/fuselage';
 
 import FiltersForm from './FiltersForm';
-import { useForm } from '../../hooks/useForm';
+import { useForm } from '../../../hooks/useForm';
 
 export default {
 	title: 'omnichannel/FiltersForm',

diff --git a/client/omnichannel/filters/FiltersForm.tsx → ...views/omnichannel/filters/FiltersForm.tsx b/client/omnichannel/filters/FiltersForm.tsx → ...views/omnichannel/filters/FiltersForm.tsx
@@ -1,7 +1,7 @@
 import React, { FC, FormEvent } from 'react';
 import { Box, Field, TextInput, ToggleSwitch, BoxClassName } from '@rocket.chat/fuselage';
 
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
 
 type FiltersFormProps = {
 	values: {

diff --git a/client/omnichannel/filters/FiltersPage.js → .../views/omnichannel/filters/FiltersPage.js b/client/omnichannel/filters/FiltersPage.js → .../views/omnichannel/filters/FiltersPage.js
@@ -5,12 +5,12 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import FiltersTable from './FiltersTable';
 import EditFilterPage from './EditFilterPage';
 import NewFilterPage from './NewFilterPage';
-import VerticalBar from '../../components/VerticalBar';
-import Page from '../../components/Page';
-import NotAuthorizedPage from '../../components/NotAuthorizedPage';
-import { useTranslation } from '../../contexts/TranslationContext';
-import { useRoute, useRouteParameter } from '../../contexts/RouterContext';
-import { usePermission } from '../../contexts/AuthorizationContext';
+import VerticalBar from '../../../components/VerticalBar';
+import Page from '../../../components/Page';
+import NotAuthorizedPage from '../../../components/NotAuthorizedPage';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useRoute, useRouteParameter } from '../../../contexts/RouterContext';
+import { usePermission } from '../../../contexts/AuthorizationContext';
 
 const MonitorsPage = () => {
 	const t = useTranslation();
@@ -43,13 +43,13 @@ const MonitorsPage = () => {
 					<Icon name='plus' size='x16' />
 				</Button>
 			</Page.Header>
-			<Page.ScrollableContentWithShadow>
+			<Page.Content>
 				<FiltersTable reloadRef={reload}/>
-			</Page.ScrollableContentWithShadow>
+			</Page.Content>
 		</Page>
 		{context && <VerticalBar className={'contextual-bar'}>
 			<VerticalBar.Header>
-				{t('Trigger')}
+				{t('Filter')}
 				<VerticalBar.Close onClick={handleCloseVerticalBar} />
 			</VerticalBar.Header>
 			<VerticalBar.ScrollableContent>

diff --git a/client/omnichannel/filters/FiltersTable.js → ...views/omnichannel/filters/FiltersTable.js b/client/omnichannel/filters/FiltersTable.js → ...views/omnichannel/filters/FiltersTable.js
@@ -2,15 +2,16 @@ import { Table, Callout, Icon, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import React, { useState, memo, useMemo } from 'react';
 
-import GenericTable from '../../components/GenericTable';
-import DeleteWarningModal from '../../components/DeleteWarningModal';
-import { useRoute } from '../../contexts/RouterContext';
-import { useSetModal } from '../../contexts/ModalContext';
-import { useMethod } from '../../contexts/ServerContext';
-import { useTranslation } from '../../contexts/TranslationContext';
-import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
-import { useResizeInlineBreakpoint } from '../../hooks/useResizeInlineBreakpoint';
-import { useEndpointData, ENDPOINT_STATES } from '../../hooks/useEndpointData';
+import GenericTable from '../../../components/GenericTable';
+import DeleteWarningModal from '../../../components/DeleteWarningModal';
+import { useRoute } from '../../../contexts/RouterContext';
+import { useSetModal } from '../../../contexts/ModalContext';
+import { useMethod } from '../../../contexts/ServerContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
+import { useResizeInlineBreakpoint } from '../../../hooks/useResizeInlineBreakpoint';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 
 const FiltersRow = memo(function FiltersRow(props) {
 	const {
@@ -58,7 +59,10 @@ const FiltersRow = memo(function FiltersRow(props) {
 			setModal();
 		};
 
-		setModal(<DeleteWarningModal onDelete={onDeleteFilter} onCancel={() => setModal()}/>);
+		setModal(<DeleteWarningModal
+			onDelete={onDeleteFilter}
+			onCancel={() => setModal()}
+		/>);
 	});
 
 	return <Table.Row
@@ -95,11 +99,11 @@ const FiltersTableContainer = ({ reloadRef }) => {
 		itemsPerPage,
 	} = params;
 
-	const { data, state, reload } = useEndpointData('livechat/filters', useMemo(() => ({ offset: current, count: itemsPerPage }), [current, itemsPerPage]));
+	const { value: data, phase: state, reload } = useEndpointData('livechat/filters', useMemo(() => ({ offset: current, count: itemsPerPage }), [current, itemsPerPage]));
 
 	reloadRef.current = reload;
 
-	if (state === ENDPOINT_STATES.ERROR) {
+	if (state === AsyncStatePhase.REJECTED) {
 		return <Callout>
 			{t('Error')}: error
 		</Callout>;

diff --git a/client/omnichannel/filters/NewFilterPage.js → ...iews/omnichannel/filters/NewFilterPage.js b/client/omnichannel/filters/NewFilterPage.js → ...iews/omnichannel/filters/NewFilterPage.js
@@ -3,11 +3,11 @@ import { Button, FieldGroup, ButtonGroup } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import FiltersForm from './FiltersForm';
-import { useTranslation } from '../../contexts/TranslationContext';
-import { useMethod } from '../../contexts/ServerContext';
-import { useForm } from '../../hooks/useForm';
-import { useRoute } from '../../contexts/RouterContext';
-import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { useMethod } from '../../../contexts/ServerContext';
+import { useForm } from '../../../hooks/useForm';
+import { useRoute } from '../../../contexts/RouterContext';
+import { useToastMessageDispatch } from '../../../contexts/ToastMessagesContext';
 
 const NewFilterPage = ({ onSave }) => {
 	const dispatchToastMessage = useToastMessageDispatch();

diff --git a/client/views/omnichannel/routes.js b/client/views/omnichannel/routes.js
@@ -68,6 +68,12 @@ registerOmnichannelRoute('/triggers/:context?/:id?', {
 	lazyRouteComponent: () => import('./triggers/TriggersPage'),
 });
 
+// WIDECHAT
+registerOmnichannelRoute('/filters/:context?/:id?', {
+	name: 'omnichannel-filters',
+	lazyRouteComponent: () => import('./filters/FiltersPage'),
+});
+
 registerOmnichannelRoute('/facebook', {
 	name: 'omnichannel-facebook',
 	lazyRouteComponent: () => import('./facebook/FacebookPage'),