Refactor button to open test URL

LauraBeatris · LauraBeatris · commit 23d324305598 · 2026-05-20T19:09:59.000-03:00
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -275,9 +275,7 @@ export const enUS: LocalizationResource = {
       error__noSuccessfulTestRun:
         'You need at least one successful test run before you can continue. Generate a test SSO URL and complete the sign-in flow.',
       testUrl: {
-        title: 'Test your SSO URL',
-        subtitle: 'Generate and copy a test SSO URL to authenticate with.',
-        actionLabel__copy: 'Copy test URL',
+        actionLabel__open: 'Open test URL',
       },
       testResults: {
         title: 'Test results',
@@ -340,8 +338,6 @@ export const enUS: LocalizationResource = {
     configureStep: {
       attributeMapping: {
         title: 'We expect your SAML responses to have the following specific attributes:',
-        paragraph:
-          "These are the defaults and probably won't need you to change them. However, many SAML configuration errors are due to incorrect attribute mappings, so it's worth double-checking. Here's how:",
         columns: {
           attribute: 'Attribute',
           claimName: 'Claim Name',
@@ -409,10 +405,10 @@ export const enUS: LocalizationResource = {
           step2: 'Complete the form with any comments and select <bold>Finish</bold>.',
         },
         configureAttributes: {
-          headerSubtitle: 'Map users attributes from Okta to Clerk',
-          step1: 'In the Okta dashboard, find the <bold>Attribute Statements</bold> section.',
-          step2:
-            'Select <bold>Add Expression</bold> for each attribute, and enter the following name and expression pairs:',
+          headerSubtitle: 'Map user attributes from Okta to Clerk',
+          step1:
+            'Open the <bold>Sign On</bold> tab of your Okta application and locate the <bold>Attribute Statements</bold> section. If you don’t see it, click <bold>Show legacy configuration</bold>, then <bold>Edit</bold>.',
+          step2: 'Select <bold>Add Expression</bold> for each row below, then enter the matching name and value:',
           pairs: {
             conjunction: ' and ',
             email: {
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
@@ -1340,9 +1340,7 @@ export type __internal_LocalizationResource = {
       subtitle: LocalizationValue;
       error__noSuccessfulTestRun: LocalizationValue;
       testUrl: {
-        title: LocalizationValue;
-        subtitle: LocalizationValue;
-        actionLabel__copy: LocalizationValue;
+        actionLabel__open: LocalizationValue;
       };
       testResults: {
         title: LocalizationValue;
diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx
@@ -418,48 +418,38 @@ export const ConfigureAttributesSubStep = (): JSX.Element => {
   );
 };
 
-const OktaConfigureAttributesStepContent = (): JSX.Element => {
-  return (
-    <>
-      <Text
-        as='p'
-        colorScheme='secondary'
-        localizationKey={localizationKeys('configureSSO.configureStep.attributeMapping.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.samlOkta.configureAttributes.step1')}
-        />
-        {/*
-         * The actual name/expression pairs that step 2 refers to are
-         * rendered by the `AttributeMappingTable` immediately below this
-         * component — keeping them in a single tabular surface instead of
-         * an inline badge list matches the design (see Okta screenshot:
-         * "Create the following attribute mapping statements:" + table).
-         */}
-        <Text
-          elementDescriptor={descriptors.configureSSOInstructionsListItem}
-          as='li'
-          colorScheme='secondary'
-          localizationKey={localizationKeys('configureSSO.configureStep.samlOkta.configureAttributes.step2')}
-        />
-      </Col>
-    </>
-  );
-};
+const OktaConfigureAttributesStepContent = (): JSX.Element => (
+  <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.samlOkta.configureAttributes.step1')}
+    />
+    {/*
+     * The actual name/expression pairs that step 2 refers to are rendered
+     * by the `AttributeMappingTable` immediately below this component —
+     * keeping them in a single tabular surface instead of an inline badge
+     * list matches the design (see Okta screenshot: "Create the following
+     * attribute mapping statements:" + table).
+     */}
+    <Text
+      elementDescriptor={descriptors.configureSSOInstructionsListItem}
+      as='li'
+      colorScheme='secondary'
+      localizationKey={localizationKeys('configureSSO.configureStep.samlOkta.configureAttributes.step2')}
+    />
+  </Col>
+);
 
 const AttributeMappingTable = ({ config }: { config: AttributeMappingTableConfig }): JSX.Element => (
   <Table
diff --git a/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx
@@ -8,6 +8,7 @@ import {
   Badge,
   Box,
   Button,
+  Col,
   Dd,
   descriptors,
   Dl,
@@ -31,9 +32,8 @@ import { useCardState } from '@/elements/contexts';
 import { Drawer } from '@/elements/Drawer';
 import { IconButton } from '@/elements/IconButton';
 import { Pagination } from '@/elements/Pagination';
-import { ProfileSection } from '@/elements/Section';
 import { useClipboard } from '@/hooks';
-import { Check, Copy, RotateLeftRight } from '@/icons';
+import { Check, Copy, LinkIcon, RotateLeftRight } from '@/icons';
 import { common, mqu } from '@/styledSystem';
 import { handleError } from '@/utils/errorHandler';
 
@@ -76,10 +76,7 @@ export const TestConfigurationStep = (): JSX.Element => {
         elementDescriptor={descriptors.configureSSOStep}
         elementId={descriptors.configureSSOStep.setId('test')}
       >
-        <Step.Header
-          title={localizationKeys('configureSSO.testConfigurationStep.title')}
-          description={localizationKeys('configureSSO.testConfigurationStep.subtitle')}
-        />
+        <Step.Header title={localizationKeys('configureSSO.testConfigurationStep.title')} />
 
         <Step.Body>
           <Step.Section
@@ -89,74 +86,50 @@ export const TestConfigurationStep = (): JSX.Element => {
               borderBottomColor: theme.colors.$borderAlpha100,
             })}
           >
-            <ProfileSection.Root
-              title={localizationKeys('configureSSO.testConfigurationStep.testUrl.title')}
-              id='testSsoUrl'
-              centered={false}
-              sx={t => ({
-                borderTopWidth: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                flexDirection: 'column-reverse',
-                gap: t.space.$1,
-              })}
-            >
+            <Col gap={3}>
               <Text
-                colorScheme='secondary'
-                localizationKey={localizationKeys('configureSSO.testConfigurationStep.testUrl.subtitle')}
+                as='p'
+                localizationKey={localizationKeys('configureSSO.testConfigurationStep.subtitle')}
               />
-              <ProfileSection.Item
-                id='testSsoUrl'
-                sx={{ paddingInlineStart: 0 }}
-              >
-                <Flex gap={2}>
-                  <CopyTestUrlButton onTestRunCreated={handleTestRunCreated} />
-
-                  <Button
-                    elementDescriptor={descriptors.configureSSOTestRefreshButton}
-                    variant='bordered'
-                    colorScheme='secondary'
-                    size='xs'
-                    onClick={() => void revalidateTestRuns()}
-                    isDisabled={areTestRunsLoading}
-                    sx={t => ({ gap: t.space.$1x5 })}
-                  >
-                    <Icon
-                      icon={RotateLeftRight}
-                      size='sm'
-                      colorScheme='neutral'
-                    />
-                    <Text
-                      as='span'
-                      localizationKey={localizationKeys(
-                        'configureSSO.testConfigurationStep.testResults.actionLabel__refresh',
-                      )}
-                    />
-                  </Button>
-                </Flex>
-              </ProfileSection.Item>
-            </ProfileSection.Root>
+
+              <OpenTestUrlButton onTestRunCreated={handleTestRunCreated} />
+            </Col>
           </Step.Section>
 
-          <Step.Section sx={{ flex: 1, minHeight: 0 }}>
-            <ProfileSection.Root
-              title={localizationKeys('configureSSO.testConfigurationStep.testResults.title')}
-              id='testResults'
-              centered={false}
-              sx={t => ({
-                borderTopWidth: 0,
-                paddingTop: 0,
-                paddingBottom: 0,
-                flexDirection: 'column-reverse',
-                gap: t.space.$2,
-                flex: 1,
-                minHeight: 0,
-                '& > *:first-of-type': {
-                  flex: 1,
-                  minHeight: 0,
-                },
-              })}
+          <Step.Section sx={t => ({ flex: 1, minHeight: 0, gap: t.space.$3 })}>
+            <Flex
+              align='center'
+              justify='between'
+              sx={t => ({ gap: t.space.$2, flexShrink: 0 })}
             >
+              <Text
+                variant='subtitle'
+                localizationKey={localizationKeys('configureSSO.testConfigurationStep.testResults.title')}
+              />
+              <Button
+                elementDescriptor={descriptors.configureSSOTestRefreshButton}
+                variant='bordered'
+                colorScheme='secondary'
+                size='xs'
+                onClick={() => void revalidateTestRuns()}
+                isDisabled={areTestRunsLoading}
+                sx={t => ({ gap: t.space.$1x5 })}
+              >
+                <Icon
+                  icon={RotateLeftRight}
+                  size='sm'
+                  colorScheme='neutral'
+                />
+                <Text
+                  as='span'
+                  localizationKey={localizationKeys(
+                    'configureSSO.testConfigurationStep.testResults.actionLabel__refresh',
+                  )}
+                />
+              </Button>
+            </Flex>
+
+            <Col sx={{ flex: 1, minHeight: 0 }}>
               <TestResultsTable
                 rows={testRuns ?? []}
                 isPolling={isPolling}
@@ -168,7 +141,7 @@ export const TestConfigurationStep = (): JSX.Element => {
                 onPageChange={setCurrentPage}
                 onTestRunCreated={handleTestRunCreated}
               />
-            </ProfileSection.Root>
+            </Col>
           </Step.Section>
         </Step.Body>
 
@@ -369,7 +342,7 @@ const TestResultsTable = ({
                     justify='center'
                     sx={t => ({ padding: `${t.space.$10} 0`, flex: 1 })}
                   >
-                    <CopyTestUrlButton onTestRunCreated={onTestRunCreated} />
+                    <OpenTestUrlButton onTestRunCreated={onTestRunCreated} />
                   </Flex>
                 </Td>
               </Tr>
@@ -717,20 +690,18 @@ const TestRunStatusCell = ({ testRun }: { testRun: EnterpriseConnectionTestRunRe
   );
 };
 
-type CopyTestUrlButtonProps = {
+type OpenTestUrlButtonProps = {
   onTestRunCreated?: (testUrl: string) => void;
 };
 
-const CopyTestUrlButton = ({ onTestRunCreated }: CopyTestUrlButtonProps): JSX.Element => {
+const OpenTestUrlButton = ({ onTestRunCreated }: OpenTestUrlButtonProps): JSX.Element => {
   const { user } = useUser();
   const card = useCardState();
   const { enterpriseConnection } = useConfigureSSO();
 
-  const [testUrl, setTestUrl] = useState('');
   const [isCreatingTestRun, setIsCreatingTestRun] = useState(false);
-  const { onCopy, hasCopied } = useClipboard(testUrl);
 
-  const createTestRun = () => {
+  const openTestRun = () => {
     if (!user || !enterpriseConnection) {
       return;
     }
@@ -740,26 +711,25 @@ const CopyTestUrlButton = ({ onTestRunCreated }: CopyTestUrlButtonProps): JSX.El
     user
       .createEnterpriseConnectionTestRun(enterpriseConnection.id)
       .then(({ url }) => {
-        setTestUrl(url);
-        onCopy(url);
         onTestRunCreated?.(url);
+        // `noopener,noreferrer` so the IdP can't reach back into the dashboard
+        // via `window.opener` once it lands the SAML response.
+        window.open(url, '_blank', 'noopener,noreferrer');
       })
       .catch(err => handleError(err as Error, [], card.setError))
       .finally(() => setIsCreatingTestRun(false));
   };
 
   return (
     <Button
-      elementDescriptor={descriptors.configureSSOTestUrlCopyButton}
+      elementDescriptor={descriptors.configureSSOTestUrlOpenButton}
       id='testSsoUrl'
       variant='bordered'
       colorScheme='secondary'
       size='xs'
-      onClick={createTestRun}
+      onClick={openTestRun}
       isDisabled={isCreatingTestRun}
-      sx={t => ({
-        gap: t.space.$1x5,
-      })}
+      sx={t => ({ gap: t.space.$1x5, width: 'fit-content' })}
     >
       {isCreatingTestRun ? (
         <Spinner
@@ -768,14 +738,14 @@ const CopyTestUrlButton = ({ onTestRunCreated }: CopyTestUrlButtonProps): JSX.El
         />
       ) : (
         <Icon
-          icon={hasCopied ? Check : Copy}
+          icon={LinkIcon}
           size='sm'
           colorScheme='neutral'
         />
       )}
       <Text
         as='span'
-        localizationKey={localizationKeys('configureSSO.testConfigurationStep.testUrl.actionLabel__copy')}
+        localizationKey={localizationKeys('configureSSO.testConfigurationStep.testUrl.actionLabel__open')}
       />
     </Button>
   );
diff --git a/packages/ui/src/customizables/elementDescriptors.ts b/packages/ui/src/customizables/elementDescriptors.ts
@@ -582,7 +582,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'configureSSOCertificateFileName',
   'configureSSOCertificateRemoveButton',
 
-  'configureSSOTestUrlCopyButton',
+  'configureSSOTestUrlOpenButton',
   'configureSSOTestRefreshButton',
   'configureSSOTestResultsTable',
   'configureSSOTestResultsRow',
diff --git a/packages/ui/src/internal/appearance.ts b/packages/ui/src/internal/appearance.ts
@@ -718,7 +718,7 @@ export type ElementsConfig = {
   configureSSOCertificateFileName: WithOptions;
   configureSSOCertificateRemoveButton: WithOptions;
 
-  configureSSOTestUrlCopyButton: WithOptions;
+  configureSSOTestUrlOpenButton: WithOptions;
   configureSSOTestRefreshButton: WithOptions;
   configureSSOTestResultsTable: WithOptions;
   configureSSOTestResultsRow: WithOptions;
