From bd5b1d29d3304fbdb5b7cc3c4132bc0613a7d91f Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Wed, 28 Feb 2024 11:18:05 +0100
Subject: [PATCH] Add InsightCard list item and pagination components

Improve styles
---
 .../InsightCard/InsightCard.stories.tsx       |  4 +-
 .../InsightCard/InsightFooter/index.tsx       |  0
 .../AsyncTag/AsyncTag.stories.tsx             |  2 +-
 .../InsightHeader}/AsyncTag/index.tsx         |  0
 .../InsightHeader}/AsyncTag/styles.ts         |  4 +-
 .../InsightHeader/InisghtHeader.stories.tsx   |  2 +-
 .../InsightCard}/InsightHeader/index.tsx      | 14 +--
 .../InsightCard}/InsightHeader/styles.ts      |  0
 .../InsightCard}/InsightHeader/types.ts       |  0
 .../KeyValue/KeyValue.stories.tsx             |  2 +-
 .../KeyValueContainer/KeyValue/index.tsx      |  0
 .../KeyValueContainer/KeyValue/styles.ts      |  0
 .../KeyValueContainer/KeyValue/types.ts       |  0
 .../KeyValueContainer.stories.tsx             |  2 +-
 .../KeyValueContainer/KeyValueContainer.tsx   |  0
 .../InsightCard}/KeyValueContainer/index.tsx  |  0
 .../InsightCard}/KeyValueContainer/styles.ts  |  0
 .../InsightCard}/KeyValueContainer/types.ts   |  0
 .../InsightCard/ListItem/ListItem.stories.tsx | 35 +++++++
 .../common/InsightCard/ListItem/index.tsx     | 27 ++++++
 .../common/InsightCard/ListItem/styles.ts     | 29 ++++++
 .../common/InsightCard/ListItem/types.ts      |  8 ++
 .../common}/InsightCard/index.tsx             | 26 ++---
 .../common}/InsightCard/styles.ts             |  0
 .../common}/InsightCard/types.ts              |  2 +-
 .../HighNumberOfQueriesInsight.stories.tsx    |  2 +-
 .../HighNumberOfQueriesInsight/index.tsx      | 10 +-
 .../insights/SpanNexusInsight/index.tsx       |  6 +-
 src/components/common/App/themes/darkTheme.ts |  3 +-
 .../common/App/themes/lightTheme.ts           |  3 +-
 src/components/common/App/typographies.ts     | 61 +++++++++---
 .../common/icons/12px/ChevronIcon.tsx         | 40 ++++++++
 .../v3/Pagination/Pagination.stories.tsx      | 50 ++++++++++
 src/components/common/v3/Pagination/index.tsx | 95 +++++++++++++++++++
 src/components/common/v3/Pagination/styles.ts | 44 +++++++++
 src/components/common/v3/Pagination/types.ts  |  8 ++
 src/components/common/v3/Tooltip/index.tsx    |  2 +-
 src/components/common/v3/Tooltip/styles.ts    |  9 +-
 src/styled.d.ts                               |  7 +-
 39 files changed, 432 insertions(+), 65 deletions(-)
 rename src/components/{common/v3 => Insights/common}/InsightCard/InsightCard.stories.tsx (83%)
 rename src/components/{common/v3 => Insights/common}/InsightCard/InsightFooter/index.tsx (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard/InsightHeader}/AsyncTag/AsyncTag.stories.tsx (88%)
 rename src/components/{common/v3 => Insights/common/InsightCard/InsightHeader}/AsyncTag/index.tsx (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard/InsightHeader}/AsyncTag/styles.ts (55%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/InsightHeader/InisghtHeader.stories.tsx (92%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/InsightHeader/index.tsx (75%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/InsightHeader/styles.ts (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/InsightHeader/types.ts (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/KeyValue/KeyValue.stories.tsx (89%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/KeyValue/index.tsx (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/KeyValue/styles.ts (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/KeyValue/types.ts (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/KeyValueContainer.stories.tsx (92%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/KeyValueContainer.tsx (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/index.tsx (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/styles.ts (100%)
 rename src/components/{common/v3 => Insights/common/InsightCard}/KeyValueContainer/types.ts (100%)
 create mode 100644 src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx
 create mode 100644 src/components/Insights/common/InsightCard/ListItem/index.tsx
 create mode 100644 src/components/Insights/common/InsightCard/ListItem/styles.ts
 create mode 100644 src/components/Insights/common/InsightCard/ListItem/types.ts
 rename src/components/{common/v3 => Insights/common}/InsightCard/index.tsx (84%)
 rename src/components/{common/v3 => Insights/common}/InsightCard/styles.ts (100%)
 rename src/components/{common/v3 => Insights/common}/InsightCard/types.ts (91%)
 create mode 100644 src/components/common/icons/12px/ChevronIcon.tsx
 create mode 100644 src/components/common/v3/Pagination/Pagination.stories.tsx
 create mode 100644 src/components/common/v3/Pagination/index.tsx
 create mode 100644 src/components/common/v3/Pagination/styles.ts
 create mode 100644 src/components/common/v3/Pagination/types.ts

diff --git a/src/components/common/v3/InsightCard/InsightCard.stories.tsx b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
similarity index 83%
rename from src/components/common/v3/InsightCard/InsightCard.stories.tsx
rename to src/components/Insights/common/InsightCard/InsightCard.stories.tsx
index 6e90721f2..ab6039315 100644
--- a/src/components/common/v3/InsightCard/InsightCard.stories.tsx
+++ b/src/components/Insights/common/InsightCard/InsightCard.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { InsightCard } from ".";
-import { mockedEndpointNPlusOneInsight } from "../../../Insights/EndpointNPlusOneInsight/mockData";
+import { mockedEndpointNPlusOneInsight } from "../../EndpointNPlusOneInsight/mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof InsightCard> = {
-  title: "Common/v3/InsightCard",
+  title: "Insights/common/InsightCard",
   component: InsightCard,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/common/v3/InsightCard/InsightFooter/index.tsx b/src/components/Insights/common/InsightCard/InsightFooter/index.tsx
similarity index 100%
rename from src/components/common/v3/InsightCard/InsightFooter/index.tsx
rename to src/components/Insights/common/InsightCard/InsightFooter/index.tsx
diff --git a/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx
similarity index 88%
rename from src/components/common/v3/AsyncTag/AsyncTag.stories.tsx
rename to src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx
index 5a508ea73..053010ece 100644
--- a/src/components/common/v3/AsyncTag/AsyncTag.stories.tsx
+++ b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/AsyncTag.stories.tsx
@@ -3,7 +3,7 @@ import { AsyncTag } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof AsyncTag> = {
-  title: "common/v3/AsyncTag",
+  title: "Insights/common/InsightCard/InsightHeader/AsyncTag",
   component: AsyncTag,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/common/v3/AsyncTag/index.tsx b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/index.tsx
similarity index 100%
rename from src/components/common/v3/AsyncTag/index.tsx
rename to src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/index.tsx
diff --git a/src/components/common/v3/AsyncTag/styles.ts b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts
similarity index 55%
rename from src/components/common/v3/AsyncTag/styles.ts
rename to src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts
index 507738aa6..c557d044a 100644
--- a/src/components/common/v3/AsyncTag/styles.ts
+++ b/src/components/Insights/common/InsightCard/InsightHeader/AsyncTag/styles.ts
@@ -1,8 +1,8 @@
 import styled from "styled-components";
-import { Tag as TagCommon } from "../Tag";
+import { Tag as TagCommon } from "../../../../../common/v3/Tag";
 
 export const AsyncTag = styled(TagCommon)`
   color: ${({ theme }) => theme.colors.v3.text.primary};
-  background: ${({ theme }) => theme.colors.v3.surface.asyncTag};
+  background: ${({ theme }) => theme.colors.v3.surface.brandDark};
   font-size: 12px;
 `;
diff --git a/src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx b/src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx
similarity index 92%
rename from src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx
rename to src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx
index bb9884162..a20987bf2 100644
--- a/src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx
+++ b/src/components/Insights/common/InsightCard/InsightHeader/InisghtHeader.stories.tsx
@@ -3,7 +3,7 @@ import { InsightHeader } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof InsightHeader> = {
-  title: "Common/v3/InsightsHeader",
+  title: "Insights/common/InsightCard/InsightHeader",
   component: InsightHeader,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/common/v3/InsightHeader/index.tsx b/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
similarity index 75%
rename from src/components/common/v3/InsightHeader/index.tsx
rename to src/components/Insights/common/InsightCard/InsightHeader/index.tsx
index 2e215aed0..99577dbd3 100644
--- a/src/components/common/v3/InsightHeader/index.tsx
+++ b/src/components/Insights/common/InsightCard/InsightHeader/index.tsx
@@ -1,10 +1,10 @@
-import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo";
-import { InfoCircleIcon } from "../../icons/InfoCircleIcon";
-import { AsyncTag } from "../AsyncTag";
-import { NewTag } from "../NewTag";
-import { Tag } from "../Tag";
-import { TagType } from "../Tag/types";
-import { Tooltip } from "../Tooltip";
+import { getInsightTypeInfo } from "../../../../../utils/getInsightTypeInfo";
+import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon";
+import { NewTag } from "../../../../common/v3/NewTag";
+import { Tag } from "../../../../common/v3/Tag";
+import { TagType } from "../../../../common/v3/Tag/types";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import { AsyncTag } from "./AsyncTag";
 import * as s from "./styles";
 import { InsightHeaderProps } from "./types";
 
diff --git a/src/components/common/v3/InsightHeader/styles.ts b/src/components/Insights/common/InsightCard/InsightHeader/styles.ts
similarity index 100%
rename from src/components/common/v3/InsightHeader/styles.ts
rename to src/components/Insights/common/InsightCard/InsightHeader/styles.ts
diff --git a/src/components/common/v3/InsightHeader/types.ts b/src/components/Insights/common/InsightCard/InsightHeader/types.ts
similarity index 100%
rename from src/components/common/v3/InsightHeader/types.ts
rename to src/components/Insights/common/InsightCard/InsightHeader/types.ts
diff --git a/src/components/common/v3/KeyValueContainer/KeyValue/KeyValue.stories.tsx b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/KeyValue.stories.tsx
similarity index 89%
rename from src/components/common/v3/KeyValueContainer/KeyValue/KeyValue.stories.tsx
rename to src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/KeyValue.stories.tsx
index 3a56b7ea6..c80dfdfdc 100644
--- a/src/components/common/v3/KeyValueContainer/KeyValue/KeyValue.stories.tsx
+++ b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/KeyValue.stories.tsx
@@ -3,7 +3,7 @@ import { KeyValue } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof KeyValue> = {
-  title: "common/v3/KeyValue",
+  title: "Insights/common/InsightCard/KeyValueContainer/KeyValue",
   component: KeyValue,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/common/v3/KeyValueContainer/KeyValue/index.tsx b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/index.tsx
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/KeyValue/index.tsx
rename to src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/index.tsx
diff --git a/src/components/common/v3/KeyValueContainer/KeyValue/styles.ts b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/styles.ts
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/KeyValue/styles.ts
rename to src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/styles.ts
diff --git a/src/components/common/v3/KeyValueContainer/KeyValue/types.ts b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/types.ts
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/KeyValue/types.ts
rename to src/components/Insights/common/InsightCard/KeyValueContainer/KeyValue/types.ts
diff --git a/src/components/common/v3/KeyValueContainer/KeyValueContainer.stories.tsx b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValueContainer.stories.tsx
similarity index 92%
rename from src/components/common/v3/KeyValueContainer/KeyValueContainer.stories.tsx
rename to src/components/Insights/common/InsightCard/KeyValueContainer/KeyValueContainer.stories.tsx
index ef2fe80f4..b8d7599f8 100644
--- a/src/components/common/v3/KeyValueContainer/KeyValueContainer.stories.tsx
+++ b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValueContainer.stories.tsx
@@ -3,7 +3,7 @@ import { KeyValue, KeyValueContainer } from ".";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof KeyValueContainer> = {
-  title: "common/v3/KeyValueContainer",
+  title: "Insights/common/InsightCard/KeyValueContainer",
   component: KeyValueContainer,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/common/v3/KeyValueContainer/KeyValueContainer.tsx b/src/components/Insights/common/InsightCard/KeyValueContainer/KeyValueContainer.tsx
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/KeyValueContainer.tsx
rename to src/components/Insights/common/InsightCard/KeyValueContainer/KeyValueContainer.tsx
diff --git a/src/components/common/v3/KeyValueContainer/index.tsx b/src/components/Insights/common/InsightCard/KeyValueContainer/index.tsx
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/index.tsx
rename to src/components/Insights/common/InsightCard/KeyValueContainer/index.tsx
diff --git a/src/components/common/v3/KeyValueContainer/styles.ts b/src/components/Insights/common/InsightCard/KeyValueContainer/styles.ts
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/styles.ts
rename to src/components/Insights/common/InsightCard/KeyValueContainer/styles.ts
diff --git a/src/components/common/v3/KeyValueContainer/types.ts b/src/components/Insights/common/InsightCard/KeyValueContainer/types.ts
similarity index 100%
rename from src/components/common/v3/KeyValueContainer/types.ts
rename to src/components/Insights/common/InsightCard/KeyValueContainer/types.ts
diff --git a/src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx b/src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx
new file mode 100644
index 000000000..4600d0e24
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ListItem/ListItem.stories.tsx
@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ListItem } from ".";
+import { Button } from "../../../../common/Button";
+import { JiraLogoIcon } from "../../../../common/icons/12px/JiraLogoIcon";
+import { TargetIcon } from "../../../../common/icons/12px/TargetIcon";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof ListItem> = {
+  title: "Insights/common/InsightCard/ListItem",
+  component: ListItem,
+  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: {
+    name: "Very very very very very very very very long text"
+  }
+};
+
+export const WithButtons: Story = {
+  args: {
+    name: "Very very very very very very very very long text",
+    buttons: [
+      <Button key={"jira"} icon={{ component: TargetIcon }} />,
+      <Button key={"target"} icon={{ component: JiraLogoIcon }} />
+    ]
+  }
+};
diff --git a/src/components/Insights/common/InsightCard/ListItem/index.tsx b/src/components/Insights/common/InsightCard/ListItem/index.tsx
new file mode 100644
index 000000000..b03113d73
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ListItem/index.tsx
@@ -0,0 +1,27 @@
+import { MouseEvent } from "react";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import * as s from "./styles";
+import { ListItemProps } from "./types";
+
+export const ListItem = ({
+  name,
+  onClick,
+  className,
+  buttons
+}: ListItemProps) => {
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    onClick();
+  };
+
+  return (
+    <s.Container>
+      <Tooltip title={name}>
+        <s.Link className={className} href={"#"} onClick={handleClick}>
+          {name}
+        </s.Link>
+      </Tooltip>
+      {buttons && <s.ButtonsContainer>{buttons}</s.ButtonsContainer>}
+    </s.Container>
+  );
+};
diff --git a/src/components/Insights/common/InsightCard/ListItem/styles.ts b/src/components/Insights/common/InsightCard/ListItem/styles.ts
new file mode 100644
index 000000000..16aa8bf4c
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ListItem/styles.ts
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { footnoteRegularTypography } from "../../../../common/App/typographies";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 4px;
+  border-radius: 4px;
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+`;
+
+export const Link = styled.a`
+  ${footnoteRegularTypography}
+
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.v3.text.link};
+  text-decoration: none;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+export const ButtonsContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
diff --git a/src/components/Insights/common/InsightCard/ListItem/types.ts b/src/components/Insights/common/InsightCard/ListItem/types.ts
new file mode 100644
index 000000000..f40a93d1d
--- /dev/null
+++ b/src/components/Insights/common/InsightCard/ListItem/types.ts
@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+export interface ListItemProps {
+  onClick: () => void;
+  className?: string;
+  buttons?: ReactNode[];
+  name: string;
+}
diff --git a/src/components/common/v3/InsightCard/index.tsx b/src/components/Insights/common/InsightCard/index.tsx
similarity index 84%
rename from src/components/common/v3/InsightCard/index.tsx
rename to src/components/Insights/common/InsightCard/index.tsx
index 62cc7db7e..663691097 100644
--- a/src/components/common/v3/InsightCard/index.tsx
+++ b/src/components/Insights/common/InsightCard/index.tsx
@@ -1,19 +1,19 @@
 import { useState } from "react";
 import { isString } from "../../../../typeGuards/isString";
 import { formatTimeDistance } from "../../../../utils/formatTimeDistance";
-import { IconButton } from "../../../Insights/common/InsightCard/IconButton";
-import { Link } from "../../Link";
-import { TraceIcon } from "../../icons/12px/TraceIcon";
-import { HistogramIcon } from "../../icons/16px/HistogramIcon";
-import { LiveIcon } from "../../icons/16px/LiveIcon";
-import { PinIcon } from "../../icons/16px/PinIcon";
-import { RecalculateIcon } from "../../icons/16px/RecalculateIcon";
-import { CrossIcon } from "../../icons/CrossIcon";
-import { Button } from "../Button";
-import { Card } from "../Card";
-import { InsightHeader } from "../InsightHeader";
-import { JiraButton } from "../JiraButton";
-import { Tooltip } from "../Tooltip";
+import { Link } from "../../../common/Link";
+import { TraceIcon } from "../../../common/icons/12px/TraceIcon";
+import { HistogramIcon } from "../../../common/icons/16px/HistogramIcon";
+import { LiveIcon } from "../../../common/icons/16px/LiveIcon";
+import { PinIcon } from "../../../common/icons/16px/PinIcon";
+import { RecalculateIcon } from "../../../common/icons/16px/RecalculateIcon";
+import { CrossIcon } from "../../../common/icons/CrossIcon";
+import { Button } from "../../../common/v3/Button";
+import { Card } from "../../../common/v3/Card";
+import { JiraButton } from "../../../common/v3/JiraButton";
+import { Tooltip } from "../../../common/v3/Tooltip";
+import { IconButton } from "./IconButton";
+import { InsightHeader } from "./InsightHeader";
 import * as s from "./styles";
 import { InsightCardProps } from "./types";
 
diff --git a/src/components/common/v3/InsightCard/styles.ts b/src/components/Insights/common/InsightCard/styles.ts
similarity index 100%
rename from src/components/common/v3/InsightCard/styles.ts
rename to src/components/Insights/common/InsightCard/styles.ts
diff --git a/src/components/common/v3/InsightCard/types.ts b/src/components/Insights/common/InsightCard/types.ts
similarity index 91%
rename from src/components/common/v3/InsightCard/types.ts
rename to src/components/Insights/common/InsightCard/types.ts
index a811454ea..a05f4de34 100644
--- a/src/components/common/v3/InsightCard/types.ts
+++ b/src/components/Insights/common/InsightCard/types.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { InsightType } from "../../../../types";
-import { GenericCodeObjectInsight } from "../../../Insights/types";
+import { GenericCodeObjectInsight } from "../../types";
 
 export interface InsightCardProps {
   insight: GenericCodeObjectInsight;
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
index 02d220076..9af6228b5 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/HighNumberOfQueriesInsight.stories.tsx
@@ -4,7 +4,7 @@ import { mockedHighNumberOfQueriesInsight } from "./mockData";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<typeof HighNumberOfQueriesInsight> = {
-  title: "Insights/Common/Insights/HighNumberOfQueriesInsight",
+  title: "Insights/common/Insights/HighNumberOfQueriesInsight",
   component: HighNumberOfQueriesInsight,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
diff --git a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
index 4f3d84ee3..c8af2c6f1 100644
--- a/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
+++ b/src/components/Insights/common/insights/HighNumberOfQueriesInsight/index.tsx
@@ -1,15 +1,15 @@
 import { sendTrackingEvent } from "../../../../../utils/sendTrackingEvent";
 import { InfoCircleIcon } from "../../../../common/icons/InfoCircleIcon";
-import { InsightCard } from "../../../../common/v3/InsightCard";
-import {
-  KeyValue,
-  KeyValueContainer
-} from "../../../../common/v3/KeyValueContainer";
 import { Tag } from "../../../../common/v3/Tag";
 import { Tooltip } from "../../../../common/v3/Tooltip";
 import { Description } from "../../../styles";
 import { trackingEvents } from "../../../tracking";
 import { InsightType, Trace } from "../../../types";
+import { InsightCard } from "../../InsightCard";
+import {
+  KeyValue,
+  KeyValueContainer
+} from "../../InsightCard/KeyValueContainer";
 import * as s from "./styles";
 import { HighNumberOfQueriesInsightProps } from "./types";
 
diff --git a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx b/src/components/Insights/common/insights/SpanNexusInsight/index.tsx
index f1cefd24e..09e3fd2c0 100644
--- a/src/components/Insights/common/insights/SpanNexusInsight/index.tsx
+++ b/src/components/Insights/common/insights/SpanNexusInsight/index.tsx
@@ -1,9 +1,9 @@
-import { InsightCard } from "../../../../common/v3/InsightCard";
+import { Tag } from "../../../../common/v3/Tag";
+import { InsightCard } from "../../InsightCard";
 import {
   KeyValue,
   KeyValueContainer
-} from "../../../../common/v3/KeyValueContainer";
-import { Tag } from "../../../../common/v3/Tag";
+} from "../../InsightCard/KeyValueContainer";
 import * as s from "./styles";
 import { SpanNexusInsightProps } from "./types";
 
diff --git a/src/components/common/App/themes/darkTheme.ts b/src/components/common/App/themes/darkTheme.ts
index 3a13a73c7..88400d6ea 100644
--- a/src/components/common/App/themes/darkTheme.ts
+++ b/src/components/common/App/themes/darkTheme.ts
@@ -234,8 +234,7 @@ export const darkTheme: ThemeColors = {
       brandPrimary: v3colors.primary[500],
       brandSecondary: v3colors.primary[300],
       brandDark: v3colors.primary[900],
-      sidePanelHeader: v3colors.gray[1200],
-      asyncTag: v3colors.blue[400]
+      sidePanelHeader: v3colors.gray[1200]
     },
     text: {
       primary: v3colors.gray[0],
diff --git a/src/components/common/App/themes/lightTheme.ts b/src/components/common/App/themes/lightTheme.ts
index 5d1922146..2f8fda305 100644
--- a/src/components/common/App/themes/lightTheme.ts
+++ b/src/components/common/App/themes/lightTheme.ts
@@ -232,8 +232,7 @@ export const lightTheme: ThemeColors = {
       brandPrimary: v3colors.primary[500],
       brandSecondary: v3colors.primary[300],
       brandDark: v3colors.primary[150],
-      sidePanelHeader: v3colors.gray[300],
-      asyncTag: v3colors.blue[100]
+      sidePanelHeader: v3colors.gray[300]
     },
     text: {
       primary: v3colors.gray[1200],
diff --git a/src/components/common/App/typographies.ts b/src/components/common/App/typographies.ts
index 00d701213..8afb9dd8f 100644
--- a/src/components/common/App/typographies.ts
+++ b/src/components/common/App/typographies.ts
@@ -1,59 +1,90 @@
+import { css } from "styled-components";
 import { Typographies } from "../../../styled";
 
 export const typographies: Typographies = {
   body: {
-    fontSize: "14px",
-    weight: {
+    fontSize: 14,
+    fontWeight: {
       light: 300,
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 700
     },
-    lineHeight: "18px"
+    lineHeight: 18
   },
   subscript: {
-    fontSize: "13px",
-    weight: {
+    fontSize: 13,
+    fontWeight: {
       light: 300,
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 700
     },
-    lineHeight: "16px"
+    lineHeight: 16
   },
   footNote: {
-    fontSize: "12px",
-    weight: {
+    fontSize: 12,
+    fontWeight: {
       light: 300,
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 600
     },
-    lineHeight: "16px"
+    lineHeight: 16
   },
   captionOne: {
-    fontSize: "11px",
-    weight: {
+    fontSize: 11,
+    fontWeight: {
       light: 300,
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 600
     },
-    lineHeight: "14px"
+    lineHeight: 14
   },
   captionTwo: {
-    fontSize: "10px",
-    weight: {
+    fontSize: 10,
+    fontWeight: {
       light: 300,
       regular: 400,
       medium: 500,
       semibold: 600,
       bold: 600
     },
-    lineHeight: "14px"
+    lineHeight: 14
   }
 };
+
+export const caption1RegularTypography = css`
+  font-size: ${typographies.captionOne.fontSize}px;
+  font-weight: ${typographies.captionOne.fontWeight.regular};
+  line-height: ${typographies.captionOne.lineHeight}px;
+`;
+
+export const caption2RegularTypography = css`
+  font-size: ${typographies.captionTwo.fontSize}px;
+  font-weight: ${typographies.captionTwo.fontWeight.regular};
+  line-height: ${typographies.captionTwo.lineHeight}px;
+`;
+
+export const footnoteRegularTypography = css`
+  font-size: ${typographies.footNote.fontSize}px;
+  font-weight: ${typographies.footNote.fontWeight.regular};
+  line-height: ${typographies.footNote.lineHeight}px;
+`;
+
+export const subscriptRegularTypography = css`
+  font-size: ${typographies.subscript.fontSize}px;
+  font-weight: ${typographies.subscript.fontWeight.regular};
+  line-height: ${typographies.subscript.lineHeight}px;
+`;
+
+export const bodyRegularTypography = css`
+  font-size: ${typographies.body.fontSize}px;
+  font-weight: ${typographies.body.fontWeight.regular};
+  line-height: ${typographies.body.lineHeight}px;
+`;
diff --git a/src/components/common/icons/12px/ChevronIcon.tsx b/src/components/common/icons/12px/ChevronIcon.tsx
new file mode 100644
index 000000000..53090d95f
--- /dev/null
+++ b/src/components/common/icons/12px/ChevronIcon.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { useIconProps } from "../hooks";
+import { Direction, RotatableIconProps } from "../types";
+
+const directionRotateMap: { [key in Direction]: string } = {
+  [Direction.DOWN]: "0",
+  [Direction.LEFT]: "90",
+  [Direction.UP]: "180",
+  [Direction.RIGHT]: "270"
+};
+
+const ChevronIconComponent = (props: RotatableIconProps) => {
+  const { size, color } = useIconProps(props);
+
+  const transform = {
+    transform: `rotate(${
+      directionRotateMap[props.direction || Direction.DOWN]
+    })`
+  };
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 12 12"
+      {...transform}
+    >
+      <path
+        stroke={color}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        d="m3 4.5 3 3 3-3"
+      />
+    </svg>
+  );
+};
+
+export const ChevronIcon = React.memo(ChevronIconComponent);
diff --git a/src/components/common/v3/Pagination/Pagination.stories.tsx b/src/components/common/v3/Pagination/Pagination.stories.tsx
new file mode 100644
index 000000000..bf16bc4df
--- /dev/null
+++ b/src/components/common/v3/Pagination/Pagination.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Pagination> = {
+  title: "common/v3/Pagination",
+  component: Pagination,
+  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: {
+    itemsCount: 100,
+    page: 0,
+    pageSize: 10
+  }
+};
+
+export const SinglePage: Story = {
+  args: {
+    itemsCount: 9,
+    page: 0,
+    pageSize: 10
+  }
+};
+
+export const Extended: Story = {
+  args: {
+    itemsCount: 9,
+    page: 0,
+    pageSize: 10,
+    extendedNavigation: true
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    itemsCount: 100,
+    page: 0,
+    pageSize: 10,
+    withDescription: true
+  }
+};
diff --git a/src/components/common/v3/Pagination/index.tsx b/src/components/common/v3/Pagination/index.tsx
new file mode 100644
index 000000000..75b6a9038
--- /dev/null
+++ b/src/components/common/v3/Pagination/index.tsx
@@ -0,0 +1,95 @@
+import { ChevronIcon } from "../../icons/12px/ChevronIcon";
+import { DoubleChevronIcon } from "../../icons/DoubleChevronIcon";
+import { Direction } from "../../icons/types";
+import * as s from "./styles";
+import { PaginationProps } from "./types";
+
+export const Pagination = ({
+  itemsCount,
+  pageSize,
+  page,
+  onPageChange,
+  extendedNavigation,
+  withDescription
+}: PaginationProps) => {
+  const pageCount = Math.ceil(itemsCount / pageSize);
+
+  const isPrevDisabled = page === 0;
+  const isNextDisabled = page === pageCount - 1;
+
+  const handleButtonClick = (page: number) => {
+    onPageChange(page);
+  };
+
+  const pageStartItemNumber = page * pageSize + 1;
+  const pageEndItemNumber = Math.min(
+    pageStartItemNumber + pageSize - 1,
+    itemsCount
+  );
+
+  return (
+    <>
+      {(pageCount > 1 || extendedNavigation) && (
+        <s.Container>
+          {withDescription && (
+            <s.Description>
+              Showing {pageStartItemNumber} - {pageEndItemNumber} of{" "}
+              {itemsCount} Results
+            </s.Description>
+          )}
+          <s.ButtonGroup>
+            {extendedNavigation && (
+              <s.Button
+                disabled={isPrevDisabled}
+                onClick={() => handleButtonClick(0)}
+              >
+                <DoubleChevronIcon
+                  direction={Direction.LEFT}
+                  color={"currentColor"}
+                  size={14}
+                />
+              </s.Button>
+            )}
+            <s.Button
+              disabled={isPrevDisabled}
+              onClick={() => handleButtonClick(page - 1)}
+            >
+              <ChevronIcon
+                direction={Direction.LEFT}
+                color={"currentColor"}
+                size={14}
+              />
+            </s.Button>
+          </s.ButtonGroup>
+          <s.PageCounter>
+            <s.CurrentPage>{page + 1}</s.CurrentPage> / {pageCount}
+          </s.PageCounter>
+          <s.ButtonGroup>
+            <s.Button
+              disabled={isNextDisabled}
+              onClick={() => handleButtonClick(page + 1)}
+            >
+              <ChevronIcon
+                direction={Direction.RIGHT}
+                color={"currentColor"}
+                size={14}
+              />
+            </s.Button>
+            {extendedNavigation && (
+              <s.Button
+                disabled={isNextDisabled}
+                onClick={() => handleButtonClick(pageCount - 1)}
+              >
+                <DoubleChevronIcon
+                  direction={Direction.RIGHT}
+                  color={"currentColor"}
+                  size={14}
+                />
+              </s.Button>
+            )}
+          </s.ButtonGroup>
+        </s.Container>
+      )}
+    </>
+  );
+};
diff --git a/src/components/common/v3/Pagination/styles.ts b/src/components/common/v3/Pagination/styles.ts
new file mode 100644
index 000000000..86bb248a8
--- /dev/null
+++ b/src/components/common/v3/Pagination/styles.ts
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { caption1RegularTypography } from "../../App/typographies";
+
+export const Container = styled.div`
+  ${caption1RegularTypography}
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const Description = styled.span`
+  margin-right: auto;
+  color: ${({ theme }) => theme.colors.v3.text.tertiary};
+`;
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  gap: 4px;
+`;
+
+export const Button = styled.button`
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.v3.icon.primary};
+
+  &:disabled {
+    cursor: initial;
+    color: ${({ theme }) => theme.colors.v3.icon.disabled};
+  }
+`;
+
+export const PageCounter = styled.span`
+  flex-shrink: 0;
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+`;
+
+export const CurrentPage = styled.span`
+  color: ${({ theme }) => theme.colors.v3.text.primary};
+`;
diff --git a/src/components/common/v3/Pagination/types.ts b/src/components/common/v3/Pagination/types.ts
new file mode 100644
index 000000000..7cf4136b8
--- /dev/null
+++ b/src/components/common/v3/Pagination/types.ts
@@ -0,0 +1,8 @@
+export interface PaginationProps {
+  itemsCount: number;
+  page: number;
+  onPageChange: (page: number) => void;
+  pageSize: number;
+  extendedNavigation?: boolean;
+  withDescription?: boolean;
+}
diff --git a/src/components/common/v3/Tooltip/index.tsx b/src/components/common/v3/Tooltip/index.tsx
index 00ea88873..7baeec374 100644
--- a/src/components/common/v3/Tooltip/index.tsx
+++ b/src/components/common/v3/Tooltip/index.tsx
@@ -111,7 +111,7 @@ export const Tooltip = (props: TooltipProps) => {
       fill={
         isString(props.style?.background)
           ? props.style?.background
-          : theme.colors.v3.surface.secondary
+          : theme.colors.v3.stroke.tertiary
       }
       width={ARROW_WIDTH}
       height={ARROW_HEIGHT}
diff --git a/src/components/common/v3/Tooltip/styles.ts b/src/components/common/v3/Tooltip/styles.ts
index 8c6335ea6..b785e12c3 100644
--- a/src/components/common/v3/Tooltip/styles.ts
+++ b/src/components/common/v3/Tooltip/styles.ts
@@ -9,8 +9,11 @@ export const Tooltip = styled.div`
   padding: 4px;
   border-radius: 4px;
   box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%);
-  font-size: 14px;
-  word-break: break-all;
+  font-size: 12px;
+  line-height: 16px;
+  word-break: keep-all;
   color: ${({ theme }) => theme.colors.v3.text.primary};
-  background: ${({ theme }) => theme.colors.v3.surface.secondary};
+  background: ${({ theme }) => theme.colors.v3.surface.primary};
+  border: 1px solid ${({ theme }) => theme.colors.v3.stroke.tertiary};
+  max-width: 200px;
 `;
diff --git a/src/styled.d.ts b/src/styled.d.ts
index a7dbcb729..cef0ba5b6 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -72,7 +72,6 @@ export interface ThemeColors {
       brandSecondary: string;
       brandDark: string;
       sidePanelHeader: string;
-      asyncTag: string;
     };
     text: {
       primary: string;
@@ -122,9 +121,9 @@ interface FontWeights {
 }
 
 interface FontStyle {
-  lineHeight: string;
-  fontSize: string;
-  weight: FontWeights;
+  lineHeight: number;
+  fontSize: number;
+  fontWeight: FontWeights;
 }
 
 export interface Typographies {