Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

8964 add feature flag is page header v2 enabled #8995

Merged
merged 2 commits into from
Dec 10, 2024
Merged

8964 add feature flag is page header v2 enabled #8995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7471834
add feature flag
bosiraphael Dec 9, 2024
92032af
use feature flag to gate new behavior
bosiraphael Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 28 additions & 11 deletions packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Button, IconHeart } from 'twenty-ui';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { Button, IconButton, IconHeart } from 'twenty-ui';

type PageFavoriteButtonProps = {
isFavorite: boolean;
Expand All @@ -10,16 +11,32 @@ export const PageFavoriteButton = ({
onClick,
}: PageFavoriteButtonProps) => {
const title = isFavorite ? 'Remove from favorites' : 'Add to favorites';
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);
return (
<Button
Icon={IconHeart}
dataTestId="favorite-button"
size="small"
variant="secondary"
accent={isFavorite ? 'danger' : 'default'}
title={title}
onClick={onClick}
ariaLabel={title}
/>
<>
{isPageHeaderV2Enabled ? (
<Button
Icon={IconHeart}
dataTestId="favorite-button"
size="small"
variant="secondary"
accent={isFavorite ? 'danger' : 'default'}
title={title}
onClick={onClick}
ariaLabel={title}
/>
) : (
<IconButton
Icon={IconHeart}
size="medium"
variant="secondary"
data-testid="add-button"
accent={isFavorite ? 'danger' : 'default'}
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
onClick={onClick}
/>
)}
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
</>
);
};
7 changes: 6 additions & 1 deletion .../twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { PageAddButton } from '@/ui/layout/page/components/PageAddButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/components/PageHotkeysEffect';
import { ViewType } from '@/views/types/ViewType';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { useIcons } from 'twenty-ui';
Expand Down Expand Up @@ -44,6 +45,10 @@ export const RecordIndexPageHeader = () => {
onCreateRecord();
};

const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);

return (
<PageHeader title={pageHeaderTitle} Icon={Icon}>
<PageHotkeysEffect onAddButtonClick={handleAddButtonClick} />
Expand All @@ -53,7 +58,7 @@ export const RecordIndexPageHeader = () => {
) : (
<RecordIndexPageKanbanAddButton />
))}
<PageHeaderOpenCommandMenuButton />
{isPageHeaderV2Enabled && <PageHeaderOpenCommandMenuButton />}
</PageHeader>
);
};
40 changes: 29 additions & 11 deletions ...ty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,38 @@
import { Button, IconDotsVertical } from 'twenty-ui';
import { Button, IconButton, IconDotsVertical } from 'twenty-ui';

import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';

export const PageHeaderOpenCommandMenuButton = () => {
const { openCommandMenu } = useCommandMenu();

const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);

return (
<Button
Icon={IconDotsVertical}
dataTestId="page-header-open-command-menu-button"
size="small"
variant="secondary"
accent="default"
shortcut="⌘K"
ariaLabel="Open command menu"
onClick={openCommandMenu}
/>
<>
{isPageHeaderV2Enabled ? (
<Button
Icon={IconDotsVertical}
dataTestId="page-header-open-command-menu-button"
size="small"
variant="secondary"
accent="default"
shortcut="⌘K"
ariaLabel="Open command menu"
onClick={openCommandMenu}
/>
) : (
<IconButton
Icon={IconDotsVertical}
size="medium"
dataTestId="more-showpage-button"
accent="default"
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
variant="secondary"
onClick={openCommandMenu}
/>
)}
</>
);
};
46 changes: 33 additions & 13 deletions packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,38 @@
import { Button, IconPlus } from 'twenty-ui';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { Button, IconButton, IconPlus } from 'twenty-ui';

type PageAddButtonProps = {
onClick?: () => void;
};

export const PageAddButton = ({ onClick }: PageAddButtonProps) => (
<Button
Icon={IconPlus}
dataTestId="add-button"
size="small"
variant="secondary"
accent="default"
title="New record"
onClick={onClick}
ariaLabel="New record"
/>
);
export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);
return (
<>
{isPageHeaderV2Enabled ? (
<Button
Icon={IconPlus}
dataTestId="add-button"
size="small"
variant="secondary"
accent="default"
title="New record"
onClick={onClick}
ariaLabel="New record"
/>
) : (
<IconButton
Icon={IconPlus}
dataTestId="add-button"
size="medium"
variant="secondary"
accent="default"
ariaLabel="Add"
onClick={onClick}
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
/>
)}
</>
);
};
25 changes: 24 additions & 1 deletion packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawe

import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';

export const PAGE_BAR_MIN_HEIGHT = 40;

Expand Down Expand Up @@ -111,6 +112,10 @@ export const PageHeader = ({
isNavigationDrawerExpandedState,
);

const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);

return (
<StyledTopBarContainer>
<StyledLeftContainer>
Expand All @@ -129,6 +134,24 @@ export const PageHeader = ({
)}

<StyledTopBarIconStyledTitleContainer>
{!isPageHeaderV2Enabled && hasPaginationButtons && (
<>
<IconButton
Icon={IconChevronUp}
size="small"
variant="secondary"
disabled={!hasPreviousRecord}
onClick={() => navigateToPreviousRecord?.()}
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
/>
<IconButton
Icon={IconChevronDown}
size="small"
variant="secondary"
disabled={!hasNextRecord}
onClick={() => navigateToNextRecord?.()}
/>
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
</>
)}
{Icon && <Icon size={theme.icon.size.md} />}
{title && (
<StyledTitleContainer data-testid="top-bar-title">
Expand All @@ -143,7 +166,7 @@ export const PageHeader = ({
</StyledLeftContainer>

<StyledPageActionContainer>
{hasPaginationButtons && (
{isPageHeaderV2Enabled && hasPaginationButtons && (
<>
<IconButton
Icon={IconChevronUp}
Expand Down
42 changes: 32 additions & 10 deletions packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import styled from '@emotion/styled';
import { Button, IconCheckbox, IconNotes, IconPlus, MenuItem } from 'twenty-ui';
import {
Button,
IconButton,
IconCheckbox,
IconNotes,
IconPlus,
MenuItem,
} from 'twenty-ui';

import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
Expand All @@ -10,6 +17,7 @@ import { SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID } from '@/ui/layout/show-page/constant

import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { isWorkflowSubObjectMetadata } from '@/object-metadata/utils/isWorkflowSubObjectMetadata';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { Dropdown } from '../../dropdown/components/Dropdown';
import { DropdownMenu } from '../../dropdown/components/DropdownMenu';

Expand Down Expand Up @@ -45,6 +53,10 @@ export const ShowPageAddButton = ({
closeDropdown();
};

const isPageHeaderV2Enabled = useIsFeatureEnabled(
'IS_PAGE_HEADER_V2_ENABLED',
);

if (
activityTargetObject.targetObjectNameSingular ===
CoreObjectNameSingular.Task ||
Expand All @@ -60,15 +72,25 @@ export const ShowPageAddButton = ({
<Dropdown
dropdownId={SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID}
clickableComponent={
<Button
Icon={IconPlus}
dataTestId="add-button"
size="small"
variant="secondary"
accent="default"
title="New note/task"
ariaLabel="New note/task"
/>
isPageHeaderV2Enabled ? (
<Button
Icon={IconPlus}
dataTestId="add-button"
size="small"
variant="secondary"
accent="default"
title="New note/task"
ariaLabel="New note/task"
/>
) : (
<IconButton
Icon={IconPlus}
size="medium"
dataTestId="add-showpage-button"
accent="default"
variant="secondary"
/>
bosiraphael marked this conversation as resolved.
Show resolved Hide resolved
)
}
dropdownComponents={
<DropdownMenu>
Expand Down
3 changes: 2 additions & 1 deletion packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ export type FeatureFlagKey =
| 'IS_ADVANCED_FILTERS_ENABLED'
| 'IS_AGGREGATE_QUERY_ENABLED'
| 'IS_FAVORITE_FOLDER_ENABLED'
| 'IS_VIEW_GROUPS_ENABLED';
| 'IS_VIEW_GROUPS_ENABLED'
| 'IS_PAGE_HEADER_V2_ENABLED';
5 changes: 5 additions & 0 deletions packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,11 @@ export const seedFeatureFlags = async (
workspaceId: workspaceId,
value: true,
},
{
key: FeatureFlagKey.IsPageHeaderV2Enabled,
workspaceId: workspaceId,
value: true,
},
])
.execute();
};
Expand Down
1 change: 1 addition & 0 deletions packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ export enum FeatureFlagKey {
IsFavoriteFolderEnabled = 'IS_FAVORITE_FOLDER_ENABLED',
IsFavoriteFolderEntityEnabled = 'IS_FAVORITE_FOLDER_ENTITY_ENABLED',
IsViewGroupsEnabled = 'IS_VIEW_GROUPS_ENABLED',
IsPageHeaderV2Enabled = 'IS_PAGE_HEADER_V2_ENABLED',
}
Loading