feat(join-tokens): [44794] Add Join Token form for GitHub

web/packages/design/src/utils/testing.tsx

@@ -25,6 +25,7 @@ import {
   render as testingRender,
   waitFor,
   waitForElementToBeRemoved,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ReactNode } from 'react';
@@ -78,8 +79,8 @@ screen.debug = () => {
 };
 
 type RenderOptions = {
-  wrapper: React.FC;
-  container: HTMLElement;
+  wrapper?: React.FC;
+  container?: HTMLElement;
 };
 
 export {
@@ -95,4 +96,5 @@ export {
   Router,
   userEvent,
   waitForElementToBeRemoved,
+  within,
 };

web/packages/shared/utils/collectKeys.test.ts

@@ -0,0 +1,97 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 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 { collectKeys } from './collectKeys';
+
+describe('collectKeys', () => {
+  it.each`
+    value
+    ${undefined}
+    ${null}
+    ${1}
+    ${true}
+    ${() => {}}
+  `('supports non object values ($value)', ({ value }) => {
+    const actual = collectKeys(value);
+    expect(actual).toBeNull();
+  });
+
+  it('supports empty object values', () => {
+    const actual = collectKeys({});
+    expect(actual).toEqual([]);
+  });
+
+  it('supports empty array values', () => {
+    const actual = collectKeys([]);
+    expect(actual).toEqual([]);
+  });
+
+  it('supports simple object values', () => {
+    const actual = collectKeys({
+      number: 1,
+      boolean: true,
+      string: 'string',
+      function: () => {},
+      null: null,
+      undefined: undefined,
+    });
+    expect(actual).toEqual([
+      '.number',
+      '.boolean',
+      '.string',
+      '.function',
+      '.null',
+      '.undefined',
+    ]);
+  });
+
+  it('supports simple array values', () => {
+    const actual = collectKeys([
+      { alpha: true },
+      { alpha: true },
+      { beta: true },
+    ]);
+    expect(actual).toEqual(['.alpha', '.alpha', '.beta']);
+  });
+
+  it('supports nested object values', () => {
+    const actual = collectKeys([
+      {
+        inner: {
+          foo: 'bar',
+        },
+      },
+    ]);
+    expect(actual).toEqual(['.inner.foo']);
+  });
+
+  it('supports nested array values', () => {
+    const actual = collectKeys([[{ foo: 'bar' }], { bar: 'foo' }]);
+    expect(actual).toEqual(['.foo', '.bar']);
+  });
+
+  it('allows a custom key prefix', () => {
+    const actual = collectKeys(
+      {
+        foo: 1,
+      },
+      'root'
+    );
+    expect(actual).toEqual(['root.foo']);
+  });
+});

web/packages/shared/utils/collectKeys.ts

@@ -0,0 +1,42 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 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/>.
+ */
+
+/**
+ * `collectKeys` gathers object keys recursively and returns them. Arrays are
+ * traversed, but are transparent. Returns null if the value is not an object
+ * or array of objects, and an empty array of no keys are present.
+ *
+ * @param value Value from which keys will be collected
+ * @param prefix An optional value to be prepended to all keys returned
+ * @returns An array of the keys collected (if any) or null
+ */
+export const collectKeys = (value: unknown, prefix: string = '') => {
+  if (typeof value !== 'object' || value === null) {
+    return prefix ? [prefix] : null;
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap(val => {
+      return collectKeys(val, prefix);
+    });
+  }
+
+  return Object.entries(value).flatMap(([k, v]) => {
+    return collectKeys(v, `${prefix}.${k}`);
+  });
+};

web/packages/teleport/src/JoinTokens/JoinTokenForms.tsx

@@ -31,9 +31,11 @@ import {
 export const JoinTokenIAMForm = ({
   tokenState,
   onUpdateState,
+  readonly,
 }: {
   tokenState: NewJoinTokenState;
   onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
 }) => {
   const rules = tokenState.iam;
 
@@ -104,13 +106,15 @@ export const JoinTokenIAMForm = ({
             onChange={e =>
               setTokenRulesField(index, 'aws_account', e.target.value)
             }
+            readonly={readonly}
           />
           <FieldInput
             label="ARN"
             toolTipContent={`The joining nodes must match this ARN. Supports wildcards "*" and "?"`}
             placeholder="arn:aws:iam::account-id:role/*"
             value={rule.aws_arn}
             onChange={e => setTokenRulesField(index, 'aws_arn', e.target.value)}
+            readonly={readonly}
           />
         </RuleBox>
       ))}
@@ -125,9 +129,11 @@ export const JoinTokenIAMForm = ({
 export const JoinTokenGCPForm = ({
   tokenState,
   onUpdateState,
+  readonly,
 }: {
   tokenState: NewJoinTokenState;
   onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
 }) => {
   const rules = tokenState.gcp;
   function removeRule(index: number) {
@@ -198,6 +204,7 @@ export const JoinTokenGCPForm = ({
             value={rule.project_ids}
             label="Add Project ID(s)"
             rule={requiredField('At least 1 Project ID required')}
+            isDisabled={readonly}
           />
           <FieldSelectCreatable
             placeholder="us-west1, us-east1-a"
@@ -210,6 +217,7 @@ export const JoinTokenGCPForm = ({
             value={rule.locations}
             label="Add Locations"
             helperText="Allows regions and/or zones."
+            isDisabled={readonly}
           />
           <FieldSelectCreatable
             placeholder="PROJECT_compute@developer.gserviceaccount.com"
@@ -221,6 +229,7 @@ export const JoinTokenGCPForm = ({
             }
             value={rule.service_accounts}
             label="Add Service Account Emails"
+            isDisabled={readonly}
           />
         </RuleBox>
       ))}
@@ -235,9 +244,11 @@ export const JoinTokenGCPForm = ({
 export const JoinTokenOracleForm = ({
   tokenState,
   onUpdateState,
+  readonly,
 }: {
   tokenState: NewJoinTokenState;
   onUpdateState: (newToken: NewJoinTokenState) => void;
+  readonly: boolean;
 }) => {
   const rules = tokenState.oracle;
   function removeRule(index: number) {
@@ -301,6 +312,7 @@ export const JoinTokenOracleForm = ({
             placeholder="ocid1.tenancy.oc1..<unique ID>"
             value={rule.tenancy}
             onChange={e => updateRuleField(index, 'tenancy', e.target.value)}
+            readonly={readonly}
           />
           <FieldSelectCreatable
             placeholder="ocid1.compartment.oc1..<unique ID>"
@@ -317,6 +329,7 @@ export const JoinTokenOracleForm = ({
             value={rule.parent_compartments}
             label="Add Compartments"
             helperText="Direct parent compartments only, no nested compartments."
+            isDisabled={readonly}
           />
           <FieldSelectCreatable
             placeholder="us-ashburn-1, phx"
@@ -328,6 +341,7 @@ export const JoinTokenOracleForm = ({
             }
             value={rule.regions}
             label="Add Regions"
+            isDisabled={readonly}
           />
         </RuleBox>
       ))}