[v16] Add Connect and Web UI support for selecting Kubernetes namespa…

…ces during access requests (#48413)

* Web: add support for requesting for kube namespaces (#47345)

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

* 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

* Update snaps

* 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

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) {

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;
   };
 };
 

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;

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;

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>
+  );
+};

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};
+        }
+      `}
+    />
+  );
+}