fix(chat): fix custom apps edit (Issue #2665) (#2673)

epam · Nov 27, 2024 · bcbcb6f · bcbcb6f
1 parent 55ec50e
commit bcbcb6f
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 27 deletions.
diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx
@@ -32,7 +32,7 @@ interface Props {
   onBookmarkClick: (entity: DialAIEntityModel) => void;
 }
 
-const ApplicationDetails = ({
+export const ApplicationDetails = ({
   entity,
   isMobileView,
   allEntities,
@@ -96,5 +96,3 @@ const ApplicationDetails = ({
     </Modal>
   );
 };
-
-export default ApplicationDetails;
diff --git a/apps/chat/src/components/Marketplace/TabRenderer.tsx b/apps/chat/src/components/Marketplace/TabRenderer.tsx
@@ -21,7 +21,10 @@ import { Translation } from '@/src/types/translation';
 
 import { ApplicationActions } from '@/src/store/application/application.reducers';
 import { useAppDispatch, useAppSelector } from '@/src/store/hooks';
-import { MarketplaceSelectors } from '@/src/store/marketplace/marketplace.reducers';
+import {
+  MarketplaceActions,
+  MarketplaceSelectors,
+} from '@/src/store/marketplace/marketplace.reducers';
 import {
   ModelsActions,
   ModelsSelectors,
@@ -36,7 +39,7 @@ import {
 import { PublishModal } from '@/src/components/Chat/Publish/PublishWizard';
 import { ApplicationWizard } from '@/src/components/Common/ApplicationWizard/ApplicationWizard';
 import { ConfirmDialog } from '@/src/components/Common/ConfirmDialog';
-import ApplicationDetails from '@/src/components/Marketplace/ApplicationDetails/ApplicationDetails';
+import { ApplicationDetails } from '@/src/components/Marketplace/ApplicationDetails/ApplicationDetails';
 import { CardsList } from '@/src/components/Marketplace/CardsList';
 import { MarketplaceBanner } from '@/src/components/Marketplace/MarketplaceBanner';
 import { SearchHeader } from '@/src/components/Marketplace/SearchHeader';
@@ -223,6 +226,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
     MarketplaceSelectors.selectTrimmedSearchTerm,
   );
   const allModels = useAppSelector(ModelsSelectors.selectModels);
+  const detailsModel = useAppSelector(MarketplaceSelectors.selectDetailsModel);
+  const modelsMap = useAppSelector(ModelsSelectors.selectModelsMap);
 
   const [suggestedResults, setSuggestedResults] = useState<DialAIEntityModel[]>(
     [],
@@ -240,10 +245,6 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
     entity: ShareEntity & { iconUrl?: string };
     action: PublishActions;
   }>();
-  const [detailsModel, setDetailsModel] = useState<{
-    entity: DialAIEntityModel;
-    isSuggested?: boolean;
-  }>();
 
   const isSomeFilterNotEmpty =
     searchTerm.length ||
@@ -343,7 +344,7 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
           dispatch(ApplicationActions.delete(deleteModel.entity));
         }
 
-        setDetailsModel(undefined);
+        dispatch(MarketplaceActions.setDetailsModel(undefined));
       }
 
       setDeleteModel(undefined);
@@ -375,22 +376,29 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
   );
 
   const handleSetDetailsModel = useCallback(
-    (entity: DialAIEntityModel, isSuggested?: boolean) => {
-      setDetailsModel({
-        entity,
-        isSuggested: !!isSuggested,
-      });
+    (model: DialAIEntityModel, isSuggested?: boolean) => {
+      dispatch(
+        MarketplaceActions.setDetailsModel({
+          reference: model.reference,
+          isSuggested: !!isSuggested,
+        }),
+      );
     },
-    [setDetailsModel],
+    [dispatch],
   );
 
   const handleSetVersion = useCallback(
-    (entity: DialAIEntityModel) => {
+    (model: DialAIEntityModel) => {
       if (detailsModel) {
-        setDetailsModel({ ...detailsModel, entity });
+        dispatch(
+          MarketplaceActions.setDetailsModel({
+            ...detailsModel,
+            reference: model.reference,
+          }),
+        );
       }
     },
-    [setDetailsModel, detailsModel],
+    [detailsModel, dispatch],
   );
 
   const handleCloseApplicationDialog = useCallback(
@@ -399,8 +407,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
   );
 
   const handleCloseDetailsDialog = useCallback(
-    () => setDetailsModel(undefined),
-    [setDetailsModel],
+    () => dispatch(MarketplaceActions.setDetailsModel(undefined)),
+    [dispatch],
   );
 
   const handleBookmarkClick = useCallback(
@@ -419,6 +427,8 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
     [dispatch, installedModelIds],
   );
 
+  const currentDetailsModel = detailsModel && modelsMap[detailsModel.reference];
+
   return (
     <>
       <header className="mb-5 md:mb-4 xl:mb-6" data-qa="marketplace-header">
@@ -460,11 +470,11 @@ export const TabRenderer = ({ screenState }: TabRendererProps) => {
           cancelLabel={t('Cancel')}
         />
       )}
-      {detailsModel && (
+      {currentDetailsModel && (
         <ApplicationDetails
           onPublish={handleSetPublishEntity}
           isMobileView={screenState === ScreenState.MOBILE}
-          entity={detailsModel.entity}
+          entity={currentDetailsModel}
           onChangeVersion={handleSetVersion}
           onClose={handleCloseDetailsDialog}
           onDelete={handleDelete}

diff --git a/apps/chat/src/store/application/application.epics.ts b/apps/chat/src/store/application/application.epics.ts
@@ -122,9 +122,9 @@ const updateApplicationEpic: AppEpic = (action$) =>
             overwrite: false,
           })
           .pipe(
-            switchMap(() =>
-              of(ApplicationActions.edit(updatedCustomApplication)),
-            ),
+            switchMap(() => {
+              return of(ApplicationActions.edit(updatedCustomApplication));
+            }),
             catchError((err) => {
               console.error('Failed to update application:', err);
               return of(

diff --git a/apps/chat/src/store/marketplace/marketplace.reducers.ts b/apps/chat/src/store/marketplace/marketplace.reducers.ts
@@ -18,8 +18,8 @@ export interface MarketplaceState {
   };
   searchTerm: string;
   selectedTab: MarketplaceTabs;
-
   applyModelStatus: UploadStatus;
+  detailsModel: { reference: string; isSuggested: boolean } | undefined;
 }
 
 const DEFAULT_FILTERS = {
@@ -34,6 +34,7 @@ const initialState: MarketplaceState = {
   searchTerm: '',
   selectedTab: MarketplaceTabs.HOME,
   applyModelStatus: UploadStatus.UNINITIALIZED,
+  detailsModel: undefined,
 };
 
 export const marketplaceSlice = createSlice({
@@ -62,6 +63,14 @@ export const marketplaceSlice = createSlice({
     setApplyModelStatus: (state, { payload }: PayloadAction<UploadStatus>) => {
       state.applyModelStatus = payload;
     },
+    setDetailsModel: (
+      state,
+      {
+        payload,
+      }: PayloadAction<{ reference: string; isSuggested: boolean } | undefined>,
+    ) => {
+      state.detailsModel = payload;
+    },
   },
 });
 

diff --git a/apps/chat/src/store/marketplace/marketplace.selectors.ts b/apps/chat/src/store/marketplace/marketplace.selectors.ts
@@ -38,3 +38,8 @@ export const selectIsApplyingModel = createSelector(
     applyModelStatus !== UploadStatus.UNINITIALIZED &&
     applyModelStatus !== UploadStatus.FAILED,
 );
+
+export const selectDetailsModel = createSelector(
+  [rootSelector],
+  (state) => state.detailsModel,
+);