awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated layout and fixed item not getting removed

Browse Source
This commit is contained in:
=
2024-10-01 20:52:18 +05:30
parent 62d6e3763b
commit 0f74a1a011
3 changed files with 141 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx
View File

@@ -2,9 +2,10 @@ import { FormProvider, useForm } from "react-hook-form";
import { faCancel, faPlus, faSave } from "@fortawesome/free-solid-svg-icons"; import { faCancel, faPlus, faSave } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { Button, Modal, ModalContent, ModalTrigger, Spinner } from "@app/components/v2"; import { Button, IconButton, Modal, ModalContent, ModalTrigger, Tooltip } from "@app/components/v2";
import { ProjectPermissionSub, useWorkspace } from "@app/context"; import { ProjectPermissionSub, useWorkspace } from "@app/context";
import { usePopUp } from "@app/hooks"; import { usePopUp } from "@app/hooks";
import { useGetProjectRoleBySlug, useUpdateProjectRole } from "@app/hooks/api"; import { useGetProjectRoleBySlug, useUpdateProjectRole } from "@app/hooks/api";
@@ -78,67 +79,73 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
{isCustomRole && ( {isCustomRole && (
<> <>
<Button {isDirty && (
colorSchema="primary" <Button
type="submit" className="ml-4 text-mineshaft-300"
isDisabled={isSubmitting || !isDirty} variant="link"
isLoading={isSubmitting} isDisabled={isSubmitting}
leftIcon={<FontAwesomeIcon icon={faSave} />} isLoading={isSubmitting}
> onClick={() => reset()}
Save leftIcon={<FontAwesomeIcon icon={faCancel} />}
</Button> >
<Button Discard
className="ml-4 text-mineshaft-300" </Button>
variant="link" )}
isDisabled={isSubmitting || !isDirty} <div className="flex items-center">
isLoading={isSubmitting} <Button
onClick={() => reset()} variant="outline_bg"
leftIcon={<FontAwesomeIcon icon={faCancel} />} type="submit"
> className={twMerge("h-10 rounded-r-none", isDirty && "bg-primary text-black")}
Cancel isDisabled={isSubmitting || !isDirty}
</Button> isLoading={isSubmitting}
leftIcon={<FontAwesomeIcon icon={faSave} />}
>
Save
</Button>
<Modal
isOpen={popUp.createPolicy.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
>
<ModalTrigger asChild disabled={isDisabled}>
<IconButton
isDisabled={isDisabled}
ariaLabel="new-policy"
className="rounded-l-none bg-mineshaft-600 p-3"
variant="outline_bg"
>
<Tooltip content="New policy">
<FontAwesomeIcon icon={faPlus} />
</Tooltip>
</IconButton>
</ModalTrigger>
<ModalContent
title="New Policy"
subTitle="Policies grant additional permissions."
>
<NewPermissionRule onClose={() => handlePopUpToggle("createPolicy")} />
</ModalContent>
</Modal>
</div>
</> </>
)} )}
</div> </div>
</div> </div>
{isSubmitting ? ( <div className="py-4">
<div className="flex items-center justify-center space-x-4 pt-16"> {!isLoading && <PermissionEmptyState />}
<Spinner size="lg" /> {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
<p className="text-sm text-gray-400">Saving your policy.</p> <GeneralPermissionOptions
</div> subject={subject}
) : ( actions={PROJECT_PERMISSION_OBJECT[subject].actions}
<> title={PROJECT_PERMISSION_OBJECT[subject].title}
<div className="py-4"> key={`project-permission-${subject}`}
{!isLoading && <PermissionEmptyState />} isDisabled={isDisabled}
{(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
<GeneralPermissionOptions
subject={subject}
actions={PROJECT_PERMISSION_OBJECT[subject].actions}
title={PROJECT_PERMISSION_OBJECT[subject].title}
key={`project-permission-${subject}`}
isDisabled={isDisabled}
>
{subject === ProjectPermissionSub.Secrets ? (
<SecretPermissionConditions isDisabled={isDisabled} />
) : undefined}
</GeneralPermissionOptions>
))}
</div>
<Modal
isOpen={popUp.createPolicy.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
> >
<ModalTrigger asChild disabled={isDisabled}> {subject === ProjectPermissionSub.Secrets ? (
<Button isDisabled={isDisabled} leftIcon={<FontAwesomeIcon icon={faPlus} />}> <SecretPermissionConditions isDisabled={isDisabled} />
Add Policy ) : undefined}
</Button> </GeneralPermissionOptions>
</ModalTrigger> ))}
<ModalContent title="New Policy" subTitle="Policies grant additional permissions."> </div>
<NewPermissionRule onClose={() => handlePopUpToggle("createPolicy")} />
</ModalContent>
</Modal>
</>
)}
</FormProvider> </FormProvider>
</form> </form>
); );

165
frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/GeneralPermissionOptions.tsx
View File

@@ -2,7 +2,7 @@ import { cloneElement } from "react";
import { Controller, useFieldArray, useFormContext } from "react-hook-form"; import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import { faChevronDown, faChevronRight, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"; import { faChevronDown, faChevronRight, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AnimatePresence, motion } from "framer-motion"; import { twMerge } from "tailwind-merge";
import { Button, Checkbox, Tag } from "@app/components/v2"; import { Button, Checkbox, Tag } from "@app/components/v2";
import { ProjectPermissionSub } from "@app/context"; import { ProjectPermissionSub } from "@app/context";
@@ -59,94 +59,81 @@ export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema
</div> </div>
)} )}
</div> </div>
<AnimatePresence> {isOpen && (
{isOpen && ( <div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
<motion.div {items.fields.map((el, rootIndex) => (
key={`select-${subject}-type`} <div key={el.id} className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md">
transition={{ duration: 0.3 }} <div className="flex text-gray-300">
initial={{ opacity: 0, translateY: -10 }} <div className="w-1/4">Actions</div>
animate={{ opacity: 1, translateY: 0 }} <div className="flex flex-grow flex-wrap justify-start gap-8">
exit={{ opacity: 0, translateY: 10 }} {actions.map(({ label, value }) => {
className="flex flex-col space-y-4 bg-bunker-800 p-6" if (typeof value !== "string") return undefined;
> return (
<AnimatePresence> <Controller
{items.fields.map((el, rootIndex) => ( key={`${el.id}-${label}`}
<motion.div name={`permissions.${subject}.${rootIndex}.${value}` as any}
key={el.id} control={control}
transition={{ duration: 0.3 }} defaultValue={false}
initial={{ opacity: 0, translateY: -20 }} render={({ field }) => (
animate={{ opacity: 1, translateY: 0 }} <div className="flex items-center justify-center">
exit={{ opacity: 0, translateY: -20 }} <Checkbox
className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md" isDisabled={isDisabled}
> isChecked={Boolean(field.value)}
<div className="flex text-gray-300"> onCheckedChange={field.onChange}
<div className="w-1/4">Actions</div> id={`permissions.${subject}.${rootIndex}.${String(value)}`}
<div className="flex flex-grow flex-wrap justify-start gap-8"> >
{actions.map(({ label, value }) => { {label}
if (typeof value !== "string") return undefined; </Checkbox>
return ( </div>
<Controller )}
key={`${el.id}-${label}`} />
name={`permissions.${subject}.${rootIndex}.${value}` as any} );
control={control} })}
defaultValue={false} </div>
render={({ field }) => ( </div>
<div className="flex items-center justify-center"> {children &&
<Checkbox cloneElement(children, {
isDisabled={isDisabled} position: rootIndex
isChecked={Boolean(field.value)} })}
onCheckedChange={field.onChange} <div
id={`permissions.${subject}.${rootIndex}.${String(value)}`} className={twMerge(
> "mt-4 flex justify-start space-x-4",
{label} subject === ProjectPermissionSub.Secrets && "justify-end"
</Checkbox> )}
</div> >
)} {!isDisabled && subject === ProjectPermissionSub.Secrets && (
/> <Button
); leftIcon={<FontAwesomeIcon icon={faPlus} />}
})} variant="star"
</div> size="xs"
</div> className="mt-2"
{children && onClick={() => {
cloneElement(children, { items.insert(rootIndex, [
position: rootIndex { read: false, edit: false, create: false, delete: false } as any
})} ]);
<div className="mt-2 flex justify-end space-x-4"> }}
{!isDisabled && subject === ProjectPermissionSub.Secrets && ( isDisabled={isDisabled}
<Button >
leftIcon={<FontAwesomeIcon icon={faPlus} />} Add policy
variant="star" </Button>
size="xs" )}
className="mt-2" {!isDisabled && (
onClick={() => { <Button
items.insert(rootIndex, [ leftIcon={<FontAwesomeIcon icon={faTrash} />}
{ read: false, edit: false, create: false, delete: false } as any variant="outline_bg"
]); size="xs"
}} className="mt-2 hover:border-red"
isDisabled={isDisabled} onClick={() => items.remove(rootIndex)}
> isDisabled={isDisabled}
Add policy >
</Button> Remove policy
)} </Button>
{!isDisabled && ( )}{" "}
<Button </div>
leftIcon={<FontAwesomeIcon icon={faTrash} />} </div>
variant="outline_bg" ))}
size="xs" </div>
className="mt-2 hover:border-red" )}
onClick={() => items.remove(rootIndex)}
isDisabled={isDisabled}
>
Remove policy
</Button>
)}{" "}
</div>
</motion.div>
))}
</AnimatePresence>
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
}; };

8
frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/SecretPermissionConditions.tsx
View File

@@ -1,7 +1,6 @@
import { Controller, useFieldArray, useFormContext } from "react-hook-form"; import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import { faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons"; import { faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2"; import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
import { PermissionConditionOperators } from "@app/context/ProjectPermissionContext/types"; import { PermissionConditionOperators } from "@app/context/ProjectPermissionContext/types";
@@ -31,12 +30,7 @@ export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props)
}); });
return ( return (
<div <div className="mt-6 border-t border-t-gray-800 bg-mineshaft-800 pt-2">
className={twMerge(
"mt-6 bg-mineshaft-800",
items.fields.length && " border-t border-t-gray-800 pt-2"
)}
>
<div className="mt-2 flex flex-col space-y-2"> <div className="mt-2 flex flex-col space-y-2">
{items.fields.map((el, index) => { {items.fields.map((el, index) => {
const lhs = watch(`permissions.secrets.${position}.conditions.${index}.lhs`); const lhs = watch(`permissions.secrets.${position}.conditions.${index}.lhs`);