[v16] Web: rename generic variable name to a helpful name

web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx

@@ -81,7 +81,7 @@ export const Empty = () => {
     <MemoryRouter>
       <RequestCheckoutWithSlider
         {...baseProps}
-        data={[]}
+        pendingAccessRequests={[]}
         selectedReviewers={selectedReviewers}
         setSelectedReviewers={setSelectedReviewers}
         maxDuration={maxDuration}
@@ -177,7 +177,7 @@ const baseProps: RequestCheckoutWithSliderProps = {
   ],
   setSelectedReviewers: () => null,
   createRequest: () => null,
-  data: [
+  pendingAccessRequests: [
     {
       kind: 'app',
       name: 'app-name',

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,

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<T extends PendingListItem>({
   setPendingRequestTtl,
   pendingRequestTtlOptions,
   dryRunResponse,
-  data,
+  pendingAccessRequests,
   showClusterNameColumn,
   createAttempt,
   fetchResourceRequestRolesAttempt,
@@ -178,12 +179,14 @@ export function RequestCheckout<T extends PendingListItem>({
     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 (
       <Flex mb={3} alignItems="center">
@@ -195,9 +198,10 @@ export function RequestCheckout<T extends PendingListItem>({
           style={{ cursor: 'pointer' }}
         />
         <Box>
-          <Text typography="h4" color="text.main" bold>
-            {data.length} {pluralize(data.length, 'Resource')} Selected
-          </Text>
+          <H2>
+            {numPendingAccessRequests}{' '}
+            {pluralize(numPendingAccessRequests, 'Resource')} Selected
+          </H2>
         </Box>
       </Flex>
     );
@@ -244,7 +248,7 @@ export function RequestCheckout<T extends PendingListItem>({
                 <Alert kind="danger" children={createAttempt.statusText} />
               )}
               <StyledTable
-                data={data}
+                data={pendingAccessRequests}
                 columns={[
                   {
                     key: 'clusterName',
@@ -754,7 +758,7 @@ export type RequestCheckoutProps<T extends PendingListItem = PendingListItem> =
     isResourceRequest: boolean;
     requireReason: boolean;
     selectedReviewers: ReviewerOption[];
-    data: T[];
+    pendingAccessRequests: T[];
     showClusterNameColumn?: boolean;
     createRequest: (req: CreateRequest) => void;
     fetchStatus: 'loading' | 'loaded';

web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap

@@ -285,11 +285,10 @@ exports[`failed state 1`] = `
 .c7 {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 18px;
-  line-height: 32px;
+  line-height: 24px;
   margin: 0px;
-  color: #FFFFFF;
 }
 
 .c20 {
@@ -902,15 +901,14 @@ exports[`failed state 1`] = `
           <div
             class="c1"
           >
-            <div
+            <h2
               class="c7"
-              color="text.main"
             >
               5
 
               Resources
                Selected
-            </div>
+            </h2>
           </div>
         </div>
         <div
@@ -1749,11 +1747,10 @@ exports[`loaded state 1`] = `
 .c7 {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 18px;
-  line-height: 32px;
+  line-height: 24px;
   margin: 0px;
-  color: #FFFFFF;
 }
 
 .c17 {
@@ -2385,15 +2382,14 @@ exports[`loaded state 1`] = `
           <div
             class="c1"
           >
-            <div
+            <h2
               class="c7"
-              color="text.main"
             >
               5
 
               Resources
                Selected
-            </div>
+            </h2>
           </div>
         </div>
         <table

web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx

@@ -85,7 +85,7 @@ export function AccessRequestCheckout() {
     fetchResourceRolesAttempt,
     setSelectedResourceRequestRoles,
     clearCreateAttempt,
-    data,
+    pendingAccessRequests,
     shouldShowClusterNameColumn,
     selectedReviewers,
     setSelectedReviewers,
@@ -104,18 +104,23 @@ export function AccessRequestCheckout() {
     onStartTimeChange,
   } = useAccessRequestCheckout();
 
-  const isRoleRequest = data[0]?.kind === 'role';
+  const isRoleRequest = pendingAccessRequests[0]?.kind === 'role';
 
   function closeCheckout() {
     setShowCheckout(false);
   }
 
   // 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() && (
         <Box
           px={3}
           py={2}
@@ -133,12 +138,15 @@ export function AccessRequestCheckout() {
           >
             <Flex flexDirection="column" minWidth={0}>
               <Text mb={1}>
-                {data.length}{' '}
-                {pluralize(data.length, isRoleRequest ? 'role' : 'resource')}{' '}
+                {numPendingAccessRequests}{' '}
+                {pluralize(
+                  numPendingAccessRequests,
+                  isRoleRequest ? 'role' : 'resource'
+                )}{' '}
                 added to access request:
               </Text>
               <Flex gap={1} flexWrap="wrap">
-                {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}

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,17 +149,17 @@ export default function useAccessRequestCheckout() {
   function getPendingAccessRequestsPerResource(
     pendingRequest: PendingAccessRequest
   ): PendingListItemWithOriginalItem[] {
-    const data: PendingListItemWithOriginalItem[] = [];
+    const pendingAccessRequests: PendingListItemWithOriginalItem[] = [];
     if (!workspaceAccessRequest) {
-      return data;
+      return pendingAccessRequests;
     }
 
     switch (pendingRequest.kind) {
       case 'role': {
         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,21 +222,24 @@ 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,
           clusterName: d.clusterName,
           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,