From fb3a889d13a601bc3715ad3cf4c93260a47f1501 Mon Sep 17 00:00:00 2001 From: Lisa Kim Date: Tue, 22 Oct 2024 10:19:25 -0700 Subject: [PATCH] Web: rename generic variable name to a helpful name (#47722) --- .../RequestCheckout/RequestCheckout.story.tsx | 4 +-- .../RequestCheckout/RequestCheckout.test.tsx | 2 +- .../RequestCheckout/RequestCheckout.tsx | 18 ++++++---- .../AccessRequestCheckout.tsx | 24 ++++++++----- .../useAccessRequestCheckout.ts | 34 ++++++++++++------- 5 files changed, 51 insertions(+), 31 deletions(-) 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 bf1b3b4fa04e3..be69ab83259c2 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 f2ab4e08f03c5..e40956397b421 100644 --- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx +++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx @@ -26,6 +26,7 @@ import { ButtonPrimary, ButtonSecondary, Flex, + H2, Image, Indicator, LabelInput, @@ -138,7 +139,7 @@ export function RequestCheckout({ setPendingRequestTtl, pendingRequestTtlOptions, dryRunResponse, - data, + pendingAccessRequests, showClusterNameColumn, createAttempt, fetchResourceRequestRolesAttempt, @@ -178,12 +179,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 ( @@ -195,9 +198,10 @@ export function RequestCheckout({ style={{ cursor: 'pointer' }} /> - - {data.length} {pluralize(data.length, 'Resource')} Selected - +

+ {numPendingAccessRequests}{' '} + {pluralize(numPendingAccessRequests, 'Resource')} Selected +

); @@ -244,7 +248,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 f2d19ac88c900..1e1138ab00c89 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'; function closeCheckout() { setShowCheckout(false); @@ -112,10 +112,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 = { @@ -234,7 +242,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,