Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutWithRelationWidgets.ts (TypeScript)

Code before:
  const relationWidgets = createRelationFieldWidgets(
    boxedRelationFieldMetadataItems,
    firstTab.id,
  );

  return {
    ...layout,
    tabs: layout.tabs.map((tab) => {
      if (tab.id === firstTab.id) {
        const firstFieldsWidgetIndex = tab.widgets.findIndex(
          (widget) => widget.type === WidgetType.FIELDS,
        );

        if (firstFieldsWidgetIndex === -1) {
          return {
            ...tab,
            widgets: [...tab.widgets, ...relationWidgets],
          };
        }

        const noteWidgetIndex = tab.widgets.findIndex(
          (widget) => widget.type === WidgetType.NOTES,
        );

        const widgetsBeforeRelation = tab.widgets.slice(
          0,
          firstFieldsWidgetIndex + 1,
        );
        const widgetsAfterRelation =
          noteWidgetIndex === -1
            ? tab.widgets.slice(firstFieldsWidgetIndex + 1)
            : [
                ...tab.widgets.slice(
                  firstFieldsWidgetIndex + 1,
                  noteWidgetIndex,
                ),
                ...tab.widgets.slice(noteWidgetIndex + 1),
              ];

        const noteWidget =
          noteWidgetIndex !== -1 ? [tab.widgets[noteWidgetIndex]] : [];

        return {
          ...tab,
          widgets: [
            ...widgetsBeforeRelation,
            ...relationWidgets,
            ...noteWidget,
            ...widgetsAfterRelation,
          ],
        };

Review comment (suggestion):
The implementation uses `findIndex` to locate the NOTES widget, which only finds the first occurrence. If there are multiple NOTES widgets in the layout, only the first one will be repositioned after the relation widgets, while subsequent NOTES widgets will remain in their original positions. This could lead to inconsistent widget ordering. Consider whether this is the intended behavior or if all NOTES widgets should be repositioned, or if the presence of multiple NOTES widgets should be prevented.

Code after:
  const relationWidgets = createRelationFieldWidgets(
    boxedRelationFieldMetadataItems,
    firstTab.id,
  );

  return {
    ...layout,
    tabs: layout.tabs.map((tab) => {
      if (tab.id === firstTab.id) {
        const firstFieldsWidgetIndex = tab.widgets.findIndex(
          (widget) => widget.type === WidgetType.FIELDS,
        );

        if (firstFieldsWidgetIndex === -1) {
          return {
            ...tab,
            widgets: [...tab.widgets, ...relationWidgets],
          };
        }

        // TODO: This note widget repositioning logic is temporary and will be deleted soon.
        // We need this to ensure the note editor is displayed before record relations,
        // matching the behavior of the old show page.
        const noteWidgetIndex = tab.widgets.findIndex(
          (widget) => widget.type === WidgetType.NOTES,
        );

        const widgetsBeforeRelation = tab.widgets.slice(
          0,
          firstFieldsWidgetIndex + 1,
        );
        const widgetsAfterRelation =
          noteWidgetIndex === -1
            ? tab.widgets.slice(firstFieldsWidgetIndex + 1)
            : [
                ...tab.widgets.slice(
                  firstFieldsWidgetIndex + 1,
                  noteWidgetIndex,
                ),
                ...tab.widgets.slice(noteWidgetIndex + 1),
              ];

        const noteWidget =
          noteWidgetIndex !== -1 ? [tab.widgets[noteWidgetIndex]] : [];

        return {
          ...tab,
          widgets: [
            ...widgetsBeforeRelation,
            ...relationWidgets,
            ...noteWidget,