added flow status

src/containers/Flow/FlowList/FlowList.module.css

@@ -166,3 +166,7 @@
 .RadioLabel {
   margin-right: 24px;
 }
+
+.ImportDialog {
+  max-width: 395px;
+}

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<any>(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 = (
+      <DialogBox
+        title="Import flow Status"
+        buttonOk="Okay"
+        alignButtons="center"
+        handleOk={() => setImportStatus([])}
+        skipCancel
+      >
+        <div className={styles.ImportDialog}>
+          {importStatus.map((status: any) => (
+            <div>
+              <strong>{status.flowName}:</strong> {status.status}
+            </div>
+          ))}
+        </div>
+      </DialogBox>
+    );
+  }
 
   const importButton = (
     <ImportButton
@@ -256,23 +275,26 @@ export const FlowList = () => {
   }
 
   return (
-    <List
-      title={t('Flows')}
-      listItem="flows"
-      listItemName="flow"
-      pageLink="flow"
-      listIcon={flowIcon}
-      dialogMessage={dialogMessage}
-      {...queries}
-      {...columnAttributes}
-      searchParameter={['name_or_keyword_or_tags']}
-      additionalAction={additionalAction}
-      button={{ show: true, label: t('Create Flow'), symbol: '+' }}
-      secondaryButton={importButton}
-      filters={filters}
-      filterList={activeFilter}
-      filterDropdowm={tagFilter}
-    />
+    <>
+      {dialog}
+      <List
+        title={t('Flows')}
+        listItem="flows"
+        listItemName="flow"
+        pageLink="flow"
+        listIcon={flowIcon}
+        dialogMessage={dialogMessage}
+        {...queries}
+        {...columnAttributes}
+        searchParameter={['name_or_keyword_or_tags']}
+        additionalAction={additionalAction}
+        button={{ show: true, label: t('Create Flow'), symbol: '+' }}
+        secondaryButton={importButton}
+        filters={filters}
+        filterList={activeFilter}
+        filterDropdowm={tagFilter}
+      />
+    </>
   );
 };