From d4aa866e5b0d39ed8378d8f72f431bd4287a3f1e Mon Sep 17 00:00:00 2001
From: Tagaishi <Tagaishi@hotmail.ch>
Date: Fri, 15 Mar 2024 13:51:25 +0100
Subject: [PATCH] feat: Apply translation automation from select option to
 multi-select option (#1963)

---
 .../Tiles/Widgets/WidgetsEditModal.tsx        | 20 ++++++++++++++-----
 src/widgets/widgets.ts                        |  2 +-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index 750231281..6b6e11e1a 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -170,6 +170,15 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'multi-select':
+      const multiSelectItems = typeof option.data === 'function' ? option.data() : option.data;
+      const multiSelectData = multiSelectItems.map((dataType) => {
+        return !dataType.label
+          ? {
+              value: dataType.value,
+              label: t(`descriptor.settings.${key}.data.${dataType.value}`),
+            }
+          : dataType;
+      });
       return (
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
@@ -179,9 +188,10 @@ const WidgetOptionTypeSwitch: FC<{
             {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link} />}
           </Group>
           <MultiSelect
-            data={option.data}
-            value={value as string[]}
+            searchable
             defaultValue={option.defaultValue}
+            data={multiSelectData}
+            value={value as string[]}
             onChange={(v) => handleChange(key, v)}
             withinPortal
             {...option.inputProps}
@@ -189,8 +199,8 @@ const WidgetOptionTypeSwitch: FC<{
         </Stack>
       );
     case 'select':
-      const items = typeof option.data === 'function' ? option.data() : option.data;
-      const data = items.map((dataType) => {
+      const selectItems = typeof option.data === 'function' ? option.data() : option.data;
+      const selectData = selectItems.map((dataType) => {
         return !dataType.label
           ? {
               value: dataType.value,
@@ -209,7 +219,7 @@ const WidgetOptionTypeSwitch: FC<{
           <Select
             searchable
             defaultValue={option.defaultValue}
-            data={data}
+            data={selectData}
             value={value as string}
             onChange={(v) => handleChange(key, v ?? option.defaultValue)}
             withinPortal
diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts
index 1e4a547c5..b77a9251c 100644
--- a/src/widgets/widgets.ts
+++ b/src/widgets/widgets.ts
@@ -60,7 +60,7 @@ interface ICommonWidgetOptions {
 export type IMultiSelectOptionValue = {
   type: 'multi-select';
   defaultValue: string[];
-  data: DataType[];
+  data: DataType[] | (() => DataType[]);
   inputProps?: Partial<MultiSelectProps>;
 };