From 12b5ca57509621fcf9ee593b7c406949429d906b Mon Sep 17 00:00:00 2001
From: grvwy <contactgrvwy@gmail.com>
Date: Tue, 20 May 2025 23:47:17 +0200
Subject: [PATCH] Updates

Fixed "error  Expected linebreaks to be 'LF' but found 'CRLF' " by running eslint --fix on them hence the change to @api-router.js

UI updates to @Tagsmanager.vue

writing multi-tag tests in @status-page.spec.js
---
 src/components/TagsManager.vue     | 17 +++++------
 test/e2e/specs/status-page.spec.js | 45 ++++++++++++++++++++++++++++--
 2 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/components/TagsManager.vue b/src/components/TagsManager.vue
index b3546e571..ab881ce52 100644
--- a/src/components/TagsManager.vue
+++ b/src/components/TagsManager.vue
@@ -25,7 +25,7 @@
                 <div class="modal-content">
                     <div class="modal-body">
                         <!-- Display area for tags staged for batch addition -->
-                        <h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Staged Tags for Batch Add") }}</h4>
+                        <h4 v-if="stagedForBatchAdd.length > 0">{{ $t("Add Tags") }}</h4>
                         <div v-if="stagedForBatchAdd.length > 0" class="mb-3 staging-area" style="max-height: 150px; overflow-y: auto;">
                             <Tag
                                 v-for="stagedTag in stagedForBatchAdd"
@@ -126,21 +126,22 @@
                         </div>
                         <!-- End Validation Feedback -->
 
+                        <!-- Add Another Tag Button -->
+                        <!-- This button will be moved to the footer -->
+
                         <!-- Action Buttons: Clear current form and Stage current tag -->
-                        <div class="d-flex justify-content-end align-items-center mt-3">
-                            <a class="me-3" href="#" @click.prevent="clearDraftTag">{{ $t("Clear Form") }}</a>
-                            <button type="button" class="btn btn-outline-primary" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
-                                {{ $t("Add Another Tag") }}
-                            </button>
-                        </div>
+                        <!-- Removed original action buttons here -->
                         <div v-if="newDraftTag.select == null && !canStageMoreNewSystemTags && validateDraftTag.invalid && validateDraftTag.messageKey === 'tagLimitReached'" class="form-text text-danger text-end mt-1">
                             {{ $t(validateDraftTag.messageKey, validateDraftTag.messageParams) }}
                         </div>
                     </div>
                     <!-- Modal Footer: Cancel batch or Confirm and Add all staged tags -->
                     <div class="modal-footer">
+                        <button type="button" class="btn btn-outline-primary me-2" :disabled="processing || validateDraftTag.invalid" @click.stop="stageCurrentTag">
+                            {{ $t("Add Another Tag") }}
+                        </button>
                         <button type="button" class="btn btn-secondary" @click.stop="clearStagingAndCloseModal">{{ $t("Cancel") }}</button>
-                        <button type="button" class="btn btn-primary" :disabled="processing || (stagedForBatchAdd.length === 0 && validateDraftTag.invalid)" data-testid="tag-final-add-button" @click.stop="confirmAndCommitStagedTags">{{ $t("Add") }}</button>
+                        <button type="button" class="btn btn-primary" :disabled="processing || (stagedForBatchAdd.length === 0 && validateDraftTag.invalid)" data-testid="add-tags-final-button" @click.stop="confirmAndCommitStagedTags">{{ $t("Add Tags") }}</button>
                     </div>
                     <!-- End Modal Footer -->
                 </div>
diff --git a/test/e2e/specs/status-page.spec.js b/test/e2e/specs/status-page.spec.js
index ebe0b2c8b..ccd6dcaa8 100644
--- a/test/e2e/specs/status-page.spec.js
+++ b/test/e2e/specs/status-page.spec.js
@@ -33,12 +33,30 @@ test.describe("Status Page", () => {
         await page.getByTestId("monitor-type-select").selectOption("http");
         await page.getByTestId("friendly-name-input").fill(monitorName);
         await page.getByTestId("url-input").fill(monitorUrl);
+
+        // Open Tags modal
         await page.getByTestId("add-tag-button").click();
+        await expect(page.getByTestId("tag-name-input")).toBeVisible({ timeout: 10000 });
+
+        // Define and Stage the first tag
         await page.getByTestId("tag-name-input").fill(tagName);
         await page.getByTestId("tag-value-input").fill(tagValue);
-        await page.getByTestId("tag-color-select").click(); // Vue-Multiselect component
+        await page.getByTestId("tag-color-select").click();
         await page.getByTestId("tag-color-select").getByRole("option", { name: "Orange" }).click();
-        await page.getByTestId("tag-final-add-button").click();
+        await page.getByRole("button", { name: "Add Another Tag" }).click();
+
+        // Define the second tag (inputs should be clear after staging the first)
+        const tagName2 = "Project";
+        const tagValue2 = "Phoenix";
+        await page.getByTestId("tag-name-input").fill(tagName2);
+        await page.getByTestId("tag-value-input").fill(tagValue2);
+        await page.getByTestId("tag-color-select").click();
+        await page.getByTestId("tag-color-select").getByRole("option", { name: "Blue" }).click();
+
+        // Commit both staged tags (and the current draft if any)
+        await page.getByTestId("add-tags-final-button").click();
+        await expect(page.getByTestId("tag-name-input")).not.toBeVisible({ timeout: 5000 });
+
         await page.getByTestId("save-button").click();
         await page.waitForURL("/dashboard/*"); // wait for the monitor to be created
 
@@ -61,7 +79,27 @@ test.describe("Status Page", () => {
         await page.getByTestId("show-certificate-expiry-checkbox").uncheck();
         await page.getByTestId("google-analytics-input").fill(googleAnalyticsId);
         await page.getByTestId("custom-css-input").getByTestId("textarea").fill(customCss); // Prism
+
+        // Wait for the description-editable to reflect the input
+        await page.waitForFunction(
+            (expectedText) => {
+                const element = document.querySelector("[data-testid=description-editable]");
+                return element && element.textContent === expectedText;
+            },
+            descriptionText,
+            { timeout: 7000 } 
+        );
+
         await expect(page.getByTestId("description-editable")).toHaveText(descriptionText);
+        // Assuming footer text updates similarly, let's apply a similar pattern or ensure it's checked after description
+        await page.waitForFunction(
+            (expectedText) => {
+                const element = document.querySelector("[data-testid=custom-footer-editable]");
+                return element && element.textContent === expectedText;
+            },
+            footerText,
+            { timeout: 7000 } 
+        );
         await expect(page.getByTestId("custom-footer-editable")).toHaveText(footerText);
 
         // Add an incident
@@ -129,7 +167,8 @@ test.describe("Status Page", () => {
 
         await expect(page.getByTestId("edit-sidebar")).toHaveCount(0);
         await expect(page.getByTestId("powered-by")).toContainText("Powered by");
-        await expect(page.getByTestId("monitor-tag")).toContainText(tagValue);
+        await expect(page.getByTestId("monitor-tag").filter({ hasText: tagValue })).toBeVisible();
+        await expect(page.getByTestId("monitor-tag").filter({ hasText: tagValue2 })).toBeVisible();
 
         await screenshot(testInfo, page);
     });