awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-17 01:12:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Standardize org members page styling

Browse Source
This commit is contained in:
Tuan Dang
2023-11-24 14:09:56 +07:00
parent c3d2b7d3fc
commit 41c41a647f
20 changed files with 884 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Project/MembersPage/components/ServiceAccountTab/components/ServiceTokenV3Section/AddServiceTokenV3Modal.tsx
+42 -9
View File
@@ -19,12 +19,13 @@ import {
} from "@app/context";
import { useAddServiceToWorkspace ,
useGetOrgServiceMemberships,
useGetWorkspaceServiceMemberships
} from "@app/hooks/api";
useGetRoles,
useGetWorkspaceServiceMemberships} from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp";
const schema = yup.object({
serviceTokenDataId: yup.string()
serviceTokenDataId: yup.string().required("ST V3 id is required"),
role: yup.string().required("ST V3 role is required")
}).required();
export type FormData = yup.InferType<typeof schema>;
@@ -38,6 +39,7 @@ export const AddServiceTokenV3Modal = ({
popUp,
handlePopUpToggle
}: Props) => {
const { createNotification } = useNotificationContext();
const { currentOrg } = useOrganization();
const { currentWorkspace } = useWorkspace();
@@ -47,6 +49,11 @@ export const AddServiceTokenV3Modal = ({
const { data: orgServices } = useGetOrgServiceMemberships(orgId);
const { data: services } = useGetWorkspaceServiceMemberships(workspaceId);
const { data: roles } = useGetRoles({
orgId,
workspaceId
});
const addServiceToWorkspace = useAddServiceToWorkspace();
const filteredOrgServices = useMemo(() => {
@@ -71,18 +78,19 @@ export const AddServiceTokenV3Modal = ({
});
const onFormSubmit = async ({
serviceTokenDataId
serviceTokenDataId,
role
}: FormData) => {
try {
await addServiceToWorkspace.mutateAsync({
workspaceId,
serviceId: serviceTokenDataId as string,
role: "member"
role
});
createNotification({
text: `Successfully ${popUp?.serviceTokenV3?.data ? "updated" : "created"} ST V3`,
text: "Successfully added service account to project",
type: "success"
});
@@ -91,7 +99,7 @@ export const AddServiceTokenV3Modal = ({
} catch (err) {
console.error(err);
createNotification({
text: `Failed to ${popUp?.serviceTokenV3?.data ? "updated" : "created"} ST V3`,
text: "Failed to add service account to project",
type: "error"
});
}
@@ -117,7 +125,6 @@ export const AddServiceTokenV3Modal = ({
label="Service Account"
errorText={error?.message}
isError={Boolean(error)}
className="mt-4"
>
<Select
defaultValue={field.value}
@@ -134,6 +141,32 @@ export const AddServiceTokenV3Modal = ({
</FormControl>
)}
/>
<Controller
control={control}
name="role"
defaultValue=""
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
<FormControl
label="Role"
errorText={error?.message}
isError={Boolean(error)}
className="mt-4"
>
<Select
defaultValue={field.value}
{...field}
onValueChange={(e) => onChange(e)}
className="w-full"
>
{(roles || []).map(({ name, slug }) => (
<SelectItem value={slug} key={`st-role-${slug}`}>
{name}
</SelectItem>
))}
</Select>
</FormControl>
)}
/>
<div className="flex items-center">
<Button
className="mr-4"
frontend/src/views/Project/MembersPage/components/ServiceAccountTab/components/ServiceTokenV3Section/ServiceTokenV3Section.tsx
+1 -2
View File
@@ -62,7 +62,7 @@ export const ServiceTokenV3Section = 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">
Service Accounts (Beta)
Service Accounts
</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
@@ -86,7 +86,6 @@ export const ServiceTokenV3Section = withProjectPermission(
/>
<AddServiceTokenV3Modal
popUp={popUp}
handlePopUpOpen={handlePopUpOpen}
handlePopUpToggle={handlePopUpToggle}
/>
<DeleteActionModal
frontend/src/views/Project/MembersPage/components/ServiceAccountTab/components/ServiceTokenV3Section/ServiceTokenV3Table.tsx
+99 -6
View File
@@ -1,11 +1,15 @@
import { faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
import { useCallback } from "react";
import { faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format } from "date-fns";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { ProjectPermissionCan } from "@app/components/permissions";
import {
EmptyState,
IconButton,
Select,
SelectItem,
Table,
TableContainer,
TableSkeleton,
@@ -15,8 +19,15 @@ import {
THead,
Tr
} from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub , useWorkspace } from "@app/context";
import { useGetWorkspaceServiceMemberships } from "@app/hooks/api";
import {
ProjectPermissionActions,
ProjectPermissionSub,
useOrganization,
useWorkspace,
} from "@app/context";
import {
useGetRoles,
useGetWorkspaceServiceMemberships} from "@app/hooks/api";
import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -36,13 +47,64 @@ type Props = {
isRefreshTokenRotationEnabled?: boolean;
}
) => void;
};
};
// TODO: update roles thing here
export const ServiceTokenV3Table = ({
handlePopUpOpen
}: Props) => {
const { createNotification } = useNotificationContext();
const { currentOrg } = useOrganization();
const { currentWorkspace } = useWorkspace();
const orgId = currentOrg?._id || "";
const workspaceId = currentWorkspace?._id || "";
const { data, isLoading } = useGetWorkspaceServiceMemberships(currentWorkspace?._id || "");
const { data: roles } = useGetRoles({
orgId,
workspaceId
});
const handleChangeRole = async ({
serviceTokenDataId,
role
}: {
serviceTokenDataId: string;
role: string;
}) => {
try {
console.log("handle project-level role change vals: ", {
serviceTokenDataId,
role
});
// await updateMutateAsync({
// serviceTokenDataId,
// role
// });
createNotification({
text: "Successfully updated service account role",
type: "success"
});
} catch (err) {
console.error(err);
createNotification({
text: "Failed to update service account role",
type: "error"
});
}
}
const findRoleFromId = useCallback(
(roleId: string) => {
return (roles || []).find(({ _id: id }) => id === roleId);
},
[roles]
);
return (
<TableContainer>
@@ -72,7 +134,38 @@ export const ServiceTokenV3Table = ({
return (
<Tr className="h-10" key={`st-v3-${_id}`}>
<Td>{name}</Td>
<Td>{customRole?.slug ?? role}</Td>
<Td>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.ServiceTokens}
>
{(isAllowed) => {
return (
<Select
value={
role === "custom" ? findRoleFromId(customRole)?.slug : role
}
isDisabled={!isAllowed}
className="w-40 bg-mineshaft-600"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
handleChangeRole({
serviceTokenDataId: _id,
role: selectedRole
})
}
>
{(roles || [])
.map(({ slug, name: roleName }) => (
<SelectItem value={slug} key={`owner-option-${slug}`}>
{roleName}
</SelectItem>
))}
</Select>
);
}}
</ProjectPermissionCan>
</Td>
<Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
<Td className="flex justify-end">
<ProjectPermissionCan
@@ -105,7 +198,7 @@ export const ServiceTokenV3Table = ({
{!isLoading && data && data?.length === 0 && (
<Tr>
<Td colSpan={7}>
<EmptyState title="No service token v3 on file" icon={faKey} />
<EmptyState title="No service accounts have been added to this project" icon={faServer} />
</Td>
</Tr>
)}