Improve empty state for test logs

Author: LauraBeatris

packages/localizations/src/en-US.ts

@@ -278,12 +278,16 @@ export const enUS: LocalizationResource = {
         actionLabel__open: 'Open test URL',
       },
       testResults: {
-        title: 'Test results',
+        title: 'Your test results',
         actionLabel__refresh: 'Refresh logs',
         polling: 'Waiting for the test run to complete…',
         status__success: 'Success',
         status__failed: 'Failed',
         status__pending: 'Pending',
+        empty: {
+          title: 'No test results',
+          subtitle: 'Use the button above to start running tests',
+        },
       },
       testRunDetails: {
         title: 'Test run',

packages/shared/src/types/localization.ts

@@ -1349,6 +1349,10 @@ export type __internal_LocalizationResource = {
         status__success: LocalizationValue;
         status__failed: LocalizationValue;
         status__pending: LocalizationValue;
+        empty: {
+          title: LocalizationValue;
+          subtitle: LocalizationValue;
+        };
       };
       testRunDetails: {
         title: LocalizationValue;

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

@@ -139,7 +139,6 @@ export const TestConfigurationStep = (): JSX.Element => {
                 pageSize={TEST_RUNS_PAGE_SIZE}
                 totalCount={totalCount ?? 0}
                 onPageChange={setCurrentPage}
-                onTestRunCreated={handleTestRunCreated}
               />
             </Col>
           </Step.Section>
@@ -232,7 +231,6 @@ type TestResultsTableProps = {
   rows: EnterpriseConnectionTestRunResource[];
   isLoading: boolean;
   isPolling: boolean;
-  onTestRunCreated?: (testUrl: string) => void;
   page: number;
   pageCount: number;
   pageSize: number;
@@ -244,7 +242,6 @@ const TestResultsTable = ({
   rows,
   isLoading,
   isPolling,
-  onTestRunCreated,
   page,
   pageCount,
   pageSize,
@@ -338,11 +335,26 @@ const TestResultsTable = ({
                 <Td colSpan={TEST_RESULTS_TABLE_COLUMN_COUNT}>
                   <Flex
                     elementDescriptor={descriptors.configureSSOTestResultsEmpty}
+                    direction='col'
                     align='center'
                     justify='center'
-                    sx={t => ({ padding: `${t.space.$10} 0`, flex: 1 })}
+                    sx={t => ({
+                      padding: `${t.space.$10} 0`,
+                      flex: 1,
+                      gap: t.space.$1,
+                      textAlign: 'center',
+                    })}
                   >
-                    <OpenTestUrlButton onTestRunCreated={onTestRunCreated} />
+                    <Text
+                      variant='subtitle'
+                      localizationKey={localizationKeys('configureSSO.testConfigurationStep.testResults.empty.title')}
+                    />
+                    <Text
+                      colorScheme='secondary'
+                      localizationKey={localizationKeys(
+                        'configureSSO.testConfigurationStep.testResults.empty.subtitle',
+                      )}
+                    />
                   </Flex>
                 </Td>
               </Tr>