DEVPROD-11365: Create OS table on Build Information page (#413)

apps/spruce/cypress/integration/image/build_information.ts

@@ -26,6 +26,53 @@ describe("build information", () => {
     });
   });
 
+  describe("os", () => {
+    it("should show the corresponding OS info", () => {
+      cy.visit("/image/ubuntu2204");
+      cy.dataCy("os-table-row").should("have.length", 10);
+    });
+
+    it("should show different OS info on different pages", () => {
+      cy.visit("/image/ubuntu2204");
+      cy.dataCy("os-table-row").should("have.length", 10);
+
+      // First OS info name on first page.
+      cy.dataCy("os-table-row")
+        .first()
+        .find("td")
+        .first()
+        .invoke("text")
+        .as("firstOSName", { type: "static" });
+
+      cy.dataCy("os-card").within(() => {
+        cy.get("[data-testid=lg-pagination-next-button]").click();
+      });
+
+      // First OS info name on second page.
+      cy.dataCy("os-table-row")
+        .first()
+        .find("td")
+        .first()
+        .invoke("text")
+        .as("nextOSName", { type: "static" });
+
+      // OS info names should not be equal.
+      cy.get("@firstOSName").then((firstOSName) => {
+        cy.get("@nextOSName").then((nextOSName) => {
+          expect(nextOSName).not.to.equal(firstOSName);
+        });
+      });
+    });
+
+    it("should show no OS info when filtering for nonexistent item", () => {
+      cy.visit("/image/ubuntu2204");
+      cy.dataCy("os-table-row").should("have.length", 10);
+      cy.dataCy("os-name-filter").click();
+      cy.get('input[placeholder="Name regex"]').type("fakeOS{enter}");
+      cy.dataCy("os-table-row").should("have.length", 0);
+    });
+  });
+
   describe("packages", () => {
     it("should show the corresponding packages", () => {
       cy.visit("/image/ubuntu2204");

apps/spruce/src/components/Banners/SiteBanner.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import Banner, { Variant } from "@leafygreen-ui/banner";
 import Cookies from "js-cookie";
 import { useSpruceConfig } from "hooks";
-import { jiraLinkify } from "utils/string/jiraLinkify";
+import { jiraLinkify } from "utils/string";
 
 export interface SiteBannerProps {
   text: string;

apps/spruce/src/components/CommitChartLabel/index.tsx

@@ -8,8 +8,7 @@ import { getVersionRoute, getTriggerRoute } from "constants/routes";
 import { size, zIndex } from "constants/tokens";
 import { UpstreamProjectFragment, GitTag } from "gql/generated/types";
 import { useSpruceConfig, useDateFormat } from "hooks";
-import { shortenGithash } from "utils/string";
-import { jiraLinkify } from "utils/string/jiraLinkify";
+import { shortenGithash, jiraLinkify } from "utils/string";
 
 const { gray } = palette;
 const MAX_CHAR = 40;

apps/spruce/src/gql/generated/types.ts

@@ -6355,6 +6355,25 @@ export type ImageGeneralQuery = {
   } | null;
 };
 
+export type ImageOperatingSystemQueryVariables = Exact<{
+  imageId: Scalars["String"]["input"];
+  opts: OperatingSystemOpts;
+}>;
+
+export type ImageOperatingSystemQuery = {
+  __typename?: "Query";
+  image?: {
+    __typename?: "Image";
+    id: string;
+    operatingSystem: {
+      __typename?: "ImageOperatingSystemPayload";
+      filteredCount: number;
+      totalCount: number;
+      data: Array<{ __typename?: "OSInfo"; name: string; version: string }>;
+    };
+  } | null;
+};
+
 export type ImagePackagesQueryVariables = Exact<{
   imageId: Scalars["String"]["input"];
   opts: PackageOpts;

apps/spruce/src/gql/queries/image-operating-system.graphql

@@ -0,0 +1,13 @@
+query ImageOperatingSystem($imageId: String!, $opts: OperatingSystemOpts!) {
+  image(imageId: $imageId) {
+    id
+    operatingSystem(opts: $opts) {
+      data {
+        name
+        version
+      }
+      filteredCount
+      totalCount
+    }
+  }
+}

apps/spruce/src/gql/queries/index.ts

@@ -25,6 +25,7 @@ import HOSTS from "./hosts.graphql";
 import IMAGE_DISTROS from "./image-distros.graphql";
 import IMAGE_EVENTS from "./image-events.graphql";
 import IMAGE_GENERAL from "./image-general.graphql";
+import IMAGE_OPERATING_SYSTEM from "./image-operating-system.graphql";
 import IMAGE_PACKAGES from "./image-packages.graphql";
 import IMAGE_TOOLCHAINS from "./image-toolchains.graphql";
 import IMAGES from "./images.graphql";
@@ -114,6 +115,7 @@ export {
   IMAGE_DISTROS,
   IMAGE_EVENTS,
   IMAGE_GENERAL,
+  IMAGE_OPERATING_SYSTEM,
   IMAGE_PACKAGES,
   IMAGE_TOOLCHAINS,
   IMAGES,

apps/spruce/src/pages/Version.tsx

@@ -16,8 +16,7 @@ import { VersionQuery, VersionQueryVariables } from "gql/generated/types";
 import { VERSION } from "gql/queries";
 import { useSpruceConfig } from "hooks";
 import { PageDoesNotExist } from "pages/NotFound";
-import { shortenGithash, githubPRLinkify } from "utils/string";
-import { jiraLinkify } from "utils/string/jiraLinkify";
+import { shortenGithash, githubPRLinkify, jiraLinkify } from "utils/string";
 import { WarningBanner, ErrorBanner, IgnoredBanner } from "./version/Banners";
 import VersionPageBreadcrumbs from "./version/Breadcrumbs";
 import BuildVariantCard from "./version/BuildVariantCard";

apps/spruce/src/pages/commits/InactiveCommits/index.tsx

@@ -13,7 +13,7 @@ import { size, zIndex, fontSize } from "constants/tokens";
 import { useSpruceConfig, useDateFormat } from "hooks";
 import { CommitRolledUpVersions } from "types/commits";
 import { string } from "utils";
-import { jiraLinkify } from "utils/string/jiraLinkify";
+import { jiraLinkify } from "utils/string";
 import { commitChartHeight } from "../constants";
 
 const { shortenGithash, trimStringFromMiddle } = string;

apps/spruce/src/pages/image/DistrosTable/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react";
+import { useRef } from "react";
 import { useQuery } from "@apollo/client";
 import styled from "@emotion/styled";
 import IconButton from "@leafygreen-ui/icon-button";
@@ -33,22 +33,19 @@ export const DistrosTable: React.FC<DistrosTableProps> = ({ imageId }) => {
     ImageDistrosQueryVariables
   >(IMAGE_DISTROS, {
     variables: { imageId },
-    onError(err) {
+    onError: (err) => {
       dispatchToast.error(
         `There was an error loading image distros: ${err.message}`,
       );
     },
   });
 
-  const distros = useMemo(
-    () => imageData?.image?.distros ?? [],
-    [imageData?.image?.distros],
-  );
+  const distros = imageData?.image?.distros ?? [];
 
   const tableContainerRef = useRef<HTMLDivElement>(null);
   const table = useLeafyGreenTable<Distro>({
     columns,
-    data: distros ?? [],
+    data: distros,
     containerRef: tableContainerRef,
     defaultColumn: {
       enableColumnFilter: false,

apps/spruce/src/pages/image/ImageEventLog/ImageEventLogTable.tsx

@@ -9,7 +9,6 @@ import {
   getFilteredRowModel,
   getFacetedUniqueValues,
 } from "@leafygreen-ui/table";
-import { toSentenceCase } from "@evg-ui/lib/utils/string";
 import { BaseTable } from "components/Table/BaseTable";
 import { tableColumnOffset } from "constants/tokens";
 import {
@@ -48,12 +47,18 @@ const imageEventTypeTreeData = [
     key: ImageEventType.Toolchain,
   },
   {
-    title: "Operating System",
+    title: "OS",
     value: ImageEventType.OperatingSystem,
     key: ImageEventType.OperatingSystem,
   },
 ];
 
+const eventTypeToLabel = {
+  [ImageEventType.Package]: "Package",
+  [ImageEventType.Toolchain]: "Toolchain",
+  [ImageEventType.OperatingSystem]: "OS",
+};
+
 interface ImageEventLogTableProps {
   entries: ImageEventEntry[];
   globalFilter: string;
@@ -87,7 +92,7 @@ export const ImageEventLogTable: React.FC<ImageEventLogTableProps> = ({
 
   const emptyMessage = hasFilters
     ? "No data to display"
-    : "No changes detected within the scope. The scope can be expanded upon request from the runtime environments team.";
+    : "No changes detected within the scope. The scope can be expanded upon request to the Runtime Environments team.";
 
   return (
     <BaseTable
@@ -121,7 +126,7 @@ const columns: LGColumnDef<ImageEventEntry>[] = [
     accessorKey: "type",
     cell: ({ getValue }) => {
       const value = getValue() as ImageEventType;
-      return toSentenceCase(value);
+      return eventTypeToLabel[value];
     },
     enableColumnFilter: true,
     filterFn: filterFns.arrIncludesSome,