Merge branch 'main' into sebastianarmbrust/e2e-usermenu-fix

e2e/notificationmenu/index.spec.ts

@@ -0,0 +1,118 @@
+import { createNamespace, deleteNamespace } from "../utils/namespace";
+import { expect, test } from "@playwright/test";
+
+import { createWorkflow } from "~/api/tree/mutate/createWorkflow";
+import { headers } from "e2e/utils/testutils";
+import { workflowWithSecrets } from "./utils";
+
+let namespace = "";
+
+test.beforeEach(async () => {
+  namespace = await createNamespace();
+});
+
+test.afterEach(async () => {
+  await deleteNamespace(namespace);
+  namespace = "";
+});
+
+test("Notification Bell has an inactive state by default", async ({ page }) => {
+  await page.goto(`/${namespace}/explorer/tree`, {
+    waitUntil: "networkidle",
+  });
+
+  const notificationBell = page.getByTestId("notification-bell").nth(1);
+
+  await expect(
+    notificationBell,
+    "it renders the Notification Bell"
+  ).toBeVisible();
+
+  await notificationBell.click();
+  const notificationText = page.getByTestId("notification-text");
+
+  expect(
+    await notificationText.textContent(),
+    "the modal should display 'You do not have any notifications.'"
+  ).toMatch(/You do not have any notifications./);
+});
+
+test("Notification Bell updates depending on the count of Notification Messages", async ({
+  page,
+}) => {
+  await createWorkflow({
+    payload: workflowWithSecrets,
+    urlParams: {
+      baseUrl: process.env.VITE_DEV_API_DOMAIN,
+      namespace,
+      name: "worfklow-with-secrets.yaml",
+    },
+    headers,
+  });
+
+  await page.goto(`/${namespace}/explorer/tree`, {
+    waitUntil: "networkidle",
+  });
+
+  const notificationBell = page.getByTestId("notification-bell").nth(1);
+
+  await expect(
+    notificationBell,
+    "it renders the Notification Bell"
+  ).toBeVisible();
+
+  expect(
+    page.getByTestId("notification-indicator").nth(1),
+    "the indicator for new messages is visible"
+  ).toBeVisible();
+
+  await notificationBell.click();
+  const notificationText = page.getByTestId("notification-text");
+
+  expect(
+    await notificationText.textContent(),
+    "the modal should now display 'You have 2 uninitialized secrets.'"
+  ).toMatch(/You have 2 uninitialized secrets./);
+
+  await page.goto(`/${namespace}/settings`);
+
+  const initialize_secret1 = page
+    .getByRole("cell", { name: "ACCESS_KEY Initialize secret" })
+    .getByRole("button");
+  const initialize_secret2 = page
+    .getByRole("cell", { name: "ACCESS_SECRET Initialize secret" })
+    .getByRole("button");
+
+  await initialize_secret1.click();
+
+  await page.getByTestId("new-secret-editor").fill("abc");
+  await page.getByTestId("secret-create-submit").click();
+  await notificationBell.click();
+
+  expect(
+    page.getByTestId("notification-indicator").nth(1),
+    "the indicator for new messages is visible"
+  ).toBeVisible();
+
+  expect(
+    await notificationText.textContent(),
+    "the modal should now display 'You have 1 uninitialized secret.'"
+  ).toMatch(/You have 1 uninitialized secret./);
+
+  await initialize_secret2.click();
+
+  await page.getByTestId("new-secret-editor").fill("123");
+  await page.getByTestId("secret-create-submit").click();
+
+  expect(
+    page.getByTestId("notification-indicator").nth(1),
+    "the indicator for new messages is NOT visible"
+  ).not.toBeVisible();
+
+  await notificationBell.click();
+
+  expect(
+    await notificationText.textContent(),
+    "the modal should now display 'You do not have any notifications.'"
+  ).toMatch(/You do not have any notifications./);
+});

e2e/notificationmenu/utils.ts

@@ -0,0 +1,19 @@
+export const workflowWithSecrets = `direktiv_api: workflow/v1
+functions:
+- id: aws-cli
+  image: direktiv/aws-cli:dev
+  type: knative-workflow
+
+states:
+- id: start-instance
+  type: action
+  action:
+    secrets: ["ACCESS_KEY", "ACCESS_SECRET"]
+    function: aws-cli
+    input: 
+      access-key: jq(.secrets.ACCESS_KEY)
+      secret-key: jq(.secrets.ACCESS_SECRET)
+      region: ap-southeast-2
+      commands: 
+      - command: aws ec2 run-instances --image-id ami-07620139298af599e --instance-type t2.small
+`;

src/design/Notification/index.tsx

@@ -62,7 +62,10 @@ const NotificationMessage = ({
   text: string;
   icon: LucideIcon;
 }) => (
-  <div className="flex flex-col focus:bg-gray-3 dark:focus:bg-gray-dark-3">
+  <div
+    className="flex flex-col focus:bg-gray-3 dark:focus:bg-gray-dark-3"
+    data-testid="notification-text"
+  >
     <div className="flex items-center px-2">
       <div className="w-max">
         <Icon
@@ -92,11 +95,13 @@ const Notification: FC<NotificationPropsType> = ({
           variant="ghost"
           className="group items-center px-1"
           role="button"
+          data-testid="notification-bell"
         >
           <div className="relative h-6 w-6">
             <Bell className="relative" />
             {showIndicator && (
               <div
+                data-testid="notification-indicator"
                 data-state="open"
                 className={twMergeClsx(
                   "absolute top-0 right-0 rounded-full border-2 border-white bg-danger-10 p-1 transition-colors dark:border-black dark:bg-danger-dark-10",