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

resolve merge conflict

Browse Source
This commit is contained in:
Scott Wilson
2024-09-12 08:03:10 -07:00
parent ce9b66ef14 5150c102e6
commit 4c65e9910a
64 changed files with 1157 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/signup/EnterEmailStep.tsx
+2 -1
View File
@@ -50,7 +50,8 @@ export default function EnterEmailStep({
// If everything is correct, go to the next step
if (!emailCheckBool) {
try {
await mutateAsync({ email });
await mutateAsync({ email: email.toLowerCase() });
setEmail(email.toLowerCase())
incrementStep();
} catch (e) {
if (axios.isAxiosError(e)) {
frontend/src/components/signup/TeamInviteStep.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ export default function TeamInviteStep(): JSX.Element {
placeholder="[email protected], [email protected]..."
/>
</div>
<div className="mx-auto mt-0 mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:min-w-[30rem] md:max-w-md">
<div className="mx-auto mt-2 flex w-full flex-row items-end justify-end text-sm md:mt-4 md:mb-2 md:min-w-[30rem] md:max-w-md">
<Button
onClick={() => {
if (serverDetails?.emailConfigured) {
frontend/src/hooks/api/apiKeys/queries.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { userKeys } from "../users/queries";
import { userKeys } from "../users";
import {
APIKeyDataV2,
CreateAPIKeyDataV2DTO,
frontend/src/hooks/api/auditLogs/queries.tsx
+15 -15
View File
@@ -4,28 +4,28 @@ import { apiRequest } from "@app/config/request";
import { Actor, AuditLog, AuditLogFilters } from "./types";
export const workspaceKeys = {
getAuditLogs: (workspaceId: string, filters: AuditLogFilters) =>
export const auditLogKeys = {
getAuditLogs: (workspaceId: string | null, filters: AuditLogFilters) =>
[{ workspaceId, filters }, "audit-logs"] as const,
getAuditLogActorFilterOpts: (workspaceId: string) =>
[{ workspaceId }, "audit-log-actor-filters"] as const
};
export const useGetAuditLogs = (workspaceId: string, filters: AuditLogFilters) => {
export const useGetAuditLogs = (filters: AuditLogFilters, workspaceId: string | null) => {
return useInfiniteQuery({
queryKey: workspaceKeys.getAuditLogs(workspaceId, filters),
queryKey: auditLogKeys.getAuditLogs(workspaceId, filters),
queryFn: async ({ pageParam }) => {
const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(
`/api/v1/workspace/${workspaceId}/audit-logs`,
{
params: {
...filters,
offset: pageParam,
startDate: filters?.startDate?.toISOString(),
endDate: filters?.endDate?.toISOString()
}
const auditLogEndpoint = workspaceId
? `/api/v1/workspace/${workspaceId}/audit-logs`
: "/api/v1/organization/audit-logs";
const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(auditLogEndpoint, {
params: {
...filters,
offset: pageParam,
startDate: filters?.startDate?.toISOString(),
endDate: filters?.endDate?.toISOString()
}
);
});
return data.auditLogs;
},
getNextPageParam: (lastPage, pages) =>
@@ -35,7 +35,7 @@ export const useGetAuditLogs = (workspaceId: string, filters: AuditLogFilters) =
export const useGetAuditLogActorFilterOpts = (workspaceId: string) => {
return useQuery({
queryKey: workspaceKeys.getAuditLogActorFilterOpts(workspaceId),
queryKey: auditLogKeys.getAuditLogActorFilterOpts(workspaceId),
queryFn: async () => {
const { data } = await apiRequest.get<{ actors: Actor[] }>(
`/api/v1/workspace/${workspaceId}/audit-logs/filters/actors`
frontend/src/hooks/api/auditLogs/types.tsx
+4
View File
@@ -851,6 +851,10 @@ export type AuditLog = {
userAgentType: UserAgentType;
createdAt: string;
updatedAt: string;
project: {
name: string;
slug: string;
};
};
export type AuditLogFilters = {
frontend/src/hooks/api/auth/queries.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { apiRequest } from "@app/config/request";
import { setAuthToken } from "@app/reactQuery";
import { organizationKeys } from "../organization/queries";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import {
ChangePasswordDTO,
CompleteAccountDTO,
frontend/src/hooks/api/ca/mutations.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import { caKeys } from "./queries";
import {
TCertificateAuthority,
frontend/src/hooks/api/certificateTemplates/mutations.tsx
+4 -2
View File
@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { caKeys } from "../ca/queries";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import { certTemplateKeys } from "./queries";
import {
TCertificateTemplate,
@@ -54,7 +54,9 @@ export const useDeleteCertTemplate = () => {
const queryClient = useQueryClient();
return useMutation<TCertificateTemplate, {}, TDeleteCertificateTemplateDTO>({
mutationFn: async (data) => {
const { data: certificateTemplate } = await apiRequest.delete<TCertificateTemplate>(`/api/v1/pki/certificate-templates/${data.id}`);
const { data: certificateTemplate } = await apiRequest.delete<TCertificateTemplate>(
`/api/v1/pki/certificate-templates/${data.id}`
);
return certificateTemplate;
},
onSuccess: ({ caId }, { projectId, id }) => {
frontend/src/hooks/api/certificates/mutations.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import { TCertificate, TDeleteCertDTO, TRevokeCertDTO } from "./types";
export const useDeleteCert = () => {
frontend/src/hooks/api/groups/mutations.tsx
+82 -106
View File
@@ -3,128 +3,104 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { organizationKeys } from "../organization/queries";
import { userKeys } from "../users/query-keys";
import { groupKeys } from "./queries";
import { TGroup } from "./types";
export const useCreateGroup = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
name,
slug,
role
}: {
name: string;
slug: string;
organizationId: string;
role?: string;
}) => {
const {
data: group
} = await apiRequest.post<TGroup>("/api/v1/groups", {
name,
slug,
role
});
return group;
},
onSuccess: (_, { organizationId }) => {
queryClient.invalidateQueries(organizationKeys.getOrgGroups(organizationId));
}
});
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
name,
slug,
role
}: {
name: string;
slug: string;
organizationId: string;
role?: string;
}) => {
const { data: group } = await apiRequest.post<TGroup>("/api/v1/groups", {
name,
slug,
role
});
return group;
},
onSuccess: (_, { organizationId }) => {
queryClient.invalidateQueries(organizationKeys.getOrgGroups(organizationId));
}
});
};
export const useUpdateGroup = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
currentSlug,
name,
slug,
role
}: {
currentSlug: string;
name?: string;
slug?: string;
role?: string;
}) => {
const {
data: group
} = await apiRequest.patch<TGroup>(`/api/v1/groups/${currentSlug}`, {
name,
slug,
role
});
return group;
},
onSuccess: ({ orgId }) => {
queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
}
});
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
currentSlug,
name,
slug,
role
}: {
currentSlug: string;
name?: string;
slug?: string;
role?: string;
}) => {
const { data: group } = await apiRequest.patch<TGroup>(`/api/v1/groups/${currentSlug}`, {
name,
slug,
role
});
return group;
},
onSuccess: ({ orgId }) => {
queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
}
});
};
export const useDeleteGroup = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
slug
}: {
slug: string;
}) => {
const {
data: group
} = await apiRequest.delete<TGroup>(`/api/v1/groups/${slug}`);
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ slug }: { slug: string }) => {
const { data: group } = await apiRequest.delete<TGroup>(`/api/v1/groups/${slug}`);
return group;
},
onSuccess: ({ orgId }) => {
queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
}
});
return group;
},
onSuccess: ({ orgId }) => {
queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
}
});
};
export const useAddUserToGroup = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
slug,
username
}: {
slug: string;
username: string;
}) => {
const {
data
} = await apiRequest.post<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ slug, username }: { slug: string; username: string }) => {
const { data } = await apiRequest.post<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
return data;
},
onSuccess: (_, { slug }) => {
queryClient.invalidateQueries(groupKeys.forGroupUserMemberships(slug));
}
});
return data;
},
onSuccess: (_, { slug }) => {
queryClient.invalidateQueries(groupKeys.forGroupUserMemberships(slug));
}
});
};
export const useRemoveUserFromGroup = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
slug,
username
}: {
slug: string;
username: string;
}) => {
const {
data
} = await apiRequest.delete<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ slug, username }: { slug: string; username: string }) => {
const { data } = await apiRequest.delete<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
return data;
},
onSuccess: (_, { slug }) => {
queryClient.invalidateQueries(groupKeys.forGroupUserMemberships(slug));
}
});
};
return data;
},
onSuccess: (_, { slug, username }) => {
queryClient.invalidateQueries(groupKeys.forGroupUserMemberships(slug));
queryClient.invalidateQueries(userKeys.listUserGroupMemberships(username));
}
});
};
frontend/src/hooks/api/groups/types.ts
+9 -2
View File
@@ -4,7 +4,7 @@ import { TOrgRole } from "../roles/types";
export type TGroupOrgMembership = TGroup & {
customRole?: TOrgRole;
}
};
export type TGroup = {
id: string;
@@ -33,4 +33,11 @@ export type TGroupMembership = {
}[];
createdAt: string;
updatedAt: string;
};
};
export type TGroupWithProjectMemberships = {
id: string;
name: string;
slug: string;
orgId: string;
};
frontend/src/hooks/api/integrationAuth/queries.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import {
App,
BitBucketWorkspace,
frontend/src/hooks/api/integrations/queries.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { createNotification } from "@app/components/notifications";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import { TCloudIntegration } from "./types";
export const integrationQueryKeys = {
frontend/src/hooks/api/pkiAlerts/mutations.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import { pkiAlertKeys } from "./queries";
import { TCreatePkiAlertDTO, TDeletePkiAlertDTO, TPkiAlert, TUpdatePkiAlertDTO } from "./types";
frontend/src/hooks/api/pkiCollections/mutations.tsx
+3 -2
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace";
import { pkiCollectionKeys } from "./queries";
import {
TAddItemToPkiCollectionDTO,
@@ -11,7 +11,8 @@ import {
TPkiCollection,
TPkiCollectionItem,
TRemoveItemFromPkiCollectionDTO,
TUpdatePkiCollectionTO} from "./types";
TUpdatePkiCollectionTO
} from "./types";
export const useCreatePkiCollection = () => {
const queryClient = useQueryClient();
frontend/src/hooks/api/users/index.tsx
+2
View File
@@ -21,6 +21,7 @@ export {
useGetOrgUsers,
useGetUser,
useGetUserAction,
useListUserGroupMemberships,
useLogoutUser,
useRegisterUserAction,
useRevokeMySessions,
@@ -28,3 +29,4 @@ export {
useUpdateOrgMembership,
useUpdateUserAuthMethods
} from "./queries";
export { userKeys } from "./query-keys";
frontend/src/hooks/api/users/mutation.tsx
+5 -4
View File
@@ -6,8 +6,8 @@ import {
} from "@app/components/utilities/cryptography/crypto";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { userKeys } from "./queries";
import { workspaceKeys } from "../workspace";
import { userKeys } from "./query-keys";
import { AddUserToWsDTOE2EE, AddUserToWsDTONonE2EE } from "./types";
export const useAddUserToWsE2EE = () => {
@@ -51,9 +51,10 @@ export const useAddUserToWsNonE2EE = () => {
const queryClient = useQueryClient();
return useMutation<{}, {}, AddUserToWsDTONonE2EE>({
mutationFn: async ({ projectId, usernames }) => {
mutationFn: async ({ projectId, usernames, roleSlugs }) => {
const { data } = await apiRequest.post(`/api/v2/workspace/${projectId}/memberships`, {
usernames
usernames,
roleSlugs
});
return data;
},
frontend/src/hooks/api/users/queries.tsx
+24 -23
View File
@@ -5,6 +5,9 @@ import { SessionStorageKeys } from "@app/const";
import { setAuthToken } from "@app/reactQuery";
import { APIKeyDataV2 } from "../apiKeys/types";
import { TGroupWithProjectMemberships } from "../groups/types";
import { workspaceKeys } from "../workspace";
import { userKeys } from "./query-keys";
import {
AddUserToOrgDTO,
APIKeyData,
@@ -20,28 +23,6 @@ import {
UserEnc
} from "./types";
export const userKeys = {
getUser: ["user"] as const,
getPrivateKey: ["user"] as const,
userAction: ["user-action"] as const,
userProjectFavorites: (orgId: string) => [{ orgId }, "user-project-favorites"] as const,
getOrgMembership: (orgId: string, orgMembershipId: string) =>
[{ orgId, orgMembershipId }, "org-membership"] as const,
allOrgMembershipProjectMemberships: (orgId: string) => [orgId, "all-user-memberships"] as const,
forOrgMembershipProjectMemberships: (orgId: string, orgMembershipId: string) =>
[...userKeys.allOrgMembershipProjectMemberships(orgId), { orgMembershipId }] as const,
getOrgMembershipProjectMemberships: (orgId: string, username: string) =>
[{ orgId, username }, "org-membership-project-memberships"] as const,
getOrgUsers: (orgId: string) => [{ orgId }, "user"],
myIp: ["ip"] as const,
myAPIKeys: ["api-keys"] as const,
myAPIKeysV2: ["api-keys-v2"] as const,
mySessions: ["sessions"] as const,
listUsers: ["user-list"] as const,
myOrganizationProjects: (orgId: string) => [{ orgId }, "organization-projects"] as const
};
export const fetchUserDetails = async () => {
const { data } = await apiRequest.get<{ user: User & UserEnc }>("/api/v1/user");
@@ -173,8 +154,15 @@ export const useAddUsersToOrg = () => {
mutationFn: (dto) => {
return apiRequest.post("/api/v1/invite-org/signup", dto);
},
onSuccess: (_, { organizationId }) => {
onSuccess: (_, { organizationId, projects }) => {
queryClient.invalidateQueries(userKeys.getOrgUsers(organizationId));
projects?.forEach((project) => {
if (project.slug) {
queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(project.slug));
}
queryClient.invalidateQueries(workspaceKeys.getWorkspaceUsers(project.id));
});
}
});
};
@@ -444,3 +432,16 @@ export const fetchMyPrivateKey = async () => {
return privateKey;
};
export const useListUserGroupMemberships = (username: string) => {
return useQuery({
queryKey: userKeys.listUserGroupMemberships(username),
queryFn: async () => {
const { data } = await apiRequest.get<TGroupWithProjectMemberships[]>(
`/api/v1/user/me/${username}/groups`
);
return data;
}
});
};
frontend/src/hooks/api/users/query-keys.tsx
+21
View File
@@ -0,0 +1,21 @@
export const userKeys = {
getUser: ["user"] as const,
getPrivateKey: ["user"] as const,
userAction: ["user-action"] as const,
userProjectFavorites: (orgId: string) => [{ orgId }, "user-project-favorites"] as const,
getOrgMembership: (orgId: string, orgMembershipId: string) =>
[{ orgId, orgMembershipId }, "org-membership"] as const,
allOrgMembershipProjectMemberships: (orgId: string) => [orgId, "all-user-memberships"] as const,
forOrgMembershipProjectMemberships: (orgId: string, orgMembershipId: string) =>
[...userKeys.allOrgMembershipProjectMemberships(orgId), { orgMembershipId }] as const,
getOrgMembershipProjectMemberships: (orgId: string, username: string) =>
[{ orgId, username }, "org-membership-project-memberships"] as const,
getOrgUsers: (orgId: string) => [{ orgId }, "user"],
myIp: ["ip"] as const,
myAPIKeys: ["api-keys"] as const,
myAPIKeysV2: ["api-keys-v2"] as const,
mySessions: ["sessions"] as const,
listUsers: ["user-list"] as const,
listUserGroupMemberships: (username: string) => [{ username }, "user-group-memberships"] as const,
myOrganizationProjects: (orgId: string) => [{ orgId }, "organization-projects"] as const
};
frontend/src/hooks/api/users/types.ts
+4 -1
View File
@@ -133,6 +133,7 @@ export type AddUserToWsDTOE2EE = {
export type AddUserToWsDTONonE2EE = {
projectId: string;
usernames: string[];
roleSlugs?: string[];
orgId: string;
};
@@ -150,9 +151,11 @@ export type DeletOrgMembershipDTO = {
export type AddUserToOrgDTO = {
inviteeEmails: string[];
projects?: { id: string; projectRoleSlug: string[] }[];
organizationRoleSlug: string;
organizationId: string;
// We need the slug in order to invalidate the groups query. `slug` is only used for invalidation purposes.
projects?: { id: string; slug?: string; projectRoleSlug: string[] }[];
};
export type CreateAPIKeyRes = {
frontend/src/hooks/api/workflowIntegrations/mutation.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "../workspace/queries";
import { workspaceKeys } from "../workspace/query-keys";
import { workflowIntegrationKeys } from "./queries";
import {
TDeleteSlackIntegrationDTO,
frontend/src/hooks/api/workspace/index.tsx
+1
View File
@@ -38,3 +38,4 @@ export {
useUpdateWsEnvironment,
useUpgradeProject
} from "./queries";
export { workspaceKeys } from "./query-keys";
frontend/src/hooks/api/workspace/mutations.tsx
+15 -3
View File
@@ -2,7 +2,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { workspaceKeys } from "./queries";
import { userKeys } from "../users/query-keys";
import { workspaceKeys } from "./query-keys";
import { TUpdateWorkspaceGroupRoleDTO } from "./types";
export const useAddGroupToWorkspace = () => {
@@ -51,14 +52,25 @@ export const useUpdateGroupWorkspaceRole = () => {
export const useDeleteGroupFromWorkspace = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ groupSlug, projectSlug }: { groupSlug: string; projectSlug: string }) => {
mutationFn: async ({
groupSlug,
projectSlug
}: {
groupSlug: string;
projectSlug: string;
username?: string;
}) => {
const {
data: { groupMembership }
} = await apiRequest.delete(`/api/v2/workspace/${projectSlug}/groups/${groupSlug}`);
return groupMembership;
},
onSuccess: (_, { projectSlug }) => {
onSuccess: (_, { projectSlug, username }) => {
queryClient.invalidateQueries(workspaceKeys.getWorkspaceGroupMemberships(projectSlug));
if (username) {
queryClient.invalidateQueries(userKeys.listUserGroupMemberships(username));
}
}
});
};
frontend/src/hooks/api/workspace/queries.tsx
+2 -50
View File
@@ -15,9 +15,10 @@ import { TIntegration } from "../integrations/types";
import { TPkiAlert } from "../pkiAlerts/types";
import { TPkiCollection } from "../pkiCollections/types";
import { EncryptedSecret } from "../secrets/types";
import { userKeys } from "../users/queries";
import { userKeys } from "../users/query-keys";
import { TWorkspaceUser } from "../users/types";
import { ProjectSlackConfig } from "../workflowIntegrations/types";
import { workspaceKeys } from "./query-keys";
import {
CreateEnvironmentDTO,
CreateWorkspaceDTO,
@@ -37,55 +38,6 @@ import {
Workspace
} from "./types";
export const workspaceKeys = {
getWorkspaceById: (workspaceId: string) => [{ workspaceId }, "workspace"] as const,
getWorkspaceSecrets: (workspaceId: string) => [{ workspaceId }, "workspace-secrets"] as const,
getWorkspaceIndexStatus: (workspaceId: string) =>
[{ workspaceId }, "workspace-index-status"] as const,
getProjectUpgradeStatus: (workspaceId: string) => [{ workspaceId }, "workspace-upgrade-status"],
getWorkspaceMemberships: (orgId: string) => [{ orgId }, "workspace-memberships"],
getWorkspaceAuthorization: (workspaceId: string) => [{ workspaceId }, "workspace-authorizations"],
getWorkspaceIntegrations: (workspaceId: string) => [{ workspaceId }, "workspace-integrations"],
getAllUserWorkspace: ["workspaces"] as const,
getWorkspaceAuditLogs: (workspaceId: string) =>
[{ workspaceId }, "workspace-audit-logs"] as const,
getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }, "workspace-users"] as const,
getWorkspaceIdentityMemberships: (workspaceId: string) =>
[{ workspaceId }, "workspace-identity-memberships"] as const,
// allows invalidation using above key without knowing params
getWorkspaceIdentityMembershipsWithParams: ({
workspaceId,
...params
}: TListProjectIdentitiesDTO) =>
[...workspaceKeys.getWorkspaceIdentityMemberships(workspaceId), params] as const,
getWorkspaceGroupMemberships: (workspaceId: string) =>
[{ workspaceId }, "workspace-groups"] as const,
getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>
[{ projectSlug }, "workspace-cas"] as const,
specificWorkspaceCas: ({ projectSlug, status }: { projectSlug: string; status?: CaStatus }) =>
[...workspaceKeys.getWorkspaceCas({ projectSlug }), { status }] as const,
allWorkspaceCertificates: () => ["workspace-certificates"] as const,
forWorkspaceCertificates: (slug: string) =>
[...workspaceKeys.allWorkspaceCertificates(), slug] as const,
specificWorkspaceCertificates: ({
slug,
offset,
limit
}: {
slug: string;
offset: number;
limit: number;
}) => [...workspaceKeys.forWorkspaceCertificates(slug), { offset, limit }] as const,
getWorkspacePkiAlerts: (workspaceId: string) =>
[{ workspaceId }, "workspace-pki-alerts"] as const,
getWorkspacePkiCollections: (workspaceId: string) =>
[{ workspaceId }, "workspace-pki-collections"] as const,
getWorkspaceCertificateTemplates: (workspaceId: string) =>
[{ workspaceId }, "workspace-certificate-templates"] as const,
getWorkspaceSlackConfig: (workspaceId: string) =>
[{ workspaceId }, "workspace-slack-config"] as const
};
const fetchWorkspaceById = async (workspaceId: string) => {
const { data } = await apiRequest.get<{ workspace: Workspace }>(
`/api/v1/workspace/${workspaceId}`
frontend/src/hooks/api/workspace/query-keys.tsx
+52
View File
@@ -0,0 +1,52 @@
import { TListProjectIdentitiesDTO } from "@app/hooks/api/workspace/types";
import type { CaStatus } from "../ca";
export const workspaceKeys = {
getWorkspaceById: (workspaceId: string) => [{ workspaceId }, "workspace"] as const,
getWorkspaceSecrets: (workspaceId: string) => [{ workspaceId }, "workspace-secrets"] as const,
getWorkspaceIndexStatus: (workspaceId: string) =>
[{ workspaceId }, "workspace-index-status"] as const,
getProjectUpgradeStatus: (workspaceId: string) => [{ workspaceId }, "workspace-upgrade-status"],
getWorkspaceMemberships: (orgId: string) => [{ orgId }, "workspace-memberships"],
getWorkspaceAuthorization: (workspaceId: string) => [{ workspaceId }, "workspace-authorizations"],
getWorkspaceIntegrations: (workspaceId: string) => [{ workspaceId }, "workspace-integrations"],
getAllUserWorkspace: ["workspaces"] as const,
getWorkspaceAuditLogs: (workspaceId: string) =>
[{ workspaceId }, "workspace-audit-logs"] as const,
getWorkspaceUsers: (workspaceId: string) => [{ workspaceId }, "workspace-users"] as const,
getWorkspaceIdentityMemberships: (workspaceId: string) =>
[{ workspaceId }, "workspace-identity-memberships"] as const,
// allows invalidation using above key without knowing params
getWorkspaceIdentityMembershipsWithParams: ({
workspaceId,
...params
}: TListProjectIdentitiesDTO) =>
[...workspaceKeys.getWorkspaceIdentityMemberships(workspaceId), params] as const,
getWorkspaceGroupMemberships: (workspaceId: string) =>
[{ workspaceId }, "workspace-groups"] as const,
getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>
[{ projectSlug }, "workspace-cas"] as const,
specificWorkspaceCas: ({ projectSlug, status }: { projectSlug: string; status?: CaStatus }) =>
[...workspaceKeys.getWorkspaceCas({ projectSlug }), { status }] as const,
allWorkspaceCertificates: () => ["workspace-certificates"] as const,
forWorkspaceCertificates: (slug: string) =>
[...workspaceKeys.allWorkspaceCertificates(), slug] as const,
specificWorkspaceCertificates: ({
slug,
offset,
limit
}: {
slug: string;
offset: number;
limit: number;
}) => [...workspaceKeys.forWorkspaceCertificates(slug), { offset, limit }] as const,
getWorkspacePkiAlerts: (workspaceId: string) =>
[{ workspaceId }, "workspace-pki-alerts"] as const,
getWorkspacePkiCollections: (workspaceId: string) =>
[{ workspaceId }, "workspace-pki-collections"] as const,
getWorkspaceCertificateTemplates: (workspaceId: string) =>
[{ workspaceId }, "workspace-certificate-templates"] as const,
getWorkspaceSlackConfig: (workspaceId: string) =>
[{ workspaceId }, "workspace-slack-config"] as const
};
frontend/src/views/Login/Login.utils.tsx
+6 -1
View File
@@ -3,7 +3,7 @@ import { NextRouter, useRouter } from "next/router";
import { useServerConfig } from "@app/context";
import { useSelectOrganization } from "@app/hooks/api";
import { fetchOrganizations } from "@app/hooks/api/organization/queries";
import { userKeys } from "@app/hooks/api/users/queries";
import { userKeys } from "@app/hooks/api/users";
import { queryClient } from "@app/reactQuery";
export const navigateUserToOrg = async (router: NextRouter, organizationId?: string) => {
@@ -43,6 +43,11 @@ export const useNavigateToSelectOrganization = () => {
await navigateUserToOrg(router, config.defaultAuthOrgId);
}
const localOrgId = localStorage.getItem("orgData.id")
if(!cliCallbackPort && localOrgId != null){
await navigateUserToOrg(router, localOrgId);
}
queryClient.invalidateQueries(userKeys.getUser);
let redirectTo = "/login/select-organization";
frontend/src/views/Org/UserPage/UserPage.tsx
+11 -2
View File
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { useRouter } from "next/router";
import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { faChevronLeft, faEllipsis, faFolder, faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
@@ -31,6 +31,8 @@ import {
import { usePopUp } from "@app/hooks/usePopUp";
import { TabSections } from "@app/views/Org/Types";
import { UserAuditLogsSection } from "./components/UserProjectsSection/UserAuditLogsSection";
import { UserGroupsSection } from "./components/UserProjectsSection/UserGroupsSection";
import { UserDetailsSection, UserOrgMembershipModal, UserProjectsSection } from "./components";
export const UserPage = withPermission(
@@ -241,7 +243,13 @@ export const UserPage = withPermission(
<div className="mr-4 w-96">
<UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
</div>
<UserProjectsSection membershipId={membershipId} />
<div className="w-full space-y-2">
<div className="w-full space-y-4">
<UserProjectsSection membershipId={membershipId} />
<UserGroupsSection orgMembership={membership} />
<UserAuditLogsSection orgMembership={membership} />
</div>
</div>
</div>
</div>
)}
@@ -272,6 +280,7 @@ export const UserPage = withPermission(
}
buttonText="Deactivate"
/>
<UpgradePlanModal
isOpen={popUp.upgradePlan.isOpen}
onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
frontend/src/views/Org/UserPage/components/UserProjectsSection/UserAuditLogsSection.tsx
+84
View File
@@ -0,0 +1,84 @@
import { useState } from "react";
import Link from "next/link";
import { faFilter } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { EmptyState, IconButton, Tooltip } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
import { withPermission } from "@app/hoc";
import { OrgUser } from "@app/hooks/api/types";
import { LogsSection } from "@app/views/Project/AuditLogsPage/components";
type Props = {
orgMembership: OrgUser;
};
export const UserAuditLogsSection = withPermission(
({ orgMembership }: Props) => {
const [showFilter, setShowFilter] = useState(false);
const { subscription, isLoading } = useSubscription();
// eslint-disable-next-line no-nested-ternary
return subscription?.auditLogs ? (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<p className="text-lg font-semibold text-gray-200">Audit Logs</p>
<Tooltip content="Show audit log filters">
<IconButton
colorSchema="primary"
ariaLabel="copy icon"
variant="plain"
className="group relative"
onClick={() => setShowFilter(!showFilter)}
>
<div className="flex items-center space-x-2">
<p>Filter</p>
<FontAwesomeIcon icon={faFilter} />
</div>
</IconButton>
</Tooltip>
</div>
<LogsSection
showFilters={showFilter}
filterClassName="bg-mineshaft-900 static"
presetActor={orgMembership.user.id}
isOrgAuditLogs
/>
</div>
) : !isLoading ? (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<p className="text-lg font-semibold text-gray-200">Audit Logs</p>
</div>
<EmptyState
className="rounded-lg"
title={
<div>
<p>
Please{" "}
<Link
href={
subscription && subscription.slug !== null
? `/org/${orgMembership.organization}/billing`
: "https://infisical.com/scheduledemo"
}
passHref
>
<a
className="cursor-pointer font-medium text-primary-500 transition-all hover:text-primary-600"
target="_blank"
>
upgrade your subscription
</a>
</Link>{" "}
to view audit logs for this user
</p>
</div>
}
/>
</div>
) : null;
},
{ action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Member }
);
frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsRow.tsx
+45
View File
@@ -0,0 +1,45 @@
/* eslint-disable react/jsx-no-useless-fragment */
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconButton, Td, Tooltip, Tr } from "@app/components/v2";
import { TGroupWithProjectMemberships } from "@app/hooks/api/groups/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
type Props = {
group: TGroupWithProjectMemberships;
handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
};
export const UserGroupsRow = ({ group, handlePopUpOpen }: Props) => {
return (
<>
<Tr
className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`user-project-membership-${group.id}`}
>
<Td>{group.name}</Td>
<Td>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content="Unassign user from group">
<IconButton
colorSchema="danger"
ariaLabel="copy icon"
variant="plain"
className="group relative"
onClick={(e) => {
e.stopPropagation();
handlePopUpOpen("removeUserFromGroup", {
groupSlug: group.slug
});
}}
>
<FontAwesomeIcon icon={faTrash} />
</IconButton>
</Tooltip>
</div>
</Td>
</Tr>
</>
);
};
frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsSection.tsx
+68
View File
@@ -0,0 +1,68 @@
import { useCallback } from "react";
import { createNotification } from "@app/components/notifications";
import { DeleteActionModal } from "@app/components/v2";
import { useRemoveUserFromGroup } from "@app/hooks/api";
import { OrgUser } from "@app/hooks/api/users/types";
import { usePopUp } from "@app/hooks/usePopUp";
import { UserGroupsTable } from "./UserGroupsTable";
type Props = {
orgMembership: OrgUser;
};
export const UserGroupsSection = ({ orgMembership }: Props) => {
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
"removeUserFromGroup"
] as const);
const { mutateAsync: removeUserFromGroup } = useRemoveUserFromGroup();
const handleRemoveUserFromGroup = useCallback(async (groupSlug: string) => {
try {
await removeUserFromGroup({
slug: groupSlug,
username: orgMembership.user.username
});
createNotification({
type: "success",
text: "User removed from group successfully"
});
handlePopUpClose("removeUserFromGroup");
} catch (error) {
createNotification({
type: "error",
text: "Failed to remove user from group"
});
}
}, []);
return (
<>
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Groups</h3>
</div>
<UserGroupsTable orgMembership={orgMembership} handlePopUpOpen={handlePopUpOpen} />
</div>
<DeleteActionModal
isOpen={popUp.removeUserFromGroup.isOpen}
title="Are you sure want to unassign user from group?"
onChange={(isOpen) => handlePopUpToggle("removeUserFromGroup", isOpen)}
deleteKey="confirm"
onDeleteApproved={() => {
const popupData = popUp?.removeUserFromGroup?.data as {
groupSlug: string;
};
return handleRemoveUserFromGroup(popupData.groupSlug);
}}
/>
</>
);
};
frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx
+42
View File
@@ -0,0 +1,42 @@
import { faFolder } from "@fortawesome/free-solid-svg-icons";
import { EmptyState, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
import { OrgUser } from "@app/hooks/api/types";
import { useListUserGroupMemberships } from "@app/hooks/api/users/queries";
import { UsePopUpState } from "@app/hooks/usePopUp";
import { UserGroupsRow } from "./UserGroupsRow";
type Props = {
orgMembership: OrgUser;
handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void;
};
export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => {
const { data: groups, isLoading } = useListUserGroupMemberships(orgMembership.user.username);
return (
<TableContainer>
<Table>
<THead>
<Tr>
<Th>Name</Th>
<Th className="w-5" />
</Tr>
</THead>
<TBody>
{groups?.map((group) => (
<UserGroupsRow
key={`user-group-${group.id}`}
group={group}
handlePopUpOpen={handlePopUpOpen}
/>
))}
</TBody>
</Table>
{!isLoading && !groups?.length && (
<EmptyState title="This user has not been assigned to any groups" icon={faFolder} />
)}
</TableContainer>
);
};
frontend/src/views/Project/AuditLogsPage/AuditLogsPage.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const AuditLogsPage = withProjectPermission(
<p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
<div />
</div>
<LogsSection />
<LogsSection showFilters />
</div>
</div>
);
frontend/src/views/Project/AuditLogsPage/components/LogsFilter.tsx
+35 -33
View File
@@ -2,6 +2,7 @@ import { useState } from "react";
import { Control, Controller, UseFormReset } from "react-hook-form";
import { faFilterCircleXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { Button, DatePicker, FormControl, Select, SelectItem } from "@app/components/v2";
import { useWorkspace } from "@app/context";
@@ -19,11 +20,13 @@ const userAgentTypes = Object.entries(userAgentTTypeoNameMap).map(([value, label
}));
type Props = {
presetActor?: string;
className?: string;
control: Control<AuditLogFilterFormData>;
reset: UseFormReset<AuditLogFilterFormData>;
};
export const LogsFilter = ({ control, reset }: Props) => {
export const LogsFilter = ({ presetActor, className, control, reset }: Props) => {
const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
const [isEndDatePickerOpen, setIsEndDatePickerOpen] = useState(false);
@@ -69,8 +72,13 @@ export const LogsFilter = ({ control, reset }: Props) => {
};
return (
<div className="sticky top-20 z-10 flex items-center justify-between bg-bunker-800">
<div className="flex items-center">
<div
className={twMerge(
"sticky top-20 z-10 flex items-center justify-between bg-bunker-800",
className
)}
>
<div className="flex items-center space-x-2">
<Controller
control={control}
name="eventType"
@@ -79,7 +87,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
label="Event"
errorText={error?.message}
isError={Boolean(error)}
className="mr-4 w-40"
className="w-40"
>
<Select
{...(field.value ? { value: field.value } : { placeholder: "Select" })}
@@ -96,7 +104,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
</FormControl>
)}
/>
{!isLoading && data && data.length > 0 && (
{!isLoading && data && data.length > 0 && !presetActor && (
<Controller
control={control}
name="actor"
@@ -105,7 +113,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
label="Actor"
errorText={error?.message}
isError={Boolean(error)}
className="mr-4 w-40"
className="w-40"
>
<Select
{...(field.value ? { value: field.value } : { placeholder: "Select" })}
@@ -127,7 +135,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
label="Source"
errorText={error?.message}
isError={Boolean(error)}
className="mr-4 w-40"
className="w-40"
>
<Select
{...(field.value ? { value: field.value } : { placeholder: "Select" })}
@@ -149,12 +157,7 @@ export const LogsFilter = ({ control, reset }: Props) => {
control={control}
render={({ field: { onChange, ...field }, fieldState: { error } }) => {
return (
<FormControl
label="Start date"
errorText={error?.message}
isError={Boolean(error)}
className="mr-4"
>
<FormControl label="Start date" errorText={error?.message} isError={Boolean(error)}>
<DatePicker
value={field.value || undefined}
onChange={(date) => {
@@ -195,26 +198,25 @@ export const LogsFilter = ({ control, reset }: Props) => {
}}
/>
</div>
<div>
<Button
isLoading={false}
colorSchema="primary"
variant="outline_bg"
type="submit"
leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} className="mr-2" />}
onClick={() =>
reset({
eventType: undefined,
actor: undefined,
userAgentType: undefined,
startDate: undefined,
endDate: undefined
})
}
>
Clear filters
</Button>
</div>
<Button
isLoading={false}
colorSchema="primary"
variant="outline_bg"
className="mt-1.5"
type="submit"
leftIcon={<FontAwesomeIcon icon={faFilterCircleXmark} />}
onClick={() =>
reset({
eventType: undefined,
actor: presetActor,
userAgentType: undefined,
startDate: undefined,
endDate: undefined
})
}
>
Clear filters
</Button>
</div>
);
};
frontend/src/views/Project/AuditLogsPage/components/LogsSection.tsx
+24 -2
View File
@@ -12,7 +12,19 @@ import { LogsFilter } from "./LogsFilter";
import { LogsTable } from "./LogsTable";
import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";
export const LogsSection = () => {
type Props = {
presetActor?: string;
showFilters?: boolean;
filterClassName?: string;
isOrgAuditLogs?: boolean;
};
export const LogsSection = ({
presetActor,
filterClassName,
isOrgAuditLogs,
showFilters
}: Props) => {
const { subscription } = useSubscription();
const router = useRouter();
@@ -21,6 +33,7 @@ export const LogsSection = () => {
const { control, reset, watch } = useForm<AuditLogFilterFormData>({
resolver: yupResolver(auditLogFilterFormSchema),
defaultValues: {
actor: presetActor,
page: 1,
perPage: 10,
startDate: new Date(new Date().setDate(new Date().getDate() - 1)), // day before today
@@ -43,10 +56,19 @@ export const LogsSection = () => {
return (
<div>
<LogsFilter control={control} reset={reset} />
{showFilters && (
<LogsFilter
className={filterClassName}
presetActor={presetActor}
control={control}
reset={reset}
/>
)}
<LogsTable
isOrgAuditLogs={isOrgAuditLogs}
eventType={eventType}
userAgentType={userAgentType}
showActorColumn={!presetActor}
actor={actor}
startDate={startDate}
endDate={endDate}
frontend/src/views/Project/AuditLogsPage/components/LogsTable.tsx
+21 -5
View File
@@ -25,15 +25,24 @@ type Props = {
actor?: string;
startDate?: Date;
endDate?: Date;
isOrgAuditLogs?: boolean;
showActorColumn: boolean;
};
const AUDIT_LOG_LIMIT = 15;
export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate }: Props) => {
export const LogsTable = ({
eventType,
userAgentType,
showActorColumn,
actor,
startDate,
endDate,
isOrgAuditLogs
}: Props) => {
const { currentWorkspace } = useWorkspace();
const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useGetAuditLogs(
currentWorkspace?.id ?? "",
{
eventType,
userAgentType,
@@ -41,7 +50,8 @@ export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate
startDate,
endDate,
limit: AUDIT_LOG_LIMIT
}
},
!isOrgAuditLogs ? currentWorkspace?.id ?? "" : null
);
const isEmpty = !isLoading && !data?.pages?.[0].length;
@@ -54,7 +64,8 @@ export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate
<Tr>
<Th>Timestamp</Th>
<Th>Event</Th>
<Th>Actor</Th>
{isOrgAuditLogs && <Th>Project</Th>}
{showActorColumn && <Th>Actor</Th>}
<Th>Source</Th>
<Th>Metadata</Th>
</Tr>
@@ -64,7 +75,12 @@ export const LogsTable = ({ eventType, userAgentType, actor, startDate, endDate
data?.pages?.map((group, i) => (
<Fragment key={`auditlog-item-${i + 1}`}>
{group.map((auditLog) => (
<LogsTableRow auditLog={auditLog} key={`audit-log-${auditLog.id}`} />
<LogsTableRow
showActorColumn={showActorColumn}
isOrgAuditLogs={isOrgAuditLogs}
auditLog={auditLog}
key={`audit-log-${auditLog.id}`}
/>
))}
</Fragment>
))}
frontend/src/views/Project/AuditLogsPage/components/LogsTableRow.tsx
+5 -2
View File
@@ -5,9 +5,11 @@ import { Actor, AuditLog, Event } from "@app/hooks/api/auditLogs/types";
type Props = {
auditLog: AuditLog;
isOrgAuditLogs?: boolean;
showActorColumn: boolean;
};
export const LogsTableRow = ({ auditLog }: Props) => {
export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Props) => {
const renderActor = (actor: Actor) => {
switch (actor.type) {
case ActorType.USER:
@@ -486,7 +488,8 @@ export const LogsTableRow = ({ auditLog }: Props) => {
<Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
<Td>{formatDate(auditLog.createdAt)}</Td>
<Td>{`${eventToNameMap[auditLog.event.type]}`}</Td>
{renderActor(auditLog.actor)}
{isOrgAuditLogs && <Td>{auditLog.project.name}</Td>}
{showActorColumn && renderActor(auditLog.actor)}
<Td>
<p>{userAgentTTypeoNameMap[auditLog.userAgentType]}</p>
<p>{auditLog.ipAddress}</p>
frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx
+220 -54
View File
@@ -2,24 +2,37 @@ import { useMemo } from "react";
import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import Link from "next/link";
import { faCheckCircle, faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod";
import { twMerge } from "tailwind-merge";
import { z } from "zod";
import { createNotification } from "@app/components/notifications";
import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
FormControl,
Modal,
ModalContent
} from "@app/components/v2";
import { useOrganization, useWorkspace } from "@app/context";
import {
useAddUserToWsE2EE,
useAddUserToWsNonE2EE,
useAddUsersToOrg,
useGetOrgUsers,
useGetUserWsKey,
useGetProjectRoles,
useGetWorkspaceUsers
} from "@app/hooks/api";
import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
import { ProjectVersion } from "@app/hooks/api/workspace/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
const addMemberFormSchema = z.object({
orgMembershipId: z.string().trim()
orgMembershipIds: z.array(z.string().trim()).min(1),
projectRoleSlugs: z.array(z.string().trim().min(1)).min(1)
});
type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
@@ -37,48 +50,52 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
const orgId = currentOrg?.id || "";
const workspaceId = currentWorkspace?.id || "";
const { data: wsKey } = useGetUserWsKey(workspaceId);
const { data: members } = useGetWorkspaceUsers(workspaceId);
const { data: orgUsers } = useGetOrgUsers(orgId);
const { mutateAsync: addUserToWorkspace } = useAddUserToWsE2EE();
const { mutateAsync: addUserToWorkspaceNonE2EE } = useAddUserToWsNonE2EE();
const { data: roles } = useGetProjectRoles(currentWorkspace?.slug || "");
const {
control,
handleSubmit,
reset,
watch,
formState: { isSubmitting }
} = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
} = useForm<TAddMemberForm>({
resolver: zodResolver(addMemberFormSchema),
defaultValues: { orgMembershipIds: [], projectRoleSlugs: [ProjectMembershipRole.Member] }
});
const onAddMember = async ({ orgMembershipId }: TAddMemberForm) => {
const { mutateAsync: addMembersToProject } = useAddUsersToOrg();
const onAddMember = async ({ orgMembershipIds, projectRoleSlugs }: TAddMemberForm) => {
if (!currentWorkspace) return;
if (!currentOrg?.id) return;
// TODO(akhilmhdh): Move to memory storage
const userPrivateKey = localStorage.getItem("PRIVATE_KEY");
if (!userPrivateKey || !wsKey) {
createNotification({
text: "Failed to find private key. Try re-login"
});
return;
}
const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
if (!orgUser) return;
const selectedMembers = orgMembershipIds.map((orgMembershipId) =>
orgUsers?.find((orgUser) => orgUser.id === orgMembershipId)
);
if (!selectedMembers) return;
try {
// TODO: update
if (currentWorkspace.version === ProjectVersion.V1) {
await addUserToWorkspace({
workspaceId,
userPrivateKey,
decryptKey: wsKey,
members: [{ orgMembershipId, userPublicKey: orgUser.user.publicKey }]
createNotification({
type: "error",
text: "Please upgrade your project to invite new members to the project."
});
} else {
await addUserToWorkspaceNonE2EE({
projectId: workspaceId,
usernames: [orgUser.user.username],
orgId
await addMembersToProject({
inviteeEmails: selectedMembers.map((member) => member?.user.username!),
organizationId: orgId,
organizationRoleSlug: ProjectMembershipRole.Member, // ? This doesn't apply in this case, because we know the users being added are already part of the organization
projects: [
{
slug: currentWorkspace.slug,
id: currentWorkspace.id,
projectRoleSlug: projectRoleSlugs
}
]
});
}
createNotification({
@@ -104,6 +121,9 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
return (orgUsers || []).filter(({ user: u }) => !wsUserUsernames.has(u.username));
}, [orgUsers, members]);
const selectedOrgMembershipIds = watch("orgMembershipIds");
const selectedRoleSlugs = watch("projectRoleSlugs");
return (
<Modal
isOpen={popUp?.addMember?.isOpen}
@@ -115,37 +135,183 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => {
>
{filteredOrgUsers.length ? (
<form onSubmit={handleSubmit(onAddMember)}>
<Controller
control={control}
defaultValue={filteredOrgUsers?.[0]?.user?.username}
name="orgMembershipId"
render={({ field, fieldState: { error } }) => (
<FormControl label="Username" isError={Boolean(error)} errorText={error?.message}>
<Select
position="popper"
className="w-full"
defaultValue={filteredOrgUsers?.[0]?.user?.username}
value={field.value}
onValueChange={field.onChange}
>
{filteredOrgUsers.map(({ id: orgUserId, user: u }) => (
<SelectItem value={orgUserId} key={`org-membership-join-${orgUserId}`}>
{u?.username}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
<div className="flex w-full items-center gap-2">
<div className="w-full">
<Controller
control={control}
name="orgMembershipIds"
render={({ field }) => (
<FormControl label="Invite users to project">
<DropdownMenu>
<DropdownMenuTrigger asChild>
{filteredOrgUsers && filteredOrgUsers.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">
{/* eslint-disable-next-line no-nested-ternary */}
{selectedOrgMembershipIds.length === 1
? filteredOrgUsers.find(
(orgUser) => orgUser.id === selectedOrgMembershipIds[0]
)?.user.username
: selectedOrgMembershipIds.length === 0
? "No users selected"
: `${selectedOrgMembershipIds.length} users selected`}
<FontAwesomeIcon icon={faChevronDown} className="text-xs" />
</div>
) : (
<div className="inline-flex w-full cursor-default 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">
No users found
</div>
)}
</DropdownMenuTrigger>
<DropdownMenuContent
align="start"
className="thin-scrollbar z-[100] max-h-80"
>
{filteredOrgUsers && filteredOrgUsers.length > 0 ? (
filteredOrgUsers.map((member) => {
const isSelected = selectedOrgMembershipIds.includes(member.id);
return (
<DropdownMenuItem
onSelect={(event) =>
filteredOrgUsers.length > 1 && event.preventDefault()
}
onClick={() => {
if (selectedOrgMembershipIds.includes(String(member.id))) {
field.onChange(
selectedOrgMembershipIds.filter(
(membershipId: string) =>
membershipId !== String(member.id)
)
);
} else {
field.onChange([
...selectedOrgMembershipIds,
String(member.id)
]);
}
}}
key={`membership-id-${member.id}`}
icon={
isSelected ? (
<FontAwesomeIcon
icon={faCheckCircle}
className="pr-0.5 text-primary"
/>
) : (
<div className="pl-[1.01rem]" />
)
}
iconPos="left"
className="w-[28.4rem] text-sm"
>
{member.user.username}
</DropdownMenuItem>
);
})
) : (
<div />
)}
</DropdownMenuContent>
</DropdownMenu>
</FormControl>
)}
/>
</div>
<div className="flex min-w-fit justify-end">
<Controller
control={control}
name="projectRoleSlugs"
render={({ field }) => (
<FormControl
label="Select roles"
tooltipText="Select the roles that you wish to assign to the users"
>
<DropdownMenu>
<DropdownMenuTrigger asChild>
{roles && roles.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">
{/* eslint-disable-next-line no-nested-ternary */}
{selectedRoleSlugs.length === 1
? roles.find((role) => role.slug === selectedRoleSlugs[0])?.name
: selectedRoleSlugs.length === 0
? "Select at least one role"
: `${selectedRoleSlugs.length} roles selected`}
<FontAwesomeIcon
icon={faChevronDown}
className={twMerge("ml-2 text-xs")}
/>
</div>
) : (
<div className="inline-flex w-full cursor-default 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">
No roles found
</div>
)}
</DropdownMenuTrigger>
<DropdownMenuContent
align="start"
className="thin-scrollbar z-[100] max-h-80"
>
{roles && roles.length > 0 ? (
roles.map((role) => {
const isSelected = selectedRoleSlugs.includes(role.slug);
return (
<DropdownMenuItem
onSelect={(event) => roles.length > 1 && event.preventDefault()}
onClick={() => {
if (selectedRoleSlugs.includes(String(role.slug))) {
field.onChange(
selectedRoleSlugs.filter(
(roleSlug: string) => roleSlug !== String(role.slug)
)
);
} else {
field.onChange([...selectedRoleSlugs, role.slug]);
}
}}
key={`role-slug-${role.slug}`}
icon={
isSelected ? (
<FontAwesomeIcon
icon={faCheckCircle}
className="pr-0.5 text-primary"
/>
) : (
<div className="pl-[1.01rem]" />
)
}
iconPos="left"
className="w-[28.4rem] text-sm"
>
{role.name}
</DropdownMenuItem>
);
})
) : (
<div />
)}
</DropdownMenuContent>
</DropdownMenu>
</FormControl>
)}
/>
</div>
</div>
<div className="mt-8 flex items-center">
<Button
className="mr-4"
size="sm"
type="submit"
isLoading={isSubmitting}
isDisabled={isSubmitting}
isDisabled={
isSubmitting ||
selectedOrgMembershipIds.length === 0 ||
selectedRoleSlugs.length === 0
}
>
Add Member
Add Members
</Button>
<Button
colorSchema="secondary"
frontend/src/views/Settings/ProjectSettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
+12 -2
View File
@@ -222,7 +222,12 @@ export const WorkflowIntegrationTab = () => {
/>
</DropdownMenuTrigger>
<DropdownMenuContent
style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
style={{
width: "var(--radix-dropdown-menu-trigger-width)",
maxHeight: "350px",
overflowY: "auto"
}}
side="bottom"
align="start"
>
{sortedSlackChannels?.map((slackChannel) => {
@@ -290,7 +295,12 @@ export const WorkflowIntegrationTab = () => {
/>
</DropdownMenuTrigger>
<DropdownMenuContent
style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
style={{
width: "var(--radix-dropdown-menu-trigger-width)",
maxHeight: "350px",
overflowY: "auto"
}}
side="bottom"
align="start"
>
{sortedSlackChannels?.map((slackChannel) => {