Restructure MIs to more generic Identity

This commit is contained in:
Tuan Dang
2023-12-09 22:18:38 +07:00
parent 89d0c0e3c3
commit 50ef23e8a0
102 changed files with 3652 additions and 2981 deletions
@@ -50,11 +50,11 @@ export const LogsFilter = ({ control, reset }: Props) => {
{actor.metadata.name}
</SelectItem>
);
case ActorType.MACHINE:
case ActorType.IDENTITY:
return (
<SelectItem
value={`${actor.type}-${actor.metadata.machineId}`}
key={`machine-filter-${actor.metadata.machineId}`}
value={`${actor.type}-${actor.metadata.identityId}`}
key={`identity-filter-${actor.metadata.identityId}`}
>
{actor.metadata.name}
</SelectItem>
@@ -29,11 +29,11 @@ export const LogsTableRow = ({
<p>Service token</p>
</Td>
);
case ActorType.MACHINE:
case ActorType.IDENTITY:
return (
<Td>
<p>{`${actor.metadata.name}`}</p>
<p>Machine identity</p>
<p>Machine Identity</p>
</Td>
);
default:
@@ -167,22 +167,24 @@ export const LogsTableRow = ({
<p>{`Name: ${event.metadata.name}`}</p>
</Td>
);
case EventType.CREATE_MACHINE_IDENTITY:
case EventType.CREATE_IDENTITY:
return (
<Td>
<p>{`ID: ${event.metadata.identityId}`}</p>
<p>{`Name: ${event.metadata.name}`}</p>
</Td>
);
case EventType.UPDATE_MACHINE_IDENTITY:
case EventType.UPDATE_IDENTITY:
return (
<Td>
<p>{`ID: ${event.metadata.identityId}`}</p>
<p>{`Name: ${event.metadata.name}`}</p>
</Td>
);
case EventType.DELETE_MACHINE_IDENTITY:
case EventType.DELETE_IDENTITY:
return (
<Td>
<p>{`Name: ${event.metadata.name}`}</p>
<p>{`ID: ${event.metadata.identityId}`}</p>
</Td>
);
case EventType.CREATE_ENVIRONMENT:
@@ -6,7 +6,7 @@ import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import {
MachineIdentityTab,
IdentityTab,
MemberListTab,
ProjectRoleListTab,
ServiceTokenTab
@@ -15,7 +15,7 @@ import {
enum TabSections {
Member = "members",
Roles = "roles",
MachineIdentities = "machine-identities",
Identities = "identities",
ServiceTokens = "service-tokens"
}
@@ -30,7 +30,7 @@ export const MembersPage = withProjectPermission(
<Tabs defaultValue={TabSections.Member}>
<TabList>
<Tab value={TabSections.Member}>People</Tab>
<Tab value={TabSections.MachineIdentities}>
<Tab value={TabSections.Identities}>
<div className="flex items-center">
<p>Machine Identities</p>
<div className="ml-2 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
@@ -52,8 +52,8 @@ export const MembersPage = withProjectPermission(
<MemberListTab />
</motion.div>
</TabPanel>
<TabPanel value={TabSections.MachineIdentities}>
<MachineIdentityTab />
<TabPanel value={TabSections.Identities}>
<IdentityTab />
</TabPanel>
<TabPanel value={TabSections.ServiceTokens}>
<ServiceTokenTab />
@@ -1,19 +1,19 @@
import { motion } from "framer-motion";
import {
MachineIdentitySection
IdentitySection,
} from "./components";
export const MachineIdentityTab = () => {
export const IdentityTab = () => {
return (
<motion.div
key="panel-machine-identity"
key="panel-identity"
transition={{ duration: 0.15 }}
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
>
<MachineIdentitySection />
<IdentitySection />
</motion.div>
);
}
@@ -18,26 +18,26 @@ import {
useWorkspace
} from "@app/context";
import {
useAddMachineToWorkspace,
useGetMachineMembershipOrgs,
useAddIdentityToWorkspace,
useGetIdentityMembershipOrgs,
useGetRoles,
useGetWorkspaceMachineMemberships
useGetWorkspaceIdentityMemberships
} from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
const schema = yup.object({
machineId: yup.string().required("Machine identity id is required"),
identityId: yup.string().required("Identity id is required"),
role: yup.string()
}).required();
export type FormData = yup.InferType<typeof schema>;
type Props = {
popUp: UsePopUpState<["machineIdentity"]>;
handlePopUpToggle: (popUpName: keyof UsePopUpState<["machineIdentity"]>, state?: boolean) => void;
popUp: UsePopUpState<["identity"]>;
handlePopUpToggle: (popUpName: keyof UsePopUpState<["identity"]>, state?: boolean) => void;
};
export const AddMachineIdentityModal = ({
export const IdentityModal = ({
popUp,
handlePopUpToggle
}: Props) => {
@@ -48,28 +48,28 @@ export const AddMachineIdentityModal = ({
const orgId = currentOrg?._id || "";
const workspaceId = currentWorkspace?._id || "";
const { data: machineMembershipOrgs } = useGetMachineMembershipOrgs(orgId);
const { data: machineMemberships } = useGetWorkspaceMachineMemberships(workspaceId);
const { data: identityMembershipOrgs } = useGetIdentityMembershipOrgs(orgId);
const { data: identityMemberships } = useGetWorkspaceIdentityMemberships(workspaceId);
const { data: roles } = useGetRoles({
orgId,
workspaceId
});
const { mutateAsync: addMachineToWorkspaceMutateAsync } = useAddMachineToWorkspace();
const { mutateAsync: addIdentityToWorkspaceMutateAsync } = useAddIdentityToWorkspace();
const filteredMachineMembershipOrgs = useMemo(() => {
const wsMachineIds = new Map();
const filteredIdentityMembershipOrgs = useMemo(() => {
const wsIdentityIds = new Map();
machineMemberships?.forEach((machineMembership) => {
wsMachineIds.set(machineMembership.machineIdentity._id, true);
identityMemberships?.forEach((identityMembership) => {
wsIdentityIds.set(identityMembership.identity._id, true);
});
return (machineMembershipOrgs || []).filter(
({ machineIdentity: mi }) => !wsMachineIds.has(mi._id)
return (identityMembershipOrgs || []).filter(
({ identity: i }) => !wsIdentityIds.has(i._id)
);
}, [machineMembershipOrgs, machineMemberships]);
}, [identityMembershipOrgs, identityMemberships]);
const {
control,
@@ -81,29 +81,29 @@ export const AddMachineIdentityModal = ({
});
const onFormSubmit = async ({
machineId,
identityId,
role
}: FormData) => {
try {
await addMachineToWorkspaceMutateAsync({
await addIdentityToWorkspaceMutateAsync({
workspaceId,
machineId,
identityId,
role: role || undefined
});
createNotification({
text: "Successfully added machine identity to project",
text: "Successfully added identity to project",
type: "success"
});
reset();
handlePopUpToggle("machineIdentity", false);
handlePopUpToggle("identity", false);
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message
?? "Failed to add machine identity to project";
?? "Failed to add identity to project";
createNotification({
text,
@@ -114,22 +114,22 @@ export const AddMachineIdentityModal = ({
return (
<Modal
isOpen={popUp?.machineIdentity?.isOpen}
isOpen={popUp?.identity?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("machineIdentity", isOpen);
handlePopUpToggle("identity", isOpen);
reset();
}}
>
<ModalContent title="Add Machine Identity to Project">
{filteredMachineMembershipOrgs.length ? (
<ModalContent title="Add Identity to Project">
{filteredIdentityMembershipOrgs.length ? (
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
name="machineId"
defaultValue={filteredMachineMembershipOrgs?.[0]?._id}
name="identityId"
defaultValue={filteredIdentityMembershipOrgs?.[0]?._id}
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Machine Identity"
label="Identity"
errorText={error?.message}
isError={Boolean(error)}
>
@@ -139,9 +139,9 @@ export const AddMachineIdentityModal = ({
onValueChange={(e) => onChange(e)}
className="w-full"
>
{filteredMachineMembershipOrgs.map(({ machineIdentity }) => (
<SelectItem value={machineIdentity._id} key={`org-service-${machineIdentity._id}`}>
{machineIdentity.name}
{filteredIdentityMembershipOrgs.map(({ identity }) => (
<SelectItem value={identity._id} key={`org-identity-${identity._id}`}>
{identity.name}
</SelectItem>
))}
</Select>
@@ -182,7 +182,7 @@ export const AddMachineIdentityModal = ({
isLoading={isSubmitting}
isDisabled={isSubmitting}
>
{popUp?.machineIdentity?.data ? "Update" : "Create"}
{popUp?.identity?.data ? "Update" : "Create"}
</Button>
<Button colorSchema="secondary" variant="plain">
Cancel
@@ -191,9 +191,9 @@ export const AddMachineIdentityModal = ({
</form>
) : (
<div className="flex flex-col space-y-4">
<div>All the machine identities in your organization are already added.</div>
<div>All identities in your organization are already added.</div>
<Link href={`/org/${currentWorkspace?.organization}/members`}>
<Button variant="outline_bg">Create a new/another machine identities</Button>
<Button variant="outline_bg">Create a new/another identities</Button>
</Link>
</div>
)}
@@ -12,47 +12,45 @@ import {
ProjectPermissionSub,
useWorkspace} from "@app/context";
import { withProjectPermission } from "@app/hoc";
import {
useDeleteMachineFromWorkspace
} from "@app/hooks/api";
import { useDeleteIdentityFromWorkspace } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
import { AddMachineIdentityModal } from "./AddMachineIdentityModal";
import { MachineIdentityTable } from "./MachineIdentityTable";
import { IdentityModal } from "./IdentityModal";
import { IdentityTable } from "./IdentityTable";
export const MachineIdentitySection = withProjectPermission(
export const IdentitySection = withProjectPermission(
() => {
const { createNotification } = useNotificationContext();
const { currentWorkspace } = useWorkspace();
const workspaceId = currentWorkspace?._id ?? "";
const { mutateAsync: deleteMutateAsync } = useDeleteMachineFromWorkspace();
const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"machineIdentity",
"deleteMachineIdentity",
"identity",
"deleteIdentity",
"upgradePlan"
] as const);
const onRemoveMachineIdentitySubmit = async (machineId: string) => {
const onRemoveIdentitySubmit = async (identityId: string) => {
try {
await deleteMutateAsync({
machineId,
workspaceId
identityId,
workspaceId
});
createNotification({
text: "Successfully removed machine identity from project",
text: "Successfully removed identity from project",
type: "success"
});
handlePopUpClose("deleteMachineIdentity");
handlePopUpClose("deleteIdentity");
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message ?? "Failed to remove machine identity from project"
const text = error?.response?.data?.message ?? "Failed to remove identity from project"
createNotification({
text,
@@ -65,18 +63,18 @@ export const MachineIdentitySection = withProjectPermission(
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between mb-8">
<p className="text-xl font-semibold text-mineshaft-100">
Machine Identities
Identities
</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.MachineIdentity}
a={ProjectPermissionSub.Identity}
>
{(isAllowed) => (
<Button
colorSchema="secondary"
type="submit"
leftIcon={<FontAwesomeIcon icon={faPlus} />}
onClick={() => handlePopUpOpen("machineIdentity")}
onClick={() => handlePopUpOpen("identity")}
isDisabled={!isAllowed}
>
Add identity
@@ -84,28 +82,28 @@ export const MachineIdentitySection = withProjectPermission(
)}
</ProjectPermissionCan>
</div>
<MachineIdentityTable
handlePopUpOpen={handlePopUpOpen}
/>
<AddMachineIdentityModal
popUp={popUp}
handlePopUpToggle={handlePopUpToggle}
/>
<IdentityTable
handlePopUpOpen={handlePopUpOpen}
/>
<IdentityModal
popUp={popUp}
handlePopUpToggle={handlePopUpToggle}
/>
<DeleteActionModal
isOpen={popUp.deleteMachineIdentity.isOpen}
isOpen={popUp.deleteIdentity.isOpen}
title={`Are you sure want to remove ${
(popUp?.deleteMachineIdentity?.data as { name: string })?.name || ""
(popUp?.deleteIdentity?.data as { name: string })?.name || ""
} from the project?`}
onChange={(isOpen) => handlePopUpToggle("deleteMachineIdentity", isOpen)}
onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
deleteKey="confirm"
onDeleteApproved={() =>
onRemoveMachineIdentitySubmit(
(popUp?.deleteMachineIdentity?.data as { machineId: string })?.machineId
onRemoveIdentitySubmit(
(popUp?.deleteIdentity?.data as { identityId: string })?.identityId
)
}
/>
</div>
);
},
{ action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.MachineIdentity }
{ action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Identity }
);
@@ -26,31 +26,21 @@ import {
} from "@app/context";
import {
useGetRoles,
useGetWorkspaceMachineMemberships,
useUpdateMachineWorkspaceRole
} from "@app/hooks/api";
import { MachineTrustedIp} from "@app/hooks/api/machineIdentities/types";
useGetWorkspaceIdentityMemberships,
useUpdateIdentityWorkspaceRole} from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
handlePopUpOpen: (
popUpName: keyof UsePopUpState<["deleteMachineIdentity", "machineIdentity"]>,
popUpName: keyof UsePopUpState<["deleteIdentity", "identity"]>,
data?: {
machineId?: string;
identityId?: string;
name?: string;
role?: string;
customRole?: {
name: string;
slug: string;
};
trustedIps?: MachineTrustedIp[];
accessTokenTTL?: number;
isRefreshTokenRotationEnabled?: boolean;
}
) => void;
};
export const MachineIdentityTable = ({
export const IdentityTable = ({
handlePopUpOpen
}: Props) => {
const { createNotification } = useNotificationContext();
@@ -58,39 +48,38 @@ export const MachineIdentityTable = ({
const { currentWorkspace } = useWorkspace();
const orgId = currentOrg?._id || "";
const workspaceId = currentWorkspace?._id || "";
const { data, isLoading } = useGetWorkspaceMachineMemberships(currentWorkspace?._id || "");
const { data, isLoading } = useGetWorkspaceIdentityMemberships(currentWorkspace?._id || "");
const { data: roles } = useGetRoles({
orgId,
workspaceId
});
const { mutateAsync: updateMutateAsync } = useUpdateMachineWorkspaceRole();
const { mutateAsync: updateMutateAsync } = useUpdateIdentityWorkspaceRole();
const handleChangeRole = async ({
machineId,
identityId,
role
}: {
machineId: string;
identityId: string;
role: string;
}) => {
try {
await updateMutateAsync({
machineId,
identityId,
workspaceId,
role
});
createNotification({
text: "Successfully updated machine identity role",
text: "Successfully updated identity role",
type: "success"
});
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message ?? "Failed to update machine identity role"
const text = error?.response?.data?.message ?? "Failed to update identity role"
createNotification({
text,
@@ -111,12 +100,12 @@ export const MachineIdentityTable = ({
</Tr>
</THead>
<TBody>
{isLoading && <TableSkeleton columns={7} innerKey="project-machine-identities" />}
{isLoading && <TableSkeleton columns={7} innerKey="project-identities" />}
{!isLoading &&
data &&
data.length > 0 &&
data.map(({
machineIdentity: {
identity: {
_id,
name
},
@@ -130,7 +119,7 @@ export const MachineIdentityTable = ({
<Td>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.MachineIdentity}
a={ProjectPermissionSub.Identity}
>
{(isAllowed) => {
return (
@@ -143,7 +132,7 @@ export const MachineIdentityTable = ({
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
handleChangeRole({
machineId: _id,
identityId: _id,
role: selectedRole
})
}
@@ -163,13 +152,13 @@ export const MachineIdentityTable = ({
<Td className="flex justify-end">
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
a={ProjectPermissionSub.MachineIdentity}
a={ProjectPermissionSub.Identity}
>
{(isAllowed) => (
<IconButton
onClick={() => {
handlePopUpOpen("deleteMachineIdentity", {
machineId: _id,
handlePopUpOpen("deleteIdentity", {
identityId: _id,
name
});
}}
@@ -191,7 +180,7 @@ export const MachineIdentityTable = ({
{!isLoading && data && data?.length === 0 && (
<Tr>
<Td colSpan={7}>
<EmptyState title="No machine identities have been added to this project" icon={faServer} />
<EmptyState title="No identities have been added to this project" icon={faServer} />
</Td>
</Tr>
)}
@@ -0,0 +1 @@
export { IdentitySection } from "./IdentitySection";
@@ -0,0 +1 @@
export { IdentitySection } from "./IdentitySection";
@@ -0,0 +1 @@
export { IdentityTab } from "./IdentityTab";
@@ -1 +0,0 @@
export { MachineIdentitySection } from "./MachineIdentitySection";
@@ -1 +0,0 @@
export { MachineIdentitySection } from "./MachineIdentitySection";
@@ -1 +0,0 @@
export { MachineIdentityTab } from "./MachineIdentityTab";
@@ -62,9 +62,9 @@ const SINGLE_PERMISSION_LIST = [
},
{
title: "Machine identity management",
subtitle: "Add, view, update and remove machine identities from the project",
subtitle: "Add, view, update and remove (machine) identities from the project",
icon: faServer,
formName: "machine-identity"
formName: "identity"
},
{
title: "Webhooks",
@@ -33,7 +33,7 @@ export const formSchema = z.object({
.object({
secrets: z.record(multiEnvPermissionSchema).optional(),
member: generalPermissionSchema,
"machine-identity": generalPermissionSchema,
"identity": generalPermissionSchema,
role: generalPermissionSchema,
integrations: generalPermissionSchema,
webhooks: generalPermissionSchema,
@@ -23,7 +23,7 @@ type Props = {
| "tags"
| "audit-logs"
| "ip-allowlist"
| "machine-identity"
| "identity"
| ProjectPermissionSub.SecretApproval;
isNonEditable?: boolean;
setValue: UseFormSetValue<TFormSchema>;
@@ -1,4 +1,4 @@
export { MachineIdentityTab } from "./MachineIdentityTab";
export { IdentityTab } from "./IdentityTab";
export { MemberListTab } from "./MemberListTab";
export { ProjectRoleListTab } from "./ProjectRoleListTab";
export { ServiceTokenTab } from "./ServiceTokenTab";