fix(console): add applications and redirect uri placeholder (#6696)

add applications and redirect uri placeholder

packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/ConfigForm.tsx

@@ -58,7 +58,7 @@ function ConfigForm({
     handleSubmit,
     watch,
   } = useForm<IdpInitiatedAuthConfigFormData>({
-    defaultValues: parseResponseToFormData(idpInitiatedAuthConfig),
+    defaultValues: parseResponseToFormData(idpInitiatedAuthConfig, applications),
   });
 
   const isIdpInitiatedSsoEnabled = watch('isIdpInitiatedSsoEnabled');
@@ -98,8 +98,9 @@ function ConfigForm({
   useEffect(() => {
     if (defaultApplication?.type === ApplicationType.SPA) {
       setValue('config.autoSendAuthorizationRequest', false);
+      setValue('config.redirectUri', undefined);
     }
-  }, [defaultApplication?.type, setValue]);
+  }, [defaultApplication, setValue]);
 
   const onSubmit = handleSubmit(
     trySubmitSafe(async (data) => {
@@ -113,7 +114,7 @@ function ConfigForm({
         await api.delete(buildIdpInitiatedAuthConfigEndpoint(ssoConnector.id));
         await mutateIdpInitiatedConfig();
         toast.success(t('general.saved'));
-        reset(parseResponseToFormData());
+        reset(parseResponseToFormData(undefined, applications));
         return;
       }
 
@@ -172,6 +173,9 @@ function ConfigForm({
                 }}
                 render={({ field: { value, onChange } }) => (
                   <Select
+                    placeholder={t(
+                      'enterprise_sso_details.idp_initiated_auth_config.empty_applications_placeholder'
+                    )}
                     options={applications.map((application) => ({
                       value: application.id,
                       title: `${application.name} (${application.type}, ID: ${application.id})`,
@@ -278,6 +282,9 @@ function ConfigForm({
                           value: uri,
                           title: uri,
                         }))}
+                        placeholder={t(
+                          'enterprise_sso_details.idp_initiated_auth_config.redirect_uri_placeholder'
+                        )}
                         value={value}
                         error={emptyRedirectUrisError ?? errors.config?.redirectUri?.message}
                         onChange={onChange}

packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/index.tsx

@@ -26,7 +26,8 @@ function IdpInitiatedAuth({ ssoConnector }: Props) {
 
   const isLoading = useMemo(
     () =>
-      !applications && !applicationError && !idpInitiatedAuthConfig && !idpInitiatedAuthConfigError,
+      (!applications && !applicationError) ||
+      (!idpInitiatedAuthConfig && !idpInitiatedAuthConfigError),
     [applicationError, applications, idpInitiatedAuthConfig, idpInitiatedAuthConfigError]
   );
 

packages/console/src/pages/EnterpriseSsoDetails/IdpInitiatedAuth/utils.ts

@@ -1,9 +1,11 @@
 import {
+  type Application,
   ApplicationType,
   SsoConnectorIdpInitiatedAuthConfigs,
   type CreateSsoConnectorIdpInitiatedAuthConfig,
   type SsoConnectorIdpInitiatedAuthConfig,
 } from '@logto/schemas';
+import { conditional, type DeepPartial } from '@silverhand/essentials';
 import { t } from 'i18next';
 import { toast } from 'react-hot-toast';
 
@@ -20,11 +22,12 @@ export const buildIdpInitiatedAuthConfigEndpoint = (connectorId: string) =>
 
 type IdpInitiatedAuthConfigData = Pick<
   SsoConnectorIdpInitiatedAuthConfig,
-  | 'defaultApplicationId'
+  'defaultApplicationId' | 'autoSendAuthorizationRequest'
-  | 'autoSendAuthorizationRequest'
+> & {
-  | 'redirectUri'
+  authParameters: string;
-  | 'clientIdpInitiatedAuthCallbackUri'
+  redirectUri: string | undefined;
-> & { authParameters: string };
+  clientIdpInitiatedAuthCallbackUri: string | undefined;
+};
 
 const authParametersGuard = SsoConnectorIdpInitiatedAuthConfigs.createGuard.shape.authParameters;
 
@@ -34,11 +37,17 @@ export type IdpInitiatedAuthConfigFormData = {
 };
 
 export const parseResponseToFormData = (
-  response?: SsoConnectorIdpInitiatedAuthConfig
+  response: SsoConnectorIdpInitiatedAuthConfig | undefined,
-): IdpInitiatedAuthConfigFormData => {
+  applications: Application[] = []
+): DeepPartial<IdpInitiatedAuthConfigFormData> => {
   if (!response) {
     return {
       isIdpInitiatedSsoEnabled: false,
+      config: {
+        // Set default values
+        defaultApplicationId: applications[0]?.id,
+        autoSendAuthorizationRequest: false,
+      },
     };
   }
 
@@ -55,8 +64,8 @@ export const parseResponseToFormData = (
     config: {
       defaultApplicationId,
       autoSendAuthorizationRequest,
-      redirectUri,
+      redirectUri: conditional(redirectUri),
-      clientIdpInitiatedAuthCallbackUri,
+      clientIdpInitiatedAuthCallbackUri: conditional(clientIdpInitiatedAuthCallbackUri),
       authParameters: JSON.stringify(authParameters, null, 2),
     },
   };

packages/phrases/src/locales/en/translation/admin-console/enterprise-sso-details.ts

@@ -86,6 +86,7 @@ const enterprise_sso_details = {
       'Target application the user will be redirected to after authentication.',
     empty_applications_error:
       'No applications found. Please add one in the <a>Applications</a> section.',
+    empty_applications_placeholder: 'No applications',
     authentication_type: 'Authentication type',
     auto_authentication_disabled_title: 'Redirect to client for SP-initiated SSO (Recommended)',
     auto_authentication_disabled_description:
@@ -104,6 +105,7 @@ const enterprise_sso_details = {
       'The redirect URI to redirect users after successful sign-in. Logto will use this URI as the OIDC redirect URI in the authorization request. Use a dedicated URI for the IdP-initiated SSO authentication flow for better security.',
     empty_redirect_uris_error:
       'No redirect URI has been registered for the application. Please add one first.',
+    redirect_uri_placeholder: 'Select a post sign-in redirect URI',
     auth_params: 'Additional authentication parameters',
     auth_params_tooltip:
       'Additional parameters to be passed in the authorization request. By default only (openid profile) scopes will be requested, you can specify additional scopes or a exclusive state value here. (e.g., { "scope": "organizations email", "state": "secret_state" }).',