fix(console): normalize scope textarea input to single-space string in Social and Enterprise SSO connectors (#7658)

* fix(console): fix scope input field

fix scope input field

* chore: fix typo

fix typo

Author: simeng-li

packages/console/src/components/ConnectorForm/ConfigForm/ConfigFormFields/index.tsx

@@ -1,5 +1,6 @@
 import type { ConnectorConfigFormItem } from '@logto/connector-kit';
 import { ConnectorConfigFormItemType } from '@logto/connector-kit';
+import { conditional } from '@silverhand/essentials';
 import { useCallback } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -14,6 +15,7 @@ import Switch from '@/ds-components/Switch';
 import TextInput from '@/ds-components/TextInput';
 import Textarea from '@/ds-components/Textarea';
 import type { ConnectorFormType } from '@/types/connector';
+import { formatMultiLineScopeInput } from '@/utils/connector-form';
 import { jsonValidator } from '@/utils/validator';
 
 import styles from './index.module.scss';
@@ -65,6 +67,13 @@ function ConfigFormFields({ formItems }: Props) {
       ...register(`formConfig.${item.key}`, {
         required: item.required,
         valueAsNumber: item.type === ConnectorConfigFormItemType.Number,
+        ...conditional(
+          // For `scope` input field using multiline text, we need to format the input value.
+          item.key === 'scope' &&
+            item.type === ConnectorConfigFormItemType.MultilineText && {
+              setValueAs: (value) => formatMultiLineScopeInput(String(value)),
+            }
+        ),
       }),
       placeholder: item.placeholder,
       error,

packages/console/src/pages/EnterpriseSsoDetails/Connection/OidcMetadataForm/index.tsx

@@ -8,6 +8,7 @@ import InlineNotification from '@/ds-components/InlineNotification';
 import Switch from '@/ds-components/Switch';
 import TextInput from '@/ds-components/TextInput';
 import Textarea from '@/ds-components/Textarea';
+import { formatMultiLineScopeInput } from '@/utils/connector-form';
 import { uriValidator } from '@/utils/validator';
 
 import { type OidcConnectorConfig, type OidcProviderConfig } from '../../types/oidc';
@@ -85,7 +86,9 @@ function OidcMetadataForm({ providerConfig, config, providerName }: Props) {
       <FormField title="enterprise_sso.metadata.oidc.scope_field_name">
         <Textarea
           rows={5}
-          {...register('scope')}
+          {...register('scope', {
+            setValueAs: (value) => formatMultiLineScopeInput(String(value)),
+          })}
           error={Boolean(errors.scope)}
           placeholder={t('enterprise_sso.metadata.oidc.scope_field_placeholder')}
         />

packages/console/src/utils/connector-form.ts

@@ -109,3 +109,17 @@ export const convertFactoryResponseToForm = (
     enableTokenStorage: false,
   };
 };
+
+/**
+ * `scope` should be stored as a string with space-separated values.
+ *  In some pages like Social connector form and Enterprise SSO connector form,
+ *  we use Textarea to allow multi-line input, which allows users to input scopes in multiple lines.
+ *  To prevent the scopes from being stored with newlines,
+ *  we need to remove any newlines and trim the values before storing.
+ **/
+export const formatMultiLineScopeInput = (value: string) =>
+  value
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .join(' ');