From 7cfabd4d5180031b0e390ec0e70899ce45fbe8e9 Mon Sep 17 00:00:00 2001
From: Brenda Sukh <brendasukh@gmail.com>
Date: Mon, 16 Nov 2020 17:34:35 -0500
Subject: [PATCH] Add label to currency select

---
 .../CurrencySelect/CurrencySelect.tsx         | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
index 1b5920ffcb..2db1b8ee38 100644
--- a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
+++ b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
@@ -15,7 +15,13 @@
  */
 
 import React from 'react';
-import { MenuItem, Select, SelectProps } from '@material-ui/core';
+import {
+  InputLabel,
+  FormControl,
+  MenuItem,
+  Select,
+  SelectProps,
+} from '@material-ui/core';
 import { Currency, CurrencyType } from '../../types';
 import { findAlways } from '../../utils/assert';
 import { useSelectStyles as useStyles } from '../../utils/styles';
@@ -51,24 +57,28 @@ export const CurrencySelect = ({
   };
 
   return (
-    <Select
-      className={classes.select}
-      variant="outlined"
-      onChange={handleOnChange}
-      value={currency.kind || NULL_VALUE}
-      renderValue={renderValue}
-    >
-      {currencies.map((c: Currency) => (
-        <MenuItem
-          className={classes.menuItem}
-          key={c.kind || NULL_VALUE}
-          value={c.kind || NULL_VALUE}
-        >
-          <span role="img" aria-label={c.label}>
-            {c.label}
-          </span>
-        </MenuItem>
-      ))}
-    </Select>
+    <FormControl variant="outlined">
+      <InputLabel shrink>Convert to:</InputLabel>
+      <Select
+        className={classes.select}
+        variant="outlined"
+        labelWidth={100}
+        onChange={handleOnChange}
+        value={currency.kind || NULL_VALUE}
+        renderValue={renderValue}
+      >
+        {currencies.map((c: Currency) => (
+          <MenuItem
+            className={classes.menuItem}
+            key={c.kind || NULL_VALUE}
+            value={c.kind || NULL_VALUE}
+          >
+            <span role="img" aria-label={c.label}>
+              {c.label}
+            </span>
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   );
 };