[v18] Access Requests: Web UI handling for Resource-Scoped Constraints

web/packages/design/src/ButtonSelect/ButtonSelect.tsx

@@ -80,7 +80,13 @@ export const ButtonSelect = <T extends readonly Option<OptionValue>[]>({
       {options.map(option => {
         const isActive = activeValue === option.value;
         return (
-          <HoverTooltip tipContent={option.tooltip} key={option.label}>
+          <HoverTooltip
+            tipContent={option.tooltip}
+            key={option.label}
+            css={`
+              flex: 1 1 0;
+            `}
+          >
             <ButtonSelectButton
               aria-label={option.label}
               aria-checked={isActive}

web/packages/design/src/DataTable/Table.tsx

@@ -111,7 +111,7 @@ export default function Table<T>(props: TableProps<T>) {
     ) {
       return <LoadingIndicator colSpan={columns.length} />;
     }
-    data.map((item, rowIdx) => {
+    data.forEach((item, rowIdx) => {
       const TableRow: React.FC<PropsWithChildren> = ({ children }) => (
         <tr
           key={rowIdx}
@@ -123,29 +123,36 @@ export default function Table<T>(props: TableProps<T>) {
       );
 
       const customRow = row?.customRow?.(item);
+      const renderAfter = row?.renderAfter?.(item);
+
       if (customRow) {
         rows.push(<TableRow key={rowIdx}>{customRow}</TableRow>);
-        return;
+      } else {
+        const cells = columns.flatMap((column, columnIdx) => {
+          if (column.isNonRender) {
+            return []; // does not include this column.
+          }
+
+          const $cell = column.render ? (
+            column.render(item)
+          ) : (
+            <TextCell data={column.key ? item[column.key] : undefined} />
+          );
+
+          return (
+            <React.Fragment key={`${rowIdx} ${columnIdx}`}>
+              {$cell}
+            </React.Fragment>
+          );
+        });
+        rows.push(<TableRow key={rowIdx}>{cells}</TableRow>);
       }
 
-      const cells = columns.flatMap((column, columnIdx) => {
-        if (column.isNonRender) {
-          return []; // does not include this column.
-        }
-
-        const $cell = column.render ? (
-          column.render(item)
-        ) : (
-          <TextCell data={column.key ? item[column.key] : undefined} />
+      if (renderAfter) {
+        rows.push(
+          <React.Fragment key={`${rowIdx}-after`}>{renderAfter}</React.Fragment>
         );
-
-        return (
-          <React.Fragment key={`${rowIdx} ${columnIdx}`}>
-            {$cell}
-          </React.Fragment>
-        );
-      });
-      rows.push(<TableRow key={rowIdx}>{cells}</TableRow>);
+      }
     });
 
     if (rows.length) {

web/packages/design/src/DataTable/types.ts

@@ -93,6 +93,11 @@ export type TableProps<T> = {
      * dropdown selector.
      */
     customRow?(row: T): JSX.Element;
+    /**
+     * conditionally render a custom row after either `customRow` or
+     * the base table row.
+     */
+    renderAfter?(row: T): JSX.Element | null;
   };
 };
 

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

@@ -22,7 +22,12 @@ import { Link, MemoryRouter } from 'react-router-dom';
 import { Box, ButtonPrimary, ButtonText } from 'design';
 import { UNSUPPORTED_KINDS } from 'shared/components/AccessRequests/NewRequest/RequestCheckout/LongTerm';
 import { Option } from 'shared/components/Select';
-import { AccessRequest, RequestKind } from 'shared/services/accessRequests';
+import {
+  AccessRequest,
+  getResourceIDString,
+  RequestKind,
+  ResourceConstraintsMap,
+} from 'shared/services/accessRequests';
 
 import { dryRunResponse } from '../../fixtures';
 import { useSpecifiableFields } from '../useSpecifiableFields';
@@ -73,6 +78,7 @@ export const Loaded = () => {
     </MemoryRouter>
   );
 };
+
 export const Empty = () => {
   const [selectedReviewers, setSelectedReviewers] = useState([]);
   const [maxDuration, setMaxDuration] = useState<Option<number>>();
@@ -130,6 +136,45 @@ export const LoadedResourceRequest = () => {
   );
 };
 
+export const LoadedResourceRequestWithConstraints = () => {
+  const pendingAccessRequests = [
+    {
+      kind: 'app',
+      id: 'aws-console',
+      name: 'AWS Console App',
+      clusterName: 'localhost',
+    },
+  ] satisfies RequestCheckoutWithSliderProps['pendingAccessRequests'];
+  const addedResourceConstraints = {
+    [getResourceIDString({
+      kind: 'app',
+      name: 'aws-console',
+      cluster: 'localhost',
+    })]: {
+      aws_console: {
+        role_arns: [
+          'arn:aws:iam::123456789012:role/Viewer',
+          'arn:aws:iam::123456789012:role/Admin',
+          'arn:aws:iam::123456789012:role/DevOps',
+        ],
+      },
+    },
+  } satisfies ResourceConstraintsMap;
+
+  return (
+    <MemoryRouter>
+      <RequestCheckoutWithSlider
+        {...baseProps}
+        isResourceRequest={true}
+        fetchResourceRequestRolesAttempt={{ status: 'success' }}
+        pendingAccessRequests={pendingAccessRequests}
+        addedResourceConstraints={addedResourceConstraints}
+        setResourceConstraints={() => {}}
+      />
+    </MemoryRouter>
+  );
+};
+
 export const LoadedLongTermRequest = () => {
   const dryRunResponseWithLongTerm = {
     ...dryRunResponse,
@@ -408,4 +453,6 @@ const baseProps: RequestCheckoutWithSliderProps = {
   requestKind: RequestKind.ShortTerm,
   setRequestKind: () => null,
   onStartTimeChange: () => null,
+  addedResourceConstraints: {},
+  setResourceConstraints: () => null,
 };

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

@@ -175,4 +175,6 @@ const props: RequestCheckoutWithSliderProps = {
   onStartTimeChange: () => null,
   fetchKubeNamespaces: () => null,
   updateNamespacesForKubeCluster: () => null,
+  addedResourceConstraints: {},
+  setResourceConstraints: () => null,
 };