From 1f80dd088965b4af3f891c2dd5575b66ac2a8583 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Tue, 22 Oct 2024 09:04:10 +0200
Subject: [PATCH 1/2] Disable Digma Metrics for private environments

---
 src/components/Navigation/KebabMenu/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx
index ba7f6c7fb..92bfd7b37 100644
--- a/src/components/Navigation/KebabMenu/index.tsx
+++ b/src/components/Navigation/KebabMenu/index.tsx
@@ -24,6 +24,7 @@ export const KebabMenu = ({ onClose }: KebabMenuProps) => {
   const { backendInfo, digmaStatus, environment } = useConfigSelector();
   const isDigmaMetricsEnabled =
     backendInfo?.centralize &&
+    environment?.type === "Public" &&
     getFeatureFlagValue(backendInfo, FeatureFlag.IS_METRICS_REPORT_ENABLED);
 
   const handleOnboardingClick = () => {

From 13ef5a09dfd907c07c3684ab713bc6c860d55d24 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Tue, 22 Oct 2024 09:49:31 +0200
Subject: [PATCH 2/2] Add tooltip, fix styles

---
 src/components/Navigation/KebabMenu/index.tsx | 15 ++++++++----
 .../Navigation/common/MenuList/index.tsx      | 13 +++++++---
 .../Navigation/common/MenuList/styles.ts      | 24 +++++++++++--------
 .../Navigation/common/MenuList/types.ts       |  3 +++
 .../common/icons/12px/MetricsIcon.tsx         |  2 +-
 5 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/Navigation/KebabMenu/index.tsx b/src/components/Navigation/KebabMenu/index.tsx
index 92bfd7b37..6b7c52a15 100644
--- a/src/components/Navigation/KebabMenu/index.tsx
+++ b/src/components/Navigation/KebabMenu/index.tsx
@@ -22,10 +22,11 @@ import { KebabMenuProps } from "./types";
 
 export const KebabMenu = ({ onClose }: KebabMenuProps) => {
   const { backendInfo, digmaStatus, environment } = useConfigSelector();
-  const isDigmaMetricsEnabled =
+  const isDigmaMetricsVisible =
     backendInfo?.centralize &&
-    environment?.type === "Public" &&
     getFeatureFlagValue(backendInfo, FeatureFlag.IS_METRICS_REPORT_ENABLED);
+  const isDigmaMetricsEnabled =
+    isDigmaMetricsVisible && environment?.type === "Public";
 
   const handleOnboardingClick = () => {
     sendUserActionTrackingEvent(trackingEvents.ONBOARDING_LINK_CLICKED);
@@ -130,12 +131,16 @@ export const KebabMenu = ({ onClose }: KebabMenuProps) => {
     });
   }
 
-  if (isDigmaMetricsEnabled) {
+  if (isDigmaMetricsVisible) {
     items.push({
       id: "metrics",
       label: "Digma Metrics",
-      icon: <MetricsIcon size={16} color={"currentColor"} />,
-      onClick: handleReportClick
+      icon: <MetricsIcon color={"currentColor"} />,
+      onClick: handleReportClick,
+      tooltip: !isDigmaMetricsEnabled
+        ? "Available for CI/Prod environments only"
+        : undefined,
+      isDisabled: !isDigmaMetricsEnabled
     });
   }
 
diff --git a/src/components/Navigation/common/MenuList/index.tsx b/src/components/Navigation/common/MenuList/index.tsx
index f44d6ccb2..6bdbc40b5 100644
--- a/src/components/Navigation/common/MenuList/index.tsx
+++ b/src/components/Navigation/common/MenuList/index.tsx
@@ -30,10 +30,17 @@ export const MenuList = ({
           return item.customContent ? (
             <li key={item.id}>{item.customContent}</li>
           ) : (
-            <Tooltip title={item.label} key={item.id}>
-              <s.ListItem $isHighlighted={isHighlighted} onClick={item.onClick}>
+            <Tooltip title={item.tooltip ?? item.label} key={item.id}>
+              <s.ListItem
+                $isHighlighted={isHighlighted}
+                onClick={item.onClick}
+                $isDisabled={item.isDisabled}
+              >
                 {item.icon && (
-                  <s.ListItemIconContainer $isHighlighted={isHighlighted}>
+                  <s.ListItemIconContainer
+                    $isHighlighted={isHighlighted}
+                    $isDisabled={item.isDisabled}
+                  >
                     {item.icon}
                   </s.ListItemIconContainer>
                 )}
diff --git a/src/components/Navigation/common/MenuList/styles.ts b/src/components/Navigation/common/MenuList/styles.ts
index 2779a35f2..bf226a020 100644
--- a/src/components/Navigation/common/MenuList/styles.ts
+++ b/src/components/Navigation/common/MenuList/styles.ts
@@ -58,19 +58,23 @@ export const ListItem = styled.li<ListItemProps>`
 
 export const ListItemIconContainer = styled.div<ListItemIconContainerProps>`
   display: flex;
-  color: ${({ theme, $isHighlighted }) =>
-    $isHighlighted
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: ${({ theme, $isHighlighted, $isDisabled }) =>
+    $isDisabled
+      ? theme.colors.v3.icon.disabled
+      : $isHighlighted
       ? theme.colors.v3.icon.brandTertiary
       : theme.colors.v3.icon.tertiary};
 
-  &:disabled {
-    color: ${({ theme }) => theme.colors.v3.icon.disabled};
-  }
-
-  &:hover:enabled,
-  &:active:enabled {
-    color: ${({ theme, $isHighlighted }) =>
-      $isHighlighted
+  &:hover,
+  &:active {
+    color: ${({ theme, $isHighlighted, $isDisabled }) =>
+      $isDisabled
+        ? theme.colors.v3.icon.disabled
+        : $isHighlighted
         ? theme.colors.v3.icon.brandTertiary
         : theme.colors.v3.icon.primary};
   }
diff --git a/src/components/Navigation/common/MenuList/types.ts b/src/components/Navigation/common/MenuList/types.ts
index 6f16179db..1a16b9ef6 100644
--- a/src/components/Navigation/common/MenuList/types.ts
+++ b/src/components/Navigation/common/MenuList/types.ts
@@ -6,6 +6,7 @@ export interface MenuListProps {
   showGroupDividers?: boolean;
   highlightSelected?: boolean;
   header?: ReactNode;
+  isDisabled?: boolean;
 }
 
 export interface ListItemProps {
@@ -15,6 +16,7 @@ export interface ListItemProps {
 
 export interface ListItemIconContainerProps {
   $isHighlighted?: boolean;
+  $isDisabled?: boolean;
 }
 
 export interface MenuItem {
@@ -26,4 +28,5 @@ export interface MenuItem {
   isDisabled?: boolean;
   groupName?: string;
   isSelected?: boolean;
+  tooltip?: string;
 }
diff --git a/src/components/common/icons/12px/MetricsIcon.tsx b/src/components/common/icons/12px/MetricsIcon.tsx
index c1b0dc661..2c7349ae1 100644
--- a/src/components/common/icons/12px/MetricsIcon.tsx
+++ b/src/components/common/icons/12px/MetricsIcon.tsx
@@ -6,7 +6,7 @@ const MetricsIconComponent = (props: IconProps) => {
   const { size, color } = useIconProps(props);
 
   return (
-    <svg width={size} height={size} fill="none">
+    <svg width={size} height={size} fill="none" viewBox="0 0 12 12">
       <path
         stroke={color}
         strokeLinecap="round"