Change Digma icon

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "davidanson.vscode-markdownlint",
     "esbenp.prettier-vscode",
     "stylelint.vscode-stylelint",
-    "styled-components.vscode-styled-components"
+    "styled-components.vscode-styled-components",
+    "streetsidesoftware.code-spell-checker"
   ]
 }

src/components/RecentActivity/RecentActivityTable/index.tsx

@@ -4,7 +4,6 @@ import {
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useEffect, useState } from "react";
 import { DefaultTheme, useTheme } from "styled-components";
 import { timeAgo } from "../../../utils/timeAgo";
 import { Badge } from "../../common/Badge";
@@ -15,26 +14,13 @@ import { MeterHighIcon } from "../../common/icons/MeterHighIcon";
 import { ScalesIcon } from "../../common/icons/ScalesIcon";
 import { SnailIcon } from "../../common/icons/SnailIcon";
 import { SpotIcon } from "../../common/icons/SpotIcon";
+import { SQLDatabaseIcon } from "../../common/icons/SQLDatabaseIcon";
 import { ViewMode } from "../EnvironmentPanel/types";
 import { ActivityEntry, Duration, EntrySpan, SlimInsight } from "../types";
 import { SpanLink } from "./SpanLink";
 import * as s from "./styles";
 import { INSIGHT_TYPES, RecentActivityTableProps } from "./types";
 
-const insightTypesWithoutIcons = ["EndpointSpaNPlusOne", "SpaNPlusOne"];
-
-const filterData = (data: ActivityEntry[]): ActivityEntry[] =>
-  data.map((entry) => {
-    const filteredInsights = entry.slimAggregatedInsights.filter(
-      (x) => !insightTypesWithoutIcons.includes(x.type)
-    );
-
-    return {
-      ...entry,
-      slimAggregatedInsights: filteredInsights
-    };
-  });
-
 const getInsightInfo = (
   type: string,
   theme: DefaultTheme
@@ -62,11 +48,11 @@ const getInsightInfo = (
       label: "Span Bottleneck"
     },
     [INSIGHT_TYPES.EndpointSpaNPlusOne]: {
-      icon: <>N/A</>,
+      icon: <SQLDatabaseIcon size={20} />,
       label: "Suspected N-Plus-1"
     },
     [INSIGHT_TYPES.SpaNPlusOne]: {
-      icon: <>N/A</>,
+      icon: <SQLDatabaseIcon size={20} />,
       label: "Suspected N-Plus-1"
     },
     [INSIGHT_TYPES.SpanEndpointBottleneck]: {
@@ -103,12 +89,6 @@ export const isRecent = (entry: ActivityEntry): boolean => {
 export const RecentActivityTable = (props: RecentActivityTableProps) => {
   const theme = useTheme();
 
-  const [data, setData] = useState(filterData(props.data));
-
-  useEffect(() => {
-    setData(filterData(props.data));
-  }, [props.data]);
-
   const handleSpanLinkClick = (span: EntrySpan) => {
     props.onSpanLinkClick(span);
   };
@@ -226,7 +206,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => {
   ];
 
   const table = useReactTable({
-    data,
+    data: props.data,
     columns,
     getCoreRowModel: getCoreRowModel()
   });
@@ -265,7 +245,7 @@ export const RecentActivityTable = (props: RecentActivityTableProps) => {
     <s.ListContainer>
       <s.ListHeader>Recent Activity</s.ListHeader>
       <s.List>
-        {data.map((entry, i) => (
+        {props.data.map((entry, i) => (
           <s.ListItem key={i}>
             {isRecent(entry) && (
               <s.ListBadgeContainer>

src/components/common/icons/ChevronIcon.tsx

@@ -4,9 +4,9 @@ import { DIRECTION, RotatableIconProps } from "./types";
 
 const directionRotateMap: { [key in DIRECTION]: string } = {
   [DIRECTION.DOWN]: "0",
-  [DIRECTION.RIGHT]: "90",
+  [DIRECTION.LEFT]: "90",
   [DIRECTION.UP]: "180",
-  [DIRECTION.LEFT]: "270"
+  [DIRECTION.RIGHT]: "270"
 };
 
 const ChevronIconComponent = (props: RotatableIconProps) => {

src/components/common/icons/DigmaLogoFlatIcon.tsx

@@ -11,15 +11,15 @@ const DigmaLogoFlatIconComponent = (props: IconProps) => {
       width={size}
       height={size}
       fill="none"
-      viewBox="0 0 22 23"
+      viewBox="0 0 22 25"
     >
       <linearGradient id="grad">
         <stop offset="0%" stopColor="#6165b2" />
         <stop offset="100%" stopColor="#2e2d9d" />
       </linearGradient>
       <path
         fill={props.color || "url(#grad)"}
-        d="M20.116 11.33c-.118-2.066-4.725-6.558-5.472-7.265-.747-.707-1.996-2.51-2.362-2.485-.386.035.223 3.668.27 6.266.047 2.599-.529 3.497-.728 3.448-.2-.049-.876-.148-.876-.148s-.677.098-.875.148c-.198.05-.778-.848-.727-3.448.052-2.6.656-6.23.268-6.266C9.25 1.552 8 3.352 7.25 4.065c-.748.713-5.35 5.194-5.469 7.266-.093 1.639.54 2.111 1.932 2.77 1.39.658 1.826.856 1.727 1.216-.099.36-.995.51-1.045 1.393-.05.883.162 2.287 2.603 3.348 2.44 1.062 3.248 1.362 3.95 1.362.7 0 1.508-.296 3.95-1.362 2.44-1.066 2.552-2.778 2.51-3.66-.044-.881-.845-.72-.944-1.08-.1-.36.335-.559 1.726-1.217 1.39-.659 2.018-1.131 1.925-2.77Z"
+        d="M12.5 11.87V.5c3.16 3.58 9.47 8.84 9.47 12s-1.26 3.79-3.15 3.79c.63 1.26.63 8.21-7.58 8.21-6.57 0-7.37-5.47-6.95-8.21-1.9 0-3.79-1.26-3.79-3.79 0-4.04 6.32-9.26 9.47-12v11.37h2.53Z"
       />
     </svg>
   );

src/components/common/icons/SQLDatabaseIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useIconProps } from "./hooks";
+import { IconProps } from "./types";
+
+const SQLDatabaseIconComponent = (props: IconProps) => {
+  const { size, color } = useIconProps(props);
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 22 22"
+    >
+      <path
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16 5.8c0 .994-2.239 1.8-5 1.8s-5-.806-5-1.8m10 0c0-.994-2.239-1.8-5-1.8s-5 .806-5 1.8m10 0V9M6 5.8v6M16 9c0 .996-2.222 1.8-5 1.8S6 9.996 6 9m10 0v5.2M6 15.933c.261.198.578.305.904.306.542 0 1.025-.184 1.025-.796 0-.98-1.929-.55-1.929-1.469 0-.49.362-.795.904-.795.326 0 .643.108.904.306m5.585-.306v3.078H15.5m-5-.185c.71 0 1.286-.648 1.286-1.447S11.21 13.18 10.5 13.18c-.71 0-1.286.647-1.286 1.446 0 .799.576 1.447 1.286 1.447Zm.322-.965L11.5 16.5"
+      />
+    </svg>
+  );
+};
+
+export const SQLDatabaseIcon = React.memo(SQLDatabaseIconComponent);