feat(deployments): reuse delete modal (Issue #1519) (#2151)

Author: dearsimanovich-epam

apps/ai-dial-admin/src/app/[lang]/deployment-images/[id]/page.tsx

@@ -1,9 +1,8 @@
 import { notFound } from 'next/navigation';
 
-import { getImage, getImageContainers, getImageVersions } from '@/src/app/actions/deployments';
+import { getImage, getImageVersions } from '@/src/app/actions/deployments';
 import ImageView from '@/src/components/Images/View/ImageView';
 import { SaveValidationContextProvider } from '@/src/context/SaveValidationContext';
-import { Container } from '@/src/models/deployments/containers';
 import { Image, ImageVersion } from '@/src/models/deployments/images';
 import { errorObjLog } from '@/src/server/logger';
 import { getRouteByType } from '@/src/utils/deployments/entity';
@@ -19,7 +18,6 @@ interface Params {
 export default async function Page(params: Params) {
   let image: Image | null = null;
   let versions: ImageVersion[] | null = null;
-  let dependencies: Container[] | null = null;
 
   try {
     const imageResponse = await getImage((await params.params).id);
@@ -28,11 +26,9 @@ export default async function Page(params: Params) {
       imageResponse.response.name,
       getImageType(getRouteByType(imageResponse.response.$type)),
     );
-    const dependenciesResponses = await getImageContainers((await params.params).id);
 
     image = imageResponse.response as Image;
     versions = versionsResponse.response as ImageVersion[];
-    dependencies = dependenciesResponses.response as Container[];
   } catch (e) {
     errorObjLog(e, 'Failed to fetch interceptor image page');
   }
@@ -43,7 +39,7 @@ export default async function Page(params: Params) {
 
   return (
     <SaveValidationContextProvider>
-      <ImageView image={image} versions={versions || []} dependencies={dependencies || []} />
+      <ImageView image={image} versions={versions || []} />
     </SaveValidationContextProvider>
   );
 }

apps/ai-dial-admin/src/components/Containers/List/ContainersList.tsx

@@ -28,7 +28,7 @@ import { IMAGE_BUILD_POLL_INTERVAL } from '@/src/constants/deployments/images';
 import ListView from '@/src/components/ListView/ListView';
 import HeaderButtons from '@/src/components/Containers/List/HeaderButtons';
 import ContainerDuplicate from '@/src/components/Deployments/Modals/ContainerDuplicate';
-import EntityDeleteModal from '@/src/components/Deployments/Modals/EntityDelete';
+
 import {
   getDeleteOperation,
   getDuplicateOperation,
@@ -38,6 +38,7 @@ import {
 } from '@/src/constants/grid-columns/actions';
 import { getUrnForEntity, onOpenInNewTab } from '@/src/utils/open-in-new-tab';
 import { CONTAINERS_COLUMNS } from '@/src/constants/grid-columns/grid-columns';
+import Delete from '@/src/components/EntityView/Modals/Delete/Delete';
 
 interface Props {
   route: ApplicationRoute;
@@ -165,12 +166,6 @@ const ContainersList: FC<Props> = ({ route, containersList }) => {
     [currentContainer, route, router, showNotification],
   );
 
-  const onDelete = useCallback(() => {
-    if (currentContainer?.name) {
-      deleteContainer(currentContainer.name).then(refreshCb(router, showNotification));
-    }
-  }, [currentContainer, router, showNotification]);
-
   const columnDefs = [
     ...CONTAINERS_COLUMNS(t, getTranslatedType(route, t), route),
     ACTION_COLUMN([
@@ -306,18 +301,11 @@ const ContainersList: FC<Props> = ({ route, containersList }) => {
         modalType === ModalType.delete &&
         currentContainer &&
         createPortal(
-          <EntityDeleteModal
-            title={t(ContainersI18nKey.DeleteModalTitle, {
-              type: getTranslatedType(route, t),
-              entityType: getTranslatedDeploymentType(route, t),
-            })}
-            description={t(ContainersI18nKey.DeleteModalDescription, {
-              entityType: getTranslatedDeploymentType(route, t),
-            })}
-            isModalOpen={isModalOpen}
-            onClose={onCloseModal}
-            onApply={onDelete}
-            route={route}
+          <Delete
+            onRemoveEntity={deleteContainer}
+            view={route}
+            entity={{ ...currentContainer }}
+            onCloseModal={onCloseModal}
           />,
           document.body,
         )}