feat: completed frontend changes for new pki templates

frontend/src/pages/project/RoleDetailsBySlugPage/components/PkiTemplatePermissionConditions.tsx

@@ -0,0 +1,173 @@
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import {
+  PermissionConditionOperators,
+  ProjectPermissionSub
+} from "@app/context/ProjectPermissionContext/types";
+
+import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
+import { TFormSchema } from "./ProjectRoleModifySection.utils";
+
+type Props = {
+  position?: number;
+  isDisabled?: boolean;
+};
+
+export const PkiTemplatePermissionConditions = ({ position = 0, isDisabled }: Props) => {
+  const {
+    control,
+    watch,
+    formState: { errors }
+  } = useFormContext<TFormSchema>();
+
+  const permissionSubject = ProjectPermissionSub.CertificateTemplates;
+  const items = useFieldArray({
+    control,
+    name: `permissions.${permissionSubject}.${position}.conditions`
+  });
+
+  return (
+    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
+      <p className="mt-2 text-gray-300">Conditions</p>
+      <p className="text-sm text-mineshaft-400">
+        Conditions determine when a policy will be applied (always if no conditions are present).
+      </p>
+      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
+        All conditions must evaluate to true for the policy to take effect.
+      </p>
+      <div className="mt-2 flex flex-col space-y-2">
+        {items.fields.map((el, index) => {
+          const condition =
+            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
+              lhs: string;
+              rhs: string;
+              operator: string;
+            }) || {};
+
+          return (
+            <div
+              key={el.id}
+              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
+            >
+              <div className="w-1/4">
+                <Controller
+                  control={control}
+                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => field.onChange(e)}
+                        className="w-full"
+                      >
+                        <SelectItem value="name">Name</SelectItem>
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="flex w-36 items-center space-x-2">
+                <Controller
+                  control={control}
+                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0 flex-grow"
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => field.onChange(e)}
+                        className="w-full"
+                      >
+                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
+                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
+                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+                <Tooltip
+                  asChild
+                  content={getConditionOperatorHelperInfo(
+                    condition?.operator as PermissionConditionOperators
+                  )}
+                  className="max-w-xs"
+                >
+                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
+                </Tooltip>
+              </div>
+              <div className="flex-grow">
+                <Controller
+                  control={control}
+                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      isError={Boolean(error?.message)}
+                      errorText={error?.message}
+                      className="mb-0 flex-grow"
+                    >
+                      <Input {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div>
+                <IconButton
+                  ariaLabel="plus"
+                  variant="outline_bg"
+                  className="p-2.5"
+                  onClick={() => items.remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
+        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
+          <FontAwesomeIcon icon={faWarning} className="text-red" />
+          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
+        </div>
+      )}
+      <div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          variant="star"
+          size="xs"
+          className="mt-3"
+          isDisabled={isDisabled}
+          onClick={() =>
+            items.append({
+              lhs: "name",
+              operator: PermissionConditionOperators.$EQ,
+              rhs: ""
+            })
+          }
+        >
+          Add Condition
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -18,6 +18,7 @@ import {
   ProjectPermissionKmipActions,
   ProjectPermissionMemberActions,
   ProjectPermissionPkiSubscriberActions,
+  ProjectPermissionPkiTemplateActions,
   ProjectPermissionSecretActions,
   ProjectPermissionSecretRotationActions,
   ProjectPermissionSecretSyncActions,
@@ -148,6 +149,15 @@ const PkiSubscriberPolicyActionSchema = z.object({
   [ProjectPermissionPkiSubscriberActions.ListCerts]: z.boolean().optional()
 });
 
+const PkiTemplatePolicyActionSchema = z.object({
+  [ProjectPermissionPkiTemplateActions.Read]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.Create]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.IssueCert]: z.boolean().optional(),
+  [ProjectPermissionPkiTemplateActions.ListCerts]: z.boolean().optional()
+});
+
 const SecretRollbackPolicyActionSchema = z.object({
   read: z.boolean().optional(),
   create: z.boolean().optional()
@@ -255,7 +265,12 @@ export const projectRoleFormSchema = z.object({
         .default([]),
       [ProjectPermissionSub.PkiAlerts]: GeneralPolicyActionSchema.array().default([]),
       [ProjectPermissionSub.PkiCollections]: GeneralPolicyActionSchema.array().default([]),
-      [ProjectPermissionSub.CertificateTemplates]: GeneralPolicyActionSchema.array().default([]),
+      [ProjectPermissionSub.CertificateTemplates]: PkiTemplatePolicyActionSchema.extend({
+        inverted: z.boolean().optional(),
+        conditions: ConditionSchema
+      })
+        .array()
+        .default([]),
       [ProjectPermissionSub.SshCertificateAuthorities]: GeneralPolicyActionSchema.array().default(
         []
       ),
@@ -295,6 +310,7 @@ type TConditionalFields =
   | ProjectPermissionSub.SecretImports
   | ProjectPermissionSub.DynamicSecrets
   | ProjectPermissionSub.PkiSubscribers
+  | ProjectPermissionSub.CertificateTemplates
   | ProjectPermissionSub.SshHosts
   | ProjectPermissionSub.SecretRotation
   | ProjectPermissionSub.Identity;
@@ -309,7 +325,8 @@ export const isConditionalSubjects = (
   subject === ProjectPermissionSub.Identity ||
   subject === ProjectPermissionSub.SshHosts ||
   subject === ProjectPermissionSub.SecretRotation ||
-  subject === ProjectPermissionSub.PkiSubscribers;
+  subject === ProjectPermissionSub.PkiSubscribers ||
+  subject === ProjectPermissionSub.CertificateTemplates;
 
 const convertCaslConditionToFormOperator = (caslConditions: TPermissionCondition) => {
   const formConditions: z.infer<typeof ConditionSchema> = [];
@@ -408,7 +425,6 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         ProjectPermissionSub.CertificateAuthorities,
         ProjectPermissionSub.PkiAlerts,
         ProjectPermissionSub.PkiCollections,
-        ProjectPermissionSub.CertificateTemplates,
         ProjectPermissionSub.Tags,
         ProjectPermissionSub.SecretRotation,
         ProjectPermissionSub.Kms,
@@ -781,6 +797,34 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
         conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
         inverted
       });
+      return;
+    }
+
+    if (subject === ProjectPermissionSub.CertificateTemplates) {
+      if (!formVal[subject]) formVal[subject] = [];
+
+      formVal[subject]!.push({
+        [ProjectPermissionPkiTemplateActions.Edit]: action.includes(
+          ProjectPermissionPkiTemplateActions.Edit
+        ),
+        [ProjectPermissionPkiTemplateActions.Delete]: action.includes(
+          ProjectPermissionPkiTemplateActions.Delete
+        ),
+        [ProjectPermissionPkiTemplateActions.Create]: action.includes(
+          ProjectPermissionPkiTemplateActions.Create
+        ),
+        [ProjectPermissionPkiTemplateActions.Read]: action.includes(
+          ProjectPermissionPkiTemplateActions.Read
+        ),
+        [ProjectPermissionPkiTemplateActions.IssueCert]: action.includes(
+          ProjectPermissionPkiTemplateActions.IssueCert
+        ),
+        [ProjectPermissionPkiTemplateActions.ListCerts]: action.includes(
+          ProjectPermissionPkiTemplateActions.ListCerts
+        ),
+        conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
+        inverted
+      });
     }
   });
 
@@ -1119,10 +1163,12 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
   [ProjectPermissionSub.CertificateTemplates]: {
     title: "Certificate Templates",
     actions: [
-      { label: "Read", value: "read" },
-      { label: "Create", value: "create" },
-      { label: "Modify", value: "edit" },
-      { label: "Remove", value: "delete" }
+      { label: "Read", value: ProjectPermissionPkiTemplateActions.Read },
+      { label: "Create", value: ProjectPermissionPkiTemplateActions.Create },
+      { label: "Modify", value: ProjectPermissionPkiTemplateActions.Edit },
+      { label: "Remove", value: ProjectPermissionPkiTemplateActions.Delete },
+      { label: "Issue Certificates", value: ProjectPermissionPkiTemplateActions.IssueCert },
+      { label: "List Certificates", value: ProjectPermissionPkiTemplateActions.ListCerts }
     ]
   },
   [ProjectPermissionSub.SshCertificateAuthorities]: {

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -23,6 +23,7 @@ import { GeneralPermissionPolicies } from "./GeneralPermissionPolicies";
 import { IdentityManagementPermissionConditions } from "./IdentityManagementPermissionConditions";
 import { PermissionEmptyState } from "./PermissionEmptyState";
 import { PkiSubscriberPermissionConditions } from "./PkiSubscriberPermissionConditions";
+import { PkiTemplatePermissionConditions } from "./PkiTemplatePermissionConditions";
 import {
   formRolePermission2API,
   isConditionalSubjects,
@@ -63,6 +64,10 @@ export const renderConditionalComponents = (
       return <PkiSubscriberPermissionConditions isDisabled={isDisabled} />;
     }
 
+    if (subject === ProjectPermissionSub.CertificateTemplates) {
+      return <PkiTemplatePermissionConditions isDisabled={isDisabled} />;
+    }
+
     return <GeneralPermissionConditions isDisabled={isDisabled} type={subject} />;
   }