From 38c604d5e50194257618be7ba8715797b76aaad2 Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Wed, 25 Oct 2023 19:01:36 +0530 Subject: [PATCH 1/4] updated to new flowediotr screen --- src/assets/images/icons/BackIconFlow.svg | 4 + src/assets/images/icons/Simulator.svg | 20 +- .../Form/AutoComplete/AutoComplete.module.css | 12 -- src/components/UI/Form/Button/Button.tsx | 2 +- src/components/UI/Form/Input/Input.module.css | 4 - src/components/UI/Layout/Layout.module.css | 1 + src/components/UI/Pager/Pager.module.css | 5 - .../floweditor/FlowEditor.module.css | 50 ++--- src/components/floweditor/FlowEditor.tsx | 198 ++++++++++-------- src/components/simulator/Simulator.tsx | 127 ++++------- src/config/theme.tsx | 16 ++ .../ChatInterface/ChatInterface.module.css | 26 +-- .../Chat/ChatInterface/ChatInterface.tsx | 99 +++++---- .../ChatInput/ChatInput.module.css | 13 -- .../ChatTemplates/ChatTemplates.module.css | 13 -- .../InteractiveMessage/InteractiveMessage.tsx | 2 - src/containers/Template/Form/HSM/HSM.tsx | 8 +- src/index.css | 23 ++ 18 files changed, 293 insertions(+), 330 deletions(-) create mode 100644 src/assets/images/icons/BackIconFlow.svg diff --git a/src/assets/images/icons/BackIconFlow.svg b/src/assets/images/icons/BackIconFlow.svg new file mode 100644 index 000000000..cf78d4f7e --- /dev/null +++ b/src/assets/images/icons/BackIconFlow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/icons/Simulator.svg b/src/assets/images/icons/Simulator.svg index 171fd73af..a2efbd401 100644 --- a/src/assets/images/icons/Simulator.svg +++ b/src/assets/images/icons/Simulator.svg @@ -1,15 +1,5 @@ - - - - Group 5 - Created with Sketch. - - - - - - - - - - \ No newline at end of file + + + + + diff --git a/src/components/UI/Form/AutoComplete/AutoComplete.module.css b/src/components/UI/Form/AutoComplete/AutoComplete.module.css index ec94b5e84..7bc6a9e71 100644 --- a/src/components/UI/Form/AutoComplete/AutoComplete.module.css +++ b/src/components/UI/Form/AutoComplete/AutoComplete.module.css @@ -59,18 +59,6 @@ height: 36px !important; } -::-webkit-scrollbar { - width: 4px; -} - -::-webkit-scrollbar-track { - background: #f1f1f1; -} - -::-webkit-scrollbar-thumb { - background: #888; -} - @media screen and (max-width: 768px) { .Input { width: 100%; diff --git a/src/components/UI/Form/Button/Button.tsx b/src/components/UI/Form/Button/Button.tsx index 3649a81b7..c000caa90 100644 --- a/src/components/UI/Form/Button/Button.tsx +++ b/src/components/UI/Form/Button/Button.tsx @@ -26,10 +26,10 @@ export const Button = ({ return ( div { - padding-top: 80px; -} - .Icon { background-color: #eaedec !important; margin-right: 10px !important; @@ -147,3 +123,29 @@ composes: ResetFlow; left: 90px; } + +.Header { + position: absolute; + width: 100%; + z-index: 1000; + height: 70px; + display: flex; + background-color: #f8faf5; +} + +.Actions { + position: relative; + padding: 16px 40px; + margin-left: auto; +} + +.Title { + display: flex; + align-items: center; + padding: 15px; +} + +.BackIcon { + cursor: pointer; + margin-right: 8px; +} diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx index 11547718a..8aa7fe9fd 100644 --- a/src/components/floweditor/FlowEditor.tsx +++ b/src/components/floweditor/FlowEditor.tsx @@ -1,9 +1,19 @@ -import { useContext, useEffect, useState } from 'react'; +import { SyntheticEvent, useContext, useEffect, useRef, useState } from 'react'; import { useMutation, useLazyQuery, useQuery } from '@apollo/client'; import { Navigate, useNavigate, useParams } from 'react-router-dom'; -import { IconButton } from '@mui/material'; - -import { ReactComponent as HelpIcon } from 'assets/images/icons/Help.svg'; +import { + ClickAwayListener, + Grow, + IconButton, + Menu, + MenuItem, + MenuList, + Paper, + Popper, + Typography, +} from '@mui/material'; + +import { ReactComponent as BackIconFlow } from 'assets/images/icons/BackIconFlow.svg'; import { ReactComponent as FlowIcon } from 'assets/images/icons/Flow/Dark.svg'; import { ReactComponent as WarningIcon } from 'assets/images/icons/Warning.svg'; import { ReactComponent as ExportIcon } from 'assets/images/icons/Flow/Export.svg'; @@ -32,12 +42,12 @@ export const FlowEditor = () => { const { uuid } = params; const navigate = useNavigate(); const [publishDialog, setPublishDialog] = useState(false); - const [simulatorId, setSimulatorId] = useState(0); const [loading, setLoading] = useState(true); const [flowEditorLoaded, setFlowEditorLoaded] = useState(false); const [flowId, setFlowId] = useState(); const config = setConfig(uuid); const [published, setPublished] = useState(false); + const [showSimulator, setShowSimulator] = useState(false); const [stayOnPublish, setStayOnPublish] = useState(false); const [showResetFlowModal, setShowResetFlowModal] = useState(false); const [flowValidation, setFlowValidation] = useState(); @@ -45,7 +55,15 @@ export const FlowEditor = () => { const [flowKeyword, setFlowKeyword] = useState(''); const [currentEditDialogBox, setCurrentEditDialogBox] = useState(false); const [dialogMessage, setDialogMessage] = useState(''); - const { drawerOpen } = useContext(SideDrawerContext); + + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; let modal = null; let dialog = null; @@ -305,11 +323,11 @@ export const FlowEditor = () => { if (flows && flows.length > 0) { const { isActive, keywords } = flows[0]; if (isActive && keywords.length > 0) { - setFlowKeyword(`draft:${keywords[0]}`); + return `draft:${keywords[0]}`; } else if (keywords.length === 0) { - setFlowKeyword('No keyword found'); + return 'No keyword found'; } else { - setFlowKeyword('Sorry, the flow is not active'); + return 'Sorry, the flow is not active'; } } }; @@ -317,93 +335,91 @@ export const FlowEditor = () => { return ( <> {dialog} -
- - - - - - -
exportFlowMutation({ variables: { id: flowId } })} - aria-hidden="true" - > - +
+
+ navigate('/flow')} className={styles.BackIcon} /> + + {flowName ? flowTitle : 'Flow'} +
- - - +
+ + + { + // Todo: add some kind of loading + exportFlowMutation({ + variables: { + id: flowId, + }, + }); + handleClose(); + }} + disableRipple + > + Export flow + + { + setShowResetFlowModal(true); + handleClose(); + }} + disableRipple + > + Reset flow count + + + + + +
- 0} - setSimulatorId={setSimulatorId} - hasResetButton - flowSimulator - message={flowKeyword} - resetMessage={resetMessage} - getFlowKeyword={getFlowKeyword} - /> + + {showSimulator && ( + + )} {modal}
-
- {flowName && ( - <> - - - - - {flowTitle} - - )} -
- -
{loading && }
diff --git a/src/components/simulator/Simulator.tsx b/src/components/simulator/Simulator.tsx index 4d1172564..e5ff63005 100644 --- a/src/components/simulator/Simulator.tsx +++ b/src/components/simulator/Simulator.tsx @@ -56,13 +56,12 @@ import { updateSimulatorConversations } from 'services/SubscriptionService'; import styles from './Simulator.module.css'; export interface SimulatorProps { - showSimulator: boolean; - setSimulatorId: any; + setShowSimulator?: any; simulatorIcon?: boolean; message?: any; flowSimulator?: boolean; isPreviewMessage?: boolean; - resetMessage?: Function; + getSimulatorId?: any; getFlowKeyword?: Function; interactiveMessage?: any; showHeader?: boolean; @@ -119,14 +118,10 @@ const getSimulatorVariables = (id: any) => ({ }); export const Simulator = ({ - showSimulator, - setSimulatorId, - simulatorIcon = true, + setShowSimulator = () => {}, message, - flowSimulator, isPreviewMessage, - resetMessage, - getFlowKeyword, + getSimulatorId, interactiveMessage, showHeader = true, hasResetButton = false, @@ -195,16 +190,29 @@ export const Simulator = ({ setLogs(error, 'error'); }); setInputMessage(''); - // reset the message from floweditor for the next time - if (resetMessage) { - resetMessage(); - } }; - const { data: simulatorSubscribe }: any = useSubscription(SIMULATOR_RELEASE_SUBSCRIPTION, { - variables, - skip: isPreviewMessage, - }); + // Todo: think how to incorporate this + // useSubscription(SIMULATOR_RELEASE_SUBSCRIPTION, { + // variables, + // skip: isPreviewMessage, + // onData: ({ data: simulatorSubscribe }) => { + // console.log(simulatorSubscribe); + // if (simulatorSubscribe.data) { + // try { + // const userId = JSON.parse(simulatorSubscribe.data.simulatorRelease).simulator_release + // .user_id; + // console.log(userId, getUserSession('id')); + // if (userId.toString() === getUserSession('id')) { + // console.log('jaaj'); + // setShowSimulator(false); + // } + // } catch (error) { + // setLogs('simulator release error', 'error'); + // } + // } + // }, + // }); useSubscription(SIMULATOR_MESSAGE_SENT_SUBSCRIPTION, { variables, @@ -222,19 +230,6 @@ export const Simulator = ({ }, }); - useEffect(() => { - if (simulatorSubscribe) { - try { - const userId = JSON.parse(simulatorSubscribe.simulatorRelease).simulator_release.user_id; - if (userId.toString() === getUserSession('id')) { - setSimulatorId(0); - } - } catch (error) { - setLogs('simulator release error', 'error'); - } - } - }, [simulatorSubscribe]); - const [releaseSimulator]: any = useLazyQuery(RELEASE_SIMULATOR, { fetchPolicy: 'network-only', }); @@ -249,7 +244,7 @@ export const Simulator = ({ const releaseUserSimulator = () => { releaseSimulator(); - setSimulatorId(0); + setShowSimulator(false); }; const handleOpenListReplyDrawer = (items: any) => { @@ -398,6 +393,12 @@ export const Simulator = ({ } }; + useEffect(() => { + if (!isPreviewMessage) { + handleSimulator(); + } + }, []); + // to display only preview for template useEffect(() => { if (isPreviewMessage) { @@ -407,17 +408,17 @@ export const Simulator = ({ // for loading conversation useEffect(() => { - if (allConversations && showSimulator) { + if (allConversations) { getChatMessage(); } }, [allConversations]); - // for sending message to Gupshup - useEffect(() => { - if (!isPreviewMessage && message && showSimulator) { - sendMessage(sender); - } - }, [message, showSimulator]); + // // for sending message to Gupshup + // useEffect(() => { + // if (!isPreviewMessage && message) { + // sendMessage(sender); + // } + // }, [message]); useEffect(() => { if (isPreviewMessage && interactiveMessage) { @@ -503,9 +504,7 @@ export const Simulator = ({ data-testid="resetIcon" className={styles.ResetIcon} onClick={() => { - if (getFlowKeyword) { - getFlowKeyword(); - } + sendMessage(sender); }} /> )} @@ -578,10 +577,6 @@ export const Simulator = ({ ); const handleSimulator = () => { - // check for the flowkeyword from floweditor - if (getFlowKeyword) { - getFlowKeyword(); - } client .query({ query: GET_SIMULATOR, fetchPolicy: 'network-only' }) .then(({ data: simulatorData }: any) => { @@ -594,8 +589,8 @@ export const Simulator = ({ }) .then(({ data: searchData }: any) => { setAllConversations(searchData); - setSimulatorId(simulatorData.simulatorGet.id); if (searchData?.search.length > 0) { + getSimulatorId(searchData.search[0].contact.id); sendMessage({ name: searchData.search[0].contact.name, phone: searchData.search[0].contact.phone, @@ -613,43 +608,5 @@ export const Simulator = ({ setNotification('Sorry! Failed to get simulator', 'warning'); }); }; - return ( - <> - {showSimulator && simulator} - {simulatorIcon && ( - { - if (showSimulator) { - releaseUserSimulator(); - } else { - handleSimulator(); - } - }} - /> - )} - - {flowSimulator && ( -
- { - if (showSimulator) { - releaseUserSimulator(); - } else { - handleSimulator(); - } - }} - > - Preview - {showSimulator && } - -
- )} - - ); + return simulator; }; diff --git a/src/config/theme.tsx b/src/config/theme.tsx index 541a5532c..3ae9a9585 100644 --- a/src/config/theme.tsx +++ b/src/config/theme.tsx @@ -33,6 +33,22 @@ const theme = createTheme({ MuiBackdrop: { styleOverrides: {}, }, + MuiTabs: { + styleOverrides: { + root: { + height: '32px', + minHeight: '32px', + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + height: '32px', + minHeight: '32px', + }, + }, + }, MuiDivider: { styleOverrides: { root: { diff --git a/src/containers/Chat/ChatInterface/ChatInterface.module.css b/src/containers/Chat/ChatInterface/ChatInterface.module.css index b4b6a7764..6a38f493d 100644 --- a/src/containers/Chat/ChatInterface/ChatInterface.module.css +++ b/src/containers/Chat/ChatInterface/ChatInterface.module.css @@ -55,24 +55,17 @@ } .Tab { + color: #191c1a; width: 110px; height: 32px; + font-size: 13px; text-decoration: none; - border-radius: 24px; - display: flex; - align-items: center; - justify-content: center; -} -.Tab:hover { - background-color: #d9d9d9; -} - -.ActiveTab { - background: #119656 !important; - color: #fff; + text-transform: none; + z-index: 1; + font-weight: 700; } -.SelectedTab { +.TabSelected { color: #fff !important; } @@ -100,3 +93,10 @@ width: 100% !important; } } + +.SimulatorIcon { + cursor: pointer; + position: absolute; + right: 0; + bottom: 0; +} diff --git a/src/containers/Chat/ChatInterface/ChatInterface.tsx b/src/containers/Chat/ChatInterface/ChatInterface.tsx index a1aca05e0..327a4c914 100644 --- a/src/containers/Chat/ChatInterface/ChatInterface.tsx +++ b/src/containers/Chat/ChatInterface/ChatInterface.tsx @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { Paper, Typography } from '@mui/material'; +import { Paper, Tab, Tabs, Typography } from '@mui/material'; import { useQuery } from '@apollo/client'; import { useNavigate, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; @@ -12,11 +12,26 @@ import { setErrorMessage } from 'common/notification'; import { COLLECTION_SEARCH_QUERY_VARIABLES, SEARCH_QUERY_VARIABLES } from 'common/constants'; import ChatConversations from '../ChatConversations/ChatConversations'; import ChatMessages from '../ChatMessages/ChatMessages'; +import { ReactComponent as SimulatorIcon } from 'assets/images/icons/Simulator.svg'; import CollectionConversations from '../CollectionConversations/CollectionConversations'; import SavedSearches from '../SavedSearches/SavedSearches'; import styles from './ChatInterface.module.css'; import HelpIcon from 'components/UI/HelpIcon/HelpIcon'; +const tabs = [ + { + label: 'Chat', + link: '/chat/', + }, + { + label: 'Collections', + link: '/chat/collection/', + }, + { + label: 'Searches', + link: '/chat/saved-searches/', + }, +]; export interface ChatInterfaceProps { savedSearches?: boolean; collectionType?: boolean; @@ -25,9 +40,10 @@ export interface ChatInterfaceProps { export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfaceProps) => { const navigate = useNavigate(); const [simulatorAccess, setSimulatorAccess] = useState(true); + const [showSimulator, setShowSimulator] = useState(false); const [simulatorId, setSimulatorId] = useState(0); const { t } = useTranslation(); - + const [value, setValue] = useState(tabs[0].link); const params = useParams(); let selectedContactId = params.contactId; @@ -87,33 +103,23 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr let chatInterface: any; let listingContent; + const getSimulatorId = (id: any) => { + setSimulatorId(id); + }; + + const handleTabChange = (_event: React.SyntheticEvent, newValue: string) => { + setValue(newValue); + navigate(newValue); + }; + if (data && data.search.length === 0) { chatInterface = noConversations; } else { - const tabs = [ - { - tab: 'Chat', - link: '/chat/', - active: false, - }, - { - tab: 'Collections', - link: '/chat/collection/', - active: false, - }, - { - tab: 'Saved searches', - link: '/chat/saved-searches/', - active: false, - }, - ]; - let heading = ''; if (selectedCollectionId || (selectedTab === 'collections' && !savedSearches)) { listingContent = ; heading = 'Collections'; - tabs[1].active = true; } else if (selectedContactId && !savedSearches) { // let's enable simulator only when contact tab is shown @@ -121,31 +127,12 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr 0 ? simulatorId : selectedContactId} /> ); - tabs[0].active = true; heading = 'Chat'; } else if (savedSearches) { listingContent = ; heading = 'Saved searches'; - tabs[2].active = true; } - const TabHeader = ({ tab }: any) => { - return ( -
navigate(tab.link)} - key={tab.link} - > - - {t(tab.tab)} - -
- ); - }; - chatInterface = ( <>
@@ -162,9 +149,17 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr
- {tabs.map((tab: any) => ( - - ))} + + {tabs.map((tab) => ( + + ))} +
{listingContent}
@@ -173,13 +168,27 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr ); } + const handleCloseSimulator = (value: boolean) => { + setShowSimulator(value); + setSimulatorId(0); + }; + return (
{chatInterface}
- {simulatorAccess && !selectedCollectionId ? ( - 0} /> + { + setShowSimulator(!showSimulator); + if (showSimulator) { + setSimulatorId(0); + } + }} + /> + {simulatorAccess && !selectedCollectionId && showSimulator ? ( + ) : null} ); diff --git a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css index c9e06cfbe..b3cb28b21 100644 --- a/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css +++ b/src/containers/Chat/ChatMessages/ChatInput/ChatInput.module.css @@ -20,19 +20,6 @@ border-radius: 35px; } -.ChatInputElements::-webkit-scrollbar { - width: 22px; -} - -.ChatInputElements::-webkit-scrollbar-thumb { - border-radius: 5px; - background: lightgray; - height: 1em; - border: 0.5em solid rgba(0, 0, 0, 0); - background-clip: padding-box; - -webkit-border-radius: 1em; -} - .InputContainer { width: 85%; font-size: 16px; diff --git a/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css b/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css index 61c81c2de..2d523f56c 100644 --- a/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css +++ b/src/containers/Chat/ChatMessages/ChatTemplates/ChatTemplates.module.css @@ -13,19 +13,6 @@ border-radius: 24px 24px 0px 0px !important; } -.ShortcutList::-webkit-scrollbar { - display: none; -} - -.ShortcutList::-webkit-scrollbar-thumb { - border-radius: 5px; - background: lightgray; - height: 1em; - border: 0.2em solid rgba(0, 0, 0, 0); - background-clip: padding-box; - -webkit-border-radius: 1em; -} - .Text { font-size: 0.875rem; margin: 0; diff --git a/src/containers/InteractiveMessage/InteractiveMessage.tsx b/src/containers/InteractiveMessage/InteractiveMessage.tsx index 05b9a0ac7..47b8658ba 100644 --- a/src/containers/InteractiveMessage/InteractiveMessage.tsx +++ b/src/containers/InteractiveMessage/InteractiveMessage.tsx @@ -792,8 +792,6 @@ export const InteractiveMessage = () => { />
{ category={category} onExampleChange={addButtonsToSampleMessage} /> - +
); }; diff --git a/src/index.css b/src/index.css index 5ea9ccd3e..eac077bc0 100644 --- a/src/index.css +++ b/src/index.css @@ -260,6 +260,29 @@ body { -moz-osx-font-smoothing: grayscale; } +#canvas-container { + margin-top: 70px; +} + code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +::-webkit-scrollbar { + width: 3px; + height: 3px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #888; +} + +.MuiTabs-indicator { + height: 32px; + border-radius: 25px; + z-index: 0; +} From b6f20913151fdbbcad63fc2120c2a2356f14a7af Mon Sep 17 00:00:00 2001 From: mdshamoon Date: Wed, 25 Oct 2023 19:52:50 +0530 Subject: [PATCH 2/4] fix tests --- src/components/floweditor/FlowEditor.test.tsx | 46 +++++++------------ src/components/floweditor/FlowEditor.tsx | 9 +++- src/components/simulator/Simulator.test.tsx | 45 ++++++------------ src/components/simulator/Simulator.tsx | 6 +-- 4 files changed, 41 insertions(+), 65 deletions(-) diff --git a/src/components/floweditor/FlowEditor.test.tsx b/src/components/floweditor/FlowEditor.test.tsx index 45ae98764..ef780db1a 100644 --- a/src/components/floweditor/FlowEditor.test.tsx +++ b/src/components/floweditor/FlowEditor.test.tsx @@ -82,10 +82,10 @@ test('it should display the flowEditor', async () => { }); }); -test('it should have a done button that redirects to flow page', async () => { +test('it should have a back button that redirects to flow page', async () => { const { getByTestId } = render(defaultWrapper); await waitFor(() => { - expect(getByTestId('button')).toBeInTheDocument(); + expect(getByTestId('back-button')).toBeInTheDocument(); }); }); @@ -96,12 +96,12 @@ test('it should display name of the flow', async () => { }); }); -test('it should have a help button that redirects to help page', async () => { - const { getByTestId } = render(defaultWrapper); - await waitFor(() => { - expect(getByTestId('helpButton')).toBeInTheDocument(); - }); -}); +// test('it should have a help button that redirects to help page', async () => { +// const { getByTestId } = render(defaultWrapper); +// await waitFor(() => { +// expect(getByTestId('helpButton')).toBeInTheDocument(); +// }); +// }); test('it should have a preview button', async () => { const { getByTestId } = render(defaultWrapper); @@ -110,25 +110,12 @@ test('it should have a preview button', async () => { }); }); -test('it should have save as draft button', async () => { - const { getByTestId } = render(defaultWrapper); - await waitFor(() => { - expect(getByTestId('saveDraftButton')).toBeInTheDocument(); - }); -}); - -test('click on preview button should open simulator', async () => { - const user = userEvent.setup(); - render(defaultWrapper); - - mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} })); - - await user.click(screen.getByTestId('previewButton')); - - await waitFor(() => { - expect(screen.getByTestId('beneficiaryName')).toBeInTheDocument(); - }); -}); +// test('it should have save as draft button', async () => { +// const { getByTestId } = render(defaultWrapper); +// await waitFor(() => { +// expect(getByTestId('saveDraftButton')).toBeInTheDocument(); +// }); +// }); // test('check if someone else is using a flow', async () => { // // onload is not defined for script element in vite so we need to trigger it manually @@ -247,13 +234,14 @@ test('flow with no keywords', async () => { test('reset flow counts', async () => { mockedAxios.post.mockImplementation(() => Promise.resolve({ data: {} })); - const { getByTestId, getByText, rerender } = render(wrapperFunction(noKeywordMocks)); + const { getByTestId, getByText } = render(wrapperFunction(noKeywordMocks)); await waitFor(() => { expect(screen.findByText('help workflow')); }); - fireEvent.click(getByTestId('resetFlow')); + fireEvent.click(getByTestId('moreButton')); + fireEvent.click(getByText('Reset flow count')); await waitFor(() => { expect( getByText( diff --git a/src/components/floweditor/FlowEditor.tsx b/src/components/floweditor/FlowEditor.tsx index 96f2d0d44..ad77c27a6 100644 --- a/src/components/floweditor/FlowEditor.tsx +++ b/src/components/floweditor/FlowEditor.tsx @@ -317,7 +317,11 @@ export const FlowEditor = () => { {dialog}
- navigate('/flow')} className={styles.BackIcon} /> + navigate('/flow')} + className={styles.BackIcon} + data-testid="back-button" + /> {flowName ? flowTitle : 'Flow'} @@ -330,6 +334,7 @@ export const FlowEditor = () => { aria-haspopup="true" aria-expanded={open ? 'true' : undefined} variant="contained" + data-testid="moreButton" disableElevation onClick={handleClick} > @@ -372,7 +377,7 @@ export const FlowEditor = () => {