fix(chat): add posibilty to remove specific app version from my apps …

…list, hide remove button from custom apps owner (Issues #2226, #2220) (#2260)
epam · Oct 2, 2024 · 2cde169 · 2cde169
1 parent c126db8
commit 2cde169
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 22 deletions.
diff --git a/apps/chat/src/components/Marketplace/ApplicationCard.tsx b/apps/chat/src/components/Marketplace/ApplicationCard.tsx
@@ -130,7 +130,10 @@ export const ApplicationCard = ({
       {
         name: t('Remove'),
         dataQa: 'remove',
-        display: selectedTab === MarketplaceTabs.MY_APPLICATIONS && !!onRemove,
+        display:
+          !isMyEntity &&
+          selectedTab === MarketplaceTabs.MY_APPLICATIONS &&
+          !!onRemove,
         Icon: (props: TablerIconsProps) => (
           <IconTrashX {...props} className="stroke-error" />
         ),

diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationDetails.tsx
@@ -33,21 +33,25 @@ interface Props {
   isMobileView: boolean;
   entity: DialAIEntityModel;
   allEntities: DialAIEntityModel[];
-  onlyInstalledVersions: boolean;
+  isMyAppsTab: boolean;
   onClose: () => void;
   onPublish: (entity: DialAIEntityModel, action: PublishActions) => void;
   onEdit: (entity: DialAIEntityModel) => void;
+  onDelete: (entity: DialAIEntityModel) => void;
+  onRemove: (entity: DialAIEntityModel) => void;
   onChangeVersion: (entity: DialAIEntityModel) => void;
 }
 
 const ApplicationDetails = ({
   entity,
   isMobileView,
   allEntities,
-  onlyInstalledVersions,
+  isMyAppsTab,
   onClose,
   onPublish,
   onEdit,
+  onDelete,
+  onRemove,
   onChangeVersion,
 }: Props) => {
   const dispatch = useAppDispatch();
@@ -69,9 +73,9 @@ const ApplicationDetails = ({
     return allEntities.filter(
       (e) =>
         entity.name === e.name &&
-        (!onlyInstalledVersions || installedModelIds.has(e.reference)),
+        (!isMyAppsTab || installedModelIds.has(e.reference)),
     );
-  }, [allEntities, entity.name, installedModelIds, onlyInstalledVersions]);
+  }, [allEntities, entity.name, installedModelIds, isMyAppsTab]);
 
   const handleUseEntity = useCallback(() => {
     const queryParamId = searchParams.get(
@@ -154,7 +158,10 @@ const ApplicationDetails = ({
         onChangeVersion={onChangeVersion}
         entity={entity}
         allVersions={filteredEntities}
+        isMyAppsTab={isMyAppsTab}
         onEdit={onEdit}
+        onDelete={onDelete}
+        onRemove={onRemove}
       />
     </Modal>
   );

diff --git a/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationFooter.tsx b/apps/chat/src/components/Marketplace/ApplicationDetails/ApplicationFooter.tsx
@@ -1,4 +1,9 @@
-import { IconEdit, IconPlayerPlay, IconWorldShare } from '@tabler/icons-react';
+import {
+  IconEdit,
+  IconPlayerPlay,
+  IconTrashX,
+  IconWorldShare,
+} from '@tabler/icons-react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -18,19 +23,25 @@ import { PublishActions } from '@epam/ai-dial-shared';
 interface Props {
   entity: DialAIEntityModel;
   allVersions: DialAIEntityModel[];
+  isMyAppsTab: boolean;
   onChangeVersion: (entity: DialAIEntityModel) => void;
   onUseEntity: () => void;
   onPublish: (entity: DialAIEntityModel, action: PublishActions) => void;
   onEdit: (entity: DialAIEntityModel) => void;
+  onDelete: (entity: DialAIEntityModel) => void;
+  onRemove: (entity: DialAIEntityModel) => void;
 }
 
 export const ApplicationDetailsFooter = ({
   entity,
   allVersions,
+  isMyAppsTab,
   onChangeVersion,
   onPublish,
   onUseEntity,
   onEdit,
+  onDelete,
+  onRemove,
 }: Props) => {
   const { t } = useTranslation(Translation.Marketplace);
 
@@ -47,6 +58,21 @@ export const ApplicationDetailsFooter = ({
             className="shrink-0 text-accent-primary md:hidden [&_path]:fill-current"
             size={24}
           /> */}
+          {isMyAppsTab && (
+            <Tooltip tooltip={isMyApp ? t('Delete') : t('Remove')}>
+              <button
+                onClick={() => (isMyApp ? onDelete(entity) : onRemove(entity))}
+                className="group flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
+                data-qa="application-edit"
+              >
+                <IconTrashX
+                  size={24}
+                  className="shrink-0 group-hover:text-accent-primary"
+                />
+              </button>
+            </Tooltip>
+          )}
+
           {isApplicationId(entity.id) && (
             <Tooltip tooltip={isPublicApp ? t('Unpublish') : t('Publish')}>
               <button

diff --git a/apps/chat/src/components/Marketplace/TabRenderer.tsx b/apps/chat/src/components/Marketplace/TabRenderer.tsx
@@ -4,6 +4,7 @@ import { groupModelsAndSaveOrder } from '@/src/utils/app/conversation';
 import { getFolderIdFromEntityId } from '@/src/utils/app/folders';
 import { isSmallScreen } from '@/src/utils/app/mobile';
 import { doesEntityContainSearchTerm } from '@/src/utils/app/search';
+import { translate } from '@/src/utils/app/translation';
 import { ApiUtils } from '@/src/utils/server/api';
 
 import { ApplicationActionType } from '@/src/types/applications';
@@ -36,18 +37,37 @@ enum DeleteType {
   REMOVE,
 }
 
-const deleteConfirmationText = {
-  [DeleteType.DELETE]: {
-    heading: 'Confirm deleting application',
-    description: 'Are you sure you want to delete the application?',
-    confirmLabel: 'Delete',
-  },
-  [DeleteType.REMOVE]: {
-    heading: 'Confirm removing application',
-    description:
-      'Are you sure you want to remove the application from your list?',
-    confirmLabel: 'Remove',
-  },
+const getDeleteConfirmationText = (
+  action: DeleteType,
+  entity: DialAIEntityModel,
+) => {
+  const translationVariables = {
+    modelName: entity.name,
+    modelVersion: entity.version
+      ? translate(' (version {{version}})', { version: entity.version })
+      : '',
+  };
+
+  const deleteConfirmationText = {
+    [DeleteType.DELETE]: {
+      heading: translate('Confirm deleting application'),
+      description: translate(
+        'Are you sure you want to delete the {{modelName}}{{modelVersion}}?',
+        translationVariables,
+      ),
+      confirmLabel: translate('Delete'),
+    },
+    [DeleteType.REMOVE]: {
+      heading: translate('Confirm removing application'),
+      description: translate(
+        'Are you sure you want to remove the {{modelName}}{{modelVersion}} from your list?',
+        translationVariables,
+      ),
+      confirmLabel: translate('Remove'),
+    },
+  };
+
+  return deleteConfirmationText[action];
 };
 
 interface TabRendererProps {
@@ -236,7 +256,7 @@ export const TabRenderer = ({ isMobile }: TabRendererProps) => {
       {!!deleteModel && (
         <ConfirmDialog
           isOpen={!!deleteModel}
-          {...deleteConfirmationText[deleteModel.action]}
+          {...getDeleteConfirmationText(deleteModel.action, deleteModel.entity)}
           onClose={handleDeleteClose}
           cancelLabel="Cancel"
         />
@@ -248,11 +268,11 @@ export const TabRenderer = ({ isMobile }: TabRendererProps) => {
           entity={detailsModel}
           onChangeVersion={handleSetDetailsReference}
           onClose={handleCloseDetailsDialog}
+          onDelete={handleDelete}
+          onRemove={handleRemove}
           onEdit={handleEditApplication}
           allEntities={allModels}
-          onlyInstalledVersions={
-            selectedTab === MarketplaceTabs.MY_APPLICATIONS
-          }
+          isMyAppsTab={selectedTab === MarketplaceTabs.MY_APPLICATIONS}
         />
       )}
       {!!(publishModel && publishModel?.entity?.id) && (