From 76d678dbf9f0b7df4f684f3c14e06718a2da8915 Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Mon, 28 Oct 2024 13:34:09 -0700
Subject: [PATCH] [v17] Web/Teleterm: add support for requesting for kube
 namespaces (#48015)

* Web: add support for requesting for kube namespaces

* Teleterm: add support for access requesting kube namespaces (#47347)
---
 web/packages/design/src/DataTable/Table.tsx   |  28 +-
 web/packages/design/src/DataTable/types.ts    |   8 +
 web/packages/design/src/Link/Link.jsx         |   1 -
 .../NewRequest/CheckableOption.tsx            |  48 +++
 .../NewRequest/RequestCheckout/CrossIcon.tsx  |  58 +++
 .../RequestCheckout/KubeNamespaceSelector.tsx | 211 ++++++++++
 .../RequestCheckout/RequestCheckout.story.tsx |  21 +
 .../RequestCheckout/RequestCheckout.test.tsx  |   2 +
 .../RequestCheckout/RequestCheckout.tsx       | 385 ++++++++++++------
 .../NewRequest/RequestCheckout/index.ts       |   6 +-
 .../NewRequest/ResourceList/Apps.tsx          |   4 +-
 .../NewRequest/ResourceList/ResourceList.tsx  |   6 +-
 .../AccessRequests/NewRequest/index.ts        |   4 +-
 .../AccessRequests/NewRequest/kube.test.ts    |  61 +++
 .../AccessRequests/NewRequest/kube.ts         |  94 +++++
 .../AccessRequests/NewRequest/resource.ts     |  10 +-
 .../components/AccessRequests/Shared/utils.ts |   3 +-
 .../components/FieldSelect/FieldSelect.tsx    |  52 ++-
 .../shared/components/FieldSelect/shared.tsx  |  14 +-
 .../services/accessRequests/accessRequests.ts |   4 +-
 web/packages/shared/utils/text.test.ts        |  38 +-
 web/packages/shared/utils/text.ts             |  25 ++
 .../teleport/src/AccessRequests/service.ts    |   5 +-
 .../teleport/src/AccessRequests/types.ts      |   8 +-
 web/packages/teleport/src/config.ts           |   2 +-
 .../AccessRequestCheckout.tsx                 | 205 +++++-----
 .../useAccessRequestCheckout.test.tsx         | 120 ++++++
 .../useAccessRequestCheckout.ts               | 138 +++++--
 .../NewRequest/NewRequest.tsx                 |   1 +
 .../NewRequest/useNewRequest.ts               |  22 +-
 .../ui/DocumentCluster/UnifiedResources.tsx   |   2 +-
 .../accessRequestsService.test.ts             |  10 +-
 .../accessRequestsService.ts                  |  80 +++-
 33 files changed, 1374 insertions(+), 302 deletions(-)
 create mode 100644 web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx
 create mode 100644 web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx
 create mode 100644 web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
 create mode 100644 web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
 create mode 100644 web/packages/shared/components/AccessRequests/NewRequest/kube.ts

diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
index 8f3b9bc8bcaa5..d028e1b18a844 100644
--- a/web/packages/design/src/DataTable/Table.tsx
+++ b/web/packages/design/src/DataTable/Table.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, PropsWithChildren } from 'react';
 
 import { Box, Flex, Indicator, P1, Text } from 'design';
 import * as Icons from 'design/Icon';
@@ -108,6 +108,22 @@ export default function Table<T>(props: TableProps<T>) {
       return <LoadingIndicator colSpan={columns.length} />;
     }
     data.map((item, rowIdx) => {
+      const TableRow: React.FC<PropsWithChildren> = ({ children }) => (
+        <tr
+          key={rowIdx}
+          onClick={() => row?.onClick?.(item)}
+          style={row?.getStyle?.(item)}
+        >
+          {children}
+        </tr>
+      );
+
+      const customRow = row?.customRow?.(item);
+      if (customRow) {
+        rows.push(<TableRow key={rowIdx}>{customRow}</TableRow>);
+        return;
+      }
+
       const cells = columns.flatMap((column, columnIdx) => {
         if (column.isNonRender) {
           return []; // does not include this column.
@@ -125,15 +141,7 @@ export default function Table<T>(props: TableProps<T>) {
           </React.Fragment>
         );
       });
-      rows.push(
-        <tr
-          key={rowIdx}
-          onClick={() => row?.onClick?.(item)}
-          style={row?.getStyle?.(item)}
-        >
-          {cells}
-        </tr>
-      );
+      rows.push(<TableRow key={rowIdx}>{cells}</TableRow>);
     });
 
     if (rows.length) {
diff --git a/web/packages/design/src/DataTable/types.ts b/web/packages/design/src/DataTable/types.ts
index afe803116613a..9f5ec0490653c 100644
--- a/web/packages/design/src/DataTable/types.ts
+++ b/web/packages/design/src/DataTable/types.ts
@@ -79,6 +79,14 @@ export type TableProps<T> = {
      * conditionally style a row (eg: cursor: pointer, disabled)
      */
     getStyle?(row: T): React.CSSProperties;
+    /**
+     * conditionally render a custom row
+     * use case: by default all columns are represented by cells
+     * but certain rows you need all the columns to be merged
+     * into one cell to render other related elements like a
+     * dropdown selector.
+     */
+    customRow?(row: T): JSX.Element;
   };
 };
 
diff --git a/web/packages/design/src/Link/Link.jsx b/web/packages/design/src/Link/Link.jsx
index 957be80a5f7be..260c31f85094b 100644
--- a/web/packages/design/src/Link/Link.jsx
+++ b/web/packages/design/src/Link/Link.jsx
@@ -31,7 +31,6 @@ const StyledButtonLink = styled.a.attrs({
   rel: 'noreferrer',
 })`
   color: ${({ theme }) => theme.colors.buttons.link.default};
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx b/web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx
new file mode 100644
index 0000000000000..f10b940050628
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/CheckableOption.tsx
@@ -0,0 +1,48 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { Flex, Text } from 'design';
+import { components, OptionProps } from 'react-select';
+
+import { Option as BaseOption } from 'shared/components/Select';
+
+export type Option = BaseOption & {
+  isAdded?: boolean;
+  kind: 'app' | 'user_group' | 'namespace';
+};
+
+export const CheckableOptionComponent = (
+  props: OptionProps<Option> & { data: Option }
+) => {
+  const { data } = props;
+  return (
+    <components.Option {...props}>
+      <Flex alignItems="center" py="8px" px="12px">
+        <input
+          type="checkbox"
+          checked={data.isAdded || props.isSelected}
+          readOnly
+          name={data.value}
+          id={data.value}
+        />{' '}
+        <Text ml={1}>{data.label}</Text>
+      </Flex>
+    </components.Option>
+  );
+};
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx
new file mode 100644
index 0000000000000..c65c54bf5d2d9
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/CrossIcon.tsx
@@ -0,0 +1,58 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Cross } from 'design/Icon';
+
+import { Attempt } from 'shared/hooks/useAttemptNext';
+
+export function CrossIcon<T>({
+  clearAttempt,
+  toggleResource,
+  item,
+  createAttempt,
+}: {
+  clearAttempt: () => void;
+  toggleResource: (resource: T) => void;
+  item: T;
+  createAttempt: Attempt;
+}) {
+  return (
+    <Cross
+      size="small"
+      borderRadius={2}
+      p={2}
+      onClick={() => {
+        clearAttempt();
+        toggleResource(item);
+      }}
+      disabled={createAttempt.status === 'processing'}
+      css={`
+        cursor: pointer;
+
+        background-color: ${({ theme }) =>
+          theme.colors.buttons.trashButton.default};
+        border-radius: 2px;
+
+        &:hover {
+          background-color: ${({ theme }) =>
+            theme.colors.buttons.trashButton.hover};
+        }
+      `}
+    />
+  );
+}
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
new file mode 100644
index 0000000000000..dc4221942bc63
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -0,0 +1,211 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useState } from 'react';
+import styled from 'styled-components';
+import { Box } from 'design';
+import { ActionMeta } from 'react-select';
+
+import { Option } from 'shared/components/Select';
+import { FieldSelectAsync } from 'shared/components/FieldSelect';
+
+import { requiredField } from 'shared/components/Validation/rules';
+
+import { CheckableOptionComponent } from '../CheckableOption';
+
+import { PendingListItem, PendingKubeResourceItem } from './RequestCheckout';
+
+import type { KubeNamespaceRequest } from '../kube';
+
+export function KubeNamespaceSelector({
+  kubeClusterItem,
+  fetchKubeNamespaces,
+  savedResourceItems,
+  toggleResource,
+  bulkToggleKubeResources,
+  namespaceRequired,
+}: {
+  kubeClusterItem: PendingListItem;
+  fetchKubeNamespaces(p: KubeNamespaceRequest): Promise<string[]>;
+  savedResourceItems: PendingListItem[];
+  toggleResource: (resource: PendingListItem) => void;
+  bulkToggleKubeResources: (
+    resources: PendingKubeResourceItem[],
+    resource: PendingListItem
+  ) => void;
+  namespaceRequired: boolean;
+}) {
+  // Flag is used to determine if we need to perform batch action
+  // eg: When menu is open, we want to apply changes only after
+  // user closes the menu. Actions performed when menu is closed
+  // requires immediate changes such as clicking on delete or clear
+  // all button.
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  // This is required to support loading options after a user has
+  // clicked open a dropdown, and supports saving this initial
+  // options for future (clicking the dropdown again).
+  const [initOptions, setInitOptions] = useState<Option[]>([]);
+
+  const currKubeClustersNamespaceItems = savedResourceItems.filter(
+    resource =>
+      resource.kind === 'namespace' && resource.id === kubeClusterItem.id
+  ) as PendingKubeResourceItem[];
+
+  const [selectedOpts, setSelectedOpts] = useState<Option[]>(() =>
+    currKubeClustersNamespaceItems.map(namespace => ({
+      label: namespace.subResourceName,
+      value: namespace.subResourceName,
+    }))
+  );
+
+  function handleChange(options: Option[], actionMeta: ActionMeta<Option>) {
+    if (isMenuOpen) {
+      setSelectedOpts(options);
+      return;
+    }
+
+    switch (actionMeta.action) {
+      case 'clear':
+        bulkToggleKubeResources(
+          currKubeClustersNamespaceItems,
+          kubeClusterItem
+        );
+        return;
+      case 'remove-value':
+        toggleResource({
+          kind: 'namespace',
+          id: kubeClusterItem.id,
+          subResourceName: actionMeta.removedValue.value,
+          clusterName: kubeClusterItem.clusterName,
+          name: actionMeta.removedValue.value,
+        });
+        return;
+    }
+  }
+
+  const handleMenuClose = () => {
+    setIsMenuOpen(false);
+
+    const currNamespaces = currKubeClustersNamespaceItems.map(
+      n => n.subResourceName
+    );
+    const selectedNamespaceIds = selectedOpts.map(o => o.value);
+    const toKeep = selectedNamespaceIds.filter(id =>
+      currNamespaces.includes(id)
+    );
+
+    const toInsert = selectedNamespaceIds.filter(o => !toKeep.includes(o));
+    const toRemove = currNamespaces.filter(n => !toKeep.includes(n));
+
+    if (!toInsert.length && !toRemove.length) {
+      return;
+    }
+
+    bulkToggleKubeResources(
+      [...toRemove, ...toInsert].map(namespace => ({
+        kind: 'namespace',
+        id: kubeClusterItem.id,
+        subResourceName: namespace,
+        clusterName: kubeClusterItem.clusterName,
+        name: namespace,
+      })),
+      kubeClusterItem
+    );
+  };
+
+  async function handleLoadOptions(input: string) {
+    const namespaces = await fetchKubeNamespaces({
+      kubeCluster: kubeClusterItem.id,
+      search: input,
+    });
+
+    return namespaces.map(namespace => ({
+      kind: 'namespace',
+      value: namespace,
+      label: namespace,
+    }));
+  }
+
+  return (
+    <Box width="100%" mb={-3}>
+      <StyledSelect
+        label={`Namespaces${namespaceRequired ? ' (required)' : ''}:`}
+        inputId={kubeClusterItem.id}
+        width="100%"
+        placeholder="Start typing a namespace and press enter"
+        isMulti
+        isClearable={false}
+        isSearchable
+        closeMenuOnSelect={false}
+        hideSelectedOptions={false}
+        onMenuClose={handleMenuClose}
+        onMenuOpen={() => setIsMenuOpen(true)}
+        components={{
+          Option: CheckableOptionComponent,
+        }}
+        loadOptions={handleLoadOptions}
+        onChange={handleChange}
+        value={selectedOpts}
+        menuPosition="fixed" /* required to render dropdown out of its row */
+        rule={
+          namespaceRequired
+            ? requiredField('namespace selection required')
+            : undefined
+        }
+        initOptionsOnMenuOpen={(opts: Option[]) => setInitOptions(opts)}
+        defaultOptions={initOptions}
+      />
+    </Box>
+  );
+}
+
+const StyledSelect = styled(FieldSelectAsync)`
+  input[type='checkbox'] {
+    cursor: pointer;
+  }
+
+  .react-select__control {
+    font-size: ${p => p.theme.fontSizes[1]}px;
+    width: 350px;
+    background: ${p => p.theme.colors.levels.elevated};
+
+    &:hover {
+      background: ${p => p.theme.colors.levels.elevated};
+    }
+  }
+
+  .react-select__menu {
+    font-size: ${p => p.theme.fontSizes[1]}px;
+    width: 350px;
+    right: 0;
+    margin-bottom: 0;
+  }
+
+  .react-select__option {
+    padding: 0;
+    font-size: ${p => p.theme.fontSizes[1]}px;
+  }
+
+  .react-select__value-container {
+    position: static;
+  }
+
+  .react-select__placeholder {
+    color: ${p => p.theme.colors.text.main};
+  }
+`;
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 865ed0a98a025..693b08ace5409 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
@@ -152,6 +152,20 @@ export const FailedResourceRequest = () => (
   </MemoryRouter>
 );
 
+export const FailedUnsupportedKubeResourceKind = () => (
+  <MemoryRouter>
+    <RequestCheckoutWithSlider
+      {...baseProps}
+      isResourceRequest={true}
+      fetchResourceRequestRolesAttempt={{
+        status: 'failed',
+        statusText:
+          'Your Teleport roles request_mode field restricts you from requesting kinds [kube_cluster] for Kubernetes cluster "pumpkin-kube-cluster". Allowed kinds: [pod secret]',
+      }}
+    />
+  </MemoryRouter>
+);
+
 export const Success = () => (
   <MemoryRouter initialEntries={['']}>
     <RequestCheckoutWithSlider
@@ -164,6 +178,13 @@ export const Success = () => (
 );
 
 const baseProps: RequestCheckoutWithSliderProps = {
+  fetchKubeNamespaces: async () => [
+    'namespace1',
+    'namespace2',
+    'namespace3',
+    'namespace4',
+  ],
+  bulkToggleKubeResources: () => null,
   createAttempt: { status: '' },
   fetchResourceRequestRolesAttempt: { status: '' },
   isResourceRequest: false,
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 974a2498b92ad..21a4dcccc23eb 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.test.tsx
@@ -174,4 +174,6 @@ const props: RequestCheckoutWithSliderProps = {
   dryRunResponse: null,
   startTime: null,
   onStartTimeChange: () => null,
+  fetchKubeNamespaces: () => null,
+  bulkToggleKubeResources: () => null,
 };
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
index ee1dc315d360a..34253a22854d6 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
@@ -30,39 +30,43 @@ import {
   Image,
   Indicator,
   LabelInput,
+  Link as ExternalLink,
   P3,
   Subtitle2,
   Text,
+  Mark,
 } from 'design';
-import {
-  ArrowBack,
-  ChevronDown,
-  ChevronRight,
-  Warning,
-  Cross,
-} from 'design/Icon';
+import { ArrowBack, ChevronDown, ChevronRight, Warning } from 'design/Icon';
 import Table, { Cell } from 'design/DataTable';
 import { Danger } from 'design/Alert';
 
 import Validation, { useRule, Validator } from 'shared/components/Validation';
 import { Attempt } from 'shared/hooks/useAttemptNext';
-import { pluralize } from 'shared/utils/text';
+import { listToSentence, pluralize } from 'shared/utils/text';
 import { Option } from 'shared/components/Select';
 import { FieldCheckbox } from 'shared/components/FieldCheckbox';
 import { mergeRefs } from 'shared/libs/mergeRefs';
+import { TextSelectCopyMulti } from 'shared/components/TextSelectCopy';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
 import { CreateRequest } from '../../Shared/types';
 import { AssumeStartTime } from '../../AssumeStartTime/AssumeStartTime';
 import { AccessDurationRequest } from '../../AccessDuration';
+import {
+  checkForUnsupportedKubeRequestModes,
+  isKubeClusterWithNamespaces,
+  type KubeNamespaceRequest,
+} from '../kube';
 
 import { ReviewerOption } from './types';
 import shieldCheck from './shield-check.png';
 import { SelectReviewers } from './SelectReviewers';
 import { AdditionalOptions } from './AdditionalOptions';
+import { KubeNamespaceSelector } from './KubeNamespaceSelector';
+import { CrossIcon } from './CrossIcon';
 
 import type { TransitionStatus } from 'react-transition-group';
 import type { AccessRequest } from 'shared/services/accessRequests';
-import type { ResourceKind } from '../resource';
 
 export const RequestCheckoutWithSlider = forwardRef<
   HTMLDivElement,
@@ -164,8 +168,11 @@ export function RequestCheckout<T extends PendingListItem>({
   Header,
   startTime,
   onStartTimeChange,
+  fetchKubeNamespaces,
+  bulkToggleKubeResources,
 }: RequestCheckoutProps<T>) {
   const [reason, setReason] = useState('');
+
   function updateReason(reason: string) {
     setReason(reason);
   }
@@ -184,6 +191,16 @@ export function RequestCheckout<T extends PendingListItem>({
     });
   }
 
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes(fetchResourceRequestRolesAttempt);
+
+  const hasUnsupportedKubeRequestModes = !!unsupportedKubeRequestModes;
+  const showRequestRoleErrBanner =
+    !hasUnsupportedKubeRequestModes && !requiresNamespaceSelect;
+
   const isInvalidRoleSelection =
     resourceRequestRoles.length > 0 &&
     isResourceRequest &&
@@ -193,10 +210,18 @@ export function RequestCheckout<T extends PendingListItem>({
     pendingAccessRequests.length === 0 ||
     createAttempt.status === 'processing' ||
     isInvalidRoleSelection ||
-    fetchResourceRequestRolesAttempt.status === 'failed' ||
+    (fetchResourceRequestRolesAttempt.status === 'failed' &&
+      hasUnsupportedKubeRequestModes) ||
+    requiresNamespaceSelect ||
+    fetchResourceRequestRolesAttempt.status === 'processing';
+
+  const cancelBtnDisabled =
+    createAttempt.status === 'processing' ||
     fetchResourceRequestRolesAttempt.status === 'processing';
 
-  const numPendingAccessRequests = pendingAccessRequests.length;
+  const numPendingAccessRequests = pendingAccessRequests.filter(
+    item => !isKubeClusterWithNamespaces(item, pendingAccessRequests)
+  ).length;
 
   const DefaultHeader = () => {
     return (
@@ -218,124 +243,192 @@ export function RequestCheckout<T extends PendingListItem>({
     );
   };
 
-  return (
-    <>
-      {fetchResourceRequestRolesAttempt.status === 'failed' && (
-        <Alert
-          kind="danger"
-          children={fetchResourceRequestRolesAttempt.statusText}
-        />
-      )}
-      {fetchStatus === 'loading' && (
-        <Box mt={5} textAlign="center">
-          <Indicator />
-        </Box>
-      )}
-
-      {fetchStatus === 'loaded' && (
-        <div>
-          {createAttempt.status === 'success' ? (
-            <>
-              <Box>
-                <Box as="header" mt={2} mb={7} textAlign="center">
-                  <H2 mb={1}>Resources Requested Successfully</H2>
-                  <Subtitle2 color="text.slightlyMuted">
-                    You've successfully requested {numRequestedResources}{' '}
-                    {pluralize(numRequestedResources, 'resource')}
-                  </Subtitle2>
-                </Box>
-                <Flex justifyContent="center" mb={3}>
-                  <Image src={shieldCheck} width="250px" height="179px" />
-                </Flex>
-              </Box>
-              <SuccessComponent onClose={onClose} reset={reset} />
-            </>
-          ) : (
-            <>
-              {Header?.() || DefaultHeader()}
-              {createAttempt.status === 'failed' && (
-                <Alert kind="danger" children={createAttempt.statusText} />
-              )}
-              <StyledTable
-                data={pendingAccessRequests}
-                columns={[
-                  {
-                    key: 'clusterName',
-                    headerText: 'Cluster Name',
-                    isNonRender: !showClusterNameColumn,
-                  },
-                  {
-                    key: 'kind',
-                    headerText: 'Type',
-                    render: item => (
-                      <Cell>{getPrettyResourceKind(item.kind)}</Cell>
-                    ),
-                  },
-                  {
-                    key: 'name',
-                    headerText: 'Name',
-                  },
-                  {
-                    altKey: 'delete-btn',
-                    render: resource => (
-                      <Cell align="right">
-                        <Cross
-                          size="small"
-                          borderRadius={2}
-                          p={2}
-                          onClick={() => {
-                            clearAttempt();
-                            toggleResource(resource);
-                          }}
-                          disabled={createAttempt.status === 'processing'}
-                          css={`
-                            cursor: pointer;
-
-                            background-color: ${({ theme }) =>
-                              theme.colors.buttons.trashButton.default};
-                            border-radius: 2px;
-
-                            &:hover {
-                              background-color: ${({ theme }) =>
-                                theme.colors.buttons.trashButton.hover};
-                            }
-                          `}
-                        />
-                      </Cell>
-                    ),
-                  },
-                ]}
-                emptyText="No resources are selected"
-              />
-              {userGroupFetchAttempt?.status === 'processing' && (
-                <Flex mt={4} alignItems="center" justifyContent="center">
-                  <Indicator size="small" />
+  function customRow(item: T) {
+    if (item.kind === 'kube_cluster') {
+      return (
+        <td colSpan={3}>
+          <Flex>
+            <Flex flexWrap="wrap">
+              <Flex
+                gap={2}
+                justifyContent="space-between"
+                width="100%"
+                alignItems="center"
+              >
+                <Flex gap={5}>
+                  <Box>{getPrettyResourceKind(item.kind)}</Box>
+                  <Box>{item.name}</Box>
                 </Flex>
-              )}
-              {userGroupFetchAttempt?.status === 'failed' && (
-                <Danger mt={4}>{userGroupFetchAttempt.statusText}</Danger>
-              )}
-              {userGroupFetchAttempt?.status === 'success' &&
-                appsGrantedByUserGroup.length > 0 && (
-                  <AppsGrantedAccess apps={appsGrantedByUserGroup} />
-                )}
-              {isResourceRequest && (
-                <ResourceRequestRoles
-                  roles={resourceRequestRoles}
-                  selectedRoles={selectedResourceRequestRoles}
-                  setSelectedRoles={setSelectedResourceRequestRoles}
-                  fetchAttempt={fetchResourceRequestRolesAttempt}
+                <CrossIcon
+                  clearAttempt={clearAttempt}
+                  item={item}
+                  toggleResource={toggleResource}
+                  createAttempt={createAttempt}
                 />
-              )}
-              <Box mt={6} mb={1}>
-                <SelectReviewers
-                  reviewers={dryRunResponse?.reviewers.map(r => r.name) ?? []}
-                  selectedReviewers={selectedReviewers}
-                  setSelectedReviewers={setSelectedReviewers}
+              </Flex>
+              <KubeNamespaceSelector
+                kubeClusterItem={item}
+                savedResourceItems={pendingAccessRequests}
+                toggleResource={toggleResource}
+                fetchKubeNamespaces={fetchKubeNamespaces}
+                bulkToggleKubeResources={bulkToggleKubeResources}
+                namespaceRequired={
+                  requiresNamespaceSelect &&
+                  affectedKubeClusterName.includes(item.id)
+                }
+              />
+            </Flex>
+          </Flex>
+        </td>
+      );
+    }
+  }
+
+  return (
+    <Validation>
+      {({ validator }) => (
+        <>
+          {showRequestRoleErrBanner &&
+            fetchResourceRequestRolesAttempt.status === 'failed' && (
+              <Alert
+                kind="danger"
+                children={fetchResourceRequestRolesAttempt.statusText}
+              />
+            )}
+          {hasUnsupportedKubeRequestModes && (
+            <Alert kind="danger">
+              <Text mb={2}>
+                You can only request Kubernetes resource{' '}
+                {pluralize(unsupportedKubeRequestModes.length, 'kind')}{' '}
+                <Mark>{listToSentence(unsupportedKubeRequestModes)}</Mark> for
+                cluster <Mark>{affectedKubeClusterName}</Mark>. Requesting those
+                resource kinds is currently only supported through the{' '}
+                <ExternalLink
+                  target="_blank"
+                  href="https://goteleport.com/docs/connect-your-client/tsh/#installing-tsh"
+                >
+                  tsh CLI tool
+                </ExternalLink>
+                . Use the{' '}
+                <ExternalLink
+                  target="_blank"
+                  href="https://goteleport.com/docs/admin-guides/access-controls/access-requests/resource-requests/#search-for-kubernetes-resources"
+                >
+                  tsh request search
+                </ExternalLink>{' '}
+                command that will help you construct the request.
+              </Text>
+              <Box width="360px">
+                Example:
+                <TextSelectCopyMulti
+                  lines={[
+                    {
+                      text: `tsh request search --kind=${unsupportedKubeRequestModes[0]} --kube-cluster=${affectedKubeClusterName} --all-kube-namespaces`,
+                    },
+                  ]}
                 />
               </Box>
-              <Validation>
-                {({ validator }) => (
+            </Alert>
+          )}
+          {fetchStatus === 'loading' && (
+            <Box mt={5} textAlign="center">
+              <Indicator />
+            </Box>
+          )}
+
+          {fetchStatus === 'loaded' && (
+            <div>
+              {createAttempt.status === 'success' ? (
+                <>
+                  <Box>
+                    <Box as="header" mt={2} mb={7} textAlign="center">
+                      <H2 mb={1}>Resources Requested Successfully</H2>
+                      <Subtitle2 color="text.slightlyMuted">
+                        You've successfully requested {numRequestedResources}{' '}
+                        {pluralize(numRequestedResources, 'resource')}
+                      </Subtitle2>
+                    </Box>
+                    <Flex justifyContent="center" mb={3}>
+                      <Image src={shieldCheck} width="250px" height="179px" />
+                    </Flex>
+                  </Box>
+                  <SuccessComponent onClose={onClose} reset={reset} />
+                </>
+              ) : (
+                <>
+                  {Header?.() || DefaultHeader()}
+                  {createAttempt.status === 'failed' && (
+                    <Alert kind="danger" children={createAttempt.statusText} />
+                  )}
+                  <StyledTable
+                    data={pendingAccessRequests.filter(
+                      d => d.kind !== 'namespace'
+                    )}
+                    row={{
+                      customRow,
+                    }}
+                    columns={[
+                      {
+                        key: 'clusterName',
+                        headerText: 'Cluster Name',
+                        isNonRender: !showClusterNameColumn,
+                      },
+                      {
+                        key: 'kind',
+                        headerText: 'Type',
+                        render: item => (
+                          <Cell>{getPrettyResourceKind(item.kind)}</Cell>
+                        ),
+                      },
+                      {
+                        key: 'name',
+                        headerText: 'Name',
+                      },
+                      {
+                        altKey: 'delete-btn',
+                        render: resource => (
+                          <Cell align="right">
+                            <CrossIcon
+                              clearAttempt={clearAttempt}
+                              item={resource}
+                              toggleResource={toggleResource}
+                              createAttempt={createAttempt}
+                            />
+                          </Cell>
+                        ),
+                      },
+                    ]}
+                    emptyText="No resources are selected"
+                  />
+                  {userGroupFetchAttempt?.status === 'processing' && (
+                    <Flex mt={4} alignItems="center" justifyContent="center">
+                      <Indicator size="small" />
+                    </Flex>
+                  )}
+                  {userGroupFetchAttempt?.status === 'failed' && (
+                    <Danger mt={4}>{userGroupFetchAttempt.statusText}</Danger>
+                  )}
+                  {userGroupFetchAttempt?.status === 'success' &&
+                    appsGrantedByUserGroup.length > 0 && (
+                      <AppsGrantedAccess apps={appsGrantedByUserGroup} />
+                    )}
+                  {isResourceRequest && (
+                    <ResourceRequestRoles
+                      roles={resourceRequestRoles}
+                      selectedRoles={selectedResourceRequestRoles}
+                      setSelectedRoles={setSelectedResourceRequestRoles}
+                      fetchAttempt={fetchResourceRequestRolesAttempt}
+                    />
+                  )}
+                  <Box mt={6} mb={1}>
+                    <SelectReviewers
+                      reviewers={
+                        dryRunResponse?.reviewers.map(r => r.name) ?? []
+                      }
+                      selectedReviewers={selectedReviewers}
+                      setSelectedReviewers={setSelectedReviewers}
+                    />
+                  </Box>
                   <Flex mt={6} flexDirection="column" gap={1}>
                     {dryRunResponse && (
                       <Box mb={1}>
@@ -394,19 +487,19 @@ export function RequestCheckout<T extends PendingListItem>({
                           reset();
                           onClose();
                         }}
-                        disabled={submitBtnDisabled}
+                        disabled={cancelBtnDisabled}
                       >
                         Cancel
                       </ButtonSecondary>
                     </Flex>
                   </Flex>
-                )}
-              </Validation>
-            </>
+                </>
+              )}
+            </div>
           )}
-        </div>
+        </>
       )}
-    </>
+    </Validation>
   );
 }
 
@@ -549,7 +642,7 @@ function ResourceRequestRoles({
           {roles.map((roleName, index) => {
             const checked = selectedRoles.includes(roleName);
             return (
-              <RoleRowContainer checked={checked}>
+              <RoleRowContainer checked={checked} key={index}>
                 <StyledFieldCheckbox
                   key={index}
                   name={roleName}
@@ -678,7 +771,7 @@ function TextBox({
   );
 }
 
-function getPrettyResourceKind(kind: ResourceKind): string {
+function getPrettyResourceKind(kind: RequestableResourceKind): string {
   switch (kind) {
     case 'role':
       return 'Role';
@@ -698,6 +791,8 @@ function getPrettyResourceKind(kind: ResourceKind): string {
       return 'Desktop';
     case 'saml_idp_service_provider':
       return 'SAML Application';
+    case 'namespace':
+      return 'Namespace';
     default:
       kind satisfies never;
       return kind;
@@ -775,14 +870,31 @@ export type RequestCheckoutWithSliderProps<
 } & RequestCheckoutProps<T>;
 
 export interface PendingListItem {
-  kind: ResourceKind;
+  kind: RequestableResourceKind;
   /** Name of the resource, for presentation purposes only. */
   name: string;
   /** Identifier of the resource. Should be sent in requests. */
   id: string;
   clusterName?: string;
+  /**
+   * This field must be defined if a user is requesting subresources.
+   *
+   * Example:
+   * "kube_cluster" resource can have subresources such as "namespace".
+   * Example PendingListItem values if user is requesting a kubes namespace:
+   *   - kind: const "namespace"
+   *   - id: name of the kube_cluster
+   *   - subResourceName: name of the kube_cluster's namespace
+   *   - clusterName: name of teleport cluster where kube_cluster is located
+   *   - name: same as subResourceName as this is what we want to display to user
+   * */
+  subResourceName?: string;
 }
 
+export type PendingKubeResourceItem = Omit<PendingListItem, 'kind'> & {
+  kind: Extract<RequestableResourceKind, 'namespace'>;
+};
+
 export type RequestCheckoutProps<T extends PendingListItem = PendingListItem> =
   {
     onClose(): void;
@@ -816,6 +928,11 @@ export type RequestCheckoutProps<T extends PendingListItem = PendingListItem> =
     Header?: () => JSX.Element;
     startTime: Date;
     onStartTimeChange(t?: Date): void;
+    fetchKubeNamespaces(p: KubeNamespaceRequest): Promise<string[]>;
+    bulkToggleKubeResources(
+      kubeResources: PendingKubeResourceItem[],
+      kubeCluster: T
+    ): void;
   };
 
 type SuccessComponentParams = {
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/index.ts
index 95712e2755a15..9e727450cd3e1 100644
--- 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/ResourceList/Apps.tsx b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
index 33e01c9fa7675..5488ceeedaefd 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
@@ -30,7 +30,7 @@ import Select, {
 } from 'shared/components/Select';
 import { ToolTipInfo } from 'shared/components/ToolTip';
 
-import { ResourceMap, ResourceKind } from '../resource';
+import { ResourceMap, RequestableResourceKind } from '../resource';
 
 import { ListProps, StyledTable } from './ResourceList';
 
@@ -125,7 +125,7 @@ function ActionCell({
   agent: App;
   addedResources: ResourceMap;
   addOrRemoveResource: (
-    kind: ResourceKind,
+    kind: RequestableResourceKind,
     resourceId: string,
     resourceName?: string
   ) => void;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx
index 1828fce8d7298..2981f1175ebd3 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/ResourceList.tsx
@@ -30,7 +30,7 @@ import { CustomSort } from 'design/DataTable/types';
 
 import { ResourceLabel, UnifiedResource } from 'teleport/services/agents';
 
-import { ResourceMap, ResourceKind } from '../resource';
+import { ResourceMap, RequestableResourceKind } from '../resource';
 
 import { Apps } from './Apps';
 import { Databases } from './Databases';
@@ -126,7 +126,7 @@ export type ListProps = {
   onLabelClick: (label: ResourceLabel) => void;
   addedResources: ResourceMap;
   addOrRemoveResource: (
-    kind: ResourceKind,
+    kind: RequestableResourceKind,
     resourceId: string,
     resourceName?: string
   ) => void;
@@ -135,7 +135,7 @@ export type ListProps = {
 
 export type ResourceListProps = {
   agents: UnifiedResource[];
-  selectedResource: ResourceKind;
+  selectedResource: RequestableResourceKind;
   // disableRows disable clicking on any buttons (when fetching).
   disableRows: boolean;
 } & ListProps;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
index 46181260d19f7..9074113221b16 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/index.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
@@ -18,5 +18,7 @@
 
 export * from './RequestCheckout';
 export * from './ResourceList';
-export type { ResourceMap, ResourceKind } from './resource';
+export type { ResourceMap, RequestableResourceKind } from './resource';
 export { getEmptyResourceState } from './resource';
+export type { KubeNamespaceRequest } from './kube';
+export { isKubeClusterWithNamespaces } from './kube';
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts b/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
new file mode 100644
index 0000000000000..33e136e0dc038
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
@@ -0,0 +1,61 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { checkForUnsupportedKubeRequestModes } from './kube';
+
+test('checkForUnsupportedKubeRequestModes: non failed status', () => {
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes({ status: '' });
+
+  expect(affectedKubeClusterName).toBeFalsy();
+  expect(unsupportedKubeRequestModes).toBeFalsy();
+  expect(requiresNamespaceSelect).toBeFalsy();
+});
+
+test('checkForUnsupportedKubeRequestModes: failed status with unsupported kinds', () => {
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes({
+    status: 'failed',
+    statusText: `Your Teleport roles request_mode field restricts you from requesting kinds [kube_cluster] for Kubernetes cluster "pumpkin-kube-cluster". Allowed kinds: [pod secret]`,
+  });
+
+  expect(affectedKubeClusterName).toEqual(`pumpkin-kube-cluster`);
+  expect(unsupportedKubeRequestModes).toEqual(['pod', 'secret']);
+  expect(requiresNamespaceSelect).toBeFalsy();
+});
+
+test('checkForUnsupportedKubeRequestModes: failed status with supported namespace', () => {
+  const {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  } = checkForUnsupportedKubeRequestModes({
+    status: 'failed',
+    statusText: `Your Teleport roles request_mode field restricts you from requesting kinds [kube_cluster] for Kubernetes cluster "pumpkin-kube-cluster". Allowed kinds: [pod secret namespace]`,
+  });
+
+  expect(affectedKubeClusterName).toEqual(`pumpkin-kube-cluster`);
+  expect(unsupportedKubeRequestModes).toBeFalsy();
+  expect(requiresNamespaceSelect).toBeTruthy();
+});
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/kube.ts b/web/packages/shared/components/AccessRequests/NewRequest/kube.ts
new file mode 100644
index 0000000000000..e84ed46c972b4
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/kube.ts
@@ -0,0 +1,94 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Attempt } from 'shared/hooks/useAttemptNext';
+
+import { PendingListItem } from './RequestCheckout';
+
+export type KubeNamespaceRequest = {
+  kubeCluster: string;
+  search: string;
+};
+
+/**
+ * Returns true if the item is a kube cluster or is a namespace
+ * of the item.
+ *
+ * Technically you can request for both a kube_cluster and its subresources
+ * but it's probably not what a user would expect from the web UI because
+ * requesting for subresources means narrowing access versus requesting
+ * access to the whole kube_cluster.
+ */
+export function isKubeClusterWithNamespaces(
+  item: PendingListItem,
+  allItems: PendingListItem[]
+) {
+  return (
+    item.kind === 'kube_cluster' &&
+    allItems.find(a => a.kind === 'namespace' && a.id == item.id)
+  );
+}
+
+/**
+ * Checks each data for kube_cluster or namespace
+ */
+export function checkForUnsupportedKubeRequestModes(
+  requestRoleAttempt: Attempt
+) {
+  let unsupportedKubeRequestModes: string[];
+  let affectedKubeClusterName = '';
+  let requiresNamespaceSelect = false;
+
+  if (requestRoleAttempt.status === 'failed') {
+    const errMsg = requestRoleAttempt.statusText.toLowerCase();
+
+    if (errMsg.includes('request_mode') && errMsg.includes('allowed kinds: ')) {
+      let allowedKinds = errMsg.split('allowed kinds: ')[1];
+
+      // Web UI supports selecting namespace and wildcard
+      // which basically means requiring namespace.
+      if (allowedKinds.includes('*') || allowedKinds.includes('namespace')) {
+        requiresNamespaceSelect = true;
+      } else {
+        if (allowedKinds.startsWith('[')) {
+          allowedKinds = allowedKinds.slice(1, -1);
+        }
+        unsupportedKubeRequestModes = allowedKinds.split(' ');
+      }
+
+      const initialSplit = errMsg.split('for kubernetes cluster "');
+      if (initialSplit.length > 1) {
+        affectedKubeClusterName = initialSplit[1]
+          .split('". allowed kinds')[0]
+          .trim();
+      }
+
+      return {
+        affectedKubeClusterName,
+        requiresNamespaceSelect,
+        unsupportedKubeRequestModes,
+      };
+    }
+  }
+
+  return {
+    affectedKubeClusterName,
+    unsupportedKubeRequestModes,
+    requiresNamespaceSelect,
+  };
+}
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/resource.ts b/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
index 42070e9448283..f56ad58110d25 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
@@ -17,16 +17,21 @@
  */
 
 import { ResourceIdKind } from 'teleport/services/agents';
+import { KubeResourceKind } from 'teleport/services/kube';
 
 /** Available request kinds for resource-based and role-based access requests. */
-export type ResourceKind = ResourceIdKind | 'role' | 'resource';
+export type RequestableResourceKind =
+  | ResourceIdKind
+  | 'role'
+  | 'resource'
+  | Exclude<KubeResourceKind, '*'>;
 
 /**
  * Maps a resource ID (usually agent name) to resource description (usually the
  * same, but not necessarily).
  */
 export type ResourceMap = {
-  [K in ResourceIdKind | 'role']: Record<string, string>;
+  [K in Exclude<RequestableResourceKind, 'resource'>]: Record<string, string>;
 };
 
 export function getEmptyResourceState(): ResourceMap {
@@ -39,5 +44,6 @@ export function getEmptyResourceState(): ResourceMap {
     windows_desktop: {},
     role: {},
     saml_idp_service_provider: {},
+    namespace: {},
   };
 }
diff --git a/web/packages/shared/components/AccessRequests/Shared/utils.ts b/web/packages/shared/components/AccessRequests/Shared/utils.ts
index 1ac9a291328bf..6185e568c4c21 100644
--- a/web/packages/shared/components/AccessRequests/Shared/utils.ts
+++ b/web/packages/shared/components/AccessRequests/Shared/utils.ts
@@ -40,6 +40,7 @@ export function getNumAddedResources(addedResources: ResourceMap) {
     Object.keys(addedResources.kube_cluster).length +
     Object.keys(addedResources.user_group).length +
     Object.keys(addedResources.windows_desktop).length +
-    Object.keys(addedResources.saml_idp_service_provider).length
+    Object.keys(addedResources.saml_idp_service_provider).length +
+    Object.keys(addedResources.namespace).length
   );
 }
diff --git a/web/packages/shared/components/FieldSelect/FieldSelect.tsx b/web/packages/shared/components/FieldSelect/FieldSelect.tsx
index 90e875ee9868c..66007b24f18fc 100644
--- a/web/packages/shared/components/FieldSelect/FieldSelect.tsx
+++ b/web/packages/shared/components/FieldSelect/FieldSelect.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { GroupBase } from 'react-select';
+import { GroupBase, OptionsOrGroups } from 'react-select';
 
 import { useAsync } from 'shared/hooks/useAsync';
 
@@ -69,7 +69,28 @@ export function FieldSelectAsync<
   Opt = Option,
   IsMulti extends boolean = false,
   Group extends GroupBase<Opt> = GroupBase<Opt>,
->(props: AsyncSelectProps<Opt, IsMulti, Group> & FieldProps<Opt, IsMulti>) {
+>(
+  props: AsyncSelectProps<Opt, IsMulti, Group> &
+    FieldProps<Opt, IsMulti> & {
+      /**
+       * A function that sets the initial options, after the initial options are
+       * finished fetching (triggered by when user clicks on the select component
+       * that renders the dropdown menu).
+       *
+       * Select async doesn't provide an option for "on menu open, load options".
+       * There is only "on render load, or provide default array of options".
+       * There are some cases where there can be many select async components rendered
+       * (eg: bulk adding kube clusters to an access request) and users may not be
+       * required to select anything from the select async dropdown, so this provides
+       * a way to load options only on need (menu open) and save wasteful api calls.
+       *
+       * Requires:
+       *   - base.onMenuOpen to be defined
+       *   - defaultOptions to be an array
+       */
+      initOptionsOnMenuOpen?(options: OptionsOrGroups<Opt, Group>): void;
+    }
+) {
   const { base, wrapper, others } = splitSelectProps<
     Opt,
     IsMulti,
@@ -78,15 +99,35 @@ export function FieldSelectAsync<
   >(props, {
     defaultOptions: true,
   });
-  const { defaultOptions, loadOptions, ...styles } = others;
+  const { defaultOptions, loadOptions, initOptionsOnMenuOpen, ...styles } =
+    others;
   const [attempt, runAttempt] = useAsync(resolveUndefinedOptions(loadOptions));
+
+  async function onMenuOpen() {
+    if (!base.onMenuOpen) return;
+
+    base.onMenuOpen();
+
+    if (
+      initOptionsOnMenuOpen &&
+      defaultOptions &&
+      Array.isArray(defaultOptions) &&
+      defaultOptions.length == 0
+    ) {
+      const [options, error] = await runAttempt('', null);
+      if (!error) {
+        return others.initOptionsOnMenuOpen(options);
+      }
+    }
+  }
+
   return (
     <FieldSelectWrapper {...wrapper} {...styles}>
       <SelectAsync<Opt, IsMulti, Group>
         {...base}
+        onMenuOpen={onMenuOpen}
         defaultOptions={defaultOptions}
         loadOptions={async (value, callback) => {
-          console.log('loading');
           const [options, error] = await runAttempt(value, callback);
           if (error) {
             return [];
@@ -97,6 +138,9 @@ export function FieldSelectAsync<
           if (attempt.status === 'error') {
             return `Could not load options: ${attempt.statusText}`;
           }
+          if (attempt.status === 'processing') {
+            return 'Loading...';
+          }
           return base.noOptionsMessage?.(obj) ?? 'No options';
         }}
       />
diff --git a/web/packages/shared/components/FieldSelect/shared.tsx b/web/packages/shared/components/FieldSelect/shared.tsx
index a25768f5c2df1..03857ea3ac2ee 100644
--- a/web/packages/shared/components/FieldSelect/shared.tsx
+++ b/web/packages/shared/components/FieldSelect/shared.tsx
@@ -191,6 +191,10 @@ export function splitSelectProps<
     markAsError,
     maxMenuHeight,
     menuIsOpen,
+    onMenuOpen,
+    onMenuClose,
+    closeMenuOnSelect,
+    hideSelectedOptions,
     menuPosition,
     name,
     noOptionsMessage,
@@ -222,8 +226,12 @@ export function splitSelectProps<
       isMulti,
       isSearchable,
       maxMenuHeight,
-      menuIsOpen,
       menuPosition,
+      menuIsOpen,
+      onMenuOpen,
+      onMenuClose,
+      closeMenuOnSelect,
+      hideSelectedOptions,
       name,
       noOptionsMessage,
       onBlur,
@@ -267,6 +275,10 @@ type KeysRemovedFromOthers =
   | 'maxMenuHeight'
   | 'menuIsOpen'
   | 'menuPosition'
+  | 'onMenuOpen'
+  | 'onMenuClose'
+  | 'closeMenuOnSelect'
+  | 'hideSelectedOptions'
   | 'name'
   | 'noOptionsMessage'
   | 'onBlur'
diff --git a/web/packages/shared/services/accessRequests/accessRequests.ts b/web/packages/shared/services/accessRequests/accessRequests.ts
index 3b5517c393b4b..855e71e777ca3 100644
--- a/web/packages/shared/services/accessRequests/accessRequests.ts
+++ b/web/packages/shared/services/accessRequests/accessRequests.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ResourceIdKind } from 'teleport/services/agents';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
 export type RequestState =
   | 'NONE'
@@ -76,7 +76,7 @@ export type Resource = {
 // ResourceID is a unique identifier for a teleport resource.
 export type ResourceId = {
   // kind is the resource (agent) kind.
-  kind: ResourceIdKind;
+  kind: RequestableResourceKind;
   // name is the name of the specific resource.
   name: string;
   // clusterName is the name of cluster.
diff --git a/web/packages/shared/utils/text.test.ts b/web/packages/shared/utils/text.test.ts
index 0cd297f7b20d5..a76bb90fbb594 100644
--- a/web/packages/shared/utils/text.test.ts
+++ b/web/packages/shared/utils/text.test.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { pluralize, capitalizeFirstLetter } from './text';
+import { pluralize, capitalizeFirstLetter, listToSentence } from './text';
 
 test('pluralize', () => {
   expect(pluralize(0, 'apple')).toBe('apples');
@@ -30,3 +30,39 @@ test('capitalizeFirstLetter', () => {
   expect(capitalizeFirstLetter('hello')).toBe('Hello');
   expect(capitalizeFirstLetter('')).toBe('');
 });
+
+describe('listToSentence()', () => {
+  const testCases = [
+    {
+      name: 'no words',
+      list: [],
+      expected: '',
+    },
+    {
+      name: 'one word',
+      list: ['a'],
+      expected: 'a',
+    },
+    {
+      name: 'two words',
+      list: ['a', 'b'],
+      expected: 'a and b',
+    },
+    {
+      name: 'three words',
+      list: ['a', 'b', 'c'],
+      expected: 'a, b and c',
+    },
+    {
+      name: 'lost of words',
+      list: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
+      expected: 'a, b, c, d, e, f and g',
+    },
+  ];
+
+  test.each(testCases)('$name', ({ list, expected }) => {
+    const originalList = [...list];
+    expect(listToSentence(list)).toEqual(expected);
+    expect(list).toEqual(originalList);
+  });
+});
diff --git a/web/packages/shared/utils/text.ts b/web/packages/shared/utils/text.ts
index a424ea5bd9b14..37635c4c0bad2 100644
--- a/web/packages/shared/utils/text.ts
+++ b/web/packages/shared/utils/text.ts
@@ -39,3 +39,28 @@ export function capitalizeFirstLetter(str: string) {
   }
   return str[0].toUpperCase() + str.slice(1);
 }
+
+/**
+ * Takes a list of words and converts it into a sentence.
+ * eg: given list ["apple", "banana", "carrot"], converts
+ * to string "apple, banana and carrot"
+ *
+ * Does not modify original list.
+ */
+export function listToSentence(listOfWords: string[]) {
+  if (!listOfWords || !listOfWords.length) {
+    return '';
+  }
+
+  if (listOfWords.length == 1) {
+    return listOfWords[0];
+  }
+
+  if (listOfWords.length == 2) {
+    return `${listOfWords[0]} and ${listOfWords[1]}`;
+  }
+
+  const copiedList = [...listOfWords];
+  const lastWord = copiedList.pop();
+  return `${copiedList.join(', ')} and ${lastWord}`;
+}
diff --git a/web/packages/teleport/src/AccessRequests/service.ts b/web/packages/teleport/src/AccessRequests/service.ts
index 20637193ef24a..03b7e158d3f3b 100644
--- a/web/packages/teleport/src/AccessRequests/service.ts
+++ b/web/packages/teleport/src/AccessRequests/service.ts
@@ -18,7 +18,8 @@
 
 import { formatDuration } from 'date-fns';
 
-import { ResourceIdKind } from 'teleport/services/agents';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
+
 import api from 'teleport/services/api';
 import cfg from 'teleport/config';
 import {
@@ -41,7 +42,7 @@ export async function createAccessRequest(
     reason,
     roles,
     resourceIds: resources.map(item => ({
-      kind: item.type as ResourceIdKind,
+      kind: item.type as RequestableResourceKind,
       name: item.id,
       clusterName: clusterId,
     })),
diff --git a/web/packages/teleport/src/AccessRequests/types.ts b/web/packages/teleport/src/AccessRequests/types.ts
index 38fa71386729e..de08d61605961 100644
--- a/web/packages/teleport/src/AccessRequests/types.ts
+++ b/web/packages/teleport/src/AccessRequests/types.ts
@@ -16,15 +16,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import type { Option } from 'shared/components/Select';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
-import type { ResourceIdKind } from 'teleport/services/agents';
+import type { Option } from 'shared/components/Select';
 
 export type DurationOption = Option<number>;
 
 export interface Resource {
   id: {
-    kind: ResourceIdKind;
+    kind: RequestableResourceKind;
     name: string;
     clusterName: string;
     subResourceName?: string;
@@ -38,7 +38,7 @@ export interface Resource {
 type RequestState = 'NONE' | 'PENDING' | 'APPROVED' | 'DENIED' | 'APPLIED' | '';
 
 export interface ResourceId {
-  kind: ResourceIdKind;
+  kind: RequestableResourceKind;
   name: string;
   clusterName: string;
   subResourceName?: string;
diff --git a/web/packages/teleport/src/config.ts b/web/packages/teleport/src/config.ts
index b1e184d7d821d..a429bc7f60ef0 100644
--- a/web/packages/teleport/src/config.ts
+++ b/web/packages/teleport/src/config.ts
@@ -1270,7 +1270,7 @@ export interface UrlKubeResourcesParams {
   searchAsRoles?: 'yes' | '';
   kubeNamespace?: string;
   kubeCluster: string;
-  kind: KubeResourceKind;
+  kind: Omit<KubeResourceKind, '*'>;
 }
 
 export interface UrlDeployServiceIamConfigureScriptParams {
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
index 44e81b59b3822..dbcc521911839 100644
--- 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,6 +283,8 @@ export function AccessRequestCheckout() {
             setPendingRequestTtl={setPendingRequestTtl}
             startTime={startTime}
             onStartTimeChange={onStartTimeChange}
+            fetchKubeNamespaces={fetchKubeNamespaces}
+            bulkToggleKubeResources={bulkToggleKubeResources}
           />
         )}
       </Transition>
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx
index 11e5c955f2fc8..a4dc881042005 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx
@@ -21,11 +21,14 @@ import { renderHook, waitFor } from '@testing-library/react';
 import {
   makeRootCluster,
   makeServer,
+  makeKube,
   rootClusterUri,
 } from 'teleterm/services/tshd/testHelpers';
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvider';
 
+import { mapRequestToKubeNamespaceUri } from '../services/workspacesService/accessRequestsService';
+
 import useAccessRequestCheckout from './useAccessRequestCheckout';
 
 test('fetching requestable roles for servers uses UUID, not hostname', async () => {
@@ -64,3 +67,120 @@ test('fetching requestable roles for servers uses UUID, not hostname', async ()
     })
   );
 });
+
+test('fetching requestable roles for a kube_cluster resource without specifying a namespace', async () => {
+  const kube = makeKube();
+  const cluster = makeRootCluster();
+  const appContext = new MockAppContext();
+  appContext.clustersService.setState(draftState => {
+    draftState.clusters.set(rootClusterUri, cluster);
+  });
+  await appContext.workspacesService.setActiveWorkspace(rootClusterUri);
+  await appContext.workspacesService
+    .getWorkspaceAccessRequestsService(rootClusterUri)
+    .addOrRemoveResource({
+      kind: 'kube',
+      resource: kube,
+    });
+
+  jest.spyOn(appContext.tshd, 'getRequestableRoles');
+
+  const wrapper = ({ children }) => (
+    <MockAppContextProvider appContext={appContext}>
+      {children}
+    </MockAppContextProvider>
+  );
+
+  renderHook(useAccessRequestCheckout, { wrapper });
+
+  await waitFor(() =>
+    expect(appContext.tshd.getRequestableRoles).toHaveBeenCalledWith({
+      clusterUri: rootClusterUri,
+      resourceIds: [
+        {
+          clusterName: 'teleport-local',
+          kind: 'kube_cluster',
+          name: kube.name,
+          subResourceName: '',
+        },
+      ],
+    })
+  );
+});
+
+test(`fetching requestable roles for a kube cluster's namespaces only creates resource IDs for its namespaces`, async () => {
+  const kube1 = makeKube();
+  const kube2 = makeKube({
+    name: 'kube2',
+    uri: `${rootClusterUri}/kubes/kube2`,
+  });
+  const cluster = makeRootCluster();
+  const appContext = new MockAppContext();
+  appContext.clustersService.setState(draftState => {
+    draftState.clusters.set(rootClusterUri, cluster);
+  });
+  await appContext.workspacesService.setActiveWorkspace(rootClusterUri);
+  await appContext.workspacesService
+    .getWorkspaceAccessRequestsService(rootClusterUri)
+    .addOrRemoveResource({
+      kind: 'kube',
+      resource: kube1,
+    });
+  await appContext.workspacesService
+    .getWorkspaceAccessRequestsService(rootClusterUri)
+    .addOrRemoveResource({
+      kind: 'kube',
+      resource: kube2,
+    });
+
+  await appContext.workspacesService
+    .getWorkspaceAccessRequestsService(rootClusterUri)
+    .addOrRemoveKubeNamespaces([
+      mapRequestToKubeNamespaceUri({
+        clusterUri: rootClusterUri,
+        id: kube1.name,
+        name: 'namespace1',
+      }),
+      mapRequestToKubeNamespaceUri({
+        clusterUri: rootClusterUri,
+        id: kube1.name,
+        name: 'namespace2',
+      }),
+    ]);
+
+  jest.spyOn(appContext.tshd, 'getRequestableRoles');
+
+  const wrapper = ({ children }) => (
+    <MockAppContextProvider appContext={appContext}>
+      {children}
+    </MockAppContextProvider>
+  );
+
+  renderHook(useAccessRequestCheckout, { wrapper });
+
+  await waitFor(() =>
+    expect(appContext.tshd.getRequestableRoles).toHaveBeenCalledWith({
+      clusterUri: rootClusterUri,
+      resourceIds: [
+        {
+          clusterName: 'teleport-local',
+          kind: 'namespace',
+          name: kube1.name,
+          subResourceName: 'namespace1',
+        },
+        {
+          clusterName: 'teleport-local',
+          kind: 'namespace',
+          name: kube1.name,
+          subResourceName: 'namespace2',
+        },
+        {
+          clusterName: 'teleport-local',
+          kind: 'kube_cluster',
+          name: kube2.name,
+          subResourceName: '',
+        },
+      ],
+    })
+  );
+});
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
index 4ad261cf61b3c..7f8095a019828 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
@@ -24,6 +24,9 @@ import useAttempt from 'shared/hooks/useAttemptNext';
 import {
   getDryRunMaxDuration,
   PendingListItem,
+  PendingKubeResourceItem,
+  isKubeClusterWithNamespaces,
+  KubeNamespaceRequest,
 } from 'shared/components/AccessRequests/NewRequest';
 import { useSpecifiableFields } from 'shared/components/AccessRequests/NewRequest/useSpecifiableFields';
 
@@ -34,6 +37,8 @@ import {
   PendingAccessRequest,
   extractResourceRequestProperties,
   ResourceRequest,
+  mapRequestToKubeNamespaceUri,
+  mapKubeNamespaceUriToRequest,
 } from 'teleterm/ui/services/workspacesService/accessRequestsService';
 import { retryWithRelogin } from 'teleterm/ui/utils';
 import {
@@ -87,9 +92,18 @@ export default function useAccessRequestCheckout() {
   const workspaceAccessRequest =
     ctx.workspacesService.getActiveWorkspaceAccessRequestsService();
   const docService = ctx.workspacesService.getActiveWorkspaceDocumentService();
-  const pendingAccessRequest =
+  const pendingAccessRequestRequest =
     workspaceAccessRequest?.getPendingAccessRequest();
 
+  const pendingAccessRequests = getPendingAccessRequestsPerResource(
+    pendingAccessRequestRequest
+  );
+
+  const pendingAccessRequestsWithoutParentResource =
+    pendingAccessRequests.filter(
+      p => !isKubeClusterWithNamespaces(p, pendingAccessRequests)
+    );
+
   useEffect(() => {
     // Do a new dry run per changes to pending access requests
     // to get the latest time options and latest calculated
@@ -99,20 +113,18 @@ export default function useAccessRequestCheckout() {
     if (showCheckout && requestedCount == 0) {
       performDryRun();
     }
-  }, [showCheckout, pendingAccessRequest]);
+  }, [showCheckout, pendingAccessRequestRequest]);
 
   useEffect(() => {
-    if (!pendingAccessRequest || requestedCount > 0) {
+    if (!pendingAccessRequestRequest || requestedCount > 0) {
       return;
     }
 
-    const pendingAccessRequests =
-      getPendingAccessRequestsPerResource(pendingAccessRequest);
     runFetchResourceRoles(() =>
       retryWithRelogin(ctx, clusterUri, async () => {
         const { response } = await ctx.tshd.getRequestableRoles({
           clusterUri: rootClusterUri,
-          resourceIds: pendingAccessRequests
+          resourceIds: pendingAccessRequestsWithoutParentResource
             .filter(d => d.kind !== 'role')
             .map(d => ({
               // We have to use id, not name.
@@ -121,14 +133,14 @@ export default function useAccessRequestCheckout() {
               name: d.id,
               kind: d.kind,
               clusterName: d.clusterName,
-              subResourceName: '',
+              subResourceName: d.subResourceName || '',
             })),
         });
         setResourceRequestRoles(response.applicableRoles);
         setSelectedResourceRequestRoles(response.applicableRoles);
       })
     );
-  }, [pendingAccessRequest]);
+  }, [pendingAccessRequestRequest]);
 
   useEffect(() => {
     clearCreateAttempt();
@@ -146,6 +158,9 @@ export default function useAccessRequestCheckout() {
     }
   }, [showCheckout, hasExited, createRequestAttempt.status]);
 
+  /**
+   * @param pendingRequest holds a list or map of resources to process
+   */
   function getPendingAccessRequestsPerResource(
     pendingRequest: PendingAccessRequest
   ): PendingListItemWithOriginalItem[] {
@@ -170,9 +185,34 @@ export default function useAccessRequestCheckout() {
       }
       case 'resource': {
         pendingRequest.resources.forEach(resourceRequest => {
+          // If this request is a kube cluster and has namespaces
+          // extract each as own request.
+          if (
+            resourceRequest.kind === 'kube' &&
+            resourceRequest.resource.namespaces?.size > 0
+          ) {
+            // Process each namespace.
+            resourceRequest.resource.namespaces.forEach(namespaceRequestUri => {
+              const { kind, id, name } =
+                mapKubeNamespaceUriToRequest(namespaceRequestUri);
+
+              const item = {
+                kind,
+                id,
+                name,
+                subResourceName: name,
+                originalItem: resourceRequest,
+                clusterName:
+                  ctx.clustersService.findClusterByResource(namespaceRequestUri)
+                    ?.name,
+              };
+              pendingAccessRequests.push(item);
+            });
+          }
+
           const { kind, id, name } =
             extractResourceRequestProperties(resourceRequest);
-          pendingAccessRequests.push({
+          const item: PendingListItemWithOriginalItem = {
             kind,
             id,
             name,
@@ -180,7 +220,8 @@ export default function useAccessRequestCheckout() {
             clusterName: ctx.clustersService.findClusterByResource(
               resourceRequest.resource.uri
             )?.name,
-          });
+          };
+          pendingAccessRequests.push(item);
         });
       }
     }
@@ -207,6 +248,21 @@ export default function useAccessRequestCheckout() {
     );
   }
 
+  async function bulkToggleKubeResources(
+    items: PendingKubeResourceItem[],
+    kubeCluster: PendingListKubeClusterWithOriginalItem
+  ) {
+    await workspaceAccessRequest.addOrRemoveKubeNamespaces(
+      items.map(item =>
+        mapRequestToKubeNamespaceUri({
+          id: item.id,
+          name: item.subResourceName,
+          clusterUri: kubeCluster.originalItem.resource.uri,
+        })
+      )
+    );
+  }
+
   function getAssumedRequests() {
     if (!clusterUri) {
       return [];
@@ -222,22 +278,22 @@ export default function useAccessRequestCheckout() {
    * Shared logic used both during dry runs and regular access request creation.
    */
   function prepareAndCreateRequest(req: CreateRequest) {
-    const pendingAccessRequests =
-      getPendingAccessRequestsPerResource(pendingAccessRequest);
     const params: CreateAccessRequestRequest = {
       rootClusterUri,
       reason: req.reason,
       suggestedReviewers: req.suggestedReviewers || [],
       dryRun: req.dryRun,
-      resourceIds: pendingAccessRequests
+      resourceIds: pendingAccessRequestsWithoutParentResource
         .filter(d => d.kind !== 'role')
-        .map(d => ({
-          name: d.id,
-          clusterName: d.clusterName,
-          kind: d.kind,
-          subResourceName: '',
-        })),
-      roles: pendingAccessRequests
+        .map(d => {
+          return {
+            name: d.id,
+            clusterName: d.clusterName,
+            kind: d.kind,
+            subResourceName: d.subResourceName || '',
+          };
+        }),
+      roles: pendingAccessRequestsWithoutParentResource
         .filter(d => d.kind === 'role')
         .map(d => d.name),
       assumeStartTime: req.start && Timestamp.fromDate(req.start),
@@ -245,6 +301,11 @@ export default function useAccessRequestCheckout() {
       requestTtl: req.requestTTL && Timestamp.fromDate(req.requestTTL),
     };
 
+    // Don't attempt creating anything if there are no resources selected.
+    if (!params.resourceIds.length && !params.roles.length) {
+      return;
+    }
+
     // if we have a resource access request, we pass along the selected roles from the checkout
     if (params.resourceIds.length > 0) {
       params.roles = selectedResourceRequestRoles;
@@ -256,7 +317,8 @@ export default function useAccessRequestCheckout() {
       ctx.clustersService.createAccessRequest(params).then(({ response }) => {
         return {
           accessRequest: response.request,
-          requestedCount: pendingAccessRequests.length,
+          requestedCount:
+            pendingAccessRequestsWithoutParentResource.filter.length,
         };
       })
     ).catch(e => {
@@ -275,9 +337,9 @@ export default function useAccessRequestCheckout() {
       });
       teletermAccessRequest = accessRequest;
     } catch {
+      setCreateRequestAttempt({ status: '' });
       return;
     }
-
     setCreateRequestAttempt({ status: '' });
 
     const accessRequest = makeUiAccessRequest(teletermAccessRequest);
@@ -333,9 +395,27 @@ export default function useAccessRequestCheckout() {
     }
   }
 
+  async function fetchKubeNamespaces({
+    kubeCluster,
+    search,
+  }: KubeNamespaceRequest): Promise<string[]> {
+    const { response } = await ctx.tshd.listKubernetesResources({
+      searchKeywords: search,
+      limit: 50,
+      useSearchAsRoles: true,
+      nextKey: '',
+      resourceType: 'namespace',
+      clusterUri,
+      predicateExpression: '',
+      kubernetesCluster: kubeCluster,
+      kubernetesNamespace: '',
+    });
+    return response.resources.map(i => i.name);
+  }
+
   const shouldShowClusterNameColumn =
-    pendingAccessRequest?.kind === 'resource' &&
-    Array.from(pendingAccessRequest.resources.values()).some(a =>
+    pendingAccessRequestRequest?.kind === 'resource' &&
+    Array.from(pendingAccessRequestRequest.resources.values()).some(a =>
       routing.isLeafCluster(a.resource.uri)
     );
 
@@ -344,8 +424,7 @@ export default function useAccessRequestCheckout() {
     isCollapsed,
     assumedRequests: getAssumedRequests(),
     toggleResource,
-    pendingAccessRequests:
-      getPendingAccessRequestsPerResource(pendingAccessRequest),
+    pendingAccessRequests,
     shouldShowClusterNameColumn,
     createRequest,
     reset,
@@ -373,6 +452,8 @@ export default function useAccessRequestCheckout() {
     pendingRequestTtlOptions,
     startTime,
     onStartTimeChange,
+    fetchKubeNamespaces,
+    bulkToggleKubeResources,
   };
 }
 
@@ -386,3 +467,8 @@ type PendingListItemWithOriginalItem = Omit<PendingListItem, 'kind'> &
         kind: 'role';
       }
   );
+
+type PendingListKubeClusterWithOriginalItem = Omit<PendingListItem, 'kind'> & {
+  kind: Extract<ResourceKind, 'kube_cluster'>;
+  originalItem: Extract<ResourceRequest, { kind: 'kube' }>;
+};
diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
index ba0b18fe7ad42..64bf86013b3b7 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
@@ -258,6 +258,7 @@ function toResourceMap(request: PendingAccessRequest): ResourceMap {
     db: {},
     app: {},
     saml_idp_service_provider: {},
+    namespace: {},
   };
   if (request.kind === 'role') {
     request.roles.forEach(role => {
diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/useNewRequest.ts b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/useNewRequest.ts
index fefd237f739f0..bcc9d7b04f3e0 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/useNewRequest.ts
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/useNewRequest.ts
@@ -22,6 +22,7 @@ import { FetchStatus, SortType } from 'design/DataTable/types';
 
 import useAttempt from 'shared/hooks/useAttemptNext';
 import { makeAdvancedSearchQueryForLabel } from 'shared/utils/advancedSearchLabelQuery';
+import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
 
 import {
   ShowResources,
@@ -49,7 +50,6 @@ import type {
   ResourceLabel,
   ResourceFilter as WeakAgentFilter,
   ResourcesResponse,
-  ResourceIdKind,
   UnifiedResource,
 } from 'teleport/services/agents';
 import type * as teleportApps from 'teleport/services/apps';
@@ -211,6 +211,17 @@ export default function useNewRequest(rootCluster: Cluster) {
       return;
     }
 
+    /**
+     * This should never happen but just a safeguard.
+     * This function is used in the "unified resources" view,
+     * where a user can click on a "request access" button.
+     * Selecting kube_cluster's namespace is not available in this view
+     * (instead it is rendered in the "request checkout" view).
+     */
+    if (kind === 'namespace') {
+      return;
+    }
+
     accessRequestsService.addOrRemoveResource(
       toResourceRequest({
         kind,
@@ -348,8 +359,13 @@ function getDefaultSort(kind: ResourceKind): SortType {
 
 export type ResourceKind =
   | Extract<
-      ResourceIdKind,
-      'node' | 'app' | 'db' | 'kube_cluster' | 'saml_idp_service_provider'
+      RequestableResourceKind,
+      | 'node'
+      | 'app'
+      | 'db'
+      | 'kube_cluster'
+      | 'saml_idp_service_provider'
+      | 'namespace'
     >
   | 'role';
 
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx b/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx
index 03da9da97f998..1d2f6e7613701 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx
@@ -223,7 +223,7 @@ export function UnifiedResources(props: {
 
   const bulkAddResources = useCallback(
     (resources: UnifiedResourceResponse[]) => {
-      accessRequestsService.addOrRemoveResources(resources);
+      accessRequestsService.addAllOrRemoveAllResources(resources);
     },
     [accessRequestsService]
   );
diff --git a/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.test.ts b/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.test.ts
index 751cab9849052..c0b2f46f99217 100644
--- a/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.test.ts
+++ b/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.test.ts
@@ -124,7 +124,7 @@ test('getAddedItemsCount() returns added resource count for pending request', ()
   expect(service.getAddedItemsCount()).toBe(0);
 });
 
-test('addOrRemoveResources() adds all resources to pending request', async () => {
+test('addAllOrRemoveAllResources() adds all resources to pending request', async () => {
   const { accessRequestsService: service } = getTestSetup(
     getMockPendingResourceAccessRequest()
   );
@@ -138,7 +138,9 @@ test('addOrRemoveResources() adds all resources to pending request', async () =>
   });
 
   // add a single resource that isn't added should add to the request
-  await service.addOrRemoveResources([{ kind: 'server', resource: server }]);
+  await service.addAllOrRemoveAllResources([
+    { kind: 'server', resource: server },
+  ]);
   let pendingAccessRequest = service.getPendingAccessRequest();
   expect(
     pendingAccessRequest.kind === 'resource' &&
@@ -149,7 +151,7 @@ test('addOrRemoveResources() adds all resources to pending request', async () =>
   });
 
   // padding an array that contains some resources already added and some that aren't should add them all
-  await service.addOrRemoveResources([
+  await service.addAllOrRemoveAllResources([
     { kind: 'server', resource: server },
     { kind: 'server', resource: server2 },
   ]);
@@ -170,7 +172,7 @@ test('addOrRemoveResources() adds all resources to pending request', async () =>
   });
 
   // passing an array of resources that are all already added should remove all the passed resources
-  await service.addOrRemoveResources([
+  await service.addAllOrRemoveAllResources([
     { kind: 'server', resource: server },
     { kind: 'server', resource: server2 },
   ]);
diff --git a/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.ts b/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.ts
index f8ff36b9c2491..e408e8244de68 100644
--- a/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.ts
+++ b/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.ts
@@ -24,6 +24,7 @@ import {
   DatabaseUri,
   KubeUri,
   AppUri,
+  KubeResourceNamespaceUri,
 } from 'teleterm/ui/uri';
 import { ModalsService } from 'teleterm/ui/services/modals';
 
@@ -98,7 +99,44 @@ export class AccessRequestsService {
     });
   }
 
-  async addOrRemoveResources(requestedResources: ResourceRequest[]) {
+  async addOrRemoveKubeNamespaces(namespaceUris: KubeResourceNamespaceUri[]) {
+    this.setState(draftState => {
+      if (draftState.pending.kind !== 'resource') {
+        throw new Error('Cannot add a kube namespace to a role access request');
+      }
+
+      const { resources } = draftState.pending;
+
+      namespaceUris.forEach(resourceUri => {
+        const requestedResource = resources.get(
+          routing.getKubeUri(
+            routing.parseKubeResourceNamespaceUri(resourceUri).params
+          )
+        );
+        if (!requestedResource || requestedResource.kind !== 'kube') {
+          throw new Error('Cannot add a kube namespace to a non-kube resource');
+        }
+        const kubeResource = requestedResource.resource;
+
+        if (!kubeResource.namespaces) {
+          kubeResource.namespaces = new Set();
+        }
+        if (kubeResource.namespaces.has(resourceUri)) {
+          kubeResource.namespaces.delete(resourceUri);
+        } else {
+          kubeResource.namespaces.add(resourceUri);
+        }
+      });
+    });
+  }
+
+  /**
+   * Removes all requested resources, if all the requested resources were already added
+   * or adds all requested resources, if not all requested resources were added.
+   *
+   * Typically used when user "selects all or deselects all"
+   */
+  async addAllOrRemoveAllResources(requestedResources: ResourceRequest[]) {
     if (!(await this.canUpdateRequest('resource'))) {
       return;
     }
@@ -258,6 +296,7 @@ export type ResourceRequest =
       kind: 'kube';
       resource: {
         uri: KubeUri;
+        namespaces?: Set<KubeResourceNamespaceUri>;
       };
     }
   | {
@@ -287,8 +326,7 @@ export function extractResourceRequestProperties({
   kind: SharedResourceAccessRequestKind;
   id: string;
   /**
-   * Pretty name of the resource (can be the same as `id`).
-   * For example, for nodes, we want to show hostname instead of its id.
+   * Can refer to a pretty name of the resource (can be the same as `id`)
    */
   name: string;
 } {
@@ -317,6 +355,42 @@ export function extractResourceRequestProperties({
   }
 }
 
+export function mapRequestToKubeNamespaceUri({
+  clusterUri,
+  id,
+  name,
+}: {
+  clusterUri: ClusterUri;
+  /** kubeId */
+  id: string;
+  /** kubeNamespaceId */
+  name: string;
+}) {
+  const {
+    params: { rootClusterId, leafClusterId },
+  } = routing.parseClusterUri(clusterUri);
+  return routing.getKubeResourceNamespaceUri({
+    rootClusterId,
+    leafClusterId,
+    kubeId: id,
+    kubeNamespaceId: name,
+  });
+}
+
+export function mapKubeNamespaceUriToRequest(
+  kubeNamespaceUri: KubeResourceNamespaceUri
+): {
+  kind: 'namespace';
+  /** kubeId */
+  id: string;
+  /** kubeNamespaceId */
+  name: string;
+} {
+  const { kubeNamespaceId, kubeId } =
+    routing.parseKubeResourceNamespaceUri(kubeNamespaceUri).params;
+  return { kind: 'namespace', id: kubeId, name: kubeNamespaceId };
+}
+
 /**
  * Maps the type used by the shared access requests to the type
  * required by the access requests service.