From 981f311ed077e04fbba37e397d637298c46120cb Mon Sep 17 00:00:00 2001
From: Marie <51697796+ijreilly@users.noreply.github.com>
Date: Fri, 23 Aug 2024 12:13:49 +0200
Subject: [PATCH] Fix addition of new option in select field if there are no
 existing options (#6718)

Fixes
[sentry](https://twenty-v7.sentry.io/issues/5745628875/?alert_rule_id=15135099&alert_type=issue&notification_uuid=95108411-b431-4abd-bdd6-687c96a7353e&project=4507072563183616&referrer=discord)
---
 .../fields/forms/select/utils/generateNewSelectOption.ts    | 2 +-
 .../src/theme/utils/__tests__/getNextThemeColor.test.ts     | 5 +++++
 packages/twenty-ui/src/theme/utils/getNextThemeColor.ts     | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts
index 2b8d955dc..d8289070e 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/utils/generateNewSelectOption.ts
@@ -11,7 +11,7 @@ export const generateNewSelectOption = (
   const newOptionLabel = generateNewSelectOptionLabel(options);
 
   return {
-    color: getNextThemeColor(options[options.length - 1].color),
+    color: getNextThemeColor(options[options.length - 1]?.color),
     id: v4(),
     label: newOptionLabel,
     position: options.length,
diff --git a/packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts b/packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts
index b87e65b1f..61c4f9316 100644
--- a/packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts
+++ b/packages/twenty-ui/src/theme/utils/__tests__/getNextThemeColor.test.ts
@@ -20,4 +20,9 @@ describe('getNextThemeColor', () => {
 
     expect(getNextThemeColor(currentColor)).toBe(nextColor);
   });
+  it('returns the first color when currentColorIsUndefined', () => {
+    const firstColor: ThemeColor = MAIN_COLOR_NAMES[0];
+
+    expect(getNextThemeColor(undefined)).toBe(firstColor);
+  });
 });
diff --git a/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts b/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts
index 40af82199..c949672a6 100644
--- a/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts
+++ b/packages/twenty-ui/src/theme/utils/getNextThemeColor.ts
@@ -1,6 +1,10 @@
 import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme';
+import { isDefined } from '@ui/utilities';
 
-export const getNextThemeColor = (currentColor: ThemeColor): ThemeColor => {
+export const getNextThemeColor = (currentColor?: ThemeColor): ThemeColor => {
+  if (!isDefined(currentColor)) {
+    return MAIN_COLOR_NAMES[0];
+  }
   const currentColorIndex = MAIN_COLOR_NAMES.findIndex(
     (color) => color === currentColor,
   );