Teleterm: add support for access requesting kube namespaces (#47347)

gravitational · Oct 28, 2024 · 9f3b17a · 9f3b17a
1 parent 49e0745
commit 9f3b17a
Show file tree

Hide file tree

Showing 10 changed files with 458 additions and 140 deletions.
diff --git a/...ges/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx b/...ges/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -129,12 +129,16 @@ export function KubeNamespaceSelector({
   };
 
   async function handleLoadOptions(input: string) {
-    const options = await fetchKubeNamespaces({
+    const namespaces = await fetchKubeNamespaces({
       kubeCluster: kubeClusterItem.id,
       search: input,
     });
 
-    return options;
+    return namespaces.map(namespace => ({
+      kind: 'namespace',
+      value: namespace,
+      label: namespace,
+    }));
   }
 
   return (

diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/index.ts
@@ -17,7 +17,11 @@
  */
 
 export { RequestCheckoutWithSlider, RequestCheckout } from './RequestCheckout';
-export type { RequestCheckoutProps, PendingListItem } from './RequestCheckout';
+export type {
+  RequestCheckoutProps,
+  PendingListItem,
+  PendingKubeResourceItem,
+} from './RequestCheckout';
 
 export * from './utils';
 export type { ReviewerOption } from './types';
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
@@ -20,3 +20,5 @@ export * from './RequestCheckout';
 export * from './ResourceList';
 export type { ResourceMap, RequestableResourceKind } from './resource';
 export { getEmptyResourceState } from './resource';
+export type { KubeNamespaceRequest } from './kube';
+export { isKubeClusterWithNamespaces } from './kube';
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
@@ -32,6 +32,7 @@ import * as Icon from 'design/Icon';
 import { pluralize } from 'shared/utils/text';
 
 import { RequestCheckoutWithSlider } from 'shared/components/AccessRequests/NewRequest';
+import { isKubeClusterWithNamespaces } from 'shared/components/AccessRequests/NewRequest/kube';
 
 import useAccessRequestCheckout from './useAccessRequestCheckout';
 import { AssumedRolesBar } from './AssumedRolesBar';
@@ -102,6 +103,8 @@ export function AccessRequestCheckout() {
     pendingRequestTtlOptions,
     startTime,
     onStartTimeChange,
+    fetchKubeNamespaces,
+    bulkToggleKubeResources,
   } = useAccessRequestCheckout();
 
   const isRoleRequest = pendingAccessRequests[0]?.kind === 'role';
@@ -111,116 +114,126 @@ export function AccessRequestCheckout() {
     setShowCheckout(false);
   }
 
+  const pendingAccessRequestsWithoutParentResource =
+    pendingAccessRequests.filter(
+      d => !isKubeClusterWithNamespaces(d, pendingAccessRequests)
+    );
+
+  const numAddedResources = pendingAccessRequestsWithoutParentResource.length;
+
   // We should rather detect how much space we have,
   // but for simplicity we only count items.
   const moreToShow = Math.max(
-    pendingAccessRequests.length - MAX_RESOURCES_IN_BAR_TO_SHOW,
+    pendingAccessRequestsWithoutParentResource.length -
+      MAX_RESOURCES_IN_BAR_TO_SHOW,
     0
   );
-  const numPendingAccessRequests = pendingAccessRequests.length;
-
   return (
     <>
-      {pendingAccessRequests.length > 0 && !isCollapsed() && (
-        <Box
-          px={3}
-          py={2}
-          css={`
-            border-top: 1px solid
-              ${props => props.theme.colors.spotBackground[1]};
-          `}
-        >
-          <Flex
-            justifyContent="space-between"
-            alignItems="center"
+      {pendingAccessRequestsWithoutParentResource.length > 0 &&
+        !isCollapsed() && (
+          <Box
+            px={3}
+            py={2}
             css={`
-              gap: ${props => props.theme.space[1]}px;
+              border-top: 1px solid
+                ${props => props.theme.colors.spotBackground[1]};
             `}
           >
-            <Flex flexDirection="column" minWidth={0}>
-              <Text mb={1}>
-                {numPendingAccessRequests}{' '}
-                {pluralize(
-                  numPendingAccessRequests,
-                  isRoleRequest ? 'role' : 'resource'
-                )}{' '}
-                added to access request:
-              </Text>
-              <Flex gap={1} flexWrap="wrap">
-                {pendingAccessRequests
-                  .slice(0, MAX_RESOURCES_IN_BAR_TO_SHOW)
-                  .map(c => {
-                    let resource = {
-                      name: c.name,
-                      key: `${c.clusterName}-${c.kind}-${c.id}`,
-                      Icon: undefined,
-                    };
-                    switch (c.kind) {
-                      case 'app':
-                      case 'saml_idp_service_provider':
-                        resource.Icon = Icon.Application;
-                        break;
-                      case 'node':
-                        resource.Icon = Icon.Server;
-                        break;
-                      case 'db':
-                        resource.Icon = Icon.Database;
-                        break;
-                      case 'kube_cluster':
-                        resource.Icon = Icon.Kubernetes;
-                        break;
-                      case 'role':
-                        break;
-                      default:
-                        c satisfies never;
-                    }
-                    return resource;
-                  })
-                  .map(c => (
-                    <Label
-                      kind="secondary"
-                      key={c.key}
-                      css={`
-                        display: flex;
-                        align-items: center;
-                        min-width: 0;
-                        gap: ${props => props.theme.space[1]}px;
-                      `}
-                    >
-                      {c.Icon && <c.Icon size={15} />}
-                      <span
+            <Flex
+              justifyContent="space-between"
+              alignItems="center"
+              css={`
+                gap: ${props => props.theme.space[1]}px;
+              `}
+            >
+              <Flex flexDirection="column" minWidth={0}>
+                <Text mb={1}>
+                  {numAddedResources}{' '}
+                  {pluralize(
+                    numAddedResources,
+                    isRoleRequest ? 'role' : 'resource'
+                  )}{' '}
+                  added to access request:
+                </Text>
+                <Flex gap={1} flexWrap="wrap">
+                  {pendingAccessRequestsWithoutParentResource
+                    .slice(0, MAX_RESOURCES_IN_BAR_TO_SHOW)
+                    .map(c => {
+                      let resource = {
+                        name: c.subResourceName
+                          ? `${c.id}/${c.subResourceName}`
+                          : c.name,
+                        key: `${c.clusterName}-${c.kind}-${c.id}-${c.subResourceName}`,
+                        Icon: undefined,
+                      };
+                      switch (c.kind) {
+                        case 'app':
+                        case 'saml_idp_service_provider':
+                          resource.Icon = Icon.Application;
+                          break;
+                        case 'node':
+                          resource.Icon = Icon.Server;
+                          break;
+                        case 'db':
+                          resource.Icon = Icon.Database;
+                          break;
+                        case 'kube_cluster':
+                        case 'namespace':
+                          resource.Icon = Icon.Kubernetes;
+                          break;
+                        case 'role':
+                          break;
+                        default:
+                          c satisfies never;
+                      }
+                      return resource;
+                    })
+                    .map(c => (
+                      <Label
+                        kind="secondary"
+                        key={c.key}
                         css={`
-                          text-overflow: ellipsis;
-                          white-space: nowrap;
-                          overflow: hidden;
+                          display: flex;
+                          align-items: center;
+                          min-width: 0;
+                          gap: ${props => props.theme.space[1]}px;
                         `}
                       >
-                        {c.name}
-                      </span>
-                    </Label>
-                  ))}
-                {!!moreToShow && (
-                  <Label kind="secondary">+ {moreToShow} more</Label>
-                )}
+                        {c.Icon && <c.Icon size={15} />}
+                        <span
+                          css={`
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            overflow: hidden;
+                          `}
+                        >
+                          {c.name}
+                        </span>
+                      </Label>
+                    ))}
+                  {!!moreToShow && (
+                    <Label kind="secondary">+ {moreToShow} more</Label>
+                  )}
+                </Flex>
+              </Flex>
+              <Flex gap={3}>
+                <ButtonPrimary
+                  onClick={() => setShowCheckout(!showCheckout)}
+                  textTransform="none"
+                  css={`
+                    white-space: nowrap;
+                  `}
+                >
+                  Proceed to request
+                </ButtonPrimary>
+                <ButtonIcon onClick={collapseBar}>
+                  <Icon.ChevronDown size="medium" />
+                </ButtonIcon>
               </Flex>
             </Flex>
-            <Flex gap={3}>
-              <ButtonPrimary
-                onClick={() => setShowCheckout(!showCheckout)}
-                textTransform="none"
-                css={`
-                  white-space: nowrap;
-                `}
-              >
-                Proceed to request
-              </ButtonPrimary>
-              <ButtonIcon onClick={collapseBar}>
-                <Icon.ChevronDown size="medium" />
-              </ButtonIcon>
-            </Flex>
-          </Flex>
-        </Box>
-      )}
+          </Box>
+        )}
       {assumedRequests.map(request => (
         <AssumedRolesBar key={request.id} assumedRolesRequest={request} />
       ))}
@@ -270,11 +283,8 @@ export function AccessRequestCheckout() {
             setPendingRequestTtl={setPendingRequestTtl}
             startTime={startTime}
             onStartTimeChange={onStartTimeChange}
-            // TODO: these are placeholders to satisy linters.
-            // There is a split PR that handles teleterm support
-            // that will be merged right after this one (once both are approved)
-            bulkToggleKubeResources={() => null}
-            fetchKubeNamespaces={() => null}
+            fetchKubeNamespaces={fetchKubeNamespaces}
+            bulkToggleKubeResources={bulkToggleKubeResources}
           />
         )}
       </Transition>