feat: kanban, calendar and group-by table layouts for dashboard view widgets (#22963)

## Context Dashboard view widgets previously only rendered flat tables. This PR ships the full feature: **Table with group-by**, **Kanban**, and **Calendar** layouts for dashboard view widgets — server API + frontend, end-to-end. (Originally staged as a 4-PR stack — #22966, #22967, #22968 — consolidated here per review.) ## Server / API - **View typing.** Adds `KANBAN_WIDGET` and `CALENDAR_WIDGET` to `ViewType` (following the `TABLE_WIDGET` precedent) so widget-backing views keep their layout in `view.type` while staying excluded from record-index pickers. Shared `getViewLayoutFromViewType()` maps widget types to their base layout; `isWidgetViewType()` centralizes the exclusions that were previously hardcoded per-site. - **Migrations.** Two fast instance commands (**2.23**): `ALTER TYPE core.view_type_enum ADD VALUE` for both values, and a widened `CHK_VIEW_CALENDAR_INTEGRITY` constraint covering `CALENDAR_WIDGET` (entity `@Check` updated for fresh installs). - **Validation.** `FlatViewValidatorService` keys kanban/calendar validation on the mapped layout, so widget views get the same invariants as index views (kanban needs a groupable group-by field; calendar needs a date field + layout). Calendar widget views default to month; a non-month (DAY/WEEK) layout is rejected at the API level **unless** the `IS_CALENDAR_WEEK_VIEW_ENABLED` feature flag is enabled for the workspace — the same flag that gates day/week on index calendars. - **API.** `upsertViewWidget` (LAYOUTS permission) accepts a nested `view` settings input (`type`, `mainGroupByFieldMetadataId`, `shouldHideEmptyGroups`, kanban aggregate/column-width, calendar layout/fields). Routes through the standard update path, so `viewGroups` auto-generate from SELECT options exactly like index views. Only widget view types accepted; only `RECORD_TABLE` widgets can change view settings. - **AI tools.** `create-complete-dashboard` + `create_view` now use/allow the `*_WIDGET` types (previously they created plain `TABLE` views that leak into index pickers). ## Frontend **Settings panel.** The **Source** (object) row comes first, since which layouts are available depends on it. The **Layout** row below is a working dropdown (Table / Kanban / Calendar); layouts the source object can't support are **disabled with a hint** ("Needs a Select field" / "Needs a Date field") rather than hidden. Group-by row (select fields; searchable) with a **Hide empty groups** toggle while grouped; **Date field** row replaces Group by while Calendar is active, and — when the `IS_CALENDAR_WEEK_VIEW_ENABLED` flag is on — a **Calendar view** row (Day / Week / Month) appears beside it; **Limit** row hidden while grouped (only the flat virtualized loader enforces it). Kanban keeps its group-by locked (no `None` option). **Instant edit-mode preview.** Draft snapshots carry `viewGroups`; picking a group-by synthesizes them client-side (`buildDraftViewGroupsForFieldMetadataItem`, mirroring the server's generation), so grouped tables/boards preview immediately before dashboard save. On save, `upsertViewWidget` responses hand back the server-generated groups, which replace the client-generated ones in the persisted snapshot. **Renderers.** `RecordTableWidgetRendererContent` branches on the backing view's layout: `RecordBoardWidget` (wraps the standard `RecordBoardContainer`) and `RecordCalendarWidget` (mounts the existing `RecordCalendar`, which renders month / day / week) inside the same per-widget provider sandbox the table uses. **Read-only semantics.** Two flags with distinct scopes, each documented on its state: - `isRecordBoardViewSettingsReadOnlyComponentState` — locks the board chrome that edits view settings (add group, column reorder/resize/menu, aggregates); **card drag still updates records** under object permissions. - `isRecordCalendarReadOnlyComponentState` — widget calendars are read-only by default (no drag, no add-new, no in-calendar layout switch); cards open the side panel. The one exception, behind `IS_CALENDAR_WEEK_VIEW_ENABLED`: a **live (non edit-mode) day/week** widget calendar allows drag-to-reschedule and record creation under object permissions. Month calendars and edit-mode previews stay read-only. **Calendar state componentization.** The calendar module's three settings move from global atoms to component states keyed on `RecordCalendarComponentInstanceContext` (same pattern as record-board), so several calendar widgets and an index-page calendar can coexist without leaking state. All readers resolve the ambient instance; calendar unit tests updated. **Multi-instance fixes that also fix index pages:** record drag states were written against a different instance than every reader resolves (now use the ambient instance); the board sticky-header DOM id is namespaced per board; dragged board cards portal to `document.body` while dragging so react-grid-layout's transforms can't offset the clone from the pointer. ## Scope (v1) - Widget calendars are month-only and read-only by default. With `IS_CALENDAR_WEEK_VIEW_ENABLED` enabled, day/week layouts become selectable (UI + API) and live day/week widget calendars support drag-to-reschedule and record creation under object permissions. - Widget group-by offers SELECT fields only (server auto-generates groups from options; widgets have no per-record add-group flow). ## Tests - Integration: `upsert-view-widget-view-settings.integration-spec.ts` (9 tests — group auto-creation, invalid type/field rejections, non-month calendar widget rejected while the week/day flag is off and accepted once it's enabled, combined settings+fields call); pre-existing `upsert-view-widget` suite (20) green. - Front: new suites for draft view-group generation and snapshot clone/build utils; calendar suites componentized; full `twenty-front` jest, typecheck, oxlint green; `twenty-server` typecheck + lint green. - Browser-verified end-to-end (real dev server + seeded workspace): configure → live edit-mode preview → save → reload for all three layouts; measured drag with pointer inside the card; index-page calendar re-verified (with the week/day flag enabled). https://claude.ai/code/session_01E5N87kwwZWhDtEQaP72cMf
2026-07-21 15:41:08 +02:00
parent 2ef7b7824e
commit 3ad3e8bd1a
94 changed files with 2928 additions and 444 deletions
@@ -0,0 +1,80 @@
+import { Field, InputType, Int } from '@nestjs/graphql';
+
+import {
+  IsBoolean,
+  IsEnum,
+  IsInt,
+  IsOptional,
+  IsUUID,
+  Max,
+  Min,
+} from 'class-validator';
+import {
+  AggregateOperations,
+  ViewCalendarLayout,
+  ViewOpenRecordIn,
+  ViewType,
+} from 'twenty-shared/types';
+
+import { UUIDScalarType } from 'src/engine/api/graphql/workspace-schema-builder/graphql-types/scalars';
+import { KANBAN_COLUMN_MAX_WIDTH } from 'src/engine/metadata-modules/view/constants/kanban-column-max-width.constant';
+import { KANBAN_COLUMN_MIN_WIDTH } from 'src/engine/metadata-modules/view/constants/kanban-column-min-width.constant';
+
+@InputType()
+export class UpsertViewWidgetViewSettingsInput {
+  @IsOptional()
+  @IsEnum(ViewType)
+  @Field(() => ViewType, {
+    nullable: true,
+    description:
+      'The layout type of the widget view. Only widget view types (TABLE_WIDGET, KANBAN_WIDGET, CALENDAR_WIDGET) are allowed.',
+  })
+  type?: ViewType;
+
+  @IsOptional()
+  @IsUUID()
+  @Field(() => UUIDScalarType, { nullable: true })
+  mainGroupByFieldMetadataId?: string | null;
+
+  @IsOptional()
+  @IsBoolean()
+  @Field({ nullable: true })
+  shouldHideEmptyGroups?: boolean;
+
+  @IsOptional()
+  @IsEnum(ViewOpenRecordIn)
+  @Field(() => ViewOpenRecordIn, { nullable: true })
+  openRecordIn?: ViewOpenRecordIn;
+
+  @IsOptional()
+  @IsEnum(AggregateOperations)
+  @Field(() => AggregateOperations, { nullable: true })
+  kanbanAggregateOperation?: AggregateOperations;
+
+  @IsOptional()
+  @IsUUID()
+  @Field(() => UUIDScalarType, { nullable: true })
+  kanbanAggregateOperationFieldMetadataId?: string;
+
+  @IsOptional()
+  @IsInt()
+  @Min(KANBAN_COLUMN_MIN_WIDTH)
+  @Max(KANBAN_COLUMN_MAX_WIDTH)
+  @Field(() => Int, { nullable: true })
+  kanbanColumnWidth?: number | null;
+
+  @IsOptional()
+  @IsEnum(ViewCalendarLayout)
+  @Field(() => ViewCalendarLayout, { nullable: true })
+  calendarLayout?: ViewCalendarLayout;
+
+  @IsOptional()
+  @IsUUID()
+  @Field(() => UUIDScalarType, { nullable: true })
+  calendarFieldMetadataId?: string | null;
+
+  @IsOptional()
+  @IsUUID()
+  @Field(() => UUIDScalarType, { nullable: true })
+  calendarEndFieldMetadataId?: string | null;
+}
@@ -9,6 +9,7 @@ import {
 } from 'class-validator';

 import { UUIDScalarType } from 'src/engine/api/graphql/workspace-schema-builder/graphql-types/scalars';
+import { UpsertViewWidgetViewSettingsInput } from 'src/engine/metadata-modules/view/dtos/inputs/upsert-view-widget-view-settings.input';
 import { UpsertViewWidgetViewFieldInput } from 'src/engine/metadata-modules/view/dtos/inputs/upsert-view-widget-view-field.input';
 import { UpsertViewWidgetViewFilterGroupInput } from 'src/engine/metadata-modules/view/dtos/inputs/upsert-view-widget-view-filter-group.input';
 import { UpsertViewWidgetViewFilterInput } from 'src/engine/metadata-modules/view/dtos/inputs/upsert-view-widget-view-filter.input';
@@ -23,6 +24,16 @@ export class UpsertViewWidgetInput {
  })
  widgetId: string;

+  @IsOptional()
+  @ValidateNested()
+  @Type(() => UpsertViewWidgetViewSettingsInput)
+  @Field(() => UpsertViewWidgetViewSettingsInput, {
+    nullable: true,
+    description:
+      'View-level settings (layout type, group by, kanban and calendar settings) to apply to the widget view.',
+  })
+  view?: UpsertViewWidgetViewSettingsInput;
+
  @IsOptional()
  @ValidateNested({ each: true })
  @Type(() => UpsertViewWidgetViewFieldInput)
@@ -72,7 +72,7 @@ export type ViewOverrides = {
@Index('IDX_VIEW_CREATED_BY_USER_WORKSPACE', ['createdByUserWorkspaceId'])
@Check(
  'CHK_VIEW_CALENDAR_INTEGRITY',
-  `("type" != 'CALENDAR' OR ("calendarLayout" IS NOT NULL AND "calendarFieldMetadataId" IS NOT NULL))`,
+  `("type" NOT IN ('CALENDAR', 'CALENDAR_WIDGET') OR ("calendarLayout" IS NOT NULL AND "calendarFieldMetadataId" IS NOT NULL))`,
 )
 export class ViewEntity
  extends OverridableEntity<ViewOverrides>
@@ -5,6 +5,7 @@ import {
  ViewFilterGroupLogicalOperator,
  ViewFilterOperand,
  ViewSortDirection,
+  ViewType,
 } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { IsNull } from 'typeorm';
@@ -29,6 +30,7 @@ import { type FlatViewFilter } from 'src/engine/metadata-modules/flat-view-filte
 import { getDefaultViewFilterOperand } from 'src/engine/metadata-modules/flat-view-filter/utils/get-default-view-filter-operand.util';
 import { type FlatViewSort } from 'src/engine/metadata-modules/flat-view-sort/types/flat-view-sort.type';
 import { type FlatViewMaps } from 'src/engine/metadata-modules/flat-view/types/flat-view-maps.type';
+import { fromUpdateViewInputToFlatViewToUpdateOrThrow } from 'src/engine/metadata-modules/flat-view/utils/from-update-view-input-to-flat-view-to-update-or-throw.util';
 import { WidgetConfigurationType } from 'src/engine/metadata-modules/page-layout-widget/enums/widget-configuration-type.type';
 import { isCallerOverridingEntity } from 'src/engine/metadata-modules/utils/is-caller-overriding-entity.util';
 import { sanitizeOverridableEntityInput } from 'src/engine/metadata-modules/utils/sanitize-overridable-entity-input.util';
@@ -70,6 +72,12 @@ const EMPTY_SORT_OPS = {
  sortsToRemove: [] as FlatViewSort[],
 };

+const ALLOWED_WIDGET_VIEW_TYPES: ViewType[] = [
+  ViewType.TABLE_WIDGET,
+  ViewType.KANBAN_WIDGET,
+  ViewType.CALENDAR_WIDGET,
+];
+
@Injectable()
 export class ViewWidgetUpsertService {
  constructor(
@@ -102,6 +110,7 @@ export class ViewWidgetUpsertService {
      flatViewFilterGroupMaps,
      flatViewSortMaps,
      flatViewMaps,
+      flatViewGroupMaps,
    } =
      await this.workspaceManyOrAllFlatEntityMapsCacheService.getOrRecomputeManyOrAllFlatEntityMaps(
        {
@@ -114,6 +123,7 @@ export class ViewWidgetUpsertService {
            'flatViewFilterGroupMaps',
            'flatViewSortMaps',
            'flatViewMaps',
+            'flatViewGroupMaps',
          ],
        },
      );
@@ -181,11 +191,31 @@ export class ViewWidgetUpsertService {
      now: new Date().toISOString(),
    };

+    if (isDefined(input.view)) {
+      if (!isRecordTableWidget) {
+        throw new ViewException(
+          t`View settings can only be updated on record table widgets`,
+          ViewExceptionCode.INVALID_VIEW_DATA,
+        );
+      }
+
+      if (
+        isDefined(input.view.type) &&
+        !ALLOWED_WIDGET_VIEW_TYPES.includes(input.view.type)
+      ) {
+        throw new ViewException(
+          t`Widget views must use a widget view type`,
+          ViewExceptionCode.INVALID_VIEW_DATA,
+        );
+      }
+    }
+
    if (
      !isDefined(input.viewFields) &&
      !isDefined(input.viewFilterGroups) &&
      !isDefined(input.viewFilters) &&
-      !isDefined(input.viewSorts)
+      !isDefined(input.viewSorts) &&
+      !isDefined(input.view)
    ) {
      const view = await this.viewRepository.findOne(
        upsertContext.workspaceId,
@@ -282,6 +312,22 @@ export class ViewWidgetUpsertService {
        })
      : EMPTY_SORT_OPS;

+    const viewUpdateOperations = isDefined(input.view)
+      ? fromUpdateViewInputToFlatViewToUpdateOrThrow({
+          updateViewInput: {
+            id: viewId,
+            ...input.view,
+          },
+          flatViewMaps,
+          flatViewGroupMaps,
+          flatFieldMetadataMaps,
+          callerApplicationUniversalIdentifier:
+            upsertContext.applicationUniversalIdentifier,
+          workspaceCustomApplicationUniversalIdentifier:
+            upsertContext.applicationUniversalIdentifier,
+        })
+      : undefined;
+
    const {
      toHardDelete: filterGroupsToDelete,
      toDeactivate: filterGroupsToDeactivate,
@@ -312,6 +358,22 @@ export class ViewWidgetUpsertService {
      await this.workspaceMigrationValidateBuildAndRunService.validateBuildAndRunWorkspaceMigration(
        {
          allFlatEntityOperationByMetadataName: {
+            view: {
+              flatEntityToCreate: [],
+              flatEntityToDelete: [],
+              flatEntityToUpdate: isDefined(viewUpdateOperations)
+                ? [viewUpdateOperations.flatViewToUpdate]
+                : [],
+            },
+            viewGroup: {
+              flatEntityToCreate: isDefined(viewUpdateOperations)
+                ? viewUpdateOperations.flatViewGroupsToCreate
+                : [],
+              flatEntityToDelete: isDefined(viewUpdateOperations)
+                ? viewUpdateOperations.flatViewGroupsToDelete
+                : [],
+              flatEntityToUpdate: [],
+            },
            viewField: {
              flatEntityToCreate: viewFieldOperations.fieldsToCreate,
              flatEntityToDelete: [],
@@ -28,6 +28,15 @@ import {
  isNonEmptyArray,
 } from 'twenty-shared/utils';

+const CREATABLE_VIEW_TYPES = [
+  ViewType.TABLE,
+  ViewType.KANBAN,
+  ViewType.CALENDAR,
+  ViewType.TABLE_WIDGET,
+  ViewType.KANBAN_WIDGET,
+  ViewType.CALENDAR_WIDGET,
+] as const;
+
 const GetViewsInputSchema = z.object({
  objectNameSingular: z
    .string()
@@ -64,10 +73,12 @@ const CreateViewInputSchema = z.object({
    .default('IconList')
    .describe('Icon identifier (e.g., "IconList", "IconCheckbox")'),
  type: z
-    .enum([ViewType.TABLE, ViewType.KANBAN, ViewType.CALENDAR])
+    .enum(CREATABLE_VIEW_TYPES)
    .optional()
    .default(ViewType.TABLE)
-    .describe('View type'),
+    .describe(
+      'View type. Use the *_WIDGET variants (TABLE_WIDGET, KANBAN_WIDGET, CALENDAR_WIDGET) for views backing a dashboard widget so they stay out of record index view pickers.',
+    ),
  visibility: z
    .enum([ViewVisibility.WORKSPACE, ViewVisibility.UNLISTED])
    .optional()
@@ -213,9 +224,11 @@ const UpsertCompleteViewInputSchema = z.object({
  name: z.string().optional().describe('View name'),
  icon: z.string().optional().describe('Icon identifier (e.g. "IconList")'),
  type: z
-    .enum([ViewType.TABLE, ViewType.KANBAN, ViewType.CALENDAR])
+    .enum(CREATABLE_VIEW_TYPES)
    .optional()
-    .describe('View type. Defaults to TABLE on create.'),
+    .describe(
+      'View type. Defaults to TABLE on create. Use the *_WIDGET variants for views backing a dashboard widget so they stay out of record index view pickers.',
+    ),
  visibility: z
    .enum([ViewVisibility.WORKSPACE, ViewVisibility.UNLISTED])
    .optional()