awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-19 10:36:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

update style

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2024-03-28 18:17:59 -07:00
parent e46256f45b
commit 31ad6b0c86
6 changed files with 128 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx
+2 -2
View File
@@ -472,8 +472,8 @@ export const MemberListTab = () => {
className="max-w-4xl"
title={`Manage Access for ${(popUp.updateRole.data as TWorkspaceUser)?.user?.email}`}
subTitle={`
Configure role-based access control by Infisical users a mix of one built-in role, multiple custom roles, and multiple specific privileges. A user will gain access to alll actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
`}
Configure role-based access control by assigning Infisical users a mix of roles and specific privileges. A user will gain access to all actions within the roles assigned to them, not just the actions those roles share in common. You must choose at least one permanent role.
`}
>
<MemberRoleForm
onOpenUpgradeModal={(description) => handlePopUpOpen("upgradePlan", { description })}
frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/MemberRbacSection.tsx
+35 -42
View File
@@ -1,8 +1,8 @@
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { faCaretDown, faClock, faClose } from "@fortawesome/free-solid-svg-icons";
import { faCaretDown, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { formatDistance } from "date-fns";
import { format } from "date-fns";
import ms from "ms";
import { twMerge } from "tailwind-merge";
import { z } from "zod";
@@ -21,8 +21,7 @@ import {
Select,
SelectItem,
Spinner,
Tag,
Tooltip
Tag
} from "@app/components/v2";
import {
ProjectPermissionActions,
@@ -171,7 +170,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
{...field}
isDisabled={isMemberEditDisabled}
onValueChange={(e) => onChange(e)}
className="w-full bg-mineshaft-600"
className="w-full bg-mineshaft-600 hover:bg-mineshaft-500 duration-200"
>
{projectRoles?.map(({ name, slug, id: projectRoleId }) => (
<SelectItem value={slug} key={projectRoleId}>
@@ -183,29 +182,24 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
/>
<Popover>
<PopoverTrigger disabled={isMemberEditDisabled}>
<Tooltip
asChild
content={isExpired ? "Timed access expired" : "Grant timed access"}
<Button
variant="outline_bg"
leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
isDisabled={isMemberEditDisabled}
className={twMerge(
"border-none bg-mineshaft-600 hover:bg-mineshaft-500 py-2.5 capitalize text-xs",
isTemporary && "text-primary",
isExpired && "text-red-600"
)}
>
<Button
variant="outline_bg"
leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
isDisabled={isMemberEditDisabled}
className={twMerge(
"border-none bg-mineshaft-600 py-2 capitalize",
isTemporary && "text-primary",
isExpired && "text-red-600"
)}
>
{!temporaryAccess?.isTemporary
? "Permanent"
: formatDistance(
new Date(temporaryAccess.temporaryAccessEndTime || ""),
new Date()
)}
</Button>
</Tooltip>
{!temporaryAccess?.isTemporary
? "Permanent"
: `Until ${format(
new Date(temporaryAccess.temporaryAccessEndTime || ""),
"yyyy-MM-dd HH:mm:ss"
)}`}
</Button>
</PopoverTrigger>
<PopoverContent
arrowClassName="fill-gray-600"
@@ -283,21 +277,19 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
</div>
</PopoverContent>
</Popover>
<Tooltip content={isMemberEditDisabled ? "Access restricted" : "Remove"}>
<IconButton
variant="outline_bg"
className="border-none bg-mineshaft-600 py-3"
ariaLabel="delete-role"
isDisabled={isMemberEditDisabled}
onClick={() => {
if (selectedRoleList.fields.length > 1) {
selectedRoleList.remove(index);
}
}}
>
<FontAwesomeIcon icon={faClose} />
</IconButton>
</Tooltip>
<IconButton
variant="outline_bg"
className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-3"
ariaLabel="delete-role"
isDisabled={isMemberEditDisabled}
onClick={() => {
if (selectedRoleList.fields.length > 1) {
selectedRoleList.remove(index);
}
}}
>
<FontAwesomeIcon icon={faTrash} />
</IconButton>
</div>
);
})}
@@ -308,6 +300,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
<Button
variant="outline_bg"
isDisabled={!isAllowed}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() =>
selectedRoleList.append({
slug: ProjectMembershipRole.Member,
frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoleForm/SpecificPrivilegeSection.tsx
+26 -26
View File
@@ -1,8 +1,8 @@
import { Controller, useForm } from "react-hook-form";
import { faCancel, faCaretDown, faClock, faClose, faSave } from "@fortawesome/free-solid-svg-icons";
import { faArrowRotateLeft, faCaretDown, faCheck, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { formatDistance } from "date-fns";
import { format } from "date-fns";
import ms from "ms";
import { twMerge } from "tailwind-merge";
import { z } from "zod";
@@ -164,7 +164,7 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
const getAccessLabel = () => {
if (isExpired) return "Access expired";
if (!temporaryAccessField?.isTemporary) return "Permanent";
return formatDistance(new Date(temporaryAccessField.temporaryAccessEndTime || ""), new Date());
return `Until ${format(new Date(temporaryAccessField.temporaryAccessEndTime || ""), "yyyy-MM-dd HH:mm:ss")}`;
};
return (
@@ -179,9 +179,8 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
<Select
{...field}
isDisabled={isMemberEditDisabled}
className="bg-mineshaft-600"
className="bg-mineshaft-600 hover:bg-mineshaft-500"
onValueChange={(e) => onChange(e)}
// className="w-full border border-mineshaft-500 bg-mineshaft-700 text-mineshaft-100"
>
{currentWorkspace?.environments?.map(({ slug, id }) => (
<SelectItem value={slug} key={id}>
@@ -280,7 +279,7 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
className={twMerge(
"border-none py-1.5 capitalize",
"border-none py-2.5 capitalize text-xs hover:bg-mineshaft-500",
isTemporary && "text-primary",
isExpired && "text-red-600"
)}
@@ -367,42 +366,42 @@ const SpecificPrivilegeSecretForm = ({ privilege }: { privilege: TProjectUserPri
</Popover>
{privilegeForm.formState.isDirty ? (
<>
<Tooltip content={isMemberEditDisabled ? "Access restricted" : "Save"}>
<Tooltip content="Cancel" className="mr-4">
<IconButton
variant="outline_bg"
className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-2.5"
ariaLabel="delete-privilege"
isDisabled={privilegeForm.formState.isSubmitting}
onClick={() => privilegeForm.reset()}
>
<FontAwesomeIcon icon={faArrowRotateLeft} className="py-0.5" />
</IconButton>
</Tooltip>
<Tooltip content={isMemberEditDisabled ? "Access restricted" : "Save"} className="mr-4">
<IconButton
isDisabled={isMemberEditDisabled}
className="border-none py-2.5"
className="border-none py-3"
ariaLabel="save-privilege"
type="submit"
>
{privilegeForm.formState.isSubmitting ? (
<Spinner size="xs" className="m-0 text-slate-500 w-3 h-3" />
) : (
<FontAwesomeIcon icon={faSave} />
<FontAwesomeIcon icon={faCheck} className="px-0.5"/>
)}
</IconButton>
</Tooltip>
<Tooltip content="Cancel">
<IconButton
variant="outline_bg"
className="border-none bg-mineshaft-600 py-2.5"
ariaLabel="delete-privilege"
isDisabled={privilegeForm.formState.isSubmitting}
onClick={() => privilegeForm.reset()}
>
<FontAwesomeIcon icon={faCancel} />
</IconButton>
</Tooltip>
</>
) : (
<Tooltip content={isMemberEditDisabled ? "Access restricted" : "Delete"}>
<Tooltip content={isMemberEditDisabled ? "Access restricted" : "Delete"} className="mr-4">
<IconButton
isDisabled={isMemberEditDisabled}
variant="outline_bg"
className="border-none bg-mineshaft-600 py-2.5"
className="border border-mineshaft-500 bg-mineshaft-600 hover:bg-red/20 hover:border-red/70 py-3"
ariaLabel="delete-privilege"
onClick={() => handlePopUpOpen("deletePrivilege")}
>
<FontAwesomeIcon icon={faClose} />
<FontAwesomeIcon icon={faTrash} />
</IconButton>
</Tooltip>
)}
@@ -459,13 +458,13 @@ export const SpecificPrivilegeSection = ({ membershipId }: Props) => {
};
return (
<div className="mt-6 border-t border-t-gray-700 pt-6">
<div className="mt-6 border-t border-t-mineshaft-600 pt-6">
<div className="flex items-center space-x-2 text-lg font-medium">
Additional Privileges
{isLoading && <Spinner size="xs" />}
</div>
<p className="text-sm text-mineshaft-400">
Select individual privileges to associate with the user
<p className="text-sm text-mineshaft-400 mt-0.5">
Select individual privileges to associate with the user.
</p>
<div>
{userPrivileges
@@ -484,6 +483,7 @@ export const SpecificPrivilegeSection = ({ membershipId }: Props) => {
<Button
variant="outline_bg"
className="mt-4"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={handleCreatePrivilege}
isLoading={createUserPrivilege.isLoading}
isDisabled={!isAllowed}