Added edit in object table actions (#5781)

Author: bilalabbad

frontend/app/src/entities/nodes/object/ui/object-table/cells/actions-cell.tsx

@@ -1,10 +1,12 @@
-import {
-  DeleteObjectModal,
-  DeleteObjectModalProps,
-} from "@/entities/nodes/object/ui/delete-object-modal";
+import ObjectItemEditComponent from "@/entities/nodes/object-item-edit/object-item-edit-paginated";
+import { DeleteObjectModal } from "@/entities/nodes/object/ui/delete-object-modal";
 import { getObjectDetailsUrl2 } from "@/entities/nodes/utils";
 import { Permission } from "@/entities/permission/types";
+import { useSchema } from "@/entities/schema/hooks/useSchema";
+import { queryClient } from "@/shared/api/rest/client";
 import { Button } from "@/shared/components/buttons/button-primitive";
+import SlideOver, { SlideOverTitle } from "@/shared/components/display/slide-over";
+import ErrorScreen from "@/shared/components/errors/error-screen";
 import { TableCell } from "@/shared/components/table/table-cell";
 import {
   DropdownMenu,
@@ -17,14 +19,22 @@ import { Icon } from "@iconify-icon/react";
 import { useState } from "react";
 import { Link } from "react-router";
 
-export interface ActionsCellProps extends Omit<DeleteObjectModalProps, "open" | "setOpen"> {
+export interface ActionsCellProps {
   permission: Permission;
+  objectId: string;
+  objectKind: string;
+  objectLabel: string;
 }
 
 export function ActionsCell({ objectKind, objectId, objectLabel, permission }: ActionsCellProps) {
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showEditForm, setShowEditForm] = useState(false);
+  const { schema } = useSchema(objectKind);
+  const isEditAllowed = permission.update.isAllowed;
   const isDeleteAllowed = permission.delete.isAllowed;
 
+  if (!schema) return <ErrorScreen message={`Schema not found for ${objectKind}`} />;
+
   return (
     <>
       <TableCell className="sticky right-0 border-l size-10 items-center justify-center bg-white -ml-px">
@@ -49,6 +59,18 @@ export function ActionsCell({ objectKind, objectId, objectLabel, permission }: A
               </Link>
             </DropdownMenuItem>
 
+            <Tooltip enabled={!isEditAllowed} content={permission.update.message} side="left">
+              <div>
+                <DropdownMenuItem
+                  disabled={!isEditAllowed}
+                  onClick={() => isEditAllowed && setShowEditForm(true)}
+                >
+                  <Icon icon="mdi:edit-outline" className="text-base" />
+                  Edit
+                </DropdownMenuItem>
+              </div>
+            </Tooltip>
+
             <Tooltip enabled={!isDeleteAllowed} content={permission.delete.message} side="left">
               <div>
                 <DropdownMenuItem
@@ -64,6 +86,31 @@ export function ActionsCell({ objectKind, objectId, objectLabel, permission }: A
         </DropdownMenu>
       </TableCell>
 
+      {showEditForm && (
+        <SlideOver
+          title={
+            <SlideOverTitle
+              schema={schema}
+              currentObjectLabel={objectLabel}
+              title={`Edit ${objectLabel}`}
+            />
+          }
+          open={true}
+          setOpen={() => setShowEditForm(false)}
+        >
+          <ObjectItemEditComponent
+            closeDrawer={() => setShowEditForm(false)}
+            onUpdateComplete={async () => {
+              await queryClient.invalidateQueries({
+                predicate: (query) => query.queryKey.includes("objects"),
+              });
+            }}
+            objectid={objectId}
+            objectname={objectKind}
+          />
+        </SlideOver>
+      )}
+
       {showDeleteModal && (
         <DeleteObjectModal
           objectKind={objectKind}

frontend/app/src/entities/nodes/object/ui/object-table/get-object-table-columns.tsx

@@ -33,7 +33,7 @@ export const getObjectTableColumns = (
     {
       id: "id",
       accessorFn: ({ hfid, display_label, id }): string => {
-        if (schema.human_friendly_id && hfid) return hfid;
+        if (schema.human_friendly_id && hfid) return hfid.join(", ");
         if (schema.display_labels && display_label) return display_label;
         return id;
       },

frontend/app/tests/e2e/objects/object-list.spec.ts

@@ -64,15 +64,40 @@ test.describe("/objects/:objectKind", () => {
       expect(page.url()).toContain("/objects/InfraPlatform/");
     });
 
-    test("should be able to create a new object", async ({ page }) => {
+    test("should be able to manage objects", async ({ page }) => {
       await page.goto("/objects/BuiltinTag");
-
       await expect(page.getByRole("heading", { name: "Tag" })).toBeVisible();
       await expect(page.getByTestId("create-object-button")).toBeEnabled();
-      await page.getByTestId("actions-cell-blue").click();
-      await expect(page.getByRole("menuitem", { name: "Delete" })).toBeEnabled();
-      await page.getByTestId("create-object-button").click();
-      await expect(page.getByRole("heading", { name: "Create Tag", exact: true })).toBeVisible();
+
+      await test.step("create a new item from the list", async () => {
+        await page.getByTestId("create-object-button").click();
+        await page.getByLabel("Name *").fill("crud");
+        await page.getByLabel("Description").fill("initial description");
+        await page.getByRole("button", { name: "Save" }).click();
+
+        await expect(page.getByRole("link", { name: "crud" })).toBeVisible();
+        await expect(page.getByText("initial description")).toBeVisible();
+      });
+
+      await test.step("edit the item", async () => {
+        await page.getByTestId("actions-cell-crud").click();
+        await page.getByRole("menuitem", { name: "Edit" }).click();
+        await page.getByLabel("Description").fill("description updated");
+        await page.getByRole("button", { name: "Save" }).click();
+
+        await expect(page.getByText("Tag updated")).toBeVisible();
+        await expect(page.getByRole("link", { name: "crud" })).toBeVisible();
+        await expect(page.getByText("description updated")).toBeVisible();
+      });
+
+      await test.step("delete the item", async () => {
+        await page.getByTestId("actions-cell-crud").click();
+        await page.getByRole("menuitem", { name: "Delete" }).click();
+        await expect(page.getByTestId("modal-delete")).toBeVisible();
+        await expect(page.getByText("Are you sure you want to remove crud")).toBeVisible();
+        await page.getByTestId("modal-delete-confirm").click();
+        await expect(page.getByText("Object crud deleted")).toBeVisible();
+      });
     });
   });
 });