From d0241306fa1ed6736ca38f4c079828b169422d5b Mon Sep 17 00:00:00 2001
From: Brenda Sukh <bsukh@spotify.com>
Date: Wed, 7 Oct 2020 14:54:37 -0400
Subject: [PATCH] Update cost insights select styles

---
 .../src/components/CostInsightsPage/selector.tsx         | 9 ++++++++-
 .../ProductInsightsCard/ProductInsightsCard.tsx          | 4 +++-
 .../src/components/ProjectSelect/ProjectSelect.tsx       | 2 +-
 plugins/cost-insights/src/utils/styles.ts                | 1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/plugins/cost-insights/src/components/CostInsightsPage/selector.tsx b/plugins/cost-insights/src/components/CostInsightsPage/selector.tsx
index 51db47c082..8a9cf021c9 100644
--- a/plugins/cost-insights/src/components/CostInsightsPage/selector.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsPage/selector.tsx
@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 import { MapLoadingToProps } from '../../hooks';
-import { getResetState, DefaultLoadingAction } from '../../types';
+import {
+  getResetState,
+  DefaultLoadingAction,
+  getResetStateWithoutInitial,
+} from '../../types';
 
 type CostInsightsPageLoadingProps = {
   loadingActions: Array<string>;
@@ -23,6 +27,7 @@ type CostInsightsPageLoadingProps = {
   dispatchInitial: (isLoading: boolean) => void;
   dispatchInsights: (isLoading: boolean) => void;
   dispatchNone: (loadingActions: string[]) => void;
+  dispatchReset: (loadingActions: string[]) => void;
 };
 
 export const mapLoadingToProps: MapLoadingToProps<CostInsightsPageLoadingProps> = ({
@@ -39,4 +44,6 @@ export const mapLoadingToProps: MapLoadingToProps<CostInsightsPageLoadingProps>
     dispatch({ [DefaultLoadingAction.CostInsightsPage]: isLoading }),
   dispatchNone: (loadingActions: string[]) =>
     dispatch(getResetState(loadingActions)),
+  dispatchReset: (loadingActions: string[]) =>
+    dispatch(getResetStateWithoutInitial(loadingActions)),
 });
diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx
index 1d24139c64..c9790a5bfa 100644
--- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx
+++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx
@@ -39,7 +39,7 @@ const ProductInsightsCard = ({ product }: ProductInsightsCardProps) => {
   const [resource, setResource] = useState<Maybe<ProductCost>>(null);
   const [error, setError] = useState<Maybe<Error>>(null);
 
-  const { group, product: productFilter, setProduct } = useFilters(
+  const { group, product: productFilter, setProduct, project } = useFilters(
     mapFiltersToProps(product.kind),
   );
   const { loadingProduct, dispatchLoading } = useLoading(
@@ -68,6 +68,7 @@ const ProductInsightsCard = ({ product }: ProductInsightsCardProps) => {
             product.kind,
             group!,
             productFilter!.duration,
+            project,
           );
           setResource(p);
         } catch (e) {
@@ -87,6 +88,7 @@ const ProductInsightsCard = ({ product }: ProductInsightsCardProps) => {
     productFilter,
     group,
     product.kind,
+    project,
   ]);
 
   const onPeriodSelect = (duration: Duration) => {
diff --git a/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx b/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx
index cbcd8ede4e..934ad99f63 100644
--- a/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx
+++ b/plugins/cost-insights/src/components/ProjectSelect/ProjectSelect.tsx
@@ -48,7 +48,7 @@ const ProjectSelect = ({ project, projects, onSelect }: ProjectSelectProps) => {
     <Select
       className={classes.select}
       variant="outlined"
-      value={project}
+      value={project || 'all'}
       renderValue={renderValue}
       onChange={handleOnChange}
       data-testid="project-filter-select"
diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts
index e6b38ee719..1777d385f8 100644
--- a/plugins/cost-insights/src/utils/styles.ts
+++ b/plugins/cost-insights/src/utils/styles.ts
@@ -385,6 +385,7 @@ export const useSelectStyles = makeStyles<BackstageTheme>(
       select: {
         minWidth: 200,
         textAlign: 'start',
+        backgroundColor: theme.palette.background.paper,
       },
       menuItem: {
         minWidth: 200,