Various fixes (#11448)

# Scrollbar fix Fixes https://github.com/twentyhq/twenty/issues/11403 <img width="1512" alt="image" src="https://github.com/user-attachments/assets/b13fe0f2-8c61-4ea8-9ea1-e61e571a90da" /> --------- Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
2025-04-09 01:03:43 +02:00
parent ab63214efa
commit b6e344e7be
41 changed files with 265 additions and 470 deletions
--- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx
+++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx
@ -10,7 +10,6 @@ import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { zodResolver } from '@hookform/resolvers/zod';
@ -21,7 +20,9 @@ import { useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useParams } from 'react-router-dom';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
+import { MainButton } from 'twenty-ui/input';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
 import { z } from 'zod';
 import {
  useUpdatePasswordViaResetTokenMutation,
@ -29,8 +30,6 @@ import {
 } from '~/generated/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { logError } from '~/utils/logError';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
-import { MainButton } from 'twenty-ui/input';

 const validationSchema = z
  .object({
@ -89,9 +88,6 @@ export const PasswordReset = () => {

  const isLoggedIn = useIsLogged();

-  const setIsDefaultLayoutAuthModalVisibleState = useSetRecoilState(
-    isDefaultLayoutAuthModalVisibleState,
-  );
  const { control, handleSubmit } = useForm<Form>({
    mode: 'onChange',
    defaultValues: {
@ -105,7 +101,7 @@ export const PasswordReset = () => {
    variables: {
      token: passwordResetToken ?? '',
    },
-    skip: !passwordResetToken,
+    skip: !passwordResetToken || isTokenValid,
    onError: (error) => {
      enqueueSnackBar(error?.message ?? 'Token Invalid', {
        variant: SnackBarVariant.Error,
@ -114,7 +110,6 @@ export const PasswordReset = () => {
    },
    onCompleted: (data) => {
      setIsTokenValid(true);
-      setIsDefaultLayoutAuthModalVisibleState(true);
      if (isNonEmptyString(data?.validatePasswordResetToken?.email)) {
        setEmail(data.validatePasswordResetToken.email);
      }
--- a/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx
+++ b/packages/twenty-front/src/pages/auth/SignInUpLoading.tsx
@ -1,100 +1,12 @@
-import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
-import { useRecoilValue } from 'recoil';
-
-import { Logo } from '@/auth/components/Logo';
-import { Title } from '@/auth/components/Title';
-import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
-import { useMemo } from 'react';
-
-import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash';
 import styled from '@emotion/styled';
-import { useLingui } from '@lingui/react/macro';
-import { isNonEmptyString } from '@sniptt/guards';
 import { motion } from 'framer-motion';
-import { isDefined } from 'twenty-shared/utils';
-import { Loader } from 'twenty-ui/feedback';
-import { MainButton } from 'twenty-ui/input';
-import { PublicWorkspaceDataOutput } from '~/generated/graphql';

 const StyledContentContainer = styled(motion.div)`
+  height: 300px;
  margin-bottom: ${({ theme }) => theme.spacing(8)};
  margin-top: ${({ theme }) => theme.spacing(4)};
 `;

-const StyledForm = styled.form`
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin-top: ${({ theme }) => theme.spacing(10)};
-`;
-
-const StandardContent = ({
-  workspacePublicData,
-  signInUpForm,
-  title,
-}: {
-  workspacePublicData: PublicWorkspaceDataOutput | null;
-  signInUpForm: JSX.Element | null;
-  title: string;
-}) => {
-  return (
-    <>
-      <Logo secondaryLogo={workspacePublicData?.logo} />
-      <Title animate={false}>{title}</Title>
-      {signInUpForm}
-    </>
-  );
-};
-
 export const SignInUpLoading = () => {
-  const { t } = useLingui();
-  const workspacePublicData = useRecoilValue(workspacePublicDataState);
-
-  const { workspaceInviteHash, workspace: workspaceFromInviteHash } =
-    useWorkspaceFromInviteHash();
-
-  const title = useMemo(() => {
-    if (isDefined(workspaceInviteHash)) {
-      return `Join ${workspaceFromInviteHash?.displayName ?? ''} team`;
-    }
-    const workspaceName = !isDefined(workspacePublicData?.displayName)
-      ? DEFAULT_WORKSPACE_NAME
-      : !isNonEmptyString(workspacePublicData?.displayName)
-        ? t`Your Workspace`
-        : workspacePublicData?.displayName;
-
-    return t`Welcome to ${workspaceName}`;
-  }, [
-    workspaceFromInviteHash?.displayName,
-    workspaceInviteHash,
-    workspacePublicData?.displayName,
-    t,
-  ]);
-
-  return (
-    <StandardContent
-      workspacePublicData={workspacePublicData}
-      signInUpForm={
-        <>
-          <p style={{ color: 'red', backgroundColor: 'blue' }}>
-            SignInUpLoading
-          </p>
-          <StyledContentContainer>
-            <StyledForm>
-              <MainButton
-                disabled={true}
-                title={t`Continue`}
-                type="submit"
-                variant={'primary'}
-                Icon={() => <Loader />}
-                fullWidth
-              />
-            </StyledForm>
-          </StyledContentContainer>
-        </>
-      }
-      title={title}
-    />
-  );
+  return <StyledContentContainer />;
 };
--- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
@ -1,30 +1,32 @@
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
-import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { RecordIndexContainerGater } from '@/object-record/record-index/components/RecordIndexContainerGater';
 import { PageContainer } from '@/ui/layout/page/components/PageContainer';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { isNonEmptyString, isUndefined } from '@sniptt/guards';
+import { isUndefined } from '@sniptt/guards';

 export const RecordIndexPage = () => {
-  const contextStoreCurrentViewId = useRecoilComponentValueV2(
-    contextStoreCurrentViewIdComponentState,
-    MAIN_CONTEXT_STORE_INSTANCE_ID,
-  );
-
  const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(
    contextStoreCurrentObjectMetadataItemIdComponentState,
    MAIN_CONTEXT_STORE_INSTANCE_ID,
  );

-  if (
-    isUndefined(contextStoreCurrentObjectMetadataItemId) ||
-    !isNonEmptyString(contextStoreCurrentViewId)
-  ) {
-    return null;
+  const { objectMetadataItems } = useObjectMetadataItems();
+
+  if (isUndefined(contextStoreCurrentObjectMetadataItemId)) {
+    return <></>;
  }

+  const objectMetadataItem = objectMetadataItems.find(
+    (objectMetadataItem) =>
+      objectMetadataItem.id === contextStoreCurrentObjectMetadataItemId,
+  );
+
+  if (isUndefined(objectMetadataItem)) {
+    return <></>;
+  }
  return (
    <PageContainer>
      <ContextStoreComponentInstanceContext.Provider
--- a/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
+++ b/packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx
@ -8,6 +8,7 @@ import { z } from 'zod';
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { useAuth } from '@/auth/hooks/useAuth';
+import { useRefreshObjectMetadataItems } from '@/object-metadata/hooks/useRefreshObjectMetadataItem';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { useSetNextOnboardingStatus } from '@/onboarding/hooks/useSetNextOnboardingStatus';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
@ -15,14 +16,14 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Trans, useLingui } from '@lingui/react/macro';
-import {
-  OnboardingStatus,
-  useActivateWorkspaceMutation,
-} from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
 import { H2Title } from 'twenty-ui/display';
 import { Loader } from 'twenty-ui/feedback';
 import { MainButton } from 'twenty-ui/input';
+import {
+  OnboardingStatus,
+  useActivateWorkspaceMutation,
+} from '~/generated/graphql';

 const StyledContentContainer = styled.div`
  width: 100%;
@ -42,6 +43,7 @@ export const CreateWorkspace = () => {
  const { enqueueSnackBar } = useSnackBar();
  const onboardingStatus = useOnboardingStatus();
  const setNextOnboardingStatus = useSetNextOnboardingStatus();
+  const { refreshObjectMetadataItems } = useRefreshObjectMetadataItems();

  const { loadCurrentUser } = useAuth();
  const [activateWorkspace] = useActivateWorkspaceMutation();
@ -81,6 +83,8 @@ export const CreateWorkspace = () => {
        if (isDefined(result.errors)) {
          throw result.errors ?? new Error(t`Unknown error`);
        }
+
+        await refreshObjectMetadataItems();
        await loadCurrentUser();
        setNextOnboardingStatus();
      } catch (error: any) {
@ -93,6 +97,7 @@ export const CreateWorkspace = () => {
      activateWorkspace,
      enqueueSnackBar,
      loadCurrentUser,
+      refreshObjectMetadataItems,
      setNextOnboardingStatus,
      t,
    ],