Add Top issues widget

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

@@ -0,0 +1,65 @@
+import { useEffect, useMemo } from "react";
+import {
+  useAdminDispatch,
+  useAdminSelector
+} from "../../../../containers/Admin/hooks";
+import { useGetEnvironmentsQuery } from "../../../../redux/services/digma";
+import { setEnvironmentId } from "../../../../redux/slices/scopeSlice";
+import { CodeIcon } from "../../../common/icons/12px/CodeIcon";
+import { InfinityIcon } from "../../../common/icons/InfinityIcon";
+import { sortEnvironments } from "../../../common/IssuesReport/utils";
+import * as s from "./styles";
+
+export const EnvironmentSelect = () => {
+  const { data: environments } = useGetEnvironmentsQuery();
+  const sortedEnvironments = useMemo(
+    () => sortEnvironments(environments ?? []),
+    [environments]
+  );
+  const selectedEnvironmentId = useAdminSelector(
+    (state) => state.scope.environmentId
+  );
+  const selectedEnvironment = useMemo(
+    () =>
+      sortedEnvironments?.find((x) => x.id === selectedEnvironmentId) ?? null,
+    [selectedEnvironmentId, sortedEnvironments]
+  );
+  const dispatch = useAdminDispatch();
+
+  const handleEnvironmentChanged = (option: string | string[]) => {
+    const newItem = Array.isArray(option) ? option[0] : option;
+    dispatch(setEnvironmentId(newItem));
+  };
+
+  useEffect(() => {
+    if (
+      sortedEnvironments &&
+      sortedEnvironments.length > 0 &&
+      !selectedEnvironmentId
+    ) {
+      dispatch(setEnvironmentId(sortedEnvironments[0].id));
+    }
+  }, [dispatch, sortedEnvironments, selectedEnvironmentId]);
+
+  return (
+    <s.Select
+      items={sortedEnvironments.map((x) => ({
+        label: x.name,
+        value: x.id,
+        enabled: true,
+        selected: x.id === selectedEnvironmentId
+      }))}
+      showSelectedState={true}
+      icon={(props) =>
+        selectedEnvironment?.type === "Public" ? (
+          <InfinityIcon {...props} size={12} />
+        ) : (
+          <CodeIcon {...props} size={12} />
+        )
+      }
+      onChange={handleEnvironmentChanged}
+      placeholder={selectedEnvironment?.name ?? "Select Environments"}
+      disabled={sortedEnvironments.length === 0}
+    />
+  );
+};

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+import { Select as CommonSelect } from "../../../common/v3/Select";
+
+export const Select = styled(CommonSelect)`
+  width: 180px;
+`;

src/components/Admin/Header/index.tsx

@@ -1,4 +1,5 @@
 import { Route, Routes } from "react-router-dom";
+import { EnvironmentSelect } from "./EnvironmentSelect";
 import { Greeting } from "./Greeting";
 import * as s from "./styles";
 
@@ -7,7 +8,12 @@ export const Header = () => (
     <Routes>
       <Route
         path={"home"}
-        element={<Greeting currentDateTime={Date.now()} />}
+        element={
+          <s.HomeHeader>
+            <Greeting currentDateTime={Date.now()} />
+            <EnvironmentSelect />
+          </s.HomeHeader>
+        }
       />
       <Route path={"reports/*"} element={<span>Reports</span>} />
     </Routes>

src/components/Admin/Header/styles.ts

@@ -10,3 +10,10 @@ export const Header = styled.header`
   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;
+`;

src/components/Admin/Home/Overview/OverviewWidget/styles.ts

@@ -4,10 +4,7 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding: 16px;
-  gap: 8px;
   border-radius: 12px;
-  width: 279px;
-  height: 108px;
   border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
   flex-shrink: 0;
   box-sizing: border-box;

src/components/Admin/Home/Overview/TopIssuesWidget/index.tsx

@@ -0,0 +1,93 @@
+import { useTheme } from "styled-components";
+import { useAdminSelector } from "../../../../../containers/Admin/hooks";
+import { getFeatureFlagValue } from "../../../../../featureFlags";
+import { useGetAboutQuery } from "../../../../../redux/services/digma";
+import { FeatureFlag } from "../../../../../types";
+import { getThemeKind } from "../../../../common/App/styles";
+import { WarningTriangleIcon } from "../../../../common/icons/12px/WarningTriangleIcon";
+import { MeterHighIcon } from "../../../../common/icons/16px/MeterHighIcon";
+import { ChevronIcon } from "../../../../common/icons/20px/ChevronIcon";
+import { Direction } from "../../../../common/icons/types";
+import { OverviewWidget } from "../OverviewWidget";
+import * as s from "./styles";
+import type { TopIssuesWidgetProps } from "./types";
+
+const ISSUES_LIMIT = 10;
+
+export const TopIssuesWidget = ({ onGetIssues }: TopIssuesWidgetProps) => {
+  const theme = useTheme();
+  const themeKind = getThemeKind(theme);
+  const environmentId = useAdminSelector((state) => state.scope.environmentId);
+
+  const handleByCriticalityButtonClick = () => {
+    onGetIssues({
+      query: {
+        environment: environmentId ?? undefined
+      },
+      limit: ISSUES_LIMIT
+    });
+  };
+
+  const handleBySeverityButtonClick = () => {
+    onGetIssues({
+      query: {
+        environment: environmentId ?? undefined,
+        sortBy: "severity"
+      },
+      limit: ISSUES_LIMIT
+    });
+  };
+
+  const { data: about } = useGetAboutQuery();
+
+  const isBySeverityButtonVisible = Boolean(
+    about &&
+      getFeatureFlagValue(
+        about,
+        FeatureFlag.IS_INSIGHT_SEVERITY_SORTING_ENABLED
+      )
+  );
+
+  return (
+    <OverviewWidget>
+      <s.Container>
+        <s.Title>Top 10 Issues</s.Title>
+        <s.ButtonsContainer>
+          <s.ByCriticalityButton onClick={handleByCriticalityButtonClick}>
+            <s.IconContainer>
+              <MeterHighIcon size={16} color={"currentColor"} />
+            </s.IconContainer>
+            By Criticality
+            <s.ChevronIconContainer>
+              <ChevronIcon
+                size={20}
+                direction={Direction.RIGHT}
+                color={"currentColor"}
+              />
+            </s.ChevronIconContainer>
+          </s.ByCriticalityButton>
+          {isBySeverityButtonVisible && (
+            <>
+              <s.Divider
+                src={`/assets/images/admin/home/overviewWidgetMetricsDivider_${themeKind}.svg`}
+              />
+              <s.BySeverityButton onClick={handleBySeverityButtonClick}>
+                <s.IconContainer>
+                  <WarningTriangleIcon size={16} color={"currentColor"} />
+                </s.IconContainer>
+                By Severity
+                <s.ChevronIconContainer>
+                  <ChevronIcon
+                    size={20}
+                    direction={Direction.RIGHT}
+                    color={"currentColor"}
+                  />
+                </s.ChevronIconContainer>
+              </s.BySeverityButton>
+            </>
+          )}
+        </s.ButtonsContainer>
+      </s.Container>
+    </OverviewWidget>
+  );
+};

src/components/Admin/Home/Overview/TopIssuesWidget/styles.ts

@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import {
+  subheading1MediumTypography,
+  subheading2RegularTypography
+} from "../../../../common/App/typographies";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-grow: 1;
+`;
+
+export const Title = styled.span`
+  ${subheading1MediumTypography}
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  align-items: flex-end;
+`;
+
+export const IconContainer = styled.span`
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+`;
+
+export const Button = styled.button`
+  ${subheading2RegularTypography}
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  text-transform: capitalize;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const ByCriticalityButton = styled(Button)`
+  padding-right: 10px;
+`;
+
+export const BySeverityButton = styled(Button)`
+  padding-left: 23px;
+`;
+
+export const ChevronIconContainer = styled.div`
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+`;
+
+export const Divider = styled.img`
+  width: 20px;
+  height: 69px;
+`;

src/components/Admin/Home/Overview/TopIssuesWidget/types.ts

@@ -0,0 +1,5 @@
+import type { IssuesSidebarQuery } from "../../../common/IssuesSidebarOverlay/types";
+
+export interface TopIssuesWidgetProps {
+  onGetIssues: (query: IssuesSidebarQuery) => void;
+}

src/components/Admin/Home/Overview/index.tsx

@@ -2,24 +2,23 @@ import { useTheme } from "styled-components";
 import { getThemeKind } from "../../../common/App/styles";
 import { HomeSection } from "../HomeSection";
 import * as s from "./styles";
+import { TopIssuesWidget } from "./TopIssuesWidget";
+import type { OverviewProps } from "./types";
 
-export const Overview = () => {
+export const Overview = ({ onGetIssues }: OverviewProps) => {
   const theme = useTheme();
   const themeKind = getThemeKind(theme);
 
   return (
     <HomeSection title={"Overview"}>
       <s.WidgetsContainer>
-        {Array(4)
-          .fill(null)
-          .map((_, i) => (
-            <s.OverviewWidgetPlaceholderImage
-              key={i}
-              src={`/assets/images/admin/home/placeholders/overviewWidgetPlaceholder${
-                i + 1
-              }_${themeKind}.svg`}
-            />
-          ))}
+        <TopIssuesWidget onGetIssues={onGetIssues} />
+        {[1, 2, 3].map((x) => (
+          <s.OverviewWidgetPlaceholderImage
+            key={x}
+            src={`/assets/images/admin/home/placeholders/overviewWidgetPlaceholder${x}_${themeKind}.svg`}
+          />
+        ))}
       </s.WidgetsContainer>
     </HomeSection>
   );

src/components/Admin/Home/Overview/types.ts

@@ -0,0 +1,5 @@
+import type { IssuesSidebarQuery } from "../../common/IssuesSidebarOverlay/types";
+
+export interface OverviewProps {
+  onGetIssues: (query: IssuesSidebarQuery) => void;
+}

src/components/Admin/Home/index.tsx

@@ -1,12 +1,33 @@
+import { useState } from "react";
+import { IssuesSidebarOverlay } from "../common/IssuesSidebarOverlay";
+import type { IssuesSidebarQuery } from "../common/IssuesSidebarOverlay/types";
 import { Environments } from "./Environments";
 import { Overview } from "./Overview";
 import { Reports } from "./Reports";
 import * as s from "./styles";
 
-export const Home = () => (
-  <s.Container>
-    <Overview />
-    <Reports />
-    <Environments />
-  </s.Container>
-);
+export const Home = () => {
+  const [issuesSidebarQuery, setIssuesSidebarQuery] =
+    useState<IssuesSidebarQuery>();
+
+  const handleIssuesSidebarClose = () => {
+    setIssuesSidebarQuery(undefined);
+  };
+
+  const handleGetIssues = (query: IssuesSidebarQuery) => {
+    setIssuesSidebarQuery(query);
+  };
+
+  return (
+    <s.Container>
+      <Overview onGetIssues={handleGetIssues} />
+      <Reports />
+      <Environments />
+      <IssuesSidebarOverlay
+        issuesSidebarQuery={issuesSidebarQuery}
+        isSidebarOpen={Boolean(issuesSidebarQuery)}
+        onSidebarClose={handleIssuesSidebarClose}
+      />
+    </s.Container>
+  );
+};