refactor(console): refactor sso detail pages

packages/console/src/pages/EnterpriseSso/SsoCreationModal/index.tsx

@@ -1,10 +1,10 @@
 import {
+  type RequestErrorBody,
   type SsoConnectorProvidersResponse,
   type SsoConnectorWithProviderConfig,
-  type RequestErrorBody,
 } from '@logto/schemas';
 import { HTTPError } from 'ky';
-import { useMemo, useState, useContext } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
@@ -21,8 +21,7 @@ import DynamicT from '@/ds-components/DynamicT';
 import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
 import TextInput from '@/ds-components/TextInput';
-import { type RequestError } from '@/hooks/use-api';
-import useApi from '@/hooks/use-api';
+import useApi, { type RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
 import { trySubmitSafe } from '@/utils/form';
 
@@ -150,7 +149,7 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
                   a: <ContactUsPhraseLink />,
                 }}
               >
-                {t('upsell.paywall.organizations')}
+                {t('upsell.paywall.sso_connectors')}
               </Trans>
             </QuotaGuardFooter>
           )

packages/console/src/pages/EnterpriseSsoDetails/Connection/OidcConnectorForm.tsx

@@ -0,0 +1,138 @@
+import { type RequestErrorBody } from '@logto/schemas';
+import cleanDeep from 'clean-deep';
+import { HTTPError } from 'ky';
+import { useEffect, useMemo } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+
+import DetailsForm from '@/components/DetailsForm';
+import FormCard from '@/components/FormCard';
+import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
+import useApi from '@/hooks/use-api';
+
+import { invalidConfigErrorCode } from '../config';
+import {
+  type OidcSsoConnectorWithProviderConfig,
+  type OidcConnectorConfig,
+  oidcConnectorConfigGuard,
+  oidcProviderConfigGuard,
+} from '../types/oidc';
+
+import OidcMetadataForm from './OidcMetadataForm';
+import OidcConnectorSpInfo from './ServiceProviderInfo/OidcConnectorSpInfo';
+
+type Props = {
+  isDeleted: boolean;
+  data: OidcSsoConnectorWithProviderConfig;
+  onUpdated: (data: OidcSsoConnectorWithProviderConfig) => void;
+};
+
+function OidcConnectorForm({ isDeleted, data, onUpdated }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const api = useApi({ hideErrorToast: [invalidConfigErrorCode] });
+
+  const methods = useForm<OidcConnectorConfig>();
+
+  const {
+    formState: { isSubmitting, isDirty },
+    handleSubmit,
+    reset,
+    setError,
+  } = methods;
+
+  const { config, providerConfig, providerName, id: connectorId } = data;
+
+  // Guard the config data
+  const oidcConnectorConfig = useMemo(() => {
+    const result = oidcConnectorConfigGuard.safeParse(config);
+    const { success } = result;
+    const guardedConfig = success ? result.data : undefined;
+
+    return guardedConfig;
+  }, [config]);
+
+  const oidcProviderConfig = useMemo(() => {
+    const result = oidcProviderConfigGuard.safeParse(providerConfig);
+    const { success } = result;
+    const guardedConfig = success ? result.data : undefined;
+
+    return guardedConfig;
+  }, [providerConfig]);
+
+  useEffect(() => {
+    reset(oidcConnectorConfig);
+  }, [oidcConnectorConfig, reset]);
+
+  const onSubmit = handleSubmit(async (formData) => {
+    if (isSubmitting) {
+      return;
+    }
+
+    try {
+      const result = await api
+        .patch(`api/sso-connectors/${connectorId}`, {
+          json: {
+            config: cleanDeep(formData),
+          },
+        })
+        .json<OidcSsoConnectorWithProviderConfig>();
+
+      toast.success(t('general.saved'));
+
+      onUpdated(result);
+
+      reset(result.config);
+    } catch (error: unknown) {
+      if (error instanceof HTTPError) {
+        const errorBody = await error.response.clone().json<RequestErrorBody>();
+
+        // Manually handle the error to show the error message in the form.
+        if (errorBody.code === invalidConfigErrorCode) {
+          setError('issuer', {
+            type: 'custom',
+            message: errorBody.message,
+          });
+          return;
+        }
+      }
+
+      throw error;
+    }
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <DetailsForm
+        isDirty={isDirty}
+        isSubmitting={isSubmitting}
+        onDiscard={reset}
+        onSubmit={onSubmit}
+      >
+        <FormCard
+          title="enterprise_sso_details.upload_idp_metadata_title_oidc"
+          description="enterprise_sso_details.upload_idp_metadata_description_oidc"
+        >
+          {/* Can not infer the type by narrowing down the value of `providerName`, so we need to cast it. */}
+          <OidcMetadataForm
+            providerName={providerName}
+            config={oidcConnectorConfig}
+            providerConfig={oidcProviderConfig}
+          />
+        </FormCard>
+        <FormCard
+          title="enterprise_sso_details.service_provider_property_title"
+          description="enterprise_sso_details.service_provider_property_description"
+          descriptionInterpolation={{
+            protocol: 'OIDC',
+          }}
+        >
+          <OidcConnectorSpInfo ssoConnectorId={connectorId} />
+        </FormCard>
+      </DetailsForm>
+      <UnsavedChangesAlertModal hasUnsavedChanges={!isDeleted && isDirty} />
+    </FormProvider>
+  );
+}
+
+export default OidcConnectorForm;

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

@@ -1,13 +1,12 @@
-import { type SsoProviderName } from '@logto/schemas';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import { type ParsedSsoIdentityProviderConfig } from '@/pages/EnterpriseSso/types.js';
+import { type OidcProviderConfig } from '@/pages/EnterpriseSsoDetails/types/oidc';
 
 import * as styles from './index.module.scss';
 
 type Props = {
-  providerConfig: ParsedSsoIdentityProviderConfig<SsoProviderName.OIDC>;
+  providerConfig: OidcProviderConfig;
   className?: string;
 };
 

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

@@ -6,19 +6,16 @@
 import FormField from '@/ds-components/FormField';
 import InlineNotification from '@/ds-components/InlineNotification';
 import TextInput from '@/ds-components/TextInput';
-import {
-  type ParsedSsoIdentityProviderConfig,
-  type OidcGuideFormType,
-  type SsoConnectorConfig,
-} from '@/pages/EnterpriseSso/types.js';
 import { uriValidator } from '@/utils/validator';
 
+import { type OidcConnectorConfig, type OidcProviderConfig } from '../../types/oidc';
+
 import ParsedConfigPreview from './ParsedConfigPreview';
 import * as styles from './index.module.scss';
 
 type Props = {
-  providerConfig?: ParsedSsoIdentityProviderConfig<SsoProviderName.OIDC>;
-  config?: SsoConnectorConfig<SsoProviderName.OIDC>;
+  providerConfig?: OidcProviderConfig;
+  config?: OidcConnectorConfig;
   providerName: SsoProviderName;
 };
 
@@ -28,7 +25,7 @@
   const {
     register,
     formState: { errors },
-  } = useFormContext<OidcGuideFormType>();
+  } = useFormContext<OidcConnectorConfig>();
 
   const isConfigEmpty = !config || Object.keys(config).length === 0;
 
@@ -62,7 +59,7 @@
           <CopyToClipboard
             className={styles.copyToClipboard}
             variant="border"
             // TODO: this hard-coded value should align with the `googleIssuer` value defined in `packages/core/src/sso/GoogleWorkspaceSsoConnector/index.ts`.
             value={providerConfig?.issuer ?? 'https://accounts.google.com'}
           />
         ) : (