From a98a7ed8f4fd0afc2626bb0c88d21a2d12d002f0 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 02:49:54 +0200
Subject: [PATCH 1/7] Update Button styles

---
 .vscode/settings.json                         |   3 +-
 .../SpanScalingInsightCard/index.tsx          |   1 +
 .../common/InsightCard/ActionButton/index.tsx |  38 +++
 .../common/InsightCard/ActionButton/types.ts  |  13 +
 .../insightCards/common/InsightCard/index.tsx | 208 ++++++------
 .../insightCards/common/InsightCard/styles.ts |  10 +-
 .../insightCards/common/InsightCard/types.ts  |   9 +
 .../common/IssueCompactCard/index.tsx         |   2 +-
 .../Insights/Issues/IssuesFilter/index.tsx    |   2 +-
 .../InstallationWizard/InstallStep/index.tsx  |   3 +-
 .../EnvironmentInstructionsPanel/styles.ts    |   6 +-
 src/components/common/v3/JiraButton/index.tsx | 107 +++---
 src/components/common/v3/JiraButton/types.ts  |   6 +-
 .../common/v3/NewButton/NewButton.stories.tsx |  23 +-
 src/components/common/v3/NewButton/index.tsx  |  60 ++--
 src/components/common/v3/NewButton/styles.ts  | 317 +++++++-----------
 src/components/common/v3/NewButton/types.ts   |   6 +-
 .../NewIconButton/NewIconButton.stories.tsx   |  16 +-
 .../common/v3/NewIconButton/index.tsx         |  21 +-
 .../common/v3/NewIconButton/styles.ts         | 251 +++++---------
 .../common/v3/NewIconButton/types.ts          |   3 +-
 21 files changed, 543 insertions(+), 562 deletions(-)
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx
 create mode 100644 src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3c80beaa0..5386dcb55 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,7 +6,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "stylelint.validate": ["typescript"],
   "cSpell.words": [
-    "Checkmark",
+    "borderless",
+    "checkmark",
     "digma",
     "digmathon",
     "digmo",
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx
index 9a655ce06..8be7dad73 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/SpanScalingInsightCard/index.tsx
@@ -75,6 +75,7 @@ export const SpanScalingInsightCard = ({
                 ticketLink={insight.ticketLink}
                 isHintEnabled={isJiraHintEnabled && i === 0}
                 insightType={insight.type}
+                type={"icon"}
               />
             ];
 
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx
new file mode 100644
index 000000000..ca0039c06
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx
@@ -0,0 +1,38 @@
+import { isUndefined } from "../../../../../../../../typeGuards/isUndefined";
+import { NewButton } from "../../../../../../../common/v3/NewButton";
+import { NewIconButton } from "../../../../../../../common/v3/NewIconButton";
+import { Tooltip } from "../../../../../../../common/v3/Tooltip";
+import { ActionButtonProps } from "./types";
+
+export const ActionButton = ({
+  type,
+  icon,
+  label,
+  title,
+  onClick,
+  isDisabled
+}: ActionButtonProps) => {
+  if (type === "icon") {
+    return (
+      <Tooltip title={title} isDisabled={isUndefined(title)}>
+        <NewIconButton
+          icon={icon}
+          onClick={onClick}
+          isDisabled={isDisabled}
+          buttonType={"secondaryBorderless"}
+        />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip title={title} isDisabled={isUndefined(title)}>
+      <NewButton
+        icon={icon}
+        label={label}
+        onClick={onClick}
+        isDisabled={isDisabled}
+      />
+    </Tooltip>
+  );
+};
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types.ts
new file mode 100644
index 000000000..c9ca96128
--- /dev/null
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types.ts
@@ -0,0 +1,13 @@
+import { ComponentType, ReactNode } from "react";
+import { IconProps } from "../../../../../../../common/icons/types";
+
+export type ActionButtonType = "icon" | "regular";
+
+export interface ActionButtonProps {
+  type?: ActionButtonType;
+  icon: ComponentType<IconProps>;
+  label: string;
+  title?: ReactNode;
+  onClick: () => void;
+  isDisabled?: boolean;
+}
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx
index f1566b831..3a4da011f 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { useGlobalStore } from "../../../../../../../containers/Main/stores/useGlobalStore";
 import { usePrevious } from "../../../../../../../hooks/usePrevious";
 import { isString } from "../../../../../../../typeGuards/isString";
@@ -11,21 +11,21 @@ import { HistogramIcon } from "../../../../../../common/icons/16px/HistogramIcon
 import { PinIcon } from "../../../../../../common/icons/16px/PinIcon";
 import { RecheckIcon } from "../../../../../../common/icons/16px/RecheckIcon";
 import { CrossIcon } from "../../../../../../common/icons/CrossIcon";
-import { Button } from "../../../../../../common/v3/Button";
-import { BaseButtonProps } from "../../../../../../common/v3/Button/types";
 import { JiraButton } from "../../../../../../common/v3/JiraButton";
-import { Tooltip } from "../../../../../../common/v3/Tooltip";
+import { NewButton } from "../../../../../../common/v3/NewButton";
 import { trackingEvents } from "../../../../../tracking";
 import { isEndpointInsight, isSpanInsight } from "../../../../../typeGuards";
 import { InsightStatus } from "../../../../../types";
 import { IssueCompactCard } from "../IssueCompactCard";
+import { ActionButton } from "./ActionButton";
+import { ActionButtonType } from "./ActionButton/types";
 import { InsightHeader } from "./InsightHeader";
 import { ProductionAffectionBar } from "./ProductionAffectionBar";
 import { RecalculateBar } from "./RecalculateBar";
 import { useDismissal } from "./hooks/useDismissal";
 import { useMarkingAsRead } from "./hooks/useMarkingAsRead";
 import * as s from "./styles";
-import { InsightCardProps } from "./types";
+import { Action, InsightCardProps } from "./types";
 
 const HIGH_CRITICALITY_THRESHOLD = 0.8;
 
@@ -208,132 +208,143 @@ export const InsightCard = ({
     );
   }
 
-  const renderActions = () => {
-    const buttonsToRender: {
-      tooltip: string;
-      button: React.ComponentType<BaseButtonProps>;
-    }[] = [];
-
-    if (
-      isMarkAsReadButtonEnabled &&
-      insight.isReadable &&
-      insight.isRead === false
-    ) {
-      buttonsToRender.push({
-        tooltip: "Mark as read",
-        button: (btnProps) => (
-          <Button
+  const renderAction = (action: Action, type: ActionButtonType) => {
+    switch (action) {
+      case "markAsRead":
+        return (
+          <ActionButton
+            type={type}
             icon={CheckmarkCircleIcon}
             label={"Mark as read"}
-            onClick={handleMarkAsReadButtonClick}
+            title={"Mark as read"}
             isDisabled={isMarkingAsReadInProgress}
-            {...btnProps}
+            onClick={handleMarkAsReadButtonClick}
           />
-        )
-      });
-    }
-
-    if (onOpenHistogram) {
-      buttonsToRender.push({
-        tooltip: "Open Histogram",
-        button: (btnProps) => (
-          <Button
+        );
+      case "openHistogram":
+        return (
+          <ActionButton
+            type={type}
             icon={HistogramIcon}
             label={"Histogram"}
+            title={"Open Histogram"}
             onClick={handleHistogramButtonClick}
-            {...btnProps}
           />
-        )
-      });
-    }
-
-    if (insight.isRecalculateEnabled) {
-      buttonsToRender.push({
-        tooltip: "Recheck",
-        button: (btnProps) => (
-          <Button
+        );
+      case "recheck":
+        return (
+          <ActionButton
+            type={type}
             icon={RecheckIcon}
             label={"Recheck"}
+            title={"Recheck"}
             onClick={handleRecheckButtonClick}
-            {...btnProps}
           />
-        )
-      });
-    }
-
-    if (onJiraButtonClick) {
-      buttonsToRender.push({
-        tooltip: "Open ticket info",
-        button: (btnProps) => (
+        );
+      case "viewTicketInfo":
+        return (
           <JiraButton
+            type={type}
             ticketLink={jiraTicketInfo?.ticketLink}
             isHintEnabled={jiraTicketInfo?.isHintEnabled}
             spanCodeObjectId={jiraTicketInfo?.spanCodeObjectId}
             label={"Ticket"}
             onTicketInfoOpen={openTicketInfo}
             insightType={insight.type}
-            {...btnProps}
           />
-        )
-      });
-    }
-
-    if (isJaegerEnabled && onGoToTrace) {
-      buttonsToRender.push({
-        tooltip: "Open Trace",
-        button: (btnProps) => (
-          <Button
+        );
+      case "openTrace":
+        return (
+          <ActionButton
+            type={type}
             icon={TraceIcon}
             label={"Trace"}
-            onClick={() => onGoToTrace()}
-            {...btnProps}
+            title={"Open Trace"}
+            onClick={() => onGoToTrace && onGoToTrace()}
           />
-        )
-      });
-    }
-
-    if (onGoToLive) {
-      buttonsToRender.push({
-        tooltip: "Open live view",
-        button: (btnProps) => (
-          <Button
+        );
+      case "openLiveView":
+        return (
+          <ActionButton
+            type={type}
             icon={DoubleCircleIcon}
             label={"Live"}
-            onClick={() => onGoToLive()}
-            {...btnProps}
+            title={"Open live view"}
+            onClick={() => onGoToLive && onGoToLive()}
+          />
+        );
+      case "pin":
+        return (
+          <ActionButton
+            type={type}
+            icon={PinIcon}
+            label={"Pin"}
+            title={"Pin"}
+            onClick={() =>
+              //TODO: implement
+              {
+                return undefined;
+              }
+            }
           />
-        )
-      });
+        );
+      default:
+        return null;
+    }
+  };
+
+  const renderActions = () => {
+    const actions: Action[] = [];
+
+    if (
+      isMarkAsReadButtonEnabled &&
+      insight.isReadable &&
+      insight.isRead === false
+    ) {
+      actions.push("markAsRead");
+    }
+
+    if (onOpenHistogram) {
+      actions.push("openHistogram");
+    }
+
+    if (insight.isRecalculateEnabled) {
+      actions.push("recheck");
+    }
+
+    if (onJiraButtonClick) {
+      actions.push("viewTicketInfo");
+    }
+
+    if (isJaegerEnabled && onGoToTrace) {
+      actions.push("openTrace");
+    }
+
+    if (onGoToLive) {
+      actions.push("openLiveView");
     }
 
     if (onPin) {
-      buttonsToRender.push({
-        tooltip: "Pin",
-        button: (btnProps) => (
-          <Button icon={PinIcon} label={"Pin"} {...btnProps} />
-        )
-      });
+      actions.push("pin");
     }
 
-    if (buttonsToRender.length === 0) {
+    if (actions.length === 0) {
       return;
     }
 
-    const toolbarActions = buttonsToRender.slice(0, -1);
-    const mainAction = buttonsToRender[buttonsToRender.length - 1];
+    const toolbarActions = actions.slice(0, -1);
+    const mainAction = actions[actions.length - 1];
 
     return (
       <s.Actions>
         {toolbarActions.map((toolbarAction) => (
-          <Tooltip key={toolbarAction.tooltip} title={toolbarAction.tooltip}>
-            <div>
-              <toolbarAction.button buttonType={"tertiary"} label={undefined} />
-            </div>
-          </Tooltip>
+          <Fragment key={toolbarAction}>
+            {renderAction(toolbarAction, "icon")}
+          </Fragment>
         ))}
-        <s.MainActions>
-          <mainAction.button buttonType={"primary"} />
-        </s.MainActions>
+        <s.MainActionContainer>
+          {renderAction(mainAction, "regular")}
+        </s.MainActionContainer>
       </s.Actions>
     );
   };
@@ -378,20 +389,20 @@ export const InsightCard = ({
                 {insight.isDismissible && (
                   <s.ButtonContainer>
                     {insight.isDismissed ? (
-                      <s.DismissButton
+                      <NewButton
                         label={isDismissalChangeInProgress ? "Showing" : "Show"}
-                        buttonType={"tertiary"}
+                        buttonType={"secondaryBorderless"}
                         isDisabled={isDismissalChangeInProgress}
                         onClick={handleShowClick}
                       />
                     ) : (
-                      <s.DismissButton
+                      <NewButton
                         icon={CrossIcon}
                         isDisabled={isDismissalChangeInProgress}
                         label={
                           isDismissalChangeInProgress ? "Dismissing" : "Dismiss"
                         }
-                        buttonType={"tertiary"}
+                        buttonType={"secondaryBorderless"}
                         onClick={() => setDismissConfirmationOpened(true)}
                       />
                     )}
@@ -404,12 +415,11 @@ export const InsightCard = ({
               <s.DismissDialog>
                 Dismiss insight?
                 <s.DismissDialogActions>
-                  <Button
+                  <NewButton
                     label={"No"}
-                    buttonType={"primary"}
                     onClick={() => setDismissConfirmationOpened(false)}
                   />
-                  <Button
+                  <NewButton
                     label={"Yes, dismiss"}
                     buttonType={"secondary"}
                     onClick={handleDismissClick}
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts
index 071e0e4b5..014f06953 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/styles.ts
@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import { subscriptRegularTypography } from "../../../../../../common/App/typographies";
-import { Button } from "../../../../../../common/v3/Button";
 import { Card } from "../../../../../../common/v3/Card";
 import { StyledCardProps } from "./types";
 
@@ -28,9 +27,8 @@ export const Actions = styled.div`
   display: flex;
 `;
 
-export const MainActions = styled(Actions)`
-  padding-left: 4px;
-  gap: 4px;
+export const MainActionContainer = styled.div`
+  margin-left: 4px;
 `;
 
 export const ContentContainer = styled.div`
@@ -60,10 +58,6 @@ export const StyledCard = styled(Card)<StyledCardProps>`
       : ""}
 `;
 
-export const DismissButton = styled(Button)`
-  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
-`;
-
 export const DismissDialog = styled.div`
   display: flex;
   justify-content: space-between;
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts
index 431c29d52..a19199fa3 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/types.ts
@@ -86,3 +86,12 @@ export interface InsightCardCommonProps {
   isMarkAsReadButtonEnabled: boolean;
   viewMode: InsightCardViewMode;
 }
+
+export type Action =
+  | "markAsRead"
+  | "openHistogram"
+  | "recheck"
+  | "viewTicketInfo"
+  | "openTrace"
+  | "openLiveView"
+  | "pin";
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx
index 54ee26ca1..c6d43bba6 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/IssueCompactCard/index.tsx
@@ -193,7 +193,7 @@ export const IssueCompactCard = ({
         >
           <NewIconButton
             icon={ThreeDotsIcon}
-            buttonType={"tertiary"}
+            buttonType={"secondaryBorderless"}
             size={"small"}
           />
         </NewPopover>
diff --git a/src/components/Insights/Issues/IssuesFilter/index.tsx b/src/components/Insights/Issues/IssuesFilter/index.tsx
index 42c9d6529..a94992659 100644
--- a/src/components/Insights/Issues/IssuesFilter/index.tsx
+++ b/src/components/Insights/Issues/IssuesFilter/index.tsx
@@ -259,7 +259,7 @@ export const IssuesFilter = () => {
           />
           <s.Footer>
             <s.ClearAllButton
-              buttonType={"tertiary"}
+              buttonType={"primaryBorderless"}
               label={"Clear filters"}
               isDisabled={selectedFiltersCount === 0}
               onClick={handleClearFiltersButtonClick}
diff --git a/src/components/InstallationWizard/InstallStep/index.tsx b/src/components/InstallationWizard/InstallStep/index.tsx
index 3c63649ae..8ddb513a7 100644
--- a/src/components/InstallationWizard/InstallStep/index.tsx
+++ b/src/components/InstallationWizard/InstallStep/index.tsx
@@ -179,8 +179,7 @@ export const InstallStep = ({
       previousDigmaStatus &&
       !previousDigmaStatus.connection.status &&
       config.digmaStatus?.connection.status &&
-      config.digmaStatus.runningDigmaInstances.length === 1 &&
-      config.digmaStatus.runningDigmaInstances
+      config.digmaStatus.runningDigmaInstances.length === 1
     ) {
       onGoToNextStep();
     }
diff --git a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts
index 796a7ab3c..1cdf370ed 100644
--- a/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts
+++ b/src/components/RecentActivity/EnvironmentInstructionsPanel/styles.ts
@@ -7,7 +7,7 @@ import {
   subscriptRegularTypography
 } from "../../common/App/typographies";
 import { CodeSnippet } from "../../common/CodeSnippet";
-import { Button } from "../../common/v3/Button";
+import { NewButton } from "../../common/v3/NewButton";
 
 export const Container = styled.div`
   margin-top: 12px;
@@ -26,7 +26,7 @@ export const Header = styled.div`
   color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
 
-export const CloseButton = styled(Button)`
+export const CloseButton = styled(NewButton)`
   margin-left: auto;
 `;
 
@@ -89,7 +89,7 @@ export const CardButtons = styled.div`
   align-items: center;
 `;
 
-export const ActionButton = styled(Button)`
+export const ActionButton = styled(NewButton)`
   padding: 6px;
 `;
 
diff --git a/src/components/common/v3/JiraButton/index.tsx b/src/components/common/v3/JiraButton/index.tsx
index efb535222..68731abb7 100644
--- a/src/components/common/v3/JiraButton/index.tsx
+++ b/src/components/common/v3/JiraButton/index.tsx
@@ -11,7 +11,8 @@ import { JiraLogoIcon } from "../../../common/icons/16px/JiraLogoIcon";
 import { OpenLinkIcon } from "../../../common/icons/OpenLinkIcon";
 import { Tooltip } from "../../../common/v3/Tooltip";
 import { NewPopover } from "../../NewPopover";
-import { Button } from "../Button";
+import { NewButton } from "../NewButton";
+import { NewIconButton } from "../NewIconButton";
 import * as s from "./styles";
 import { JiraButtonProps } from "./types";
 
@@ -21,7 +22,7 @@ export const JiraButtonComponent = (
     isHintEnabled,
     onTicketInfoOpen,
     spanCodeObjectId,
-    buttonType,
+    type,
     label,
     insightType
   }: JiraButtonProps,
@@ -68,56 +69,62 @@ export const JiraButtonComponent = (
     openTicketInfo("try now button click");
   };
 
-  const renderButton = () => (
-    <div>
-      {ticketLink ? (
-        <NewPopover
-          content={
-            <Popup>
-              <MenuList
-                items={[
-                  {
-                    icon: <OpenLinkIcon />,
-                    label: "View",
-                    id: "view",
-                    onClick: handleViewMenuItemClick
-                  },
-                  {
-                    icon: <PencilIcon />,
-                    label: "Edit",
-                    id: "edit",
-                    onClick: handleEditMenuItemClick
-                  }
-                ]}
-              />
-            </Popup>
-          }
-          isOpen={isMenuOpen}
-          onOpenChange={handleMenuOpenChange}
-          placement={"bottom-start"}
-        >
-          <Button
-            buttonType={buttonType}
+  const renderButton = () => {
+    const ButtonComponent = type === "icon" ? NewIconButton : NewButton;
+    const buttonComponentType =
+      type === "icon" ? "secondaryBorderless" : "primary";
+
+    return (
+      <div>
+        {ticketLink ? (
+          <NewPopover
+            content={
+              <Popup>
+                <MenuList
+                  items={[
+                    {
+                      icon: <OpenLinkIcon />,
+                      label: "View",
+                      id: "view",
+                      onClick: handleViewMenuItemClick
+                    },
+                    {
+                      icon: <PencilIcon />,
+                      label: "Edit",
+                      id: "edit",
+                      onClick: handleEditMenuItemClick
+                    }
+                  ]}
+                />
+              </Popup>
+            }
+            isOpen={isMenuOpen}
+            onOpenChange={handleMenuOpenChange}
+            placement={"bottom-start"}
+          >
+            <ButtonComponent
+              buttonType={buttonComponentType}
+              label={label}
+              icon={() => (
+                <JiraLogoIcon
+                  isActive={true}
+                  size={16}
+                  color={theme.colors.v3.icon.brandSecondary}
+                />
+              )}
+            />
+          </NewPopover>
+        ) : (
+          <ButtonComponent
+            buttonType={buttonComponentType}
             label={label}
-            icon={() => (
-              <JiraLogoIcon
-                isActive={true}
-                size={16}
-                color={theme.colors.v3.icon.brandSecondary}
-              />
-            )}
+            icon={JiraLogoIcon}
+            onClick={handleJiraButtonClick}
           />
-        </NewPopover>
-      ) : (
-        <Button
-          buttonType={buttonType}
-          label={label}
-          icon={JiraLogoIcon}
-          onClick={handleJiraButtonClick}
-        />
-      )}
-    </div>
-  );
+        )}
+      </div>
+    );
+  };
 
   const boundaryEl =
     document.getElementById(INSIGHTS_PAGE_CONTAINER_ID) ?? undefined;
diff --git a/src/components/common/v3/JiraButton/types.ts b/src/components/common/v3/JiraButton/types.ts
index b1a9d4391..39f9c1ec3 100644
--- a/src/components/common/v3/JiraButton/types.ts
+++ b/src/components/common/v3/JiraButton/types.ts
@@ -1,10 +1,12 @@
 import { InsightType } from "../../../../types";
-import { BaseButtonProps } from "../Button/types";
+import { ActionButtonType } from "../../../Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/types";
 
-export interface JiraButtonProps extends BaseButtonProps {
+export interface JiraButtonProps {
   onTicketInfoOpen(spanCodeObjectId: string | undefined, event: string): void;
   ticketLink?: string | null;
   isHintEnabled?: boolean;
   spanCodeObjectId?: string;
+  type?: ActionButtonType;
+  label?: string;
   insightType: InsightType;
 }
diff --git a/src/components/common/v3/NewButton/NewButton.stories.tsx b/src/components/common/v3/NewButton/NewButton.stories.tsx
index d6ef81600..8b94f7c29 100644
--- a/src/components/common/v3/NewButton/NewButton.stories.tsx
+++ b/src/components/common/v3/NewButton/NewButton.stories.tsx
@@ -16,23 +16,34 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    icon: CrosshairIcon
+    icon: CrosshairIcon,
+    label: "Click me",
+    buttonType: "primary"
   }
 };
 
-export const WithLabel: Story = {
+export const Secondary: Story = {
   args: {
+    icon: CrosshairIcon,
     label: "Click me",
-    icon: CrosshairIcon
+    buttonType: "secondary"
   }
 };
 
-export const Disabled: Story = {
+export const PrimaryBorderless: Story = {
   args: {
+    icon: CrosshairIcon,
     label: "Click me",
+    buttonType: "primaryBorderless"
+  }
+};
+
+export const SecondaryBorderless: Story = {
+  args: {
     icon: CrosshairIcon,
-    isDisabled: true
+    label: "Click me",
+    buttonType: "secondaryBorderless"
   }
 };
diff --git a/src/components/common/v3/NewButton/index.tsx b/src/components/common/v3/NewButton/index.tsx
index bdc4030e7..90b28df00 100644
--- a/src/components/common/v3/NewButton/index.tsx
+++ b/src/components/common/v3/NewButton/index.tsx
@@ -1,13 +1,26 @@
 import { ForwardedRef, forwardRef } from "react";
 import { isString } from "../../../../typeGuards/isString";
 import * as s from "./styles";
-import { ButtonProps } from "./types";
+import { ButtonProps, ButtonType } from "./types";
+
+const getButtonComponent = (buttonType: ButtonType) => {
+  switch (buttonType) {
+    case "primary":
+      return s.PrimaryButton;
+    case "secondary":
+      return s.SecondaryButton;
+    case "primaryBorderless":
+      return s.PrimaryBorderlessButton;
+    case "secondaryBorderless":
+      return s.SecondaryBorderlessButton;
+  }
+};
 
 export const NewButtonComponent = (
   {
     isDisabled,
     onClick,
-    buttonType,
+    buttonType = "primary",
     className,
     type,
     form,
@@ -16,23 +29,28 @@ export const NewButtonComponent = (
     iconPosition = "left"
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
-) => (
-  <s.Button
-    ref={ref}
-    disabled={isDisabled}
-    onClick={onClick}
-    $type={buttonType}
-    className={className}
-    type={type}
-    form={form}
-  >
-    {Icon && iconPosition === "left" && (
-      <Icon size={16} color={"currentColor"} />
-    )}
-    {isString(label) && <span>{label}</span>}
-    {Icon && iconPosition === "right" && (
-      <Icon size={16} color={"currentColor"} />
-    )}
-  </s.Button>
-);
+) => {
+  const ButtonComponent = getButtonComponent(buttonType);
+
+  return (
+    <ButtonComponent
+      ref={ref}
+      disabled={isDisabled}
+      onClick={onClick}
+      $type={buttonType}
+      className={className}
+      type={type}
+      form={form}
+    >
+      {Icon && iconPosition === "left" && (
+        <Icon size={16} color={"currentColor"} />
+      )}
+      {isString(label) && <span>{label}</span>}
+      {Icon && iconPosition === "right" && (
+        <Icon size={16} color={"currentColor"} />
+      )}
+    </ButtonComponent>
+  );
+};
+
 export const NewButton = forwardRef(NewButtonComponent);
diff --git a/src/components/common/v3/NewButton/styles.ts b/src/components/common/v3/NewButton/styles.ts
index 21ea39355..1903f0cb6 100644
--- a/src/components/common/v3/NewButton/styles.ts
+++ b/src/components/common/v3/NewButton/styles.ts
@@ -1,226 +1,153 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { subscriptRegularTypography } from "../../App/typographies";
 import { ButtonElementProps } from "./types";
 
-export const Button = styled.button<ButtonElementProps>`
+const BaseButton = styled.button<ButtonElementProps>`
   ${subscriptRegularTypography}
 
-  border-radius: 4px;
+  font-family: inherit;
   display: flex;
   align-items: center;
   gap: 4px;
-  cursor: pointer;
+  border-radius: 4px;
   width: fit-content;
-  padding: ${({ $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "6px 8px";
-      case "secondary":
-      case "primary":
-      default:
-        return "5px 7px";
+  cursor: pointer;
+  user-select: none;
+
+  &:disabled {
+    cursor: initial;
+  }
+`;
+
+export const PrimaryButton = styled(BaseButton)`
+  padding: 5px 7px;
+  color: ${({ theme }) => theme.colors.v3.icon.white};
+  border: 1px solid ${({ theme }) => theme.colors.v3.surface.brandTertiary};
+  background: ${({ theme }) => theme.colors.v3.surface.brandTertiary};
+
+  span {
+    color: ${({ theme }) => theme.colors.v3.text.white};
+  }
+
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+    background: ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+  }
+
+  &:active {
+    border: 1px solid ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+    background: ${({ theme }) => theme.colors.v3.surface.brandPrimary};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+    border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray};
+    background: ${({ theme }) => theme.colors.v3.surface.gray};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.text.tertiary};
     }
-  }};
-  color: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-      case "secondary":
-        return theme.colors.v3.icon.primary;
-      case "primary":
-      default:
-        return theme.colors.v3.icon.white;
+  }
+`;
+
+export const SecondaryButton = styled(BaseButton)`
+  padding: 5px 7px;
+  color: ${({ theme }) => theme.colors.v3.icon.primary};
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark};
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 13%);
+
+  span {
+    color: ${({ theme }) => theme.colors.v3.text.primary};
+  }
+
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
+    background: ${({ theme }) => theme.colors.v3.surface.brandDark};
+  }
+
+  &:active {
+    border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
+    background: ${({ theme }) => theme.colors.v3.surface.primary};
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
+    border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
+    background: ${({ theme }) => theme.colors.v3.surface.primaryLight};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.text.disabled};
     }
-  }};
-  border: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "none";
-      case "secondary":
-        return `1px solid ${theme.colors.v3.stroke.dark}`;
-      case "primary":
-      default:
-        return `1px solid ${theme.colors.v3.surface.brandTertiary}`;
+  }
+`;
+
+export const PrimaryBorderlessButton = styled(BaseButton)`
+  padding: 5px 7px;
+  color: ${({ theme }) => theme.colors.v3.icon.primary};
+  border: 1px solid transparent;
+  background: none;
+
+  span {
+    color: ${({ theme }) => theme.colors.v3.text.primary};
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.v3.icon.brandTertiary};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.text.link};
+    }
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.v3.icon.brandSecondary};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.surface.brandSecondary};
     }
-  }};
-  background: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "none";
-      case "secondary":
-        return theme.colors.v3.surface.primary;
-      case "primary":
-      default:
-        return theme.colors.v3.surface.brandTertiary;
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
+
+    span {
+      color: ${({ theme }) => theme.colors.v3.text.disabled};
     }
-  }};
+  }
+`;
+
+export const SecondaryBorderlessButton = styled(BaseButton)`
+  padding: 6px 0;
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+  border: 1px solid transparent;
+  background: none;
 
   span {
-    color: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-        case "secondary":
-          return theme.colors.v3.text.primary;
-        case "primary":
-        default:
-          return theme.colors.v3.text.white;
-      }
-    }};
-  }
-
-  ${({ $type }) =>
-    $type === "secondary"
-      ? css`
-          box-shadow: 0 2px 4px 0 rgb(0 0 0 / 13%);
-        `
-      : ""};
+    color: ${({ theme }) => theme.colors.v3.text.tertiary};
+  }
 
-  &:disabled {
-    cursor: initial;
-    color: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-        case "secondary":
-          return theme.colors.v3.icon.disabled;
-        case "primary":
-        default:
-          return theme.colors.v3.icon.tertiary;
-      }
-    }};
-    border: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return `1px solid ${theme.colors.v3.stroke.tertiary}`;
-        case "primary":
-        default:
-          return `1px solid ${theme.colors.v3.surface.gray}`;
-      }
-    }};
-    background: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return theme.colors.v3.surface.primaryLight;
-        case "primary":
-        default:
-          return theme.colors.v3.surface.gray;
-      }
-    }};
+  &:hover {
+    color: ${({ theme }) => theme.colors.v3.icon.primary};
 
     span {
-      color: ${({ theme, $type }) => {
-        switch ($type) {
-          case "tertiary":
-          case "secondary":
-            return theme.colors.v3.text.disabled;
-          case "primary":
-          default:
-            return theme.colors.v3.text.tertiary;
-        }
-      }};
+      color: ${({ theme }) => theme.colors.v3.text.primary};
     }
   }
 
-  &:hover:enabled {
-    color: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return theme.colors.v3.icon.brandTertiary;
-        case "secondary":
-          return theme.colors.v3.icon.primary;
-        case "primary":
-        default:
-          return theme.colors.v3.icon.white;
-      }
-    }};
-    border: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return `1px solid ${theme.colors.v3.stroke.primary}`;
-        case "primary":
-        default:
-          return `1px solid ${theme.colors.v3.surface.brandSecondary}`;
-      }
-    }};
-    background: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return theme.colors.v3.surface.brandDark;
-        case "primary":
-        default:
-          return theme.colors.v3.surface.brandSecondary;
-      }
-    }};
+  &:active {
+    color: ${({ theme }) => theme.colors.v3.icon.secondary};
 
     span {
-      color: ${({ theme, $type }) => {
-        switch ($type) {
-          case "tertiary":
-            return theme.colors.v3.text.link;
-          case "secondary":
-            return theme.colors.v3.text.primary;
-          case "primary":
-          default:
-            return theme.colors.v3.text.white;
-        }
-      }};
+      color: ${({ theme }) => theme.colors.v3.text.secondary};
     }
   }
 
-  &:focus:enabled,
-  &:active:enabled {
-    color: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return theme.colors.v3.icon.brandSecondary;
-        case "secondary":
-          return theme.colors.v3.icon.primary;
-        case "primary":
-        default:
-          return theme.colors.v3.icon.white;
-      }
-    }};
-    border: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return `1px solid ${theme.colors.v3.stroke.primary}`;
-        case "primary":
-        default:
-          return `1px solid ${theme.colors.v3.surface.brandSecondary}`;
-      }
-    }};
-    background: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return theme.colors.v3.surface.primary;
-        case "primary":
-        default:
-          return theme.colors.v3.surface.brandPrimary;
-      }
-    }};
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
 
     span {
-      color: ${({ theme, $type }) => {
-        switch ($type) {
-          case "tertiary":
-            return theme.colors.v3.surface.brandSecondary;
-          case "secondary":
-            return theme.colors.v3.text.primary;
-          case "primary":
-          default:
-            return theme.colors.v3.text.white;
-        }
-      }};
+      color: ${({ theme }) => theme.colors.v3.text.disabled};
     }
   }
 `;
diff --git a/src/components/common/v3/NewButton/types.ts b/src/components/common/v3/NewButton/types.ts
index 7af665314..2abde8024 100644
--- a/src/components/common/v3/NewButton/types.ts
+++ b/src/components/common/v3/NewButton/types.ts
@@ -1,7 +1,11 @@
 import { ButtonHTMLAttributes } from "react";
 import { IconProps } from "../../icons/types";
 
-export type ButtonType = "primary" | "secondary" | "tertiary";
+export type ButtonType =
+  | "primary"
+  | "secondary"
+  | "primaryBorderless"
+  | "secondaryBorderless";
 
 export interface BaseButtonProps {
   icon?: React.ComponentType<IconProps>;
diff --git a/src/components/common/v3/NewIconButton/NewIconButton.stories.tsx b/src/components/common/v3/NewIconButton/NewIconButton.stories.tsx
index b2f639d73..995dc6d77 100644
--- a/src/components/common/v3/NewIconButton/NewIconButton.stories.tsx
+++ b/src/components/common/v3/NewIconButton/NewIconButton.stories.tsx
@@ -16,15 +16,23 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Primary: Story = {
   args: {
-    icon: CrosshairIcon
+    icon: CrosshairIcon,
+    buttonType: "primary"
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    icon: CrosshairIcon,
+    buttonType: "secondary"
   }
 };
 
-export const Disabled: Story = {
+export const SecondaryBorderless: Story = {
   args: {
     icon: CrosshairIcon,
-    isDisabled: true
+    buttonType: "secondaryBorderless"
   }
 };
diff --git a/src/components/common/v3/NewIconButton/index.tsx b/src/components/common/v3/NewIconButton/index.tsx
index 2570dacde..1a07b1721 100644
--- a/src/components/common/v3/NewIconButton/index.tsx
+++ b/src/components/common/v3/NewIconButton/index.tsx
@@ -1,6 +1,17 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import * as s from "./styles";
-import { NewIconButtonProps } from "./types";
+import { ButtonType, NewIconButtonProps } from "./types";
+
+const getButtonComponent = (buttonType: ButtonType) => {
+  switch (buttonType) {
+    case "primary":
+      return s.PrimaryIconButton;
+    case "secondary":
+      return s.SecondaryIconButton;
+    case "secondaryBorderless":
+      return s.SecondaryBorderlessIconButton;
+  }
+};
 
 const NewIconButtonComponent = (
   {
@@ -8,7 +19,7 @@ const NewIconButtonComponent = (
     className,
     isDisabled,
     icon: Icon,
-    buttonType,
+    buttonType = "primary",
     size = "medium",
     isHighlighted
   }: NewIconButtonProps,
@@ -20,8 +31,10 @@ const NewIconButtonComponent = (
     }
   };
 
+  const ButtonComponent = getButtonComponent(buttonType);
+
   return (
-    <s.Button
+    <ButtonComponent
       className={className}
       onClick={handleClick}
       disabled={isDisabled}
@@ -31,7 +44,7 @@ const NewIconButtonComponent = (
       $isHighlighted={isHighlighted}
     >
       <Icon size={16} color={"currentColor"} />
-    </s.Button>
+    </ButtonComponent>
   );
 };
 
diff --git a/src/components/common/v3/NewIconButton/styles.ts b/src/components/common/v3/NewIconButton/styles.ts
index c05c4abe3..047bb8e72 100644
--- a/src/components/common/v3/NewIconButton/styles.ts
+++ b/src/components/common/v3/NewIconButton/styles.ts
@@ -1,184 +1,109 @@
 import styled, { css } from "styled-components";
 import { ButtonElementProps } from "./types";
 
-const activeStyles = css<ButtonElementProps>`
-  color: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-      case "secondary":
-        return theme.colors.v3.icon.primary;
-      case "primary":
-      default:
-        return theme.colors.v3.icon.white;
-    }
-  }};
-  border: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "none";
-      case "secondary":
-        return `1px solid ${theme.colors.v3.stroke.primary}`;
-      case "primary":
-      default:
-        return `1px solid ${theme.colors.v3.surface.brandSecondary}`;
-    }
-  }};
-  background: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "none";
-      case "secondary":
-        return theme.colors.v3.surface.brandDark;
-      case "primary":
-      default:
-        return theme.colors.v3.surface.brandPrimary;
-    }
-  }};
-`;
-
-export const Button = styled.button<ButtonElementProps>`
+const BaseIconButton = styled.button<ButtonElementProps>`
   font-family: inherit;
-  border-radius: 4px;
   display: flex;
   flex-shrink: 0;
+  border-radius: 4px;
   cursor: pointer;
   user-select: none;
-  padding: ${({ $type, $size }) => {
-    switch ($type) {
-      case "tertiary":
-        switch ($size) {
-          case "small":
-            return 4;
-          case "medium":
-          default:
-            return 6;
-        }
-      case "secondary":
-      case "primary":
+  padding: ${({ $size }) => {
+    switch ($size) {
+      case "small":
+        return 3;
+      case "medium":
       default:
-        switch ($size) {
-          case "small":
-            return 3;
-          case "medium":
-          default:
-            return 5;
-        }
+        return 5;
     }
   }}px;
-  color: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-      case "secondary":
-        return theme.colors.v3.icon.tertiary;
-      case "primary":
-      default:
-        return theme.colors.v3.icon.white;
-    }
-  }};
-  border: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "none";
-      case "secondary":
-        return `1px solid ${theme.colors.v3.stroke.dark}`;
-      case "primary":
-      default:
-        return `1px solid ${theme.colors.v3.surface.brandTertiary}`;
-    }
-  }};
-  background: ${({ theme, $type }) => {
-    switch ($type) {
-      case "tertiary":
-        return "none";
-      case "secondary":
-        return theme.colors.v3.surface.primary;
-      case "primary":
-      default:
-        return theme.colors.v3.surface.brandTertiary;
-    }
-  }};
 
-  ${({ $type }) =>
-    $type === "secondary"
-      ? css`
-          box-shadow: 0 2px 4px 0 rgb(0 0 0 / 13%);
-        `
-      : ""};
+  &:disabled {
+    cursor: initial;
+  }
+`;
+
+const PrimaryIconButtonActiveStyles = css`
+  border: 1px solid ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+  background: ${({ theme }) => theme.colors.v3.surface.brandPrimary};
+`;
+
+export const PrimaryIconButton = styled(BaseIconButton)`
+  color: ${({ theme }) => theme.colors.v3.icon.white};
+  border: 1px solid ${({ theme }) => theme.colors.v3.surface.brandTertiary};
+  background: ${({ theme }) => theme.colors.v3.surface.brandTertiary};
+
+  ${({ $isHighlighted }) =>
+    $isHighlighted ? PrimaryIconButtonActiveStyles : ""}
 
-  ${({ $isHighlighted }) => ($isHighlighted ? activeStyles : "")}
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+    background: ${({ theme }) => theme.colors.v3.surface.brandSecondary};
+  }
+
+  &:active {
+    ${PrimaryIconButtonActiveStyles}
+  }
 
   &:disabled {
-    cursor: initial;
-    color: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-        case "secondary":
-          return theme.colors.v3.icon.disabled;
-        case "primary":
-        default:
-          return theme.colors.v3.icon.tertiary;
-      }
-    }};
-    border: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return `1px solid ${theme.colors.v3.stroke.tertiary}`;
-        case "primary":
-        default:
-          return `1px solid ${theme.colors.v3.surface.gray}`;
-      }
-    }};
-    background: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return theme.colors.v3.surface.primaryLight;
-        case "primary":
-        default:
-          return theme.colors.v3.surface.gray;
-      }
-    }};
+    color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+    border: 1px solid ${({ theme }) => theme.colors.v3.surface.gray};
+    background: ${({ theme }) => theme.colors.v3.surface.gray};
+  }
+`;
+
+const SecondaryIconButtonActiveStyles = css`
+  color: ${({ theme }) => theme.colors.v3.icon.primary};
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
+  background: ${({ theme }) => theme.colors.v3.surface.brandDark};
+`;
+
+export const SecondaryIconButton = styled(BaseIconButton)`
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark};
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 13%);
+
+  ${({ $isHighlighted }) =>
+    $isHighlighted ? SecondaryIconButtonActiveStyles : ""}
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.v3.icon.primary};
+    border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary};
+  }
+
+  &:active {
+    ${SecondaryIconButtonActiveStyles}
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
+    border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
+    background: ${({ theme }) => theme.colors.v3.surface.primaryLight};
+  }
+`;
+
+const SecondaryBorderlessIconButtonActiveStyles = css`
+  color: ${({ theme }) => theme.colors.v3.icon.primary};
+`;
+
+export const SecondaryBorderlessIconButton = styled(BaseIconButton)`
+  color: ${({ theme }) => theme.colors.v3.icon.tertiary};
+  border: 1px solid transparent;
+  background: none;
+
+  ${({ $isHighlighted }) =>
+    $isHighlighted ? SecondaryBorderlessIconButtonActiveStyles : ""}
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.v3.icon.primary};
   }
 
-  &:hover:enabled {
-    color: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-        case "secondary":
-          return theme.colors.v3.icon.primary;
-        case "primary":
-        default:
-          return theme.colors.v3.icon.white;
-      }
-    }};
-    border: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return `1px solid ${theme.colors.v3.stroke.primary}`;
-        case "primary":
-        default:
-          return `1px solid ${theme.colors.v3.surface.brandSecondary}`;
-      }
-    }};
-    background: ${({ theme, $type }) => {
-      switch ($type) {
-        case "tertiary":
-          return "none";
-        case "secondary":
-          return theme.colors.v3.surface.primary;
-        case "primary":
-        default:
-          return theme.colors.v3.surface.brandSecondary;
-      }
-    }};
+  &:active {
+    ${SecondaryBorderlessIconButtonActiveStyles}
   }
 
-  &:active:enabled {
-    ${activeStyles}
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
   }
 `;
diff --git a/src/components/common/v3/NewIconButton/types.ts b/src/components/common/v3/NewIconButton/types.ts
index 32a6e8d1a..1aacff5da 100644
--- a/src/components/common/v3/NewIconButton/types.ts
+++ b/src/components/common/v3/NewIconButton/types.ts
@@ -1,7 +1,8 @@
 import { ComponentType, MouseEventHandler } from "react";
 import { IconProps } from "../../icons/types";
 
-export type ButtonType = "primary" | "secondary" | "tertiary";
+export type ButtonType = "primary" | "secondary" | "secondaryBorderless";
+
 export type ButtonSize = "medium" | "small";
 
 export interface NewIconButtonProps {

From ea3586aea44d8179360d99ac44e851493f2a9161 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 03:04:39 +0200
Subject: [PATCH 2/7] Update axios

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 676f4bf01..3933beac1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@floating-ui/react": "^0.25.1",
         "@tanstack/react-table": "^8.7.8",
         "allotment": "^1.19.0",
-        "axios": "^1.7.2",
+        "axios": "^1.7.4",
         "copy-to-clipboard": "^3.3.3",
         "date-fns": "^2.29.3",
         "free-email-domains": "^1.2.5",
@@ -7139,9 +7139,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -23161,9 +23161,9 @@
       "dev": true
     },
     "axios": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
       "requires": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
diff --git a/package.json b/package.json
index 1e7f991a0..e27587cf8 100644
--- a/package.json
+++ b/package.json
@@ -103,7 +103,7 @@
     "@floating-ui/react": "^0.25.1",
     "@tanstack/react-table": "^8.7.8",
     "allotment": "^1.19.0",
-    "axios": "^1.7.2",
+    "axios": "^1.7.4",
     "copy-to-clipboard": "^3.3.3",
     "date-fns": "^2.29.3",
     "free-email-domains": "^1.2.5",

From 601a22465964aea82e6a36f9f46de6f5f8c5b4db Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 10:20:51 +0200
Subject: [PATCH 3/7] Add feature flag for assets filters

Fix tooltips
Disable Enter key handler in Login form
---
 src/components/Assets/index.tsx               | 16 ++++++++--
 .../common/InsightCard/ActionButton/index.tsx | 32 ++++++++-----------
 .../insightCards/common/InsightCard/index.tsx | 21 ++++++------
 .../Main/Authentication/Login/index.tsx       |  7 +++-
 src/featureFlags.ts                           |  3 +-
 src/types.ts                                  |  3 +-
 6 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx
index 102f7e7ba..102fc37f8 100644
--- a/src/components/Assets/index.tsx
+++ b/src/components/Assets/index.tsx
@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore";
+import { getFeatureFlagValue } from "../../featureFlags";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
+import { FeatureFlag } from "../../types";
 import { sendUserActionTrackingEvent } from "../../utils/actions/sendUserActionTrackingEvent";
 import { useHistory } from "../Main/useHistory";
 import { EmptyState } from "../common/EmptyState";
@@ -40,6 +42,11 @@ export const Assets = () => {
     useState<DataRefresher | null>(null);
   const { goTo } = useHistory();
   const isBackendUpgradeMessageVisible = false;
+  const backendInfo = useGlobalStore.use.backendInfo();
+  const areExtendedAssetsFiltersEnabled = getFeatureFlagValue(
+    backendInfo,
+    FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED
+  );
 
   useEffect(() => {
     if (!scope?.span) {
@@ -174,9 +181,12 @@ export const Assets = () => {
           <AssetsFilter
             onApply={handleApplyFilters}
             filters={selectedFilters}
-            // Temporarily disabled passing of assetScopeOption and searchQuery due to issues on the backend side
-            assetScopeOption={null}
-            searchQuery={""}
+            assetScopeOption={
+              areExtendedAssetsFiltersEnabled ? assetScopeOption : null
+            }
+            searchQuery={
+              areExtendedAssetsFiltersEnabled ? debouncedSearchInputValue : ""
+            }
           />
           <Tooltip title={"Refresh"}>
             <s.RefreshButton
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx
index ca0039c06..d5206c577 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/ActionButton/index.tsx
@@ -11,28 +11,22 @@ export const ActionButton = ({
   title,
   onClick,
   isDisabled
-}: ActionButtonProps) => {
-  if (type === "icon") {
-    return (
-      <Tooltip title={title} isDisabled={isUndefined(title)}>
-        <NewIconButton
-          icon={icon}
-          onClick={onClick}
-          isDisabled={isDisabled}
-          buttonType={"secondaryBorderless"}
-        />
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Tooltip title={title} isDisabled={isUndefined(title)}>
+}: ActionButtonProps) => (
+  <Tooltip title={title} isDisabled={isUndefined(title)}>
+    {type === "icon" ? (
+      <NewIconButton
+        icon={icon}
+        onClick={onClick}
+        isDisabled={isDisabled}
+        buttonType={"secondaryBorderless"}
+      />
+    ) : (
       <NewButton
         icon={icon}
         label={label}
         onClick={onClick}
         isDisabled={isDisabled}
       />
-    </Tooltip>
-  );
-};
+    )}
+  </Tooltip>
+);
diff --git a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx
index 3a4da011f..e1a04b7a7 100644
--- a/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx
+++ b/src/components/Insights/InsightsCatalog/InsightsPage/insightCards/common/InsightCard/index.tsx
@@ -13,6 +13,7 @@ import { RecheckIcon } from "../../../../../../common/icons/16px/RecheckIcon";
 import { CrossIcon } from "../../../../../../common/icons/CrossIcon";
 import { JiraButton } from "../../../../../../common/v3/JiraButton";
 import { NewButton } from "../../../../../../common/v3/NewButton";
+import { Tooltip } from "../../../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../../../tracking";
 import { isEndpointInsight, isSpanInsight } from "../../../../../typeGuards";
 import { InsightStatus } from "../../../../../types";
@@ -243,15 +244,17 @@ export const InsightCard = ({
         );
       case "viewTicketInfo":
         return (
-          <JiraButton
-            type={type}
-            ticketLink={jiraTicketInfo?.ticketLink}
-            isHintEnabled={jiraTicketInfo?.isHintEnabled}
-            spanCodeObjectId={jiraTicketInfo?.spanCodeObjectId}
-            label={"Ticket"}
-            onTicketInfoOpen={openTicketInfo}
-            insightType={insight.type}
-          />
+          <Tooltip title={"Open ticket info"}>
+            <JiraButton
+              type={type}
+              ticketLink={jiraTicketInfo?.ticketLink}
+              isHintEnabled={jiraTicketInfo?.isHintEnabled}
+              spanCodeObjectId={jiraTicketInfo?.spanCodeObjectId}
+              label={"Ticket"}
+              onTicketInfoOpen={openTicketInfo}
+              insightType={insight.type}
+            />
+          </Tooltip>
         );
       case "openTrace":
         return (
diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx
index 45f943d2f..b71428fc7 100644
--- a/src/components/Main/Authentication/Login/index.tsx
+++ b/src/components/Main/Authentication/Login/index.tsx
@@ -65,16 +65,21 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => {
     sendUserActionTrackingEvent("login form submitted");
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === "Enter" && isValid) {
       onSubmit(values);
     }
   };
+
   const errorMessage =
     Object.values(errors).length > 0 ? Object.values(errors)[0].message : "";
 
   return (
-    <FormContainer onKeyDown={handleKeyDown}>
+    <FormContainer
+    // Temporary disabled due to the issue in JetBrains 2024.2.x
+    // onKeyDown={handleKeyDown}
+    >
       <Form
         id={"loginForm"}
         onSubmit={(e) => {
diff --git a/src/featureFlags.ts b/src/featureFlags.ts
index 039497591..a1be3357b 100644
--- a/src/featureFlags.ts
+++ b/src/featureFlags.ts
@@ -12,7 +12,8 @@ export const featureFlagMinBackendVersions: Record<FeatureFlag, string> = {
   [FeatureFlag.ARE_ISSUES_FILTERS_ENABLED]: "0.3.72",
   [FeatureFlag.ARE_SPAN_ENVIRONMENTS_ENABLED]: "0.3.95",
   [FeatureFlag.IS_REPORT_ENABLED]: "0.3.95",
-  [FeatureFlag.IS_ISSUES_SERVICES_FILTERS_ENABLED]: "0.3.103"
+  [FeatureFlag.ARE_ISSUES_SERVICES_FILTERS_ENABLED]: "0.3.103",
+  [FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED]: "0.3.107"
 };
 
 export const getFeatureFlagValue = (
diff --git a/src/types.ts b/src/types.ts
index 0380f1a8c..00de5f9ee 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -14,7 +14,8 @@ export enum FeatureFlag {
   ARE_ISSUES_FILTERS_ENABLED,
   ARE_SPAN_ENVIRONMENTS_ENABLED,
   IS_REPORT_ENABLED,
-  IS_ISSUES_SERVICES_FILTERS_ENABLED
+  ARE_ISSUES_SERVICES_FILTERS_ENABLED,
+  ARE_EXTENDED_ASSETS_FILTERS_ENABLED
 }
 
 export enum InsightType {

From 98ccd39f22880af5f16dee88579c987258a5b040 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 10:59:00 +0200
Subject: [PATCH 4/7] Disable Enter key handler for the Registration form

---
 src/components/Main/Authentication/Registration/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx
index 9044d2886..b1a4d8efe 100644
--- a/src/components/Main/Authentication/Registration/index.tsx
+++ b/src/components/Main/Authentication/Registration/index.tsx
@@ -95,6 +95,7 @@ export const Registration = ({ onRegister }: RegistrationProps) => {
     sendUserActionTrackingEvent("registration form submitted");
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === "Enter" && isValid) {
       onSubmit(values);
@@ -105,7 +106,10 @@ export const Registration = ({ onRegister }: RegistrationProps) => {
     Object.values(errors).length > 0 ? Object.values(errors)[0].message : "";
 
   return (
-    <s.FormContainer onKeyDown={handleKeyDown}>
+    <s.FormContainer
+    // Temporary disabled due to the issue in JetBrains 2024.2.x
+    // onKeyDown={handleKeyDown}
+    >
       <s.Form
         id={"registrationForm"}
         onSubmit={(e) => {

From 013180df7a72ec6f42dfeb2fc946014179e29950 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 11:32:12 +0200
Subject: [PATCH 5/7] Remove Enter key handlers in forms

---
 .../Main/Authentication/Login/index.tsx          | 16 ++--------------
 .../Main/Authentication/Registration/index.tsx   | 14 ++------------
 .../RegisterStep/index.tsx                       | 12 ++----------
 src/components/common/RegisterForm/index.tsx     | 11 ++---------
 .../common/RegistrationDialog/index.tsx          | 12 ++----------
 5 files changed, 10 insertions(+), 55 deletions(-)

diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx
index b71428fc7..de4416a87 100644
--- a/src/components/Main/Authentication/Login/index.tsx
+++ b/src/components/Main/Authentication/Login/index.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, useEffect } from "react";
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { LockIcon } from "../../../common/icons/12px/LockIcon";
@@ -27,7 +27,6 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => {
   const {
     handleSubmit,
     control,
-    getValues,
     clearErrors,
     watch,
     setError,
@@ -37,7 +36,6 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => {
     mode: "onChange",
     defaultValues: formDefaultValues
   });
-  const values = getValues();
   const { isLoading, login, error } = useLogin();
 
   useEffect(() => {
@@ -65,21 +63,11 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => {
     sendUserActionTrackingEvent("login form submitted");
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter" && isValid) {
-      onSubmit(values);
-    }
-  };
-
   const errorMessage =
     Object.values(errors).length > 0 ? Object.values(errors)[0].message : "";
 
   return (
-    <FormContainer
-    // Temporary disabled due to the issue in JetBrains 2024.2.x
-    // onKeyDown={handleKeyDown}
-    >
+    <FormContainer>
       <Form
         id={"loginForm"}
         onSubmit={(e) => {
diff --git a/src/components/Main/Authentication/Registration/index.tsx b/src/components/Main/Authentication/Registration/index.tsx
index b1a4d8efe..6ba675784 100644
--- a/src/components/Main/Authentication/Registration/index.tsx
+++ b/src/components/Main/Authentication/Registration/index.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { isAlphanumeric } from "../../../../utils/isAlphanumeric";
@@ -95,21 +95,11 @@ export const Registration = ({ onRegister }: RegistrationProps) => {
     sendUserActionTrackingEvent("registration form submitted");
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter" && isValid) {
-      onSubmit(values);
-    }
-  };
-
   const errorMessage =
     Object.values(errors).length > 0 ? Object.values(errors)[0].message : "";
 
   return (
-    <s.FormContainer
-    // Temporary disabled due to the issue in JetBrains 2024.2.x
-    // onKeyDown={handleKeyDown}
-    >
+    <s.FormContainer>
       <s.Form
         id={"registrationForm"}
         onSubmit={(e) => {
diff --git a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx
index 434654eda..acc821a6c 100644
--- a/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx
+++ b/src/components/RecentActivity/CreateEnvironmentWizard/RegisterStep/index.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { actions as globalActions } from "../../../../actions";
 import { usePrevious } from "../../../../hooks/usePrevious";
@@ -41,14 +41,12 @@ export const RegisterStep = ({ onNext }: RegisterStepProps) => {
   const {
     handleSubmit,
     control,
-    getValues,
     formState: { errors, isValid },
     setFocus
   } = useForm<RegistrationFormValues>({
     mode: "onChange",
     defaultValues: formDefaultValues
   });
-  const values = getValues();
   const config = useContext(ConfigContext);
   const previousUserRegistrationEmail = usePrevious(
     config.userRegistrationEmail
@@ -88,14 +86,8 @@ export const RegisterStep = ({ onNext }: RegisterStepProps) => {
     onNext(true);
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter" && isValid) {
-      onSubmit(values);
-    }
-  };
-
   return (
-    <s.Container onKeyDown={handleKeyDown}>
+    <s.Container>
       <s.Description>
         <s.Header>Register</s.Header>
         Please register with your email address
diff --git a/src/components/common/RegisterForm/index.tsx b/src/components/common/RegisterForm/index.tsx
index e5c831952..a8fbb0d77 100644
--- a/src/components/common/RegisterForm/index.tsx
+++ b/src/components/common/RegisterForm/index.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, useContext, useMemo } from "react";
+import { useContext, useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { actions as globalActions } from "../../../actions";
@@ -52,13 +52,11 @@ export const RegisterForm = ({
   const {
     handleSubmit,
     control,
-    getValues,
     formState: { errors, isValid }
   } = useForm<RegistrationFormValues>({
     mode: "onChange",
     defaultValues: formDefaultValues
   });
-  const values = getValues();
 
   const onSubmit = (data: RegistrationFormValues) => {
     window.sendMessageToDigma({
@@ -73,18 +71,13 @@ export const RegisterForm = ({
     onNext(true);
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter" && isValid) {
-      onSubmit(values);
-    }
-  };
   const handleOnSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     void handleSubmit(onSubmit)(e);
   };
 
   return (
-    <s.Container className={className} onKeyDown={handleKeyDown}>
+    <s.Container className={className}>
       <s.Form id={"registrationForm"} onSubmit={handleOnSubmit}>
         <Controller
           name={"fullName"}
diff --git a/src/components/common/RegistrationDialog/index.tsx b/src/components/common/RegistrationDialog/index.tsx
index a7271c444..e204f9a4f 100644
--- a/src/components/common/RegistrationDialog/index.tsx
+++ b/src/components/common/RegistrationDialog/index.tsx
@@ -1,4 +1,4 @@
-import { KeyboardEvent, useEffect } from "react";
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { isValidEmailFormat } from "../../../utils/isValidEmailFormat";
@@ -39,14 +39,12 @@ export const RegistrationDialog = (props: RegistrationDialogProps) => {
   const {
     handleSubmit,
     control,
-    getValues,
     formState: { errors, isValid, touchedFields },
     setFocus
   } = useForm<RegistrationFormValues>({
     mode: "onChange",
     defaultValues: formDefaultValues
   });
-  const values = getValues();
 
   useEffect(() => {
     setFocus("fullName");
@@ -69,17 +67,11 @@ export const RegistrationDialog = (props: RegistrationDialogProps) => {
     props.onClose();
   };
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter" && isValid) {
-      onSubmit(values);
-    }
-  };
-
   const errorMessage =
     Object.values(errors).length > 0 ? Object.values(errors)[0].message : "";
 
   return (
-    <s.Container onKeyDown={handleKeyDown}>
+    <s.Container>
       <s.Header>
         <s.Title>Register</s.Title>
         <s.CloseButton onClick={handleCloseButtonClick}>

From 00de7f0615732d63649dccc78812eb71bda15ba3 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 12:45:33 +0200
Subject: [PATCH 6/7] Enable new impact score calculation

---
 src/components/Highlights/Impact/index.tsx    | 17 +++++++++-
 .../Main/Authentication/Login/useLogin.ts     |  2 +-
 .../Registration/useRegistration.ts           |  2 +-
 src/components/common/ImpactScore/index.tsx   | 34 +++++++++++++++++--
 src/featureFlags.ts                           |  3 +-
 src/types.ts                                  |  3 +-
 6 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx
index 7afa431fa..6b6cbb629 100644
--- a/src/components/Highlights/Impact/index.tsx
+++ b/src/components/Highlights/Impact/index.tsx
@@ -5,7 +5,6 @@ import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
 import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { SCOPE_CHANGE_EVENTS } from "../../Main/types";
-import { getImpactScoreLabel } from "../../common/ImpactScore";
 import { InfinityIcon } from "../../common/icons/16px/InfinityIcon";
 import { RefreshIcon } from "../../common/icons/16px/RefreshIcon";
 import { TargetIcon } from "../../common/icons/16px/TargetIcon";
@@ -47,6 +46,22 @@ const demoData: EnvironmentImpactData[] = [
   }
 ];
 
+const getImpactScoreLabel = (score: number) => {
+  if (score <= 0) {
+    return "Waiting for data";
+  }
+
+  if (score < 0.4) {
+    return "Low";
+  }
+
+  if (score < 0.8) {
+    return "Medium";
+  }
+
+  return "High";
+};
+
 const getRankTagType = (normalizedRank: number) => {
   if (normalizedRank >= 0.9) {
     return "highSeverity";
diff --git a/src/components/Main/Authentication/Login/useLogin.ts b/src/components/Main/Authentication/Login/useLogin.ts
index 33dc502c3..33d36d24c 100644
--- a/src/components/Main/Authentication/Login/useLogin.ts
+++ b/src/components/Main/Authentication/Login/useLogin.ts
@@ -22,7 +22,7 @@ export const useLogin = () => {
     return () => {
       dispatcher.removeActionListener(actions.SET_LOGIN_RESULT, handleLogin);
     };
-  }, []);
+  }, [setIsLoading]);
 
   return {
     login: (payload: LoginPayload) => {
diff --git a/src/components/Main/Authentication/Registration/useRegistration.ts b/src/components/Main/Authentication/Registration/useRegistration.ts
index 23af1e626..ada94cf6d 100644
--- a/src/components/Main/Authentication/Registration/useRegistration.ts
+++ b/src/components/Main/Authentication/Registration/useRegistration.ts
@@ -34,7 +34,7 @@ export const useRegistration = () => {
         handleRegister
       );
     };
-  }, []);
+  }, [setIsLoading]);
 
   return {
     isLoading,
diff --git a/src/components/common/ImpactScore/index.tsx b/src/components/common/ImpactScore/index.tsx
index 5e80f7008..a8a89e554 100644
--- a/src/components/common/ImpactScore/index.tsx
+++ b/src/components/common/ImpactScore/index.tsx
@@ -1,9 +1,37 @@
+import { useGlobalStore } from "../../../containers/Main/stores/useGlobalStore";
+import { getFeatureFlagValue } from "../../../featureFlags";
+import { FeatureFlag } from "../../../types";
+import { BackendInfo } from "../App/types";
 import { ScoreIndicator } from "../ScoreIndicator";
 import { Tooltip } from "../Tooltip";
 import * as s from "./styles";
 import { ImpactScoreProps } from "./types";
 
-export const getImpactScoreLabel = (score: number) => {
+const getImpactScoreLabel = (
+  score: number,
+  backendInfo: BackendInfo | null
+) => {
+  const isNewImpactScoreCalculationEnabled = getFeatureFlagValue(
+    backendInfo,
+    FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED
+  );
+
+  if (isNewImpactScoreCalculationEnabled) {
+    if (score <= 0) {
+      return "Waiting for data";
+    }
+
+    if (score <= 0.01) {
+      return "Low";
+    }
+
+    if (score <= 0.1) {
+      return "Medium";
+    }
+
+    return "High";
+  }
+
   if (score <= 0) {
     return "Waiting for data";
   }
@@ -24,6 +52,8 @@ export const ImpactScore = ({
   showIndicator,
   indicatorPosition
 }: ImpactScoreProps) => {
+  const backendInfo = useGlobalStore.use.backendInfo();
+
   let scoreIndicatorPosition: "start" | "end" | undefined;
 
   if (score > 0 && showIndicator) {
@@ -38,7 +68,7 @@ export const ImpactScore = ({
     <Tooltip title={score}>
       <s.Container>
         {scoreIndicatorPosition === "start" && <ScoreIndicator score={score} />}
-        {getImpactScoreLabel(score)}
+        {getImpactScoreLabel(score, backendInfo)}
         {scoreIndicatorPosition === "end" && <ScoreIndicator score={score} />}
       </s.Container>
     </Tooltip>
diff --git a/src/featureFlags.ts b/src/featureFlags.ts
index a1be3357b..0f49c7212 100644
--- a/src/featureFlags.ts
+++ b/src/featureFlags.ts
@@ -13,7 +13,8 @@ export const featureFlagMinBackendVersions: Record<FeatureFlag, string> = {
   [FeatureFlag.ARE_SPAN_ENVIRONMENTS_ENABLED]: "0.3.95",
   [FeatureFlag.IS_REPORT_ENABLED]: "0.3.95",
   [FeatureFlag.ARE_ISSUES_SERVICES_FILTERS_ENABLED]: "0.3.103",
-  [FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED]: "0.3.107"
+  [FeatureFlag.ARE_EXTENDED_ASSETS_FILTERS_ENABLED]: "0.3.107",
+  [FeatureFlag.IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED]: "0.3.107"
 };
 
 export const getFeatureFlagValue = (
diff --git a/src/types.ts b/src/types.ts
index 00de5f9ee..28ec460d6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -15,7 +15,8 @@ export enum FeatureFlag {
   ARE_SPAN_ENVIRONMENTS_ENABLED,
   IS_REPORT_ENABLED,
   ARE_ISSUES_SERVICES_FILTERS_ENABLED,
-  ARE_EXTENDED_ASSETS_FILTERS_ENABLED
+  ARE_EXTENDED_ASSETS_FILTERS_ENABLED,
+  IS_NEW_IMPACT_SCORE_CALCULATION_ENABLED
 }
 
 export enum InsightType {

From 31fb06557fbf392537490cb1a11e6a560ff7c2a7 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Thu, 22 Aug 2024 13:17:02 +0200
Subject: [PATCH 7/7] Do not enable the Login button after the success

---
 src/components/Main/Authentication/Login/index.tsx   | 4 ++--
 src/components/Main/Authentication/Login/useLogin.ts | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Main/Authentication/Login/index.tsx b/src/components/Main/Authentication/Login/index.tsx
index de4416a87..8809e070f 100644
--- a/src/components/Main/Authentication/Login/index.tsx
+++ b/src/components/Main/Authentication/Login/index.tsx
@@ -36,7 +36,7 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => {
     mode: "onChange",
     defaultValues: formDefaultValues
   });
-  const { isLoading, login, error } = useLogin();
+  const { isLoading, login, error, isSucceed } = useLogin();
 
   useEffect(() => {
     setFocus("email");
@@ -108,7 +108,7 @@ export const Login = ({ successMessage, onLogin }: LoginProps) => {
       {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
       <ButtonsContainer>
         <SubmitButton
-          isDisabled={!isValid || isLoading}
+          isDisabled={!isValid || isLoading || isSucceed}
           label={"Sign In"}
           type={"submit"}
           form={"loginForm"}
diff --git a/src/components/Main/Authentication/Login/useLogin.ts b/src/components/Main/Authentication/Login/useLogin.ts
index 33d36d24c..12c8d4f2a 100644
--- a/src/components/Main/Authentication/Login/useLogin.ts
+++ b/src/components/Main/Authentication/Login/useLogin.ts
@@ -7,12 +7,16 @@ import { LoginPayload, LoginResult } from "../../types";
 export const useLogin = () => {
   const [isLoading, setIsLoading] = useLoading(false);
   const [error, setError] = useState<{ description: string }>();
+  const [isSucceed, setIsSucceed] = useState<boolean | undefined>(undefined);
 
   useEffect(() => {
     const handleLogin = (data: unknown) => {
       const result = data as LoginResult;
       if (result.error) {
         setError({ description: result.error });
+        setIsSucceed(false);
+      } else {
+        setIsSucceed(true);
       }
       setIsLoading(false);
     };
@@ -35,6 +39,7 @@ export const useLogin = () => {
       });
     },
     isLoading,
-    error
+    error,
+    isSucceed
   };
 };