awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-03 15:26:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve: improve template form buttons

Browse Source
This commit is contained in:
Scott Wilson
2024-11-08 14:07:50 -08:00
parent 829ae7d3c0
commit d5f718c6ad
2 changed files with 46 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/EditProjectTemplate.tsx
+40 -63
View File
@@ -1,17 +1,9 @@
import { faEllipsis } from "@fortawesome/free-solid-svg-icons"; import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { OrgPermissionCan } from "@app/components/permissions"; import { OrgPermissionCan } from "@app/components/permissions";
import { import { Button, DeleteActionModal } from "@app/components/v2";
DeleteActionModal,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
IconButton
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context"; import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { usePopUp } from "@app/hooks"; import { usePopUp } from "@app/hooks";
import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates"; import { TProjectTemplate, useDeleteProjectTemplate } from "@app/hooks/api/projectTemplates";
@@ -58,63 +50,48 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
return ( return (
<> <>
<div className="mb-4 flex items-center justify-between border-b border-bunker-400"> <div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
<div className="mb-4 flex flex-col"> <div className=" flex flex-col">
<h3 className="text-xl font-semibold">{name}</h3> <h3 className="text-xl font-semibold">{name}</h3>
<h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2> <h2 className="text-sm text-mineshaft-400">{description || "Project Template"}</h2>
</div> </div>
{!isInfisicalTemplate && ( {!isInfisicalTemplate && (
<DropdownMenu> <div className="flex gap-2">
<DropdownMenuTrigger asChild> <OrgPermissionCan
<IconButton I={OrgPermissionActions.Edit}
colorSchema="secondary" a={OrgPermissionSubjects.ProjectTemplates}
variant="plain" >
size="lg" {(isAllowed) => (
ariaLabel="More options" <Button
className="mr-2" isDisabled={!isAllowed}
> leftIcon={<FontAwesomeIcon icon={faPencil} />}
<FontAwesomeIcon icon={faEllipsis} /> size="xs"
</IconButton> colorSchema="secondary"
</DropdownMenuTrigger> onClick={() => handlePopUpOpen("editDetails")}
<DropdownMenuContent align="end" className="p-1"> >
<OrgPermissionCan Edit Details
I={OrgPermissionActions.Edit} </Button>
a={OrgPermissionSubjects.ProjectTemplates} )}
> </OrgPermissionCan>
{(isAllowed) => ( <OrgPermissionCan
<DropdownMenuItem I={OrgPermissionActions.Delete}
className={twMerge( a={OrgPermissionSubjects.ProjectTemplates}
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50" >
)} {(isAllowed) => (
onClick={() => handlePopUpOpen("editDetails")} <Button
disabled={!isAllowed} isDisabled={!isAllowed}
> onClick={() => {
Edit Details handlePopUpOpen("removeTemplate");
</DropdownMenuItem> }}
)} leftIcon={<FontAwesomeIcon icon={faTrash} />}
</OrgPermissionCan> size="xs"
<OrgPermissionCan colorSchema="danger"
I={OrgPermissionActions.Delete} >
a={OrgPermissionSubjects.ProjectTemplates} Delete Template
> </Button>
{(isAllowed) => ( )}
<DropdownMenuItem </OrgPermissionCan>
className={twMerge( </div>
isAllowed
? "hover:!bg-red-500 hover:!text-white"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={() => {
handlePopUpOpen("removeTemplate");
}}
disabled={!isAllowed}
>
Delete Template
</DropdownMenuItem>
)}
</OrgPermissionCan>
</DropdownMenuContent>
</DropdownMenu>
)} )}
</div> </div>
<ProjectTemplateEnvironmentsForm <ProjectTemplateEnvironmentsForm
frontend/src/views/Settings/OrgSettingsPage/components/ProjectTemplatesTab/components/EditProjectTemplateSection/components/ProjectTemplateEnvironmentsForm.tsx
+6 -8
View File
@@ -138,21 +138,19 @@ export const ProjectTemplateEnvironmentsForm = ({
<OrgPermissionCan <OrgPermissionCan
I={OrgPermissionActions.Edit} I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.ProjectTemplates} a={OrgPermissionSubjects.ProjectTemplates}
renderTooltip
allowedLabel="Add Environment"
> >
{(isAllowed) => ( {(isAllowed) => (
<IconButton <Button
onClick={() => append({ name: "", slug: "" })} onClick={() => append({ name: "", slug: "" })}
colorSchema="primary" colorSchema="secondary"
className="ml-auto" className="ml-auto"
variant="outline_bg" variant="solid"
size="xs" size="xs"
ariaLabel="Add environment" leftIcon={<FontAwesomeIcon icon={faPlus} />}
isDisabled={!isAllowed} isDisabled={!isAllowed}
> >
<FontAwesomeIcon icon={faPlus} /> Add Environment
</IconButton> </Button>
)} )}
</OrgPermissionCan> </OrgPermissionCan>
</div> </div>