Update cost insights select styles

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

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) => {

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"

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,