Navbar customization improvements (#17863)

- Add folder icon editing support
- And other navbar customization fixes/improvements.

---------

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-server/src/engine/core-modules/application/utils/from-navigation-menu-item-manifest-to-universal-flat-navigation-menu-item.util.ts

@@ -16,6 +16,7 @@ export const fromNavigationMenuItemManifestToUniversalFlatNavigationMenuItem =
       universalIdentifier: navigationMenuItemManifest.universalIdentifier,
       applicationUniversalIdentifier,
       name: navigationMenuItemManifest.name ?? null,
+      icon: navigationMenuItemManifest.icon ?? null,
       position: navigationMenuItemManifest.position,
       viewUniversalIdentifier:
         navigationMenuItemManifest.viewUniversalIdentifier ?? null,

packages/twenty-server/src/engine/metadata-modules/flat-entity/constant/__tests__/__snapshots__/all-universal-flat-entity-properties-to-compare-and-stringify.constant.spec.ts.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ALL_UNIVERSAL_FLAT_ENTITY_PROPERTIES_TO_COMPARE_AND_STRINGIFY should match snapshot 1`] = `
 {
@@ -103,6 +103,7 @@ exports[`ALL_UNIVERSAL_FLAT_ENTITY_PROPERTIES_TO_COMPARE_AND_STRINGIFY should ma
       "folderUniversalIdentifier",
       "name",
       "link",
+      "icon",
     ],
     "propertiesToStringify": [],
   },

packages/twenty-server/src/engine/metadata-modules/flat-entity/constant/all-entity-properties-configuration-by-metadata-name.constant.ts

@@ -1019,6 +1019,7 @@ export const ALL_ENTITY_PROPERTIES_CONFIGURATION_BY_METADATA_NAME = {
     },
     name: { toCompare: true, toStringify: false, universalProperty: undefined },
     link: { toCompare: true, toStringify: false, universalProperty: undefined },
+    icon: { toCompare: true, toStringify: false, universalProperty: undefined },
     createdAt: {
       toCompare: false,
       toStringify: false,

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/constants/flat-navigation-menu-item-editable-properties.constant.ts

@@ -5,4 +5,5 @@ export const FLAT_NAVIGATION_MENU_ITEM_EDITABLE_PROPERTIES = [
   'folderId',
   'name',
   'link',
+  'icon',
 ] as const satisfies MetadataEntityPropertyName<'navigationMenuItem'>[];

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/utils/from-create-navigation-menu-item-input-to-flat-navigation-menu-item-to-create.util.ts

@@ -81,6 +81,7 @@ export const fromCreateNavigationMenuItemInputToFlatNavigationMenuItemToCreate =
       folderUniversalIdentifier,
       name: createNavigationMenuItemInput.name ?? null,
       link: createNavigationMenuItemInput.link ?? null,
+      icon: createNavigationMenuItemInput.icon ?? null,
       position,
       workspaceId,
       applicationId: flatApplication.id,

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/utils/from-flat-navigation-menu-item-to-navigation-menu-item-dto.util.ts

@@ -13,6 +13,7 @@ export const fromFlatNavigationMenuItemToNavigationMenuItemDto = (
   folderId: flatNavigationMenuItem.folderId ?? undefined,
   name: flatNavigationMenuItem.name ?? undefined,
   link: flatNavigationMenuItem.link ?? undefined,
+  icon: flatNavigationMenuItem.icon ?? undefined,
   position: flatNavigationMenuItem.position,
   workspaceId: flatNavigationMenuItem.workspaceId,
   applicationId: flatNavigationMenuItem.applicationId ?? undefined,

packages/twenty-server/src/engine/metadata-modules/flat-navigation-menu-item/utils/from-navigation-menu-item-entity-to-flat-navigation-menu-item.util.ts

@@ -82,6 +82,7 @@ export const fromNavigationMenuItemEntityToFlatNavigationMenuItem = ({
     folderId: navigationMenuItemEntity.folderId,
     name: navigationMenuItemEntity.name,
     link: navigationMenuItemEntity.link,
+    icon: navigationMenuItemEntity.icon,
     position: navigationMenuItemEntity.position,
     workspaceId: navigationMenuItemEntity.workspaceId,
     universalIdentifier: navigationMenuItemEntity.universalIdentifier,

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/dtos/create-navigation-menu-item.input.ts

@@ -36,6 +36,11 @@ export class CreateNavigationMenuItemInput {
   @Field(() => String, { nullable: true })
   link?: string | null;
 
+  @IsOptional()
+  @IsString()
+  @Field(() => String, { nullable: true })
+  icon?: string | null;
+
   @IsUUID()
   @IsOptional()
   @Field(() => UUIDScalarType, { nullable: true })

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/dtos/navigation-menu-item.dto.ts

@@ -47,6 +47,10 @@ export class NavigationMenuItemDTO {
   @Field(() => String, { nullable: true })
   link?: string | null;
 
+  @IsOptional()
+  @Field(() => String, { nullable: true })
+  icon?: string | null;
+
   @IsUUID()
   @IsOptional()
   @Field(() => UUIDScalarType, { nullable: true })

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/dtos/update-navigation-menu-item.input.ts

@@ -35,6 +35,11 @@ export class UpdateNavigationMenuItemInput {
   @IsString()
   @Field(() => String, { nullable: true })
   link?: string | null;
+
+  @IsOptional()
+  @IsString()
+  @Field(() => String, { nullable: true })
+  icon?: string | null;
 }
 
 @InputType()

packages/twenty-server/src/engine/metadata-modules/navigation-menu-item/entities/navigation-menu-item.entity.ts

@@ -84,6 +84,9 @@ export class NavigationMenuItemEntity
   @Column({ nullable: true, type: 'text' })
   link: string | null;
 
+  @Column({ nullable: true, type: 'text' })
+  icon: string | null;
+
   @ManyToOne(() => NavigationMenuItemEntity, {
     onDelete: 'CASCADE',
     nullable: true,

packages/twenty-server/src/engine/metadata-modules/object-metadata/object-metadata.service.ts

@@ -898,8 +898,9 @@ export class ObjectMetadataService extends TypeOrmQueryService<ObjectMetadataEnt
       folderId: null,
       folderUniversalIdentifier: null,
       name: null,
-      position: nextPosition,
       link: null,
+      icon: null,
+      position: nextPosition,
       workspaceId,
       applicationId: workspaceCustomApplicationId,
       applicationUniversalIdentifier:

packages/twenty-server/src/engine/workspace-manager/dev-seeder/core/utils/seed-feature-flags.util.ts

@@ -86,6 +86,11 @@ export const seedFeatureFlags = async ({
         workspaceId: workspaceId,
         value: true,
       },
+      {
+        key: FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED,
+        workspaceId: workspaceId,
+        value: true,
+      },
       {
         key: FeatureFlagKey.IS_MARKETPLACE_ENABLED,
         workspaceId: workspaceId,

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/constants/standard-navigation-menu-item.constant.ts

@@ -40,6 +40,7 @@ export const STANDARD_NAVIGATION_MENU_ITEMS = {
   workflowsFolder: {
     universalIdentifier: '20202020-b007-4b07-8b07-c0aba11c0007',
     name: 'Workflows',
+    icon: 'IconSettingsAutomation',
     position: 6,
   },
   workflowsFolderAllWorkflows: {

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/utils/navigation-menu-item/build-standard-flat-navigation-menu-item-maps.util.ts

@@ -77,6 +77,7 @@ export const buildStandardFlatNavigationMenuItemMaps = ({
   const workflowsFolder = createStandardNavigationMenuItemFolderFlatMetadata({
     universalIdentifier: workflowsFolderDefinition.universalIdentifier,
     name: workflowsFolderDefinition.name,
+    icon: workflowsFolderDefinition.icon,
     position: workflowsFolderDefinition.position,
     navigationMenuItemId: workflowsFolderId,
     workspaceId,

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/utils/navigation-menu-item/create-standard-navigation-menu-item-flat-metadata.util.ts

@@ -64,8 +64,9 @@ export const createStandardNavigationMenuItemFlatMetadata = ({
     folderId: null,
     folderUniversalIdentifier: null,
     name: null,
-    position,
     link: null,
+    icon: null,
+    position,
     createdAt: now,
     updatedAt: now,
   };

packages/twenty-server/src/engine/workspace-manager/twenty-standard-application/utils/navigation-menu-item/create-standard-navigation-menu-item-folder-flat-metadata.util.ts

@@ -7,6 +7,7 @@ import { TWENTY_STANDARD_APPLICATION } from 'src/engine/workspace-manager/twenty
 export const createStandardNavigationMenuItemFolderFlatMetadata = ({
   universalIdentifier,
   name,
+  icon,
   position,
   navigationMenuItemId,
   workspaceId,
@@ -15,6 +16,7 @@ export const createStandardNavigationMenuItemFolderFlatMetadata = ({
 }: {
   universalIdentifier: string;
   name: string;
+  icon?: string | null;
   position: number;
   navigationMenuItemId: string;
   workspaceId: string;
@@ -36,8 +38,9 @@ export const createStandardNavigationMenuItemFolderFlatMetadata = ({
   folderId: null,
   folderUniversalIdentifier: null,
   name,
-  position,
   link: null,
+  icon: icon ?? null,
+  position,
   createdAt: now,
   updatedAt: now,
 });
@@ -95,6 +98,7 @@ export const createStandardNavigationMenuItemFolderItemFlatMetadata = ({
     folderUniversalIdentifier,
     name: null,
     link: null,
+    icon: null,
     position,
     createdAt: now,
     updatedAt: now,