Add Button, IconButton and Select component

src/components/Insights/common/InsightCard/IconButton/IconButton.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from ".";
+import { JiraLogoIcon } from "../../../../common/icons/16px/JiraLogoIcon";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof IconButton> = {
+  title: "Insights/common/InsightCard/IconButton",
+  component: IconButton,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: {
+      component: JiraLogoIcon
+    }
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    icon: {
+      component: JiraLogoIcon
+    },
+    isDisabled: true
+  }
+};

src/components/Insights/common/InsightCard/IconButton/index.tsx

@@ -0,0 +1,22 @@
+import { ForwardedRef, forwardRef } from "react";
+import * as s from "./styles";
+import { IconButtonProps } from "./types";
+
+export const IconButtonComponent = (
+  props: IconButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>
+) => (
+  <s.Button
+    ref={ref}
+    disabled={props.isDisabled}
+    onClick={props.onClick}
+    className={props.className}
+  >
+    <props.icon.component
+      size={props.icon.size || 16}
+      color={props.icon.color || "currentColor"}
+    />
+  </s.Button>
+);
+
+export const IconButton = forwardRef(IconButtonComponent);

src/components/Insights/common/InsightCard/IconButton/styles.ts

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+  display: flex;
+  border-radius: 2px;
+  margin: 0;
+  cursor: pointer;
+  padding: 4px;
+  border: none;
+  background: none;
+  color: ${({ theme }) => theme.colors.v3.icon.disabled};
+
+  &:disabled {
+    cursor: initial;
+  }
+
+  &:hover:enabled,
+  &:focus:enabled,
+  &:active:enabled {
+    background: ${({ theme }) => theme.colors.v3.surface.highlight};
+  }
+`;

src/components/Insights/common/InsightCard/IconButton/types.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from "react";
+import { IconProps } from "../../../../common/icons/types";
+
+export interface IconButtonProps {
+  icon: {
+    component: ComponentType<IconProps>;
+    color?: string;
+    size?: number;
+  };
+  title?: string;
+  onClick?: () => void;
+  isDisabled?: boolean;
+  className?: string;
+}

src/components/Navigation/CodeButton/AnimatedCodeButton/index.tsx

@@ -1,18 +1,12 @@
-import { ForwardedRef, forwardRef } from "react";
 import * as s from "./styles";
 import { AnimatedCodeButtonProps } from "./types";
 
-export const AnimatedCodeButtonComponent = (
-  props: AnimatedCodeButtonProps,
-  ref: ForwardedRef<HTMLButtonElement>
-) => (
-  <s.Button onClick={props.onClick} ref={ref}>
+export const AnimatedCodeButton = (props: AnimatedCodeButtonProps) => (
+  <s.Button onClick={props.onClick}>
     <s.BorderContainer />
     <s.Background>
       <s.InitialMask />
       <s.EndMask />
     </s.Background>
   </s.Button>
 );
-
-export const AnimatedCodeButton = forwardRef(AnimatedCodeButtonComponent);

src/components/Navigation/CodeButton/AnimatedCodeButton/types.ts

@@ -1,3 +1,3 @@
 export interface AnimatedCodeButtonProps {
-  onClick: () => void;
+  onClick?: () => void;
 }

src/components/Navigation/CodeButton/GlowingIconButton/index.tsx

@@ -1,14 +1,8 @@
-import { ForwardedRef, forwardRef } from "react";
 import * as s from "./styles";
 import { GlowingIconButtonProps } from "./types";
 
-export const GlowingIconButtonComponent = (
-  props: GlowingIconButtonProps,
-  ref: ForwardedRef<HTMLDivElement>
-) => (
-  <s.BorderContainer $type={props.type} ref={ref}>
-    <s.BorderlessIconButton icon={props.icon} onClick={props.onClick} />
+export const GlowingIconButton = (props: GlowingIconButtonProps) => (
+  <s.BorderContainer $type={props.type} onClick={props.onClick}>
+    <s.BorderlessIconButton icon={props.icon} />
   </s.BorderContainer>
 );
-
-export const GlowingIconButton = forwardRef(GlowingIconButtonComponent);

src/components/Navigation/CodeButton/GlowingIconButton/types.ts

@@ -2,7 +2,7 @@ type GlowingIconButtonType = "default" | "error";
 
 export interface GlowingIconButtonProps {
   icon: React.ReactNode;
-  onClick: () => void;
+  onClick?: () => void;
   type?: GlowingIconButtonType;
 }
 

src/components/Navigation/CodeButton/index.tsx

@@ -1,4 +1,6 @@
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useEffect, useState } from "react";
+import { usePrevious } from "../../../hooks/usePrevious";
+import { isBoolean } from "../../../typeGuards/isBoolean";
 import { ClockWithTicksIcon } from "../../common/icons/20px/ClockWithTicksIcon";
 import { CodeIcon } from "../../common/icons/20px/CodeIcon";
 import { OpenTelemetryLogoIcon } from "../../common/icons/20px/OpenTelemetryLogoIcon";
@@ -8,57 +10,87 @@ import * as s from "./styles";
 import { CodeButtonProps } from "./types";
 
 const CodeButtonComponent = (
-  props: CodeButtonProps,
-  ref: ForwardedRef<HTMLDivElement | HTMLButtonElement>
+  {
+    hasData,
+    hasErrors,
+    hasObservability,
+    isDisabled,
+    isAlreadyAtScope,
+    onClick,
+    onMouseEnter,
+    onMouseLeave
+  }: CodeButtonProps,
+  ref: ForwardedRef<HTMLDivElement>
 ) => {
-  if (props.isDisabled || props.isAlreadyAtScope) {
-    return (
-      <s.ExtendedIconButton
-        ref={ref as ForwardedRef<HTMLButtonElement>}
-        icon={<CodeIcon color={"currentColor"} size={20} />}
-        isDisabled={props.isDisabled}
-        onClick={props.onClick}
-        isActive={props.isAlreadyAtScope}
-      />
-    );
-  }
+  const [isHovered, setIsHovered] = useState(false);
+  const previousIsHovered = usePrevious(isHovered);
 
-  if (props.hasErrors) {
-    return (
-      <GlowingIconButton
-        ref={ref as ForwardedRef<HTMLDivElement>}
-        icon={<CodeIcon color={"currentColor"} size={20} />}
-        onClick={props.onClick}
-        type={"error"}
-      />
-    );
-  }
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
 
-  if (!props.hasObservability) {
-    return (
-      <GlowingIconButton
-        ref={ref as ForwardedRef<HTMLDivElement>}
-        icon={<OpenTelemetryLogoIcon color={"currentColor"} size={20} />}
-        onClick={props.onClick}
-      />
-    );
-  }
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
 
-  if (!props.hasData) {
-    return (
-      <GlowingIconButton
-        ref={ref as ForwardedRef<HTMLDivElement>}
-        icon={<ClockWithTicksIcon color={"currentColor"} size={20} />}
-        onClick={props.onClick}
-      />
-    );
-  }
+  useEffect(() => {
+    if (isBoolean(previousIsHovered) && previousIsHovered !== isHovered) {
+      if (isHovered) {
+        onMouseEnter();
+      } else {
+        onMouseLeave();
+      }
+    }
+  }, [onMouseEnter, onMouseLeave, previousIsHovered, isHovered]);
+
+  const getButtonComponent = () => {
+    if (isDisabled || isAlreadyAtScope) {
+      return (
+        <s.ExtendedIconButton
+          icon={<CodeIcon color={"currentColor"} size={20} />}
+          isDisabled={isDisabled}
+          isActive={isAlreadyAtScope}
+        />
+      );
+    }
+
+    if (hasErrors) {
+      return (
+        <GlowingIconButton
+          icon={<CodeIcon color={"currentColor"} size={20} />}
+          type={"error"}
+        />
+      );
+    }
+
+    if (!hasObservability) {
+      return (
+        <GlowingIconButton
+          icon={<OpenTelemetryLogoIcon color={"currentColor"} size={20} />}
+        />
+      );
+    }
+
+    if (!hasData) {
+      return (
+        <GlowingIconButton
+          icon={<ClockWithTicksIcon color={"currentColor"} size={20} />}
+        />
+      );
+    }
+
+    return <AnimatedCodeButton />;
+  };
 
   return (
-    <AnimatedCodeButton
-      ref={ref as ForwardedRef<HTMLButtonElement>}
-      onClick={props.onClick}
-    />
+    <s.Container
+      ref={ref}
+      onClick={onClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {getButtonComponent()}
+    </s.Container>
   );
 };
 

src/components/Navigation/CodeButton/styles.ts

@@ -2,6 +2,10 @@ import styled from "styled-components";
 import { IconButton } from "../common/IconButton";
 import { ExtendedIconButtonProps } from "./types";
 
+export const Container = styled.div`
+  display: flex;
+`;
+
 export const ExtendedIconButton = styled(IconButton)<ExtendedIconButtonProps>`
   color: ${({ theme, isActive }) =>
     isActive

src/components/Navigation/CodeButton/types.ts

@@ -11,4 +11,6 @@ export interface CodeButtonProps {
   hasData: boolean;
   isAlreadyAtScope: boolean;
   hasErrors: boolean;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
 }

src/components/Navigation/actions.ts

@@ -14,5 +14,7 @@ export const actions = addPrefix(ACTION_PREFIX, {
   SET_AUTOFIX_MISSING_DEPENDENCY_RESULT:
     "SET_AUTOFIX_MISSING_DEPENDENCY_RESULT",
   ADD_ANNOTATION: "ADD_ANNOTATION",
-  SET_ADD_ANNOTATION_RESULT: "SET_ADD_ANNOTATION_RESULT"
+  SET_ADD_ANNOTATION_RESULT: "SET_ADD_ANNOTATION_RESULT",
+  HIGHLIGHT_METHOD_IN_EDITOR: "HIGHLIGHT_METHOD_IN_EDITOR",
+  CLEAR_HIGHLIGHTS_IN_EDITOR: "CLEAR_HIGHLIGHTS_IN_EDITOR"
 });

src/components/Navigation/common/IconButton/index.tsx

@@ -11,6 +11,8 @@ export const IconButtonComponent = (
     className={props.className}
     onClick={props.onClick}
     disabled={props.isDisabled}
+    onMouseEnter={props.onMouseEnter}
+    onMouseLeave={props.onMouseLeave}
   >
     {props.icon}
   </s.Button>

src/components/Navigation/common/IconButton/types.ts

@@ -4,5 +4,7 @@ export interface IconButtonProps {
   icon: React.ReactNode;
   isDisabled?: boolean;
   className?: string;
-  onClick: () => void;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
 }

src/components/Navigation/index.tsx

@@ -32,6 +32,7 @@ import {
   ChangeScopePayload,
   ChangeViewPayload,
   CodeContext,
+  HighlightMethodInEditorPayload,
   OpenDashboardPayload,
   SetViewsPayload,
   TabData
@@ -242,6 +243,23 @@ export const Navigation = () => {
     }
   };
 
+  const handleCodeButtonMouseEnter = () => {
+    if (codeContext && codeContext.methodId) {
+      window.sendMessageToDigma<HighlightMethodInEditorPayload>({
+        action: actions.HIGHLIGHT_METHOD_IN_EDITOR,
+        payload: {
+          methodId: codeContext.methodId
+        }
+      });
+    }
+  };
+
+  const handleCodeButtonMouseLeave = () => {
+    window.sendMessageToDigma({
+      action: actions.CLEAR_HIGHLIGHTS_IN_EDITOR
+    });
+  };
+
   const handleEnvironmentChange = (environment: Environment) => {
     sendTrackingEvent(trackingEvents.ENVIRONMENT_SELECTED);
     setIsEnvironmentMenuOpen(false);
@@ -393,6 +411,8 @@ export const Navigation = () => {
                   onClick={handleCodeButtonClick}
                   isAlreadyAtScope={isAlreadyAtScope(codeContext, config.scope)}
                   hasErrors={false}
+                  onMouseEnter={handleCodeButtonMouseEnter}
+                  onMouseLeave={handleCodeButtonMouseLeave}
                 />
               </NewPopover>
             </div>
@@ -404,6 +424,8 @@ export const Navigation = () => {
               onClick={handleCodeButtonClick}
               isAlreadyAtScope={isAlreadyAtScope(codeContext, config.scope)}
               hasErrors={false}
+              onMouseEnter={handleCodeButtonMouseEnter}
+              onMouseLeave={handleCodeButtonMouseLeave}
             />
           )}
         </Tooltip>

src/components/Navigation/types.ts

@@ -49,6 +49,10 @@ export interface AddAnnotationPayload {
   methodId: string;
 }
 
+export interface HighlightMethodInEditorPayload {
+  methodId: string;
+}
+
 export interface CodeContext {
   spans: {
     assets: {