🐛 Add fixes for subscription design review (#6751)

* 🐛 Fix from subscription design review

* 📎 Fixes PR feedback

frontend/playwright/data/subscription/get-owned-teams.json

@@ -2,11 +2,13 @@
     {
         "~:id": "~uf88e52d7-2b77-81fd-8006-23413fafe56c",
         "~:name": "The Alpaca team",
+        "~:total-editors": 3,
         "~:total-members": 3
     },
     {
         "~:id": "~u81be1d05-a07b-81d5-8006-3e728bea76fb",
         "~:name": "The Quokka team",
+        "~:total-editors": 1,
         "~:total-members": 1
     }
 ]

frontend/playwright/data/subscription/get-team-members-more-than-8.json

@@ -49,7 +49,7 @@
     "~:fullname": "Chewbacca",
     "~:is-owner": false,
     "~:modified-at": "~m1713533116365",
-    "~:can-edit": false,
+    "~:can-edit": true,
     "~:is-active": true,
     "~:id": "~u4b2c3d4e-2345-6789-8002-bcdefabcdefa",
     "~:profile-id": "~u4b2c3d4e-2345-6789-8002-bcdefabcdefa",
@@ -77,7 +77,7 @@
     "~:fullname": "R2-D2",
     "~:is-owner": false,
     "~:modified-at": "~m1713533116365",
-    "~:can-edit": false,
+    "~:can-edit": true,
     "~:is-active": true,
     "~:id": "~u6d4e5f6a-4567-8901-8004-defabcdefabc",
     "~:profile-id": "~u6d4e5f6a-4567-8901-8004-defabcdefabc",
@@ -91,7 +91,7 @@
     "~:fullname": "C-3PO",
     "~:is-owner": false,
     "~:modified-at": "~m1713533116365",
-    "~:can-edit": false,
+    "~:can-edit": true,
     "~:is-active": true,
     "~:id": "~u7e5f6a7b-5678-9012-8005-efabcdefabcd",
     "~:profile-id": "~u7e5f6a7b-5678-9012-8005-efabcdefabcd",
@@ -119,7 +119,7 @@
     "~:fullname": "Yoda",
     "~:is-owner": false,
     "~:modified-at": "~m1713533116365",
-    "~:can-edit": false,
+    "~:can-edit": true,
     "~:is-active": true,
     "~:id": "~u9a7b8c9d-7890-1234-8007-abcdefabcdef",
     "~:profile-id": "~u9a7b8c9d-7890-1234-8007-abcdefabcdef",

frontend/playwright/data/subscription/get-team-members-subscription-member.json

@@ -26,5 +26,19 @@
     "~:id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
     "~:profile-id": "~uf56647eb-19a7-8115-8003-b6bc939ecd1b",
     "~:created-at": "~m1713533116365"
+  },
+  {
+    "~:is-admin": false,
+    "~:email": "luke@example.com",
+    "~:team-id": "~udd33ff88-f4e5-8033-8003-8096cc07bdf3",
+    "~:name": "Luke Skywalker",
+    "~:fullname": "Luke Skywalker",
+    "~:is-owner": false,
+    "~:modified-at": "~m1713533116365",
+    "~:can-edit": true,
+    "~:is-active": true,
+    "~:id": "~u123456789-0000-0000-0000-abcdefabcdef",
+    "~:profile-id": "~u123456789-0000-0000-0000-abcdefabcdef",
+    "~:created-at": "~m1713533116365"
   }
 ]

frontend/playwright/data/subscription/get-team-members-subscription-owner.json

@@ -26,5 +26,19 @@
     "~:id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
     "~:profile-id": "~uf56647eb-19a7-8115-8003-b6bc939ecd1b",
     "~:created-at": "~m1713533116365"
+  },
+    {
+    "~:is-admin": false,
+    "~:email": "luke@example.com",
+    "~:team-id": "~udd33ff88-f4e5-8033-8003-8096cc07bdf3",
+    "~:name": "Luke Skywalker",
+    "~:fullname": "Luke Skywalker",
+    "~:is-owner": false,
+    "~:modified-at": "~m1713533116365",
+    "~:can-edit": true,
+    "~:is-active": true,
+    "~:id": "~u123456789-0000-0000-0000-abcdefabcdef",
+    "~:profile-id": "~u123456789-0000-0000-0000-abcdefabcdef",
+    "~:created-at": "~m1713533116365"
   }
 ]

frontend/playwright/data/subscription/get-teams-unlimited-subscription-expired-owner.json

@@ -1,52 +0,0 @@
-[
-  {
-    "~:features": {
-      "~#set": [
-        "layout/grid",
-        "styles/v2",
-        "fdata/pointer-map",
-        "fdata/objects-map",
-        "components/v2",
-        "fdata/shape-data-type"
-      ]
-    },
-    "~:permissions": {
-      "~:type": "~:owner",
-      "~:is-owner": true,
-      "~:is-admin": true,
-      "~:can-edit": true
-    },
-    "~:name": "Default",
-    "~:modified-at": "~m1713533116375",
-    "~:id": "~uc7ce0794-0992-8105-8004-38e630f40f6d",
-    "~:created-at": "~m1713533116375",
-    "~:is-default": true
-  },
-  {
-    "~:features": {
-      "~#set": [
-        "layout/grid",
-        "styles/v2",
-        "fdata/pointer-map",
-        "fdata/objects-map",
-        "components/v2",
-        "fdata/shape-data-type"
-      ]
-    },
-    "~:permissions": {
-      "~:type": "~:owner",
-      "~:is-owner": true,
-      "~:is-admin": true,
-      "~:can-edit": true
-    },
-    "~:subscription": {
-      "~:type": "unlimited",
-      "~:status": "paused"
-    },
-    "~:name": "Second team",
-    "~:modified-at": "~m1701164272671",
-    "~:id": "~udd33ff88-f4e5-8033-8003-8096cc07bdf3",
-    "~:created-at": "~m1701164272671",
-    "~:is-default": false
-  }
-]

frontend/playwright/ui/pages/SubscriptionProfilePage.js

@@ -1,31 +1,30 @@
 import { expect } from "@playwright/test";
-import { BaseWebSocketPage } from "./BaseWebSocketPage";
+import { DashboardPage } from "./DashboardPage";
 
-export class SubscriptionProfilePage extends BaseWebSocketPage {
+export class SubscriptionProfilePage extends DashboardPage {
   static async init(page) {
-    await BaseWebSocketPage.initWebSockets(page);
+    await DashboardPage.initWebSockets(page);
 
-    await BaseWebSocketPage.mockRPC(
+    await DashboardPage.mockRPC(
       page,
       "get-owned-teams",
       "subscription/get-owned-teams.json",
     );
-
   }
 
   constructor(page) {
     super(page);
 
-    this.mainHeading = page.getByRole('heading', { name: 'Subscription', level: 2 });
+    this.mainHeading = page.getByRole("heading", {
+      name: "Subscription",
+      level: 2,
+    });
   }
 
   async goToSubscriptions() {
-    await this.page.goto(
-      `#/settings/subscriptions`,
-    );
+    await this.page.goto(`#/settings/subscriptions`);
     await expect(this.mainHeading).toBeVisible();
   }
-
 }
 
 export default SubscriptionProfilePage;

frontend/playwright/ui/pages/WorkspacePage.js

@@ -317,3 +317,5 @@ export class WorkspacePage extends BaseWebSocketPage {
       .click(clickOptions);
   }
 }
+
+export default WorkspacePage;

frontend/playwright/ui/specs/subscriptions-dashboard.spec.js

@@ -1,14 +1,18 @@
 import { test, expect } from "@playwright/test";
 import DashboardPage from "../pages/DashboardPage";
-import { WorkspacePage } from "../pages/WorkspacePage";
-import { SubscriptionProfilePage } from "../pages/SubscriptionProfilePage";
+
+test.beforeEach(async ({ page }) => {
+  await DashboardPage.init(page);
+  await DashboardPage.mockConfigFlags(page, [
+    "enable-subscriptions",
+    "disable-onboarding",
+  ]);
+});
 
 test.describe("Subscriptions: dashboard", () => {
   test("Team with unlimited subscription has specific icon in menu", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -45,8 +49,6 @@ test.describe("Subscriptions: dashboard", () => {
   test("The Unlimited subscription has its name in the sidebar dropdown", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -79,12 +81,10 @@ test.describe("Subscriptions: dashboard", () => {
   });
 });
 
-test.describe("Subscriptions: Team members and invitations", () => {
+test.describe("Subscriptions: team members and invitations", () => {
   test("Team settings has susbscription name and no manage subscription link when is member", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -132,8 +132,6 @@ test.describe("Subscriptions: Team members and invitations", () => {
   test("Team settings has susbscription name and manage subscription link when is owner", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -188,8 +186,6 @@ test.describe("Subscriptions: Team members and invitations", () => {
   test("Members tab has warning message when team has more members than subscriptions. Subscribe link is shown for owners.", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -235,8 +231,6 @@ test.describe("Subscriptions: Team members and invitations", () => {
   test("Members tab has warning message when team has more members than subscriptions. Contact to owner is shown for members.", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -282,8 +276,6 @@ test.describe("Subscriptions: Team members and invitations", () => {
   test("Members tab has warning message when has professional subscription and more than 8 members.", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -330,11 +322,9 @@ test.describe("Subscriptions: Team members and invitations", () => {
     ).toBeVisible();
   });
 
-  test("Invitations tab has warning message when subscription is expired", async ({
+  test("Invitations tab has warning message when team has more members than subscriptions", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -352,7 +342,7 @@ test.describe("Subscriptions: Team members and invitations", () => {
     await DashboardPage.mockRPC(
       page,
       "get-teams",
-      "subscription/get-teams-unlimited-subscription-expired-owner.json",
+      "subscription/get-teams-unlimited-subscription-owner.json",
     );
 
     await DashboardPage.mockRPC(
@@ -382,7 +372,7 @@ test.describe("Subscriptions: Team members and invitations", () => {
     await expect(page.getByTestId("cta")).toBeVisible();
     await expect(
       page.getByText(
-        "Looks like your team has grown! Your plan includes seats, but you're now using more than that.",
+        "Looks like your team has grown! Your plan includes 2 seats, but you're now using 3",
       ),
     ).toBeVisible();
   });
@@ -390,8 +380,6 @@ test.describe("Subscriptions: Team members and invitations", () => {
   test("Invitations tab has warning message when has professional subscription and more than 8 members.", async ({
     page,
   }) => {
-    await DashboardPage.init(page);
-    await DashboardPage.mockConfigFlags(page, ["enable-subscriptions"]);
     await DashboardPage.mockRPC(
       page,
       "get-profile",
@@ -409,7 +397,7 @@ test.describe("Subscriptions: Team members and invitations", () => {
     await DashboardPage.mockRPC(
       page,
       "get-teams",
-      "subscription/get-teams-unlimited-subscription-expired-owner.json",
+      "subscription/get-teams-unlimited-subscription-owner.json",
     );
 
     await DashboardPage.mockRPC(
@@ -439,274 +427,8 @@ test.describe("Subscriptions: Team members and invitations", () => {
     await expect(page.getByTestId("cta")).toBeVisible();
     await expect(
       page.getByText(
-        "Looks like your team has grown! Your plan includes seats, but you're now using more than that.",
+        "Looks like your team has grown! Your plan includes 2 seats, but you're now using 9",
       ),
     ).toBeVisible();
   });
 });
-
-test.describe("Subscriptions: workspace", () => {
-  test("Unlimited team should have 'Power up your plan' link in main menu", async ({
-    page,
-  }) => {
-    await WorkspacePage.init(page);
-    await WorkspacePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-
-    await WorkspacePage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
-
-    await workspacePage.mockRPC(
-      "push-audit-events",
-      "workspace/audit-event-empty.json",
-    );
-    await workspacePage.goToWorkspace();
-    await page.getByRole("button", { name: "Main menu" }).click();
-
-    await expect(page.getByText("Power up your plan")).toBeVisible();
-  });
-
-  test("Enterprise team should not have 'Power up your plan' link in main menu", async ({
-    page,
-  }) => {
-    await WorkspacePage.init(page);
-    await WorkspacePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-
-    await WorkspacePage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-enterprise-subscription.json",
-    );
-
-    await workspacePage.mockRPC(
-      "push-audit-events",
-      "workspace/audit-event-empty.json",
-    );
-    await workspacePage.goToWorkspace();
-    await page.getByRole("button", { name: "Main menu" }).click();
-
-    await expect(page.getByText("Power up your plan")).not.toBeVisible();
-  });
-
-  test("Professional team should have 7 days autosaved versions", async ({
-    page,
-  }) => {
-    await WorkspacePage.init(page);
-    await WorkspacePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-
-    await workspacePage.mockRPC(
-      "push-audit-events",
-      "workspace/audit-event-empty.json",
-    );
-    await workspacePage.goToWorkspace();
-
-    await workspacePage.mockRPC(
-      "get-file-snapshots?file-id=*",
-      "workspace/versions-snapshot-1.json",
-    );
-
-    await page.getByLabel("History").click();
-
-    await expect(
-      page.getByText("Autosaved versions will be kept for 7 days."),
-    ).toBeVisible();
-  });
-
-  test("Unlimited team should have 30 days autosaved versions", async ({
-    page,
-  }) => {
-    await WorkspacePage.init(page);
-    await WorkspacePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-
-    await WorkspacePage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
-
-    await WorkspacePage.mockRPC(
-      page,
-      "get-teams",
-      "subscription/get-teams-unlimited-one-team.json",
-    );
-
-    await workspacePage.mockRPC(
-      "push-audit-events",
-      "workspace/audit-event-empty.json",
-    );
-    await workspacePage.goToWorkspace();
-
-    await workspacePage.mockRPC(
-      "get-file-snapshots?file-id=*",
-      "workspace/versions-snapshot-1.json",
-    );
-
-    await page.getByLabel("History").click();
-
-    await expect(
-      page.getByText("Autosaved versions will be kept for 30 days."),
-    ).toBeVisible();
-  });
-
-  test("Unlimited team should have 90 days autosaved versions", async ({
-    page,
-  }) => {
-    await WorkspacePage.init(page);
-    await WorkspacePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    const workspacePage = new WorkspacePage(page);
-    await workspacePage.setupEmptyFile();
-
-    await WorkspacePage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-enterprise-subscription.json",
-    );
-
-    await WorkspacePage.mockRPC(
-      page,
-      "get-teams",
-      "subscription/get-teams-enterprise-one-team.json",
-    );
-
-    await workspacePage.mockRPC(
-      "push-audit-events",
-      "workspace/audit-event-empty.json",
-    );
-    await workspacePage.goToWorkspace();
-
-    await workspacePage.mockRPC(
-      "get-file-snapshots?file-id=*",
-      "workspace/versions-snapshot-1.json",
-    );
-
-    await page.getByLabel("History").click();
-
-    await expect(
-      page.getByText("Autosaved versions will be kept for 90 days."),
-    ).toBeVisible();
-  });
-});
-
-test.describe("Subscriptions: profile", () => {
-  test("When subscription is professional there is no manage subscription link", async ({
-    page,
-  }) => {
-    await SubscriptionProfilePage.init(page);
-    await SubscriptionProfilePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    await SubscriptionProfilePage.mockRPC(
-      page,
-      "get-profile",
-      "logged-in-user/get-profile-logged-in.json",
-    );
-
-    const subscriptionProfilePage = new SubscriptionProfilePage(page);
-
-    await subscriptionProfilePage.goToSubscriptions();
-
-    await expect(
-      page.getByRole("button", { name: "Manage your subscription" }),
-    ).not.toBeVisible();
-
-    await expect(
-      page.getByRole("heading", { name: "Other Penpot plans", level: 3 }),
-    ).toBeVisible();
-
-    await expect(page.getByText("$7")).toBeVisible();
-
-    await expect(page.getByText("$950")).toBeVisible();
-
-    await expect(
-      page.getByRole("button", { name: "Try it free for 14 days" }).first(),
-    ).toBeVisible();
-  });
-
-  test("When subscription is unlimited there is manage subscription link", async ({
-    page,
-  }) => {
-    await SubscriptionProfilePage.init(page);
-    await SubscriptionProfilePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    await SubscriptionProfilePage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-unlimited-subscription.json",
-    );
-
-    const subscriptionProfilePage = new SubscriptionProfilePage(page);
-
-    await subscriptionProfilePage.goToSubscriptions();
-
-    await expect(
-      page.getByRole("button", { name: "Manage your subscription" }),
-    ).toBeVisible();
-
-    await expect(
-      page.getByRole("heading", { name: "Other Penpot plans", level: 3 }),
-    ).toBeVisible();
-
-    await expect(page.getByText("$0")).toBeVisible();
-
-    await expect(page.getByText("$950")).toBeVisible();
-
-    await expect(
-      page.getByRole("button", { name: "Try it free for 14 days" }).first(),
-    ).not.toBeVisible();
-
-    await expect(
-      page.getByRole("button", { name: "Subscribe" }).first(),
-    ).toBeVisible();
-  });
-
-  test("When subscription is enteprise there is manage subscription link", async ({
-    page,
-  }) => {
-    await SubscriptionProfilePage.init(page);
-    await SubscriptionProfilePage.mockConfigFlags(page, ["enable-subscriptions"]);
-
-    await SubscriptionProfilePage.mockRPC(
-      page,
-      "get-profile",
-      "subscription/get-profile-enterprise-subscription.json",
-    );
-
-    const subscriptionProfilePage = new SubscriptionProfilePage(page);
-
-    await subscriptionProfilePage.goToSubscriptions();
-
-    await expect(
-      page.getByRole("button", { name: "Manage your subscription" }),
-    ).toBeVisible();
-
-    await expect(
-      page.getByRole("heading", { name: "Other Penpot plans", level: 3 }),
-    ).toBeVisible();
-
-    await expect(page.getByText("$0")).toBeVisible();
-
-    await expect(page.getByText("$7")).toBeVisible();
-
-    await expect(
-      page.getByRole("button", { name: "Try it free for 14 days" }).first(),
-    ).not.toBeVisible();
-
-    await expect(
-      page.getByRole("button", { name: "Subscribe" }).first(),
-    ).toBeVisible();
-  });
-});

frontend/playwright/ui/specs/subscriptions-profile.spec.js

@@ -0,0 +1,111 @@
+import { test, expect } from "@playwright/test";
+import SubscriptionProfilePage from "../pages/SubscriptionProfilePage";
+
+test.beforeEach(async ({ page }) => {
+  await SubscriptionProfilePage.init(page);
+
+  await SubscriptionProfilePage.mockConfigFlags(page, [
+    "enable-subscriptions",
+    "disable-onboarding",
+  ]);
+});
+
+test.describe("Subscriptions: profile", () => {
+  test("When subscription is professional there is no manage subscription link", async ({
+    page,
+  }) => {
+    await SubscriptionProfilePage.mockRPC(
+      page,
+      "get-profile",
+      "logged-in-user/get-profile-logged-in.json",
+    );
+
+    const subscriptionProfilePage = new SubscriptionProfilePage(page);
+
+    await subscriptionProfilePage.goToSubscriptions();
+
+    await expect(
+      page.getByRole("button", { name: "Manage your subscription" }),
+    ).not.toBeVisible();
+
+    await expect(
+      page.getByRole("heading", { name: "Other Penpot plans", level: 3 }),
+    ).toBeVisible();
+
+    await expect(page.getByText("$7")).toBeVisible();
+
+    await expect(page.getByText("$950")).toBeVisible();
+
+    await expect(
+      page.getByRole("button", { name: "Try it free for 14 days" }).first(),
+    ).toBeVisible();
+  });
+
+  test("When subscription is unlimited there is manage subscription link", async ({
+    page,
+  }) => {
+    await SubscriptionProfilePage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
+
+    const subscriptionProfilePage = new SubscriptionProfilePage(page);
+
+    await subscriptionProfilePage.goToSubscriptions();
+
+    await expect(
+      page.getByRole("button", { name: "Manage your subscription" }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole("heading", { name: "Other Penpot plans", level: 3 }),
+    ).toBeVisible();
+
+    await expect(page.getByText("$0")).toBeVisible();
+
+    await expect(page.getByText("$950")).toBeVisible();
+
+    await expect(
+      page.getByRole("button", { name: "Try it free for 14 days" }).first(),
+    ).not.toBeVisible();
+
+    await expect(
+      page.getByRole("button", { name: "Subscribe" }).first(),
+    ).toBeVisible();
+  });
+
+  test("When subscription is enteprise there is manage subscription link", async ({
+    page,
+  }) => {
+    await SubscriptionProfilePage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-enterprise-subscription.json",
+    );
+
+    const subscriptionProfilePage = new SubscriptionProfilePage(page);
+
+    await subscriptionProfilePage.goToSubscriptions();
+
+    await expect(
+      page.getByRole("button", { name: "Manage your subscription" }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByRole("heading", { name: "Other Penpot plans", level: 3 }),
+    ).toBeVisible();
+
+    await expect(page.getByText("$0")).toBeVisible();
+
+    await expect(page.getByText("$7")).toBeVisible();
+
+    await expect(
+      page.getByRole("button", { name: "Try it free for 14 days" }).first(),
+    ).not.toBeVisible();
+
+    await expect(
+      page.getByRole("button", { name: "Subscribe" }).first(),
+    ).toBeVisible();
+  });
+});

frontend/playwright/ui/specs/subscriptions-workspace.spec.js

@@ -0,0 +1,152 @@
+import { test, expect } from "@playwright/test";
+import WorkspacePage from "../pages/WorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+  await WorkspacePage.mockConfigFlags(page, [
+    "enable-subscriptions",
+    "disable-onboarding",
+  ]);
+});
+
+test.describe("Subscriptions: workspace", () => {
+  test("Unlimited team should have 'Power up your plan' link in main menu", async ({
+    page,
+  }) => {
+    const workspacePage = new WorkspacePage(page);
+    await workspacePage.setupEmptyFile();
+
+    await WorkspacePage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
+
+    await workspacePage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await workspacePage.goToWorkspace();
+    await page.getByRole("button", { name: "Main menu" }).click();
+
+    await expect(page.getByText("Power up your plan")).toBeVisible();
+  });
+
+  test("Enterprise team should not have 'Power up your plan' link in main menu", async ({
+    page,
+  }) => {
+    const workspacePage = new WorkspacePage(page);
+    await workspacePage.setupEmptyFile();
+
+    await WorkspacePage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-enterprise-subscription.json",
+    );
+
+    await workspacePage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await workspacePage.goToWorkspace();
+    await page.getByRole("button", { name: "Main menu" }).click();
+
+    await expect(page.getByText("Power up your plan")).not.toBeVisible();
+  });
+
+  test("Professional team should have 7 days autosaved versions", async ({
+    page,
+  }) => {
+    const workspacePage = new WorkspacePage(page);
+    await workspacePage.setupEmptyFile();
+
+    await workspacePage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await workspacePage.goToWorkspace();
+
+    await workspacePage.mockRPC(
+      "get-file-snapshots?file-id=*",
+      "workspace/versions-snapshot-1.json",
+    );
+
+    await page.getByLabel("History").click();
+
+    await expect(
+      page.getByText("Autosaved versions will be kept for 7 days."),
+    ).toBeVisible();
+  });
+
+  test("Unlimited team should have 30 days autosaved versions", async ({
+    page,
+  }) => {
+    const workspacePage = new WorkspacePage(page);
+    await workspacePage.setupEmptyFile();
+
+    await WorkspacePage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-unlimited-subscription.json",
+    );
+
+    await WorkspacePage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-unlimited-one-team.json",
+    );
+
+    await workspacePage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await workspacePage.goToWorkspace();
+
+    await workspacePage.mockRPC(
+      "get-file-snapshots?file-id=*",
+      "workspace/versions-snapshot-1.json",
+    );
+
+    await page.getByLabel("History").click();
+
+    await expect(
+      page.getByText("Autosaved versions will be kept for 30 days."),
+    ).toBeVisible();
+  });
+
+  test("Unlimited team should have 90 days autosaved versions", async ({
+    page,
+  }) => {
+    const workspacePage = new WorkspacePage(page);
+    await workspacePage.setupEmptyFile();
+
+    await WorkspacePage.mockRPC(
+      page,
+      "get-profile",
+      "subscription/get-profile-enterprise-subscription.json",
+    );
+
+    await WorkspacePage.mockRPC(
+      page,
+      "get-teams",
+      "subscription/get-teams-enterprise-one-team.json",
+    );
+
+    await workspacePage.mockRPC(
+      "push-audit-events",
+      "workspace/audit-event-empty.json",
+    );
+    await workspacePage.goToWorkspace();
+
+    await workspacePage.mockRPC(
+      "get-file-snapshots?file-id=*",
+      "workspace/versions-snapshot-1.json",
+    );
+
+    await page.getByLabel("History").click();
+
+    await expect(
+      page.getByText("Autosaved versions will be kept for 90 days."),
+    ).toBeVisible();
+  });
+});