From 72e89d5c6b58a6dd67b6d31499959f847eee4b43 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Mon, 19 Jan 2026 10:09:02 +0100
Subject: [PATCH] Add "See all" widget action for ONE_TO_MANY relation fields
(#17192)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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.
Original prompt
>
> ----
>
> *This section details on the original issue you should resolve*
>
> [RPL] Display "See all" widget action for FIELD widget
displaying relations
> 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.
>
> 
>
> 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
>
> ## Comments on the Issue (you are @copilot in this section)
>
>
>
>
- 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
---
.../components/WidgetActionFieldSeeAll.tsx | 132 ++++++++++++++++++
.../components/WidgetActionRenderer.tsx | 5 +
.../__stories__/WidgetRenderer.stories.tsx | 130 +++++++++++++++++
.../widgets/hooks/useWidgetActions.ts | 24 +++-
.../page-layout/widgets/types/WidgetAction.ts | 2 +-
5 files changed, 291 insertions(+), 2 deletions(-)
create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
new file mode 100644
index 0000000000..d99973742c
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx
@@ -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 (
+
+
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionRenderer.tsx
index 2d4e16f82a..929ed12437 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionRenderer.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionRenderer.tsx
@@ -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 ;
}
+ if (action.id === 'see-all' && widget.type === WidgetType.FIELD) {
+ return ;
+ }
+
throw new CustomError(
`Unsupported action renderer for action id: ${action.id}`,
'UNSUPPORTED_WIDGET_ACTION_RENDERER',
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
index 76b764ca65..3817568b4a 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+