Merge pull request #3306 from backstage/remove-cur-feature-flag

Remove cur feature flag

.changeset/cost-insights-ten-carpets-return.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': minor
+---
+
+remove cost insights currency feature flag

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();
@@ -193,25 +192,24 @@ export const CostInsightsPage = () => {
       px={3}
       pt={6}
       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">
-        {featureFlags.isActive('cost-insights-currencies') && (
-          <Box mr={1}>
-            <CurrencySelect
-              currency={currency}
-              currencies={config.currencies}
-              onSelect={setCurrency}
-            />
-          </Box>
-        )}
+      <Box display="flex">
+        <Box mr={1}>
+          <CurrencySelect
+            currency={currency}
+            currencies={config.currencies}
+            onSelect={setCurrency}
+          />
+        </Box>
         <ProjectSelect
           project={pageFilters.project}
           projects={projects || []}

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>
   );
 };