From 4b835e6899a81cd54a96374b48a25afb7c116f8f Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Mon, 28 Oct 2024 08:48:20 -0700
Subject: [PATCH 1/5] Web: add support for requesting for kube namespaces
 (#47345)

---
 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 | 207 ++++++++++
 .../RequestCheckout/RequestCheckout.story.tsx |  21 +
 .../RequestCheckout/RequestCheckout.test.tsx  |   2 +
 .../RequestCheckout/RequestCheckout.tsx       | 386 ++++++++++++------
 .../NewRequest/ResourceList/Apps.tsx          |   4 +-
 .../NewRequest/ResourceList/ResourceList.tsx  |   6 +-
 .../AccessRequests/NewRequest/index.ts        |   2 +-
 .../AccessRequests/NewRequest/kube.test.ts    |  61 +++
 .../AccessRequests/NewRequest/kube.ts         |  94 +++++
 .../AccessRequests/NewRequest/resource.ts     |  10 +-
 .../components/AccessRequests/Shared/utils.ts |   3 +-
 .../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                 |   5 +
 .../NewRequest/NewRequest.tsx                 |   1 +
 24 files changed, 862 insertions(+), 165 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 47cc0348eb861..fd4b76ca2378a 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 from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { Box, Flex, Indicator, Text } from 'design';
 import * as Icons from 'design/Icon';
@@ -110,6 +110,22 @@ export function Table<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.
@@ -127,15 +143,7 @@ export function Table<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 53a0abe644e60..afdaf940c2212 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..116ac3765b898
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -0,0 +1,207 @@
+/**
+ * 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 options = await fetchKubeNamespaces({
+      kubeCluster: kubeClusterItem.id,
+      search: input,
+    });
+
+    return options;
+  }
+
+  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 be69ab83259c2..1378799697d36 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 e40956397b421..03ab8320dbd74 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
@@ -30,38 +30,43 @@ import {
   Image,
   Indicator,
   LabelInput,
+  Link as ExternalLink,
+  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 { CheckboxInput, CheckboxWrapper } from 'design/Checkbox';
 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 { 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 function RequestCheckoutWithSlider<
   T extends PendingListItem = PendingListItem,
@@ -153,8 +158,11 @@ export function RequestCheckout<T extends PendingListItem>({
   Header,
   startTime,
   onStartTimeChange,
+  fetchKubeNamespaces,
+  bulkToggleKubeResources,
 }: RequestCheckoutProps<T>) {
   const [reason, setReason] = useState('');
+
   function updateReason(reason: string) {
     setReason(reason);
   }
@@ -173,6 +181,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 &&
@@ -182,10 +200,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 (
@@ -207,126 +233,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 mt={2} mb={7} textAlign="center">
-                  <Text typography="h4" color="text.main" bold>
-                    Resources Requested Successfully
-                  </Text>
-                  <Text typography="subtitle1" color="text.slightlyMuted">
-                    You've successfully requested {numRequestedResources}{' '}
-                    {pluralize(numRequestedResources, 'resource')}
-                  </Text>
-                </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}>
@@ -385,19 +477,19 @@ export function RequestCheckout<T extends PendingListItem>({
                           reset();
                           onClose();
                         }}
-                        disabled={submitBtnDisabled}
+                        disabled={cancelBtnDisabled}
                       >
                         Cancel
                       </ButtonSecondary>
                     </Flex>
                   </Flex>
-                )}
-              </Validation>
-            </>
+                </>
+              )}
+            </div>
           )}
-        </div>
+        </>
       )}
-    </>
+    </Validation>
   );
 }
 
@@ -644,7 +736,7 @@ function TextBox({
   );
 }
 
-function getPrettyResourceKind(kind: ResourceKind): string {
+function getPrettyResourceKind(kind: RequestableResourceKind): string {
   switch (kind) {
     case 'role':
       return 'Role';
@@ -662,6 +754,8 @@ function getPrettyResourceKind(kind: ResourceKind): string {
       return 'User Group';
     case 'windows_desktop':
       return 'Desktop';
+    case 'namespace':
+      return 'Namespace';
     default:
       kind satisfies never;
       return kind;
@@ -739,14 +833,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;
@@ -780,6 +891,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/ResourceList/Apps.tsx b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
index d321ed3f8a325..067eeb1bbe1b5 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
@@ -31,7 +31,7 @@ import Select, {
 import { StyledSelect as BaseStyledSelect } from 'shared/components/Select/Select';
 import { ToolTipInfo } from 'shared/components/ToolTip';
 
-import { ResourceMap, ResourceKind } from '../resource';
+import { ResourceMap, RequestableResourceKind } from '../resource';
 
 import { ListProps, StyledTable } from './ResourceList';
 
@@ -126,7 +126,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..44057733335fa 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/index.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
@@ -18,5 +18,5 @@
 
 export * from './RequestCheckout';
 export * from './ResourceList';
-export type { ResourceMap, ResourceKind } from './resource';
+export type { ResourceMap, RequestableResourceKind } from './resource';
 export { getEmptyResourceState } from './resource';
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 8db230010255e..61d23e285b972 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/resource.ts
@@ -17,12 +17,17 @@
  */
 
 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, '*'>;
 
 export type ResourceMap = {
-  [K in ResourceIdKind | 'role']: Record<string, string>;
+  [K in Exclude<RequestableResourceKind, 'resource'>]: Record<string, string>;
 };
 
 export function getEmptyResourceState(): ResourceMap {
@@ -34,5 +39,6 @@ export function getEmptyResourceState(): ResourceMap {
     user_group: {},
     windows_desktop: {},
     role: {},
+    namespace: {},
   };
 }
diff --git a/web/packages/shared/components/AccessRequests/Shared/utils.ts b/web/packages/shared/components/AccessRequests/Shared/utils.ts
index 99536746726b3..ef92a54e72320 100644
--- a/web/packages/shared/components/AccessRequests/Shared/utils.ts
+++ b/web/packages/shared/components/AccessRequests/Shared/utils.ts
@@ -39,6 +39,7 @@ export function getNumAddedResources(addedResources: ResourceMap) {
     Object.keys(addedResources.app).length +
     Object.keys(addedResources.kube_cluster).length +
     Object.keys(addedResources.user_group).length +
-    Object.keys(addedResources.windows_desktop).length
+    Object.keys(addedResources.windows_desktop).length +
+    Object.keys(addedResources.namespace).length
   );
 }
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 eef2c14a7c4e8..136fa2fce8949 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 1e1138ab00c89..485f4cb8f9e8b 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
@@ -266,6 +266,11 @@ export function AccessRequestCheckout() {
             setPendingRequestTtl={setPendingRequestTtl}
             startTime={startTime}
             onStartTimeChange={onStartTimeChange}
+            // TODO: these are placeholders to satisy linters.
+            // There is a split PR that handles teleterm support
+            // that will be merged right after this one (once both are approved)
+            bulkToggleKubeResources={() => null}
+            fetchKubeNamespaces={() => null}
           />
         )}
       </Transition>
diff --git a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
index 1bff816f69e36..3576c2c5a8691 100644
--- a/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
+++ b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/NewRequest.tsx
@@ -250,6 +250,7 @@ function toResourceMap(request: PendingAccessRequest): ResourceMap {
     node: {},
     db: {},
     app: {},
+    namespace: {},
   };
   if (request.kind === 'role') {
     request.roles.forEach(role => {

From dbe29517219a0d684126aeeb96401fea36890aa9 Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Mon, 28 Oct 2024 10:45:45 -0700
Subject: [PATCH 2/5] Teleterm: add support for access requesting kube
 namespaces (#47347)

---
 .../RequestCheckout/KubeNamespaceSelector.tsx |   8 +-
 .../NewRequest/RequestCheckout/index.ts       |   6 +-
 .../AccessRequests/NewRequest/index.ts        |   2 +
 .../AccessRequestCheckout.tsx                 | 208 +++++++++---------
 .../useAccessRequestCheckout.test.tsx         | 120 ++++++++++
 .../useAccessRequestCheckout.ts               | 138 +++++++++---
 .../NewRequest/useNewRequest.ts               |  18 +-
 .../ui/DocumentCluster/UnifiedResources.tsx   |   2 +-
 .../accessRequestsService.test.ts             |  10 +-
 .../accessRequestsService.ts                  |  80 ++++++-
 10 files changed, 454 insertions(+), 138 deletions(-)

diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
index 116ac3765b898..dc4221942bc63 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -129,12 +129,16 @@ export function KubeNamespaceSelector({
   };
 
   async function handleLoadOptions(input: string) {
-    const options = await fetchKubeNamespaces({
+    const namespaces = await fetchKubeNamespaces({
       kubeCluster: kubeClusterItem.id,
       search: input,
     });
 
-    return options;
+    return namespaces.map(namespace => ({
+      kind: 'namespace',
+      value: namespace,
+      label: namespace,
+    }));
   }
 
   return (
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/index.ts
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/index.ts b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
index 44057733335fa..9074113221b16 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/index.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/index.ts
@@ -20,3 +20,5 @@ export * from './RequestCheckout';
 export * from './ResourceList';
 export type { ResourceMap, RequestableResourceKind } from './resource';
 export { getEmptyResourceState } from './resource';
+export type { KubeNamespaceRequest } from './kube';
+export { isKubeClusterWithNamespaces } from './kube';
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
index 485f4cb8f9e8b..f0c9e10d44960 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';
@@ -110,115 +113,125 @@ 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':
-                        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':
+                          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} />
       ))}
@@ -266,11 +279,8 @@ export function AccessRequestCheckout() {
             setPendingRequestTtl={setPendingRequestTtl}
             startTime={startTime}
             onStartTimeChange={onStartTimeChange}
-            // TODO: these are placeholders to satisy linters.
-            // There is a split PR that handles teleterm support
-            // that will be merged right after this one (once both are approved)
-            bulkToggleKubeResources={() => null}
-            fetchKubeNamespaces={() => null}
+            fetchKubeNamespaces={fetchKubeNamespaces}
+            bulkToggleKubeResources={bulkToggleKubeResources}
           />
         )}
       </Transition>
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/useNewRequest.ts b/web/packages/teleterm/src/ui/DocumentAccessRequests/NewRequest/useNewRequest.ts
index dfeff0c856610..1154377464032 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,
@@ -346,7 +357,10 @@ function getDefaultSort(kind: ResourceKind): SortType {
 }
 
 export type ResourceKind =
-  | Extract<ResourceIdKind, 'node' | 'app' | 'db' | 'kube_cluster'>
+  | Extract<
+      RequestableResourceKind,
+      'node' | 'app' | 'db' | 'kube_cluster' | 'namespace'
+    >
   | 'role';
 
 export type State = ReturnType<typeof useNewRequest>;
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx b/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx
index 2568ff71302ed..81edc46175371 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 79f299797427d..6f003943cc65c 100644
--- a/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.test.ts
+++ b/web/packages/teleterm/src/ui/services/workspacesService/accessRequestsService.test.ts
@@ -118,7 +118,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()
   );
@@ -132,7 +132,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' &&
@@ -143,7 +145,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 },
   ]);
@@ -164,7 +166,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 b50ca7d751410..8256688deb482 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;
     }
@@ -252,6 +290,7 @@ export type ResourceRequest =
       kind: 'kube';
       resource: {
         uri: KubeUri;
+        namespaces?: Set<KubeResourceNamespaceUri>;
       };
     }
   | {
@@ -275,8 +314,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;
 } {
@@ -302,6 +340,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.

From 8bb78d527cb277384340546a9869233ec3a8003c Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Thu, 31 Oct 2024 22:12:46 -0700
Subject: [PATCH 3/5] WebShared: Update how request checkout handles kube
 resource related errors (#48168)

* WebShared: Update how request checkout handles kube resource related errors

* Fix bug where after create/cancel, specifiable fields were retained

* Remove single toggler for kube resources

* Address CR
---
 .../RequestCheckout/KubeNamespaceSelector.tsx |  32 ++--
 .../RequestCheckout/RequestCheckout.story.tsx |  18 +-
 .../RequestCheckout/RequestCheckout.tsx       |  63 ++++---
 .../AccessRequests/NewRequest/kube.test.ts    | 178 ++++++++++++++----
 .../AccessRequests/NewRequest/kube.ts         |  69 +++----
 .../NewRequest/useSpecifiableFields.ts        |  11 ++
 .../useAccessRequestCheckout.test.tsx         |  99 ++++++++++
 .../useAccessRequestCheckout.ts               |   2 +
 8 files changed, 351 insertions(+), 121 deletions(-)

diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
index dc4221942bc63..11ee294fdcdbd 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -24,8 +24,6 @@ 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';
@@ -36,19 +34,15 @@ 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
@@ -87,13 +81,18 @@ export function KubeNamespaceSelector({
         );
         return;
       case 'remove-value':
-        toggleResource({
-          kind: 'namespace',
-          id: kubeClusterItem.id,
-          subResourceName: actionMeta.removedValue.value,
-          clusterName: kubeClusterItem.clusterName,
-          name: actionMeta.removedValue.value,
-        });
+        bulkToggleKubeResources(
+          [
+            {
+              kind: 'namespace',
+              id: kubeClusterItem.id,
+              subResourceName: actionMeta.removedValue.value,
+              clusterName: kubeClusterItem.clusterName,
+              name: actionMeta.removedValue.value,
+            },
+          ],
+          kubeClusterItem
+        );
         return;
     }
   }
@@ -144,7 +143,7 @@ export function KubeNamespaceSelector({
   return (
     <Box width="100%" mb={-3}>
       <StyledSelect
-        label={`Namespaces${namespaceRequired ? ' (required)' : ''}:`}
+        label={`Namespaces`}
         inputId={kubeClusterItem.id}
         width="100%"
         placeholder="Start typing a namespace and press enter"
@@ -162,11 +161,6 @@ export function KubeNamespaceSelector({
         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}
       />
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 1378799697d36..f964f7aa4f57e 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.story.tsx
@@ -152,15 +152,27 @@ export const FailedResourceRequest = () => (
   </MemoryRouter>
 );
 
-export const FailedUnsupportedKubeResourceKind = () => (
+export const FailedUnsupportedKubeResourceKindWithTooltip = () => (
   <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]',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting to some or all of the requested Kubernetes resources. allowed kinds for each requestable roles: test-role-1: [deployment], test-role-2: [pod secret configmap service serviceaccount kube_node persistentvolume persistentvolumeclaim deployment replicaset statefulset daemonset clusterrole kube_role clusterrolebinding rolebinding cronjob job certificatesigningrequest ingress]`,
+      }}
+    />
+  </MemoryRouter>
+);
+
+export const FailedUnsupportedKubeResourceKindWithoutTooltip = () => (
+  <MemoryRouter>
+    <RequestCheckoutWithSlider
+      {...baseProps}
+      isResourceRequest={true}
+      fetchResourceRequestRolesAttempt={{
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting to some or all of the requested Kubernetes resources. allowed kinds for each requestable roles: test-role-1: [deployment]`,
       }}
     />
   </MemoryRouter>
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
index 03ab8320dbd74..3bc63bd29a452 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
@@ -33,7 +33,6 @@ import {
   Link as ExternalLink,
   Subtitle2,
   Text,
-  Mark,
 } from 'design';
 import { ArrowBack, ChevronDown, ChevronRight, Warning } from 'design/Icon';
 import Table, { Cell } from 'design/DataTable';
@@ -42,16 +41,17 @@ import { Danger } from 'design/Alert';
 
 import Validation, { useRule, Validator } from 'shared/components/Validation';
 import { Attempt } from 'shared/hooks/useAttemptNext';
-import { listToSentence, pluralize } from 'shared/utils/text';
+import { pluralize } from 'shared/utils/text';
 import { Option } from 'shared/components/Select';
 import { TextSelectCopyMulti } from 'shared/components/TextSelectCopy';
 import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
+import { HoverTooltip } from 'shared/components/ToolTip';
 
 import { CreateRequest } from '../../Shared/types';
 import { AssumeStartTime } from '../../AssumeStartTime/AssumeStartTime';
 import { AccessDurationRequest } from '../../AccessDuration';
 import {
-  checkForUnsupportedKubeRequestModes,
+  checkSupportForKubeResources,
   isKubeClusterWithNamespaces,
   type KubeNamespaceRequest,
 } from '../kube';
@@ -181,15 +181,10 @@ export function RequestCheckout<T extends PendingListItem>({
     });
   }
 
-  const {
-    affectedKubeClusterName,
-    unsupportedKubeRequestModes,
-    requiresNamespaceSelect,
-  } = checkForUnsupportedKubeRequestModes(fetchResourceRequestRolesAttempt);
-
-  const hasUnsupportedKubeRequestModes = !!unsupportedKubeRequestModes;
-  const showRequestRoleErrBanner =
-    !hasUnsupportedKubeRequestModes && !requiresNamespaceSelect;
+  const { requestKubeResourceSupported, isRequestKubeResourceError } =
+    checkSupportForKubeResources(fetchResourceRequestRolesAttempt);
+  const hasUnsupporteKubeResourceKinds =
+    !requestKubeResourceSupported && isRequestKubeResourceError;
 
   const isInvalidRoleSelection =
     resourceRequestRoles.length > 0 &&
@@ -201,8 +196,7 @@ export function RequestCheckout<T extends PendingListItem>({
     createAttempt.status === 'processing' ||
     isInvalidRoleSelection ||
     (fetchResourceRequestRolesAttempt.status === 'failed' &&
-      hasUnsupportedKubeRequestModes) ||
-    requiresNamespaceSelect ||
+      hasUnsupporteKubeResourceKinds) ||
     fetchResourceRequestRolesAttempt.status === 'processing';
 
   const cancelBtnDisabled =
@@ -259,13 +253,8 @@ export function RequestCheckout<T extends PendingListItem>({
               <KubeNamespaceSelector
                 kubeClusterItem={item}
                 savedResourceItems={pendingAccessRequests}
-                toggleResource={toggleResource}
                 fetchKubeNamespaces={fetchKubeNamespaces}
                 bulkToggleKubeResources={bulkToggleKubeResources}
-                namespaceRequired={
-                  requiresNamespaceSelect &&
-                  affectedKubeClusterName.includes(item.id)
-                }
               />
             </Flex>
           </Flex>
@@ -278,21 +267,31 @@ export function RequestCheckout<T extends PendingListItem>({
     <Validation>
       {({ validator }) => (
         <>
-          {showRequestRoleErrBanner &&
+          {!isRequestKubeResourceError &&
+            createAttempt.status !== 'failed' &&
             fetchResourceRequestRolesAttempt.status === 'failed' && (
               <Alert
                 kind="danger"
                 children={fetchResourceRequestRolesAttempt.statusText}
               />
             )}
-          {hasUnsupportedKubeRequestModes && (
+          {hasUnsupporteKubeResourceKinds && (
             <Alert kind="danger">
+              <HoverTooltip
+                position="left"
+                tipContent={
+                  fetchResourceRequestRolesAttempt.statusText.length > 248
+                    ? fetchResourceRequestRolesAttempt.statusText
+                    : null
+                }
+              >
+                <ShortenedText mb={2}>
+                  {fetchResourceRequestRolesAttempt.statusText}
+                </ShortenedText>
+              </HoverTooltip>
               <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{' '}
+                The listed allowed kinds are currently only supported through
+                the{' '}
                 <ExternalLink
                   target="_blank"
                   href="https://goteleport.com/docs/connect-your-client/tsh/#installing-tsh"
@@ -306,14 +305,14 @@ export function RequestCheckout<T extends PendingListItem>({
                 >
                   tsh request search
                 </ExternalLink>{' '}
-                command that will help you construct the request.
+                that will help you construct the request.
               </Text>
-              <Box width="360px">
+              <Box width="325px">
                 Example:
                 <TextSelectCopyMulti
                   lines={[
                     {
-                      text: `tsh request search --kind=${unsupportedKubeRequestModes[0]} --kube-cluster=${affectedKubeClusterName} --all-kube-namespaces`,
+                      text: `tsh request search --kind=ALLOWED_KIND --kube-cluster=CLUSTER_NAME --all-kube-namespaces`,
                     },
                   ]}
                 />
@@ -826,6 +825,12 @@ const StyledTable = styled(Table)`
   overflow: hidden;
 ` as typeof Table;
 
+const ShortenedText = styled(Text)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+`;
+
 export type RequestCheckoutWithSliderProps<
   T extends PendingListItem = PendingListItem,
 > = {
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts b/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
index 33e136e0dc038..b10bde737679e 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/kube.test.ts
@@ -16,46 +16,148 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { checkForUnsupportedKubeRequestModes } from './kube';
+import { Attempt } from 'shared/hooks/useAttemptNext';
 
-test('checkForUnsupportedKubeRequestModes: non failed status', () => {
-  const {
-    affectedKubeClusterName,
-    unsupportedKubeRequestModes,
-    requiresNamespaceSelect,
-  } = checkForUnsupportedKubeRequestModes({ status: '' });
+import { checkSupportForKubeResources } from './kube';
 
-  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]`,
-  });
+describe('requestKubeResourceSupported()', () => {
+  const testCases: {
+    name: string;
+    attempt: Attempt;
+    expected: {
+      requestKubeResourceSupported: boolean;
+      isRequestKubeResourceError: boolean;
+    };
+  }[] = [
+    {
+      name: 'non failed status',
+      attempt: { status: '' },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: false,
+      },
+    },
+    {
+      name: 'non request.kubernetes_resources related error',
+      attempt: {
+        status: 'failed',
+        statusText: `some other error`,
+      },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: false,
+      },
+    },
+    {
+      name: 'with supported namespace in error (single role)',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: [namespace]`,
+      },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: true,
+      },
+    },
+    {
+      name: 'with supported namespace in error (multi role)',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: [pod secret], test-role-2: [deployment namespace]`,
+      },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: true,
+      },
+    },
+    {
+      name: 'with supported kube_cluster in error (multi role)',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: [pod secret], test-role-2: [deployment kube_cluster]`,
+      },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: true,
+      },
+    },
+    {
+      name: 'with supported kube_cluster and namespace in error (multi role)',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: [pod], test-role-2: [namespace kube_cluster]`,
+      },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: true,
+      },
+    },
+    {
+      name: 'without supported kinds in error',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: [deployment], test-role-2: [pod secret]`,
+      },
+      expected: {
+        requestKubeResourceSupported: false,
+        isRequestKubeResourceError: true,
+      },
+    },
+    // empty bracket case can happen from admin configuration error
+    // where allow and deny canceled each other so nothing is allowed.
+    {
+      name: 'empty bracket with space',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: [ ]`,
+      },
+      expected: {
+        requestKubeResourceSupported: false,
+        isRequestKubeResourceError: true,
+      },
+    },
+    {
+      name: 'empty bracket without space',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: test-role-1: []`,
+      },
+      expected: {
+        requestKubeResourceSupported: false,
+        isRequestKubeResourceError: true,
+      },
+    },
+    // should never happen but just in case
+    {
+      name: 'without any role',
+      attempt: {
+        status: 'failed',
+        statusText: `your Teleport role's "request.kubernetes_resources" field did not allow requesting \
+        to some or all of the requested Kubernetes resources. allowed kinds for \
+        each requestable roles: `,
+      },
+      expected: {
+        requestKubeResourceSupported: true,
+        isRequestKubeResourceError: false,
+      },
+    },
+  ];
 
-  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]`,
+  test.each(testCases)('$name', ({ attempt, expected }) => {
+    expect(checkSupportForKubeResources(attempt)).toEqual(expected);
   });
-
-  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
index e84ed46c972b4..299c19bec91f7 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/kube.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/kube.ts
@@ -45,50 +45,55 @@ export function isKubeClusterWithNamespaces(
 }
 
 /**
- * Checks each data for kube_cluster or namespace
+ * Parses error message (in an expected format returned from the backend) to see if
+ * the message is a type of request.kubernetes_resources related error:
+ * https://github.com/gravitational/teleport/blob/master/lib/services/access_request.go#L2050
+ *
+ * If error matches, it then checks if namespace or kube_cluster is mentioned
+ * in the "allowed kinds" portion of the error message.
  */
-export function checkForUnsupportedKubeRequestModes(
-  requestRoleAttempt: Attempt
-) {
-  let unsupportedKubeRequestModes: string[];
-  let affectedKubeClusterName = '';
-  let requiresNamespaceSelect = false;
+export function checkSupportForKubeResources(requestRoleAttempt: Attempt) {
+  let requestKubeResourceSupported = true;
+  let isRequestKubeResourceError = false;
 
+  const retVal = { requestKubeResourceSupported, isRequestKubeResourceError };
   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(' ');
+    if (
+      errMsg.includes('request.kubernetes_resources') &&
+      errMsg.includes('allowed kinds')
+    ) {
+      let splitMsgParts = [];
+      if (errMsg.includes('requested roles: ')) {
+        splitMsgParts = errMsg.split('requested roles: ');
+      } else if (errMsg.includes('requestable roles: ')) {
+        splitMsgParts = errMsg.split('requestable roles: ');
       }
 
-      const initialSplit = errMsg.split('for kubernetes cluster "');
-      if (initialSplit.length > 1) {
-        affectedKubeClusterName = initialSplit[1]
-          .split('". allowed kinds')[0]
-          .trim();
+      if (!splitMsgParts.length || !splitMsgParts[1]) {
+        return retVal;
       }
 
+      const kindParts = splitMsgParts[1].split(', ');
+
+      // Check that at least one of the kind parts have a kind that
+      // the web UI supports (namespace or kube_cluster):
+      const isSupported = kindParts.some(part => {
+        const allowed = part.split(': ');
+        if (
+          allowed[1]?.includes('namespace') ||
+          allowed[1]?.includes('kube_cluster')
+        ) {
+          return true;
+        }
+      });
       return {
-        affectedKubeClusterName,
-        requiresNamespaceSelect,
-        unsupportedKubeRequestModes,
+        requestKubeResourceSupported: isSupported,
+        isRequestKubeResourceError: true,
       };
     }
   }
 
-  return {
-    affectedKubeClusterName,
-    unsupportedKubeRequestModes,
-    requiresNamespaceSelect,
-  };
+  return retVal;
 }
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts b/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts
index 4570c2453776a..3f7f7d6edd826 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts
+++ b/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts
@@ -98,6 +98,16 @@ export function useSpecifiableFields() {
     );
   }
 
+  function reset() {
+    setDryRunResponse(null);
+    setResourceRequestRoles([]);
+    setSelectedResourceRequestRoles([]);
+    setSelectedReviewers([]);
+    setStartTime(null);
+    setMaxDuration(null);
+    setPendingRequestTtl(null);
+  }
+
   function preselectPendingRequestTtlOption(
     newMaxDuration: number,
     dryRequestCreated: Date
@@ -190,5 +200,6 @@ export function useSpecifiableFields() {
     startTime,
     onStartTimeChange,
     onDryRunChange,
+    reset,
   };
 }
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx
index a4dc881042005..fb1c3285ee53f 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.test.tsx
@@ -184,3 +184,102 @@ test(`fetching requestable roles for a kube cluster's namespaces only creates re
     })
   );
 });
+
+test('after creating an access request, pending requests and specifiable fields are reset', 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,
+    });
+
+  let mockedCreateAccessRequestFn = jest.spyOn(
+    appContext.tshd,
+    'createAccessRequest'
+  );
+
+  const wrapper = ({ children }) => (
+    <MockAppContextProvider appContext={appContext}>
+      {children}
+    </MockAppContextProvider>
+  );
+
+  let { result } = renderHook(useAccessRequestCheckout, {
+    wrapper,
+  });
+
+  await waitFor(() => {
+    result.current.setSelectedReviewers([{ value: 'bob', label: 'bob' }]);
+    expect(result.current.selectedReviewers).toEqual([
+      { value: 'bob', label: 'bob' },
+    ]);
+  });
+
+  await waitFor(() => {
+    result.current.setSelectedResourceRequestRoles(['apple', 'banana']);
+    expect(result.current.selectedResourceRequestRoles).toEqual([
+      'apple',
+      'banana',
+    ]);
+  });
+
+  await waitFor(async () => {
+    await result.current.createRequest({
+      suggestedReviewers: result.current.selectedReviewers.map(r => r.value),
+    });
+    expect(mockedCreateAccessRequestFn).toHaveBeenCalledWith({
+      rootClusterUri: '/clusters/teleport-local',
+      resourceIds: [
+        {
+          clusterName: 'teleport-local',
+          kind: 'kube_cluster',
+          name: kube.name,
+          subResourceName: '',
+        },
+      ],
+      roles: ['apple', 'banana'],
+      suggestedReviewers: ['bob'],
+    });
+  });
+
+  // Call create again, should've cleared reviewers and previous roles.
+  mockedCreateAccessRequestFn.mockClear();
+  await waitFor(async () => {
+    // A successful create would've cleared all selected resources,
+    // so we add it back here to allow creating again.
+    expect(result.current.pendingAccessRequests).toHaveLength(0);
+    await appContext.workspacesService
+      .getWorkspaceAccessRequestsService(rootClusterUri)
+      .addOrRemoveResource({
+        kind: 'kube',
+        resource: kube,
+      });
+  });
+
+  await waitFor(async () => {
+    await result.current.createRequest({
+      suggestedReviewers: result.current.selectedReviewers.map(r => r.value),
+    });
+    expect(mockedCreateAccessRequestFn).toHaveBeenCalledWith({
+      rootClusterUri: '/clusters/teleport-local',
+      resourceIds: [
+        {
+          clusterName: 'teleport-local',
+          kind: 'kube_cluster',
+          name: kube.name,
+          subResourceName: '',
+        },
+      ],
+      // These fields gotten cleared after the first create.
+      roles: [],
+      suggestedReviewers: [],
+    });
+  });
+});
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
index 7f8095a019828..4d70ada109b16 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
@@ -77,6 +77,7 @@ export default function useAccessRequestCheckout() {
     onDryRunChange,
     startTime,
     onStartTimeChange,
+    reset: resetSpecifiableFields,
   } = useSpecifiableFields();
 
   const [showCheckout, setShowCheckout] = useState(false);
@@ -371,6 +372,7 @@ export default function useAccessRequestCheckout() {
   }
 
   function reset() {
+    resetSpecifiableFields();
     if (workspaceAccessRequest) {
       return workspaceAccessRequest.clearPendingAccessRequest();
     }

From fdd70e1be122974861c87db75e288ea07f843ebe Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Mon, 4 Nov 2024 15:53:23 -0800
Subject: [PATCH 4/5] Update snaps

---
 .../WelcomeWrapper.story.test.tsx.snap        |    1 -
 .../RequestCheckout.story.test.tsx.snap       | 1232 +++++++++++------
 .../AccessRequests.story.test.tsx.snap        |    1 -
 .../__snapshots__/ConnectDialog.test.tsx.snap |    2 -
 .../SelectResource.story.test.tsx.snap        |    8 -
 .../NewCredentials.story.test.tsx.snap        |   10 -
 6 files changed, 790 insertions(+), 464 deletions(-)

diff --git a/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap b/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
index 7a40b24bb5ff9..71b0808b0f065 100644
--- a/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
+++ b/web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`wrapper 1`] = `
 
 .c13 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
index 78b29d74a8ed2..5511c7720962a 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/__snapshots__/RequestCheckout.story.test.tsx.snap
@@ -31,13 +31,13 @@ exports[`failed state 1`] = `
   margin-bottom: 16px;
 }
 
-.c13 {
+.c23 {
   box-sizing: border-box;
   margin-bottom: 4px;
   margin-top: 40px;
 }
 
-.c16 {
+.c26 {
   box-sizing: border-box;
   margin-bottom: 8px;
   padding-bottom: 8px;
@@ -45,28 +45,28 @@ exports[`failed state 1`] = `
   border-bottom: 1px solid;
 }
 
-.c22 {
+.c32 {
   box-sizing: border-box;
   margin-top: 40px;
 }
 
-.c24 {
+.c34 {
   box-sizing: border-box;
   margin-bottom: 4px;
 }
 
-.c25 {
+.c35 {
   box-sizing: border-box;
   margin-bottom: 8px;
 }
 
-.c29 {
+.c38 {
   box-sizing: border-box;
   max-width: 270px;
   min-width: 200px;
 }
 
-.c38 {
+.c45 {
   box-sizing: border-box;
   padding: 8px;
   height: 80px;
@@ -77,7 +77,7 @@ exports[`failed state 1`] = `
   border-color: rgba(255,255,255,0.54);
 }
 
-.c40 {
+.c47 {
   box-sizing: border-box;
   margin-bottom: 8px;
   margin-top: 4px;
@@ -85,13 +85,30 @@ exports[`failed state 1`] = `
   height: 34px;
 }
 
-.c44 {
+.c51 {
   box-sizing: border-box;
   padding-top: 24px;
   padding-bottom: 24px;
 }
 
-.c21 {
+.c15 {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.c18 {
+  box-sizing: border-box;
+  margin-bottom: -16px;
+  width: 100%;
+}
+
+.c19 {
+  box-sizing: border-box;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+.c31 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -119,22 +136,22 @@ exports[`failed state 1`] = `
   width: 50px;
 }
 
-.c21:hover,
-.c21:focus {
+.c31:hover,
+.c31:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c21:active {
+.c31:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c21:disabled {
+.c31:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c47 {
+.c54 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -162,22 +179,22 @@ exports[`failed state 1`] = `
   text-transform: none;
 }
 
-.c47:hover,
-.c47:focus {
+.c54:hover,
+.c54:focus {
   background: #B29DFF;
 }
 
-.c47:active {
+.c54:active {
   background: #C5B6FF;
 }
 
-.c47:disabled {
+.c54:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c48 {
+.c55 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -205,22 +222,22 @@ exports[`failed state 1`] = `
   text-transform: none;
 }
 
-.c48:hover,
-.c48:focus {
+.c55:hover,
+.c55:focus {
   background: rgba(255,255,255,0.13);
 }
 
-.c48:active {
+.c55:active {
   background: rgba(255,255,255,0.18);
 }
 
-.c48:disabled {
+.c55:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c43 {
+.c50 {
   align-items: center;
   border: none;
   cursor: pointer;
@@ -240,17 +257,17 @@ exports[`failed state 1`] = `
   width: 32px;
 }
 
-.c43:disabled {
+.c50:disabled {
   color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
-.c43:not(:disabled):hover,
-.c43:not(:disabled):focus {
+.c50:not(:disabled):hover,
+.c50:not(:disabled):focus {
   background: rgba(255,255,255,0.13);
 }
 
-.c43:not(:disabled):active {
+.c50:not(:disabled):active {
   background: rgba(255,255,255,0.18);
 }
 
@@ -261,14 +278,14 @@ exports[`failed state 1`] = `
   margin-right: 16px;
 }
 
-.c32 {
+.c40 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-left: 16px;
 }
 
-.c35 {
+.c43 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -291,21 +308,21 @@ exports[`failed state 1`] = `
   margin: 0px;
 }
 
-.c20 {
+.c30 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
 }
 
-.c33 {
+.c41 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
   margin-right: 4px;
 }
 
-.c42 {
+.c49 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
@@ -313,7 +330,7 @@ exports[`failed state 1`] = `
   margin-right: 8px;
 }
 
-.c28 {
+.c21 {
   color: #FFFFFF;
   display: block;
   font-size: 12px;
@@ -326,39 +343,56 @@ exports[`failed state 1`] = `
   align-items: center;
 }
 
-.c17 {
+.c27 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.c19 {
+.c29 {
   display: flex;
   align-items: baseline;
   gap: 8px;
 }
 
-.c23 {
+.c33 {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.c26 {
+.c36 {
   display: flex;
   align-items: end;
   gap: 8px;
 }
 
-.c30 {
+.c13 {
   display: flex;
 }
 
-.c45 {
+.c52 {
   display: flex;
   gap: 8px;
 }
 
+.c14 {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.c16 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.c17 {
+  display: flex;
+  gap: 32px;
+}
+
 .c9 {
   border-collapse: collapse;
   border-spacing: 0;
@@ -449,7 +483,23 @@ exports[`failed state 1`] = `
   border-top: 2px solid rgba(0,0,0,0);
 }
 
-.c37 .react-select-container {
+.c44 {
+  height: 18px;
+  width: 18px;
+  color: inherit;
+}
+
+.c42 {
+  vertical-align: middle;
+  display: inline-block;
+  height: 18px;
+}
+
+.c42:hover {
+  cursor: pointer;
+}
+
+.c22 .react-select-container {
   box-sizing: border-box;
   display: block;
   font-size: 14px;
@@ -461,7 +511,7 @@ exports[`failed state 1`] = `
   border-radius: 4px;
 }
 
-.c37 .react-select__control {
+.c22 .react-select__control {
   outline: none;
   min-height: 40px;
   height: fit-content;
@@ -471,161 +521,145 @@ exports[`failed state 1`] = `
   box-shadow: none;
 }
 
-.c37 .react-select__control .react-select__dropdown-indicator {
+.c22 .react-select__control .react-select__dropdown-indicator {
   color: rgba(255,255,255,0.54);
 }
 
-.c37 .react-select__control:hover,
-.c37 .react-select__control:focus,
-.c37 .react-select__control:active {
+.c22 .react-select__control:hover,
+.c22 .react-select__control:focus,
+.c22 .react-select__control:active {
   border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
 
-.c37 .react-select__control:hover .react-select__dropdown-indicator,
-.c37 .react-select__control:focus .react-select__dropdown-indicator,
-.c37 .react-select__control:active .react-select__dropdown-indicator {
+.c22 .react-select__control:hover .react-select__dropdown-indicator,
+.c22 .react-select__control:focus .react-select__dropdown-indicator,
+.c22 .react-select__control:active .react-select__dropdown-indicator {
   color: #FFFFFF;
 }
 
-.c37 .react-select__control .react-select__indicator:hover,
-.c37 .react-select__control .react-select__dropdown-indicator:hover,
-.c37 .react-select__control .react-select__indicator:focus,
-.c37 .react-select__control .react-select__dropdown-indicator:focus,
-.c37 .react-select__control .react-select__indicator:active,
-.c37 .react-select__control .react-select__dropdown-indicator:active {
+.c22 .react-select__control .react-select__indicator:hover,
+.c22 .react-select__control .react-select__dropdown-indicator:hover,
+.c22 .react-select__control .react-select__indicator:focus,
+.c22 .react-select__control .react-select__dropdown-indicator:focus,
+.c22 .react-select__control .react-select__indicator:active,
+.c22 .react-select__control .react-select__dropdown-indicator:active {
   color: #FFFFFF;
 }
 
-.c37 .react-select__control--is-focused {
+.c22 .react-select__control--is-focused {
   border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
 
-.c37 .react-select__control--is-focused .react-select__dropdown-indicator {
+.c22 .react-select__control--is-focused .react-select__dropdown-indicator {
   color: #FFFFFF;
 }
 
-.c37 .react-select__single-value {
+.c22 .react-select__single-value {
   color: #FFFFFF;
 }
 
-.c37 .react-select__placeholder {
+.c22 .react-select__placeholder {
   color: rgba(255,255,255,0.54);
 }
 
-.c37 .react-select__multi-value {
+.c22 .react-select__multi-value {
   background-color: rgba(255,255,255,0.13);
 }
 
-.c37 .react-select__multi-value .react-select__multi-value__label {
+.c22 .react-select__multi-value .react-select__multi-value__label {
   color: #FFFFFF;
   padding: 0 6px;
 }
 
-.c37 .react-select__multi-value .react-select__multi-value__remove {
+.c22 .react-select__multi-value .react-select__multi-value__remove {
   color: #FFFFFF;
 }
 
-.c37 .react-select__multi-value .react-select__multi-value__remove:hover {
+.c22 .react-select__multi-value .react-select__multi-value__remove:hover {
   background-color: rgba(255,255,255,0.07);
   color: #FF6257;
 }
 
-.c37 .react-select__option:hover {
+.c22 .react-select__option:hover {
   cursor: pointer;
   background-color: rgba(255,255,255,0.07);
 }
 
-.c37 .react-select__option--is-focused {
+.c22 .react-select__option--is-focused {
   background-color: rgba(255,255,255,0.07);
 }
 
-.c37 .react-select__option--is-focused:hover {
+.c22 .react-select__option--is-focused:hover {
   cursor: pointer;
   background-color: rgba(255,255,255,0.07);
 }
 
-.c37 .react-select__option--is-selected {
+.c22 .react-select__option--is-selected {
   background-color: rgba(255,255,255,0.13);
   color: inherit;
   font-weight: 500;
 }
 
-.c37 .react-select__option--is-selected:hover {
+.c22 .react-select__option--is-selected:hover {
   background-color: rgba(255,255,255,0.13);
 }
 
-.c37 .react-select__clear-indicator {
+.c22 .react-select__clear-indicator {
   color: rgba(255,255,255,0.72);
 }
 
-.c37 .react-select__clear-indicator:hover,
-.c37 .react-select__clear-indicator:focus {
+.c22 .react-select__clear-indicator:hover,
+.c22 .react-select__clear-indicator:focus {
   background-color: rgba(255,255,255,0.07);
 }
 
-.c37 .react-select__clear-indicator:hover svg,
-.c37 .react-select__clear-indicator:focus svg {
+.c22 .react-select__clear-indicator:hover svg,
+.c22 .react-select__clear-indicator:focus svg {
   color: #FF6257;
 }
 
-.c37 .react-select__menu {
+.c22 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.c37 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
+.c22 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
   background: rgba(255,255,255,0.13);
   border-radius: 4px;
 }
 
-.c37 .react-select__indicator-separator {
+.c22 .react-select__indicator-separator {
   display: none;
 }
 
-.c37 .react-select__loading-indicator {
+.c22 .react-select__loading-indicator {
   display: none;
 }
 
-.c37 .react-select__control--is-disabled {
+.c22 .react-select__control--is-disabled {
   color: rgba(255,255,255,0.36);
   border: 1px solid rgba(255,255,255,0.36);
 }
 
-.c37 .react-select__control--is-disabled .react-select__single-value,
-.c37 .react-select__control--is-disabled .react-select__placeholder {
+.c22 .react-select__control--is-disabled .react-select__single-value,
+.c22 .react-select__control--is-disabled .react-select__placeholder {
   color: rgba(255,255,255,0.36);
 }
 
-.c37 .react-select__control--is-disabled .react-select__indicator {
+.c22 .react-select__control--is-disabled .react-select__indicator {
   color: rgba(255,255,255,0.36);
 }
 
-.c37 .react-select__input {
+.c22 .react-select__input {
   color: #FFFFFF;
 }
 
-.c36 {
-  height: 18px;
-  width: 18px;
-  color: inherit;
-}
-
-.c34 {
-  vertical-align: middle;
-  display: inline-block;
-  height: 18px;
-}
-
-.c34:hover {
-  cursor: pointer;
-}
-
-.c31 {
+.c39 {
   height: 40px;
   border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
@@ -635,16 +669,16 @@ exports[`failed state 1`] = `
   cursor: pointer;
 }
 
-.c31:hover {
+.c39:hover {
   background-color: rgba(255,255,255,0.07);
   border: 1px solid rgba(255,255,255,0.72);
 }
 
-.c27 {
+.c37 {
   position: relative;
 }
 
-.c14 {
+.c24 {
   width: 260px;
   height: 150px;
   background-color: #ffffff;
@@ -655,26 +689,26 @@ exports[`failed state 1`] = `
   top: 40px;
 }
 
-.c14 .react-select__group,
-.c14 .react-select__group-heading,
-.c14 .react-select__menu-list {
+.c24 .react-select__group,
+.c24 .react-select__group-heading,
+.c24 .react-select__menu-list {
   padding: 0;
   margin: 0;
 }
 
-.c14 .react-select__menu-list {
+.c24 .react-select__menu-list {
   margin-top: 10px;
 }
 
-.c14 .react-select__option--is-focused {
+.c24 .react-select__option--is-focused {
   background-color: inherit;
 }
 
-.c14 .react-select__option--is-focused:hover {
+.c24 .react-select__option--is-focused:hover {
   background-color: #deebff;
 }
 
-.c14 .react-select-container {
+.c24 .react-select-container {
   width: 300px;
   box-sizing: border-box;
   border: none;
@@ -687,30 +721,30 @@ exports[`failed state 1`] = `
   border-radius: 4px;
 }
 
-.c14 .react-select__menu {
+.c24 .react-select__menu {
   box-shadow: none;
 }
 
-.c14 .react-select__control {
+.c24 .react-select__control {
   border-radius: 30px;
   background-color: #f0f2f4;
   margin: 0px 16px 10px 16px;
 }
 
-.c14 .react-select__control:hover {
+.c24 .react-select__control:hover {
   cursor: pointer;
 }
 
-.c14 .react-select__control--is-focused {
+.c24 .react-select__control--is-focused {
   border-color: transparent;
   box-shadow: none;
 }
 
-.c14 .react-select__placeholder {
+.c24 .react-select__placeholder {
   font-size: 14px;
 }
 
-.c14 .react-select__option {
+.c24 .react-select__option {
   white-space: nowrap;
   padding: 9px 16px;
   border-top: 1px solid #eaeaea;
@@ -718,43 +752,43 @@ exports[`failed state 1`] = `
   font-size: 14px;
 }
 
-.c14 .react-select__option:hover {
+.c24 .react-select__option:hover {
   cursor: pointer;
 }
 
-.c14 .react-select__option:hover:last-child {
+.c24 .react-select__option:hover:last-child {
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
-.c14 .react-select__option .icon-circlecheck {
+.c24 .react-select__option .icon-circlecheck {
   color: transparent;
   margin-right: 10px;
 }
 
-.c14 .react-select__option--is-selected {
+.c24 .react-select__option--is-selected {
   background-color: inherit;
   color: inherit;
 }
 
-.c14 .react-select__indicators {
+.c24 .react-select__indicators {
   display: none;
 }
 
-.c14 .react-select__selected .icon-circlecheck {
+.c24 .react-select__selected .icon-circlecheck {
   color: #00BFA6;
 }
 
-.c14 .react-select__selected .icon-cross {
+.c24 .react-select__selected .icon-cross {
   color: #010B1C;
   display: none;
 }
 
-.c14 .react-select__selected:hover .icon-cross {
+.c24 .react-select__selected:hover .icon-cross {
   display: block;
 }
 
-.c15 {
+.c25 {
   width: 100%;
   background-color: #efefef;
   color: #324148;
@@ -762,14 +796,58 @@ exports[`failed state 1`] = `
   padding: 3px 15px;
 }
 
-.c18 {
+.c28 {
   border-color: rgba(255,255,255,0.13);
 }
 
-.c41 {
+.c48 {
   border-color: rgba(255,255,255,0.13);
 }
 
+.c20 input[type='checkbox'] {
+  cursor: pointer;
+}
+
+.c20 .react-select__control {
+  font-size: 12px;
+  width: 350px;
+  background: #344179;
+}
+
+.c20 .react-select__control:hover {
+  background: #344179;
+}
+
+.c20 .react-select__menu {
+  font-size: 12px;
+  width: 350px;
+  right: 0;
+  margin-bottom: 0;
+}
+
+.c20 .react-select__option {
+  padding: 0;
+  font-size: 12px;
+}
+
+.c20 .react-select__value-container {
+  position: static;
+}
+
+.c20 .react-select__placeholder {
+  color: #FFFFFF;
+}
+
+.c12 {
+  cursor: pointer;
+  background-color: rgba(255,255,255,0.07);
+  border-radius: 2px;
+}
+
+.c12:hover {
+  background-color: rgba(255,255,255,0.13);
+}
+
 .c3 {
   position: absolute;
   z-index: 11;
@@ -833,35 +911,25 @@ exports[`failed state 1`] = `
   overflow: hidden;
 }
 
-.c12 {
-  cursor: pointer;
-  background-color: rgba(255,255,255,0.07);
-  border-radius: 2px;
-}
-
-.c12:hover {
-  background-color: rgba(255,255,255,0.13);
-}
-
-.c46 {
+.c53 {
   position: sticky;
   bottom: 0;
   background: #0C143D;
   border-top: 1px solid rgba(255,255,255,0.13);
 }
 
-.c39 {
+.c46 {
   outline: none;
   background: transparent;
 }
 
-.c39::placeholder {
+.c46::placeholder {
   color: rgba(255,255,255,0.54);
 }
 
-.c39:hover,
-.c39:focus,
-.c39:active {
+.c46:hover,
+.c46:focus,
+.c46:active {
   border: 1px solid rgba(255,255,255,0.72);
 }
 
@@ -991,29 +1059,135 @@ exports[`failed state 1`] = `
               </td>
             </tr>
             <tr>
-              <td>
-                Kubernetes
-              </td>
-              <td>
-                kube-name
-              </td>
               <td
-                align="right"
+                colspan="3"
               >
-                <span
-                  class="c11 c12"
+                <div
+                  class="c1 c13"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    width="16"
+                  <div
+                    class="c1 c14"
                   >
-                    <path
-                      d="M19.2803 5.78033C19.5732 5.48744 19.5732 5.01256 19.2803 4.71967C18.9874 4.42678 18.5126 4.42678 18.2197 4.71967L12 10.9393L5.78033 4.71967C5.48744 4.42678 5.01256 4.42678 4.71967 4.71967C4.42678 5.01256 4.42678 5.48744 4.71967 5.78033L10.9393 12L4.71967 18.2197C4.42678 18.5126 4.42678 18.9874 4.71967 19.2803C5.01256 19.5732 5.48744 19.5732 5.78033 19.2803L12 13.0607L18.2197 19.2803C18.5126 19.5732 18.9874 19.5732 19.2803 19.2803C19.5732 18.9874 19.5732 18.5126 19.2803 18.2197L13.0607 12L19.2803 5.78033Z"
-                    />
-                  </svg>
-                </span>
+                    <div
+                      class="c15 c16"
+                      width="100%"
+                    >
+                      <div
+                        class="c1 c17"
+                      >
+                        <div
+                          class="c1"
+                        >
+                          Kubernetes
+                        </div>
+                        <div
+                          class="c1"
+                        >
+                          kube-name
+                        </div>
+                      </div>
+                      <span
+                        class="c11 c12"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          width="16"
+                        >
+                          <path
+                            d="M19.2803 5.78033C19.5732 5.48744 19.5732 5.01256 19.2803 4.71967C18.9874 4.42678 18.5126 4.42678 18.2197 4.71967L12 10.9393L5.78033 4.71967C5.48744 4.42678 5.01256 4.42678 4.71967 4.71967C4.42678 5.01256 4.42678 5.48744 4.71967 5.78033L10.9393 12L4.71967 18.2197C4.42678 18.5126 4.42678 18.9874 4.71967 19.2803C5.01256 19.5732 5.48744 19.5732 5.78033 19.2803L12 13.0607L18.2197 19.2803C18.5126 19.5732 18.9874 19.5732 19.2803 19.2803C19.5732 18.9874 19.5732 18.5126 19.2803 18.2197L13.0607 12L19.2803 5.78033Z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                    <div
+                      class="c18"
+                      width="100%"
+                    >
+                      <div
+                        class="c19 c20"
+                        width="100%"
+                      >
+                        <label
+                          class="c21"
+                          for="app-name"
+                        >
+                          Namespaces
+                        </label>
+                        <div
+                          class="c22"
+                        >
+                          <div
+                            class="react-select-container css-2b097c-container"
+                          >
+                            <div
+                              class="react-select__control css-yk16xz-control"
+                            >
+                              <div
+                                class="react-select__value-container react-select__value-container--is-multi css-g1d714-ValueContainer"
+                              >
+                                <div
+                                  class="react-select__placeholder css-1wa3eu0-placeholder"
+                                >
+                                  Start typing a namespace and press enter
+                                </div>
+                                <div
+                                  class="css-b8ldur-Input"
+                                >
+                                  <div
+                                    class="react-select__input"
+                                    style="display: inline-block;"
+                                  >
+                                    <input
+                                      aria-autocomplete="list"
+                                      autocapitalize="none"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      id="app-name"
+                                      spellcheck="false"
+                                      style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                                      tabindex="0"
+                                      type="text"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
+                              >
+                                <span
+                                  class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+                                />
+                                <div
+                                  aria-hidden="true"
+                                  class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="css-6q0nyr-Svg"
+                                    focusable="false"
+                                    height="20"
+                                    viewBox="0 0 20 20"
+                                    width="20"
+                                  >
+                                    <path
+                                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                                    />
+                                  </svg>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </td>
             </tr>
             <tr>
@@ -1071,14 +1245,14 @@ exports[`failed state 1`] = `
           </tbody>
         </table>
         <div
-          class="c13"
+          class="c23"
         >
           <div
             class="c1"
             style="position: relative;"
           >
             <div
-              class="c1 c14"
+              class="c1 c24"
               style="display: none;"
             >
               <div
@@ -1107,7 +1281,7 @@ exports[`failed state 1`] = `
                           autocapitalize="none"
                           autocomplete="off"
                           autocorrect="off"
-                          id="react-select-4-input"
+                          id="react-select-5-input"
                           spellcheck="false"
                           style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
                           tabindex="0"
@@ -1157,10 +1331,10 @@ exports[`failed state 1`] = `
                       <div
                         class="react-select__group-heading css-18ng2q5-group"
                         data="[object Object]"
-                        id="react-select-4-group-1-heading"
+                        id="react-select-5-group-1-heading"
                       >
                         <div
-                          class="c1 c15"
+                          class="c1 c25"
                         >
                           Suggested Reviewers
                         </div>
@@ -1172,20 +1346,20 @@ exports[`failed state 1`] = `
               </div>
             </div>
             <div
-              class="c16 c17 c18"
+              class="c26 c27 c28"
               height="34px"
             >
               <div
-                class="c1 c19"
+                class="c1 c29"
               >
                 <div
-                  class="c20"
+                  class="c30"
                   font-size="1"
                 >
                   Reviewers (optional)
                 </div>
                 <button
-                  class="c21"
+                  class="c31"
                   kind="border"
                   width="50px"
                 >
@@ -1200,28 +1374,28 @@ exports[`failed state 1`] = `
           </div>
         </div>
         <div
-          class="c22 c23"
+          class="c32 c33"
         >
           <div
-            class="c24"
+            class="c34"
           >
             <div
-              class="c25 c26"
+              class="c35 c36"
             >
               <div
-                class="c1 c27"
+                class="c1 c37"
               >
                 <label
-                  class="c28"
+                  class="c21"
                 >
                   Start Date
                 </label>
                 <div
-                  class="c29 c30 c31"
+                  class="c38 c13 c39"
                 >
                   Immediately
                   <span
-                    class="c32 icon icon-calendar"
+                    class="c40 icon icon-calendar"
                   >
                     <svg
                       fill="currentColor"
@@ -1246,23 +1420,23 @@ exports[`failed state 1`] = `
               </div>
             </div>
             <label
-              class="c28"
+              class="c21"
               color="text.slightlyMuted"
             >
               <div
                 class="c1 c5"
               >
                 <div
-                  class="c33"
+                  class="c41"
                 >
                   Access Duration
                 </div>
                 <span
-                  class="c34"
+                  class="c42"
                   role="icon"
                 >
                   <span
-                    class="c35 c36"
+                    class="c43 c44"
                   >
                     <svg
                       fill="currentColor"
@@ -1286,7 +1460,7 @@ exports[`failed state 1`] = `
                 </span>
               </div>
               <div
-                class="c37"
+                class="c22"
               >
                 <div
                   class="react-select-container css-2b097c-container"
@@ -1314,7 +1488,7 @@ exports[`failed state 1`] = `
                             autocapitalize="none"
                             autocomplete="off"
                             autocorrect="off"
-                            id="react-select-5-input"
+                            id="react-select-6-input"
                             spellcheck="false"
                             style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
                             tabindex="0"
@@ -1357,11 +1531,11 @@ exports[`failed state 1`] = `
             </label>
           </div>
           <label
-            class="c28"
+            class="c21"
           >
             Request Reason
             <textarea
-              class="c38 c39"
+              class="c45 c46"
               color="text.main"
               height="80px"
               placeholder="Describe your request... (optional)"
@@ -1369,21 +1543,21 @@ exports[`failed state 1`] = `
             />
           </label>
           <div
-            class="c40 c17 c41"
+            class="c47 c27 c48"
             height="34px"
           >
             <div
-              class="c42"
+              class="c49"
               font-size="1"
             >
               Additional Options
             </div>
             <button
-              class="c43"
+              class="c50"
               data-testid="additional-info-btn"
             >
               <span
-                class="c35 icon icon-chevronright"
+                class="c43 icon icon-chevronright"
               >
                 <svg
                   fill="currentColor"
@@ -1401,17 +1575,17 @@ exports[`failed state 1`] = `
             </button>
           </div>
           <div
-            class="c44 c45 c46"
+            class="c51 c52 c53"
           >
             <button
-              class="c47"
+              class="c54"
               kind="primary"
               width="100%"
             >
               Submit Request
             </button>
             <button
-              class="c48"
+              class="c55"
               kind="secondary"
               width="100%"
             >
@@ -1435,18 +1609,18 @@ exports[`loaded state 1`] = `
   margin-bottom: 16px;
 }
 
-.c12 {
+.c22 {
   box-sizing: border-box;
   margin-bottom: 4px;
   margin-top: 40px;
 }
 
-.c15 {
+.c25 {
   box-sizing: border-box;
   width: 210px;
 }
 
-.c20 {
+.c30 {
   box-sizing: border-box;
   margin-bottom: 8px;
   padding-bottom: 8px;
@@ -1454,7 +1628,7 @@ exports[`loaded state 1`] = `
   border-bottom: 1px solid;
 }
 
-.c26 {
+.c36 {
   box-sizing: border-box;
   padding-left: 16px;
   padding-right: 16px;
@@ -1465,28 +1639,28 @@ exports[`loaded state 1`] = `
   border-color: #222C59;
 }
 
-.c30 {
+.c40 {
   box-sizing: border-box;
   margin-top: 40px;
 }
 
-.c32 {
+.c42 {
   box-sizing: border-box;
   margin-bottom: 4px;
 }
 
-.c33 {
+.c43 {
   box-sizing: border-box;
   margin-bottom: 8px;
 }
 
-.c37 {
+.c46 {
   box-sizing: border-box;
   max-width: 270px;
   min-width: 200px;
 }
 
-.c45 {
+.c52 {
   box-sizing: border-box;
   padding: 8px;
   height: 80px;
@@ -1497,21 +1671,38 @@ exports[`loaded state 1`] = `
   border-color: rgba(255,255,255,0.54);
 }
 
-.c47 {
+.c54 {
+  box-sizing: border-box;
+  margin-bottom: 8px;
+  margin-top: 4px;
+  padding-bottom: 8px;
+  height: 34px;
+}
+
+.c57 {
+  box-sizing: border-box;
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.c14 {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.c17 {
   box-sizing: border-box;
-  margin-bottom: 8px;
-  margin-top: 4px;
-  padding-bottom: 8px;
-  height: 34px;
+  margin-bottom: -16px;
+  width: 100%;
 }
 
-.c50 {
+.c18 {
   box-sizing: border-box;
-  padding-top: 24px;
-  padding-bottom: 24px;
+  margin-bottom: 24px;
+  width: 100%;
 }
 
-.c24 {
+.c34 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -1539,22 +1730,22 @@ exports[`loaded state 1`] = `
   width: 50px;
 }
 
-.c24:hover,
-.c24:focus {
+.c34:hover,
+.c34:focus {
   background: rgba(255,255,255,0.07);
 }
 
-.c24:active {
+.c34:active {
   background: rgba(255,255,255,0.13);
 }
 
-.c24:disabled {
+.c34:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c53 {
+.c60 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -1582,22 +1773,22 @@ exports[`loaded state 1`] = `
   text-transform: none;
 }
 
-.c53:hover,
-.c53:focus {
+.c60:hover,
+.c60:focus {
   background: #B29DFF;
 }
 
-.c53:active {
+.c60:active {
   background: #C5B6FF;
 }
 
-.c53:disabled {
+.c60:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c54 {
+.c61 {
   line-height: 1.5;
   margin: 0;
   display: inline-flex;
@@ -1625,22 +1816,22 @@ exports[`loaded state 1`] = `
   text-transform: none;
 }
 
-.c54:hover,
-.c54:focus {
+.c61:hover,
+.c61:focus {
   background: rgba(255,255,255,0.13);
 }
 
-.c54:active {
+.c61:active {
   background: rgba(255,255,255,0.18);
 }
 
-.c54:disabled {
+.c61:disabled {
   background: rgba(255,255,255,0.12);
   color: rgba(255,255,255,0.3);
   cursor: auto;
 }
 
-.c25 {
+.c35 {
   align-items: center;
   border: none;
   cursor: pointer;
@@ -1660,21 +1851,21 @@ exports[`loaded state 1`] = `
   width: 32px;
 }
 
-.c25:disabled {
+.c35:disabled {
   color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
-.c25:not(:disabled):hover,
-.c25:not(:disabled):focus {
+.c35:not(:disabled):hover,
+.c35:not(:disabled):focus {
   background: rgba(255,255,255,0.13);
 }
 
-.c25:not(:disabled):active {
+.c35:not(:disabled):active {
   background: rgba(255,255,255,0.18);
 }
 
-.c29 {
+.c39 {
   align-items: center;
   border: none;
   cursor: pointer;
@@ -1694,17 +1885,17 @@ exports[`loaded state 1`] = `
   width: 24px;
 }
 
-.c29:disabled {
+.c39:disabled {
   color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
-.c29:not(:disabled):hover,
-.c29:not(:disabled):focus {
+.c39:not(:disabled):hover,
+.c39:not(:disabled):focus {
   background: rgba(255,255,255,0.13);
 }
 
-.c29:not(:disabled):active {
+.c39:not(:disabled):active {
   background: rgba(255,255,255,0.18);
 }
 
@@ -1715,7 +1906,7 @@ exports[`loaded state 1`] = `
   margin-right: 16px;
 }
 
-.c16 {
+.c26 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1723,13 +1914,13 @@ exports[`loaded state 1`] = `
   margin-right: 8px;
 }
 
-.c18 {
+.c28 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
-.c40 {
+.c48 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1753,20 +1944,20 @@ exports[`loaded state 1`] = `
   margin: 0px;
 }
 
-.c17 {
+.c27 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
 }
 
-.c23 {
+.c33 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
 }
 
-.c28 {
+.c38 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 600;
@@ -1775,14 +1966,14 @@ exports[`loaded state 1`] = `
   margin: 0px;
 }
 
-.c41 {
+.c49 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
   margin-right: 4px;
 }
 
-.c49 {
+.c56 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
@@ -1790,7 +1981,7 @@ exports[`loaded state 1`] = `
   margin-right: 8px;
 }
 
-.c36 {
+.c20 {
   color: #FFFFFF;
   display: block;
   font-size: 12px;
@@ -1803,39 +1994,56 @@ exports[`loaded state 1`] = `
   align-items: center;
 }
 
-.c14 {
+.c24 {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.c22 {
+.c32 {
   display: flex;
   align-items: baseline;
   gap: 8px;
 }
 
-.c31 {
+.c41 {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
 
-.c34 {
+.c44 {
   display: flex;
   align-items: end;
   gap: 8px;
 }
 
-.c38 {
+.c12 {
   display: flex;
 }
 
-.c51 {
+.c58 {
+  display: flex;
+  gap: 8px;
+}
+
+.c13 {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.c15 {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
 
+.c16 {
+  display: flex;
+  gap: 32px;
+}
+
 .c8 {
   border-collapse: collapse;
   border-spacing: 0;
@@ -1926,7 +2134,23 @@ exports[`loaded state 1`] = `
   border-top: 2px solid rgba(0,0,0,0);
 }
 
-.c44 .react-select-container {
+.c51 {
+  height: 18px;
+  width: 18px;
+  color: inherit;
+}
+
+.c50 {
+  vertical-align: middle;
+  display: inline-block;
+  height: 18px;
+}
+
+.c50:hover {
+  cursor: pointer;
+}
+
+.c21 .react-select-container {
   box-sizing: border-box;
   display: block;
   font-size: 14px;
@@ -1938,7 +2162,7 @@ exports[`loaded state 1`] = `
   border-radius: 4px;
 }
 
-.c44 .react-select__control {
+.c21 .react-select__control {
   outline: none;
   min-height: 40px;
   height: fit-content;
@@ -1948,161 +2172,145 @@ exports[`loaded state 1`] = `
   box-shadow: none;
 }
 
-.c44 .react-select__control .react-select__dropdown-indicator {
+.c21 .react-select__control .react-select__dropdown-indicator {
   color: rgba(255,255,255,0.54);
 }
 
-.c44 .react-select__control:hover,
-.c44 .react-select__control:focus,
-.c44 .react-select__control:active {
+.c21 .react-select__control:hover,
+.c21 .react-select__control:focus,
+.c21 .react-select__control:active {
   border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
 
-.c44 .react-select__control:hover .react-select__dropdown-indicator,
-.c44 .react-select__control:focus .react-select__dropdown-indicator,
-.c44 .react-select__control:active .react-select__dropdown-indicator {
+.c21 .react-select__control:hover .react-select__dropdown-indicator,
+.c21 .react-select__control:focus .react-select__dropdown-indicator,
+.c21 .react-select__control:active .react-select__dropdown-indicator {
   color: #FFFFFF;
 }
 
-.c44 .react-select__control .react-select__indicator:hover,
-.c44 .react-select__control .react-select__dropdown-indicator:hover,
-.c44 .react-select__control .react-select__indicator:focus,
-.c44 .react-select__control .react-select__dropdown-indicator:focus,
-.c44 .react-select__control .react-select__indicator:active,
-.c44 .react-select__control .react-select__dropdown-indicator:active {
+.c21 .react-select__control .react-select__indicator:hover,
+.c21 .react-select__control .react-select__dropdown-indicator:hover,
+.c21 .react-select__control .react-select__indicator:focus,
+.c21 .react-select__control .react-select__dropdown-indicator:focus,
+.c21 .react-select__control .react-select__indicator:active,
+.c21 .react-select__control .react-select__dropdown-indicator:active {
   color: #FFFFFF;
 }
 
-.c44 .react-select__control--is-focused {
+.c21 .react-select__control--is-focused {
   border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
 
-.c44 .react-select__control--is-focused .react-select__dropdown-indicator {
+.c21 .react-select__control--is-focused .react-select__dropdown-indicator {
   color: #FFFFFF;
 }
 
-.c44 .react-select__single-value {
+.c21 .react-select__single-value {
   color: #FFFFFF;
 }
 
-.c44 .react-select__placeholder {
+.c21 .react-select__placeholder {
   color: rgba(255,255,255,0.54);
 }
 
-.c44 .react-select__multi-value {
+.c21 .react-select__multi-value {
   background-color: rgba(255,255,255,0.13);
 }
 
-.c44 .react-select__multi-value .react-select__multi-value__label {
+.c21 .react-select__multi-value .react-select__multi-value__label {
   color: #FFFFFF;
   padding: 0 6px;
 }
 
-.c44 .react-select__multi-value .react-select__multi-value__remove {
+.c21 .react-select__multi-value .react-select__multi-value__remove {
   color: #FFFFFF;
 }
 
-.c44 .react-select__multi-value .react-select__multi-value__remove:hover {
+.c21 .react-select__multi-value .react-select__multi-value__remove:hover {
   background-color: rgba(255,255,255,0.07);
   color: #FF6257;
 }
 
-.c44 .react-select__option:hover {
+.c21 .react-select__option:hover {
   cursor: pointer;
   background-color: rgba(255,255,255,0.07);
 }
 
-.c44 .react-select__option--is-focused {
+.c21 .react-select__option--is-focused {
   background-color: rgba(255,255,255,0.07);
 }
 
-.c44 .react-select__option--is-focused:hover {
+.c21 .react-select__option--is-focused:hover {
   cursor: pointer;
   background-color: rgba(255,255,255,0.07);
 }
 
-.c44 .react-select__option--is-selected {
+.c21 .react-select__option--is-selected {
   background-color: rgba(255,255,255,0.13);
   color: inherit;
   font-weight: 500;
 }
 
-.c44 .react-select__option--is-selected:hover {
+.c21 .react-select__option--is-selected:hover {
   background-color: rgba(255,255,255,0.13);
 }
 
-.c44 .react-select__clear-indicator {
+.c21 .react-select__clear-indicator {
   color: rgba(255,255,255,0.72);
 }
 
-.c44 .react-select__clear-indicator:hover,
-.c44 .react-select__clear-indicator:focus {
+.c21 .react-select__clear-indicator:hover,
+.c21 .react-select__clear-indicator:focus {
   background-color: rgba(255,255,255,0.07);
 }
 
-.c44 .react-select__clear-indicator:hover svg,
-.c44 .react-select__clear-indicator:focus svg {
+.c21 .react-select__clear-indicator:hover svg,
+.c21 .react-select__clear-indicator:focus svg {
   color: #FF6257;
 }
 
-.c44 .react-select__menu {
+.c21 .react-select__menu {
   margin-top: 0px;
   background-color: #344179;
   box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
 }
 
-.c44 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
+.c21 .react-select__menu .react-select__menu-list::-webkit-scrollbar-thumb {
   background: rgba(255,255,255,0.13);
   border-radius: 4px;
 }
 
-.c44 .react-select__indicator-separator {
+.c21 .react-select__indicator-separator {
   display: none;
 }
 
-.c44 .react-select__loading-indicator {
+.c21 .react-select__loading-indicator {
   display: none;
 }
 
-.c44 .react-select__control--is-disabled {
+.c21 .react-select__control--is-disabled {
   color: rgba(255,255,255,0.36);
   border: 1px solid rgba(255,255,255,0.36);
 }
 
-.c44 .react-select__control--is-disabled .react-select__single-value,
-.c44 .react-select__control--is-disabled .react-select__placeholder {
+.c21 .react-select__control--is-disabled .react-select__single-value,
+.c21 .react-select__control--is-disabled .react-select__placeholder {
   color: rgba(255,255,255,0.36);
 }
 
-.c44 .react-select__control--is-disabled .react-select__indicator {
+.c21 .react-select__control--is-disabled .react-select__indicator {
   color: rgba(255,255,255,0.36);
 }
 
-.c44 .react-select__input {
+.c21 .react-select__input {
   color: #FFFFFF;
 }
 
-.c43 {
-  height: 18px;
-  width: 18px;
-  color: inherit;
-}
-
-.c42 {
-  vertical-align: middle;
-  display: inline-block;
-  height: 18px;
-}
-
-.c42:hover {
-  cursor: pointer;
-}
-
-.c39 {
+.c47 {
   height: 40px;
   border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
@@ -2112,16 +2320,16 @@ exports[`loaded state 1`] = `
   cursor: pointer;
 }
 
-.c39:hover {
+.c47:hover {
   background-color: rgba(255,255,255,0.07);
   border: 1px solid rgba(255,255,255,0.72);
 }
 
-.c35 {
+.c45 {
   position: relative;
 }
 
-.c13 {
+.c23 {
   width: 260px;
   height: 150px;
   background-color: #ffffff;
@@ -2132,26 +2340,26 @@ exports[`loaded state 1`] = `
   top: 40px;
 }
 
-.c13 .react-select__group,
-.c13 .react-select__group-heading,
-.c13 .react-select__menu-list {
+.c23 .react-select__group,
+.c23 .react-select__group-heading,
+.c23 .react-select__menu-list {
   padding: 0;
   margin: 0;
 }
 
-.c13 .react-select__menu-list {
+.c23 .react-select__menu-list {
   margin-top: 10px;
 }
 
-.c13 .react-select__option--is-focused {
+.c23 .react-select__option--is-focused {
   background-color: inherit;
 }
 
-.c13 .react-select__option--is-focused:hover {
+.c23 .react-select__option--is-focused:hover {
   background-color: #deebff;
 }
 
-.c13 .react-select-container {
+.c23 .react-select-container {
   width: 300px;
   box-sizing: border-box;
   border: none;
@@ -2164,30 +2372,30 @@ exports[`loaded state 1`] = `
   border-radius: 4px;
 }
 
-.c13 .react-select__menu {
+.c23 .react-select__menu {
   box-shadow: none;
 }
 
-.c13 .react-select__control {
+.c23 .react-select__control {
   border-radius: 30px;
   background-color: #f0f2f4;
   margin: 0px 16px 10px 16px;
 }
 
-.c13 .react-select__control:hover {
+.c23 .react-select__control:hover {
   cursor: pointer;
 }
 
-.c13 .react-select__control--is-focused {
+.c23 .react-select__control--is-focused {
   border-color: transparent;
   box-shadow: none;
 }
 
-.c13 .react-select__placeholder {
+.c23 .react-select__placeholder {
   font-size: 14px;
 }
 
-.c13 .react-select__option {
+.c23 .react-select__option {
   white-space: nowrap;
   padding: 9px 16px;
   border-top: 1px solid #eaeaea;
@@ -2195,43 +2403,43 @@ exports[`loaded state 1`] = `
   font-size: 14px;
 }
 
-.c13 .react-select__option:hover {
+.c23 .react-select__option:hover {
   cursor: pointer;
 }
 
-.c13 .react-select__option:hover:last-child {
+.c23 .react-select__option:hover:last-child {
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 
-.c13 .react-select__option .icon-circlecheck {
+.c23 .react-select__option .icon-circlecheck {
   color: transparent;
   margin-right: 10px;
 }
 
-.c13 .react-select__option--is-selected {
+.c23 .react-select__option--is-selected {
   background-color: inherit;
   color: inherit;
 }
 
-.c13 .react-select__indicators {
+.c23 .react-select__indicators {
   display: none;
 }
 
-.c13 .react-select__selected .icon-circlecheck {
+.c23 .react-select__selected .icon-circlecheck {
   color: #00BFA6;
 }
 
-.c13 .react-select__selected .icon-cross {
+.c23 .react-select__selected .icon-cross {
   color: #010B1C;
   display: none;
 }
 
-.c13 .react-select__selected:hover .icon-cross {
+.c23 .react-select__selected:hover .icon-cross {
   display: block;
 }
 
-.c19 {
+.c29 {
   width: 100%;
   background-color: #efefef;
   color: #324148;
@@ -2239,18 +2447,62 @@ exports[`loaded state 1`] = `
   padding: 3px 15px;
 }
 
-.c27 {
+.c37 {
   background: rgba(255,255,255,0.07);
 }
 
-.c21 {
+.c31 {
   border-color: rgba(255,255,255,0.13);
 }
 
-.c48 {
+.c55 {
   border-color: rgba(255,255,255,0.13);
 }
 
+.c19 input[type='checkbox'] {
+  cursor: pointer;
+}
+
+.c19 .react-select__control {
+  font-size: 12px;
+  width: 350px;
+  background: #344179;
+}
+
+.c19 .react-select__control:hover {
+  background: #344179;
+}
+
+.c19 .react-select__menu {
+  font-size: 12px;
+  width: 350px;
+  right: 0;
+  margin-bottom: 0;
+}
+
+.c19 .react-select__option {
+  padding: 0;
+  font-size: 12px;
+}
+
+.c19 .react-select__value-container {
+  position: static;
+}
+
+.c19 .react-select__placeholder {
+  color: #FFFFFF;
+}
+
+.c11 {
+  cursor: pointer;
+  background-color: rgba(255,255,255,0.07);
+  border-radius: 2px;
+}
+
+.c11:hover {
+  background-color: rgba(255,255,255,0.13);
+}
+
 .c3 {
   position: absolute;
   z-index: 11;
@@ -2314,35 +2566,25 @@ exports[`loaded state 1`] = `
   overflow: hidden;
 }
 
-.c11 {
-  cursor: pointer;
-  background-color: rgba(255,255,255,0.07);
-  border-radius: 2px;
-}
-
-.c11:hover {
-  background-color: rgba(255,255,255,0.13);
-}
-
-.c52 {
+.c59 {
   position: sticky;
   bottom: 0;
   background: #0C143D;
   border-top: 1px solid rgba(255,255,255,0.13);
 }
 
-.c46 {
+.c53 {
   outline: none;
   background: transparent;
 }
 
-.c46::placeholder {
+.c53::placeholder {
   color: rgba(255,255,255,0.54);
 }
 
-.c46:hover,
-.c46:focus,
-.c46:active {
+.c53:hover,
+.c53:focus,
+.c53:active {
   border: 1px solid rgba(255,255,255,0.72);
 }
 
@@ -2466,29 +2708,135 @@ exports[`loaded state 1`] = `
               </td>
             </tr>
             <tr>
-              <td>
-                Kubernetes
-              </td>
-              <td>
-                kube-name
-              </td>
               <td
-                align="right"
+                colspan="3"
               >
-                <span
-                  class="c10 c11"
+                <div
+                  class="c1 c12"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    width="16"
+                  <div
+                    class="c1 c13"
                   >
-                    <path
-                      d="M19.2803 5.78033C19.5732 5.48744 19.5732 5.01256 19.2803 4.71967C18.9874 4.42678 18.5126 4.42678 18.2197 4.71967L12 10.9393L5.78033 4.71967C5.48744 4.42678 5.01256 4.42678 4.71967 4.71967C4.42678 5.01256 4.42678 5.48744 4.71967 5.78033L10.9393 12L4.71967 18.2197C4.42678 18.5126 4.42678 18.9874 4.71967 19.2803C5.01256 19.5732 5.48744 19.5732 5.78033 19.2803L12 13.0607L18.2197 19.2803C18.5126 19.5732 18.9874 19.5732 19.2803 19.2803C19.5732 18.9874 19.5732 18.5126 19.2803 18.2197L13.0607 12L19.2803 5.78033Z"
-                    />
-                  </svg>
-                </span>
+                    <div
+                      class="c14 c15"
+                      width="100%"
+                    >
+                      <div
+                        class="c1 c16"
+                      >
+                        <div
+                          class="c1"
+                        >
+                          Kubernetes
+                        </div>
+                        <div
+                          class="c1"
+                        >
+                          kube-name
+                        </div>
+                      </div>
+                      <span
+                        class="c10 c11"
+                      >
+                        <svg
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          width="16"
+                        >
+                          <path
+                            d="M19.2803 5.78033C19.5732 5.48744 19.5732 5.01256 19.2803 4.71967C18.9874 4.42678 18.5126 4.42678 18.2197 4.71967L12 10.9393L5.78033 4.71967C5.48744 4.42678 5.01256 4.42678 4.71967 4.71967C4.42678 5.01256 4.42678 5.48744 4.71967 5.78033L10.9393 12L4.71967 18.2197C4.42678 18.5126 4.42678 18.9874 4.71967 19.2803C5.01256 19.5732 5.48744 19.5732 5.78033 19.2803L12 13.0607L18.2197 19.2803C18.5126 19.5732 18.9874 19.5732 19.2803 19.2803C19.5732 18.9874 19.5732 18.5126 19.2803 18.2197L13.0607 12L19.2803 5.78033Z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                    <div
+                      class="c17"
+                      width="100%"
+                    >
+                      <div
+                        class="c18 c19"
+                        width="100%"
+                      >
+                        <label
+                          class="c20"
+                          for="app-name"
+                        >
+                          Namespaces
+                        </label>
+                        <div
+                          class="c21"
+                        >
+                          <div
+                            class="react-select-container css-2b097c-container"
+                          >
+                            <div
+                              class="react-select__control css-yk16xz-control"
+                            >
+                              <div
+                                class="react-select__value-container react-select__value-container--is-multi css-g1d714-ValueContainer"
+                              >
+                                <div
+                                  class="react-select__placeholder css-1wa3eu0-placeholder"
+                                >
+                                  Start typing a namespace and press enter
+                                </div>
+                                <div
+                                  class="css-b8ldur-Input"
+                                >
+                                  <div
+                                    class="react-select__input"
+                                    style="display: inline-block;"
+                                  >
+                                    <input
+                                      aria-autocomplete="list"
+                                      autocapitalize="none"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      id="app-name"
+                                      spellcheck="false"
+                                      style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
+                                      tabindex="0"
+                                      type="text"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="react-select__indicators css-1hb7zxy-IndicatorsContainer"
+                              >
+                                <span
+                                  class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+                                />
+                                <div
+                                  aria-hidden="true"
+                                  class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="css-6q0nyr-Svg"
+                                    focusable="false"
+                                    height="20"
+                                    viewBox="0 0 20 20"
+                                    width="20"
+                                  >
+                                    <path
+                                      d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                                    />
+                                  </svg>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </td>
             </tr>
             <tr>
@@ -2546,14 +2894,14 @@ exports[`loaded state 1`] = `
           </tbody>
         </table>
         <div
-          class="c12"
+          class="c22"
         >
           <div
             class="c1"
             style="position: relative;"
           >
             <div
-              class="c1 c13"
+              class="c1 c23"
               style="display: none;"
             >
               <div
@@ -2641,14 +2989,14 @@ exports[`loaded state 1`] = `
                           tabindex="-1"
                         >
                           <div
-                            class="c1 c14"
+                            class="c1 c24"
                           >
                             <div
-                              class="c15 c5"
+                              class="c25 c5"
                               width="210px"
                             >
                               <span
-                                class="c16 icon icon-circlecheck"
+                                class="c26 icon icon-circlecheck"
                                 color="success.main"
                               >
                                 <svg
@@ -2668,14 +3016,14 @@ exports[`loaded state 1`] = `
                                 </svg>
                               </span>
                               <div
-                                class="c17"
+                                class="c27"
                                 title="bob"
                               >
                                 bob
                               </div>
                             </div>
                             <span
-                              class="c18 icon icon-cross"
+                              class="c28 icon icon-cross"
                             >
                               <svg
                                 fill="currentColor"
@@ -2696,14 +3044,14 @@ exports[`loaded state 1`] = `
                           tabindex="-1"
                         >
                           <div
-                            class="c1 c14"
+                            class="c1 c24"
                           >
                             <div
-                              class="c15 c5"
+                              class="c25 c5"
                               width="210px"
                             >
                               <span
-                                class="c16 icon icon-circlecheck"
+                                class="c26 icon icon-circlecheck"
                                 color="success.main"
                               >
                                 <svg
@@ -2723,14 +3071,14 @@ exports[`loaded state 1`] = `
                                 </svg>
                               </span>
                               <div
-                                class="c17"
+                                class="c27"
                                 title="cat"
                               >
                                 cat
                               </div>
                             </div>
                             <span
-                              class="c18 icon icon-cross"
+                              class="c28 icon icon-cross"
                             >
                               <svg
                                 fill="currentColor"
@@ -2751,14 +3099,14 @@ exports[`loaded state 1`] = `
                           tabindex="-1"
                         >
                           <div
-                            class="c1 c14"
+                            class="c1 c24"
                           >
                             <div
-                              class="c15 c5"
+                              class="c25 c5"
                               width="210px"
                             >
                               <span
-                                class="c16 icon icon-circlecheck"
+                                class="c26 icon icon-circlecheck"
                                 color="success.main"
                               >
                                 <svg
@@ -2778,14 +3126,14 @@ exports[`loaded state 1`] = `
                                 </svg>
                               </span>
                               <div
-                                class="c17"
+                                class="c27"
                                 title="george washington"
                               >
                                 george washington
                               </div>
                             </div>
                             <span
-                              class="c18 icon icon-cross"
+                              class="c28 icon icon-cross"
                             >
                               <svg
                                 fill="currentColor"
@@ -2811,7 +3159,7 @@ exports[`loaded state 1`] = `
                         id="react-select-2-group-1-heading"
                       >
                         <div
-                          class="c1 c19"
+                          class="c1 c29"
                         >
                           Suggested Reviewers
                         </div>
@@ -2823,27 +3171,27 @@ exports[`loaded state 1`] = `
               </div>
             </div>
             <div
-              class="c20 c14 c21"
+              class="c30 c24 c31"
               height="34px"
             >
               <div
-                class="c1 c22"
+                class="c1 c32"
               >
                 <div
-                  class="c23"
+                  class="c33"
                   font-size="1"
                 >
                   Reviewers (optional)
                 </div>
                 <button
-                  class="c24"
+                  class="c34"
                   kind="border"
                   width="50px"
                 >
                   Edit
                 </button>
                 <button
-                  class="c24"
+                  class="c34"
                   kind="border"
                   width="50px"
                 >
@@ -2851,10 +3199,10 @@ exports[`loaded state 1`] = `
                 </button>
               </div>
               <button
-                class="c25"
+                class="c35"
               >
                 <span
-                  class="c18 icon icon-chevrondown"
+                  class="c28 icon icon-chevrondown"
                 >
                   <svg
                     fill="currentColor"
@@ -2876,21 +3224,21 @@ exports[`loaded state 1`] = `
               data-testid="reviewers"
             >
               <div
-                class="c26 c14 c27"
+                class="c36 c24 c37"
               >
                 <div
-                  class="c28"
+                  class="c38"
                   style="white-space: nowrap; max-width: 200px;"
                   title="bob"
                 >
                   bob
                 </div>
                 <button
-                  class="c29"
+                  class="c39"
                   title="Remove reviewer"
                 >
                   <span
-                    class="c18 icon icon-cross"
+                    class="c28 icon icon-cross"
                   >
                     <svg
                       fill="currentColor"
@@ -2906,21 +3254,21 @@ exports[`loaded state 1`] = `
                 </button>
               </div>
               <div
-                class="c26 c14 c27"
+                class="c36 c24 c37"
               >
                 <div
-                  class="c28"
+                  class="c38"
                   style="white-space: nowrap; max-width: 200px;"
                   title="cat"
                 >
                   cat
                 </div>
                 <button
-                  class="c29"
+                  class="c39"
                   title="Remove reviewer"
                 >
                   <span
-                    class="c18 icon icon-cross"
+                    class="c28 icon icon-cross"
                   >
                     <svg
                       fill="currentColor"
@@ -2936,21 +3284,21 @@ exports[`loaded state 1`] = `
                 </button>
               </div>
               <div
-                class="c26 c14 c27"
+                class="c36 c24 c37"
               >
                 <div
-                  class="c28"
+                  class="c38"
                   style="white-space: nowrap; max-width: 200px;"
                   title="george washington"
                 >
                   george washington
                 </div>
                 <button
-                  class="c29"
+                  class="c39"
                   title="Remove reviewer"
                 >
                   <span
-                    class="c18 icon icon-cross"
+                    class="c28 icon icon-cross"
                   >
                     <svg
                       fill="currentColor"
@@ -2969,28 +3317,28 @@ exports[`loaded state 1`] = `
           </div>
         </div>
         <div
-          class="c30 c31"
+          class="c40 c41"
         >
           <div
-            class="c32"
+            class="c42"
           >
             <div
-              class="c33 c34"
+              class="c43 c44"
             >
               <div
-                class="c1 c35"
+                class="c1 c45"
               >
                 <label
-                  class="c36"
+                  class="c20"
                 >
                   Start Date
                 </label>
                 <div
-                  class="c37 c38 c39"
+                  class="c46 c12 c47"
                 >
                   Immediately
                   <span
-                    class="c40 icon icon-calendar"
+                    class="c48 icon icon-calendar"
                   >
                     <svg
                       fill="currentColor"
@@ -3015,23 +3363,23 @@ exports[`loaded state 1`] = `
               </div>
             </div>
             <label
-              class="c36"
+              class="c20"
               color="text.slightlyMuted"
             >
               <div
                 class="c1 c5"
               >
                 <div
-                  class="c41"
+                  class="c49"
                 >
                   Access Duration
                 </div>
                 <span
-                  class="c42"
+                  class="c50"
                   role="icon"
                 >
                   <span
-                    class="c18 c43"
+                    class="c28 c51"
                   >
                     <svg
                       fill="currentColor"
@@ -3055,7 +3403,7 @@ exports[`loaded state 1`] = `
                 </span>
               </div>
               <div
-                class="c44"
+                class="c21"
               >
                 <div
                   class="react-select-container css-2b097c-container"
@@ -3126,11 +3474,11 @@ exports[`loaded state 1`] = `
             </label>
           </div>
           <label
-            class="c36"
+            class="c20"
           >
             Request Reason
             <textarea
-              class="c45 c46"
+              class="c52 c53"
               color="text.main"
               height="80px"
               placeholder="Describe your request..."
@@ -3138,21 +3486,21 @@ exports[`loaded state 1`] = `
             />
           </label>
           <div
-            class="c47 c14 c48"
+            class="c54 c24 c55"
             height="34px"
           >
             <div
-              class="c49"
+              class="c56"
               font-size="1"
             >
               Additional Options
             </div>
             <button
-              class="c25"
+              class="c35"
               data-testid="additional-info-btn"
             >
               <span
-                class="c18 icon icon-chevronright"
+                class="c28 icon icon-chevronright"
               >
                 <svg
                   fill="currentColor"
@@ -3170,17 +3518,17 @@ exports[`loaded state 1`] = `
             </button>
           </div>
           <div
-            class="c50 c51 c52"
+            class="c57 c58 c59"
           >
             <button
-              class="c53"
+              class="c60"
               kind="primary"
               width="100%"
             >
               Submit Request
             </button>
             <button
-              class="c54"
+              class="c61"
               kind="secondary"
               width="100%"
             >
@@ -3302,19 +3650,20 @@ exports[`success state 1`] = `
 .c5 {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 600;
+  font-weight: 500;
   font-size: 18px;
-  line-height: 32px;
+  line-height: 24px;
   margin: 0px;
-  color: #FFFFFF;
+  margin-bottom: 4px;
 }
 
 .c6 {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 400;
   font-size: 14px;
-  line-height: 24px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.014px;
   margin: 0px;
   color: rgba(255,255,255,0.72);
 }
@@ -3394,16 +3743,15 @@ exports[`success state 1`] = `
         <div
           class="c1"
         >
-          <div
+          <header
             class="c4"
           >
-            <div
+            <h2
               class="c5"
-              color="text.main"
             >
               Resources Requested Successfully
-            </div>
-            <div
+            </h2>
+            <p
               class="c6"
               color="text.slightlyMuted"
             >
@@ -3411,8 +3759,8 @@ exports[`success state 1`] = `
               4
                
               resources
-            </div>
-          </div>
+            </p>
+          </header>
           <div
             class="c7 c8"
           >
diff --git a/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap b/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap
index 2b65644b9bced..2fc3863655b02 100644
--- a/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap
+++ b/web/packages/teleport/src/AccessRequests/__snapshots__/AccessRequests.story.test.tsx.snap
@@ -149,7 +149,6 @@ exports[`locked 1`] = `
 
 .c19 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
index 5bb4b44c17efa..b14843d2240df 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
+++ b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
@@ -144,7 +144,6 @@ exports[`render dialog with instructions to connect to database 1`] = `
 
 .c18 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -494,7 +493,6 @@ exports[`render dialog with instructions to connect to database with requestId 1
 
 .c18 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
diff --git a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
index 546844421f4f1..ab19cc8b97ef2 100644
--- a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
+++ b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
@@ -106,7 +106,6 @@ exports[`render with URL loc state set to "server" 1`] = `
 
 .c23 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -114,7 +113,6 @@ exports[`render with URL loc state set to "server" 1`] = `
 
 .c26 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -830,7 +828,6 @@ exports[`render with all access 1`] = `
 
 .c17 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -838,7 +835,6 @@ exports[`render with all access 1`] = `
 
 .c20 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -2875,7 +2871,6 @@ exports[`render with no access 1`] = `
 
 .c7 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -2883,7 +2878,6 @@ exports[`render with no access 1`] = `
 
 .c21 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -5068,7 +5062,6 @@ exports[`render with partial access 1`] = `
 
 .c17 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -5076,7 +5069,6 @@ exports[`render with partial access 1`] = `
 
 .c23 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
index 31cf39d2452d8..9ff9535e1cfed 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
+++ b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
@@ -224,7 +224,6 @@ exports[`story.MfaDeviceError 1`] = `
 
 .c36 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -734,7 +733,6 @@ exports[`story.MfaDeviceOn 1`] = `
 
 .c31 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -1375,7 +1373,6 @@ exports[`story.MfaDeviceOtp 1`] = `
 
 .c35 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -1879,7 +1876,6 @@ exports[`story.MfaDeviceWebauthn 1`] = `
 
 .c31 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -2465,7 +2461,6 @@ exports[`story.PasswordOnlyError 1`] = `
 
 .c20 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -2935,7 +2930,6 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 
 .c23 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -3455,7 +3449,6 @@ exports[`story.SuccessRegister 1`] = `
 
 .c19 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -3777,7 +3770,6 @@ exports[`story.SuccessRegisterDashboard 1`] = `
 
 .c19 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -4099,7 +4091,6 @@ exports[`story.SuccessReset 1`] = `
 
 .c19 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
@@ -4421,7 +4412,6 @@ exports[`story.SuccessResetDashboard 1`] = `
 
 .c19 {
   color: #009EFF;
-  font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;

From 335c38e41e76859b29f8f193481b98ab13371577 Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Mon, 4 Nov 2024 16:05:41 -0800
Subject: [PATCH 5/5] Backport fixes

- teleport version v16 and less uses react select version 3
  which required to add manual support for initially fetching
  namespaces on select dropdown
- hover tooltip design diffs
- field select design diffs
---
 .../RequestCheckout/KubeNamespaceSelector.tsx | 34 +++++++-
 .../RequestCheckout/RequestCheckout.tsx       | 79 ++++++++++---------
 .../components/FieldSelect/FieldSelect.tsx    | 11 ++-
 .../shared/components/Select/types.ts         |  4 +
 4 files changed, 84 insertions(+), 44 deletions(-)

diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
index 11ee294fdcdbd..37bf4d4227df6 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/KubeNamespaceSelector.tsx
@@ -16,13 +16,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useState } from 'react';
+import { useState, useEffect } 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 { useAsync } from 'shared/hooks/useAsync';
 
 import { CheckableOptionComponent } from '../CheckableOption';
 
@@ -55,6 +56,14 @@ export function KubeNamespaceSelector({
   // options for future (clicking the dropdown again).
   const [initOptions, setInitOptions] = useState<Option[]>([]);
 
+  // react select version 3.0 (in teleport version v16 or less)
+  // does not support the field "initOptionsOnMenuOpen".
+  // This is required to produce the same affect.
+  const [initAttempt, initRunAttempt] = useAsync(async () => {
+    const opts = await handleLoadOptions();
+    setInitOptions(opts);
+  });
+
   const currKubeClustersNamespaceItems = savedResourceItems.filter(
     resource =>
       resource.kind === 'namespace' && resource.id === kubeClusterItem.id
@@ -67,9 +76,15 @@ export function KubeNamespaceSelector({
     }))
   );
 
+  useEffect(() => {
+    if (isMenuOpen) {
+      initRunAttempt();
+    }
+  }, [isMenuOpen]);
+
   function handleChange(options: Option[], actionMeta: ActionMeta<Option>) {
     if (isMenuOpen) {
-      setSelectedOpts(options);
+      setSelectedOpts(options || []);
       return;
     }
 
@@ -127,7 +142,7 @@ export function KubeNamespaceSelector({
     );
   };
 
-  async function handleLoadOptions(input: string) {
+  async function handleLoadOptions(input = '') {
     const namespaces = await fetchKubeNamespaces({
       kubeCluster: kubeClusterItem.id,
       search: input,
@@ -161,8 +176,19 @@ export function KubeNamespaceSelector({
         onChange={handleChange}
         value={selectedOpts}
         menuPosition="fixed" /* required to render dropdown out of its row */
-        initOptionsOnMenuOpen={(opts: Option[]) => setInitOptions(opts)}
         defaultOptions={initOptions}
+        noOptionsMessage={() => {
+          if (
+            initAttempt.status === 'processing' ||
+            initAttempt.status === ''
+          ) {
+            return 'Loading...';
+          }
+          if (initAttempt.status === 'error') {
+            return initAttempt.statusText;
+          }
+          return 'No Options';
+        }}
       />
     </Box>
   );
diff --git a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
index 3bc63bd29a452..10abfecb19561 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
+++ b/web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx
@@ -277,46 +277,47 @@ export function RequestCheckout<T extends PendingListItem>({
             )}
           {hasUnsupporteKubeResourceKinds && (
             <Alert kind="danger">
-              <HoverTooltip
-                position="left"
-                tipContent={
-                  fetchResourceRequestRolesAttempt.statusText.length > 248
-                    ? fetchResourceRequestRolesAttempt.statusText
-                    : null
-                }
-              >
-                <ShortenedText mb={2}>
-                  {fetchResourceRequestRolesAttempt.statusText}
-                </ShortenedText>
-              </HoverTooltip>
-              <Text mb={2}>
-                The listed allowed kinds are 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"
+              <div>
+                <HoverTooltip
+                  tipContent={
+                    fetchResourceRequestRolesAttempt.statusText.length > 248
+                      ? fetchResourceRequestRolesAttempt.statusText
+                      : null
+                  }
                 >
-                  tsh request search
-                </ExternalLink>{' '}
-                that will help you construct the request.
-              </Text>
-              <Box width="325px">
-                Example:
-                <TextSelectCopyMulti
-                  lines={[
-                    {
-                      text: `tsh request search --kind=ALLOWED_KIND --kube-cluster=CLUSTER_NAME --all-kube-namespaces`,
-                    },
-                  ]}
-                />
-              </Box>
+                  <ShortenedText mb={2}>
+                    {fetchResourceRequestRolesAttempt.statusText}
+                  </ShortenedText>
+                </HoverTooltip>
+                <Text mb={2}>
+                  The listed allowed kinds are 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="340px">
+                  Example:
+                  <TextSelectCopyMulti
+                    lines={[
+                      {
+                        text: `tsh request search --kind=ALLOWED_KIND --kube-cluster=CLUSTER_NAME --all-kube-namespaces`,
+                      },
+                    ]}
+                  />
+                </Box>
+              </div>
             </Alert>
           )}
           {fetchStatus === 'loading' && (
diff --git a/web/packages/shared/components/FieldSelect/FieldSelect.tsx b/web/packages/shared/components/FieldSelect/FieldSelect.tsx
index a8777529818ce..7e8a20b53ab7b 100644
--- a/web/packages/shared/components/FieldSelect/FieldSelect.tsx
+++ b/web/packages/shared/components/FieldSelect/FieldSelect.tsx
@@ -122,6 +122,11 @@ export function FieldSelectAsync({
   noOptionsMessage,
   loadOptions,
   inputId = 'select',
+  onMenuClose,
+  onMenuOpen,
+  defaultOptions,
+  closeMenuOnSelect = true,
+  hideSelectedOptions = true,
   ...styles
 }: AsyncSelectProps & FieldProps) {
   const [attempt, runAttempt] = useAsync(loadOptions);
@@ -160,12 +165,16 @@ export function FieldSelectAsync({
           return noOptionsMessage();
         }}
         maxMenuHeight={maxMenuHeight}
-        defaultOptions={true}
+        defaultOptions={defaultOptions ? defaultOptions : true}
         placeholder={placeholder}
         isMulti={isMulti}
         autoFocus={autoFocus}
         isDisabled={isDisabled}
         elevated={elevated}
+        onMenuClose={onMenuClose}
+        onMenuOpen={onMenuOpen}
+        closeMenuOnSelect={closeMenuOnSelect}
+        hideSelectedOptions={hideSelectedOptions}
       />
     </Box>
   );
diff --git a/web/packages/shared/components/Select/types.ts b/web/packages/shared/components/Select/types.ts
index 0220fe3dcedd5..9ed90bdbc934a 100644
--- a/web/packages/shared/components/Select/types.ts
+++ b/web/packages/shared/components/Select/types.ts
@@ -69,6 +69,10 @@ export type AsyncProps = Omit<Props, 'options'> & {
   defaultMenuIsOpen?: boolean;
   loadOptions(input: string, o?: Option[]): Promise<Option[] | void>;
   noOptionsMessage(): string;
+  onMenuClose?(): void;
+  onMenuOpen?(): void;
+  closeMenuOnSelect?: boolean;
+  hideSelectedOptions?: boolean;
 };
 
 /**