Merge branch 'development' into feat/publish-file-tests

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}

apps/chat/src/store/application/application.epics.ts

@@ -60,6 +60,7 @@ const createApplicationEpic: AppEpic = (action$) =>
                       references: [application.reference],
                     }),
                   ),
+                  of(ApplicationActions.createSuccess()),
                 );
               }
 

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;

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;
   },
 );