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

UI improvements

Browse Source
This commit is contained in:
Daniel Hougaard
2024-08-23 02:25:15 +04:00
parent 58549c398f
commit d8bbfacae0
1 changed files with 78 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx
+78 -51
View File
@@ -1,6 +1,9 @@
import { useMemo } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { faCheckCircle, faChevronDown } from "@fortawesome/free-solid-svg-icons"; import {
faCheckCircle,
faChevronDown,
faExclamationCircle
} 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 { z } from "zod"; import { z } from "zod";
@@ -17,7 +20,8 @@ import {
ModalContent, ModalContent,
Select, Select,
SelectItem, SelectItem,
TextArea TextArea,
Tooltip
} from "@app/components/v2"; } from "@app/components/v2";
import { useOrganization } from "@app/context"; import { useOrganization } from "@app/context";
import { import {
@@ -66,6 +70,7 @@ export const AddOrgMemberModal = ({
const { data: organizationRoles } = useGetOrgRoles(currentOrg?.id ?? ""); const { data: organizationRoles } = useGetOrgRoles(currentOrg?.id ?? "");
const { data: serverDetails } = useFetchServerStatus(); const { data: serverDetails } = useFetchServerStatus();
const { mutateAsync: addUsersMutateAsync } = useAddUsersToOrg(); const { mutateAsync: addUsersMutateAsync } = useAddUsersToOrg();
const { data: projects } = useGetUserWorkspaces(true);
const { const {
control, control,
@@ -75,6 +80,8 @@ export const AddOrgMemberModal = ({
formState: { isSubmitting } formState: { isSubmitting }
} = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) }); } = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
const selectedProjectIds = watch("projectIds", []);
const onAddMembers = async ({ const onAddMembers = async ({
emails, emails,
organizationRoleSlug, organizationRoleSlug,
@@ -83,6 +90,21 @@ export const AddOrgMemberModal = ({
}: TAddMemberForm) => { }: TAddMemberForm) => {
if (!currentOrg?.id) return; if (!currentOrg?.id) return;
const selectedProjects = projects?.filter((project) => projectIds.includes(String(project.id)));
if (selectedProjects?.length) {
// eslint-disable-next-line no-restricted-syntax
for (const project of selectedProjects) {
if (project.version !== ProjectVersion.V3) {
createNotification({
type: "error",
text: `Cannot add users to project "${project.name}" because it's incompatible. Please upgrade the project.`
});
return;
}
}
}
try { try {
const parsedEmails = emails const parsedEmails = emails
.replace(/\s/g, "") .replace(/\s/g, "")
@@ -137,14 +159,6 @@ export const AddOrgMemberModal = ({
reset(); reset();
}; };
const projectIds = watch("projectIds", []);
const { data: projects } = useGetUserWorkspaces(true);
const filteredProjects = useMemo(
() => projects?.filter((project) => project.version === ProjectVersion.V3),
[projects]
);
return ( return (
<Modal <Modal
isOpen={popUp?.addMember?.isOpen} isOpen={popUp?.addMember?.isOpen}
@@ -171,7 +185,7 @@ export const AddOrgMemberModal = ({
control={control} control={control}
name="emails" name="emails"
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl label="Email" isError={Boolean(error)} errorText={error?.message}> <FormControl label="Emails" isError={Boolean(error)} errorText={error?.message}>
<TextArea <TextArea
{...field} {...field}
className="mt-1 h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 py-1 px-2 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 transition-all placeholder:text-bunker-400 focus:ring-2" className="mt-1 h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 py-1 px-2 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 transition-all placeholder:text-bunker-400 focus:ring-2"
@@ -181,34 +195,33 @@ export const AddOrgMemberModal = ({
)} )}
/> />
<div> <Controller
<Controller control={control}
control={control} name="organizationRoleSlug"
name="organizationRoleSlug" render={({ field, fieldState: { error } }) => (
render={({ field, fieldState: { error } }) => ( <FormControl
<FormControl tooltipText="Select which organization role you want to assign to the user."
tooltipText="Select which organization role you want to assign to the user." label="Assign organization role"
label="Assign organization role" isError={Boolean(error)}
isError={Boolean(error)} errorText={error?.message}
errorText={error?.message} >
> <div>
<div> <Select
<Select className="w-full"
defaultValue={DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG} defaultValue={DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG}
{...field} {...field}
onValueChange={(val) => field.onChange(val)} onValueChange={(val) => field.onChange(val)}
> >
{organizationRoles?.map((role) => ( {organizationRoles?.map((role) => (
<SelectItem key={role.id} value={role.slug}> <SelectItem key={role.id} value={role.slug}>
{role.name} {role.name}
</SelectItem> </SelectItem>
))} ))}
</Select> </Select>
</div> </div>
</FormControl> </FormControl>
)} )}
/> />
</div>
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<div className="w-full"> <div className="w-full">
@@ -217,7 +230,7 @@ export const AddOrgMemberModal = ({
name="projectIds" name="projectIds"
render={({ field, fieldState: { error } }) => ( render={({ field, fieldState: { error } }) => (
<FormControl <FormControl
label="Add user to projects" label="Assign users to projects (optional)"
isError={Boolean(error?.message)} isError={Boolean(error?.message)}
errorText={error?.message} errorText={error?.message}
> >
@@ -225,10 +238,14 @@ export const AddOrgMemberModal = ({
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
{filteredProjects && filteredProjects.length > 0 ? ( {filteredProjects && filteredProjects.length > 0 ? (
<div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200"> <div className="inline-flex w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none data-[placeholder]:text-mineshaft-200">
{projectIds.length === 1 {/* eslint-disable-next-line no-nested-ternary */}
? filteredProjects.find((project) => project.id === projectIds[0]) {selectedProjectIds.length === 1
?.name ? filteredProjects.find(
: `${projectIds.length} projects selected`} (project) => project.id === selectedProjectIds[0]
)?.name
: selectedProjectIds.length === 0
? "No projects selected"
: `${selectedProjectIds.length} projects selected`}
<FontAwesomeIcon icon={faChevronDown} className="text-xs" /> <FontAwesomeIcon icon={faChevronDown} className="text-xs" />
</div> </div>
) : ( ) : (
@@ -243,7 +260,7 @@ export const AddOrgMemberModal = ({
> >
{filteredProjects && filteredProjects.length > 0 ? ( {filteredProjects && filteredProjects.length > 0 ? (
filteredProjects.map((project) => { filteredProjects.map((project) => {
const isSelected = projectIds.includes(String(project.id)); const isSelected = selectedProjectIds.includes(String(project.id));
return ( return (
<DropdownMenuItem <DropdownMenuItem
@@ -251,14 +268,14 @@ export const AddOrgMemberModal = ({
filteredProjects.length > 0 && event.preventDefault() filteredProjects.length > 0 && event.preventDefault()
} }
onClick={() => { onClick={() => {
if (projectIds.includes(String(project.id))) { if (selectedProjectIds.includes(String(project.id))) {
field.onChange( field.onChange(
projectIds.filter( selectedProjectIds.filter(
(projectId: string) => projectId !== String(project.id) (projectId: string) => projectId !== String(project.id)
) )
); );
} else { } else {
field.onChange([...projectIds, String(project.id)]); field.onChange([...selectedProjectIds, String(project.id)]);
} }
}} }}
key={`project-id-${project.id}`} key={`project-id-${project.id}`}
@@ -275,7 +292,17 @@ export const AddOrgMemberModal = ({
iconPos="left" iconPos="left"
className="w-[28.4rem] text-sm" className="w-[28.4rem] text-sm"
> >
{project.name} <div className="flex items-center gap-2 capitalize">
{project.name}
{project.version !== ProjectVersion.V3 && (
<Tooltip content="Project is not compatible with this action, please upgrade this project.">
<FontAwesomeIcon
icon={faExclamationCircle}
className="text-xs opacity-50"
/>
</Tooltip>
)}
</div>
</DropdownMenuItem> </DropdownMenuItem>
); );
}) })
@@ -301,7 +328,7 @@ export const AddOrgMemberModal = ({
> >
<div> <div>
<Select <Select
isDisabled={projectIds.length === 0} isDisabled={selectedProjectIds.length === 0}
defaultValue={DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG} defaultValue={DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG}
{...field} {...field}
onValueChange={(val) => field.onChange(val)} onValueChange={(val) => field.onChange(val)}