From 746e861d0bc5b2e47e1a2a6ef3eeeaf83adebd9a Mon Sep 17 00:00:00 2001
From: Brenda Sukh <brendasukh@gmail.com>
Date: Mon, 16 Nov 2020 09:56:21 -0500
Subject: [PATCH 1/4] Remove currency feature flag

---
 .../CostInsightsPage/CostInsightsPage.tsx       | 17 ++++++-----------
 .../CurrencySelect/CurrencySelect.tsx           |  1 +
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
index 3234d1aa7f..80464a56cb 100644
--- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
@@ -16,7 +16,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Container, Divider, Grid, Typography } from '@material-ui/core';
-import { featureFlagsApiRef, Progress, useApi } from '@backstage/core';
+import { Progress, useApi } from '@backstage/core';
 import { default as MaterialAlert } from '@material-ui/lab/Alert';
 import { costInsightsApiRef } from '../../api';
 import { AlertActionCardList } from '../AlertActionCardList';
@@ -49,7 +49,6 @@ import { useSubtleTypographyStyles } from '../../utils/styles';
 
 export const CostInsightsPage = () => {
   const classes = useSubtleTypographyStyles();
-  const featureFlags = useApi(featureFlagsApiRef);
   const client = useApi(costInsightsApiRef);
   const config = useConfig();
   const groups = useGroups();
@@ -203,15 +202,11 @@ export const CostInsightsPage = () => {
         </Typography>
       </Box>
       <Box minHeight={40} maxHeight={60} display="flex">
-        {featureFlags.isActive('cost-insights-currencies') && (
-          <Box mr={1}>
-            <CurrencySelect
-              currency={currency}
-              currencies={config.currencies}
-              onSelect={setCurrency}
-            />
-          </Box>
-        )}
+        <CurrencySelect
+          currency={currency}
+          currencies={config.currencies}
+          onSelect={setCurrency}
+        />
         <ProjectSelect
           project={pageFilters.project}
           projects={projects || []}
diff --git a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
index 1b5920ffcb..c500f410eb 100644
--- a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
+++ b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
@@ -57,6 +57,7 @@ export const CurrencySelect = ({
       onChange={handleOnChange}
       value={currency.kind || NULL_VALUE}
       renderValue={renderValue}
+      style={{ marginRight: '15px' }}
     >
       {currencies.map((c: Currency) => (
         <MenuItem

From 4040d4fcb2263e5dd440d7b6a3da6a37260d0854 Mon Sep 17 00:00:00 2001
From: Brenda Sukh <brendasukh@gmail.com>
Date: Mon, 16 Nov 2020 10:07:56 -0500
Subject: [PATCH 2/4] Add changeset

---
 .changeset/cost-insights-ten-carpets-return.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cost-insights-ten-carpets-return.md

diff --git a/.changeset/cost-insights-ten-carpets-return.md b/.changeset/cost-insights-ten-carpets-return.md
new file mode 100644
index 0000000000..f378a20eab
--- /dev/null
+++ b/.changeset/cost-insights-ten-carpets-return.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': minor
+---
+
+remove cost insights currency feature flag

From 885526474eb7d62599c38e5f5a11d653a4c17175 Mon Sep 17 00:00:00 2001
From: Brenda Sukh <brendasukh@gmail.com>
Date: Mon, 16 Nov 2020 16:14:19 -0500
Subject: [PATCH 3/4] Fix styling on dropdowns

---
 .../CostInsightsPage/CostInsightsPage.tsx     | 19 +++++++++++--------
 .../CurrencySelect/CurrencySelect.tsx         |  1 -
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
index 80464a56cb..8a9400d97a 100644
--- a/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx
@@ -192,21 +192,24 @@ export const CostInsightsPage = () => {
       px={3}
       marginTop={10}
       display="flex"
-      flexDirection="row"
       justifyContent="space-between"
+      alignItems="center"
+      minHeight={40}
     >
-      <Box minHeight={40} width="75%" pt={2}>
+      <Box>
         <Typography variant="h4">Cost Overview</Typography>
         <Typography classes={classes}>
           Billing data as of {lastCompleteBillingDate}
         </Typography>
       </Box>
-      <Box minHeight={40} maxHeight={60} display="flex">
-        <CurrencySelect
-          currency={currency}
-          currencies={config.currencies}
-          onSelect={setCurrency}
-        />
+      <Box display="flex">
+        <Box mr={1}>
+          <CurrencySelect
+            currency={currency}
+            currencies={config.currencies}
+            onSelect={setCurrency}
+          />
+        </Box>
         <ProjectSelect
           project={pageFilters.project}
           projects={projects || []}
diff --git a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
index c500f410eb..1b5920ffcb 100644
--- a/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
+++ b/plugins/cost-insights/src/components/CurrencySelect/CurrencySelect.tsx
@@ -57,7 +57,6 @@ export const CurrencySelect = ({
       onChange={handleOnChange}
       value={currency.kind || NULL_VALUE}
       renderValue={renderValue}
-      style={{ marginRight: '15px' }}
     >
       {currencies.map((c: Currency) => (
         <MenuItem

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 4/4] 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>
   );
 };