Merge branch 'main' of github.com:evergreen-ci/ui into dependabot/npm…

…_and_yarn/leafygreen-ui/number-input-2.1.0

apps/parsley/src/analytics/logWindow/useLogWindowAnalytics.ts

@@ -25,7 +25,10 @@ type Action =
   | { name: "Applied Search Suggestion"; suggestion: string }
   | { name: "Expanded Lines"; option: "All" | "Five"; lineCount: number }
   | { name: "Collapsed Lines" }
-  | { name: "Paginated Through Search Results"; direction: DIRECTION };
+  | { name: "Paginated Through Search Results"; direction: DIRECTION }
+  | { name: "Focused Section"; functionName: string }
+  | { name: "Opened Section"; functionName: string }
+  | { name: "Closed Section"; functionName: string };
 
 export const useLogWindowAnalytics = () =>
   useAnalyticsRoot<Action>("LogWindow");

apps/parsley/src/components/LogRow/AnsiRow/index.tsx

@@ -2,10 +2,10 @@ import { AnsiUp } from "ansi_up";
 import linkifyHtml from "linkify-html";
 import BaseRow from "components/LogRow/BaseRow";
 import { trimSeverity } from "utils/string";
-import { LogRowProps } from "../types";
+import { LogLineRow } from "../types";
 import { getSeverityMapping, mapLogLevelToColor } from "./utils";
 
-interface AnsiRowProps extends LogRowProps {}
+interface AnsiRowProps extends LogLineRow {}
 
 const AnsiRow: React.FC<AnsiRowProps> = ({ getLine, lineNumber, ...rest }) => {
   const ansiUp = new AnsiUp();

apps/parsley/src/components/LogRow/BaseRow/index.tsx

@@ -9,15 +9,15 @@ import { QueryParams } from "constants/queryParams";
 import { fontSize, size } from "constants/tokens";
 import { useMultiLineSelectContext } from "context/MultiLineSelectContext";
 import { useQueryParam } from "hooks/useQueryParam";
-import { LogRowProps } from "../types";
+import { LogLineRow } from "../types";
 import { isLineInRange } from "../utils";
 import Highlighter from "./Highlighter";
 import LineNumber from "./LineNumber";
 import SharingMenu from "./SharingMenu";
 
 const { red, yellow } = palette;
 
-interface BaseRowProps extends Omit<LogRowProps, "getLine"> {
+interface BaseRowProps extends Omit<LogLineRow, "getLine"> {
   children: string;
   "data-cy"?: string;
   color?: string;

apps/parsley/src/components/LogRow/ResmokeRow/index.tsx

@@ -2,9 +2,9 @@ import BaseRow from "components/LogRow/BaseRow";
 import { QueryParams } from "constants/queryParams";
 import { useQueryParam } from "hooks/useQueryParam";
 import { formatPrettyPrint } from "utils/prettyPrint";
-import { LogRowProps } from "../types";
+import { LogLineRow } from "../types";
 
-interface ResmokeRowProps extends LogRowProps {
+interface ResmokeRowProps extends LogLineRow {
   prettyPrint: boolean;
   getResmokeLineColor: (lineNumber: number) => string | undefined;
 }

apps/parsley/src/components/LogRow/SectionHeader/SectionHeader.stories.tsx

@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+import { SectionStatus } from "constants/logs";
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import SectionHeader from ".";
+
+export default {
+  component: SectionHeader,
+} satisfies CustomMeta<typeof SectionHeader>;
+
+const SectionHeaderStory = () => (
+  <Container>
+    <SectionHeader
+      {...sectionHeaderProps}
+      functionName="populate_expansions"
+      lineIndex={0}
+    />
+    <SectionHeader
+      {...sectionHeaderProps}
+      functionName="setup_mongodb_database_and_seed_with_data"
+      lineIndex={1}
+    />
+    <SectionHeader
+      {...sectionHeaderProps}
+      functionName="build_frontend"
+      lineIndex={2}
+      status={SectionStatus.Fail}
+    />
+  </Container>
+);
+
+export const SectionHeaderSingle: CustomStoryObj<typeof SectionHeader> = {
+  render: () => <SectionHeaderStory />,
+};
+
+// TODO: Update this story with LogPane examples which should handle log rendering internally.
+
+const Container = styled.div`
+  height: 400px;
+  width: 800px;
+`;
+
+const sectionHeaderProps = {
+  defaultOpen: false,
+  onFocus: () => {},
+  onOpen: () => {},
+  status: SectionStatus.Pass,
+};

apps/parsley/src/components/LogRow/SectionHeader/SectionHeader.test.tsx

@@ -0,0 +1,100 @@
+import { SectionStatus } from "constants/logs";
+import { render, screen, userEvent } from "test_utils";
+import SectionHeader from ".";
+
+describe("sectionHeader", () => {
+  it("displays function name", () => {
+    render(<SectionHeader {...sectionHeaderProps} functionName="load_data" />);
+    expect(screen.getByText("Function: load_data")).toBeVisible();
+  });
+
+  it("displays checkmark icon if status is passing", () => {
+    render(
+      <SectionHeader {...sectionHeaderProps} status={SectionStatus.Pass} />,
+    );
+    expect(
+      screen.getByLabelText("Checkmark With Circle Icon"),
+    ).toBeInTheDocument();
+  });
+
+  it("displays X icon if status is failing", () => {
+    render(
+      <SectionHeader {...sectionHeaderProps} status={SectionStatus.Fail} />,
+    );
+    expect(screen.getByLabelText("XWith Circle Icon")).toBeInTheDocument();
+  });
+
+  it("renders as opened if 'defaultOpen' prop is true", async () => {
+    render(<SectionHeader {...sectionHeaderProps} defaultOpen />);
+    expect(screen.getByDataCy("section-header")).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+  });
+
+  it("renders as closed if 'defaultOpen' prop is false", async () => {
+    render(<SectionHeader {...sectionHeaderProps} defaultOpen={false} />);
+    expect(screen.getByDataCy("section-header")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+
+  it("should call onOpen function when 'open' button is clicked", async () => {
+    const user = userEvent.setup();
+    const onOpen = vi.fn();
+    render(<SectionHeader {...sectionHeaderProps} onOpen={onOpen} />);
+    const openButton = screen.getByRole("button", {
+      name: "Open",
+    });
+    await user.click(openButton);
+    expect(onOpen).toHaveBeenCalledTimes(1);
+    expect(onOpen).toHaveBeenCalledWith("load_data");
+  });
+
+  it("should call onFocus function when 'focus' button is clicked", async () => {
+    const user = userEvent.setup();
+    const onFocus = vi.fn();
+    render(<SectionHeader {...sectionHeaderProps} onFocus={onFocus} />);
+    const focusButton = screen.getByRole("button", {
+      name: "Focus",
+    });
+    await user.click(focusButton);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onFocus).toHaveBeenCalledWith("load_data");
+  });
+
+  it("can open and close the section header using 'open' and 'close' buttons", async () => {
+    const user = userEvent.setup();
+    render(<SectionHeader {...sectionHeaderProps} defaultOpen={false} />);
+    expect(screen.getByDataCy("section-header")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    const openButton = screen.getByRole("button", {
+      name: "Open",
+    });
+    await user.click(openButton);
+    expect(screen.getByDataCy("section-header")).toHaveAttribute(
+      "aria-expanded",
+      "true",
+    );
+    const closeButton = screen.getByRole("button", {
+      name: "Close",
+    });
+    await user.click(closeButton);
+    expect(screen.getByDataCy("section-header")).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+  });
+});
+
+const sectionHeaderProps = {
+  defaultOpen: false,
+  functionName: "load_data",
+  lineIndex: 0,
+  onFocus: vi.fn(),
+  onOpen: vi.fn(),
+  status: SectionStatus.Pass,
+};