Add List View lab icon and make lab feature flag icons mandatory (#23930)

## Context

The List View toggle in Settings → Lab rendered without an icon: the
front end kept a hardcoded `Partial<Record<FeatureFlagKey,
IconComponent>>` map, so nothing caught a public feature flag added
without an icon.

## What this PR does

Moves the icon into the public feature flag metadata, next to `label`
and `description`, as a **required** field — so a lab flag now registers
in one place and can't be declared without an icon (server typecheck
fails otherwise):

- `twenty-server`: `FeatureFlagMetadata` gains required `icon: string`;
each `PUBLIC_FEATURE_FLAGS` entry declares its icon (`IconList` for List
View — the icon already used for the List view type).
`PublicFeatureFlagMetadata` GraphQL entity exposes it.
- `twenty-front`: `SettingsLabContent` renders
`getIcon(flag.metadata.icon)` via `useIcons`, the same metadata-driven
icon pattern used across the app; the hardcoded icon map is deleted.
- `twenty-ui`: registers `IconCalendarWeek` in `AllIcons` — it was
importable but not resolvable by name through `useIcons`, so it would
have silently fallen back to the default icon.
- Generated artifacts (`twenty-front/src/generated-metadata`,
`twenty-client-sdk/src/metadata/generated`) updated for the new field.

## Verification

- `nx run-many -t typecheck,lint -p twenty-front twenty-server
twenty-shared twenty-client-sdk twenty-ui` passes (oxlint + oxfmt
clean).
- Negative case: removing `icon` from a `PUBLIC_FEATURE_FLAGS` entry
fails `twenty-server:typecheck` with `TS2741: Property 'icon' is missing
… but required in type 'FeatureFlagMetadata'`.
This commit is contained in:
Félix Malfait
2026-08-08 13:04:08 +02:00
committed by GitHub
parent 02a187d065
commit 80fb91c033
8 changed files with 22 additions and 15 deletions
@@ -4502,6 +4502,7 @@ export type PublicFeatureFlag = {
export type PublicFeatureFlagMetadata = {
__typename?: 'PublicFeatureFlagMetadata';
description: Scalars['String']['output'];
icon: Scalars['String']['output'];
imagePath?: Maybe<Scalars['String']['output']>;
label: Scalars['String']['output'];
};
@@ -5,15 +5,10 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
import { styled } from '@linaria/react';
import { isNonEmptyString } from '@sniptt/guards';
import { useState } from 'react';
import {
IconCalendarWeek,
IconRelationManyToMany,
IconSparkles,
type IconComponent,
} from 'twenty-ui/icon';
import { useIcons } from 'twenty-ui/icon';
import { Card } from 'twenty-ui/surfaces';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
import { type FeatureFlagKey } from '~/generated-metadata/graphql';
const StyledCardGrid = styled.div`
display: grid;
@@ -29,14 +24,9 @@ const StyledImage = styled.img`
width: 100%;
`;
const labFeatureFlagIcons: Partial<Record<FeatureFlagKey, IconComponent>> = {
[FeatureFlagKey.IS_CALENDAR_WEEK_VIEW_ENABLED]: IconCalendarWeek,
[FeatureFlagKey.IS_JUNCTION_RELATIONS_ENABLED]: IconRelationManyToMany,
[FeatureFlagKey.IS_SETTINGS_DISCOVERY_HERO_ENABLED]: IconSparkles,
};
export const SettingsLabContent = () => {
const currentWorkspace = useAtomStateValue(currentWorkspaceState);
const { getIcon } = useIcons();
const { labPublicFeatureFlags, handleLabPublicFeatureFlagUpdate } =
useLabPublicFeatureFlags();
const [hasImageLoadingError, setHasImageLoadingError] = useState<
@@ -75,7 +65,7 @@ export const SettingsLabContent = () => {
/>
)}
<SettingsOptionCardContentToggle
Icon={labFeatureFlagIcons[flag.key]}
Icon={getIcon(flag.metadata.icon)}
title={flag.metadata.label}
description={flag.metadata.description}
checked={flag.value}
@@ -93,7 +83,7 @@ export const SettingsLabContent = () => {
{labPublicFeatureFlagsWithoutImage.map((flag, index) => (
<SettingsOptionCardContentToggle
key={flag.key}
Icon={labFeatureFlagIcons[flag.key]}
Icon={getIcon(flag.metadata.icon)}
title={flag.metadata.label}
description={flag.metadata.description}
checked={flag.value}