Add InsightCard list item and Pagination components

src/components/common/v3/InsightCard/InsightCard.stories.tsx → 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

src/components/common/v3/AsyncTag/AsyncTag.stories.tsx → 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

src/components/common/v3/AsyncTag/styles.ts → 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;
 `;

src/components/common/v3/InsightHeader/InisghtHeader.stories.tsx → 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

src/components/common/v3/InsightHeader/index.tsx → 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";
 

src/components/common/v3/KeyValueContainer/KeyValue/KeyValue.stories.tsx → 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

src/components/common/v3/KeyValueContainer/KeyValueContainer.stories.tsx → 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

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 }} />
+    ]
+  }
+};

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>
+  );
+};

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;
+`;

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;
+}

src/components/common/v3/InsightCard/index.tsx → 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";
 

src/components/common/v3/InsightCard/types.ts → 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;

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

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";
 

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";
 

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],

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],

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;
+`;