Merge branch 'main' into bug/TD-2221-No-Metrics-in-CardStatus

.github/workflows/test.yml

@@ -29,7 +29,13 @@ jobs:
         run: npm run test:unit
         env:
           CI: true
-      - name: End to End Tests
+      - name: End to End Tests (Linux)
+        if: runner.os == 'Linux'
+        run: sudo apt-get update && sudo DEBIAN_FRONTEND=noninteractive apt-get install -y xvfb && xvfb-run npm run test:playwright:headed
+        env:
+          CI: true
+      - name: End to End Tests (Windows & MacOS)
+        if: runner.os != 'Linux'
         run: npm run test:playwright
         env:
           CI: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "React UI component library for IPG web applications",
   "author": "IPG-Automotive-UK",
   "license": "MIT",
@@ -18,6 +18,7 @@
     "storybook:serve:stop": "forever stop ./serve-storybook.js",
     "test": "run-s test:unit test:lint test:playwright",
     "test:playwright": "npm run storybook:build && npm run storybook:serve:start && npx playwright test && npm run storybook:serve:stop",
+    "test:playwright:headed": "npm run storybook:build && npm run storybook:serve:start && npx playwright test --headed && npm run storybook:serve:stop",
     "test:lint": "eslint ./src",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom --collectCoverage=true",
     "test:watch": "react-scripts test --env=jsdom",

playwright.config.ts

@@ -21,12 +21,10 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] }
     },
-
     {
       name: "firefox",
       use: { ...devices["Desktop Firefox"] }
     },
-
     {
       name: "webkit",
       use: { ...devices["Desktop Safari"] }
@@ -40,6 +38,7 @@ export default defineConfig({
   testMatch: /.*(spec)\.(js|ts|mjs)/,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
+    screenshot: "only-on-failure",
     /* Base URL to use in actions like `await page.goto('/')`. */
     // baseURL: 'http://127.0.0.1:3000',
 

src/ConditionalDialog/ConditionalDialog.spec.ts

@@ -0,0 +1,46 @@
+import { expect, test } from "@playwright/test";
+
+test("Fullscreen dialog title and content rendered", async ({ page }) => {
+  // Navigate to the default story of ConditionalDialog component in Storybook
+  await page.goto(
+    "http://localhost:6006/?path=/story/dialog-conditionaldialog--default"
+  );
+
+  // Get the title of the fullscreen dialog and assert that it is correct
+  const title = await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByText("Dialog Title")
+    .textContent();
+  expect(title).toBe("Dialog Title");
+
+  // Get the content of the fullscreen dialog and assert that it is correct
+  const content = await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByLabel("Dialog Title")
+    .locator("div")
+    .nth(2)
+    .innerHTML();
+  expect(content).toBe("<div>Content goes here</div>");
+});
+
+test("Condition false should not render dialog", async ({ page }) => {
+  // Navigate to the condition false story of ConditionalDialog component in Storybook
+  await page.goto(
+    "http://localhost:6006/?path=/story/dialog-conditionaldialog--condition-false"
+  );
+
+  // locate the iframe
+  const frame = page.frameLocator('iframe[title="storybook-preview-iframe"]');
+
+  // try locate the open dialog and assert that it is not visible
+  const openDialog = await frame.locator("#open-dialog");
+  expect(await openDialog.isVisible()).toBeFalsy();
+
+  // Get the content of the body and assert that it is correct
+  const content = await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByText("Content goes here")
+    .textContent();
+
+  expect(content).toBe("Content goes here");
+});

src/ConditionalDialog/ConditionalDialog.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import ConditionalDialog from "./ConditionalDialog";
+import { ConditionalDialogProps } from "./ConditionalDialog.types";
+import React from "react";
+
+/**
+ * Story metadata
+ */
+const meta: Meta = {
+  component: ConditionalDialog,
+  title: "Dialog/ConditionalDialog"
+};
+export default meta;
+
+// Story Template
+const Template: StoryFn<ConditionalDialogProps> = args => {
+  // Render the ConditionalDialog component with the current arguments
+  return (
+    <ConditionalDialog {...args}>
+      <div>Content goes here</div>
+    </ConditionalDialog>
+  );
+};
+
+// Define the default story
+export const Default = {
+  // Set the default values for the story's arguments
+  args: {
+    condition: true,
+    onClose: () => {},
+    title: "Dialog Title"
+  },
+  // Set the render function to use the story template
+  render: Template
+};
+
+// Define the condition false story
+export const conditionFalse = {
+  // Set the condition false value for the story's arguments
+  args: {
+    condition: false
+  },
+  // Set the render function to use the story template
+  render: Template
+};

src/ConditionalDialog/ConditionalDialog.tsx

@@ -0,0 +1,29 @@
+import { Box, Dialog, DialogContent } from "@mui/material";
+
+import { ConditionalDialogProps } from "./ConditionalDialog.types";
+import DialogTitle from "../DialogTitle";
+import React from "react";
+
+// This component is used to render a dialog that uses the full width (if the condition is true)
+const ConditionalDialog = (props: ConditionalDialogProps) => {
+  const { condition, onClose, children, title } = props;
+  // If the condition is true, render a dialog with the specified title and content
+  if (condition) {
+    return (
+      <Dialog maxWidth="xl" fullWidth open id="open-dialog">
+        <DialogTitle onClose={onClose}>
+          <Box sx={title ? {} : { p: 2 }}>{title}</Box>
+        </DialogTitle>
+        <DialogContent dividers>
+          <Box style={{ height: "calc(100vh - 168px)" }}>{children}</Box>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+  // If the condition is false, render the children as-is
+  else {
+    return children;
+  }
+};
+
+export default ConditionalDialog;

src/ConditionalDialog/ConditionalDialog.types.ts

@@ -0,0 +1,8 @@
+import { DialogTitleProps } from "../DialogTitle";
+
+export type ConditionalDialogProps = {
+  condition: boolean;
+  onClose: DialogTitleProps["onClose"];
+  children: React.ReactNode;
+  title?: React.ReactNode;
+};

src/ConditionalDialog/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ConditionalDialog";
+export type { ConditionalDialogProps } from "./ConditionalDialog.types";

src/LinePlot/LinePlot.tsx

@@ -52,7 +52,7 @@ const LinePlot = ({
         height="100%"
         width="100%"
       >
-        {showTitle ? (
+        {!isFullscreen && showTitle ? (
           <Typography
             align="center"
             style={{ padding: "0 16px", wordWrap: "break-word" }}

src/SurfacePlot/SurfacePlot.spec.tsx

@@ -0,0 +1,23 @@
+import { expect, test } from "@playwright/test";
+
+test("Surface plot in fullscreen and title visible", async ({ page }) => {
+  // Navigate to the SurfacePlot component in Storybook
+  await page.goto(
+    "http://localhost:6006/?path=/story/plots-surfaceplot--default"
+  );
+
+  // Click the fullscreen button in the Plotly toolbar
+  await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .locator("div:nth-child(4) > .modebar-btn")
+    .click();
+
+  // Get the title of the fullscreen dialog
+  const title = await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .locator(".MuiDialogTitle-root")
+    .textContent();
+
+  // Assert that the title is equal to "Surface Plot"
+  expect(title).toBe("Surface Plot");
+});

src/SurfacePlot/SurfacePlot.stories.tsx

@@ -0,0 +1,60 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import React from "react";
+import SurfacePlot from "./SurfacePlot";
+import { SurfacePlotProps } from "./SurfacePlot.types";
+import { useArgs } from "@storybook/client-api";
+
+/**
+ * Story metadata
+ */
+const meta: Meta = {
+  component: SurfacePlot,
+  title: "Plots/SurfacePlot"
+};
+export default meta;
+
+// Story Template
+const Template: StoryFn<SurfacePlotProps> = args => {
+  // Get the current values of the story's arguments and a function to update them
+  const [{ showTitle }, updateArgs] = useArgs<SurfacePlotProps>();
+
+  // Update the showTitle argument whenever it changes
+  React.useEffect(() => {
+    updateArgs({ showTitle });
+  }, [showTitle, updateArgs]);
+
+  // Render the SurfacePlot component with the current arguments
+  return <SurfacePlot {...args} />;
+};
+
+// Define the default story
+export const Default = {
+  // Set the default values for the story's arguments
+  args: {
+    markers: false,
+    minHeight: 0,
+    showTitle: false,
+    title: "Surface Plot",
+    xdata: [0.18, 0.36, 0.55, 0.73, 0.91, 1],
+    xlabel: "Normalized Torque (-)",
+    ydata: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+    ylabel: "Normalized Rotational Speed (-)",
+    zdata: [
+      [0.76, 0.76, 0.72, 0.7, 0.65, 0.6],
+      [0.86, 0.78, 0.76, 0.74, 0.7, 0.65],
+      [0.9, 0.9, 0.88, 0.86, 0.86, 0.78],
+      [0.92, 0.92, 0.92, 0.9, 0.88, 0.78],
+      [0.92, 0.92, 0.92, 0.92, 0.7, 0.65],
+      [0.92, 0.94, 0.94, 0.7, 0.65, 0.6],
+      [0.92, 0.94, 0.94, 0.7, 0.65, 0.6],
+      [0.92, 0.94, 0.7, 0.65, 0.6, 0.6],
+      [0.92, 0.94, 0.7, 0.65, 0.6, 0.6],
+      [0.92, 0.94, 0.7, 0.65, 0.6, 0.6],
+      [0.92, 0.92, 0.7, 0.65, 0.6, 0.6]
+    ],
+    zlabel: "Efficiency (-)"
+  },
+  // Set the render function to use the story template
+  render: Template
+};