general improvements

2026-09-22 13:39:35 +00:00 · 2025-12-09 13:31:41 -05:00
parent 36768f05b2
commit e40cbe7e58
13 changed files with 110 additions and 247 deletions
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/ApprovalRequestDetailPage.tsx
@@ -119,8 +119,8 @@ const PageContent = () => {
              )}
          </div>
        </PageHeader>
-        <div className="flex justify-center gap-4">
-          <div className="flex w-96 flex-col gap-4">
+        <div className="flex flex-col justify-center gap-4 lg:flex-row">
+          <div className="flex flex-col gap-4 lg:w-96">
            <RequestDetailsSection request={request} />
            <RequestActionsSection request={request} />
          </div>
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/ApprovalStepsSection.tsx
@@ -75,7 +75,7 @@ export const ApprovalStepsSection = ({ request }: Props) => {
  return (
    <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
      <div className="mb-2 flex items-center justify-between border-b border-mineshaft-500 pb-2">
-        <h3 className="text-lg font-medium text-mineshaft-100">Approval Workflow</h3>
+        <h3 className="text-lg font-medium text-mineshaft-100">Approval Sequence</h3>
      </div>
      <div className="space-y-6">
        {request.steps.map((step, index) => (
--- a/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx
+++ b/frontend/src/pages/pam/ApprovalRequestDetailPage/components/RequestActionsSection.tsx
@@ -127,7 +127,7 @@ export const RequestActionsSection = ({ request }: Props) => {
              Review
            </Button>
          </PopoverTrigger>
-          <PopoverContent align="start" title="Finish your review" className="w-96">
+          <PopoverContent align="start" title="Finish your review" className="w-96 pt-4">
            <FormLabel label="Finish your review" />
            <TextArea
              value={comment}
--- a/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/ApprovalRequestTab/ApprovalRequestTab.tsx
@@ -152,8 +152,11 @@ export const ApprovalRequestTab = () => {

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Approval Requests</p>
+      <div className="mb-4">
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
+        </div>
+        <p className="text-sm text-bunker-300">View pending access requests to PAM accounts</p>
      </div>
      <div>
        <div className="flex gap-2">
@@ -262,7 +265,7 @@ export const ApprovalRequestTab = () => {
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search approval requests..."
+            placeholder="Search access requests..."
          />
        </div>
        <TableContainer className="mt-4">
@@ -286,10 +289,7 @@ export const ApprovalRequestTab = () => {
                  return (
                    <Tr
                      key={request.id}
-                      className={twMerge(
-                        "cursor-pointer transition-colors hover:bg-mineshaft-700",
-                        needsApproval && "bg-primary/5 hover:bg-primary/10"
-                      )}
+                      className="cursor-pointer transition-colors hover:bg-mineshaft-700"
                      onClick={() => handleRowClick(request.id)}
                    >
                      <Td>
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/PolicyTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/PolicyTab.tsx
@@ -38,10 +38,14 @@ export const PolicyTab = () => {

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <div className="flex items-center gap-x-2">
-          <p className="text-xl font-medium text-mineshaft-100">Approval Policies</p>
+      <div className="mb-4 flex items-center">
+        <div className="flex-1">
+          <div className="flex items-center gap-x-2">
+            <p className="text-xl font-medium text-mineshaft-100">Access Policies</p>
+          </div>
+          <p className="text-sm text-bunker-300">View and manage PAM access policies</p>
        </div>
+
        <Button
          variant="outline_bg"
          type="submit"
@@ -51,6 +55,7 @@ export const PolicyTab = () => {
          Create Policy
        </Button>
      </div>
+
      <PoliciesTable handlePopUpOpen={handlePopUpOpen} />
      <PolicyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
      <DeleteActionModal
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PoliciesTable.tsx
@@ -98,7 +98,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
            <Tr>
              <Th className="w-10" />
              <Th>Policy Name</Th>
-              <Th>Access Duration (min - max)</Th>
+              <Th>Max. Access Duration</Th>
              <Th>Conditions</Th>
              <Th className="w-5" />
            </Tr>
@@ -141,10 +141,7 @@ export const PoliciesTable = ({ handlePopUpOpen }: Props) => {
                        </IconButton>
                      </Td>
                      <Td>{policy.name}</Td>
-                      <Td>
-                        {policy.constraints.constraints.accessDuration.min} -{" "}
-                        {policy.constraints.constraints.accessDuration.max}
-                      </Td>
+                      <Td>{policy.constraints.constraints.accessDuration.max}</Td>
                      <Td>
                        {conditionsCount} condition{conditionsCount !== 1 ? "s" : ""}
                      </Td>
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicyModal.tsx
@@ -15,7 +15,6 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";

 import { PolicyApprovalSteps } from "./PolicySteps/PolicyApprovalSteps";
-import { PolicyConstraintsStep } from "./PolicySteps/PolicyConstraintsStep";
 import { PolicyDetailsStep } from "./PolicySteps/PolicyDetailsStep";
 import { PolicyReviewStep } from "./PolicySteps/PolicyReviewStep";
 import { PolicyFormSchema, TPolicyForm } from "./PolicySchema";
@@ -26,9 +25,12 @@ type Props = {
 };

 const FORM_STEPS: { name: string; key: string; fields: (keyof TPolicyForm)[] }[] = [
-  { name: "Details", key: "details", fields: ["name", "maxRequestTtl", "constraints"] },
-  { name: "Conditions", key: "conditions", fields: ["conditions"] },
-  { name: "Approvals", key: "approvals", fields: ["steps"] },
+  {
+    name: "Configuration",
+    key: "configuration",
+    fields: ["name", "constraints", "conditions"]
+  },
+  { name: "Approval Sequence", key: "approvals", fields: ["steps"] },
  { name: "Review", key: "review", fields: [] }
 ];

@@ -61,8 +63,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
          approvers: []
        }
      ]
-    },
-    mode: "onChange"
+    }
  });

  const { handleSubmit, trigger, reset } = formMethods;
@@ -184,7 +185,7 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
  return (
    <Modal isOpen={isOpen} onOpenChange={(open) => handlePopUpToggle("policy", open)}>
      <ModalContent
-        title={policyData?.policyId ? "Edit Policy" : "Create Policy"}
+        title={policyData?.policyId ? "Edit Access Policy" : "Create Access Policy"}
        className="max-w-3xl"
      >
        <FormProvider {...formMethods}>
@@ -215,9 +216,6 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
                <Tab.Panel>
                  <PolicyDetailsStep />
                </Tab.Panel>
-                <Tab.Panel>
-                  <PolicyConstraintsStep />
-                </Tab.Panel>
                <Tab.Panel>
                  <PolicyApprovalSteps />
                </Tab.Panel>
@@ -237,7 +235,8 @@ export const PolicyModal = ({ popUp, handlePopUpToggle }: Props) => {
                isLoading={isCreating || isUpdating}
                isDisabled={isCreating || isUpdating}
              >
-                {policyData?.policyId ? "Update" : "Create"} {isFinalStep ? "" : "Next"}
+                {isFinalStep && (policyData?.policyId ? "Update" : "Create")}
+                {!isFinalStep && "Next"}
              </Button>
            </div>
          </form>
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySchema.tsx
@@ -28,7 +28,13 @@ export const PolicyFormSchema = z.object({
  ).nullish(),
  conditions: z
    .object({
-      accountPaths: z.array(z.string().min(1))
+      accountPaths: z
+        .string()
+        .array()
+        .min(1, "Must have at least one account path")
+        .refine((val) => val.every((path) => path.length > 0), {
+          message: "All account paths must be non-empty"
+        })
    })
    .array()
    .min(1, "At least one condition is required"),
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyApprovalSteps.tsx
@@ -78,7 +78,7 @@ export const PolicyApprovalSteps = () => {

      <div className="space-y-4">
        {stepFields.map((field, index) => (
-          <div key={field.id} className="rounded border border-mineshaft-600 bg-mineshaft-800 p-4">
+          <div key={field.id} className="rounded border border-mineshaft-600 bg-mineshaft-700 p-4">
            <div className="mb-3 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-primary/20 text-xs font-semibold text-primary">
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyConstraintsStep.tsx
@@ -1,102 +0,0 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
-
-import { TPolicyForm } from "../PolicySchema";
-
-export const PolicyConstraintsStep = () => {
-  const { control } = useFormContext<TPolicyForm>();
-
-  const {
-    fields: conditionFields,
-    append: appendCondition,
-    remove: removeCondition
-  } = useFieldArray({
-    control,
-    name: "conditions"
-  });
-
-  return (
-    <div className="space-y-6">
-      <div>
-        <div className="mb-3 flex items-center justify-between">
-          <div>
-            <p className="pb-0.5 text-sm font-medium text-mineshaft-200">Conditions</p>
-            <p className="text-xs text-mineshaft-400">
-              Define which resources and account paths this policy applies to
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant="outline_bg"
-            size="xs"
-            leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => appendCondition({ accountPaths: [] })}
-          >
-            Add Condition
-          </Button>
-        </div>
-        <div>
-          {conditionFields.map((field, index) => (
-            <div key={field.id}>
-              <div className="rounded border border-mineshaft-600 bg-mineshaft-800 p-4">
-                <div className="mb-3 flex items-center justify-between">
-                  <span className="text-sm font-medium text-mineshaft-300">
-                    Condition {index + 1}
-                  </span>
-                  {conditionFields.length > 1 && (
-                    <IconButton
-                      ariaLabel="Remove condition"
-                      variant="plain"
-                      size="xs"
-                      onClick={() => removeCondition(index)}
-                    >
-                      <FontAwesomeIcon icon={faTrash} className="text-red-500" />
-                    </IconButton>
-                  )}
-                </div>
-                <div className="space-y-3">
-                  <Controller
-                    control={control}
-                    name={`conditions.${index}.accountPaths`}
-                    render={({ field: pathField, fieldState: { error } }) => (
-                      <FormControl
-                        label="Account Paths"
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        helperText="Matches any of the comma-separated account paths this condition applies to"
-                      >
-                        <Input
-                          value={pathField.value.join(", ")}
-                          onChange={(e) => {
-                            const paths = e.target.value
-                              .split(",")
-                              .map((path) => path.trim())
-                              .filter(Boolean);
-                            pathField.onChange(paths);
-                          }}
-                          placeholder="e.g., /admin/**, /users/john, /**"
-                        />
-                      </FormControl>
-                    )}
-                  />
-                </div>
-              </div>
-              {index < conditionFields.length - 1 && (
-                <div className="flex items-center">
-                  <div className="flex flex-col items-center">
-                    <div className="h-3 w-px bg-mineshaft-500" />
-                    <span className="px-2 text-xs font-medium text-mineshaft-400">OR</span>
-                    <div className="h-3 w-px bg-mineshaft-500" />
-                  </div>
-                </div>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyDetailsStep.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";

 import { TtlFormLabel } from "@app/components/features";
@@ -6,80 +7,72 @@ import { FormControl, Input } from "@app/components/v2";
 import { TPolicyForm } from "../PolicySchema";

 export const PolicyDetailsStep = () => {
-  const { control } = useFormContext<TPolicyForm>();
+  const {
+    control,
+    formState: { errors }
+  } = useFormContext<TPolicyForm>();
+
+  useEffect(() => {
+    console.log("YOOOO");
+    console.log(errors);
+  }, [errors]);

  return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-4">
+      <div className="flex w-full gap-4">
+        <Controller
+          control={control}
+          name="name"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label="Policy Name"
+              className="mb-0 flex-1"
+              isRequired
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} placeholder="Enter policy name" />
+            </FormControl>
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="constraints.accessDuration.max"
+          render={({ field, fieldState: { error } }) => (
+            <FormControl
+              label={<TtlFormLabel label="Max. Access Duration" />}
+              className="mb-0"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input {...field} />
+            </FormControl>
+          )}
+        />
+      </div>
+
      <Controller
        control={control}
-        name="name"
-        render={({ field, fieldState: { error } }) => (
+        name="conditions.0.accountPaths"
+        render={({ field: pathField, fieldState: { error } }) => (
          <FormControl
-            label="Policy Name"
            isRequired
+            label="Account Paths"
            isError={Boolean(error)}
            errorText={error?.message}
+            helperText="Policy matches any of these comma-separated account paths"
          >
-            <Input {...field} placeholder="Enter policy name" />
+            <Input
+              value={pathField.value.join(",")}
+              onChange={(e) => {
+                pathField.onChange(e.target.value.split(",").map((path) => path.trim()));
+              }}
+              placeholder="e.g., /admin/**, /users/john, /**"
+            />
          </FormControl>
        )}
      />
-      {/*
-        <Controller
-        control={control}
-        name="maxRequestTtl"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            isError={Boolean(error)}
-            errorText={error?.message}
-            label={<TtlFormLabel label="Max Approval Request TTL" />}
-            helperText="Maximum time-to-live for requests. Must be between 1 hour and 30 days. Leave empty for no limit."
-          >
-            <Input {...field} value={field.value ?? ""} placeholder="1h" />
-          </FormControl>
-        )}
-      />
-      */}
-      <div className="border-t border-mineshaft-600 pt-4">
-        <div className="mb-3">
-          <p className="pb-0.5 text-sm font-medium text-mineshaft-200">
-            PAM Account Access Duration TTL
-          </p>
-          <p className="text-xs text-mineshaft-400">
-            Set minimum and maximum duration (in seconds) for pam account access
-          </p>
-        </div>
-        <div className="grid grid-cols-2 gap-4">
-          <Controller
-            control={control}
-            name="constraints.accessDuration.min"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label={<TtlFormLabel label="Minimum TTL" />}
-                isError={Boolean(error)}
-                errorText={error?.message}
-                helperText="Must be between 30s and 7 days"
-              >
-                <Input {...field} />
-              </FormControl>
-            )}
-          />
-          <Controller
-            control={control}
-            name="constraints.accessDuration.max"
-            render={({ field, fieldState: { error } }) => (
-              <FormControl
-                label={<TtlFormLabel label="Maximum TTL" />}
-                isError={Boolean(error)}
-                errorText={error?.message}
-                helperText="Must be between 30s and 7 days"
-              >
-                <Input {...field} />
-              </FormControl>
-            )}
-          />
-        </div>
-      </div>
    </div>
  );
 };
--- a/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/PolicyTab/components/PolicySteps/PolicyReviewStep.tsx
@@ -45,61 +45,23 @@ export const PolicyReviewStep = () => {
    <div className="space-y-6">
      <div>
        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">Policy Details</h3>
+          <h3 className="text-sm font-medium text-mineshaft-200">Policy Configuration</h3>
        </div>
-        <div className="space-y-2">
+        <div className="grid grid-cols-2 gap-2">
          <ReviewField label="Policy Name" value={name || "Not set"} />
-          <ReviewField label="Max Approval Request TTL" value={maxRequestTtl || "No Limit"} />
+          <ReviewField label="Max. Access Duration" value={constraints.accessDuration.max} />
+          <ReviewField
+            label="Account Paths"
+            value={
+              conditions[0].accountPaths.length ? conditions[0].accountPaths.join(",") : "Not set"
+            }
+          />
        </div>
      </div>

      <div>
        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            PAM Account Access Duration TTL
-          </h3>
-        </div>
-        <div className="space-y-2">
-          <ReviewField label="Minimum Duration" value={constraints.accessDuration.min} />
-          <ReviewField label="Maximum Duration" value={constraints.accessDuration.max} />
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            Conditions ({conditions.length})
-          </h3>
-        </div>
-        <div className="space-y-3">
-          {conditions.map((condition, index) => (
-            <div
-              key={`condition-${index + 1}`}
-              className="rounded border border-mineshaft-600 bg-mineshaft-800/50 p-3"
-            >
-              <div className="mb-2 text-xs font-medium text-mineshaft-300">
-                Condition {index + 1}
-              </div>
-              <div className="space-y-2">
-                <div>
-                  <span className="text-xs text-mineshaft-400">Account Paths: </span>
-                  <span className="text-xs text-mineshaft-200">
-                    {condition.accountPaths.length > 0
-                      ? condition.accountPaths.join(", ")
-                      : "None specified"}
-                  </span>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div>
-        <div className="mb-3 border-b border-mineshaft-600 pb-2">
-          <h3 className="text-sm font-medium text-mineshaft-200">
-            Approval Workflow ({steps.length} step{steps.length !== 1 ? "s" : ""})
-          </h3>
+          <h3 className="text-sm font-medium text-mineshaft-200">Approval Sequence</h3>
        </div>
        <div className="space-y-3">
          {steps.map((step, index) => {
@@ -109,7 +71,7 @@ export const PolicyReviewStep = () => {
            return (
              <div
                key={`step-${index + 1}`}
-                className="rounded border border-mineshaft-600 bg-mineshaft-800/50 p-3"
+                className="rounded border border-mineshaft-600 bg-mineshaft-700 p-3"
              >
                <div className="mb-3 flex items-center justify-between">
                  <div className="flex items-center gap-2">
--- a/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
+++ b/frontend/src/pages/pam/ApprovalsPage/components/RequestGrantTab/RequestGrantTab.tsx
@@ -180,8 +180,11 @@ export const RequestGrantTab = () => {

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-4 flex items-center justify-between">
-        <p className="text-xl font-medium text-mineshaft-100">Access Grants</p>
+      <div className="mb-4">
+        <div className="flex items-center gap-x-2">
+          <p className="text-xl font-medium text-mineshaft-100">Access Grants</p>
+        </div>
+        <p className="text-sm text-bunker-300">View and revoke access grants to PAM accounts</p>
      </div>
      <div>
        <div className="flex gap-2">