diff --git a/front/src/App.tsx b/front/src/App.tsx index 9e101d4b8..fbf9030b7 100644 --- a/front/src/App.tsx +++ b/front/src/App.tsx @@ -15,12 +15,12 @@ import { People } from '~/pages/people/People'; import { PersonShow } from '~/pages/people/PersonShow'; import { SettingsExperience } from '~/pages/settings/SettingsExperience'; import { SettingsProfile } from '~/pages/settings/SettingsProfile'; -import { SettingsWorksapce } from '~/pages/settings/SettingsWorkspace'; +import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace'; import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers'; import { Tasks } from '~/pages/tasks/Tasks'; import { AppInternalHooks } from '~/sync-hooks/AppInternalHooks'; -import { NotFound } from './NotFound'; +import { NotFound } from './pages/not-found/NotFound'; // TEMP FEATURE FLAG FOR VIEW FIELDS export const ACTIVATE_VIEW_FIELDS = true; @@ -64,7 +64,7 @@ export function App() { /> } + element={} /> } diff --git a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx index c48ed42ab..8a5526511 100644 --- a/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx +++ b/front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx @@ -36,6 +36,7 @@ export function ActivityRelationEditableField({ activity }: OwnProps) { displayModeContent={ } + isDisplayModeContentEmpty={activity?.activityTargets?.length === 0} /> diff --git a/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts b/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts deleted file mode 100644 index f6cf662b8..000000000 --- a/front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useRecoilState } from 'recoil'; - -import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer'; -import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope'; -import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages'; -import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; - -import { activityTargetableEntityArrayState } from '../states/activityTargetableEntityArrayState'; -import { ActivityTargetableEntity } from '../types/ActivityTargetableEntity'; - -// TODO: refactor with recoil callback to avoid rerender -export function useOpenTimelineRightDrawer() { - const { openRightDrawer } = useRightDrawer(); - const [, setActivityTargetableEntityArray] = useRecoilState( - activityTargetableEntityArrayState, - ); - const setHotkeyScope = useSetHotkeyScope(); - - return function openTimelineRightDrawer( - activityTargetableEntityArray: ActivityTargetableEntity[], - ) { - setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); - setActivityTargetableEntityArray(activityTargetableEntityArray); - openRightDrawer(RightDrawerPages.Timeline); - }; -} diff --git a/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx b/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx deleted file mode 100644 index bbbcdeb25..000000000 --- a/front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useRecoilValue } from 'recoil'; - -import { activityTargetableEntityArrayState } from '@/activities/states/activityTargetableEntityArrayState'; -import { Timeline } from '@/activities/timeline/components/Timeline'; - -export function RightDrawerTimeline() { - const activityTargetableEntityArray = useRecoilValue( - activityTargetableEntityArrayState, - ); - - return ( - <> - {activityTargetableEntityArray.map((targetableEntity) => ( - - ))} - - ); -} diff --git a/front/src/modules/ui/editable-field/components/EditableField.tsx b/front/src/modules/ui/editable-field/components/EditableField.tsx index 420cca4d3..c1eee60b3 100644 --- a/front/src/modules/ui/editable-field/components/EditableField.tsx +++ b/front/src/modules/ui/editable-field/components/EditableField.tsx @@ -34,7 +34,6 @@ const StyledLabelAndIconContainer = styled.div` const StyledValueContainer = styled.div` display: flex; - flex: 1; max-width: calc(100% - ${({ theme }) => theme.spacing(4)}); `; @@ -46,21 +45,28 @@ const StyledLabel = styled.div>` `; const StyledEditButtonContainer = styled(motion.div)` - position: absolute; - right: 0; + align-items: center; + display: flex; `; -export const StyledEditableFieldBaseContainer = styled.div` +const StyledClickableContainer = styled.div` + cursor: pointer; + display: flex; + gap: ${({ theme }) => theme.spacing(1)}; + width: 100%; +`; + +const StyledEditableFieldBaseContainer = styled.div` align-items: center; box-sizing: border-box; display: flex; + gap: ${({ theme }) => theme.spacing(1)}; - justify-content: space-between; position: relative; - user-select: none; + width: 100%; `; @@ -71,11 +77,11 @@ type OwnProps = { useEditButton?: boolean; editModeContent?: React.ReactNode; displayModeContentOnly?: boolean; - disableHoverEffect?: boolean; displayModeContent: React.ReactNode; customEditHotkeyScope?: HotkeyScope; isDisplayModeContentEmpty?: boolean; isDisplayModeFixHeight?: boolean; + disableHoverEffect?: boolean; onSubmit?: () => void; onCancel?: () => void; }; @@ -88,10 +94,10 @@ export function EditableField({ editModeContent, displayModeContent, customEditHotkeyScope, - disableHoverEffect, isDisplayModeContentEmpty, displayModeContentOnly, isDisplayModeFixHeight, + disableHoverEffect, onSubmit, onCancel, }: OwnProps) { @@ -124,33 +130,35 @@ export function EditableField({ {label} )} + {isFieldInEditMode && !displayModeContentOnly ? ( {editModeContent} ) : ( - - {displayModeContent} - + + + {displayModeContent} + + {showEditButton && ( + + + + )} + )} - {showEditButton && ( - - - - )} ); } diff --git a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx index cafc1338c..b75a1aabd 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx @@ -4,10 +4,10 @@ import styled from '@emotion/styled'; const StyledEditableFieldNormalModeOuterContainer = styled.div< Pick< OwnProps, - | 'disableClick' | 'isDisplayModeContentEmpty' | 'disableHoverEffect' | 'isDisplayModeFixHeight' + | 'isHovered' > >` align-items: center; @@ -20,26 +20,13 @@ const StyledEditableFieldNormalModeOuterContainer = styled.div< padding: ${({ theme }) => theme.spacing(1)}; ${(props) => { - if (!props.isDisplayModeContentEmpty) { + if (props.isHovered) { return css` - width: fit-content; - `; - } - }} + background-color: ${!props.disableHoverEffect + ? props.theme.background.transparent.lighter + : 'transparent'}; - ${(props) => { - if (props.disableClick) { - return css` - cursor: default; - `; - } else { - return css` cursor: pointer; - - &:hover { - background-color: ${!props.disableHoverEffect && - props.theme.background.transparent.light}; - } `; } }} @@ -64,28 +51,25 @@ const StyledEmptyField = styled.div` `; type OwnProps = { - disableClick?: boolean; - onClick?: () => void; isDisplayModeContentEmpty?: boolean; disableHoverEffect?: boolean; isDisplayModeFixHeight?: boolean; + isHovered?: boolean; }; export function EditableFieldDisplayMode({ children, - disableClick, - onClick, isDisplayModeContentEmpty, disableHoverEffect, isDisplayModeFixHeight, + isHovered, }: React.PropsWithChildren) { return ( {isDisplayModeContentEmpty || !children ? ( diff --git a/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx b/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx index e66dc3d25..87f0f147e 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx @@ -1,30 +1,8 @@ -import styled from '@emotion/styled'; - import { IconButton } from '@/ui/button/components/IconButton'; import { IconPencil } from '@/ui/icon'; -import { overlayBackground } from '@/ui/theme/constants/effects'; import { useEditableField } from '../hooks/useEditableField'; -export const StyledEditableFieldEditButton = styled.div` - align-items: center; - border: 1px solid ${({ theme }) => theme.border.color.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - - color: ${({ theme }) => theme.font.color.tertiary}; - - cursor: pointer; - display: flex; - height: 20px; - justify-content: center; - - margin-left: -2px; - width: 20px; - - z-index: 1; - ${overlayBackground} -`; - export function EditableFieldEditButton() { const { openEditableField } = useEditableField(); diff --git a/front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx b/front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx index b3ea765bc..9b1d73a9f 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx @@ -11,8 +11,6 @@ const StyledEditableFieldEditModeContainer = styled.div` margin-left: -${({ theme }) => theme.spacing(1)}; position: relative; - - width: 100%; z-index: 10; `; diff --git a/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx b/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx index 726f7efe3..29d5392da 100644 --- a/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx +++ b/front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx @@ -37,6 +37,7 @@ export function GenericEditableURLField() { editModeContent={} displayModeContent={} isDisplayModeContentEmpty={!fieldValue} + isDisplayModeFixHeight /> ); diff --git a/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx b/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx index 9ddae09e5..0d5b20129 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx @@ -3,7 +3,6 @@ import { useRecoilState } from 'recoil'; import { RightDrawerCreateActivity } from '@/activities/right-drawer/components/create/RightDrawerCreateActivity'; import { RightDrawerEditActivity } from '@/activities/right-drawer/components/edit/RightDrawerEditActivity'; -import { RightDrawerTimeline } from '@/activities/right-drawer/components/RightDrawerTimeline'; import { rightDrawerPageState } from '../states/rightDrawerPageState'; import { RightDrawerPages } from '../types/RightDrawerPages'; @@ -33,9 +32,6 @@ export function RightDrawerRouter() { let page = <>; switch (rightDrawerPage) { - case RightDrawerPages.Timeline: - page = ; - break; case RightDrawerPages.CreateActivity: page = ; break; diff --git a/front/src/modules/ui/right-drawer/types/RightDrawerPages.ts b/front/src/modules/ui/right-drawer/types/RightDrawerPages.ts index d793aa7fb..e928bd7fa 100644 --- a/front/src/modules/ui/right-drawer/types/RightDrawerPages.ts +++ b/front/src/modules/ui/right-drawer/types/RightDrawerPages.ts @@ -1,5 +1,4 @@ export enum RightDrawerPages { - Timeline = 'timeline', CreateActivity = 'create-activity', EditActivity = 'edit-activity', } diff --git a/front/src/NotFound.tsx b/front/src/pages/not-found/NotFound.tsx similarity index 95% rename from front/src/NotFound.tsx rename to front/src/pages/not-found/NotFound.tsx index a991d19f0..2895b590e 100644 --- a/front/src/NotFound.tsx +++ b/front/src/pages/not-found/NotFound.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { MainButton } from '@/ui/button/components/MainButton'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; -import { CompaniesMockMode } from './pages/companies/CompaniesMockMode'; +import { CompaniesMockMode } from '../companies/CompaniesMockMode'; const StyledBackDrop = styled.div` align-items: center; diff --git a/front/src/pages/not-found/__stories__/NotFound.stories.tsx b/front/src/pages/not-found/__stories__/NotFound.stories.tsx new file mode 100644 index 000000000..6d0000048 --- /dev/null +++ b/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 = { + 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; + +export const Default: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await canvas.findByText('Page not found'); + }, +}; diff --git a/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx b/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx index 6cfc30ed9..b1b2e0ccc 100644 --- a/front/src/pages/opportunities/__stories__/Opportunities.stories.tsx +++ b/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 () => { diff --git a/front/src/pages/settings/SettingsWorkspace.tsx b/front/src/pages/settings/SettingsWorkspace.tsx index 5ecc2d2e5..c86b8d130 100644 --- a/front/src/pages/settings/SettingsWorkspace.tsx +++ b/front/src/pages/settings/SettingsWorkspace.tsx @@ -16,7 +16,7 @@ const StyledContainer = styled.div` width: 350px; `; -export function SettingsWorksapce() { +export function SettingsWorkspace() { return ( } title="Settings">
diff --git a/front/src/pages/settings/__stories__/SettingsExperience.stories.tsx b/front/src/pages/settings/__stories__/SettingsExperience.stories.tsx new file mode 100644 index 000000000..a83de4e83 --- /dev/null +++ b/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 = { + 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; + +export const Default: Story = {}; diff --git a/front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx b/front/src/pages/settings/__stories__/SettingsWorkspace.stories.tsx new file mode 100644 index 000000000..7d27e0bdb --- /dev/null +++ b/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 = { + 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; + +export const Default: Story = {};