Implement attribute mapping for Google

Author: LauraBeatris

packages/localizations/src/en-US.ts

@@ -596,9 +596,9 @@ export const enUS: LocalizationResource = {
               appAttribute: 'App attribute',
             },
             rows: {
-              email: { name: 'mail' },
-              firstName: { name: 'firstName' },
-              lastName: { name: 'lastName' },
+              email: { googleAttribute: 'Primary email', appAttribute: 'email' },
+              firstName: { googleAttribute: 'First name', appAttribute: 'firstName' },
+              lastName: { googleAttribute: 'Last name', appAttribute: 'lastName' },
             },
           },
         },

packages/shared/src/types/localization.ts

@@ -1645,12 +1645,11 @@ export type __internal_LocalizationResource = {
             columns: {
               googleAttribute: LocalizationValue;
               appAttribute: LocalizationValue;
-              expression: LocalizationValue;
             };
             rows: {
-              email: { name: LocalizationValue };
-              firstName: { name: LocalizationValue };
-              lastName: { name: LocalizationValue };
+              email: { googleAttribute: LocalizationValue; appAttribute: LocalizationValue };
+              firstName: { googleAttribute: LocalizationValue; appAttribute: LocalizationValue };
+              lastName: { googleAttribute: LocalizationValue; appAttribute: LocalizationValue };
             };
           };
         };

packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlGoogleConfigureSteps.tsx

@@ -12,6 +12,7 @@ import { useConfigureSSO } from '../../../ConfigureSSOContext';
 import { Step } from '../../../elements/Step';
 import { useWizard, Wizard } from '../../../elements/Wizard';
 import { InnerStepCounter } from '../../../elements/Wizard/InnerStepCounter';
+import { AttributeMappingTable, type AttributeMappingTableConfig } from './shared/AttributeMappingTable';
 import {
   applySamlSubmitError,
   buildSamlConfigurationPayload,
@@ -57,6 +58,16 @@ export const SamlGoogleConfigureSteps = (): JSX.Element => {
         </Step.Header>
         <SamlGoogleServiceProviderStep />
       </Wizard.Step>
+
+      <Wizard.Step id='attribute-mapping'>
+        <Step.Header
+          title={localizationKeys('configureSSO.configureStep.samlGoogle.mainHeaderTitle')}
+          description={localizationKeys('configureSSO.configureStep.samlGoogle.attributeMappingStep.headerSubtitle')}
+        >
+          <InnerStepCounter />
+        </Step.Header>
+        <SamlGoogleAttributeMappingStep />
+      </Wizard.Step>
     </>
   );
 };
@@ -452,3 +463,101 @@ const SamlGoogleServiceProviderStep = (): JSX.Element => {
     </>
   );
 };
+
+const GOOGLE_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = {
+  columns: {
+    first: localizationKeys(
+      'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.columns.googleAttribute',
+    ),
+    second: localizationKeys(
+      'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.columns.appAttribute',
+    ),
+  },
+  rows: [
+    {
+      id: 'email',
+      isRequired: true,
+      first: localizationKeys(
+        'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.email.googleAttribute',
+      ),
+      second: localizationKeys(
+        'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.email.appAttribute',
+      ),
+    },
+    {
+      id: 'firstName',
+      isRequired: false,
+      first: localizationKeys(
+        'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.firstName.googleAttribute',
+      ),
+      second: localizationKeys(
+        'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.firstName.appAttribute',
+      ),
+    },
+    {
+      id: 'lastName',
+      isRequired: false,
+      first: localizationKeys(
+        'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.lastName.googleAttribute',
+      ),
+      second: localizationKeys(
+        'configureSSO.configureStep.samlGoogle.attributeMappingStep.attributeMappingTable.rows.lastName.appAttribute',
+      ),
+    },
+  ],
+};
+
+const SamlGoogleAttributeMappingStep = (): JSX.Element => {
+  const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
+
+  return (
+    <>
+      <Step.Body>
+        <Step.Section sx={theme => ({ gap: theme.space.$3 })}>
+          <Text
+            as='p'
+            colorScheme='secondary'
+            localizationKey={localizationKeys('configureSSO.configureStep.samlGoogle.attributeMappingStep.paragraph')}
+          />
+
+          <Col
+            elementDescriptor={descriptors.configureSSOInstructionsList}
+            as='ol'
+            sx={theme => ({
+              gap: theme.space.$1x5,
+              margin: 0,
+              paddingInlineStart: theme.space.$5,
+              listStyleType: 'decimal',
+            })}
+          >
+            <Text
+              elementDescriptor={descriptors.configureSSOInstructionsListItem}
+              as='li'
+              colorScheme='secondary'
+              localizationKey={localizationKeys('configureSSO.configureStep.samlGoogle.attributeMappingStep.step1')}
+            />
+            <Text
+              elementDescriptor={descriptors.configureSSOInstructionsListItem}
+              as='li'
+              colorScheme='secondary'
+              localizationKey={localizationKeys('configureSSO.configureStep.samlGoogle.attributeMappingStep.step2')}
+            />
+          </Col>
+
+          <AttributeMappingTable config={GOOGLE_ATTRIBUTE_MAPPING} />
+        </Step.Section>
+      </Step.Body>
+
+      <Step.Footer>
+        <Step.Footer.Previous
+          onClick={() => goPrev()}
+          isDisabled={isFirstStep}
+        />
+        <Step.Footer.Continue
+          onClick={() => goNext()}
+          isDisabled={isLastStep}
+        />
+      </Step.Footer>
+    </>
+  );
+};