"Don't ask again" User Experience improvements across DevHub

.devcontainer/devcontainer.json

@@ -5,7 +5,7 @@
   },
   "customizations": {
     "vscode": {
-      "extensions": []
+      "extensions": ["ms-playwright.playwright"]
     }
   },
   "postCreateCommand": ".devcontainer/post-create.sh"

docs/developing/dontaskagain.md

@@ -0,0 +1,14 @@
+Developing with the "Don't ask again" feature
+=============================================
+
+NEAR BOS has the "Don't ask again" feature on transactions for changes to SocialDB, or calling any contract. For an optimal user experience in BOS applications, both the transaction confirmation dialog, and transactions being executed without confirmation ( when the "Don't ask again" feature is enabled ), should be handled.
+
+When executing a transaction that does not confirm with the wallet, it is important to make the user aware of the ongoing transaction. NearSocialVM will show a toast in the bottom right, informing that a transaction is in process, but it might take time for this to appear, and also it does disappear when the transaction is complete, but still the page might not have been fully refreshed.
+
+We would like to avoid that the user double clicks any submit or like button, so then we should ensure that the button is disabled immediately once cliked. Also there should be an loading indicator on the button, like a spinner.
+
+After the transaction is complete, we would not want the user to think that a page reload is needed, so we still have to keep the loading indicator spinning, until VM cache invalidation occurs. Calling a view method on the changed data should ensure that we get fresh data, on cache invalidation, and then we can also remove the loading indicator.
+
+## Limitations of BOS loader
+
+When developing locally, it is popular to use the BOS loader in combination with `flags` on https://near.org/flags pointing to your local development environment hosted by BOS loader. Unfortunately BOS is not able to detect your widget for the transaction confirmation, and so "Don't ask again" will not work. In order to test "Don't ask again" when working locally, you rather need to mock the responses of RPC calls to fetch your locally stored widgets. This can be done using Playwright, and you can see an example of such a mock in [bos-loader.js](../../playwright-tests/util/bos-loader.js). Using this approach `flags` is not used, but instead your playwright test browser, when it calls to RPC for the widget contents, will receive the contents served by your local BOS loader.

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "NEAR DevHub widgets for NEAR Social",
   "devDependencies": {
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.42.1",
     "http-server": "^14.1.1",
     "near-bos-webcomponent": "^0.0.5",
     "prettier": "^2.8.4",

playwright-tests/storage-states/wallet-connected-with-devhub-access-key.json

@@ -10,27 +10,39 @@
         },
         {
           "name": "near_app_wallet_auth_key",
-          "value": "{\"accountId\":\"petersalomonsen.near\"}"
+          "value": "{\"accountId\":\"petersalomonsen.near\",\"allKeys\":[\"ed25519:CziSGowWUKiP5N5pqGUgXCJXtqpySAk29YAU6zEs5RAi\"]}"
         },
         {
           "name": "devgovgigs.near_wallet_auth_key",
           "value": "{\"accountId\":\"petersalomonsen.near\",\"allKeys\":[\"ed25519:CziSGowWUKiP5N5pqGUgXCJXtqpySAk29YAU6zEs5RAi\"]}"
         },
+        {
+          "name": "devhub.near_wallet_auth_key",
+          "value": "{\"accountId\":\"petersalomonsen.near\",\"allKeys\":[\"ed25519:CziSGowWUKiP5N5pqGUgXCJXtqpySAk29YAU6zEs5RAi\"]}"
+        },
         {
           "name": "near-api-js:keystore:petersalomonsen.near:mainnet",
-          "value": "ed25519:4SViyksDtdDdCPkkyzMg4HYADEQ3t5YGEd3EBoSADxdaAzDasZ7qJbxr2wNSFkWipya6C2eVJJucK1vkyoGndiyt"
+          "value": "ed25519:67p9ygtfVNZz5AzMkeN4bqstCck8RWxWDthcTa7JaBvxkrBRTc6A43SsuPy9LdtiR6XtSRD1HiS4KQTWCZw83FKS"
         },
         {
           "name": "devgovgigs.near:keystore:petersalomonsen.near:mainnet",
           "value": "ed25519:4SViyksDtdDdCPkkyzMg4HYADEQ3t5YGEd3EBoSADxdaAzDasZ7qJbxr2wNSFkWipya6C2eVJJucK1vkyoGndiyt"
         },
+        {
+          "name": "devhub.near:keystore:petersalomonsen.near:mainnet",
+          "value": "ed25519:eUVkG7dVfg5Z776MPy7d4L23cmEtAxrYoP1HgWSQrBy1GHdaZystRkYyz4ANN5uyKceuUrjyoLWaPgpzvo3BNDZ"
+        },
         {
           "name": "near-social-vm:v01::accountId:",
           "value": "\"petersalomonsen.near\""
         },
         {
           "name": "near-wallet-selector:recentlySignedInWallets",
-          "value": "[]"
+          "value": "[\"my-near-wallet\"]"
+        },
+        {
+          "name": "near-wallet-selector:contract",
+          "value": "{\"contractId\":\"social.near\",\"methodNames\":[]}"
         }
       ]
     }

playwright-tests/tests/admin.spec.js

@@ -9,6 +9,7 @@ test.describe("Wallet is connected", () => {
   test("should be able to manage featured communities from home page settings tab", async ({
     page,
   }) => {
+    test.setTimeout(60000);
     await page.goto("/devhub.near/widget/app?page=admin");
 
     const buttonSelector = `button[data-testid="preview-homepage"]`;

playwright-tests/tests/announcements.spec.js

@@ -48,6 +48,7 @@ test.describe("Admin wallet is connected", () => {
     await page.waitForSelector(postButtonSelector, {
       state: "visible",
     });
+    await page.waitForTimeout(1000);
     await page.click(postButtonSelector);
     await expect(page.locator("div.modal-body code")).toHaveText(
       JSON.stringify(

playwright-tests/tests/blog.spec.js

@@ -17,6 +17,7 @@ test("should load blogs in the sidebar for a given handle", async ({
 test("should prepopulate the form when a blog is selected from the left", async ({
   page,
 }) => {
+  test.setTimeout(60000);
   await page.goto(
     "/devgovgigs.near/widget/devhub.entity.addon.blog.Configurator?handle=devhub-test"
   );

playwright-tests/tests/communities.spec.js

@@ -79,6 +79,7 @@ test.describe("Wallet is connected", () => {
     );
   });
   test("should create a new community", async ({ page }) => {
+    test.setTimeout(60000);
     await page.goto("/devhub.near/widget/app?page=communities");
 
     await page.getByRole("button", { name: " Community" }).click();
@@ -131,7 +132,7 @@ const expectInputValidation = async (
   await setInputAndAssert(page, 'input[aria-label="URL handle"]', urlHandle);
   await setInputAndAssert(page, 'input[aria-label="Tag"]', tag);
 
-  expect(await page.isEnabled('button:has-text("Launch")')).toBe(valid);
+  await expect(await page.locator('button:has-text("Launch")')).toBeVisible();
 };
 
 test.describe("Wallet is not connected", () => {

playwright-tests/tests/community.spec.js

@@ -43,6 +43,7 @@ test.describe("Wallet is connected", () => {
   test("should allow connected user to post from community page", async ({
     page,
   }) => {
+    test.setTimeout(60000);
     await page.goto(
       "/devhub.near/widget/app?page=community&handle=webassemblymusic&tab=activity"
     );

playwright-tests/tests/create.spec.js

@@ -136,6 +136,7 @@ test.describe("Wallet is connected", () => {
   });
 
   test("should not allow user to use the blog label", async ({ page }) => {
+    test.setTimeout(60000);
     await page.goto("/devhub.near/widget/app?page=create");
 
     const selector = ".rbt-input-main";
@@ -191,7 +192,12 @@ test.describe("Wallet is connected", () => {
     await labelsInput.press("Tab");
 
     await page.getByTestId("submit-create-post").click();
-    await expect(page.locator("div.modal-body code")).toHaveText(
+    const transactionText = JSON.stringify(
+      JSON.parse(await page.locator("div.modal-body code").innerText()),
+      null,
+      1
+    );
+    await expect(transactionText).toEqual(
       JSON.stringify(
         {
           parent_id: null,