improvements: address feedback

This commit is contained in:
Scott Wilson
2025-05-08 16:17:25 -07:00
parent 800ea5ce78
commit 5b7627585f
2 changed files with 12 additions and 8 deletions
@@ -40,7 +40,7 @@ export const AddPoliciesButton = ({ isDisabled }: Props) => {
> >
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<IconButton <IconButton
ariaLabel="add-policies-options" ariaLabel="Open policy template options"
variant="outline_bg" variant="outline_bg"
className="rounded-l-none bg-mineshaft-600 p-3" className="rounded-l-none bg-mineshaft-600 p-3"
> >
@@ -1,5 +1,5 @@
import { cloneElement, ReactNode, useState } from "react"; import { cloneElement, ReactNode, useState } from "react";
import { Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form"; import { Control, Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form";
import { import {
faChevronDown, faChevronDown,
faChevronRight, faChevronRight,
@@ -35,12 +35,15 @@ type ActionProps = {
rootIndex: number; rootIndex: number;
label: ReactNode; label: ReactNode;
isDisabled?: boolean; isDisabled?: boolean;
control: any; control: Control<TFormSchema>;
}; };
const ActionCheckbox = ({ value, subject, isDisabled, rootIndex, label, control }: ActionProps) => { const ActionCheckbox = ({ value, subject, isDisabled, rootIndex, label, control }: ActionProps) => {
// scott: using Controller caused discrepency between field value and actual value, this is a hacky fix // scott: using Controller caused discrepancy between field value and actual value, this is a hacky fix
const fieldValue = useWatch({ control, name: `permissions.${subject}.${rootIndex}.${value}` }); const fieldValue = useWatch({
control,
name: `permissions.${subject}.${rootIndex}.${value}` as any
});
const { setValue } = useFormContext(); const { setValue } = useFormContext();
return ( return (
@@ -51,7 +54,8 @@ const ActionCheckbox = ({ value, subject, isDisabled, rootIndex, label, control
onCheckedChange={(isChecked) => onCheckedChange={(isChecked) =>
setValue(`permissions.${subject}.${rootIndex}.${value}`, isChecked, { setValue(`permissions.${subject}.${rootIndex}.${value}`, isChecked, {
shouldDirty: true, shouldDirty: true,
shouldTouch: true shouldTouch: true,
shouldValidate: true
}) })
} }
id={`permissions.${subject}.${rootIndex}.${String(value)}`} id={`permissions.${subject}.${rootIndex}.${String(value)}`}
@@ -76,7 +80,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
}); });
// scott: this is a hacky work-around to resolve bug of fields not updating UI when removed // scott: this is a hacky work-around to resolve bug of fields not updating UI when removed
const watchFields: any[] = useWatch({ const watchFields = useWatch<TFormSchema>({
control, control,
name: `permissions.${subject}` name: `permissions.${subject}`
}); });
@@ -85,7 +89,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
const [draggedItem, setDraggedItem] = useState<number | null>(null); const [draggedItem, setDraggedItem] = useState<number | null>(null);
const [dragOverItem, setDragOverItem] = useState<number | null>(null); const [dragOverItem, setDragOverItem] = useState<number | null>(null);
if (!watchFields?.length) return <div />; if (!watchFields || !Array.isArray(watchFields) || watchFields.length === 0) return <div />;
const handleDragStart = (_: React.DragEvent, index: number) => { const handleDragStart = (_: React.DragEvent, index: number) => {
setDraggedItem(index); setDraggedItem(index);