Add Copy button for asset links

src/components/Assets/AssetList/AssetEntry/index.tsx

@@ -85,6 +85,7 @@ export const AssetEntry = (props: AssetEntryProps) => {
           <Tooltip title={name}>
             <s.Link onClick={() => handleLinkClick()}>{name}</s.Link>
           </Tooltip>
+          <s.StyledCopyButton text={name} />
           <s.IndicatorsContainer>
             {isNew && <Tag type={"success"} value={"New"} />}
             {sortedInsights.map((insight) => {

src/components/Assets/AssetList/AssetEntry/styles.ts

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { caption2RegularTypography } from "../../../common/App/typographies";
 import { grayScale } from "../../../common/App/v2colors";
+import { CopyButton } from "../../../common/v3/CopyButton";
 import { ImpactScoreIndicatorProps } from "./types";
 
 export const Container = styled.div`
@@ -35,11 +36,22 @@ export const Header = styled.div`
   gap: 4px;
 `;
 
+export const StyledCopyButton = styled(CopyButton)`
+  padding: 0;
+  display: none;
+`;
+
 export const TitleRow = styled.div`
   display: flex;
   gap: 2px;
   height: 20px;
   align-items: center;
+
+  &:hover {
+    ${StyledCopyButton} {
+      display: flex;
+    }
+  }
 `;
 
 export const AssetTypeIconContainer = styled.div`

src/components/Assets/AssetList/AssetList.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story = {
   args: {
     searchQuery: "",
     setRefresher: () => {
-      // empty
+      return undefined;
     },
     assetTypeId: "Endpoint",
     data: {

src/components/Assets/AssetList/index.tsx

@@ -354,8 +354,8 @@ export const AssetList = (props: AssetListProps) => {
     props.scopeViewOptions
   ]);
 
-  const handleBackButtonClick = () => {
-    props.onBackButtonClick();
+  const handleAllAssetsLinkClick = () => {
+    props.onGoToAllAssets();
   };
 
   const handleSortingMenuToggle = () => {
@@ -459,7 +459,7 @@ export const AssetList = (props: AssetListProps) => {
           )}
           {assetTypeInfo?.label || props.assetTypeId}
         </s.TypeHeader>
-        <Link onClick={handleBackButtonClick}>All Assets</Link>
+        <Link onClick={handleAllAssetsLinkClick}>All Assets</Link>
       </s.Header>
       <s.Toolbar>
         <s.PopoverContainer>

src/components/Assets/AssetList/types.ts

@@ -4,7 +4,7 @@ import { AssetScopeOption } from "../AssetsViewScopeConfiguration/types";
 
 export interface AssetListProps {
   data?: AssetsData;
-  onBackButtonClick: () => void;
+  onGoToAllAssets: () => void;
   assetTypeId: string;
   filters?: AssetFilterQuery;
   searchQuery: string;

src/components/Assets/AssetTypeList/AssetTypeList.stories.tsx

@@ -19,6 +19,9 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
+    setRefresher: () => {
+      return undefined;
+    },
     searchQuery: "",
     data: {
       assetCategories: [
@@ -54,6 +57,9 @@ export const Default: Story = {
 export const Empty: Story = {
   args: {
     searchQuery: "",
+    setRefresher: () => {
+      return undefined;
+    },
     data: {
       assetCategories: []
     }

src/components/Assets/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from "react";
+import { actions as globalActions } from "../../actions";
 import { useDebounce } from "../../hooks/useDebounce";
 import { usePrevious } from "../../hooks/usePrevious";
 import { ChangeViewPayload } from "../../types";
@@ -8,7 +9,6 @@ import { EmptyState } from "../common/EmptyState";
 import { SearchInput } from "../common/SearchInput";
 import { RefreshIcon } from "../common/icons/16px/RefreshIcon";
 import { Tooltip } from "../common/v3/Tooltip";
-import { actions as globalActions } from "./../../actions";
 import { AssetList } from "./AssetList";
 import { AssetTypeList } from "./AssetTypeList";
 import { AssetsFilter } from "./AssetsFilter";
@@ -61,7 +61,7 @@ export const Assets = ({ selectedTypeId }: AssetsProps) => {
     }
   }, [config.scope, previousScope, selectedTypeId]);
 
-  const handleAllAssetsClick = () => {
+  const handleGoToAllAssets = () => {
     setSelectedAssetTypeId(null);
     changeView("/assets");
   };
@@ -153,7 +153,7 @@ export const Assets = ({ selectedTypeId }: AssetsProps) => {
 
     return (
       <AssetList
-        onBackButtonClick={handleAllAssetsClick}
+        onGoToAllAssets={handleGoToAllAssets}
         assetTypeId={selectedAssetTypeId}
         filters={selectedFilters}
         searchQuery={debouncedSearchInputValue}

src/components/Dashboard/widgets/ClientSpansPerformanceImpact/index.tsx

@@ -32,6 +32,7 @@ const renderClientSpanOverallImpactEntry = (
           {item.displayName}
         </s.SpanLink>
       </Tooltip>
+      <s.StyledCopyButton text={item.displayName} />
       <s.ImpactScoreContainer>
         <ImpactScore
           score={item.overallImpact}

src/components/Dashboard/widgets/ClientSpansPerformanceImpact/styles.ts

@@ -1,10 +1,21 @@
 import styled from "styled-components";
 import { Link } from "../../../common/Link";
+import { CopyButton } from "../../../common/v3/CopyButton";
+
+export const StyledCopyButton = styled(CopyButton)`
+  display: none;
+  padding: 0;
+`;
 
 export const Entry = styled.div`
   display: flex;
-  justify-content: space-between;
   gap: 4px;
+
+  &:hover {
+    ${StyledCopyButton} {
+      display: flex;
+    }
+  }
 `;
 
 export const SpanLink = styled(Link)`
@@ -14,6 +25,7 @@ export const SpanLink = styled(Link)`
 `;
 
 export const ImpactScoreContainer = styled.div`
+  margin-left: auto;
   display: flex;
   width: 70px;
   flex-shrink: 0;

src/components/Dashboard/widgets/SlowQueries/index.tsx

@@ -38,6 +38,7 @@ const renderSlowQueryEntry = (
           {item.displayName}
         </s.SpanLink>
       </Tooltip>
+      <s.StyledCopyButton text={item.displayName} />
       {durationString && <s.Duration>{durationString}</s.Duration>}
     </s.Entry>
   );

src/components/Dashboard/widgets/SlowQueries/styles.ts

@@ -1,10 +1,21 @@
 import styled from "styled-components";
 import { Link } from "../../../common/Link";
+import { CopyButton } from "../../../common/v3/CopyButton";
+
+export const StyledCopyButton = styled(CopyButton)`
+  display: none;
+  padding: 0;
+`;
 
 export const Entry = styled.div`
   display: flex;
-  justify-content: space-between;
   gap: 4px;
+
+  &:hover {
+    ${StyledCopyButton} {
+      display: flex;
+    }
+  }
 `;
 
 export const SpanLink = styled(Link)`
@@ -14,6 +25,7 @@ export const SpanLink = styled(Link)`
 `;
 
 export const Duration = styled.span`
+  margin-left: auto;
   flex-shrink: 0;
   font-size: 14px;
   font-weight: 500;

src/components/Highlights/Highlights.stories.tsx

@@ -22,38 +22,34 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   play: () => {
-    setTimeout(() => {
-      window.setTimeout(() => {
-        window.postMessage({
-          type: "digma",
-          action: mainActions.SET_HIGHLIGHTS_TOP_ISSUES_DATA,
-          payload: mockedTopIssuesData
-        });
-        window.postMessage({
-          type: "digma",
-          action: mainActions.SET_HIGHLIGHTS_PERFORMANCE_DATA,
-          payload: mockedPerformanceData
-        });
-      }, 1000);
-    });
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: mainActions.SET_HIGHLIGHTS_TOP_ISSUES_DATA,
+        payload: mockedTopIssuesData
+      });
+      window.postMessage({
+        type: "digma",
+        action: mainActions.SET_HIGHLIGHTS_PERFORMANCE_DATA,
+        payload: mockedPerformanceData
+      });
+    }, 1000);
   }
 };
 
 export const Empty: Story = {
   play: () => {
-    setTimeout(() => {
-      window.setTimeout(() => {
-        window.postMessage({
-          type: "digma",
-          action: mainActions.SET_HIGHLIGHTS_TOP_ISSUES_DATA,
-          payload: { topInsights: [] }
-        });
-        window.postMessage({
-          type: "digma",
-          action: mainActions.SET_HIGHLIGHTS_PERFORMANCE_DATA,
-          payload: { performance: [] }
-        });
-      }, 1000);
-    });
+    window.setTimeout(() => {
+      window.postMessage({
+        type: "digma",
+        action: mainActions.SET_HIGHLIGHTS_TOP_ISSUES_DATA,
+        payload: { topInsights: [] }
+      });
+      window.postMessage({
+        type: "digma",
+        action: mainActions.SET_HIGHLIGHTS_PERFORMANCE_DATA,
+        payload: { performance: [] }
+      });
+    }, 1000);
   }
 };

src/components/Highlights/TopIssues/common/AssetLink/index.tsx

@@ -1,6 +1,7 @@
 import { actions as globalActions } from "../../../../../actions";
 import { ChangeScopePayload } from "../../../../../types";
 import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { Link } from "../../../../common/v3/Link";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import { trackingEvents } from "../../../tracking";
 import * as s from "./styles";
@@ -26,7 +27,10 @@ export const AssetLink = ({ asset }: AssetLinkProps) => {
 
   return (
     <Tooltip title={assetName}>
-      <s.Link onClick={handleAssetLinkClick}>{assetName}</s.Link>
+      <s.Container>
+        <Link onClick={handleAssetLinkClick}>{assetName}</Link>
+        <s.StyledCopyButton text={assetName} />
+      </s.Container>
     </Tooltip>
   );
 };

src/components/Highlights/TopIssues/common/AssetLink/styles.ts

@@ -1,7 +1,22 @@
 import styled from "styled-components";
-import { Link as CommonLink } from "../../../../common/v3/Link";
+import { CopyButton } from "../../../../common/v3/CopyButton";
 
-export const Link = styled(CommonLink)`
+export const StyledCopyButton = styled(CopyButton)`
+  display: none;
+  padding: 0;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  gap: 4px;
   padding: 6px 0;
+  width: fit-content;
   max-width: 100%;
+  align-items: center;
+
+  &:hover {
+    ${StyledCopyButton} {
+      display: flex;
+    }
+  }
 `;

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointBottleneckInsightCard/index.tsx

@@ -2,8 +2,7 @@ import { getDurationString } from "../../../../../../utils/getDurationString";
 import { InsightCard } from "../common/InsightCard";
 import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
 import { KeyValue } from "../common/InsightCard/KeyValue";
-import { ContentContainer, Description, Details } from "../styles";
-import * as s from "./styles";
+import { AssetLink, ContentContainer, Description, Details } from "../styles";
 import { EndpointBottleneckInsightCardProps } from "./types";
 
 export const EndpointBottleneckInsightCard = ({
@@ -54,7 +53,7 @@ export const EndpointBottleneckInsightCard = ({
         <ContentContainer>
           <Details>
             <Description>Asset</Description>
-            <s.SpanListItem
+            <AssetLink
               name={spanName}
               onClick={() => handleSpanLinkClick(spanCodeObjectId)}
             />

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/index.tsx

@@ -1,6 +1,6 @@
 import { InsightType, Trace } from "../../../../types";
 import { InsightCard } from "../common/InsightCard";
-import { Description } from "../styles";
+import { AssetLink, Description } from "../styles";
 import * as s from "./styles";
 import { EndpointChattyApiV2InsightCardProps } from "./types";
 
@@ -37,7 +37,7 @@ export const EndpointChattyApiV2InsightCard = ({
           <Description>
             Excessive API calls to specific endpoint found
           </Description>
-          <s.SpanListItem
+          <AssetLink
             name={spanName}
             onClick={() => handleSpanLinkClick(spanCodeObjectId)}
           />

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointChattyApiV2InsightCard/styles.ts

@@ -1,13 +1,6 @@
 import styled from "styled-components";
-import { ListItem } from "../common/InsightCard/ListItem";
 import { ContentContainer } from "../styles";
 
 export const Container = styled(ContentContainer)`
   gap: 4px;
 `;
-
-export const SpanListItem = styled(ListItem)`
-  height: 28px;
-  padding: 4px 0;
-  background: none;
-`;

src/components/Insights/InsightsCatalog/InsightsPage/insightCards/EndpointQueryOptimizationV2InsightCard/index.tsx

@@ -3,8 +3,7 @@ import { InsightType, Trace } from "../../../../types";
 import { InsightCard } from "../common/InsightCard";
 import { ColumnsContainer } from "../common/InsightCard/ColumnsContainer";
 import { KeyValue } from "../common/InsightCard/KeyValue";
-import { ContentContainer, Details } from "../styles";
-import * as s from "./styles";
+import { AssetLink, ContentContainer, Details } from "../styles";
 import { EndpointQueryOptimizationV2InsightCardProps } from "./types";
 
 export const EndpointQueryOptimizationV2InsightCard = ({
@@ -46,7 +45,7 @@ export const EndpointQueryOptimizationV2InsightCard = ({
       content={
         <ContentContainer>
           <Details>
-            <s.SpanListItem
+            <AssetLink
               name={spanName}
               onClick={() => handleSpanLinkClick(spanCodeObjectId)}
             />