style(console): fix the jwt test panel layout (#5538)

fix the jwt test panel layout

packages/console/src/pages/JwtClaims/SettingsSection/TestTab.tsx

@@ -24,8 +24,8 @@ type Props = {
   isActive: boolean;
 };
 
-const userTokenModelSettings = [accessTokenPayloadTestModel, userContextTestModel];
+const accessTokenModelSettings = [accessTokenPayloadTestModel, userContextTestModel];
-const machineToMachineTokenModelSettings = [clientCredentialsPayloadTestModel];
+const clientCredentialsModelSettings = [clientCredentialsPayloadTestModel];
 const testEndpointPath = 'api/configs/jwt-customizer/test';
 
 function TestTab({ isActive }: Props) {
@@ -40,8 +40,8 @@ function TestTab({ isActive }: Props) {
   const editorModels = useMemo(
     () =>
       tokenType === LogtoJwtTokenPath.AccessToken
-        ? userTokenModelSettings
+        ? accessTokenModelSettings
-        : machineToMachineTokenModelSettings,
+        : clientCredentialsModelSettings,
     [tokenType]
   );
 
@@ -49,6 +49,11 @@ function TestTab({ isActive }: Props) {
     setActiveModelName(editorModels[0]?.name);
   }, [editorModels, tokenType]);
 
+  // Clear the test result when the token type changes
+  useEffect(() => {
+    setTestResult(undefined);
+  }, [tokenType]);
+
   const onTestHandler = useCallback(async () => {
     const payload = getValues();
 
@@ -120,7 +125,9 @@ function TestTab({ isActive }: Props) {
 
   return (
     <div className={classNames(styles.tabContent, isActive && styles.active)}>
-      <Card className={classNames(styles.card, styles.flexGrow, styles.flexColumn)}>
+      <Card
+        className={classNames(styles.card, styles.flexGrow, styles.flexColumn, styles.fixHeight)}
+      >
         <div className={styles.headerRow}>
           <div className={styles.cardHeader}>
             <div className={styles.cardTitle}>{t('tester.title')}</div>

packages/console/src/pages/JwtClaims/SettingsSection/index.module.scss

@@ -37,6 +37,8 @@
 
 .tabContent {
   display: none;
+  // restrict the height of the tab content to the height of the container
+  overflow: hidden;
 
   &.active {
     flex: 1;
@@ -85,6 +87,14 @@
     }
   }
 
+  &.fixHeight {
+    overflow: hidden;
+
+    .cardContent {
+      overflow: hidden;
+    }
+  }
+
   .expandButton {
     width: 24px;
     height: 24px;
@@ -116,17 +126,6 @@
   }
 }
 
-.table {
-  .value {
-    display: inline-block;
-    padding: _.unit(0.5) _.unit(2);
-    color: var(--color-text);
-    background-color: var(--color-bg-info-tag);
-    border-radius: 4px;
-    font-family: 'Roboto Mono', monospace;
-  }
-}
-
 .sampleCode {
   :global {
     /* stylelint-disable-next-line selector-class-pattern */
@@ -150,6 +149,8 @@
   margin-bottom: _.unit(4);
 }
 
+/** Test Tab */
+
 .shrinkCodeEditor {
   height: 50%;
 }
@@ -161,6 +162,7 @@
   border-radius: 8px;
   border: 1px solid var(--color-divider);
   font-family: 'Roboto Mono', monospace;
+  overflow: auto;
 
   .testResultHeader {
     padding: _.unit(3) _.unit(4);
@@ -175,6 +177,7 @@
   .testResultContent {
     padding: _.unit(2) _.unit(4);
     font: var(--font-body-2);
+    overflow: auto;
 
     pre {
       white-space: pre-wrap;
@@ -195,6 +198,9 @@
   color: var(--color-error);
 }
 
+
+/** Flexbox */
+
 .flexColumn {
   display: flex;
   flex-direction: column;

packages/console/src/pages/JwtClaims/index.module.scss

@@ -19,11 +19,16 @@
   display: flex;
   flex-direction: row;
   flex-grow: 1;
+  // restrict the height of the tab content to the height of the container
+  overflow: hidden;
 
   > * {
     flex: 1;
     margin-bottom: _.unit(6);
 
+    // restrict the height of the tab content to the height of the container
+    overflow: hidden;
+
     &:first-child {
       margin-right: _.unit(3);
     }

packages/console/src/pages/JwtClaims/utils/format.ts

@@ -103,7 +103,8 @@ export const formatFormDataToTestRequestPayload = ({
   return {
     tokenType,
     payload: {
-      script,
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- parse empty string as undefined
+      script: script || undefined,
       envVars: formatEnvVariablesFormData(environmentVariables),
       tokenSample: formatSampleCodeStringToJson(testSample?.tokenSample) ?? defaultTokenSample,
       contextSample: