Add "See all" widget action for ONE_TO_MANY relation fields (#17192)

FIELD widgets displaying ONE_TO_MANY relations now show a "See all" action button (arrow-up-right icon) that navigates to the record index with filtered relations. ### Demo https://github.com/user-attachments/assets/fd632553-70e3-4757-8f26-80aa8d2ce0d2 ### Changes - **`WidgetAction` type**: Added `'see-all'` to `WidgetActionId` - **`useWidgetActions` hook**: Returns `'see-all'` action for ONE_TO_MANY relation fields (position 0, before edit) - **`WidgetActionFieldSeeAll` component**: Renders the navigation button with: - `IconArrowUpRight` icon - Link computed using same logic as `RecordDetailRelationSection` - Hover visibility behavior matching existing edit button - **`WidgetActionRenderer`**: Added case for `'see-all'` action - **Storybook**: Added `OneToManyRelationFieldWidgetWithSeeAllButton` story verifying button visibility and well-formed link ### Link computation Uses the same filter URL pattern as `RecordDetailRelationSection`: ```typescript const filterQueryParams = { filter: { [relationFieldMetadataItem.name]: { [ViewFilterOperand.IS]: { selectedRecordIds: [targetRecord.id], }, }, }, viewId: indexViewId, }; const filterLinkHref = getAppPath( AppPath.RecordIndexPage, { objectNamePlural: relationObjectMetadataItem.namePlural }, filterQueryParams, ); ``` The "see-all" action is shown regardless of field read-only status since it's a navigation action, not an edit action.  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[RPL] Display "See all" widget action for FIELD widget displaying relations</issue_title> > <issue_description>The "See all" widget action is the button you can see in the top right corner in the following screen. We should redirect the user to the record index showing the filtered relations. > > <img width="1334" height="712" alt="Image" src="https://github.com/user-attachments/assets/c8aca25e-2136-43b3-8896-abd161a5693e" /> > > Example of interaction today in production: > > https://github.com/user-attachments/assets/3730301c-d04b-4195-b2fb-a51f8efee08a > > ## Technical details > > See `useWidgetActions` and `WidgetActionRenderer`. Use the `arrow-up-right` icon. > > See how link is computed here: https://github.com/twentyhq/twenty/blob/3cf7803ee1ae545add02f0c628a933618ce736d5/packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/relation/components/RecordDetailRelationSection.tsx#L193-L204. Reuse the same link. > > ## Acceptance criteria > > - The action should be displayed in addition to other actions that might be rendered today > - The action must only be displayed for ONE_TO_MANY relations > - Ensure you write at least one story to ensure the button is correctly displayed; the button should a well formed link</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details>  - Fixes twentyhq/core-team-issues#2064  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Devessier <29370468+Devessier@users.noreply.github.com> Co-authored-by: Devessier <baptiste@devessier.fr>
2026-01-19 10:09:02 +01:00
parent 92a080b704
commit 72e89d5c6b
5 changed files with 291 additions and 2 deletions
@@ -0,0 +1,132 @@
+import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
+import { type FieldRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
+import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
+import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/useResolveFieldMetadataIdFromNameOrId';
+import { isFieldWidget } from '@/page-layout/widgets/field/utils/isFieldWidget';
+import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
+import { AppPath, ViewFilterOperand } from 'twenty-shared/types';
+import { getAppPath, isDefined } from 'twenty-shared/utils';
+import { IconArrowUpRight } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { RelationType } from '~/generated-metadata/graphql';
+import { coreIndexViewIdFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreIndexViewIdFromObjectMetadataItemFamilySelector';
+import { Link } from 'react-router-dom';
+
+const StyledLink = styled(Link)`
+  display: flex;
+  text-decoration: none;
+`;
+
+const StyledSeeAllButton = styled(LightIconButton)<{ isMobile: boolean }>`
+  ${({ theme, isMobile }) => css`
+    opacity: ${isMobile ? 1 : 0};
+    pointer-events: none;
+    transition: opacity ${theme.animation.duration.instant}s ease;
+  `}
+
+  .widget:hover & {
+    opacity: 1;
+    pointer-events: auto;
+  }
+`;
+
+export const WidgetActionFieldSeeAll = () => {
+  const widget = useCurrentWidget();
+  const targetRecord = useTargetRecord();
+  const isMobile = useIsMobile();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: targetRecord.targetObjectNameSingular,
+  });
+
+  const fieldMetadataId = isFieldWidget(widget)
+    ? widget.configuration.fieldMetadataId
+    : undefined;
+
+  const resolvedFieldMetadataId = useResolveFieldMetadataIdFromNameOrId(
+    fieldMetadataId ?? '',
+  );
+
+  const { fieldMetadataItem } = useFieldMetadataItemById(
+    resolvedFieldMetadataId ?? '',
+  );
+
+  const fieldDefinition = isDefined(fieldMetadataItem)
+    ? formatFieldMetadataItemAsColumnDefinition({
+        field: fieldMetadataItem,
+        position: 0,
+        objectMetadataItem,
+        showLabel: true,
+        labelWidth: 90,
+      })
+    : null;
+
+  const relationMetadata =
+    isDefined(fieldDefinition) && isFieldRelation(fieldDefinition)
+      ? (fieldDefinition.metadata as FieldRelationMetadata)
+      : null;
+
+  const { objectMetadataItems } = useObjectMetadataItems();
+
+  const relationObjectMetadataItem = objectMetadataItems.find(
+    (item) =>
+      item.nameSingular ===
+      relationMetadata?.relationObjectMetadataNameSingular,
+  );
+
+  const relationFieldMetadataItem = relationObjectMetadataItem?.fields.find(
+    ({ id }) => id === relationMetadata?.relationFieldMetadataId,
+  );
+
+  const indexViewId = useRecoilValue(
+    coreIndexViewIdFromObjectMetadataItemFamilySelector({
+      objectMetadataItemId: relationObjectMetadataItem?.id ?? '',
+    }),
+  );
+
+  if (
+    !isDefined(relationMetadata) ||
+    relationMetadata.relationType !== RelationType.ONE_TO_MANY ||
+    !isDefined(relationFieldMetadataItem) ||
+    !isDefined(relationObjectMetadataItem)
+  ) {
+    return null;
+  }
+
+  const filterQueryParams = {
+    filter: {
+      [relationFieldMetadataItem.name]: {
+        [ViewFilterOperand.IS]: {
+          selectedRecordIds: [targetRecord.id],
+        },
+      },
+    },
+    viewId: indexViewId,
+  };
+
+  const filterLinkHref = getAppPath(
+    AppPath.RecordIndexPage,
+    {
+      objectNamePlural: relationObjectMetadataItem.namePlural,
+    },
+    filterQueryParams,
+  );
+
+  return (
+    <StyledLink to={filterLinkHref} data-testid="widget-see-all-link">
+      <StyledSeeAllButton
+        Icon={IconArrowUpRight}
+        accent="secondary"
+        isMobile={isMobile}
+      />
+    </StyledLink>
+  );
+};
@@ -3,6 +3,7 @@ import { CustomError } from 'twenty-shared/utils';
 import { WidgetType } from '~/generated/graphql';
 import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { WidgetActionFieldEdit } from './WidgetActionFieldEdit';
+import { WidgetActionFieldSeeAll } from './WidgetActionFieldSeeAll';

 type WidgetActionRendererProps = {
  action: WidgetAction;
@@ -15,6 +16,10 @@ export const WidgetActionRenderer = ({ action }: WidgetActionRendererProps) => {
    return <WidgetActionFieldEdit />;
  }

+  if (action.id === 'see-all' && widget.type === WidgetType.FIELD) {
+    return <WidgetActionFieldSeeAll />;
+  }
+
  throw new CustomError(
    `Unsupported action renderer for action id: ${action.id}`,
    'UNSUPPORTED_WIDGET_ACTION_RENDERER',
@@ -7,6 +7,7 @@ import { type MockedResponse } from '@apollo/client/testing';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router-dom';
 import { type MutableSnapshot } from 'recoil';
+import { expect, within } from 'storybook/test';
 import { CatalogDecorator, type CatalogStory } from 'twenty-ui/testing';

 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
@@ -1197,6 +1198,135 @@ export const WithOneToManyRelationFieldWidget: Story = {
  },
 };

+export const OneToManyRelationFieldWidgetWithSeeAllButton: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A ONE_TO_MANY relation field widget with visible "See all" button and a well-formed link.',
+      },
+    },
+  },
+  render: () => {
+    const widget: PageLayoutWidget = {
+      __typename: 'PageLayoutWidget',
+      id: WIDGET_ID_ONE_TO_MANY_RELATION,
+      pageLayoutTabId: TAB_ID_OVERVIEW,
+      type: WidgetType.FIELD,
+      title: 'People',
+      objectMetadataId: companyObjectMetadataItem.id,
+      gridPosition: {
+        __typename: 'GridPosition',
+        row: 0,
+        column: 0,
+        rowSpan: 1,
+        columnSpan: 2,
+      },
+      configuration: {
+        __typename: 'FieldConfiguration',
+        configurationType: WidgetConfigurationType.FIELD,
+        fieldMetadataId: companyPeopleField.id,
+        layout: 'FIELD',
+      },
+      createdAt: '2024-01-01T00:00:00Z',
+      updatedAt: '2024-01-01T00:00:00Z',
+      deletedAt: null,
+    };
+
+    const initializeState = (snapshot: MutableSnapshot) => {
+      snapshot.set(objectMetadataItemsState, generatedMockObjectMetadataItems);
+      snapshot.set(shouldAppBeLoadingState, false);
+      const pageLayoutData = createPageLayoutWithWidget(
+        widget,
+        PageLayoutType.RECORD_PAGE,
+      );
+      snapshot.set(
+        pageLayoutPersistedComponentState.atomFamily({
+          instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+        }),
+        pageLayoutData,
+      );
+      snapshot.set(
+        pageLayoutDraftComponentState.atomFamily({
+          instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+        }),
+        pageLayoutData,
+      );
+      snapshot.set(
+        isPageLayoutInEditModeComponentState.atomFamily({
+          instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+        }),
+        false,
+      );
+      snapshot.set(recordStoreFamilyState(TEST_RECORD_ID), mockCompanyRecord);
+      snapshot.set(
+        recordStoreFamilyState(TEST_PERSON_RECORD_ID),
+        mockPersonRecord,
+      );
+      // Set hover state to make the "See all" button visible
+      snapshot.set(
+        widgetCardHoveredComponentFamilyState.atomFamily({
+          instanceId: PAGE_LAYOUT_TEST_INSTANCE_ID,
+          familyKey: WIDGET_ID_ONE_TO_MANY_RELATION,
+        }),
+        true,
+      );
+    };
+
+    return (
+      <div style={{ width: '400px', padding: '20px' }}>
+        <JestMetadataAndApolloMocksWrapper>
+          <CoreClientProviderWrapper>
+            <PageLayoutTestWrapper initializeState={initializeState}>
+              <LayoutRenderingProvider
+                value={{
+                  isInRightDrawer: false,
+                  layoutType: PageLayoutType.RECORD_PAGE,
+                  targetRecordIdentifier: {
+                    id: TEST_RECORD_ID,
+                    targetObjectNameSingular:
+                      companyObjectMetadataItem.nameSingular,
+                  },
+                }}
+              >
+                <PageLayoutContentProvider
+                  value={{
+                    layoutMode: 'vertical-list',
+                    tabId: TAB_ID_OVERVIEW,
+                  }}
+                >
+                  <WidgetComponentInstanceContext.Provider
+                    value={{
+                      instanceId: WIDGET_ID_ONE_TO_MANY_RELATION,
+                    }}
+                  >
+                    <WidgetRenderer widget={widget} />
+                  </WidgetComponentInstanceContext.Provider>
+                </PageLayoutContentProvider>
+              </LayoutRenderingProvider>
+            </PageLayoutTestWrapper>
+          </CoreClientProviderWrapper>
+        </JestMetadataAndApolloMocksWrapper>
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Find the "See all" link button by its test id
+    const seeAllLink = await canvas.findByTestId('widget-see-all-link');
+
+    // Verify the button is visible
+    expect(seeAllLink).toBeVisible();
+
+    // Verify it has a well-formed link (should contain the filter query params)
+    expect(seeAllLink).toHaveAttribute('href');
+    const href = seeAllLink.getAttribute('href');
+    expect(href).toContain('/objects/people');
+    expect(href).toContain('filter');
+  },
+};
+
 export const OnMobile: Story = {
  parameters: {
    viewport: {
@@ -1,8 +1,10 @@
 import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
 import { useIsRecordReadOnly } from '@/object-record/read-only/hooks/useIsRecordReadOnly';
 import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly';
+import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
 import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/useResolveFieldMetadataIdFromNameOrId';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { isFieldWidget } from '@/page-layout/widgets/field/utils/isFieldWidget';
@@ -10,6 +12,7 @@ import { type WidgetAction } from '@/page-layout/widgets/types/WidgetAction';
 import { getObjectPermissionsFromMapByObjectMetadataId } from '@/settings/roles/role-permissions/objects-permissions/utils/getObjectPermissionsFromMapByObjectMetadataId';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { isDefined } from 'twenty-shared/utils';
+import { RelationType } from '~/generated-metadata/graphql';

 type UseWidgetActionsParams = {
  widget: PageLayoutWidget;
@@ -53,6 +56,25 @@ export const useWidgetActions = ({
    return actions;
  }

+  const fieldDefinition = formatFieldMetadataItemAsColumnDefinition({
+    field: fieldMetadataItem,
+    position: 0,
+    objectMetadataItem,
+    showLabel: true,
+    labelWidth: 90,
+  });
+
+  const isOneToManyRelation =
+    isFieldRelation(fieldDefinition) &&
+    fieldDefinition.metadata.relationType === RelationType.ONE_TO_MANY;
+
+  if (isOneToManyRelation) {
+    actions.push({
+      id: 'see-all',
+      position: 0,
+    });
+  }
+
  const isFieldReadOnly = isRecordFieldReadOnly({
    isRecordReadOnly,
    objectPermissions: getObjectPermissionsFromMapByObjectMetadataId({
@@ -68,7 +90,7 @@ export const useWidgetActions = ({
  if (!isFieldReadOnly) {
    actions.push({
      id: 'edit',
-      position: 0,
+      position: 1,
    });
  }

@@ -1,4 +1,4 @@
-export type WidgetActionId = 'edit';
+export type WidgetActionId = 'edit' | 'see-all';

 export type WidgetAction = {
  id: WidgetActionId;