feat: completed frontend

2026-10-16 03:31:27 +00:00 · 2025-02-26 20:45:37 +05:30
parent 78718cd299
commit f34370cb9d
11 changed files with 316 additions and 18 deletions
@@ -3,17 +3,30 @@ import { Helmet } from "react-helmet";
 import {
  faArrowUpRightFromSquare,
  faBookOpen,
+  faEdit,
+  faEllipsisV,
  faMagnifyingGlass,
  faPlug,
-  faSearch
+  faSearch,
+  faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";

+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
  EmptyState,
+  IconButton,
  Input,
+  Modal,
+  ModalContent,
  PageHeader,
  Table,
  TableContainer,
@@ -22,20 +35,44 @@ import {
  Td,
  Th,
  THead,
+  Tooltip,
  Tr
 } from "@app/components/v2";
 import {
+  OrgGatewayPermissionActions,
  OrgPermissionAppConnectionActions,
  OrgPermissionSubjects
 } from "@app/context/OrgPermissionContext/types";
 import { withPermission } from "@app/hoc";
-import { gatewaysQueryKeys } from "@app/hooks/api/gateways";
+import { usePopUp } from "@app/hooks";
+import { gatewaysQueryKeys, useDeleteGatewayById } from "@app/hooks/api/gateways";
+
+import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal";

 export const GatewayListPage = withPermission(
  () => {
    const [search, setSearch] = useState("");
    const { data: gateways, isPending: isGatewayLoading } = useQuery(gatewaysQueryKeys.list());

+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+      "deleteGateway",
+      "editDetails"
+    ] as const);
+
+    const deleteGatewayById = useDeleteGatewayById();
+
+    const handleDeleteGateway = async () => {
+      await deleteGatewayById.mutateAsync((popUp.deleteGateway.data as { id: string }).id, {
+        onSuccess: () => {
+          handlePopUpToggle("deleteGateway");
+          createNotification({
+            type: "success",
+            text: "Successfully delete gateway"
+          });
+        }
+      });
+    };
+
    const filteredGateway = gateways?.filter((el) =>
      el.name.toLowerCase().includes(search.toLowerCase())
    );
@@ -100,13 +137,70 @@ export const GatewayListPage = withPermission(
                      {filteredGateway?.map((el) => (
                        <Tr key={el.id}>
                          <Td>{el.name}</Td>
-                          <Td>{format(new Date(el.issuedAt), "yyyy-MM-dd")}</Td>
+                          <Td>{format(new Date(el.issuedAt), "yyyy-MM-dd hh:mm:ss aaa")}</Td>
                          <Td>{el.identity.name}</Td>
-                          <Td />
+                          <Td className="w-5">
+                            <Tooltip className="max-w-sm text-center" content="Options">
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <IconButton
+                                    ariaLabel="Options"
+                                    colorSchema="secondary"
+                                    className="w-6"
+                                    variant="plain"
+                                  >
+                                    <FontAwesomeIcon icon={faEllipsisV} />
+                                  </IconButton>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <OrgPermissionCan
+                                    I={OrgGatewayPermissionActions.Edit}
+                                    a={OrgPermissionSubjects.Gateway}
+                                  >
+                                    {(isAllowed: boolean) => (
+                                      <DropdownMenuItem
+                                        isDisabled={!isAllowed}
+                                        icon={<FontAwesomeIcon icon={faEdit} />}
+                                        onClick={() => handlePopUpOpen("editDetails", el)}
+                                      >
+                                        Edit Details
+                                      </DropdownMenuItem>
+                                    )}
+                                  </OrgPermissionCan>
+                                  <OrgPermissionCan
+                                    I={OrgPermissionAppConnectionActions.Delete}
+                                    a={OrgPermissionSubjects.AppConnections}
+                                  >
+                                    {(isAllowed: boolean) => (
+                                      <DropdownMenuItem
+                                        isDisabled={!isAllowed}
+                                        icon={<FontAwesomeIcon icon={faTrash} />}
+                                        className="text-red"
+                                        onClick={() => handlePopUpOpen("deleteGateway", el)}
+                                      >
+                                        Delete Gateway
+                                      </DropdownMenuItem>
+                                    )}
+                                  </OrgPermissionCan>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </Tooltip>
+                          </Td>
                        </Tr>
                      ))}
                    </TBody>
                  </Table>
+                  <Modal
+                    isOpen={popUp.editDetails.isOpen}
+                    onOpenChange={(isOpen) => handlePopUpToggle("editDetails", isOpen)}
+                  >
+                    <ModalContent title="Edit Gateway">
+                      <EditGatewayDetailsModal
+                        gatewayDetails={popUp.editDetails.data}
+                        onClose={() => handlePopUpToggle("editDetails")}
+                      />
+                    </ModalContent>
+                  </Modal>
                  {!isGatewayLoading && !filteredGateway?.length && (
                    <EmptyState
                      title={
@@ -117,6 +211,15 @@ export const GatewayListPage = withPermission(
                      icon={gateways?.length ? faSearch : faPlug}
                    />
                  )}
+                  <DeleteActionModal
+                    isOpen={popUp.deleteGateway.isOpen}
+                    title={`Are you sure want to delete gateway ${
+                      (popUp?.deleteGateway?.data as { name: string })?.name || ""
+                    }?`}
+                    onChange={(isOpen) => handlePopUpToggle("deleteGateway", isOpen)}
+                    deleteKey="confirm"
+                    onDeleteApproved={() => handleDeleteGateway()}
+                  />
                </TableContainer>
              </div>
            </div>
@@ -0,0 +1,75 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUpdateGatewayById } from "@app/hooks/api";
+import { TGateway } from "@app/hooks/api/gateways/types";
+
+type Props = {
+  gatewayDetails: TGateway;
+  onClose: () => void;
+};
+
+const schema = z.object({
+  name: z.string()
+});
+
+export type FormData = z.infer<typeof schema>;
+
+export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: gatewayDetails?.name
+    }
+  });
+
+  const updateGatewayById = useUpdateGatewayById();
+
+  const onFormSubmit = ({ name }: FormData) => {
+    if (isSubmitting) return;
+    updateGatewayById.mutate(
+      {
+        id: gatewayDetails.id,
+        name
+      },
+      {
+        onSuccess: () => {
+          createNotification({
+            type: "success",
+            text: "Successfully updated gateway"
+          });
+          onClose();
+        }
+      }
+    );
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl label="Name" isError={Boolean(error)} errorText={error?.message} isRequired>
+            <Input {...field} placeholder="db-subnet-1" />
+          </FormControl>
+        )}
+      />
+      <div className="mt-4 flex items-center">
+        <Button className="mr-4" size="sm" type="submit" isLoading={isSubmitting}>
+          Update
+        </Button>
+        <Button colorSchema="secondary" variant="plain" onClick={() => onClose()}>
+          Cancel
+        </Button>
+      </div>
+    </form>
+  );
+};
@@ -14,6 +14,7 @@ import {
  TFormSchema
 } from "../OrgRoleModifySection.utils";
 import { OrgPermissionAdminConsoleRow } from "./OrgPermissionAdminConsoleRow";
+import { OrgGatewayPermissionRow } from "./OrgPermissionGatewayRow";
 import { OrgPermissionKmipRow } from "./OrgPermissionKmipRow";
 import { OrgRoleWorkspaceRow } from "./OrgRoleWorkspaceRow";
 import { RolePermissionRow } from "./RolePermissionRow";
@@ -171,6 +172,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
                setValue={setValue}
                isEditable={isCustomRole}
              />
+              <OrgGatewayPermissionRow
+                control={control}
+                setValue={setValue}
+                isEditable={isCustomRole}
+              />
              <OrgRoleWorkspaceRow
                control={control}
                setValue={setValue}