re-use textlink component

duckduckgo · Oct 9, 2023 · 132bdae · 132bdae
1 parent 691ee19
commit 132bdae
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 24 deletions.
diff --git a/build/app/public/js/base.js b/build/app/public/js/base.js
@@ -23757,6 +23757,8 @@
       const $el = ref.current;
       if (!$el)
         return;
+      if (!isAndroid())
+        return;
       $el.classList.add("material-design-ripple");
       const instance2 = MDCRipple.attachTo($el);
       instance2.listen("click", function(e3) {
@@ -23774,6 +23776,7 @@
       "use strict";
       init_hooks_module();
       init_ripple();
+      init_environment_check();
     }
   });
 
@@ -23782,7 +23785,7 @@
     const { onClick } = props;
     const ref = _23(null);
     useRipple({ ref });
-    return /* @__PURE__ */ y("div", { className: "text--center" }, /* @__PURE__ */ y("a", { href: "javascript:void(0)", className: "link-action link-action--text", draggable: false, ref, onClick }, props.children));
+    return /* @__PURE__ */ y("a", { href: "javascript:void(0)", className: "link-action link-action--text", draggable: false, ref, onClick }, props.children);
   }
   var init_text_link = __esm({
     "shared/js/ui/components/text-link.jsx"() {
@@ -24365,7 +24368,7 @@
         window.dispatchEvent(new CustomEvent("open-feedback"));
       }
     }
-    return /* @__PURE__ */ y(k, null, /* @__PURE__ */ y("div", { className: "padding-x border--bottom padding-bottom-half" }, /* @__PURE__ */ y("div", { class: "card-list--bordered" }, props.model.isBroken && /* @__PURE__ */ y(HeaderDisabled, { model: props.model, state }), !props.model.isBroken && /* @__PURE__ */ y(HeaderDefault, { model: props.model, state })), /* @__PURE__ */ y(TextLink, { onClick: onClickTextLink, state }, buttonText)), /* @__PURE__ */ y("div", { className: "padding-spacer" }));
+    return /* @__PURE__ */ y(k, null, /* @__PURE__ */ y("div", { className: "padding-x border--bottom padding-bottom-half" }, /* @__PURE__ */ y("div", { class: "card-list--bordered" }, props.model.isBroken && /* @__PURE__ */ y(HeaderDisabled, { model: props.model, state }), !props.model.isBroken && /* @__PURE__ */ y(HeaderDefault, { model: props.model, state })), /* @__PURE__ */ y("div", { className: "text--center" }, /* @__PURE__ */ y(TextLink, { onClick: onClickTextLink }, buttonText))), /* @__PURE__ */ y("div", { className: "padding-spacer" }));
   }
   function HeaderDefault(props) {
     const text = ns.site("websiteNotWorkingAdvice.title");
@@ -24485,11 +24488,13 @@
     </ul>`;
   }
   function renderReportButton() {
-    return import_nanohtml17.default`<div class="text--center border-light--top">
-        <a href="javascript:void(0)" class="js-site-report-broken link-action link-action--text" draggable="false">
-            ${i18n.t("site:websiteNotWorkingQ.title")}
-        </a>
-    </div>`;
+    function onClickTextLink(e3) {
+      e3.preventDefault();
+      window.dispatchEvent(new CustomEvent("open-feedback"));
+    }
+    let root = import_nanohtml17.default`<div class="text--center border-light--top"></div>`;
+    B(/* @__PURE__ */ y(TextLink, { onClick: onClickTextLink }, ns.site("websiteNotWorkingQ.title")), root);
+    return root;
   }
   function localizePermissions(permissions) {
     if (!Array.isArray(permissions) || permissions.length === 0) {
@@ -24519,6 +24524,8 @@
       init_localize();
       init_top_nav();
       init_protection_header();
+      init_preact_module();
+      init_text_link();
     }
   });
 

diff --git a/integration-tests/DashboardPage.js b/integration-tests/DashboardPage.js
@@ -142,6 +142,7 @@ export class DashboardPage {
 
     static async android(page) {
         const dash = new DashboardPage(page, { name: 'android' })
+        await dash.withMarker();
         await dash.loadPage()
         await dash.withMocks()
         await page.waitForFunction(() => typeof window.__playwright !== 'undefined')
@@ -150,6 +151,7 @@ export class DashboardPage {
 
     static async windows(page) {
         const dash = new DashboardPage(page, { name: 'windows' })
+        await dash.withMarker();
         await dash.withMocks()
         await dash.loadPage()
         await page.waitForFunction(() => typeof window.__playwright !== 'undefined')
@@ -158,6 +160,7 @@ export class DashboardPage {
 
     static async macos(page) {
         const dash = new DashboardPage(page, { name: 'macos' })
+        await dash.withMarker();
         await dash.loadPage()
         await dash.withMocks()
         await page.waitForFunction(() => typeof window.__playwright !== 'undefined')
@@ -170,6 +173,7 @@ export class DashboardPage {
      */
     static async browser(page) {
         const dash = new DashboardPage(page, { name: 'browser' })
+        await dash.withMarker();
         await dash.withMocks()
         await dash.loadPage()
         await page.waitForFunction(() => typeof window.__playwright !== 'undefined')
@@ -178,17 +182,23 @@ export class DashboardPage {
 
     static async ios(page) {
         const dash = new DashboardPage(page, { name: 'ios' })
+        await dash.withMarker();
         await dash.loadPage()
         await dash.withMocks()
         await page.waitForFunction(() => typeof window.__playwright !== 'undefined')
         return dash
     }
 
+    async withMarker() {
+        await this.page.addInitScript(() => {
+            return window.__ddg_integration_test = true
+        })
+    }
+
     /**
      * @returns {Promise<DashboardPage>}
      */
     async withMocks() {
-        await this.page.addInitScript(() => (window.__ddg_integration_test = true))
         await this.mocks.install()
         return this
     }

diff --git a/shared/js/ui/components/text-link.jsx b/shared/js/ui/components/text-link.jsx
@@ -6,8 +6,7 @@ import { useRipple } from '../hooks/useRipple'
 
 /**
  * @param {object} props
- * @param {import("../templates/protection-header").UIState} props.state
- * @param {import('preact').ComponentChildren} props.children
+ * @param {import('preact').ComponentChildren} [props.children]
  * @param {() => void} props.onClick
  */
 export function TextLink(props) {
@@ -18,10 +17,8 @@ export function TextLink(props) {
     useRipple({ ref })
 
     return (
-        <div className="text--center">
-            <a href="javascript:void(0)" className="link-action link-action--text" draggable={false} ref={ref} onClick={onClick}>
-                {props.children}
-            </a>
-        </div>
+        <a href="javascript:void(0)" className="link-action link-action--text" draggable={false} ref={ref} onClick={onClick}>
+            {props.children}
+        </a>
     )
 }
diff --git a/shared/js/ui/hooks/useRipple.js b/shared/js/ui/hooks/useRipple.js
@@ -1,5 +1,6 @@
 import { useLayoutEffect } from 'preact/hooks'
 import { MDCRipple } from '@material/ripple'
+import { isAndroid } from '../environment-check'
 
 /**
  * @param {object} params
@@ -10,6 +11,7 @@ export function useRipple(params) {
     useLayoutEffect(() => {
         const $el = ref.current
         if (!$el) return
+        if (!isAndroid()) return;
         $el.classList.add('material-design-ripple')
         const instance = MDCRipple.attachTo($el)
         instance.listen('click', function (e) {

diff --git a/shared/js/ui/templates/protection-header.js b/shared/js/ui/templates/protection-header.js
@@ -100,9 +100,11 @@ export function ProtectionHeader(props) {
                     {props.model.isBroken && <HeaderDisabled model={props.model} state={state} />}
                     {!props.model.isBroken && <HeaderDefault model={props.model} state={state} />}
                 </div>
-                <TextLink onClick={onClickTextLink} state={state}>
-                    {buttonText}
-                </TextLink>
+                <div className="text--center">
+                    <TextLink onClick={onClickTextLink}>
+                        {buttonText}
+                    </TextLink>
+                </div>
             </div>
             <div className="padding-spacer"></div>
         </>

diff --git a/shared/js/ui/templates/site.js b/shared/js/ui/templates/site.js
@@ -1,7 +1,10 @@
 import html from 'nanohtml'
-import { i18n } from '../base/localize.js'
+import { i18n, ns } from '../base/localize.js'
 import { topNav } from './shared/top-nav'
 import { protectionDefault, protectionHeader } from './protection-header'
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h, render } from 'preact'
+import { TextLink } from '../components/text-link'
 
 /** @this {{model: import('../models/site.js').PublicSiteModel}} */
 export default function () {
@@ -116,11 +119,13 @@ function renderManagePermissions(model) {
 }
 
 function renderReportButton() {
-    return html`<div class="text--center border-light--top">
-        <a href="javascript:void(0)" class="js-site-report-broken link-action link-action--text" draggable="false">
-            ${i18n.t('site:websiteNotWorkingQ.title')}
-        </a>
-    </div>`
+    function onClickTextLink(e) {
+        e.preventDefault()
+        window.dispatchEvent(new CustomEvent('open-feedback'))
+    }
+    let root = html`<div class="text--center border-light--top"></div>`
+    render(<TextLink onClick={onClickTextLink}>{ns.site('websiteNotWorkingQ.title')}</TextLink>, root);
+    return root;
 }
 
 /**