fix(ui): Add claim name for Custom SAML provider in <ConfigureSSO /> (#8586)

Author: LauraBeatris

.changeset/fancy-zoos-mate.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Fix attribute statement section in `<ConfigureSSO />` with claim name for Custom SAML provider

packages/localizations/src/en-US.ts

@@ -358,6 +358,7 @@ export const enUS: LocalizationResource = {
         columns: {
           attribute: 'Attribute',
           claimName: 'Claim Name',
+          claimValue: 'Claim Value',
         },
         badges: {
           required: 'Required',
@@ -366,15 +367,15 @@ export const enUS: LocalizationResource = {
         rows: {
           email: {
             attribute: 'Email address',
-            claim: 'user.email',
+            claim: 'mail',
           },
           firstName: {
             attribute: 'First Name',
-            claim: 'user.firstName',
+            claim: 'firstName',
           },
           lastName: {
             attribute: 'Last Name',
-            claim: 'user.lastName',
+            claim: 'lastName',
           },
         },
       },

packages/shared/src/types/localization.ts

@@ -1415,6 +1415,7 @@ export type __internal_LocalizationResource = {
         columns: {
           attribute: LocalizationValue;
           claimName: LocalizationValue;
+          claimValue: LocalizationValue;
         };
         badges: {
           required: LocalizationValue;

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

@@ -113,18 +113,25 @@ const ATTRIBUTE_ROWS = [
     isRequired: true,
     attribute: localizationKeys('configureSSO.configureStep.attributeMapping.rows.email.attribute'),
     claim: localizationKeys('configureSSO.configureStep.attributeMapping.rows.email.claim'),
+    oktaClaimValue: localizationKeys('configureSSO.configureStep.samlOkta.configureAttributes.pairs.email.expression'),
   },
   {
     id: 'firstName',
     isRequired: false,
     attribute: localizationKeys('configureSSO.configureStep.attributeMapping.rows.firstName.attribute'),
     claim: localizationKeys('configureSSO.configureStep.attributeMapping.rows.firstName.claim'),
+    oktaClaimValue: localizationKeys(
+      'configureSSO.configureStep.samlOkta.configureAttributes.pairs.firstName.expression',
+    ),
   },
   {
     id: 'lastName',
     isRequired: false,
     attribute: localizationKeys('configureSSO.configureStep.attributeMapping.rows.lastName.attribute'),
     claim: localizationKeys('configureSSO.configureStep.attributeMapping.rows.lastName.claim'),
+    oktaClaimValue: localizationKeys(
+      'configureSSO.configureStep.samlOkta.configureAttributes.pairs.lastName.expression',
+    ),
   },
 ] as const;
 
@@ -328,6 +335,7 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
   const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
 
   const { provider } = useConfigureSSO();
+  const isOkta = provider === 'saml_okta';
 
   return (
     <>
@@ -363,6 +371,17 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
                     localizationKey={localizationKeys('configureSSO.configureStep.attributeMapping.columns.claimName')}
                   />
                 </Th>
+
+                {isOkta && (
+                  <Th>
+                    <Text
+                      sx={theme => ({ fontSize: theme.fontSizes.$xs })}
+                      localizationKey={localizationKeys(
+                        'configureSSO.configureStep.attributeMapping.columns.claimValue',
+                      )}
+                    />
+                  </Th>
+                )}
               </Tr>
             </Thead>
 
@@ -398,12 +417,22 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
                       localizationKey={row.claim}
                     />
                   </Td>
+
+                  {isOkta && (
+                    <Td>
+                      <Text
+                        as='span'
+                        sx={{ fontFamily: 'monospace' }}
+                        localizationKey={row.oktaClaimValue}
+                      />
+                    </Td>
+                  )}
                 </Tr>
               ))}
             </Tbody>
           </Table>
 
-          {provider === 'saml_okta' && <OktaConfigureAttributesStepContent />}
+          {isOkta && <OktaConfigureAttributesStepContent />}
         </Step.Section>
       </Step.Body>
 

packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx

@@ -196,7 +196,6 @@ export const TestConfigurationStep = (): JSX.Element => {
           <Step.Footer.Previous onClick={() => goPrev()} />
           <ContinueTestSsoStepButton
             enterpriseConnectionId={enterpriseConnection?.id}
-            isConnectionActive={enterpriseConnection?.active}
             onContinue={() => void goNext()}
           />
         </Step.Footer>
@@ -207,13 +206,11 @@ export const TestConfigurationStep = (): JSX.Element => {
 
 type ContinueTestSsoStepButtonProps = {
   enterpriseConnectionId: string | undefined;
-  isConnectionActive: boolean | undefined;
   onContinue: () => void;
 };
 
 const ContinueTestSsoStepButton = ({
   enterpriseConnectionId,
-  isConnectionActive,
   onContinue,
 }: ContinueTestSsoStepButtonProps): JSX.Element => {
   const { user } = useUser();
@@ -252,7 +249,6 @@ const ContinueTestSsoStepButton = ({
     <Step.Footer.Continue
       onClick={() => void handleContinue()}
       isLoading={isValidating}
-      isDisabled={!enterpriseConnectionId || isConnectionActive}
     />
   );
 };