From 9b58afa31791c90ef57ef34bf239112890698155 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 23 Jan 2024 15:17:49 +0800
Subject: [PATCH] refactor(console): improve enterprise sso details page codes

---
 .../pages/EnterpriseSsoDetails/Connection/index.tsx | 13 ++++++-------
 .../src/pages/EnterpriseSsoDetails/index.tsx        |  5 ++---
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/console/src/pages/EnterpriseSsoDetails/Connection/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/Connection/index.tsx
index 0ce4f6971..1955c80b6 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/Connection/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/Connection/index.tsx
@@ -2,8 +2,7 @@ import { SsoProviderName, type RequestErrorBody } from '@logto/schemas';
 import { conditional, type Optional } from '@silverhand/essentials';
 import cleanDeep from 'clean-deep';
 import { HTTPError } from 'ky';
-import { useEffect } from 'react';
-import { useForm, FormProvider, type Path } from 'react-hook-form';
+import { useForm, FormProvider, type Path, type DeepPartial } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 
@@ -42,7 +41,11 @@ function Connection<T extends SsoProviderName>({ isDeleted, data, onUpdated }: P
 
   const api = useApi({ hideErrorToast: true });
 
-  const methods = useForm<GuideFormType<T>>();
+  const methods = useForm<GuideFormType<T>>({
+    // Make typescript happy
+    // eslint-disable-next-line no-restricted-syntax
+    defaultValues: config as DeepPartial<GuideFormType<T>>,
+  });
 
   const {
     watch,
@@ -52,10 +55,6 @@ function Connection<T extends SsoProviderName>({ isDeleted, data, onUpdated }: P
     reset,
   } = methods;
 
-  useEffect(() => {
-    reset(config);
-  }, [config, reset]);
-
   const onSubmit = handleSubmit(
     trySubmitSafe(async (formData) => {
       if (isSubmitting) {
diff --git a/packages/console/src/pages/EnterpriseSsoDetails/index.tsx b/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
index a17228469..4c4db856f 100644
--- a/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
+++ b/packages/console/src/pages/EnterpriseSsoDetails/index.tsx
@@ -11,7 +11,6 @@ import Delete from '@/assets/icons/delete.svg';
 import File from '@/assets/icons/file.svg';
 import DetailsPage from '@/components/DetailsPage';
 import DetailsPageHeader from '@/components/DetailsPage/DetailsPageHeader';
-import Skeleton from '@/components/DetailsPage/Skeleton';
 import Drawer from '@/components/Drawer';
 import PageMeta from '@/components/PageMeta';
 import { EnterpriseSsoDetailsTabs } from '@/consts';
@@ -101,14 +100,14 @@ function EnterpriseSsoConnectorDetails<T extends SsoProviderName>() {
     <DetailsPage
       backLink={enterpriseSsoPathname}
       backLinkTitle="enterprise_sso_details.back_to_sso_connectors"
+      isLoading={isLoading}
       error={requestError}
       onRetry={() => {
         void mutate();
       }}
     >
       <PageMeta titleKey="enterprise_sso_details.page_title" />
-      {isLoading && <Skeleton />}
-      {!isLoading && ssoConnector && (
+      {ssoConnector && (
         <>
           <DetailsPageHeader
             icon={