New behavior for editable fields (#1300)

* New behavior for editable fields

* fix

* fix

* fix coverage

* Add tests on NotFound

* fix

* fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/not-found/NotFound.tsx

@@ -0,0 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { MainButton } from '@/ui/button/components/MainButton';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { CompaniesMockMode } from '../companies/CompaniesMockMode';
+
+const StyledBackDrop = styled.div`
+  align-items: center;
+  backdrop-filter: ${({ theme }) => theme.blur.light};
+  background: ${({ theme }) => theme.background.transparent.secondary};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+`;
+
+const StyledTextContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(15)};
+`;
+
+const StyledButtonContainer = styled.div`
+  width: 200px;
+`;
+
+type StyledInfoProps = {
+  color: 'dark' | 'light';
+};
+
+const StyledInfo = styled.div<StyledInfoProps>`
+  color: ${(props) =>
+    props.color === 'light'
+      ? props.theme.font.color.extraLight
+      : props.theme.font.color.primary};
+  font-size: ${() => (useIsMobile() ? '2.5rem' : '4rem')};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export function NotFound() {
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <StyledBackDrop>
+        <StyledTextContainer>
+          <StyledInfo color="dark">404</StyledInfo>
+          <StyledInfo color="light">Page not found</StyledInfo>
+        </StyledTextContainer>
+        <StyledButtonContainer>
+          <MainButton
+            title="Back to content"
+            fullWidth
+            onClick={() => navigate('/')}
+          />
+        </StyledButtonContainer>
+      </StyledBackDrop>
+      <CompaniesMockMode />
+    </>
+  );
+}

front/src/pages/not-found/__stories__/NotFound.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/testing-library';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { PageDecoratorArgs } from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { NotFound } from '../NotFound';
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/NotFound/Default',
+  component: NotFound,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    routePath: 'toto-not-found',
+  },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof NotFound>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText('Page not found');
+  },
+};

front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -41,7 +41,7 @@ export const AddCompanyFromHeader: Story = {
 
       await button.click();
 
-      await canvas.findByText('Airbnb');
+      await canvas.findByText('Algolia');
     });
 
     await step('Change pipeline stage', async () => {

front/src/pages/settings/SettingsWorkspace.tsx

@@ -16,7 +16,7 @@ const StyledContainer = styled.div`
   width: 350px;
 `;
 
-export function SettingsWorksapce() {
+export function SettingsWorkspace() {
   return (
     <SubMenuTopBarContainer icon={<IconSettings size={16} />} title="Settings">
       <div>

front/src/pages/settings/__stories__/SettingsExperience.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsExperience } from '../SettingsExperience';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsExperience',
+  component: SettingsExperience,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/experience' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsExperience>;
+
+export const Default: Story = {};

front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { SettingsWorkspace } from '../SettingsWorkspace';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Settings/SettingsWorkspace',
+  component: SettingsWorkspace,
+  decorators: [PageDecorator],
+  args: { routePath: '/settings/workspace' },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export type Story = StoryObj<typeof SettingsWorkspace>;
+
+export const Default: Story = {};