[FIX] Deleting an object from the details view keeps you on your current branch instead of redirecting to the main branch (#5948)

Author: bilalabbad

changelog/5232.fixed.md

@@ -0,0 +1 @@
+FIX: deleting an object from the details view keeps you on your current branch instead of redirecting to the main branch.

frontend/app/src/entities/nodes/object-item-details/action-buttons/details-buttons.tsx

@@ -2,6 +2,8 @@ import { ARTIFACT_DEFINITION_OBJECT, GENERIC_REPOSITORY_KIND } from "@/config/co
 import { Generate } from "@/entities/artifacts/ui/generate";
 import { GroupsManagerTriggerButton } from "@/entities/groups/ui/groups-manager-trigger-button";
 import ObjectItemEditComponent from "@/entities/nodes/object-item-edit/object-item-edit-paginated";
+import { getObjectDetailsUrl2 } from "@/entities/nodes/utils";
+import { Permission } from "@/entities/permission/types";
 import RepositoryActionMenu from "@/entities/repository/ui/repository-action-menu";
 import { ModelSchema } from "@/entities/schema/types";
 import { isGenericSchema } from "@/entities/schema/utils/is-generic-schema";
@@ -11,20 +13,17 @@ import SlideOver, { SlideOverTitle } from "@/shared/components/display/slide-ove
 import ModalDeleteObject from "@/shared/components/modals/modal-delete-object";
 import { Icon } from "@iconify-icon/react";
 import { useState } from "react";
-import { useLocation, useNavigate, useParams } from "react-router";
+import { useNavigate } from "react-router";
 
 type DetailsButtonsProps = {
   schema: ModelSchema;
   objectDetailsData: any;
+  permission: Permission;
 };
 
 export function DetailsButtons({ schema, objectDetailsData, permission }: DetailsButtonsProps) {
-  const location = useLocation();
-  const { objectid } = useParams();
   const navigate = useNavigate();
 
-  const redirect = location.pathname.replace(objectid ?? "", "");
-
   const [showEditModal, setShowEditModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
 
@@ -94,7 +93,7 @@ export function DetailsButtons({ schema, objectDetailsData, permission }: Detail
         rowToDelete={objectDetailsData}
         open={!!showDeleteModal}
         close={() => setShowDeleteModal(false)}
-        onDelete={() => navigate(redirect)}
+        onDelete={() => navigate(getObjectDetailsUrl2(schema.kind as string))}
       />
     </>
   );

frontend/app/tests/e2e/objects/object-details-delete.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "@playwright/test";
+import { ACCOUNT_STATE_PATH } from "../../constants";
+import { createBranchAPI, deleteBranchAPI } from "../utils/graphql";
+const BRANCH_NAME = "object-details-delete";
+
+test.describe("Object details - delete", () => {
+  test.use({ storageState: ACCOUNT_STATE_PATH.ADMIN });
+
+  test.beforeAll(async ({ request }) => {
+    await createBranchAPI(request, BRANCH_NAME);
+  });
+
+  test.afterAll(async ({ request }) => {
+    await deleteBranchAPI(request, BRANCH_NAME);
+  });
+
+  test("delete an object and redirects to list view", async ({ page }) => {
+    await page.goto(`/objects/BuiltinTag?branch=${BRANCH_NAME}`);
+    await expect(page.getByTestId("branch-selector-trigger")).toContainText(
+      "object-details-delete"
+    );
+
+    await test.step("go to blue tag details", async () => {
+      await page.getByRole("link", { name: "blue" }).click();
+    });
+
+    await test.step("delete blue tag", async () => {
+      await page.getByTestId("delete-button").click();
+      await expect(page.getByTestId("modal-delete")).toContainText(
+        'Are you sure you want to remove the Tag"blue"?'
+      );
+      await page.getByTestId("modal-delete-confirm").click();
+      await expect(page.getByText("Object blue deleted")).toBeVisible();
+      await expect(page.getByRole("link", { name: "blue" })).toBeHidden();
+    });
+
+    await test.step("user is still on the same branch after delete", async () => {
+      await expect(page.getByTestId("branch-selector-trigger")).toContainText(
+        "object-details-delete"
+      );
+    });
+  });
+});

frontend/app/tests/e2e/utils/graphql.ts

@@ -0,0 +1,65 @@
+import { type APIRequestContext, expect } from "@playwright/test";
+
+const API_URL = process.env.CI ? process.env.INFRAHUB_ADDRESS : "http://localhost:8000";
+const API_KEY = "06438eb2-8019-4776-878c-0941b1f1d1ec";
+
+interface GraphQLResponse<T = any> {
+  data?: T;
+  errors?: Array<{ message: string }>;
+}
+
+async function executeGraphQLMutation<T>(
+  request: APIRequestContext,
+  query: string,
+  variables: Record<string, any>
+): Promise<T> {
+  const response = await request.post(`${API_URL}/graphql`, {
+    headers: { "X-INFRAHUB-KEY": API_KEY },
+    data: { query, variables },
+  });
+
+  expect(response.ok()).toBeTruthy();
+  const result: GraphQLResponse<T> = await response.json();
+
+  if (result.errors) {
+    result.errors.forEach((error) => {
+      console.error(error.message);
+    });
+    throw new Error(`GraphQL Error: ${result.errors[0]?.message}`);
+  }
+
+  return result.data as T;
+}
+
+export const createBranchAPI = async (request: APIRequestContext, name: string) => {
+  const mutation = `
+    mutation BranchCreate($name: String!, $description: String, $sync_with_git: Boolean) {
+      BranchCreate(data: { name: $name, description: $description, sync_with_git: $sync_with_git }) {
+        object {
+          id
+          name
+          description
+          origin_branch
+          branched_from
+          created_at
+          sync_with_git
+          is_default
+        }
+      }
+    }
+  `;
+
+  return await executeGraphQLMutation(request, mutation, { name });
+};
+
+export const deleteBranchAPI = async (request: APIRequestContext, name: string): Promise<any> => {
+  const mutation = `
+    mutation BranchDelete($name: String!) {
+      BranchDelete(data: { name: $name }) {
+        ok
+      }
+    }
+  `;
+
+  return await executeGraphQLMutation(request, mutation, { name });
+};