8964 add feature flag is page header v2 enabled (#8995)

Closes #8964
2024-12-22 19:41:53 +03:00 · 2024-12-10 10:56:28 +01:00 · 2024-12-10 10:56:28 +01:00 · d70987653b
commit d70987653b
parent 228b7386ea
9 changed files with 160 additions and 48 deletions
--- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
@ -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;
@ -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'}
+          onClick={onClick}
+        />
+      )}
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@ -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';
@ -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} />
@ -53,7 +58,7 @@ export const RecordIndexPageHeader = () => {
        ) : (
          <RecordIndexPageKanbanAddButton />
        ))}
-      <PageHeaderOpenCommandMenuButton />
+      {isPageHeaderV2Enabled && <PageHeaderOpenCommandMenuButton />}
    </PageHeader>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@ -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"
+          variant="secondary"
+          onClick={openCommandMenu}
+        />
+      )}
+    </>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
@ -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}
+        />
+      )}
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
@ -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;

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

+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
  return (
    <StyledTopBarContainer>
      <StyledLeftContainer>
@ -129,6 +134,24 @@ export const PageHeader = ({
        )}

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

      <StyledPageActionContainer>
-        {hasPaginationButtons && (
+        {isPageHeaderV2Enabled && hasPaginationButtons && (
          <>
            <IconButton
              Icon={IconChevronUp}
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
@ -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';
@ -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';

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

+  const isPageHeaderV2Enabled = useIsFeatureEnabled(
+    'IS_PAGE_HEADER_V2_ENABLED',
+  );
+
  if (
    activityTargetObject.targetObjectNameSingular ===
      CoreObjectNameSingular.Task ||
@ -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"
+            />
+          )
        }
        dropdownComponents={
          <DropdownMenu>
--- a/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
+++ b/packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
@ -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';
--- a/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
+++ b/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
@ -95,6 +95,11 @@ export const seedFeatureFlags = async (
        workspaceId: workspaceId,
        value: true,
      },
+      {
+        key: FeatureFlagKey.IsPageHeaderV2Enabled,
+        workspaceId: workspaceId,
+        value: true,
+      },
    ])
    .execute();
 };
--- a/packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts
+++ b/packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts
@ -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',
 }