Feature - Remove standalone mods phase 5 - slices 1+2

end-to-end-tests/pageObjects/extensionConsole/workshop/editWorkshopModPage.ts

@@ -35,5 +35,6 @@ export class EditWorkshopModPage extends BasePageObject {
     await expect(
       this.page.getByRole("status").filter({ hasText: "Deleted " }),
     ).toBeVisible();
+    await expect(this.page.getByRole("status")).toBeHidden();
   }
 }

end-to-end-tests/pageObjects/extensionConsole/workshop/workshopPage.ts

@@ -42,7 +42,9 @@ export class WorkshopPage extends BasePageObject {
 
   async findAndSelectMod(modId: string) {
     await this.getByPlaceholder("Start typing to find results").fill(modId);
-    await this.getByRole("cell", { name: modId }).click();
+    const cellLocator = this.getByRole("cell", { name: modId });
+    await cellLocator.waitFor({ state: "visible", timeout: 5000 });
+    await cellLocator.click();
 
     const editPage = new EditWorkshopModPage(this.page);
     await editPage.editor.waitForLoad();

end-to-end-tests/pageObjects/pageEditor/brickActionsPanel.ts

@@ -17,6 +17,7 @@
 
 import { BasePageObject } from "../basePageObject";
 import { ModifiesModFormState } from "./utils";
+import { expect } from "@playwright/test";
 
 export class Brick extends BasePageObject {
   moveBrickUpButton = this.getByRole("button", { name: "Move brick higher" });
@@ -40,7 +41,10 @@ export class Brick extends BasePageObject {
 export class BrickActionsPanel extends BasePageObject {
   removeBrickButton = this.getByTestId("icon-button-removeNode");
   copyBrickButton = this.getByTestId("icon-button-copyNode");
-  bricks = this.getByTestId("editor-node");
+
+  get bricks() {
+    return this.getByTestId("editor-node");
+  }
 
   getAddBrickButton(n: number) {
     return this.getByTestId(/icon-button-.*-add-brick/).nth(n);
@@ -86,7 +90,11 @@ export class BrickActionsPanel extends BasePageObject {
 
     // Add brick modal
     await this.page.getByTestId("tag-search-input").fill(brickName);
-    await this.page.getByRole("button", { name: brickName }).first().click();
+    const brickResult = this.page
+      .getByRole("button", { name: brickName })
+      .first();
+    await expect(brickResult).toBeVisible();
+    await brickResult.click();
 
     await this.page.getByRole("button", { name: "Add brick" }).click();
   }

end-to-end-tests/pageObjects/pageEditor/modActionMenu.ts

@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { BasePageObject } from "../basePageObject";
+import { ModifiesModFormState } from "./utils";
+import type { StarterBrickUIName } from "./types";
+import { uuidv4 } from "@/types/helpers";
+import { ConfigurationForm } from "./configurationForm";
+
+class BaseActionMenu extends BasePageObject {
+  get clearOption() {
+    return this.page.getByRole("menuitem", { name: "Clear Changes" });
+  }
+}
+
+export class ModActionMenu extends BaseActionMenu {
+  @ModifiesModFormState
+  async addStarterBrick(starterBrickName: StarterBrickUIName): Promise<string> {
+    const uniqueBrickName = `${starterBrickName} ${uuidv4()}`;
+    await this.page
+      .getByRole("menuitem", { name: /Add Starter Brick/ })
+      .hover();
+    await this.page.getByRole("menuitem", { name: starterBrickName }).click();
+
+    const brickConfigurationPanel = new ConfigurationForm(
+      this.page.getByTestId("brickConfigurationPanel"),
+    );
+    await brickConfigurationPanel.fillField("name", uniqueBrickName);
+    await brickConfigurationPanel.waitForModFormStateToUpdate();
+    return uniqueBrickName;
+  }
+
+  get copyOption() {
+    return this.page.getByRole("menuitem", { name: "Make a copy" });
+  }
+
+  get deactivateOption() {
+    return this.page.getByRole("menuitem", { name: "Deactivate" });
+  }
+
+  get deleteNewModOption() {
+    return this.page.getByRole("menuitem", { name: "Delete new Mod" });
+  }
+}
+
+export class ModComponentActionMenu extends BaseActionMenu {
+  get duplicateOption() {
+    return this.page.getByRole("menuitem", { name: "Duplicate" });
+  }
+
+  get moveFromModOption() {
+    return this.page.getByRole("menuitem", { name: "Move from Mod" });
+  }
+
+  get copyToModOption() {
+    return this.page.getByRole("menuitem", { name: "Copy to Mod" });
+  }
+
+  get deleteOption() {
+    return this.page.getByRole("menuitem", { name: "Delete component" });
+  }
+}

end-to-end-tests/pageObjects/pageEditor/modListItem.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { BasePageObject } from "../basePageObject";
+import { ModActionMenu, ModComponentActionMenu } from "./modActionMenu";
+
+class BaseListItem extends BasePageObject {
+  get dirtyIcon() {
+    return this.locator("span[title='Unsaved changes']");
+  }
+
+  get menuButton() {
+    return this.getByLabel(" - Ellipsis");
+  }
+
+  async select() {
+    return this.click({ timeout: 5000 });
+  }
+}
+
+export class ModListItem extends BaseListItem {
+  get saveButton() {
+    return this.locator("[data-icon=save]");
+  }
+
+  get modActionMenu() {
+    return new ModActionMenu(
+      this.locator("[data-testid='ellipsis-menu-button']"),
+    );
+  }
+}
+
+export class ModComponentListItem extends BaseListItem {
+  get unavailableIcon() {
+    return this.getByRole("img", {
+      name: "Not available on page",
+    });
+  }
+
+  get modComponentActionMenu() {
+    return new ModComponentActionMenu(
+      this.locator("[data-testid='ellipsis-menu-button']"),
+    );
+  }
+}

end-to-end-tests/pageObjects/pageEditor/modListingPanel.ts

@@ -16,82 +16,13 @@
  */
 
 import { BasePageObject } from "../basePageObject";
-import { uuidv4 } from "@/types/helpers";
-import { ModifiesModFormState } from "./utils";
-
-export type StarterBrickUIName =
-  | "Context Menu"
-  | "Trigger"
-  | "Button"
-  | "Quick Bar Action"
-  | "Dynamic Quick Bar"
-  | "Sidebar Panel";
-
-export class ModActionMenu extends BasePageObject {
-  get copyButton() {
-    return this.getByRole("menuitem", { name: "Make a copy" });
-  }
-
-  get deactivateButton() {
-    return this.getByRole("menuitem", { name: "Deactivate" });
-  }
-
-  @ModifiesModFormState
-  async addStarterBrick(starterBrickName: StarterBrickUIName) {
-    await this.getByRole("menuitem", { name: "Add starter brick" }).hover();
-    await this.getByRole("menuitem", { name: starterBrickName }).click();
-  }
-}
-
-export class ModListItem extends BasePageObject {
-  saveButton = this.locator("[data-icon=save]");
-  get menuButton() {
-    return this.getByLabel(" - Ellipsis");
-  }
-
-  get unavailableIcon() {
-    return this.getByRole("img", {
-      name: "Not available on page",
-    });
-  }
-
-  async select() {
-    return this.click();
-  }
-
-  get modActionMenu() {
-    return new ModActionMenu(this.page.getByLabel("Menu"));
-  }
-}
+import { ModComponentListItem, ModListItem } from "./modListItem";
 
 export class ModListingPanel extends BasePageObject {
-  addButton = this.getByRole("button", { name: "Add", exact: true });
+  newModButton = this.getByRole("button", { name: "New Mod", exact: true });
   quickFilterInput = this.getByPlaceholder("Quick filter");
-  get activeModListItem() {
-    return new ModListItem(this.locator(".list-group-item.active"));
-  }
-
-  /**
-   * Adds a starter brick in the Page Editor. Generates a unique mod name to prevent
-   * test collision.
-   *
-   * @param starterBrickName the starter brick name to add, corresponding to the name shown in the Page Editor UI,
-   * not the underlying type
-   * @returns modName the generated mod name
-   */
-  @ModifiesModFormState
-  async addStarterBrick(starterBrickName: StarterBrickUIName) {
-    const modUuid = uuidv4();
-    const modComponentName = `Test ${starterBrickName} ${modUuid}`;
-    await this.addButton.click();
-    await this.locator("[role=button].dropdown-item", {
-      hasText: starterBrickName,
-    }).click();
-
-    return { modComponentName, modUuid };
-  }
 
-  getModListItemByName(modName: string) {
+  getModListItemByName(modName: string | RegExp): ModListItem {
     return new ModListItem(
       this.locator(".list-group-item", { hasText: modName }).first(),
     );
@@ -101,12 +32,19 @@ export class ModListingPanel extends BasePageObject {
     const modStarterBricks = this.locator(
       `.collapse:below(:text("${modName}"))`,
     );
-    return new ModListItem(
+    return new ModComponentListItem(
       modStarterBricks
         .locator(".list-group-item", {
           hasText: starterBrickName,
         })
         .first(),
     );
   }
+
+  getAllModStarterBricks(modName: string) {
+    const modStarterBricks = this.locator(
+      `.collapse:below(:text("${modName}"))`,
+    );
+    return modStarterBricks.locator(".list-group-item");
+  }
 }