From fc3a1510e1264fc347f2cb4e20649df10d52cc0f Mon Sep 17 00:00:00 2001
From: Gimir <mukhammad.amaev@mail.ru>
Date: Tue, 21 Jan 2025 13:51:39 +0300
Subject: [PATCH] fix(chat): keep application wizard open on failed save
 request (Issue #2949) (#2953)

Co-authored-by: Magomed-Elbi Dzhukalaev <magomed-elbi_dzhukalaev@epam.com>
---
 .../ApplicationWizard/ApplicationWizard.tsx   | 39 +++++++++++++++----
 .../store/application/application.epics.ts    |  1 +
 .../store/application/application.reducers.ts |  2 +-
 .../application/application.selectors.ts      | 11 ++++--
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx
index 613737dff9..5d8dd95f76 100644
--- a/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx
+++ b/apps/chat/src/components/Common/ApplicationWizard/ApplicationWizard.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { ApplicationType } from '@/src/types/applications';
 import { ModalState } from '@/src/types/modal';
@@ -15,6 +15,8 @@ import { QuickAppView } from '@/src/components/Common/ApplicationWizard/QuickApp
 import Modal from '@/src/components/Common/Modal';
 import { Spinner } from '@/src/components/Common/Spinner';
 
+import { UploadStatus } from '@epam/ai-dial-shared';
+
 interface ApplicationWizardProps {
   isOpen: boolean;
   onClose: (value: boolean) => void;
@@ -30,17 +32,24 @@ export const ApplicationWizard: React.FC<ApplicationWizardProps> = ({
   isEdit,
   currentReference,
 }) => {
+  const [submitted, setSubmitted] = useState(false);
+
   const isLoading = useAppSelector(
     ApplicationSelectors.selectIsApplicationLoading,
   );
+  const loadingStatus = useAppSelector(ApplicationSelectors.selectAppLoading);
   const selectedApplication = useAppSelector(
     ApplicationSelectors.selectApplicationDetail,
   );
   const isSharedWithMe = selectedApplication?.sharedWithMe;
 
-  const handleClose = useCallback(() => {
-    onClose(false);
-  }, [onClose]);
+  const handleClose = useCallback(
+    (result?: boolean) => {
+      if (result) setSubmitted(true);
+      else onClose(false);
+    },
+    [onClose],
+  );
 
   const View = useMemo(() => {
     switch (type) {
@@ -54,30 +63,44 @@ export const ApplicationWizard: React.FC<ApplicationWizardProps> = ({
     }
   }, [type]);
 
+  useEffect(() => {
+    if (submitted && loadingStatus === UploadStatus.LOADED) {
+      onClose(true);
+      setSubmitted(false);
+    } else if (submitted && loadingStatus === UploadStatus.FAILED) {
+      setSubmitted(false);
+    }
+  }, [loadingStatus, submitted, onClose]);
+
   return (
     <Modal
       portalId="theme-main"
       state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
       onClose={handleClose}
       dataQa="application-dialog"
-      containerClassName="flex w-full flex-col pt-2 md:grow-0 xl:max-w-[720px] 2xl:max-w-[780px] !bg-layer-2"
+      containerClassName="flex w-full flex-col pt-2 md:grow-0 xl:max-w-[720px] 2xl:max-w-[780px] !bg-layer-2 relative"
       dismissProps={MOUSE_OUTSIDE_PRESS_EVENT}
       hideClose
     >
-      {isLoading ? (
+      {submitted && (
+        <div className="absolute left-0 top-0 z-10 flex size-full items-center justify-center bg-layer-2">
+          <Spinner size={48} dataQa="publication-items-spinner" />
+        </div>
+      )}
+      {isLoading && !submitted ? (
         <div className="flex size-full h-screen items-center justify-center">
           <Spinner size={48} dataQa="publication-items-spinner" />
         </div>
       ) : (
         <div className="relative flex max-h-full w-full grow flex-col divide-tertiary overflow-y-auto">
           <ApplicationWizardHeader
-            onClose={onClose}
+            onClose={handleClose}
             type={type}
             isEdit={isEdit}
           />
           <View
             isOpen={isOpen}
-            onClose={onClose}
+            onClose={handleClose}
             type={type}
             isEdit={isEdit}
             currentReference={currentReference}
diff --git a/apps/chat/src/store/application/application.epics.ts b/apps/chat/src/store/application/application.epics.ts
index 9e9fd249d2..7737b45206 100644
--- a/apps/chat/src/store/application/application.epics.ts
+++ b/apps/chat/src/store/application/application.epics.ts
@@ -60,6 +60,7 @@ const createApplicationEpic: AppEpic = (action$) =>
                       references: [application.reference],
                     }),
                   ),
+                  of(ApplicationActions.createSuccess()),
                 );
               }
 
diff --git a/apps/chat/src/store/application/application.reducers.ts b/apps/chat/src/store/application/application.reducers.ts
index 5456bb200c..066ddab0ab 100644
--- a/apps/chat/src/store/application/application.reducers.ts
+++ b/apps/chat/src/store/application/application.reducers.ts
@@ -35,7 +35,7 @@ export const applicationSlice = createSlice({
       state,
       _action: PayloadAction<Omit<CustomApplicationModel, 'id' | 'reference'>>,
     ) => {
-      state.appLoading = UploadStatus.LOADED;
+      state.appLoading = UploadStatus.LOADING;
     },
     createSuccess: (state) => {
       state.appLoading = UploadStatus.LOADED;
diff --git a/apps/chat/src/store/application/application.selectors.ts b/apps/chat/src/store/application/application.selectors.ts
index 9babe266f4..93d4467304 100644
--- a/apps/chat/src/store/application/application.selectors.ts
+++ b/apps/chat/src/store/application/application.selectors.ts
@@ -7,10 +7,15 @@ import { UploadStatus } from '@epam/ai-dial-shared';
 
 const rootSelector = (state: RootState): ApplicationState => state.application;
 
-export const selectIsApplicationLoading = createSelector(
+export const selectAppLoading = createSelector(
   [rootSelector],
-  (state) => {
-    return state.appLoading === UploadStatus.LOADING;
+  (state) => state.appLoading,
+);
+
+export const selectIsApplicationLoading = createSelector(
+  [selectAppLoading],
+  (status) => {
+    return status === UploadStatus.LOADING;
   },
 );