Bug fixes

src/actions.ts

@@ -34,5 +34,6 @@ export const actions = addPrefix(ACTION_PREFIX, {
   OPEN_DASHBOARD: "OPEN_DASHBOARD",
   OPEN_INSTALLATION_WIZARD: "OPEN_INSTALLATION_WIZARD",
   SET_SCOPE: "SET_SCOPE",
+  CHANGE_SCOPE: "CHANGE_SCOPE",
   SET_STATE: "SET_STATE"
 });

src/components/Assets/AssetsFilter/index.tsx

@@ -74,6 +74,7 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
   const [selectedInsights, setSelectedInsights] = useState<InsightType[]>([]);
   const config = useContext(ConfigContext);
   const previousEnvironment = usePrevious(config.environment);
+  const previousScope = usePrevious(config.scope);
 
   const getData = (
     services: string[],
@@ -135,8 +136,10 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
 
   useEffect(() => {
     if (
-      isEnvironment(previousEnvironment) &&
-      previousEnvironment.originalName !== config.environment?.originalName
+      (isEnvironment(previousEnvironment) &&
+        previousEnvironment.originalName !==
+          config.environment?.originalName) ||
+      (previousScope && previousScope !== config.scope)
     ) {
       const defaultFilters = {
         services: [],
@@ -151,7 +154,9 @@ export const AssetsFilter = (props: AssetsFilterProps) => {
     previousEnvironment,
     config.environment,
     setPersistedFilters,
-    props.onApply
+    props.onApply,
+    previousScope,
+    config.scope
   ]);
 
   useEffect(() => {

src/components/Assets/index.tsx

@@ -1,5 +1,4 @@
 import {
-  ChangeEvent,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -16,7 +15,7 @@ import { usePrevious } from "../../hooks/usePrevious";
 import { FeatureFlag } from "../../types";
 import { ConfigContext } from "../common/App/ConfigContext";
 import { EmptyState } from "../common/EmptyState";
-import { MagnifierIcon } from "../common/icons/MagnifierIcon";
+import { SearchInput } from "../common/SearchInput";
 import { AssetList } from "./AssetList";
 import { AssetTypeList } from "./AssetTypeList";
 import { AssetsFilter } from "./AssetsFilter";
@@ -79,17 +78,19 @@ export const Assets = () => {
   }, [config.scope]);
 
   useEffect(() => {
-    if (previousScope !== config.scope?.span) {
+    if (!previousScope || previousScope !== config.scope?.span) {
       setSelectedAssetTypeId(null);
+      setSearchInputValue("");
+      setSelectedServices([]);
     }
   }, [config.scope, previousScope]);
 
   const handleBackButtonClick = () => {
     setSelectedAssetTypeId(null);
   };
 
-  const handleSearchInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchInputValue(e.target.value);
+  const handleSearchInputChange = (val: string | null) => {
+    setSearchInputValue(val || "");
   };
 
   const handleAssetTypeSelect = (assetTypeId: string) => {
@@ -155,15 +156,10 @@ export const Assets = () => {
         <s.HeaderItem>
           Assets
           {window.assetsSearch === true && (
-            <s.SearchInputContainer>
-              <s.SearchInputIconContainer>
-                <MagnifierIcon color={"currentColor"} size={14} />
-              </s.SearchInputIconContainer>
-              <s.SearchInput
-                placeholder={"Search"}
-                onChange={handleSearchInputChange}
-              />
-            </s.SearchInputContainer>
+            <SearchInput
+              onChange={handleSearchInputChange}
+              value={searchInputValue}
+            />
           )}
           {isComplexFilterEnabled ? (
             <AssetsFilter

src/components/Insights/BottleneckInsight/index.tsx

@@ -26,7 +26,7 @@ export const BottleneckInsight = (props: BottleneckInsightProps) => {
 
   return (
     <InsightCard
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       data={props.insight}
       content={
         <>

src/components/Insights/DurationBreakdownInsight/index.tsx

@@ -80,7 +80,7 @@ export const DurationBreakdownInsight = (
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.EntryList>
           {pageItems.map((entry) => {

src/components/Insights/DurationInsight/index.tsx

@@ -283,7 +283,7 @@ export const DurationInsight = (props: DurationInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       isRecent={isLastCallRecent}
       content={
         <s.Container>

src/components/Insights/DurationSlowdownSourceInsight/index.tsx

@@ -53,7 +53,7 @@ export const DurationSlowdownSourceInsight = (
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.Container>
           <Description>Found spans slowing the endpoint</Description>

src/components/Insights/EndpointNPlusOneInsight/index.tsx

@@ -58,7 +58,7 @@ export const EndpointNPlusOneInsight = (
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.ContentContainer>
           <Description>Check the following locations:</Description>

src/components/Insights/EndpointQueryOptimizationInsight/index.tsx

@@ -56,7 +56,7 @@ export const EndpointQueryOptimizationInsight = (
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.ContentContainer>
           <Description>Check the following locations:</Description>

src/components/Insights/ExcessiveAPICallsInsight/index.tsx

@@ -40,7 +40,7 @@ export const ExcessiveAPICallsInsight = (
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.ContentContainer>
           <Description>

src/components/Insights/HighNumberOfQueriesInsight/index.tsx

@@ -39,7 +39,7 @@ export const HighNumberOfQueriesInsight = (
   return (
     <InsightCard
       data={insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.ContentContainer>
           <Description>

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

@@ -20,7 +20,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: "asdasdasd",
     data: {
       firstDetected: "2023-12-05T17:25:47.010Z",
       lastDetected: "2024-01-05T13:14:47.010Z",

src/components/Insights/InsightCard/index.tsx

@@ -1,5 +1,6 @@
 import { useContext, useState } from "react";
 import { useTheme } from "styled-components";
+import { actions } from "../../../actions";
 import { PERCENTILES } from "../../../constants";
 import { isString } from "../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
@@ -123,16 +124,31 @@ export const InsightCard = (props: InsightCardProps) => {
       IS_NEW_TIME_LIMIT
     : false;
 
+  const handleLinkClick = (spanCodeObjectId?: string) => {
+    if (spanCodeObjectId) {
+      window.sendMessageToDigma({
+        action: actions.CHANGE_SCOPE,
+        payload: {
+          span: spanCodeObjectId
+        }
+      });
+    }
+  };
+
   return (
     <>
       <Card
-        showTitle={!!(props.title && !scope?.span)}
+        showTitle={!!(props.spanInfo?.displayName && !scope?.span)}
         title={
           <s.Title>
             <s.TitleIcon>
               <OpenTelemetryLogoSmallIcon color="#6063F6" size={16} />
             </s.TitleIcon>
-            <s.TitleText>{props.title}</s.TitleText>
+            <s.Link
+              onClick={() => handleLinkClick(props.spanInfo?.spanCodeObjectId)}
+            >
+              {props.spanInfo?.displayName}
+            </s.Link>
           </s.Title>
         }
         header={

src/components/Insights/InsightCard/styles.ts

@@ -1,16 +1,18 @@
 import styled from "styled-components";
-import { Link } from "../styles";
 
 export const TitleIcon = styled.div`
   display: flex;
 `;
 
-export const TitleText = styled.div`
-  fill: #a1b5ff;
+export const Link = styled.a`
+  color: #7891d0;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
-  display: block;
+  overflow: hidden;
 `;
 
 export const Title = styled.div`

src/components/Insights/InsightCard/types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { InsightType } from "../../../types";
+import { InsightType, SpanInfo } from "../../../types";
 import { GenericCodeObjectInsight } from "../types";
 
 export interface InsightCardProps {
@@ -9,7 +9,6 @@ export interface InsightCardProps {
   menuItems?: string[];
   stats?: string;
   buttons?: ReactNode[];
-  title?: string;
   onRecalculate: (
     prefixedCodeObjectId: string,
     insightType: InsightType
@@ -18,6 +17,7 @@ export interface InsightCardProps {
   isRecent?: boolean;
   onRefresh: (insightType: InsightType) => void;
   isAsync?: boolean;
+  spanInfo?: SpanInfo | null;
 }
 
 export interface PercentileViewModeOptionProps {

src/components/Insights/InsightsCatalog/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { usePrevious } from "../../../hooks/usePrevious";
 
+import { useDebounce } from "../../../hooks/useDebounce";
 import { isNumber } from "../../../typeGuards/isNumber";
 import { Pagination } from "../../common/Pagination";
 import { SearchInput } from "../../common/SearchInput";
@@ -15,44 +16,51 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
   const { insights, onJiraTicketCreate, defaultQuery, totalCount } = props;
   const [page, setPage] = useState(0);
   const previousPage = usePrevious(page);
-  const [searchInputValue, setSearchInputValue] = useState<string | null>(
+  const [searchInputValue, setSearchInputValue] = useState(
     defaultQuery.searchQuery
   );
+  const debouncedSearchInputValue = useDebounce(searchInputValue, 1000);
   const [sorting, setSorting] = useState<Sorting>(defaultQuery.sorting);
   const previousSorting = usePrevious(sorting);
-  const previousSearchQuery = usePrevious(searchInputValue);
+  const previousSearchQuery = usePrevious(debouncedSearchInputValue);
   const pageStartItemNumber = page * PAGE_SIZE + 1;
   const pageEndItemNumber = Math.min(
     pageStartItemNumber + PAGE_SIZE - 1,
     totalCount
   );
 
+  useEffect(() => {
+    if (previousPage !== page) {
+      window.scrollTo(0, 0);
+    }
+  }, [previousPage, page]);
+
   useEffect(() => {
     props.onQueryChange({
       page,
       sorting,
-      searchQuery: searchInputValue
+      searchQuery: debouncedSearchInputValue
     });
   }, []);
 
   useEffect(() => {
     if (
       (isNumber(previousPage) && previousPage !== page) ||
       (previousSorting && previousSorting !== sorting) ||
-      previousSearchQuery !== searchInputValue
+      previousSearchQuery !== debouncedSearchInputValue
     ) {
       props.onQueryChange({
         page,
         sorting,
-        searchQuery: searchInputValue
+        searchQuery: debouncedSearchInputValue
       });
     }
   }, [
     previousSorting,
     sorting,
     previousPage,
     page,
-    searchInputValue,
+    debouncedSearchInputValue,
     previousSearchQuery
   ]);
 
@@ -63,7 +71,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
           onChange={(val: string | null) => {
             setSearchInputValue(val);
           }}
-          default={defaultQuery.searchQuery}
+          value={searchInputValue}
         />
         <SortingSelector
           onChange={(val: Sorting) => {
@@ -86,7 +94,7 @@ export const InsightsCatalog = (props: InsightsCatalogProps) => {
       </s.Toolbar>
       <InsightsPage
         insights={insights}
-        isFilteringEnabled={searchInputValue !== null}
+        isFilteringEnabled={debouncedSearchInputValue !== null}
         onJiraTicketCreate={onJiraTicketCreate}
         onRefresh={props.onRefresh}
       />

src/components/Insights/InsightsPage/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { usePersistence } from "../../../hooks/usePersistence";
-import { usePrevious } from "../../../hooks/usePrevious";
 import { trackingEvents as globalTrackingEvents } from "../../../trackingEvents";
 import { isUndefined } from "../../../typeGuards/isUndefined";
 import { InsightType } from "../../../types";
@@ -473,7 +472,6 @@ const IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY =
   "isInsightJiraTicketHintShown";
 
 export const InsightsPage = (props: InsightPageProps) => {
-  const previousInsights = usePrevious(props.insights);
   const [isInsightJiraTicketHintShown, setIsInsightJiraTicketHintShown] =
     usePersistence<isInsightJiraTicketHintShownPayload>(
       IS_INSIGHT_JIRA_TICKET_HINT_SHOWN_PERSISTENCE_KEY,
@@ -482,12 +480,6 @@ export const InsightsPage = (props: InsightPageProps) => {
 
   const insightIndexWithJiraHint = getInsightToShowJiraHint(props.insights);
 
-  useEffect(() => {
-    if (props.insights !== previousInsights) {
-      window.scrollTo(0, 0);
-    }
-  }, [props.insights, previousInsights]);
-
   useEffect(() => {
     window.sendMessageToDigma({
       action: actions.MARK_INSIGHT_TYPES_AS_VIEWED,

src/components/Insights/NPlusOneInsight/index.tsx

@@ -47,7 +47,7 @@ export const NPlusOneInsight = (props: NPlusOneInsightProps) => {
   return (
     <InsightCard
       data={props.insight}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       content={
         <s.ContentContainer>
           <Description>Check the following SELECT statement:</Description>

src/components/Insights/NoScalingIssueInsight/index.tsx

@@ -17,7 +17,7 @@ export const NoScalingIssueInsight = (props: NoScalingIssueInsightProps) => {
   return (
     <InsightCard
       key={props.insight.type}
-      title={props.insight.spanInfo?.displayName}
+      spanInfo={props.insight.spanInfo}
       data={props.insight}
       content={<div>This code is scaling well at concurrent executions</div>}
       buttons={[