[Credentials Import] Add "Don't Show Again" button to import prompt

integration-test/helpers/mocks.webkit.js

@@ -152,7 +152,8 @@ export const macosWithoutOverlay = () => {
             'setIncontextSignupPermanentlyDismissedAt',
             'startEmailProtectionSignup',
             'closeEmailProtectionTab',
-            'startCredentialsImportFlow'
+            'startCredentialsImportFlow',
+            'credentialsImportFlowPermanentlyDismissed'
         ]
     }
 }
@@ -265,7 +266,8 @@ export function createWebkitMocks (platform = 'macos') {
         setIncontextSignupPermanentlyDismissedAt: null,
         startEmailProtectionSignup: null,
         closeEmailProtectionTab: null,
-        startCredentialsImportFlow: {}
+        startCredentialsImportFlow: {},
+        credentialsImportFlowPermanentlyDismissed: null
     }
 
     /** @type {MockBuilder<any, webkitBase>} */

integration-test/tests/credentials-import.macos.spec.js

@@ -115,5 +115,35 @@ test.describe('Import credentials prompt', () => {
             await expect(webkitCalls.length).toBeGreaterThanOrEqual(1)
             await overlay.assertCloseAutofillParent()
         })
+
+        test('when dismiss prompt is clicked, native API call is made', async ({ page }) => {
+            await forwardConsoleMessages(page)
+            await createWebkitMocks()
+                .withAvailableInputTypes(createAvailableInputTypes({
+                    credentials: {
+                        username: false,
+                        password: false
+                    },
+                    credentialsImport: true
+                }))
+                .withCredentialsImport?.('credentials.username')
+                .applyTo(page)
+
+            // Pretend we're running in a top-frame scenario
+            await createAutofillScript()
+                .replaceAll(macosContentScopeReplacements())
+                .replace('isTopFrame', true)
+                .replace('supportsTopFrame', true)
+                .platform('macos')
+                .applyTo(page)
+
+            const overlay = overlayPage(page)
+            await overlay.navigate()
+            await overlay.clickButtonWithText("Don't Show Again")
+
+            const webkitCalls = await mockedCalls(page, { names: ['credentialsImportFlowPermanentlyDismissed'], minCount: 1 })
+            await expect(webkitCalls.length).toBeGreaterThanOrEqual(1)
+            await overlay.assertCloseAutofillParent()
+        })
     })
 })

src/CredentialsImport.js

@@ -1,4 +1,4 @@
-import { CloseAutofillParentCall, StartCredentialsImportFlowCall } from './deviceApiCalls/__generated__/deviceApiCalls.js'
+import { CloseAutofillParentCall, CredentialsImportFlowPermanentlyDismissedCall, StartCredentialsImportFlowCall } from './deviceApiCalls/__generated__/deviceApiCalls.js'
 
 /**
  * Use this as place to store any state or functionality related to password import promotion
@@ -58,6 +58,11 @@ class CredentialsImport {
         this.device.deviceApi.notify(new CloseAutofillParentCall(null))
         this.device.deviceApi.notify(new StartCredentialsImportFlowCall({}))
     }
+
+    async dismissed () {
+        this.device.deviceApi.notify(new CloseAutofillParentCall(null))
+        this.device.deviceApi.notify(new CredentialsImportFlowPermanentlyDismissedCall(null))
+    }
 }
 
 export { CredentialsImport }

src/UI/CredentialsImportTooltip.js

@@ -3,7 +3,7 @@ import HTMLTooltip from './HTMLTooltip.js'
 class CredentialsImportTooltip extends HTMLTooltip {
     /**
      * @param {import("../DeviceInterface/InterfacePrototype.js").default} device
-     * @param {{ onStarted(): void }} callbacks
+     * @param {{ onStarted(): void, onDismissed(): void }} callbacks
      */
     render (device, callbacks) {
         this.device = device
@@ -19,16 +19,26 @@ ${this.options.css}
                 <span class="label label--small">${t('autofill:credentialsImportText')}</span>
             </span>
         </button>
+        <hr />
+        <button class="tooltip__button tooltip__button--secondary js-dismiss">
+            <span class="tooltip__button__text-container">
+                <span class="label label--medium">${t('autofill:dontShowAgain')}</span>
+            </span>
+        </button>
     </div>
 </div>
 `
-
         this.tooltip = this.shadow.querySelector('.tooltip')
 
         this.buttonWrapper = this.shadow.querySelector('.js-promo-wrapper')
+        this.dismissWrapper = this.shadow.querySelector('.js-dismiss')
+
         this.registerClickableButton(this.buttonWrapper, () => {
             callbacks.onStarted()
         })
+        this.registerClickableButton(this.dismissWrapper, () => {
+            callbacks.onDismissed()
+        })
 
         this.init()
         return this

src/UI/DataHTMLTooltip.js

@@ -104,7 +104,7 @@ ${css}
         : ''}
         ${shouldShowManageButton ? `
             <hr />
-            <button id="manage-button" class="tooltip__button tooltip__button--manage" type="button">
+            <button id="manage-button" class="tooltip__button tooltip__button--secondary" type="button">
                 <span class="tooltip__button__text-container">
                     <span class="label label--medium">
                         ${t(manageItemStringIds[config.type] ?? 'autofill:manageSavedItems')}

src/UI/controllers/HTMLTooltipUIController.js

@@ -116,6 +116,9 @@ export class HTMLTooltipUIController extends UIController {
                 .render(this._options.device, {
                     onStarted: () => {
                         this._options.device.credentialsImport.started()
+                    },
+                    onDismissed: () => {
+                        this._options.device.credentialsImport.dismissed()
                     }
                 })
         }

src/UI/styles/autofill-tooltip-styles.css

@@ -215,7 +215,7 @@
     color: #FFFFFF;
 }
 
-.tooltip__button--manage {
+.tooltip__button--secondary {
     font-size: 13px;
     padding: 5px 9px;
     border-radius: 3px;

src/deviceApiCalls/api.json

@@ -148,6 +148,10 @@
       "type": "object",
       "description": "(macOS/Windows) Opens the native password import flow UI"
     },
+    "credentialsImportFlowPermanentlyDismissed": {
+      "type": "object",
+      "description": "(macOS/Windows) User clicked on the password import flow prompt"
+    },
     "emailProtectionGetAlias": {
       "type": "object",
       "description": "Used to prompt email protection autofill on mobile.",