fix(chat): rework apps and toolsets editor exit flow (Issue #4901, #4913)

apps/chat-e2e/src/tests/customApplications.test.ts

@@ -553,6 +553,7 @@ dialTest(
 
     await dialTest.step('Close the application edit mode', async () => {
       await appEditorHeader.saveAndExitButton.click();
+      await agentDetailsModal.closeButton.click();
     });
 
     await dialTest.step(
@@ -1756,6 +1757,7 @@ dialTest(
     await dialTest.step(
       'Verify the updated icon is displayed on the app card in My workspace',
       async () => {
+        await agentDetailsModal.closeButton.click();
         agentElement =
           await marketplaceAgentsSection.findAgentElement(appEntity);
         const cardIconElement = agentElement.getElementIcon(

apps/chat/src/components/AppsEditor/AppsEditor.tsx

@@ -101,7 +101,9 @@ export const AppsEditor = () => {
   const isSchemaApplicationType = !isApplicationType(type);
 
   const changeEditorTabRef = useRef<MarketplaceEditorSteps | null>(null);
-  const saveAndExitRef = useRef<Routes.Chat | Routes.Marketplace | null>(null);
+  const saveAndExitRef = useRef(false);
+  const redirectToChatRef = useRef(false);
+
   const isAppPublic = !!appDetails && isEntityIdPublic(appDetails);
 
   const modelsWithFolder = useMemo(
@@ -198,14 +200,16 @@ export const AppsEditor = () => {
               ? decodeURIComponent(publicationUrl.toString())
               : undefined,
             tabToOpen: changeEditorTabRef.current ?? undefined,
-            redirectUrl: saveAndExitRef.current ?? undefined,
+            redirectUrl: redirectToChatRef.current ? Routes.Chat : undefined,
+            isSaveAndExit: saveAndExitRef.current,
             shouldSelectApplication: isCreateRef.current,
           }),
         );
       }
 
       changeEditorTabRef.current = null;
-      saveAndExitRef.current = null;
+      saveAndExitRef.current = false;
+      redirectToChatRef.current = false;
       formMethods.reset(formMethods.getValues(), {
         keepIsValid: true,
         keepErrors: true,
@@ -254,7 +258,7 @@ export const AppsEditor = () => {
           .then(() => cb?.());
       } else {
         changeEditorTabRef.current = null;
-        saveAndExitRef.current = null;
+        saveAndExitRef.current = false;
         cb?.();
       }
     },
@@ -263,23 +267,21 @@ export const AppsEditor = () => {
 
   const handleSaveAndExit = useCallback(
     (saveDraft = false, redirectToChat = false) => {
-      const chatUrl =
-        (redirectToChat || !!router.query.publicationUrl) && Routes.Chat;
-
       if ((!isDirty && appDetails) || !appDetails || isAppPublic) {
         dispatch(
           ApplicationActions.exitEditor({
-            redirectUrl: chatUrl || Routes.Marketplace,
+            redirectUrl: redirectToChat ? Routes.Chat : undefined,
             shouldSelectApplication: isCreateRef.current,
           }),
         );
         return;
       }
 
-      saveAndExitRef.current = chatUrl || Routes.Marketplace;
-      handleSubmit(undefined, saveDraft);
+      saveAndExitRef.current = true;
+      redirectToChatRef.current = redirectToChat;
+      void handleSubmit(undefined, saveDraft);
     },
-    [router, isDirty, appDetails, isAppPublic, handleSubmit, dispatch],
+    [isDirty, appDetails, isAppPublic, handleSubmit, dispatch],
   );
 
   const handleTabClick = useCallback(
@@ -290,13 +292,13 @@ export const AppsEditor = () => {
         return;
       }
       if (!isDirty && appDetails) {
-        handleSubmit(
+        void handleSubmit(
           () => dispatch(ApplicationActions.setEditorStep(tab)),
           true,
         );
       } else {
         changeEditorTabRef.current = tab;
-        handleSubmit(undefined, true);
+        void handleSubmit(undefined, true);
       }
     },
     [appDetails, dispatch, editorStep, handleSubmit, isAppPublic, isDirty],
@@ -310,20 +312,20 @@ export const AppsEditor = () => {
       return;
     }
     if (!isDirty && appDetails) {
-      handleSubmit(() =>
+      void handleSubmit(() =>
         dispatch(
           ApplicationActions.setEditorStep(MarketplaceEditorSteps.Settings),
         ),
       );
     } else {
       changeEditorTabRef.current = MarketplaceEditorSteps.Settings;
-      handleSubmit(undefined, !!appDetails);
+      void handleSubmit(undefined, !!appDetails);
     }
   }, [isAppPublic, isDirty, appDetails, dispatch, handleSubmit]);
 
   const handleAutoSave = useCallback(() => {
     if (editorStep === MarketplaceEditorSteps.General || isAppPublic) return;
-    handleSubmit(undefined, true, true);
+    void handleSubmit(undefined, true, true);
   }, [editorStep, handleSubmit, isAppPublic]);
 
   return (

apps/chat/src/components/AppsEditor/AppsEditorHeader.tsx

@@ -24,9 +24,7 @@ import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
 import {
   ApplicationSelectors,
   ApplicationTypesSchemasSelectors,
-  ConversationsSelectors,
   ModelsSelectors,
-  SettingsSelectors,
 } from '@/src/store/selectors';
 
 import { AppsEditorQuery } from '@/src/constants/applications';
@@ -36,7 +34,6 @@ import { AppsEditorFormType } from '@/src/components/AppsEditor/form';
 import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog';
 import { EditorHeader } from '@/src/components/Header/EditorHeader';
 
-import { Feature } from '@epam/ai-dial-shared';
 import { capitalize } from 'lodash';
 import omit from 'lodash-es/omit';
 
@@ -91,15 +88,6 @@ export const AppsEditorHeader = ({
   const schema = useAppSelector(
     ApplicationTypesSchemasSelectors.selectDetailedApplicationTypeSchema,
   );
-  const areConversationsLoaded = useAppSelector(
-    ConversationsSelectors.areConversationsUploaded,
-  );
-  const enabledFeatures = useAppSelector(
-    SettingsSelectors.selectEnabledFeatures,
-  );
-  const isNewConversationDisabled = enabledFeatures.has(
-    Feature.HideNewConversation,
-  );
 
   const isEditing = !!appDetails;
 
@@ -162,16 +150,6 @@ export const AppsEditorHeader = ({
     [onTabClick],
   );
 
-  const createNewConversation = useCallback(() => {
-    if (!areConversationsLoaded || isNewConversationDisabled) return;
-    dispatch(
-      ConversationsActions.createNewConversations({
-        names: [DEFAULT_CONVERSATION_NAME],
-      }),
-    );
-    dispatch(ConversationsActions.resetSearch());
-  }, [areConversationsLoaded, dispatch, isNewConversationDisabled]);
-
   const handleLogoClick = useCallback(
     async (e: MouseEvent<HTMLAnchorElement>) => {
       e.preventDefault();
@@ -184,10 +162,9 @@ export const AppsEditorHeader = ({
           return;
         }
       }
-      createNewConversation();
       onSave(false, true);
     },
-    [createNewConversation, isEditing, trigger, onSave],
+    [isEditing, trigger, onSave],
   );
 
   const handleSaveAndRedirect = useCallback(async () => {
@@ -206,7 +183,6 @@ export const AppsEditorHeader = ({
     (result: boolean) => {
       setSaveDraftDialog(false);
       if (result && redirectToChat) {
-        createNewConversation();
         onSave(true, true);
         return;
       } else if (result) {
@@ -220,7 +196,7 @@ export const AppsEditorHeader = ({
         dispatch(ApplicationActions.setEditorStep(invalidStep));
       }
     },
-    [createNewConversation, dispatch, errorSteps, onSave, redirectToChat],
+    [dispatch, errorSteps, onSave, redirectToChat],
   );
 
   const handleCustomViewerExit = useCallback(() => {

apps/chat/src/components/Common/CodeEditor.tsx

@@ -538,7 +538,7 @@ export const CodeEditor = ({ sourcesFolderId, readOnly }: Props) => {
   }
 
   return (
-    <div className="z-10 w-full max-w-full">
+    <div className="z-20 w-full max-w-full">
       <div
         className={classNames(
           'grid min-h-[400px] w-full max-w-full grid-rows-[100%]',

apps/chat/src/components/Header/EditorHeader.tsx

@@ -79,7 +79,7 @@ export const EditorHeader = <T extends string>({
   return (
     <div
       className={classNames(
-        'z-40 flex w-full border-b border-secondary bg-layer-1',
+        'z-10 flex w-full border-b border-secondary bg-layer-1',
         isOverlay ? 'min-h-[36px]' : 'min-h-[48px]',
       )}
       data-qa={dataQa}

apps/chat/src/components/Marketplace/AddToolsButton.tsx

@@ -12,6 +12,7 @@ import { ToolsetActions } from '@/src/store/actions';
 import { useAppDispatch } from '@/src/store/hooks';
 
 import { Routes } from '@/src/constants/routes';
+import { ToolsetEditorQuery } from '@/src/constants/toolsets';
 
 import { AddMarketplaceEntityButton } from './AddMarketplaceEntityButton';
 
@@ -34,7 +35,13 @@ export function AddToolsButton() {
             e.stopPropagation();
             dispatch(ToolsetActions.setEditorStep(ToolsetEditorSteps.General));
             dispatch(ToolsetActions.clearToolsetDetails());
-            void router.push(Routes.ToolsetEditor);
+            void router.push({
+              pathname: Routes.ToolsetEditor,
+              query: {
+                [ToolsetEditorQuery.ReturnUrl]:
+                  window.location.pathname + window.location.search,
+              },
+            });
           },
         },
       ].sort((a, b) => (a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1)),

apps/chat/src/components/ToolsetEditor/ToolsetEditor.tsx

@@ -9,15 +9,9 @@ import { getToolsetPayload } from '@/src/utils/app/toolsets';
 import { ToolsetEditorSteps } from '@/src/types/toolsets';
 
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { MarketplaceActions } from '@/src/store/marketplace/marketplace.reducers';
 import { ToolsetActions } from '@/src/store/toolset/toolset.reducer';
 import { ToolsetSelectors } from '@/src/store/toolset/toolset.selectors';
 
-import {
-  MarketplaceEntitiesTabs,
-  MarketplaceQueryParams,
-  MarketplaceTabs,
-} from '@/src/constants/marketplace';
 import { Routes } from '@/src/constants/routes';
 import { ToolsetEditorQuery } from '@/src/constants/toolsets';
 
@@ -31,14 +25,6 @@ import {
 
 import { zodResolver } from '@hookform/resolvers/zod';
 
-const marketplaceRoute = {
-  pathname: Routes.Marketplace,
-  query: {
-    [MarketplaceQueryParams.tab]: MarketplaceTabs.MY_WORKSPACE,
-    [MarketplaceQueryParams.entitiesTab]: MarketplaceEntitiesTabs.TOOLSETS,
-  },
-};
-
 export const ToolsetEditor = () => {
   const dispatch = useAppDispatch();
 
@@ -52,7 +38,8 @@ export const ToolsetEditor = () => {
   const editorStep = useAppSelector(ToolsetSelectors.selectEditorStep);
 
   const changeEditorTabRef = useRef<ToolsetEditorSteps | null>(null);
-  const saveAndExitRef = useRef<Routes.Chat | Routes.Marketplace | null>(null);
+  const saveAndExitRef = useRef(false);
+  const redirectToChatRef = useRef(false);
 
   const formMethods = useForm<ToolsetEditorForm>({
     defaultValues: getDefaultFormData(toolsetDetails, toolsets),
@@ -96,7 +83,8 @@ export const ToolsetEditor = () => {
             oldToolset: toolsetDetails,
             newToolset: payloadToolset,
             tabToOpen: changeEditorTabRef.current ?? undefined,
-            redirectUrl: saveAndExitRef.current ?? undefined,
+            redirectUrl: redirectToChatRef.current ? Routes.Chat : undefined,
+            exitAfterSave: saveAndExitRef.current,
             shouldSelectToolset: isCreateRef.current,
           }),
         );
@@ -109,7 +97,8 @@ export const ToolsetEditor = () => {
       }
 
       changeEditorTabRef.current = null;
-      saveAndExitRef.current = null;
+      saveAndExitRef.current = false;
+      redirectToChatRef.current = false;
       formMethods.reset(formMethods.getValues(), {
         keepIsValid: true,
         keepErrors: true,
@@ -141,7 +130,7 @@ export const ToolsetEditor = () => {
             .then(() => cb?.());
         } else {
           changeEditorTabRef.current = null;
-          saveAndExitRef.current = null;
+          saveAndExitRef.current = false;
           cb?.();
         }
       });
@@ -151,29 +140,21 @@ export const ToolsetEditor = () => {
 
   const handleSaveAndExit = useCallback(
     (saveDraft = false, redirectToChat = false) => {
-      const chatUrl =
-        (redirectToChat || !!router.query.publicationUrl) && Routes.Chat;
-
       if ((!isDirty && toolsetDetails) || !toolsetDetails) {
-        void router.push(chatUrl || marketplaceRoute);
         dispatch(
-          MarketplaceActions.setDetailsEntity(
-            isCreateRef.current && toolsetDetails?.reference
-              ? {
-                  reference: toolsetDetails?.reference,
-                  type: MarketplaceEntitiesTabs.TOOLSETS,
-                  isSuggested: false,
-                }
-              : undefined,
-          ),
+          ToolsetActions.exitEditor({
+            redirectUrl: redirectToChat ? Routes.Chat : undefined,
+            shouldSelectToolset: isCreateRef.current,
+          }),
         );
         return;
       }
 
-      saveAndExitRef.current = chatUrl || Routes.Marketplace;
+      saveAndExitRef.current = true;
+      redirectToChatRef.current = redirectToChat;
       handleSubmit(undefined, saveDraft);
     },
-    [dispatch, handleSubmit, isDirty, router, toolsetDetails],
+    [dispatch, handleSubmit, isDirty, toolsetDetails],
   );
 
   const handleTabClick = useCallback(