Fixed selector styles

src/actions.ts

@@ -27,6 +27,7 @@ export const actions = addPrefix(ACTION_PREFIX, {
   SET_BACKEND_INFO: "SET_BACKEND_INFO",
   PERSONALIZE_REGISTER: "PERSONALIZE_REGISTER",
   SET_ENVIRONMENTS: "SET_ENVIRONMENTS",
+  GET_ENVIRONMENTS: "GET_ENVIRONMENTS",
   SET_IS_MICROMETER_PROJECT: "SET_IS_MICROMETER_PROJECT",
   SAVE_TO_PERSISTENCE: "SAVE_TO_PERSISTENCE",
   GET_FROM_PERSISTENCE: "GET_FROM_PERSISTENCE",

src/components/Dashboard/Report/ReportHeader/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { actions as globalActions } from "../../../../actions";
 import { useGlobalStore } from "../../../../containers/Main/stores/useGlobalStore";
 import {
   DataFetcherConfiguration,
@@ -19,18 +20,26 @@ const baseFetchConfig = {
   refreshOnPayloadChange: true
 };
 
-const dataFetcherIssuesStatsConfiguration: DataFetcherConfiguration = {
+const dataFetcherFiltersConfiguration: DataFetcherConfiguration = {
   requestAction: actions.GET_SERVICES,
   responseAction: actions.SET_SERVICES,
   ...baseFetchConfig
 };
 
+const refreshEnvList = () => {
+  window.sendMessageToDigma({
+    action: globalActions.GET_ENVIRONMENTS
+  });
+};
+
 export const ReportHeader = ({
   onRefresh,
   onFilterChanged
 }: ReportHeaderProps) => {
   const [selectedServices, setSelectedServices] = useState<string[]>([]);
-  const [selectedEnvironment, setSelectedEnvironment] = useState<string>("");
+  const [selectedEnvironment, setSelectedEnvironment] = useState<string | null>(
+    null
+  );
   const environments = useGlobalStore.use.environments();
   const handleSelectedEnvironmentChanged = (option: string | string[]) => {
     const newItem =
@@ -59,20 +68,26 @@ export const ReportHeader = ({
   const { data: services, getData } = useFetchData<
     GetServicesPayload,
     string[]
-  >(dataFetcherIssuesStatsConfiguration, getServicesPayload);
+  >(dataFetcherFiltersConfiguration, getServicesPayload);
 
   useEffect(() => {
     getData();
   }, []);
 
+  const handleRefresh = () => {
+    getData();
+    onRefresh();
+    refreshEnvList();
+  };
+
   return (
     <s.Container>
       <Ribbon
         onDownload={() => {
           // TODO
         }}
         onRefresh={() => {
-          onRefresh();
+          handleRefresh();
         }}
       />
       <s.FiltersContainer>

src/components/Dashboard/Report/types.ts

@@ -1,5 +1,5 @@
 export interface ReportFilterQuery {
-  environmentId: string;
+  environmentId: string | null;
   services: string[];
 }
 
@@ -22,5 +22,5 @@ export interface AssetCategory {
 }
 
 export interface GetServicesPayload {
-  environment: string;
+  environment: string | null;
 }

src/components/Insights/Issues/IssuesFilter/styles.ts

@@ -56,6 +56,8 @@ export const Footer = styled.div`
 `;
 
 export const ClearAllButton = styled(NewButton)`
+  padding: 0;
+
   span {
     color: ${({ theme }) => theme.colors.v3.status.high};
   }

src/components/common/icons/CheckmarkIcon.tsx

@@ -4,16 +4,19 @@ import { IconProps } from "./types";
 
 interface CheckmarkIconComponentProps extends IconProps {
   height?: number;
+  width?: number;
 }
 
 const CheckmarkIconComponent = (props: CheckmarkIconComponentProps) => {
   const { color } = useIconProps(props);
   const height = props.height ?? 4;
+  const width = props.width ?? 6;
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       height={height}
+      width={width}
       fill="none"
       viewBox="0 0 6 4"
     >

src/components/common/v3/Checkmark/index.tsx

@@ -18,7 +18,7 @@ export const Checkmark = ({ onChange, value, disabled }: CheckmarkProps) => {
       />
       {value && (
         <s.CheckmarkContainer>
-          <CheckmarkIcon color={"currentColor"} height={5} />
+          <CheckmarkIcon color={"currentColor"} height={10} width={10} />
         </s.CheckmarkContainer>
       )}
     </s.Container>

src/components/common/v3/Checkmark/styles.ts

@@ -20,8 +20,8 @@ export const Checkmark = styled.input`
   margin: 1px;
   cursor: pointer;
   border: 1px solid ${({ theme }) => theme.colors.v3.surface.highlight};
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border-radius: 4px;
   background: ${({ theme }) => theme.colors.v3.surface.highlight};
 

src/components/common/v3/Select/styles.ts

@@ -1,7 +1,8 @@
 import styled from "styled-components";
 import {
   bodyRegularTypography,
-  footnoteRegularTypography
+  footnoteRegularTypography,
+  subscriptRegularTypography
 } from "../../App/typographies";
 import {
   ButtonProps,
@@ -10,6 +11,7 @@ import {
 } from "./types";
 
 export const Button = styled.button<ButtonProps>`
+  height: 28px;
   border: 1px solid
     ${({ theme, $isActive }) =>
       $isActive
@@ -48,7 +50,7 @@ export const Button = styled.button<ButtonProps>`
 `;
 
 export const ButtonLabel = styled.span`
-  ${footnoteRegularTypography}
+  ${subscriptRegularTypography}
   margin-right: auto;
   text-overflow: ellipsis;
   overflow: hidden;