diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css index 1ca9eaf58..1a65f9e8e 100644 --- a/src/containers/Flow/FlowList/FlowList.module.css +++ b/src/containers/Flow/FlowList/FlowList.module.css @@ -166,3 +166,7 @@ .RadioLabel { margin-right: 24px; } + +.ImportDialog { + max-width: 395px; +} diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx index 5da3cc6ce..a200f3da2 100644 --- a/src/containers/Flow/FlowList/FlowList.tsx +++ b/src/containers/Flow/FlowList/FlowList.tsx @@ -17,10 +17,10 @@ import { ImportButton } from 'components/UI/ImportButton/ImportButton'; import Loading from 'components/UI/Layout/Loading/Loading'; import { DATE_TIME_FORMAT } from 'common/constants'; import { exportFlowMethod, organizationHasDynamicRole } from 'common/utils'; -import { setNotification } from 'common/notification'; import styles from './FlowList.module.css'; import { GET_TAGS } from 'graphql/queries/Tags'; import { AutoComplete } from 'components/UI/Form/AutoComplete/AutoComplete'; +import { DialogBox } from 'components/UI/DialogBox/DialogBox'; const getName = (text: string, keywordsList: any, roles: any) => { const keywords = keywordsList.map((keyword: any) => keyword); @@ -82,6 +82,7 @@ export const FlowList = () => { const [selectedtag, setSelectedTag] = useState(null); const [flowName, setFlowName] = useState(''); const [importing, setImporting] = useState(false); + const [importStatus, setImportStatus] = useState([]); const [releaseFlow] = useLazyQuery(RELEASE_FLOW); @@ -92,10 +93,7 @@ export const FlowList = () => { const [importFlow] = useMutation(IMPORT_FLOW, { onCompleted: (result: any) => { const { status } = result.importFlow; - if (status) { - const statusValue = status.map((stat: any) => `${stat.flowName}: ${stat.status}`); - setNotification(t(statusValue.join('\n'))); - } + setImportStatus(status); setImporting(false); }, }); @@ -116,6 +114,27 @@ export const FlowList = () => { setFlowName(item.name); exportFlowMutation({ variables: { id } }); }; + let dialog; + + if (importStatus.length > 0) { + dialog = ( + setImportStatus([])} + skipCancel + > +
+ {importStatus.map((status: any) => ( +
+ {status.flowName}: {status.status} +
+ ))} +
+
+ ); + } const importButton = ( { } return ( - + <> + {dialog} + + ); };