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

improvements: address feedback and fix bugs

Browse Source
This commit is contained in:
Scott Wilson
2025-06-20 12:25:28 -07:00
parent 7e9743b4c2
commit 7c7af347fc
10 changed files with 146 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/accessApproval/queries.tsx
+9 -12
View File
@@ -65,11 +65,11 @@ const fetchApprovalPolicies = async ({ projectSlug }: TGetAccessApprovalRequests
const fetchApprovalRequests = async ({
projectSlug,
envSlug,
authorProjectMembershipId
authorUserId
}: TGetAccessApprovalRequestsDTO) => {
const { data } = await apiRequest.get<{ requests: TAccessApprovalRequest[] }>(
"/api/v1/access-approvals/requests",
{ params: { projectSlug, envSlug, authorProjectMembershipId } }
{ params: { projectSlug, envSlug, authorUserId } }
);
return data.requests.map((request) => ({
@@ -109,12 +109,12 @@ export const useGetAccessRequestsCount = ({
export const useGetAccessApprovalPolicies = ({
projectSlug,
envSlug,
authorProjectMembershipId,
authorUserId,
options = {}
}: TGetAccessApprovalRequestsDTO & TReactQueryOptions) =>
useQuery({
queryKey: accessApprovalKeys.getAccessApprovalPolicies(projectSlug),
queryFn: () => fetchApprovalPolicies({ projectSlug, envSlug, authorProjectMembershipId }),
queryFn: () => fetchApprovalPolicies({ projectSlug, envSlug, authorUserId }),
...options,
enabled: Boolean(projectSlug) && (options?.enabled ?? true)
});
@@ -122,16 +122,13 @@ export const useGetAccessApprovalPolicies = ({
export const useGetAccessApprovalRequests = ({
projectSlug,
envSlug,
authorProjectMembershipId,
authorUserId,
options = {}
}: TGetAccessApprovalRequestsDTO & TReactQueryOptions) =>
useQuery({
queryKey: accessApprovalKeys.getAccessApprovalRequests(
projectSlug,
envSlug,
authorProjectMembershipId
),
queryFn: () => fetchApprovalRequests({ projectSlug, envSlug, authorProjectMembershipId }),
queryKey: accessApprovalKeys.getAccessApprovalRequests(projectSlug, envSlug, authorUserId),
queryFn: () => fetchApprovalRequests({ projectSlug, envSlug, authorUserId }),
...options,
enabled: Boolean(projectSlug) && (options?.enabled ?? true)
enabled: Boolean(projectSlug) && (options?.enabled ?? true),
placeholderData: (previousData) => previousData
});
frontend/src/hooks/api/accessApproval/types.ts
+1 -1
View File
@@ -148,7 +148,7 @@ export type TCreateAccessRequestDTO = {
export type TGetAccessApprovalRequestsDTO = {
projectSlug: string;
envSlug?: string;
authorProjectMembershipId?: string;
authorUserId?: string;
};
export type TGetAccessPolicyApprovalCountDTO = {
frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+70 -25
View File
@@ -3,6 +3,7 @@
import { useCallback, useMemo, useState } from "react";
import {
faArrowUpRightFromSquare,
faBan,
faBookOpen,
faCheck,
faCheckCircle,
@@ -12,10 +13,12 @@ import {
faMagnifyingGlass,
faPlus,
faSearch,
faUser
faStopwatch,
faUser,
IconDefinition
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { formatDistance } from "date-fns";
import { format, formatDistance } from "date-fns";
import { AnimatePresence, motion } from "framer-motion";
import { twMerge } from "tailwind-merge";
@@ -133,7 +136,7 @@ export const AccessApprovalRequest = ({
isPending: areRequestsPending
} = useGetAccessApprovalRequests({
projectSlug,
authorProjectMembershipId: requestedByFilter,
authorUserId: requestedByFilter,
envSlug: envFilter
});
@@ -203,9 +206,15 @@ export const AccessApprovalRequest = ({
const canBypass =
!request.policy.bypassers.length || request.policy.bypassers.includes(user.id);
let displayData: { label: string; type: "primary" | "danger" | "success" } = {
let displayData: {
label: string;
type: "primary" | "danger" | "success";
tooltipContent?: string;
icon: IconDefinition | null;
} = {
label: "",
type: "primary"
type: "primary",
icon: null
};
const isExpired =
@@ -213,20 +222,42 @@ export const AccessApprovalRequest = ({
request.isApproved &&
new Date() > new Date(request.privilege.temporaryAccessEndTime || ("" as string));
if (isExpired) displayData = { label: "Access Expired", type: "danger" };
else if (isAccepted) displayData = { label: "Access Granted", type: "success" };
else if (isRejectedByAnyone) displayData = { label: "Rejected", type: "danger" };
if (isExpired)
displayData = {
label: "Access Expired",
type: "danger",
icon: faStopwatch,
tooltipContent: request.privilege?.temporaryAccessEndTime
? `Expired ${format(request.privilege.temporaryAccessEndTime, "M/d/yyyy h:mm aa")}`
: undefined
};
else if (isAccepted)
displayData = {
label: "Access Granted",
type: "success",
icon: faCheck,
tooltipContent: `Granted ${format(request.updatedAt, "M/d/yyyy h:mm aa")}`
};
else if (isRejectedByAnyone)
displayData = {
label: "Rejected",
type: "danger",
icon: faBan,
tooltipContent: `Rejected ${format(request.updatedAt, "M/d/yyyy h:mm aa")}`
};
else if (userReviewStatus === ApprovalStatus.APPROVED) {
displayData = {
label: `Pending ${request.policy.approvals - request.reviewers.length} review${
request.policy.approvals - request.reviewers.length > 1 ? "s" : ""
}`,
type: "primary"
type: "primary",
icon: faClipboardCheck
};
} else if (!isReviewedByUser)
displayData = {
label: "Review Required",
type: "primary"
type: "primary",
icon: faClipboardCheck
};
return {
@@ -266,6 +297,8 @@ export const AccessApprovalRequest = ({
[generateRequestDetails, membersGroupById, user, setSelectedRequest, handlePopUpOpen]
);
const isFiltered = Boolean(search || envFilter || requestedByFilter);
return (
<AnimatePresence mode="wait">
<motion.div
@@ -357,7 +390,7 @@ export const AccessApprovalRequest = ({
}}
>
<FontAwesomeIcon icon={faCheck} className="mr-2" />
{!!requestCount && requestCount.finalizedCount} Completed
{!!requestCount && requestCount.finalizedCount} Closed
</div>
<div className="flex flex-grow justify-end space-x-8">
<DropdownMenu>
@@ -365,7 +398,7 @@ export const AccessApprovalRequest = ({
<Button
variant="plain"
colorSchema="secondary"
className="text-bunker-300"
className={envFilter ? "text-white" : "text-bunker-300"}
rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
>
Environments
@@ -419,10 +452,16 @@ export const AccessApprovalRequest = ({
{members?.map(({ user: membershipUser, id }) => (
<DropdownMenuItem
onClick={() =>
setRequestedByFilter((state) => (state === id ? undefined : id))
setRequestedByFilter((state) =>
state === membershipUser.id ? undefined : membershipUser.id
)
}
key={`request-filter-member-${id}`}
icon={requestedByFilter === id && <FontAwesomeIcon icon={faCheckCircle} />}
icon={
requestedByFilter === membershipUser.id && (
<FontAwesomeIcon icon={faCheckCircle} />
)
}
iconPos="right"
>
{membershipUser.username}
@@ -434,16 +473,16 @@ export const AccessApprovalRequest = ({
</div>
</div>
<div className="flex flex-col rounded-b-md border-x border-b border-t border-mineshaft-600 bg-mineshaft-800">
{filteredRequests?.length === 0 && !search && (
{filteredRequests?.length === 0 && !isFiltered && (
<div className="py-12">
<EmptyState
title={`No ${statusFilter === "open" ? "Pending" : "Completed"} Access Requests`}
title={`No ${statusFilter === "open" ? "Pending" : "Closed"} Access Requests`}
/>
</div>
)}
{Boolean(!filteredRequests?.length && search && !areRequestsPending) && (
{Boolean(!filteredRequests?.length && isFiltered && !areRequestsPending) && (
<div className="py-12">
<EmptyState title="No Requests Match Search" icon={faSearch} />
<EmptyState title="No Requests Match Filters" icon={faSearch} />
</div>
)}
{!!filteredRequests?.length &&
@@ -494,13 +533,19 @@ export const AccessApprovalRequest = ({
<span>Requested By You</span>
</div>
)}
<Badge
className="flex items-center gap-1.5 whitespace-nowrap"
variant={details.displayData.type}
>
<FontAwesomeIcon icon={faClipboardCheck} />
<span>{details.displayData.label}</span>
</Badge>
<Tooltip content={details.displayData.tooltipContent}>
<div>
<Badge
className="flex items-center gap-1.5 whitespace-nowrap"
variant={details.displayData.type}
>
{details.displayData.icon && (
<FontAwesomeIcon icon={details.displayData.icon} />
)}
<span>{details.displayData.label}</span>
</Badge>
</div>
</Tooltip>
</div>
</div>
</div>
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
+5 -3
View File
@@ -126,6 +126,8 @@ export const SecretApprovalRequest = () => {
const isRequestListEmpty = !isApprovalRequestLoading && secretApprovalRequests?.length === 0;
const isFiltered = Boolean(searchFilter || envFilter || committerFilter);
return (
<AnimatePresence mode="wait">
{isSecretApprovalScreen ? (
@@ -292,7 +294,7 @@ export const SecretApprovalRequest = () => {
</div>
</div>
<div className="flex flex-col rounded-b-md border-x border-b border-t border-mineshaft-600 bg-mineshaft-800">
{isRequestListEmpty && !searchFilter && (
{isRequestListEmpty && !isFiltered && (
<div className="py-12">
<EmptyState
title={`No ${statusFilter === "open" ? "Open" : "Closed"} Change Requests`}
@@ -344,10 +346,10 @@ export const SecretApprovalRequest = () => {
);
})}
{Boolean(
!secretApprovalRequests.length && searchFilter && !isApprovalRequestLoading
!secretApprovalRequests.length && isFiltered && !isApprovalRequestLoading
) && (
<div className="py-12">
<EmptyState title="No Requests Match Search" icon={faSearch} />
<EmptyState title="No Requests Match Filters" icon={faSearch} />
</div>
)}
{Boolean(totalApprovalCount) && (