diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx index 115f18f84c7bf..865ed0a98a025 100644 --- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx +++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx @@ -81,7 +81,7 @@ export const Empty = () => { null, createRequest: () => null, - data: [ + pendingAccessRequests: [ { kind: 'app', name: 'app-name', diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx index 89fca74f4ff92..974a2498b92ad 100644 --- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx +++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx @@ -154,7 +154,7 @@ const props: RequestCheckoutWithSliderProps = { selectedReviewers: [], setSelectedReviewers: () => null, createRequest: () => null, - data: [], + pendingAccessRequests: [], clearAttempt: () => null, onClose: () => null, toggleResource: () => null, diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx index 5ba2b973380f3..ee1dc315d360a 100644 --- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx +++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx @@ -150,7 +150,7 @@ export function RequestCheckout({ setPendingRequestTtl, pendingRequestTtlOptions, dryRunResponse, - data, + pendingAccessRequests, showClusterNameColumn, createAttempt, fetchResourceRequestRolesAttempt, @@ -190,12 +190,14 @@ export function RequestCheckout({ selectedResourceRequestRoles.length < 1; const submitBtnDisabled = - data.length === 0 || + pendingAccessRequests.length === 0 || createAttempt.status === 'processing' || isInvalidRoleSelection || fetchResourceRequestRolesAttempt.status === 'failed' || fetchResourceRequestRolesAttempt.status === 'processing'; + const numPendingAccessRequests = pendingAccessRequests.length; + const DefaultHeader = () => { return ( @@ -208,7 +210,8 @@ export function RequestCheckout({ />

- {data.length} {pluralize(data.length, 'Resource')} Selected + {numPendingAccessRequests}{' '} + {pluralize(numPendingAccessRequests, 'Resource')} Selected

@@ -254,7 +257,7 @@ export function RequestCheckout({ )} = isResourceRequest: boolean; requireReason: boolean; selectedReviewers: ReviewerOption[]; - data: T[]; + pendingAccessRequests: T[]; showClusterNameColumn?: boolean; createRequest: (req: CreateRequest) => void; fetchStatus: 'loading' | 'loaded'; diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx index 41e18deb05711..44e81b59b3822 100644 --- a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx +++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx @@ -85,7 +85,7 @@ export function AccessRequestCheckout() { fetchResourceRolesAttempt, setSelectedResourceRequestRoles, clearCreateAttempt, - data, + pendingAccessRequests, shouldShowClusterNameColumn, selectedReviewers, setSelectedReviewers, @@ -104,7 +104,7 @@ export function AccessRequestCheckout() { onStartTimeChange, } = useAccessRequestCheckout(); - const isRoleRequest = data[0]?.kind === 'role'; + const isRoleRequest = pendingAccessRequests[0]?.kind === 'role'; const transitionRef = useRef(); function closeCheckout() { @@ -113,10 +113,15 @@ export function AccessRequestCheckout() { // We should rather detect how much space we have, // but for simplicity we only count items. - const moreToShow = Math.max(data.length - MAX_RESOURCES_IN_BAR_TO_SHOW, 0); + const moreToShow = Math.max( + pendingAccessRequests.length - MAX_RESOURCES_IN_BAR_TO_SHOW, + 0 + ); + const numPendingAccessRequests = pendingAccessRequests.length; + return ( <> - {data.length > 0 && !isCollapsed() && ( + {pendingAccessRequests.length > 0 && !isCollapsed() && ( - {data.length}{' '} - {pluralize(data.length, isRoleRequest ? 'role' : 'resource')}{' '} + {numPendingAccessRequests}{' '} + {pluralize( + numPendingAccessRequests, + isRoleRequest ? 'role' : 'resource' + )}{' '} added to access request: - {data + {pendingAccessRequests .slice(0, MAX_RESOURCES_IN_BAR_TO_SHOW) .map(c => { let resource = { @@ -238,7 +246,7 @@ export function AccessRequestCheckout() { }) } reset={reset} - data={data} + pendingAccessRequests={pendingAccessRequests} showClusterNameColumn={shouldShowClusterNameColumn} createAttempt={createRequestAttempt} resourceRequestRoles={resourceRequestRoles} diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts index 11f78ea5ebd09..4ad261cf61b3c 100644 --- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts +++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts @@ -91,7 +91,7 @@ export default function useAccessRequestCheckout() { workspaceAccessRequest?.getPendingAccessRequest(); useEffect(() => { - // Do a new dry run per changes to pending data + // Do a new dry run per changes to pending access requests // to get the latest time options and latest calculated // suggested reviewers. // Options and reviewers can change depending on the selected @@ -106,12 +106,13 @@ export default function useAccessRequestCheckout() { return; } - const data = getPendingAccessRequestsPerResource(pendingAccessRequest); + const pendingAccessRequests = + getPendingAccessRequestsPerResource(pendingAccessRequest); runFetchResourceRoles(() => retryWithRelogin(ctx, clusterUri, async () => { const { response } = await ctx.tshd.getRequestableRoles({ clusterUri: rootClusterUri, - resourceIds: data + resourceIds: pendingAccessRequests .filter(d => d.kind !== 'role') .map(d => ({ // We have to use id, not name. @@ -148,9 +149,9 @@ export default function useAccessRequestCheckout() { function getPendingAccessRequestsPerResource( pendingRequest: PendingAccessRequest ): PendingListItemWithOriginalItem[] { - const data: PendingListItemWithOriginalItem[] = []; + const pendingAccessRequests: PendingListItemWithOriginalItem[] = []; if (!workspaceAccessRequest) { - return data; + return pendingAccessRequests; } switch (pendingRequest.kind) { @@ -158,7 +159,7 @@ export default function useAccessRequestCheckout() { const clusterName = ctx.clustersService.findCluster(rootClusterUri)?.name; pendingRequest.roles.forEach(role => { - data.push({ + pendingAccessRequests.push({ kind: 'role', id: role, name: role, @@ -171,7 +172,7 @@ export default function useAccessRequestCheckout() { pendingRequest.resources.forEach(resourceRequest => { const { kind, id, name } = extractResourceRequestProperties(resourceRequest); - data.push({ + pendingAccessRequests.push({ kind, id, name, @@ -183,7 +184,7 @@ export default function useAccessRequestCheckout() { }); } } - return data; + return pendingAccessRequests; } function isCollapsed() { @@ -221,13 +222,14 @@ export default function useAccessRequestCheckout() { * Shared logic used both during dry runs and regular access request creation. */ function prepareAndCreateRequest(req: CreateRequest) { - const data = getPendingAccessRequestsPerResource(pendingAccessRequest); + const pendingAccessRequests = + getPendingAccessRequestsPerResource(pendingAccessRequest); const params: CreateAccessRequestRequest = { rootClusterUri, reason: req.reason, suggestedReviewers: req.suggestedReviewers || [], dryRun: req.dryRun, - resourceIds: data + resourceIds: pendingAccessRequests .filter(d => d.kind !== 'role') .map(d => ({ name: d.id, @@ -235,7 +237,9 @@ export default function useAccessRequestCheckout() { kind: d.kind, subResourceName: '', })), - roles: data.filter(d => d.kind === 'role').map(d => d.name), + roles: pendingAccessRequests + .filter(d => d.kind === 'role') + .map(d => d.name), assumeStartTime: req.start && Timestamp.fromDate(req.start), maxDuration: req.maxDuration && Timestamp.fromDate(req.maxDuration), requestTtl: req.requestTTL && Timestamp.fromDate(req.requestTTL), @@ -250,7 +254,10 @@ export default function useAccessRequestCheckout() { return retryWithRelogin(ctx, clusterUri, () => ctx.clustersService.createAccessRequest(params).then(({ response }) => { - return { accessRequest: response.request, requestedCount: data.length }; + return { + accessRequest: response.request, + requestedCount: pendingAccessRequests.length, + }; }) ).catch(e => { setCreateRequestAttempt({ status: 'failed', statusText: e.message }); @@ -337,7 +344,8 @@ export default function useAccessRequestCheckout() { isCollapsed, assumedRequests: getAssumedRequests(), toggleResource, - data: getPendingAccessRequestsPerResource(pendingAccessRequest), + pendingAccessRequests: + getPendingAccessRequestsPerResource(pendingAccessRequest), shouldShowClusterNameColumn, createRequest, reset,