feat(Eliminar namespace): Eliminar namespace (#85)

Author: carlosthe19916

src/main/java/io/github/project/openubl/ublhub/models/jpa/entities/NamespaceEntity.java

@@ -60,6 +60,10 @@ public class NamespaceEntity extends PanacheEntityBase {
     @OneToMany(fetch = FetchType.LAZY, mappedBy = "namespace", orphanRemoval = true)
     public List<CompanyEntity> companies = new ArrayList<>();
 
+    @OnDelete(action = OnDeleteAction.CASCADE)
+    @OneToMany(fetch = FetchType.LAZY, mappedBy = "namespace", orphanRemoval = true)
+    public List<ComponentEntity> components = new ArrayList<>();
+
     @Version
     @Column(name = "version")
     public int version;

src/main/webapp/package.json

@@ -6,7 +6,7 @@
     "@konveyor/lib-ui": "^5.2.0",
     "@patternfly/react-core": "^4.168.8",
     "@patternfly/react-table": "^4.44.4",
-    "@project-openubl/lib-ui": "1.6.0",
+    "@project-openubl/lib-ui": "1.7.0",
     "@redhat-cloud-services/frontend-components-notifications": "^3.2.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",

src/main/webapp/src/App.tsx

@@ -9,16 +9,17 @@ import { DefaultLayout } from "./shared/components";
 import NotificationsPortal from "@redhat-cloud-services/frontend-components-notifications/NotificationPortal";
 import "@redhat-cloud-services/frontend-components-notifications/index.css";
 
-import DeleteDialog from "./shared/containers/delete-dialog";
+import { ConfirmationContextProvider } from "@project-openubl/lib-ui";
 
 const App: React.FC = () => {
   return (
     <HashRouter>
-      <DefaultLayout>
-        <AppRoutes />
-      </DefaultLayout>
-      <NotificationsPortal />
-      <DeleteDialog />
+      <ConfirmationContextProvider>
+        <DefaultLayout>
+          <AppRoutes />
+        </DefaultLayout>
+        <NotificationsPortal />
+      </ConfirmationContextProvider>
     </HashRouter>
   );
 };

src/main/webapp/src/pages/namespaces/namespaces-list/namespaces-list.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import {
   useTableControls,
   SimpleTableWithToolbar,
   useTable,
   useModal,
+  useConfirmationContext,
 } from "@project-openubl/lib-ui";
 
 import {
@@ -24,7 +25,13 @@ import {
   sortable,
 } from "@patternfly/react-table";
 
-import { useNamespacesQuery } from "queries/namespaces";
+import { useDispatch } from "react-redux";
+import { alertActions } from "store/alert";
+
+import {
+  useNamespacesQuery,
+  useDeleteNamespaceMutation,
+} from "queries/namespaces";
 
 import {
   SearchInput,
@@ -33,6 +40,7 @@ import {
 } from "shared/components";
 
 import { Namespace } from "api/models";
+import { getAxiosErrorMessage } from "utils/modelUtils";
 
 const ROW_FIELD = "row_field";
 const getRow = (rowData: IRowData): Namespace => {
@@ -73,6 +81,10 @@ export const filterByText = (filterText: string, item: Namespace) => {
 };
 
 export const NamespacesList: React.FC = () => {
+  const dispatch = useDispatch();
+  const confirmationModal = useConfirmationContext();
+
+  //
   const namespaceModal = useModal<Namespace>();
 
   //
@@ -86,10 +98,7 @@ export const NamespacesList: React.FC = () => {
 
   //
   const namespaces = useNamespacesQuery();
-
-  useEffect(() => {
-    console.log(namespaces);
-  }, [namespaces]);
+  const deleteNamespace = useDeleteNamespaceMutation();
 
   const { pageItems, filteredItems } = useTable<Namespace>({
     items: namespaces.data || [],
@@ -117,7 +126,37 @@ export const NamespacesList: React.FC = () => {
         extraData: IExtraData
       ) => {
         const row: Namespace = getRow(rowData);
-        console.log("Write code to delete the row", row);
+
+        confirmationModal.open({
+          title: `Eliminar ${row.name}`,
+          titleIconVariant: "warning",
+          message: (
+            <span>
+              ¿Estas seguro de querer eliminar este namespace? Esta acción
+              eliminará el namespace <b>{row.name}</b> permanentemente.`
+            </span>
+          ),
+          confirmBtnVariant: ButtonVariant.danger,
+          confirmBtnLabel: "Eliminar",
+          cancelBtnLabel: "Cancelar",
+          onConfirm: () => {
+            confirmationModal.enableProcessing();
+            deleteNamespace
+              .mutateAsync(row)
+              .catch((error) => {
+                dispatch(
+                  alertActions.addAlert(
+                    "danger",
+                    "Error",
+                    getAxiosErrorMessage(error)
+                  )
+                );
+              })
+              .finally(() => {
+                confirmationModal.close();
+              });
+          },
+        });
       },
     },
   ];
@@ -167,7 +206,7 @@ export const NamespacesList: React.FC = () => {
                   variant={ButtonVariant.primary}
                   onClick={() => namespaceModal.open("add")}
                 >
-                  Nuevo Namespace
+                  Crear nuevo
                 </Button>
               </ToolbarItem>
             </ToolbarGroup>

src/main/webapp/src/queries/namespaces.ts

@@ -57,6 +57,24 @@ export const useCreateNamespaceMutation = (
   );
 };
 
+export const useDeleteNamespaceMutation = (
+  onSuccess?: () => void
+): UseMutationResult<void, ApiClientError, Namespace, unknown> => {
+  const client = useUblhubClient();
+  const queryClient = useQueryClient();
+  return useMutation<void, ApiClientError, Namespace>(
+    async (ns: Namespace) => {
+      await client.delete<void>(resource, `${ns.id}`);
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries("namespaces");
+        onSuccess && onSuccess();
+      },
+    }
+  );
+};
+
 export const getNamespaceNameSchema = (
   namespacesQuery: UseQueryResult<Namespace[]>,
   namespaceBeingPrefilled: Namespace | null