From f6e2d54bdbb1b467d06fff648e590388ca941377 Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Sun, 8 Jan 2023 11:50:44 +0100
Subject: [PATCH] refactor(web/input): select backwards compat with no label

---
 web/src/features/dialog/InputDialog.tsx              | 10 ++++++++--
 web/src/features/dialog/components/fields/select.tsx |  1 -
 web/src/interfaces/dialog.ts                         |  3 ++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index f47de94..17b9cd3 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -1,9 +1,9 @@
-import { Group, Modal, Button, Stack } from '@mantine/core';
+import { Group, Modal, Button, Stack, SelectItem } from '@mantine/core';
 import React, { FormEvent, useRef } from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { useLocales } from '../../providers/LocaleProvider';
 import { fetchNui } from '../../utils/fetchNui';
-import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput } from '../../interfaces/dialog';
+import { IInput, ICheckbox, ISelect, INumber, ISlider, IColorInput, OptionValue } from '../../interfaces/dialog';
 import InputField from './components/fields/input';
 import CheckboxField from './components/fields/checkbox';
 import SelectField from './components/fields/select';
@@ -42,6 +42,12 @@ const InputDialog: React.FC = () => {
     setVisible(true);
     data.rows.forEach((row, index) => {
       fieldForm.insert(index, { value: row.type !== 'checkbox' ? row.default : row.checked } || { value: null });
+      // Backwards compat with new Select data type
+      if (row.type === 'select') {
+        row.options = row.options.map((option) =>
+          !option.label ? { ...option, label: option.value } : option
+        ) as Array<OptionValue>;
+      }
     });
   });
 
diff --git a/web/src/features/dialog/components/fields/select.tsx b/web/src/features/dialog/components/fields/select.tsx
index d259d81..aacade8 100644
--- a/web/src/features/dialog/components/fields/select.tsx
+++ b/web/src/features/dialog/components/fields/select.tsx
@@ -9,7 +9,6 @@ interface Props {
   control: Control<FormValues>;
 }
 
-// TODO: set label to value of value when there is no label provided
 const SelectField: React.FC<Props> = (props) => {
   const controller = useController({
     name: `test.${props.index}.value`,
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index 1d3efff..26e001c 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -22,11 +22,12 @@ export interface ICheckbox {
   required?: boolean;
 }
 
+export type OptionValue = { value: string; label?: string };
 export interface ISelect {
   type: 'select';
   label: string;
   default?: string;
-  options: Array<SelectItem>;
+  options: Array<OptionValue>;
   disabled?: boolean;
   description?: string;
   required?: boolean;