Make Recent activity environment panel sticky

src/components/Insights/EndpointNPlusOneInsight/EndpointNPlusOneInsight.stories.tsx

@@ -82,7 +82,7 @@ export const Default: Story = {
       ],
       environment: "SAMPLE_ENV",
       severity: 0,
-      isRecalculateEnabled: false,
+      isRecalculateEnabled: true,
       prefixedCodeObjectId:
         "method:org.springframework.samples.petclinic.sample.SampleInsightsController$_$genNPlusOneWithoutInternalSpan",
       customStartTime: null,

src/components/Insights/types.ts

@@ -503,6 +503,7 @@ export interface EndpointSuspectedNPlusOneInsight extends EndpointInsight {
   category: InsightCategory.Performance;
   specifity: InsightSpecificity.TargetAndReasonFound;
   importance: InsightImportance.HighlyImportant;
+  isRecalculateEnabled: true;
   spans: {
     occurrences: number;
     internalSpan: SpanInfo | null;

src/components/Notifications/index.tsx

@@ -150,7 +150,7 @@ export const Notifications = (props: NotificationsProps) => {
     }
 
     setData(props.data);
-  }, [data, props.data]);
+  }, [props.data]);
 
   useEffect(() => {
     if (!previousData && data) {

src/components/RecentActivity/EnvironmentInstructionsPanel/index.tsx

@@ -168,7 +168,9 @@ export OTEL_RESOURCE_ATTRIBUTES=digma.environment=${props.environment.originalNa
   return (
     <s.Container>
       <s.Header>
-        <content.icon size={16} color={"currentColor"} />
+        <s.IconContainer>
+          <content.icon size={16} color={"currentColor"} />
+        </s.IconContainer>
         {content.title}
       </s.Header>
       {props.environment.type === "shared" && (

src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts

@@ -35,6 +35,11 @@ export const Header = styled.div`
   }};
 `;
 
+export const IconContainer = styled.div`
+  display: flex;
+  align-self: center;
+`;
+
 export const ContentContainer = styled.div`
   display: flex;
   gap: 12px;

src/components/RecentActivity/RecentActivityTable/styles.ts

@@ -1,10 +1,13 @@
 import styled from "styled-components";
 import { getCodeFont } from "../../common/App/styles";
 import { Link } from "../../common/Link";
+import { HEADER_HEIGHT } from "../styles";
+
+export const TABLE_BORDER_SPACING = 4; // in pixels;
 
 export const Table = styled.table`
   width: 100%;
-  border-spacing: 0 4px;
+  border-spacing: 0 ${TABLE_BORDER_SPACING}px;
   font-size: 14px;
   color: ${({ theme }) => {
     switch (theme.mode) {
@@ -19,6 +22,9 @@ export const Table = styled.table`
 `;
 
 export const TableHead = styled.thead`
+  position: sticky;
+  top: ${HEADER_HEIGHT + TABLE_BORDER_SPACING}px;
+  z-index: 1;
   font-size: 14px;
   height: 28px;
   color: ${({ theme }) => {
@@ -31,6 +37,36 @@ export const TableHead = styled.thead`
         return "#b4b8bf";
     }
   }};
+  box-shadow: -12px -${TABLE_BORDER_SPACING}px 0 ${({ theme }) => {
+        switch (theme.mode) {
+          case "light":
+            return "#f7f8fa";
+          case "dark":
+            return "#0f0f0f";
+          case "dark-jetbrains":
+            return "#2b2d30";
+        }
+      }},
+    0 -${TABLE_BORDER_SPACING}px 0 ${({ theme }) => {
+        switch (theme.mode) {
+          case "light":
+            return "#f7f8fa";
+          case "dark":
+            return "#0f0f0f";
+          case "dark-jetbrains":
+            return "#2b2d30";
+        }
+      }};
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#f7f8fa";
+      case "dark":
+        return "#0f0f0f";
+      case "dark-jetbrains":
+        return "#2b2d30";
+    }
+  }};
 `;
 
 export const TableHeaderCell = styled.th`
@@ -155,8 +191,21 @@ export const ListContainer = styled.div`
 `;
 
 export const ListHeader = styled.div`
-  margin: 12px 0 8px;
-  padding-left: 12px;
+  position: sticky;
+  top: ${HEADER_HEIGHT}px;
+  z-index: 1;
+  padding: 12px 0 8px 12px;
+  box-shadow: -12px 0 0
+    ${({ theme }) => {
+      switch (theme.mode) {
+        case "light":
+          return "#f7f8fa";
+        case "dark":
+          return "#0f0f0f";
+        case "dark-jetbrains":
+          return "#2b2d30";
+      }
+    }};
   font-size: 14px;
   color: ${({ theme }) => {
     switch (theme.mode) {
@@ -168,6 +217,16 @@ export const ListHeader = styled.div`
         return "#b4b8bf";
     }
   }};
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#f7f8fa";
+      case "dark":
+        return "#0f0f0f";
+      case "dark-jetbrains":
+        return "#2b2d30";
+    }
+  }};
 `;
 
 export const List = styled.ul`

src/components/RecentActivity/index.tsx

@@ -369,7 +369,9 @@ export const RecentActivity = (props: RecentActivityProps) => {
     ) {
       return (
         <>
-          <s.Header>Recent Activity</s.Header>
+          <s.RecentActivityTableTitle>
+            Recent Activity
+          </s.RecentActivityTableTitle>
           {renderNoData()}
         </>
       );
@@ -390,16 +392,20 @@ export const RecentActivity = (props: RecentActivityProps) => {
     <s.Container>
       <Allotment defaultSizes={[70, 30]}>
         <s.RecentActivityContainer id={RECENT_ACTIVITY_CONTAINER_ID}>
-          <EnvironmentPanel
-            environments={environments}
-            viewMode={viewMode}
-            selectedEnvironment={selectedEnvironment}
-            onEnvironmentSelect={handleEnvironmentSelect}
-            onViewModeChange={handleViewModeChange}
-            onEnvironmentAdd={handleEnvironmentAdd}
-            onEnvironmentDelete={handleEnvironmentDelete}
-          />
-          {renderContent()}
+          <s.RecentActivityHeader>
+            <EnvironmentPanel
+              environments={environments}
+              viewMode={viewMode}
+              selectedEnvironment={selectedEnvironment}
+              onEnvironmentSelect={handleEnvironmentSelect}
+              onViewModeChange={handleViewModeChange}
+              onEnvironmentAdd={handleEnvironmentAdd}
+              onEnvironmentDelete={handleEnvironmentDelete}
+            />
+          </s.RecentActivityHeader>
+          <s.RecentActivityContentContainer>
+            {renderContent()}
+          </s.RecentActivityContentContainer>
         </s.RecentActivityContainer>
         <Allotment.Pane visible={Boolean(liveData)} minSize={450}>
           {liveData && (

src/components/RecentActivity/styles.ts

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import { Button } from "../common/Button";
 
+export const HEADER_HEIGHT = 64; // in pixels;
+
 export const Container = styled.div`
   height: 100%;
   position: relative;
@@ -39,15 +41,37 @@ export const Container = styled.div`
   }
 `;
 
-export const RecentActivityContainer = styled.div`
+export const RecentActivityHeader = styled.div`
+  height: ${HEADER_HEIGHT}px;
+  box-sizing: border-box;
   padding: 12px;
+  padding-right: 24px;
+  z-index: 1;
+  position: sticky;
+  top: 0;
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#f7f8fa";
+      case "dark":
+        return "#0f0f0f";
+      case "dark-jetbrains":
+        return "#2b2d30";
+    }
+  }};
+`;
+
+export const RecentActivityContainer = styled.div`
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
-  padding-right: 24px;
 `;
 
-export const Header = styled.div`
+export const RecentActivityContentContainer = styled.div`
+  padding: 0 24px 12px 12px;
+`;
+
+export const RecentActivityTableTitle = styled.div`
   margin: 12px 0 8px;
   padding-left: 12px;
   font-weight: 400;
@@ -131,4 +155,5 @@ export const Overlay = styled.div`
   justify-content: center;
   padding: 80px 0;
   overflow: auto;
+  z-index: 2;
 `;

src/components/common/App/styles.ts

@@ -7,6 +7,11 @@ import {
 import { os } from "../../../os";
 import { platform } from "../../../platform";
 
+export const LAYERS = {
+  MODAL: 1000,
+  TOOLTIP: 2000
+};
+
 export const getMainFont = (customFont: string): FlattenSimpleInterpolation => {
   const customFontString = customFont ? `"${customFont}"` : "";
 

src/components/common/NewPopover/index.tsx

@@ -14,6 +14,7 @@ import {
 } from "@floating-ui/react";
 import { Children, cloneElement, useRef } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
+import { LAYERS } from "../App/styles";
 import { PopoverProps } from "./types";
 
 // in pixels
@@ -111,7 +112,8 @@ export const NewPopover = (props: PopoverProps) => {
           <div
             ref={refs.setFloating}
             style={{
-              ...floatingStyles
+              ...floatingStyles,
+              zIndex: LAYERS.MODAL
             }}
             {...getFloatingProps()}
           >

src/components/common/Tooltip/styles.ts

@@ -1,11 +1,13 @@
 import styled from "styled-components";
+import { LAYERS } from "../App/styles";
 
 export const TooltipContainer = styled.div`
   padding: 8px;
   border-radius: 4px;
   box-shadow: 0 0 6px 0 rgba(0 0 0 / 15%);
   font-size: 14px;
   word-break: break-all;
+  z-index: ${LAYERS.TOOLTIP};
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":