DEVPROD-10196: Render Inactive Commits Button and Modal in Waterfall (#…

…426)
evergreen-ci · Oct 7, 2024 · 9adee97 · 9adee97
1 parent 7b3fc1e
commit 9adee97
Show file tree

Hide file tree

Showing 15 changed files with 508 additions and 31 deletions.
diff --git a/apps/spruce/cypress/integration/waterfall/waterfall.ts b/apps/spruce/cypress/integration/waterfall/waterfall.ts
@@ -13,17 +13,28 @@ describe("waterfall page", () => {
   });
 
   describe("inactive commits", () => {
-    it("renders an inactive version column", () => {
+    it("renders an inactive version column and button", () => {
       cy.dataCy("version-labels")
         .children()
         .eq(2)
-        .should("have.attr", "data-cy", "inactive-label");
+        .get("button")
+        .should("have.attr", "data-cy", "inactive-versions-button");
       cy.dataCy("build-group")
         .first()
         .children()
         .eq(2)
         .should("have.attr", "data-cy", "inactive-column");
     });
+    it("clicking an inactive versions button renders a inactive versions modal", () => {
+      cy.dataCy("inactive-versions-button").first().click();
+      cy.dataCy("inactive-versions-modal").should("be.visible");
+      cy.dataCy("inactive-versions-modal").contains("1 Inactive Version");
+      cy.dataCy("inactive-versions-modal").contains("e695f65");
+      cy.dataCy("inactive-versions-modal").contains("Mar 2, 2022");
+      cy.dataCy("inactive-versions-modal").contains(
+        "EVG-16356 Use Build Variant stats to fetch grouped build variants (#1106)",
+      );
+    });
   });
 
   describe("task grid", () => {

diff --git a/apps/spruce/src/gql/generated/types.ts b/apps/spruce/src/gql/generated/types.ts
@@ -9552,9 +9552,30 @@ export type WaterfallQuery = {
     }>;
     versions: Array<{
       __typename?: "WaterfallVersion";
-      inactiveVersions?: Array<{ __typename?: "Version"; id: string }> | null;
+      inactiveVersions?: Array<{
+        __typename?: "Version";
+        activated?: boolean | null;
+        author: string;
+        createTime: Date;
+        id: string;
+        message: string;
+        revision: string;
+        gitTags?: Array<{ __typename?: "GitTag"; tag: string }> | null;
+        upstreamProject?: {
+          __typename?: "UpstreamProject";
+          owner: string;
+          project: string;
+          repo: string;
+          revision: string;
+          triggerID: string;
+          triggerType: string;
+          task?: { __typename?: "Task"; execution: number; id: string } | null;
+          version?: { __typename?: "Version"; id: string } | null;
+        } | null;
+      }> | null;
       version?: {
         __typename?: "Version";
+        activated?: boolean | null;
         author: string;
         createTime: Date;
         id: string;

diff --git a/apps/spruce/src/gql/queries/waterfall.graphql b/apps/spruce/src/gql/queries/waterfall.graphql
@@ -18,9 +18,19 @@ query Waterfall($options: WaterfallOptions!) {
     }
     versions {
       inactiveVersions {
+        activated
+        author
+        createTime
+        gitTags {
+          tag
+        }
         id
+        message
+        revision
+        ...UpstreamProject
       }
       version {
+        activated
         author
         createTime
         gitTags {

diff --git a/apps/spruce/src/pages/waterfall/InactiveVersionsButton/index.tsx b/apps/spruce/src/pages/waterfall/InactiveVersionsButton/index.tsx
@@ -0,0 +1,65 @@
+import { useState } from "react";
+import styled from "@emotion/styled";
+import Button from "@leafygreen-ui/button";
+import { palette } from "@leafygreen-ui/palette";
+import pluralize from "pluralize";
+import { DisplayModal } from "components/DisplayModal";
+import Icon from "components/Icon";
+import { size } from "constants/tokens";
+import { WaterfallQuery } from "gql/generated/types";
+import { VersionLabel } from "../VersionLabel";
+
+const { gray } = palette;
+interface Props {
+  versions: WaterfallQuery["waterfall"]["versions"][0]["inactiveVersions"];
+  containerHeight: number | undefined;
+}
+export const InactiveVersionsButton: React.FC<Props> = ({
+  containerHeight,
+  versions,
+}) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  return (
+    <>
+      <DisplayModal
+        data-cy="inactive-versions-modal"
+        open={modalOpen}
+        setOpen={setModalOpen}
+        title={`${versions?.length} Inactive ${pluralize("Version", versions?.length)}`}
+      >
+        {versions?.map((version) => (
+          <StyledVersionLabel
+            key={version.id}
+            trimMessage={false}
+            {...version}
+          />
+        ))}
+      </DisplayModal>
+      <Button
+        aria-label="Open inactive versions modal"
+        data-cy="inactive-versions-button"
+        onClick={() => {
+          setModalOpen(true);
+        }}
+        size="xsmall"
+      >
+        <Icon fill={gray.base} glyph="List" />
+        <span>{versions?.length}</span>
+        <InactiveVersionLine containerHeight={containerHeight ?? 0} />
+      </Button>
+    </>
+  );
+};
+
+const InactiveVersionLine = styled.div<{ containerHeight: number }>`
+  border-left: 2px dashed ${gray.base};
+  height: ${({ containerHeight }) => `${containerHeight}px`};
+  position: absolute;
+  margin-left: 50%;
+  top: 30px;
+  z-index: 1;
+`;
+
+const StyledVersionLabel = styled(VersionLabel)`
+  padding-top: ${size.xs};
+`;
diff --git a/apps/spruce/src/pages/waterfall/VersionLabel/InactiveBadge.tsx b/apps/spruce/src/pages/waterfall/VersionLabel/InactiveBadge.tsx
@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import Badge, { Variant } from "@leafygreen-ui/badge";
+import { size } from "constants/tokens";
+
+export const InactiveBadge = () => (
+  <StyledBadge variant={Variant.LightGray}>Inactive</StyledBadge>
+);
+
+const StyledBadge = styled(Badge)`
+  margin-left: ${size.xs};
+`;
diff --git a/.../pages/waterfall/VersionLabel.stories.tsx → ...all/VersionLabel/VersionLabel.stories.tsx b/.../pages/waterfall/VersionLabel.stories.tsx → ...all/VersionLabel/VersionLabel.stories.tsx
@@ -4,7 +4,7 @@ import {
   getSpruceConfigMock,
   getUserSettingsMock,
 } from "gql/mocks/getSpruceConfig";
-import { VersionLabel } from "./VersionLabel";
+import { VersionLabel } from ".";
 
 export default {
   title: "Pages/Waterfall/VersionLabel",
@@ -67,6 +67,19 @@ const versionWithUpstreamProject = {
   },
 };
 
+const versionInactiveUntrimmedMessage = {
+  activated: false,
+  author: "Sophie Stadler",
+  createTime: new Date("2024-09-19T14:56:08Z"),
+  gitTags: null,
+  id: "evergreen_ui_aec8832bace91f0f3b6d8ad3bb3b27fb4263be83",
+  message:
+    "DEVPROD-11387: Remove CSS grid layout, plus some additional description to demonstrate the overflow capabilities of the component (#397)",
+  revision: "aec8832bace91f0f3b6d8ad3bb3b27fb4263be83",
+  upstreamProject: null,
+  trimMessage: false,
+};
+
 export const Default: StoryObj<typeof VersionLabel> = {
   render: (args) => (
     <Container>
@@ -91,6 +104,16 @@ export const UpstreamProject: StoryObj<typeof VersionLabel> = {
   args: versionWithUpstreamProject,
 };
 
+export const InactiveUntrimmedMessage: StoryObj<typeof VersionLabel> = {
+  ...Default,
+  args: versionInactiveUntrimmedMessage,
+};
+
+export const SmallSize: StoryObj<typeof VersionLabel> = {
+  ...Default,
+  args: { ...version, size: "small" },
+};
+
 const Container = styled.div`
-  max-width: 200px;
+  max-width: 300px;
 `;
diff --git a/apps/spruce/src/pages/waterfall/VersionLabel/__snapshots__/VersionLabel_Default.storyshot b/apps/spruce/src/pages/waterfall/VersionLabel/__snapshots__/VersionLabel_Default.storyshot
@@ -0,0 +1,48 @@
+<div>
+  <div
+    class="css-1pp2qz6"
+  >
+    <div
+      class="css-bnbttx-VersionContainer-columnBasis-wordBreakCss e3zirl01"
+    >
+      <p
+        class="leafygreen-ui-1tb6tuo"
+      >
+        <a
+          class="lg-ui-0000 leafygreen-ui-hvznge"
+          href="/version/evergreen_ui_aec8832bace91f0f3b6d8ad3bb3b27fb4263be83/tasks"
+        >
+          <code
+            class="leafygreen-ui-i6ovbf"
+          >
+            aec8832
+          </code>
+        </a>
+
+        09/19/2024, 10:56
+      </p>
+      <p
+        class="css-69ll71-CommitMessage e3zirl00 leafygreen-ui-1tb6tuo"
+        title="DEVPROD-11387: Remove CSS grid layout, plus some additional description to demonstrate the overflow capabilities of the component (#397)"
+      >
+        <strong>
+          Sophie Stadler
+        </strong>
+         •
+
+        <a
+          class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
+          data-cy="jira-link"
+          href="https://jira.mongodb.org/browse/DEVPROD-11387"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span>
+            DEVPROD-11387
+          </span>
+        </a>
+        : Remove CSS grid layout, plus some additional description to demonstrate the overflow capabilities of the component (#397)
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/apps/spruce/src/pages/waterfall/VersionLabel/__snapshots__/VersionLabel_GitTag.storyshot b/apps/spruce/src/pages/waterfall/VersionLabel/__snapshots__/VersionLabel_GitTag.storyshot
@@ -0,0 +1,43 @@
+<div>
+  <div
+    class="css-1pp2qz6"
+  >
+    <div
+      class="css-bnbttx-VersionContainer-columnBasis-wordBreakCss e3zirl01"
+    >
+      <p
+        class="leafygreen-ui-1tb6tuo"
+      >
+        <a
+          class="lg-ui-0000 leafygreen-ui-hvznge"
+          href="/version/evergreen_ui_deb77a36604446272d610d267f1cd9f95e4fe8ff/tasks"
+        >
+          <code
+            class="leafygreen-ui-i6ovbf"
+          >
+            deb77a3
+          </code>
+        </a>
+
+        09/19/2024, 12:14
+      </p>
+      <p
+        class="css-69ll71-CommitMessage e3zirl00 leafygreen-ui-1tb6tuo"
+        title="parsley/v2.1.64"
+      >
+        <strong>
+          Sophie Stadler
+        </strong>
+         •
+
+        parsley/v2.1.64
+      </p>
+      <p
+        class="leafygreen-ui-1tb6tuo"
+      >
+        Git Tags: 
+        parsley/v2.1.64
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/apps/spruce/src/pages/waterfall/VersionLabel/__snapshots__/VersionLabel_Inactive.storyshot b/apps/spruce/src/pages/waterfall/VersionLabel/__snapshots__/VersionLabel_Inactive.storyshot
@@ -0,0 +1,53 @@
+<div>
+  <div
+    class="css-1pp2qz6"
+  >
+    <div
+      class="css-8vthfw-VersionContainer-columnBasis-wordBreakCss e3zirl01"
+    >
+      <p
+        class="leafygreen-ui-1tb6tuo"
+      >
+        <a
+          class="lg-ui-0000 leafygreen-ui-hvznge"
+          href="/version/evergreen_ui_aec8832bace91f0f3b6d8ad3bb3b27fb4263be83/tasks"
+        >
+          <code
+            class="leafygreen-ui-i6ovbf"
+          >
+            aec8832
+          </code>
+        </a>
+
+        09/19/2024, 10:56
+        <div
+          class="css-etc2w8-StyledBadge e96hp3z0 leafygreen-ui-c62i3c"
+        >
+          Inactive
+        </div>
+      </p>
+      <p
+        class="css-ql9iql-CommitMessage e3zirl00 leafygreen-ui-1tb6tuo"
+        title="DEVPROD-11387: Remove CSS grid layout, plus some additional description to demonstrate the overflow capabilities of the component (#397)"
+      >
+        <strong>
+          Sophie Stadler
+        </strong>
+         •
+
+        <a
+          class="lg-ui-0001 css-1gw3cuq-StyledLink leafygreen-ui-16e7rxl"
+          data-cy="jira-link"
+          href="https://jira.mongodb.org/browse/DEVPROD-11387"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <span>
+            DEVPROD-11387
+          </span>
+        </a>
+        : Remove CSS grid layout, plus some additional description to demonstrate the overflow capabilities of the component (#397)
+      </p>
+    </div>
+  </div>
+</div>