Keep select items order, make filter selector in Web admin always visible

src/components/Admin/Header/Greeting/Greeting.stories.tsx

@@ -16,20 +16,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Morning: Story = {
-  args: {
-    currentDateTime: new Date("1970-01-01T09:00:00Z").valueOf()
-  }
-};
-
-export const Afternoon: Story = {
-  args: {
-    currentDateTime: new Date("1970-01-01T14:00:00Z").valueOf()
-  }
-};
-
-export const Evening: Story = {
-  args: {
-    currentDateTime: new Date("1970-01-01T19:00:00Z").valueOf()
-  }
-};
+export const Default: Story = {};

src/components/Admin/Header/Greeting/index.tsx

@@ -1,6 +1,8 @@
+import { useEffect, useState } from "react";
 import { useGetUserProfileQuery } from "../../../../redux/services/digma";
 import * as s from "./styles";
-import type { GreetingProps } from "./types";
+
+const REFRESH_INTERVAL = 60 * 1000; // in milliseconds
 
 const getGreetingText = (dateTime: number) => {
   const currentHour = new Date(dateTime).getHours();
@@ -16,10 +18,19 @@ const getGreetingText = (dateTime: number) => {
   return `Good ${timeOfDay}`;
 };
 
-export const Greeting = ({ currentDateTime }: GreetingProps) => {
+export const Greeting = () => {
   const { data: userProfile } = useGetUserProfileQuery();
+  const [currentDateTime, setCurrentDateTime] = useState(Date.now());
   const greetingText = getGreetingText(currentDateTime);
 
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentDateTime(Date.now());
+    }, REFRESH_INTERVAL);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
   if (!userProfile) {
     return null;
   }

src/components/Admin/Header/EnvironmentSelect/index.tsx → src/components/Admin/Header/HeaderContent/EnvironmentSelect/index.tsx

@@ -2,19 +2,19 @@ import { useEffect, useMemo, useState } from "react";
 import {
   useAdminDispatch,
   useAdminSelector
-} from "../../../../containers/Admin/hooks";
-import { useGetEnvironmentsQuery } from "../../../../redux/services/digma";
-import { setSelectedEnvironmentId } from "../../../../redux/slices/issuesReportSlice";
-import { setEnvironmentId } from "../../../../redux/slices/scopeSlice";
-import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
-import { EnvironmentIcon } from "../../../common/EnvironmentIcon";
-import { ChevronIcon } from "../../../common/icons/16px/ChevronIcon";
-import { Direction } from "../../../common/icons/types";
-import { sortEnvironments } from "../../../common/IssuesReport/utils";
-import { NewPopover } from "../../../common/NewPopover";
-import { Tooltip } from "../../../common/v3/Tooltip";
-import { EnvironmentMenu } from "../../../Navigation/EnvironmentBar/EnvironmentMenu";
-import { trackingEvents } from "../../tracking";
+} from "../../../../../containers/Admin/hooks";
+import { useGetEnvironmentsQuery } from "../../../../../redux/services/digma";
+import { setSelectedEnvironmentId } from "../../../../../redux/slices/issuesReportSlice";
+import { setEnvironmentId } from "../../../../../redux/slices/scopeSlice";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { EnvironmentIcon } from "../../../../common/EnvironmentIcon";
+import { ChevronIcon } from "../../../../common/icons/16px/ChevronIcon";
+import { Direction } from "../../../../common/icons/types";
+import { sortEnvironments } from "../../../../common/IssuesReport/utils";
+import { NewPopover } from "../../../../common/NewPopover";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import { EnvironmentMenu } from "../../../../Navigation/EnvironmentBar/EnvironmentMenu";
+import { trackingEvents } from "../../../tracking";
 import * as s from "./styles";
 
 export const EnvironmentSelect = () => {

src/components/Admin/Header/EnvironmentSelect/styles.ts → src/components/Admin/Header/HeaderContent/EnvironmentSelect/styles.ts

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-
-import { subscriptBoldTypography } from "../../../common/App/typographies";
+import { subscriptBoldTypography } from "../../../../common/App/typographies";
 
 export const Button = styled.button`
   width: 180px;

src/components/Admin/Header/FilterMenu/FilterButton/index.tsx → src/components/Admin/Header/HeaderContent/FilterMenu/FilterButton/index.tsx

@@ -1,10 +1,11 @@
 import { type ForwardedRef, forwardRef } from "react";
-import { FunnelIcon } from "../../../../common/icons/16px/FunnelIcon";
-import { NewIconButton } from "../../../../common/v3/NewIconButton";
-import { Tooltip } from "../../../../common/v3/Tooltip";
+import { FunnelIcon } from "../../../../../common/icons/16px/FunnelIcon";
+import { NewIconButton } from "../../../../../common/v3/NewIconButton";
+import { Tooltip } from "../../../../../common/v3/Tooltip";
+import type { FilterButtonProps } from "./types";
 
 const FilterButtonComponent = (
-  props: { onClick: () => void; disabled?: boolean },
+  props: FilterButtonProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => (
   <div ref={ref}>
@@ -13,7 +14,8 @@ const FilterButtonComponent = (
         buttonType={"secondary"}
         icon={FunnelIcon}
         size={"large"}
-        {...props}
+        isDisabled={props.disabled}
+        onClick={props.onClick}
       />
     </Tooltip>
   </div>

src/components/Admin/Header/HeaderContent/FilterMenu/FilterButton/types.ts

@@ -0,0 +1,4 @@
+export interface FilterButtonProps {
+  onClick: () => void;
+  disabled?: boolean;
+}

src/components/Admin/Header/FilterMenu/index.tsx → src/components/Admin/Header/HeaderContent/FilterMenu/index.tsx

@@ -1,12 +1,14 @@
+import { useEffect } from "react";
 import {
   useAdminDispatch,
   useAdminSelector
-} from "../../../../containers/Admin/hooks";
-import { useGetEnvironmentServicesQuery } from "../../../../redux/services/digma";
-import { setSelectedServices } from "../../../../redux/slices/issuesReportSlice";
-import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
-import { Select } from "../../../common/v3/Select";
-import { trackingEvents } from "../../tracking";
+} from "../../../../../containers/Admin/hooks";
+import { usePrevious } from "../../../../../hooks/usePrevious";
+import { useGetEnvironmentServicesQuery } from "../../../../../redux/services/digma";
+import { setSelectedServices } from "../../../../../redux/slices/issuesReportSlice";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { Select } from "../../../../common/v3/Select";
+import { trackingEvents } from "../../../tracking";
 import { FilterButton } from "./FilterButton";
 
 export const FilterMenu = () => {
@@ -28,6 +30,16 @@ export const FilterMenu = () => {
       skip: !selectedEnvironmentId
     }
   );
+  const previousServices = usePrevious(services);
+
+  useEffect(() => {
+    if (services && previousServices !== services) {
+      const newSelectedServices = services.filter((x) =>
+        selectedServices.includes(x)
+      );
+      dispatch(setSelectedServices(newSelectedServices));
+    }
+  }, [services, previousServices, selectedServices, dispatch]);
 
   const handleSelectedServicesChange = (option: string | string[]) => {
     const newItem = Array.isArray(option) ? option : [option];

src/components/Admin/Header/HeaderContent/index.tsx

@@ -0,0 +1,23 @@
+import { useAdminSelector } from "../../../../containers/Admin/hooks";
+import { EnvironmentSelect } from "./EnvironmentSelect";
+import { FilterMenu } from "./FilterMenu";
+import * as s from "./styles";
+import type { HeaderContentProps } from "./types";
+
+export const HeaderContent = ({ children }: HeaderContentProps) => {
+  const environmentId = useAdminSelector(
+    (state) => state.codeIssuesReport.selectedEnvironmentId
+  );
+
+  return (
+    <s.Container>
+      {children}
+      {environmentId && (
+        <s.FilterContainer>
+          <EnvironmentSelect />
+          <FilterMenu />
+        </s.FilterContainer>
+      )}
+    </s.Container>
+  );
+};

src/components/Admin/Header/HeaderContent/styles.ts

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const FilterContainer = styled.div`
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 12px;
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+`;

src/components/Admin/Header/HeaderContent/types.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export interface HeaderContentProps {
+  children: ReactNode;
+}

src/components/Admin/Header/index.tsx

@@ -1,34 +1,27 @@
 import { Route, Routes } from "react-router-dom";
-import { useAdminSelector } from "../../../containers/Admin/hooks";
-import { EnvironmentSelect } from "./EnvironmentSelect";
-import { FilterMenu } from "./FilterMenu";
 import { Greeting } from "./Greeting";
+import { HeaderContent } from "./HeaderContent";
 import * as s from "./styles";
 
-export const Header = () => {
-  const environmentId = useAdminSelector(
-    (state) => state.codeIssuesReport.selectedEnvironmentId
-  );
-
-  return (
-    <s.Header>
-      <Routes>
-        <Route
-          path={"home"}
-          element={
-            <s.HomeHeader>
-              <Greeting currentDateTime={Date.now()} />
-              {environmentId && (
-                <s.FilterContainer>
-                  <EnvironmentSelect />
-                  <FilterMenu />
-                </s.FilterContainer>
-              )}
-            </s.HomeHeader>
-          }
-        />
-        <Route path={"reports/*"} element={<span>Reports</span>} />
-      </Routes>
-    </s.Header>
-  );
-};
+export const Header = () => (
+  <s.Header>
+    <Routes>
+      <Route
+        path={"home"}
+        element={
+          <HeaderContent>
+            <Greeting />
+          </HeaderContent>
+        }
+      />
+      <Route
+        path={"reports/*"}
+        element={
+          <HeaderContent>
+            <span>Reports</span>
+          </HeaderContent>
+        }
+      />
+    </Routes>
+  </s.Header>
+);

src/components/Admin/Header/styles.ts

@@ -4,24 +4,8 @@ import { heading1SemiboldTypography } from "../../common/App/typographies";
 export const Header = styled.header`
   ${heading1SemiboldTypography}
 
-  padding: 44px 44px 24px 24px;
+  padding: 44px 24px 24px;
   border-bottom: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
   box-sizing: border-box;
   color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
-
-export const HomeHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-`;
-
-export const FilterContainer = styled.div`
-  display: flex;
-  padding: 8px;
-  align-items: center;
-  gap: 8px;
-  border-radius: 12px;
-  background: ${({ theme }) => theme.colors.v3.surface.primary};
-`;

src/components/Admin/common/IssuesSidebarOverlay/IssuesSidebar/index.tsx

@@ -20,10 +20,10 @@ import { TwoVerticalLinesIcon } from "../../../../common/icons/16px/TwoVerticalL
 import { Pagination } from "../../../../common/Pagination";
 import { NewButton } from "../../../../common/v3/NewButton";
 import { NewIconButton } from "../../../../common/v3/NewIconButton";
-import { actions } from "../../../../Insights/actions";
 import { EmptyState } from "../../../../Insights/EmptyState";
 import { EmptyState as InsightsPageEmptyState } from "../../../../Insights/InsightsCatalog/InsightsPage/EmptyState";
 import { InsightCardRenderer } from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer";
+import { actions } from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/hooks/useDismissal";
 import { ViewMode } from "../../../../Insights/InsightsCatalog/types";
 import { InsightTicketRenderer } from "../../../../Insights/InsightTicketRenderer";
 import {
@@ -265,7 +265,6 @@ export const IssuesSidebar = ({
                     !isTransitioning &&
                     i === getInsightToShowJiraHint(data.insights)
                   }
-                  onRefresh={refresh}
                   isMarkAsReadButtonEnabled={false}
                   viewMode={"full"}
                   onDismissalChange={handleDismissalChange}
@@ -328,7 +327,6 @@ export const IssuesSidebar = ({
           <s.PopupContainer>
             <InsightTicketRenderer
               data={infoToOpenJiraTicket}
-              refreshInsights={refresh}
               onClose={handleJiraTicketPopupClose}
               backendInfo={about ?? null}
             />

src/components/Assets/AssetList/index.tsx

@@ -282,12 +282,13 @@ export const AssetList = ({
     });
   };
 
-  const handleSortingOrderToggleOptionButtonClick = (order: SORTING_ORDER) => {
-    setSorting({
-      ...sorting,
-      order
-    });
-  };
+  const handleSortingOrderToggleOptionButtonClick =
+    (order: SORTING_ORDER) => () => {
+      setSorting({
+        ...sorting,
+        order
+      });
+    };
 
   const renderContent = () => {
     if (isInitialLoading) {
@@ -390,9 +391,7 @@ export const AssetList = ({
                 <s.SortingOrderToggleOptionButton
                   key={order}
                   $selected={isSelected}
-                  onClick={() =>
-                    handleSortingOrderToggleOptionButtonClick(order)
-                  }
+                  onClick={handleSortingOrderToggleOptionButtonClick(order)}
                 >
                   <s.SortingOrderIconContainer $sortingOrder={order}>
                     <SortIcon color={"currentColor"} size={14} />

src/components/Dashboard/MetricsReport/index.tsx

@@ -198,6 +198,8 @@ export const MetricsReport = () => {
           onTimeModeChange={handleTimeModeChange}
           onViewModeChange={handleViewModeChange}
           onSelectedServiceChange={handleSelectedServiceChange}
+          showEnvironmentSelect={false}
+          showServicesSelect={false}
         />
         <s.Footer>
           <DigmaLogoIcon size={14} />

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

@@ -80,9 +80,7 @@ export const ReportHeader = ({
         onDownload={() => {
           // TODO: implement
         }}
-        onRefresh={() => {
-          handleRefresh();
-        }}
+        onRefresh={handleRefresh}
       />
       <s.FiltersContainer>
         <s.Background>