Add "New" badge to assets and insights

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

@@ -1,20 +1,24 @@
 import { useContext } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
 import { getFeatureFlagValue } from "../../../../featureFlags";
+import { isString } from "../../../../typeGuards/isString";
 import { FeatureFlag, InsightType } from "../../../../types";
 import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
 import { getInsightImportanceColor } from "../../../../utils/getInsightImportanceColor";
 import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo";
 import { getInsightTypeOrderPriority } from "../../../../utils/getInsightTypeOrderPriority";
 import { ConfigContext } from "../../../common/App/ConfigContext";
 import { ImpactScore } from "../../../common/ImpactScore";
+import { Tag } from "../../../common/Tag";
 import { Tooltip } from "../../../common/Tooltip";
 import { GlobeIcon } from "../../../common/icons/GlobeIcon";
 import { getAssetTypeInfo } from "../../utils";
 import { SORTING_CRITERION } from "../types";
 import * as s from "./styles";
 import { AssetEntryProps } from "./types";
 
+const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
+
 const getServiceIconColor = (theme: DefaultTheme) => {
   switch (theme.mode) {
     case "light":
@@ -69,6 +73,11 @@ export const AssetEntry = (props: AssetEntryProps) => {
   }).replace(" ", "");
   const timeDistanceTitle = new Date(lastSeenDateTime).toString();
 
+  const isNew = isString(props.entry.firstDetected)
+    ? Date.now() - new Date(props.entry.firstDetected).valueOf() <
+      IS_NEW_TIME_LIMIT
+    : false;
+
   return (
     <s.Container>
       <s.Header>
@@ -80,7 +89,8 @@ export const AssetEntry = (props: AssetEntryProps) => {
         <Tooltip title={name}>
           <s.Link onClick={() => handleLinkClick()}>{name}</s.Link>
         </Tooltip>
-        <s.InsightIconsContainer>
+        <s.IndicatorsContainer>
+          {isNew && <Tag type={"success"} value={"New"} />}
           {sortedInsights.map((insight) => {
             const insightTypeInfo = getInsightTypeInfo(insight.type);
             const insightIconColor = getInsightImportanceColor(
@@ -101,7 +111,7 @@ export const AssetEntry = (props: AssetEntryProps) => {
               )
             );
           })}
-        </s.InsightIconsContainer>
+        </s.IndicatorsContainer>
       </s.Header>
       <s.StatsContainer>
         <s.StatsColumn>

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

@@ -53,7 +53,8 @@ export const Link = styled.a`
   overflow: hidden;
 `;
 
-export const InsightIconsContainer = styled.div`
+export const IndicatorsContainer = styled.div`
+  align-items: center;
   display: flex;
   gap: 2px;
   margin-left: auto;

src/components/Assets/AssetList/types.ts

@@ -60,6 +60,7 @@ export interface AssetEntry {
   service: string;
   services: string[];
   spanCodeObjectId: string;
+  firstDetected?: string;
 }
 
 export type AssetsData = {

src/components/Insights/InsightCard/index.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useTheme } from "styled-components";
 import { PERCENTILES } from "../../../constants";
+import { isString } from "../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../utils/formatTimeDistance";
 import { getInsightImportanceColor } from "../../../utils/getInsightImportanceColor";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
@@ -11,6 +12,7 @@ import { Menu } from "../../common/Menu";
 import { Popover } from "../../common/Popover";
 import { PopoverContent } from "../../common/Popover/PopoverContent";
 import { PopoverTrigger } from "../../common/Popover/PopoverTrigger";
+import { Tag } from "../../common/Tag";
 import { Toggle } from "../../common/Toggle";
 import { ToggleValue } from "../../common/Toggle/types";
 import { Tooltip } from "../../common/Tooltip";
@@ -22,6 +24,7 @@ import { InsightCardProps } from "./types";
 
 const RECALCULATE = "recalculate";
 const DEFAULT_PERCENTILE = 0.5;
+const IS_NEW_TIME_LIMIT = 1000 * 60 * 10; // in milliseconds
 
 export const InsightCard = (props: InsightCardProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -102,6 +105,11 @@ export const InsightCard = (props: InsightCardProps) => {
     );
   };
 
+  const isNew = isString(props.data.firstDetected)
+    ? Date.now() - new Date(props.data.firstDetected).valueOf() <
+      IS_NEW_TIME_LIMIT
+    : false;
+
   return (
     <Card
       header={
@@ -120,6 +128,7 @@ export const InsightCard = (props: InsightCardProps) => {
             {insightTypeInfo?.label || props.data.type}
           </s.Title>
           <s.Toolbar>
+            {isNew && <Tag type={"success"} value={"New"} />}
             {props.isAsync && <s.AsyncBadge>Async</s.AsyncBadge>}
             {props.stats && <s.Stats>{props.stats}</s.Stats>}
             {(props.menuItems || props.data.isRecalculateEnabled) && (