Revert "Unblock UI and display error message when the service is unre…

…achable" This reverts commit eded985.
twentyhq · Nov 13, 2024 · dea3508 · dea3508
1 parent eded985
commit dea3508
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 106 deletions.
diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
@@ -4,8 +4,8 @@ import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
 import { AuthProvider } from '@/auth/components/AuthProvider';
 import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarEffect';
 import { ChromeExtensionSidecarProvider } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarProvider';
+import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
-import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState';
 import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
 import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
@@ -19,46 +19,46 @@ import { UserProvider } from '@/users/components/UserProvider';
 import { UserProviderEffect } from '@/users/components/UserProviderEffect';
 import { StrictMode } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
 export const AppRouterProviders = () => {
   const { pathname } = useLocation();
   const pageTitle = getPageTitleFromPath(pathname);
-  const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState);
 
   return (
     <ApolloProvider>
       <ClientConfigProviderEffect />
-      <ChromeExtensionSidecarEffect />
-      <ChromeExtensionSidecarProvider>
-        <UserProviderEffect />
-        <UserProvider>
-          <AuthProvider>
-            <ApolloMetadataClientProvider>
-              <ObjectMetadataItemsProvider>
-                <PrefetchDataProvider>
-                  <AppThemeProvider>
-                    <SnackBarProvider>
-                      <DialogManagerScope dialogManagerScopeId="dialog-manager">
-                        <DialogManager>
-                          <StrictMode>
-                            <PromiseRejectionEffect />
-                            <GotoHotkeysEffectsProvider />
-                            <PageTitle title={pageTitle} />
-                            <Outlet />
-                          </StrictMode>
-                        </DialogManager>
-                      </DialogManagerScope>
-                    </SnackBarProvider>
-                  </AppThemeProvider>
-                </PrefetchDataProvider>
-                <PageChangeEffect />
-              </ObjectMetadataItemsProvider>
-            </ApolloMetadataClientProvider>
-          </AuthProvider>
-        </UserProvider>
-      </ChromeExtensionSidecarProvider>
+      <ClientConfigProvider>
+        <ChromeExtensionSidecarEffect />
+        <ChromeExtensionSidecarProvider>
+          <UserProviderEffect />
+          <UserProvider>
+            <AuthProvider>
+              <ApolloMetadataClientProvider>
+                <ObjectMetadataItemsProvider>
+                  <PrefetchDataProvider>
+                    <AppThemeProvider>
+                      <SnackBarProvider>
+                        <DialogManagerScope dialogManagerScopeId="dialog-manager">
+                          <DialogManager>
+                            <StrictMode>
+                              <PromiseRejectionEffect />
+                              <GotoHotkeysEffectsProvider />
+                              <PageTitle title={pageTitle} />
+                              <Outlet />
+                            </StrictMode>
+                          </DialogManager>
+                        </DialogManagerScope>
+                      </SnackBarProvider>
+                    </AppThemeProvider>
+                  </PrefetchDataProvider>
+                  <PageChangeEffect />
+                </ObjectMetadataItemsProvider>
+              </ApolloMetadataClientProvider>
+            </AuthProvider>
+          </UserProvider>
+        </ChromeExtensionSidecarProvider>
+      </ClientConfigProvider>
     </ApolloProvider>
   );
 };
diff --git a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import {
@@ -9,7 +9,6 @@ import {
 } from '@/analytics/hooks/useEventTracker';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
-import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandType } from '@/command-menu/types/Command';
 import { useNonSystemActiveObjectMetadataItems } from '@/object-metadata/hooks/useNonSystemActiveObjectMetadataItems';
@@ -32,7 +31,6 @@ import { isDefined } from '~/utils/isDefined';
 export const PageChangeEffect = () => {
   const navigate = useNavigate();
   const isMatchingLocation = useIsMatchingLocation();
-  const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState);
 
   const [previousLocation, setPreviousLocation] = useState('');
 
@@ -180,9 +178,6 @@ export const PageChangeEffect = () => {
   ]);
 
   useEffect(() => {
-    if (!isClientConfigLoaded) {
-      return;
-    }
     setTimeout(() => {
       setSessionId();
       eventTracker('pageview', {
@@ -194,7 +189,7 @@ export const PageChangeEffect = () => {
         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
       });
     }, 500);
-  }, [eventTracker, location.pathname, isClientConfigLoaded]);
+  }, [eventTracker, location.pathname]);
 
   const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
   const isCaptchaScriptLoaded = useRecoilValue(isCaptchaScriptLoadedState);

diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProvider.tsx
@@ -0,0 +1,11 @@
+import { useRecoilValue } from 'recoil';
+
+import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState';
+
+export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const isClientConfigLoaded = useRecoilValue(isClientConfigLoadedState);
+
+  return isClientConfigLoaded ? <>{children}</> : <></>;
+};
diff --git a/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx b/packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx
@@ -10,8 +10,6 @@ import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilled
 import { isSignUpDisabledState } from '@/client-config/states/isSignUpDisabledState';
 import { sentryConfigState } from '@/client-config/states/sentryConfigState';
 import { supportChatState } from '@/client-config/states/supportChatState';
-import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useEffect } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { useGetClientConfigQuery } from '~/generated/graphql';
@@ -39,51 +37,41 @@ export const ClientConfigProviderEffect = () => {
 
   const setApiConfig = useSetRecoilState(apiConfigState);
 
-  const { enqueueSnackBar } = useSnackBar();
-
-  const { data, loading, error } = useGetClientConfigQuery({
+  const { data, loading } = useGetClientConfigQuery({
     skip: isClientConfigLoaded,
   });
 
   useEffect(() => {
-    if (!loading) {
-      if (error !== undefined) {
-        enqueueSnackBar('Unable to reach backend', {
-          variant: SnackBarVariant.Error,
-        });
-        return;
-      }
-      if (isDefined(data?.clientConfig)) {
-        setIsClientConfigLoaded(true);
-        setAuthProviders({
-          google: data?.clientConfig.authProviders.google,
-          microsoft: data?.clientConfig.authProviders.microsoft,
-          password: data?.clientConfig.authProviders.password,
-          magicLink: false,
-          sso: data?.clientConfig.authProviders.sso,
-        });
-        setIsDebugMode(data?.clientConfig.debugMode);
-        setIsAnalyticsEnabled(data?.clientConfig.analyticsEnabled);
-        setIsSignInPrefilled(data?.clientConfig.signInPrefilled);
-        setIsSignUpDisabled(data?.clientConfig.signUpDisabled);
-
-        setBilling(data?.clientConfig.billing);
-        setSupportChat(data?.clientConfig.support);
-
-        setSentryConfig({
-          dsn: data?.clientConfig?.sentry?.dsn,
-          release: data?.clientConfig?.sentry?.release,
-          environment: data?.clientConfig?.sentry?.environment,
-        });
-
-        setCaptchaProvider({
-          provider: data?.clientConfig?.captcha?.provider,
-          siteKey: data?.clientConfig?.captcha?.siteKey,
-        });
-
-        setChromeExtensionId(data?.clientConfig?.chromeExtensionId);
-        setApiConfig(data?.clientConfig?.api);
-      }
+    if (!loading && isDefined(data?.clientConfig)) {
+      setIsClientConfigLoaded(true);
+      setAuthProviders({
+        google: data?.clientConfig.authProviders.google,
+        microsoft: data?.clientConfig.authProviders.microsoft,
+        password: data?.clientConfig.authProviders.password,
+        magicLink: false,
+        sso: data?.clientConfig.authProviders.sso,
+      });
+      setIsDebugMode(data?.clientConfig.debugMode);
+      setIsAnalyticsEnabled(data?.clientConfig.analyticsEnabled);
+      setIsSignInPrefilled(data?.clientConfig.signInPrefilled);
+      setIsSignUpDisabled(data?.clientConfig.signUpDisabled);
+
+      setBilling(data?.clientConfig.billing);
+      setSupportChat(data?.clientConfig.support);
+
+      setSentryConfig({
+        dsn: data?.clientConfig?.sentry?.dsn,
+        release: data?.clientConfig?.sentry?.release,
+        environment: data?.clientConfig?.sentry?.environment,
+      });
+
+      setCaptchaProvider({
+        provider: data?.clientConfig?.captcha?.provider,
+        siteKey: data?.clientConfig?.captcha?.siteKey,
+      });
+
+      setChromeExtensionId(data?.clientConfig?.chromeExtensionId);
+      setApiConfig(data?.clientConfig?.api);
     }
   }, [
     data,
@@ -102,7 +90,5 @@ export const ClientConfigProviderEffect = () => {
     setIsAnalyticsEnabled,
   ]);
 
-  console.log('error: ', error, loading);
-
   return <></>;
 };
diff --git a/packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx b/packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx
@@ -7,7 +7,6 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
 import { workspacesState } from '@/auth/states/workspaces';
-import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState';
 import { DateFormat } from '@/localization/constants/DateFormat';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
@@ -40,10 +39,8 @@ export const UserProviderEffect = () => {
     currentWorkspaceMembersState,
   );
 
-  const [isClientConfigLoaded] = useRecoilState(isClientConfigLoadedState);
-
   const { loading: queryLoading, data: queryData } = useGetCurrentUserQuery({
-    skip: isCurrentUserLoaded || !isClientConfigLoaded,
+    skip: isCurrentUserLoaded,
   });
 
   useEffect(() => {

diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@@ -16,6 +16,7 @@ import { ApolloMetadataClientMockedProvider } from '@/object-metadata/hooks/__mo
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
 import { DefaultLayout } from '@/ui/layout/page/components/DefaultLayout';
 import { UserProviderEffect } from '@/users/components/UserProviderEffect';
+import { ClientConfigProvider } from '~/modules/client-config/components/ClientConfigProvider';
 import { UserProvider } from '~/modules/users/components/UserProvider';
 import { mockedApolloClient } from '~/testing/mockedApolloClient';
 
@@ -69,24 +70,26 @@ const Providers = () => {
         <ApolloProvider client={mockedApolloClient}>
           <ApolloStorybookDevLogEffect />
           <ClientConfigProviderEffect />
-          <UserProviderEffect />
-          <UserProvider>
-            <ApolloMetadataClientMockedProvider>
-              <ObjectMetadataItemsProvider>
-                <FullHeightStorybookLayout>
-                  <HelmetProvider>
-                    <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                      <IconsProvider>
-                        <PrefetchDataProvider>
-                          <Outlet />
-                        </PrefetchDataProvider>
-                      </IconsProvider>
-                    </SnackBarProviderScope>
-                  </HelmetProvider>
-                </FullHeightStorybookLayout>
-              </ObjectMetadataItemsProvider>
-            </ApolloMetadataClientMockedProvider>
-          </UserProvider>
+          <ClientConfigProvider>
+            <UserProviderEffect />
+            <UserProvider>
+              <ApolloMetadataClientMockedProvider>
+                <ObjectMetadataItemsProvider>
+                  <FullHeightStorybookLayout>
+                    <HelmetProvider>
+                      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+                        <IconsProvider>
+                          <PrefetchDataProvider>
+                            <Outlet />
+                          </PrefetchDataProvider>
+                        </IconsProvider>
+                      </SnackBarProviderScope>
+                    </HelmetProvider>
+                  </FullHeightStorybookLayout>
+                </ObjectMetadataItemsProvider>
+              </ApolloMetadataClientMockedProvider>
+            </UserProvider>
+          </ClientConfigProvider>
         </ApolloProvider>
       </SnackBarProviderScope>
     </RecoilRoot>