From 3f4464afbf52a7b67298bcef368695b103c0b0eb Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Thu, 11 Mar 2021 19:07:38 +0000
Subject: [PATCH] Allow different value/label for SelectDataEntry

---
 .../data-components/select-data-entry.tsx     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/src/frontend/building/data-components/select-data-entry.tsx b/app/src/frontend/building/data-components/select-data-entry.tsx
index 73723d90..b8b52873 100644
--- a/app/src/frontend/building/data-components/select-data-entry.tsx
+++ b/app/src/frontend/building/data-components/select-data-entry.tsx
@@ -3,16 +3,31 @@ import React, { Fragment } from 'react';
 import { BaseDataEntryProps } from './data-entry';
 import { DataTitleCopyable } from './data-title';
 
+interface SelectOption {
+    value: string;
+    label: string;
+}
+
 interface SelectDataEntryProps extends BaseDataEntryProps {
     value: string;
     placeholder?: string;
-    options: string[];
+    options: (string | SelectOption)[];
 }
 
+function makeOption(option: string | SelectOption): SelectOption {
+    if(typeof option !== 'string' && 'value' in option && 'label' in option) {
+        return option;
+    } else return {
+        value: option,
+        label: option
+    }
+}
 
 const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) => {
     const slugWithModifier = props.slug + (props.slugModifier ?? '');
 
+    const options = props.options.map(makeOption);
+
     return (
         <Fragment>
             <DataTitleCopyable
@@ -38,8 +53,8 @@ const SelectDataEntry: React.FunctionComponent<SelectDataEntryProps> = (props) =
             >
                 <option value="">{props.placeholder}</option>
                 {
-                    props.options.map(option => (
-                        <option key={option} value={option}>{option}</option>
+                    options.map(option => (
+                        <option key={option.value} value={option.value}>{option.label}</option>
                     ))
                 }
             </select>