mirror of
https://github.com/Infisical/infisical.git
synced 2025-03-29 22:02:57 +00:00
feat: added missing remove identity, user handler, changed title to duration for access type
This commit is contained in:
@ -39,7 +39,8 @@ export const registerProjectMembershipRouter = async (server: FastifyZodProvider
|
||||
email: true,
|
||||
firstName: true,
|
||||
lastName: true,
|
||||
id: true
|
||||
id: true,
|
||||
username: true
|
||||
}).merge(UserEncryptionKeysSchema.pick({ publicKey: true })),
|
||||
roles: z.array(
|
||||
z.object({
|
||||
@ -98,7 +99,8 @@ export const registerProjectMembershipRouter = async (server: FastifyZodProvider
|
||||
email: true,
|
||||
firstName: true,
|
||||
lastName: true,
|
||||
id: true
|
||||
id: true,
|
||||
username: true
|
||||
}).merge(UserEncryptionKeysSchema.pick({ publicKey: true })),
|
||||
roles: z.array(
|
||||
z.object({
|
||||
|
@ -3,11 +3,16 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { format } from "date-fns";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import { Button, EmptyState, Spinner } from "@app/components/v2";
|
||||
import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
|
||||
import { withProjectPermission } from "@app/hoc";
|
||||
import { useGetWorkspaceIdentityMembershipDetails } from "@app/hooks/api";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import {
|
||||
useDeleteIdentityFromWorkspace,
|
||||
useGetWorkspaceIdentityMembershipDetails
|
||||
} from "@app/hooks/api";
|
||||
|
||||
import { IdentityProjectAdditionalPrivilegeSection } from "./components/IdentityProjectAdditionalPrivilegeSection";
|
||||
import { IdentityRoleDetailsSection } from "./components/IdentityRoleDetailsSection";
|
||||
@ -23,6 +28,38 @@ export const IdentityDetailsPage = withProjectPermission(
|
||||
const { data: identityMembershipDetails, isLoading: isMembershipDetailsLoading } =
|
||||
useGetWorkspaceIdentityMembershipDetails(workspaceId, identityId);
|
||||
|
||||
const { mutateAsync: deleteMutateAsync, isLoading: isDeletingIdentity } =
|
||||
useDeleteIdentityFromWorkspace();
|
||||
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
||||
"deleteIdentity",
|
||||
"upgradePlan"
|
||||
] as const);
|
||||
|
||||
const onRemoveIdentitySubmit = async () => {
|
||||
try {
|
||||
await deleteMutateAsync({
|
||||
identityId,
|
||||
workspaceId
|
||||
});
|
||||
createNotification({
|
||||
text: "Successfully removed identity from project",
|
||||
type: "success"
|
||||
});
|
||||
handlePopUpClose("deleteIdentity");
|
||||
router.push(`/project/${workspaceId}/members?selectedTab=identities`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
const error = err as any;
|
||||
const text = error?.response?.data?.message ?? "Failed to remove identity from project";
|
||||
|
||||
createNotification({
|
||||
text,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isMembershipDetailsLoading) {
|
||||
return (
|
||||
<div className="flex w-full items-center justify-center p-24">
|
||||
@ -67,6 +104,8 @@ export const IdentityDetailsPage = withProjectPermission(
|
||||
variant="outline_bg"
|
||||
size="xs"
|
||||
isDisabled={!isAllowed}
|
||||
isLoading={isDeletingIdentity}
|
||||
onClick={() => handlePopUpOpen("deleteIdentity")}
|
||||
>
|
||||
Remove Identity
|
||||
</Button>
|
||||
@ -98,6 +137,13 @@ export const IdentityDetailsPage = withProjectPermission(
|
||||
<IdentityProjectAdditionalPrivilegeSection
|
||||
identityMembershipDetails={identityMembershipDetails}
|
||||
/>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.deleteIdentity.isOpen}
|
||||
title={`Are you sure want to remove ${identityMembershipDetails?.identity?.name} from the project?`}
|
||||
onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
|
||||
deleteKey="remove"
|
||||
onDeleteApproved={() => onRemoveIdentitySubmit()}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<EmptyState title="Error: Unable to find the identity." className="py-12" />
|
||||
|
@ -274,7 +274,7 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
|
||||
<Popover>
|
||||
<PopoverTrigger disabled={isIdentityEditDisabled} asChild>
|
||||
<div className="w-full max-w-md flex-grow">
|
||||
<FormLabel label="Access Type" />
|
||||
<FormLabel label="Duration" />
|
||||
<Tooltip content={toolTipText}>
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
|
@ -128,7 +128,7 @@ export const IdentityProjectAdditionalPrivilegeSection = ({ identityMembershipDe
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Name</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Duration</Th>
|
||||
<Th className="w-5" />
|
||||
</Tr>
|
||||
</THead>
|
||||
|
@ -95,7 +95,7 @@ export const IdentityRoleDetailsSection = ({
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Role</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Duration</Th>
|
||||
<Th className="w-5" />
|
||||
</Tr>
|
||||
</THead>
|
||||
|
@ -3,11 +3,24 @@ import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { format } from "date-fns";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import { Button, EmptyState, Spinner } from "@app/components/v2";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
|
||||
import {
|
||||
Button,
|
||||
DeleteActionModal,
|
||||
EmptyState,
|
||||
Spinner,
|
||||
UpgradePlanModal
|
||||
} from "@app/components/v2";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub,
|
||||
useOrganization,
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { withProjectPermission } from "@app/hoc";
|
||||
import { useGetWorkspaceUserDetails } from "@app/hooks/api";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import { useDeleteUserFromWorkspace, useGetWorkspaceUserDetails } from "@app/hooks/api";
|
||||
|
||||
import { MemberProjectAdditionalPrivilegeSection } from "./components/MemberProjectAdditionalPrivilegeSection";
|
||||
import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection";
|
||||
@ -15,6 +28,7 @@ import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection"
|
||||
export const MemberDetailsPage = withProjectPermission(
|
||||
() => {
|
||||
const router = useRouter();
|
||||
const { currentOrg } = useOrganization();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
|
||||
const workspaceId = currentWorkspace?.id || "";
|
||||
@ -23,6 +37,38 @@ export const MemberDetailsPage = withProjectPermission(
|
||||
const { data: membershipDetails, isLoading: isMembershipDetailsLoading } =
|
||||
useGetWorkspaceUserDetails(workspaceId, membershipId);
|
||||
|
||||
const { mutateAsync: removeUserFromWorkspace, isLoading: isRemovingUserFromWorkspace } =
|
||||
useDeleteUserFromWorkspace();
|
||||
|
||||
const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
|
||||
"removeMember",
|
||||
"upgradePlan"
|
||||
] as const);
|
||||
|
||||
const handleRemoveUser = async () => {
|
||||
if (!currentOrg?.id || !currentWorkspace?.id || !membershipDetails?.user?.username) return;
|
||||
|
||||
try {
|
||||
await removeUserFromWorkspace({
|
||||
workspaceId: currentWorkspace.id,
|
||||
usernames: [membershipDetails?.user?.username],
|
||||
orgId: currentOrg.id
|
||||
});
|
||||
createNotification({
|
||||
text: "Successfully removed user from project",
|
||||
type: "success"
|
||||
});
|
||||
router.push(`/project/${currentWorkspace?.id}/members`);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
createNotification({
|
||||
text: "Failed to remove user from the project",
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
handlePopUpClose("removeMember");
|
||||
};
|
||||
|
||||
if (isMembershipDetailsLoading) {
|
||||
return (
|
||||
<div className="flex w-full items-center justify-center p-24">
|
||||
@ -65,6 +111,8 @@ export const MemberDetailsPage = withProjectPermission(
|
||||
variant="outline_bg"
|
||||
size="xs"
|
||||
isDisabled={!isAllowed}
|
||||
isLoading={isRemovingUserFromWorkspace}
|
||||
onClick={() => handlePopUpOpen("removeMember")}
|
||||
>
|
||||
Remove User
|
||||
</Button>
|
||||
@ -100,8 +148,26 @@ export const MemberDetailsPage = withProjectPermission(
|
||||
<MemberRoleDetailsSection
|
||||
membershipDetails={membershipDetails}
|
||||
isMembershipDetailsLoading={isMembershipDetailsLoading}
|
||||
onOpenUpgradeModal={() =>
|
||||
handlePopUpOpen("upgradePlan", {
|
||||
description:
|
||||
"You can assign custom roles to members if you upgrade your Infisical plan."
|
||||
})
|
||||
}
|
||||
/>
|
||||
<MemberProjectAdditionalPrivilegeSection membershipDetails={membershipDetails} />
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.removeMember.isOpen}
|
||||
deleteKey="remove"
|
||||
title="Do you want to remove this user from the project?"
|
||||
onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
|
||||
onDeleteApproved={handleRemoveUser}
|
||||
/>
|
||||
<UpgradePlanModal
|
||||
isOpen={popUp.upgradePlan.isOpen}
|
||||
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
|
||||
text={(popUp.upgradePlan?.data as { description: string })?.description}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<EmptyState title="Error: Unable to find the user." className="py-12" />
|
||||
|
@ -137,7 +137,7 @@ export const MemberProjectAdditionalPrivilegeSection = ({ membershipDetails }: P
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Name</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Duration</Th>
|
||||
<Th className="w-5" />
|
||||
</Tr>
|
||||
</THead>
|
||||
|
@ -272,7 +272,7 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
|
||||
<Popover>
|
||||
<PopoverTrigger disabled={isMemberEditDisabled} asChild>
|
||||
<div className="w-full max-w-md flex-grow">
|
||||
<FormLabel label="Access Type" />
|
||||
<FormLabel label="Duration" />
|
||||
<Tooltip content={toolTipText}>
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
|
@ -39,11 +39,13 @@ import { MemberRoleModify } from "./MemberRoleModify";
|
||||
type Props = {
|
||||
membershipDetails: TWorkspaceUser;
|
||||
isMembershipDetailsLoading?: boolean;
|
||||
onOpenUpgradeModal: () => void;
|
||||
};
|
||||
|
||||
export const MemberRoleDetailsSection = ({
|
||||
membershipDetails,
|
||||
isMembershipDetailsLoading
|
||||
isMembershipDetailsLoading,
|
||||
onOpenUpgradeModal
|
||||
}: Props) => {
|
||||
const { user } = useUser();
|
||||
const userId = user?.id;
|
||||
@ -106,7 +108,7 @@ export const MemberRoleDetailsSection = ({
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Role</Th>
|
||||
<Th>Type</Th>
|
||||
<Th>Duration</Th>
|
||||
<Th className="w-5" />
|
||||
</Tr>
|
||||
</THead>
|
||||
@ -213,7 +215,7 @@ export const MemberRoleDetailsSection = ({
|
||||
title="Roles"
|
||||
subTitle="Select one or more of the pre-defined or custom roles to configure project permissions."
|
||||
>
|
||||
<MemberRoleModify projectMember={membershipDetails} onOpenUpgradeModal={() => {}} />
|
||||
<MemberRoleModify projectMember={membershipDetails} onOpenUpgradeModal={onOpenUpgradeModal} />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user