Improved mobile support. Fixed https://github.com/libredirect/browser_extension/issues/956

2024-08-02 16:27:54 +03:00 · 2024-08-02 16:27:54 +03:00 · a9ecaf4ac0
parent 15db7737e7
commit a9ecaf4ac0
8 changed files with 276 additions and 222 deletions
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
    "start": "web-ext run",
    "nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
    "start_ar": "web-ext run --firefox=/home/esmail/software/firefox_ar/firefox",
-    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
+    "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.firefox --adb-remove-old-artifacts",
    "build": "web-ext build",
    "test": "web-ext lint",
    "html": "rollup -c --config-popup && rollup -c --config-options"
--- a/src/pages/background/background.js
+++ b/src/pages/background/background.js
@ -91,221 +91,233 @@ browser.tabs.onRemoved.addListener(tabId => {
  }
 })

-browser.commands.onCommand.addListener(async command => {
-  browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-    const url = new URL(tabs[0].url)
-    switch (command) {
-      case "switchInstance": {
-        const newUrl = await servicesHelper.switchInstance(url)
-        if (newUrl) browser.tabs.update({ url: newUrl })
-        break
-      }
-      case "copyRaw":
-        servicesHelper.copyRaw(url)
-        break
-      case "redirect":
-        browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-          if (tabs[0].url) {
-            const url = new URL(tabs[0].url)
-            const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
-            if (newUrl) {
-              browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
-                tabIdRedirects[tabs[0].id] = true
-              })
-            }
-          }
-        })
-        break
-      case "reverse":
-        browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-          if (tabs[0].url) {
-            const url = new URL(tabs[0].url)
-            const newUrl = await servicesHelper.reverse(url)
-            if (newUrl) {
-              browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
-                tabIdRedirects[tabs[0].id] = false
-              })
-            }
-          }
-        })
-        break
-    }
-  })
-})
-
-browser.contextMenus.create({
-  id: "settingsTab",
-  title: browser.i18n.getMessage("settings"),
-  contexts: ["browser_action"],
-})
-browser.contextMenus.create({
-  id: "switchInstanceTab",
-  title: browser.i18n.getMessage("switchInstance"),
-  contexts: ["browser_action"],
-})
-browser.contextMenus.create({ id: "copyReverseTab", title: "Copy Original", contexts: ["browser_action"] })
-browser.contextMenus.create({ id: "redirectTab", title: "Redirect", contexts: ["browser_action"] })
-browser.contextMenus.create({ id: "reverseTab", title: "Redirect To Original", contexts: ["browser_action"] })
-
-browser.contextMenus.create({ id: "redirectLink", title: "Redirect", contexts: ["link"] })
-browser.contextMenus.create({ id: "redirectLinkInNewTab", title: "Redirect In New Tab", contexts: ["link"] })
-browser.contextMenus.create({ id: "reverseLink", title: "Redirect To Original", contexts: ["link"] })
-browser.contextMenus.create({ id: "reverseLinkInNewTab", title: "Redirect To Original In New Tab", contexts: ["link"] })
-browser.contextMenus.create({ id: "copyReverseLink", title: "Copy Original", contexts: ["link"] })
-browser.contextMenus.create({ id: "bypassLink", title: "Bypass", contexts: ["link"] })
-browser.contextMenus.create({ id: "bypassLinkInNewTab", title: "Bypass In New Tab", contexts: ["link"] })
-
-if (!isChrome) {
-  browser.contextMenus.create({ id: "redirectBookmark", title: "Redirect", contexts: ["bookmark"] })
-  browser.contextMenus.create({ id: "redirectBookmarkInNewTab", title: "Redirect In New Tab", contexts: ["bookmark"] })
-  browser.contextMenus.create({ id: "reverseBookmark", title: "Redirect To Original", contexts: ["bookmark"] })
-  browser.contextMenus.create({
-    id: "reverseBookmarkInNewTab",
-    title: "Redirect To Original In New Tab",
-    contexts: ["bookmark"],
-  })
-  browser.contextMenus.create({ id: "copyReverseBookmark", title: "Copy Original", contexts: ["bookmark"] })
-  browser.contextMenus.create({ id: "bypassBookmark", title: "Bypass", contexts: ["bookmark"] })
-  browser.contextMenus.create({ id: "bypassBookmarkInNewTab", title: "Bypass In New Tab", contexts: ["bookmark"] })
-}
-
-browser.contextMenus.onClicked.addListener(async info => {
-  switch (info.menuItemId) {
-    case "switchInstanceTab": {
-      const url = new URL(info.pageUrl)
-      const newUrl = await servicesHelper.switchInstance(url)
-      if (newUrl) browser.tabs.update({ url: newUrl })
-      return
-    }
-    case "settingsTab":
-      browser.runtime.openOptionsPage()
-      return
-    case "copyReverseTab":
+browser.runtime.getPlatformInfo(r => {
+  if (r.os != "fuchsia" && r.os != "ios" && r.os != "android") {
+    browser.commands.onCommand.addListener(async command => {
      browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-        if (tabs[0].url) {
-          const url = new URL(tabs[0].url)
-          servicesHelper.copyRaw(url)
-        }
-      })
-      return
-    case "reverseTab":
-      browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-        if (tabs[0].url) {
-          const url = new URL(tabs[0].url)
-          const newUrl = await servicesHelper.reverse(url)
-          if (newUrl) {
-            browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
-              tabIdRedirects[tabs[0].id] = false
+        const url = new URL(tabs[0].url)
+        switch (command) {
+          case "switchInstance": {
+            const newUrl = await servicesHelper.switchInstance(url)
+            if (newUrl) browser.tabs.update({ url: newUrl })
+            break
+          }
+          case "copyRaw":
+            servicesHelper.copyRaw(url)
+            break
+          case "redirect":
+            browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+              if (tabs[0].url) {
+                const url = new URL(tabs[0].url)
+                const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
+                if (newUrl) {
+                  browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
+                    tabIdRedirects[tabs[0].id] = true
+                  })
+                }
+              }
            })
-          }
+            break
+          case "reverse":
+            browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+              if (tabs[0].url) {
+                const url = new URL(tabs[0].url)
+                const newUrl = await servicesHelper.reverse(url)
+                if (newUrl) {
+                  browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
+                    tabIdRedirects[tabs[0].id] = false
+                  })
+                }
+              }
+            })
+            break
        }
      })
-      return
-    case "redirectTab":
-      browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
-        if (tabs[0].url) {
-          const url = new URL(tabs[0].url)
+    })
+
+    browser.contextMenus.create({
+      id: "settingsTab",
+      title: browser.i18n.getMessage("settings"),
+      contexts: ["browser_action"],
+    })
+    browser.contextMenus.create({
+      id: "switchInstanceTab",
+      title: browser.i18n.getMessage("switchInstance"),
+      contexts: ["browser_action"],
+    })
+    browser.contextMenus.create({ id: "copyReverseTab", title: "Copy Original", contexts: ["browser_action"] })
+    browser.contextMenus.create({ id: "redirectTab", title: "Redirect", contexts: ["browser_action"] })
+    browser.contextMenus.create({ id: "reverseTab", title: "Redirect To Original", contexts: ["browser_action"] })
+
+    browser.contextMenus.create({ id: "redirectLink", title: "Redirect", contexts: ["link"] })
+    browser.contextMenus.create({ id: "redirectLinkInNewTab", title: "Redirect In New Tab", contexts: ["link"] })
+    browser.contextMenus.create({ id: "reverseLink", title: "Redirect To Original", contexts: ["link"] })
+    browser.contextMenus.create({
+      id: "reverseLinkInNewTab",
+      title: "Redirect To Original In New Tab",
+      contexts: ["link"],
+    })
+    browser.contextMenus.create({ id: "copyReverseLink", title: "Copy Original", contexts: ["link"] })
+    browser.contextMenus.create({ id: "bypassLink", title: "Bypass", contexts: ["link"] })
+    browser.contextMenus.create({ id: "bypassLinkInNewTab", title: "Bypass In New Tab", contexts: ["link"] })
+
+    if (!isChrome) {
+      browser.contextMenus.create({ id: "redirectBookmark", title: "Redirect", contexts: ["bookmark"] })
+      browser.contextMenus.create({
+        id: "redirectBookmarkInNewTab",
+        title: "Redirect In New Tab",
+        contexts: ["bookmark"],
+      })
+      browser.contextMenus.create({ id: "reverseBookmark", title: "Redirect To Original", contexts: ["bookmark"] })
+      browser.contextMenus.create({
+        id: "reverseBookmarkInNewTab",
+        title: "Redirect To Original In New Tab",
+        contexts: ["bookmark"],
+      })
+      browser.contextMenus.create({ id: "copyReverseBookmark", title: "Copy Original", contexts: ["bookmark"] })
+      browser.contextMenus.create({ id: "bypassBookmark", title: "Bypass", contexts: ["bookmark"] })
+      browser.contextMenus.create({ id: "bypassBookmarkInNewTab", title: "Bypass In New Tab", contexts: ["bookmark"] })
+    }
+
+    browser.contextMenus.onClicked.addListener(async info => {
+      switch (info.menuItemId) {
+        case "switchInstanceTab": {
+          const url = new URL(info.pageUrl)
+          const newUrl = await servicesHelper.switchInstance(url)
+          if (newUrl) browser.tabs.update({ url: newUrl })
+          return
+        }
+        case "settingsTab":
+          browser.runtime.openOptionsPage()
+          return
+        case "copyReverseTab":
+          browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+            if (tabs[0].url) {
+              const url = new URL(tabs[0].url)
+              servicesHelper.copyRaw(url)
+            }
+          })
+          return
+        case "reverseTab":
+          browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+            if (tabs[0].url) {
+              const url = new URL(tabs[0].url)
+              const newUrl = await servicesHelper.reverse(url)
+              if (newUrl) {
+                browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
+                  tabIdRedirects[tabs[0].id] = false
+                })
+              }
+            }
+          })
+          return
+        case "redirectTab":
+          browser.tabs.query({ active: true, currentWindow: true }, async tabs => {
+            if (tabs[0].url) {
+              const url = new URL(tabs[0].url)
+              const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
+              if (newUrl) {
+                browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
+                  tabIdRedirects[tabs[0].id] = true
+                })
+              }
+            }
+          })
+          return
+        case "copyReverseLink": {
+          const url = new URL(info.linkUrl)
+          await servicesHelper.copyRaw(url)
+          return
+        }
+        case "redirectLink":
+        case "redirectLinkInNewTab": {
+          const url = new URL(info.linkUrl)
          const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
          if (newUrl) {
-            browser.tabs.update(tabs[0].id, { url: newUrl }, () => {
-              tabIdRedirects[tabs[0].id] = true
-            })
+            if (info.menuItemId == "redirectLink") browser.tabs.update({ url: newUrl })
+            else browser.tabs.create({ url: newUrl })
          }
+          return
        }
-      })
-      return
-    case "copyReverseLink": {
-      const url = new URL(info.linkUrl)
-      await servicesHelper.copyRaw(url)
-      return
-    }
-    case "redirectLink":
-    case "redirectLinkInNewTab": {
-      const url = new URL(info.linkUrl)
-      const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
-      if (newUrl) {
-        if (info.menuItemId == "redirectLink") browser.tabs.update({ url: newUrl })
-        else browser.tabs.create({ url: newUrl })
-      }
-      return
-    }
-    case "reverseLink":
-    case "reverseLinkInNewTab": {
-      const url = new URL(info.linkUrl)
-      const newUrl = await servicesHelper.reverse(url)
-      if (newUrl) {
-        if (info.menuItemId == "reverseLink") {
-          browser.tabs.update({ url: newUrl }, tab => {
-            tabIdRedirects[tab.id] = false
-          })
-        } else {
-          browser.tabs.create({ url: newUrl }, tab => {
-            tabIdRedirects[tab.id] = false
-          })
+        case "reverseLink":
+        case "reverseLinkInNewTab": {
+          const url = new URL(info.linkUrl)
+          const newUrl = await servicesHelper.reverse(url)
+          if (newUrl) {
+            if (info.menuItemId == "reverseLink") {
+              browser.tabs.update({ url: newUrl }, tab => {
+                tabIdRedirects[tab.id] = false
+              })
+            } else {
+              browser.tabs.create({ url: newUrl }, tab => {
+                tabIdRedirects[tab.id] = false
+              })
+            }
+          }
+          return
        }
-      }
-      return
-    }
-    case "bypassLink":
-    case "bypassLinkInNewTab": {
-      const url = new URL(info.linkUrl)
-      if (info.menuItemId == "bypassLink") {
-        browser.tabs.update({ url: url.href }, tab => {
-          tabIdRedirects[tab.id] = false
-        })
-      } else {
-        browser.tabs.create({ url: url.href }, tab => {
-          tabIdRedirects[tab.id] = false
-        })
-      }
-      return
-    }
-    case "copyReverseBookmark":
-      browser.bookmarks.get(info.bookmarkId, bookmarks => {
-        const url = new URL(bookmarks[0].url)
-        servicesHelper.copyRaw(url)
-      })
-      return
-    case "redirectBookmark":
-    case "redirectBookmarkInNewTab":
-      browser.bookmarks.get(info.bookmarkId, bookmarks => {
-        const url = new URL(bookmarks[0].url)
-        const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
-        if (newUrl) {
-          if (info.menuItemId == "redirectBookmark") browser.tabs.update({ url: newUrl })
-          else browser.tabs.create({ url: newUrl })
-        }
-      })
-      return
-    case "reverseBookmark":
-    case "reverseBookmarkInNewTab":
-      browser.bookmarks.get(info.bookmarkId, async bookmarks => {
-        const url = new URL(bookmarks[0].url)
-        const newUrl = await servicesHelper.reverse(url)
-        if (newUrl) {
-          if (info.menuItemId == "reverseBookmark") {
-            browser.tabs.update({ url: newUrl }, tab => {
+        case "bypassLink":
+        case "bypassLinkInNewTab": {
+          const url = new URL(info.linkUrl)
+          if (info.menuItemId == "bypassLink") {
+            browser.tabs.update({ url: url.href }, tab => {
              tabIdRedirects[tab.id] = false
            })
          } else {
-            browser.tabs.create({ url: newUrl }, tab => {
+            browser.tabs.create({ url: url.href }, tab => {
              tabIdRedirects[tab.id] = false
            })
          }
+          return
        }
-      })
-      return
-    case "bypassBookmark":
-    case "bypassBookmarkInNewTab":
-      browser.bookmarks.get(info.bookmarkId, async bookmarks => {
-        const url = new URL(bookmarks[0].url)
-        if (info.menuItemId == "bypassBookmark") {
-          browser.tabs.update({ url: url.href }, tab => (tabIdRedirects[tab.id] = false))
-        } else {
-          browser.tabs.create({ url: url.href }, tab => (tabIdRedirects[tab.id] = false))
-        }
-        return
-      })
+        case "copyReverseBookmark":
+          browser.bookmarks.get(info.bookmarkId, bookmarks => {
+            const url = new URL(bookmarks[0].url)
+            servicesHelper.copyRaw(url)
+          })
+          return
+        case "redirectBookmark":
+        case "redirectBookmarkInNewTab":
+          browser.bookmarks.get(info.bookmarkId, bookmarks => {
+            const url = new URL(bookmarks[0].url)
+            const newUrl = servicesHelper.redirect(url, "main_frame", null, true)
+            if (newUrl) {
+              if (info.menuItemId == "redirectBookmark") browser.tabs.update({ url: newUrl })
+              else browser.tabs.create({ url: newUrl })
+            }
+          })
+          return
+        case "reverseBookmark":
+        case "reverseBookmarkInNewTab":
+          browser.bookmarks.get(info.bookmarkId, async bookmarks => {
+            const url = new URL(bookmarks[0].url)
+            const newUrl = await servicesHelper.reverse(url)
+            if (newUrl) {
+              if (info.menuItemId == "reverseBookmark") {
+                browser.tabs.update({ url: newUrl }, tab => {
+                  tabIdRedirects[tab.id] = false
+                })
+              } else {
+                browser.tabs.create({ url: newUrl }, tab => {
+                  tabIdRedirects[tab.id] = false
+                })
+              }
+            }
+          })
+          return
+        case "bypassBookmark":
+        case "bypassBookmarkInNewTab":
+          browser.bookmarks.get(info.bookmarkId, async bookmarks => {
+            const url = new URL(bookmarks[0].url)
+            if (info.menuItemId == "bypassBookmark") {
+              browser.tabs.update({ url: url.href }, tab => (tabIdRedirects[tab.id] = false))
+            } else {
+              browser.tabs.create({ url: url.href }, tab => (tabIdRedirects[tab.id] = false))
+            }
+            return
+          })
+      }
+    })
  }
 })

--- a/src/pages/components/Checkbox.svelte
+++ b/src/pages/components/Checkbox.svelte
@ -1,7 +1,6 @@
 <script>
  export let checked
  export let onChange
-  console.log(document.body.dir)
 </script>

 <input class={document.body.dir} {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
--- a/src/pages/options_src/General/General.svelte
+++ b/src/pages/options_src/General/General.svelte
@ -14,13 +14,30 @@
  const unsubscribe = options.subscribe(val => (_options = val))
  onDestroy(unsubscribe)

+  let disableBookmarks = null
+  browser.runtime.getPlatformInfo(r => {
+    switch (r.os) {
+      case "fuchsia":
+      case "ios":
+      case "android":
+        disableBookmarks = true
+        break
+      default:
+        disableBookmarks = false
+    }
+    if (!disableBookmarks) {
+      browser.permissions.contains({ permissions: ["bookmarks"] }, r => (bookmarksPermission = r))
+    }
+  })
+
  let bookmarksPermission
-  browser.permissions.contains({ permissions: ["bookmarks"] }, r => (bookmarksPermission = r))
-  $: if (bookmarksPermission) {
-    browser.permissions.request({ permissions: ["bookmarks"] }, r => (bookmarksPermission = r))
-  } else {
-    browser.permissions.remove({ permissions: ["bookmarks"] })
-    bookmarksPermission = false
+  $: if (disableBookmarks !== null && disableBookmarks === false) {
+    if (bookmarksPermission) {
+      browser.permissions.request({ permissions: ["bookmarks"] }, r => (bookmarksPermission = r))
+    } else {
+      browser.permissions.remove({ permissions: ["bookmarks"] })
+      bookmarksPermission = false
+    }
  }
 </script>

@ -68,10 +85,12 @@
    />
  </Row>

-  <Row>
-    <Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label>
-    <Checkbox bind:checked={bookmarksPermission} />
-  </Row>
+  {#if disableBookmarks === false}
+    <Row>
+      <Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label>
+      <Checkbox bind:checked={bookmarksPermission} />
+    </Row>
+  {/if}

  <Exceptions />

--- a/src/pages/options_src/Services/Instances.svelte
+++ b/src/pages/options_src/Services/Instances.svelte
@ -59,7 +59,6 @@
  async function pingInstances() {
    pingCache = {}
    for (const instance of allInstances) {
-      console.log("pinging...", instance)
      pingCache[instance] = { color: "lightblue", value: "pinging..." }
      const time = await utils.ping(instance)
      pingCache[instance] = colorTime(time)
--- a/src/pages/options_src/Services/Services.svelte
+++ b/src/pages/options_src/Services/Services.svelte
@ -32,8 +32,9 @@
 <div>
  <Row>
    <Label>
-      Service:
-      <a href={serviceConf.url} target="_blank" rel="noopener noreferrer">{serviceConf.url}</a>
+      <a href={serviceConf.url} style="text-decoration: underline;" target="_blank" rel="noopener noreferrer">
+        {browser.i18n.getMessage("service") || "Service"}
+      </a>
    </Label>
    <div dir="ltr">
      <SvelteSelect
@ -91,9 +92,8 @@

    <Row>
      <Label>
-        {browser.i18n.getMessage("frontend") || "Frontend"}:
-        <a href={frontendWebsite} target="_blank" rel="noopener noreferrer">
-          {frontendWebsite}
+        <a href={frontendWebsite} style="text-decoration: underline;" target="_blank" rel="noopener noreferrer">
+          {browser.i18n.getMessage("frontend") || "Frontend"}
        </a>
      </Label>
      <div dir="ltr">
--- a/src/pages/popup_src/Buttons.svelte
+++ b/src/pages/popup_src/Buttons.svelte
@ -41,7 +41,14 @@

 <div class={document.body.dir}>
  {#if redirect}
-    <Row class="interactive" on:click={() => browser.runtime.sendMessage("redirectTab")}>
+    <Row
+      class="interactive"
+      on:click={() => {
+        browser.runtime.sendMessage("redirectTab", () => {
+          window.close()
+        })
+      }}
+    >
      <Label>{browser.i18n.getMessage("redirect") || "Redirect"}</Label>
      <RedirectIcon />
    </Row>
@ -50,7 +57,10 @@
  {#if switchInstance}
    <Row
      class="interactive"
-      on:click={async () => browser.tabs.update({ url: await servicesHelper.switchInstance(url) })}
+      on:click={async () =>
+        browser.tabs.update({ url: await servicesHelper.switchInstance(url) }, () => {
+          window.close()
+        })}
    >
      <Label>{browser.i18n.getMessage("switchInstance") || "Switch Instance"}</Label>
      <SwitchInstanceIcon />
@ -62,7 +72,13 @@
      <Label>{browser.i18n.getMessage("copyOriginal") || "Copy Original"}</Label>
      <CopyIcon />
    </Row>
-    <Row class="interactive" on:click={() => browser.runtime.sendMessage("reverseTab")}>
+    <Row
+      class="interactive"
+      on:click={() =>
+        browser.runtime.sendMessage("reverseTab", () => {
+          window.close()
+        })}
+    >
      <Label>{browser.i18n.getMessage("redirectToOriginal" || "Redirect to Original")}</Label>
      <RedirectToOriginalIcon />
    </Row>
@ -85,7 +101,13 @@

  <hr />

-  <Row class="interactive" on:click={() => window.open(browser.runtime.getURL("pages/options/index.html"), "_blank")}>
+  <Row
+    class="interactive"
+    on:click={() =>
+      browser.tabs.create({ url: browser.runtime.getURL("pages/options/index.html") }, () => {
+        window.close()
+      })}
+  >
    <Label>{browser.i18n.getMessage("settings")}</Label>
    <SettingsIcon />
  </Row>
--- a/src/pages/popup_src/components/Switch.svelte
+++ b/src/pages/popup_src/components/Switch.svelte
@ -28,7 +28,10 @@
  <div
    class="interactive"
    on:keydown={null}
-    on:click={() => window.open(browser.runtime.getURL(_config.services[serviceKey].url), "_blank")}
+    on:click={() =>
+      browser.tabs.create({ url: browser.runtime.getURL(_config.services[serviceKey].url) }, () => {
+        window.close()
+      })}
  >
    <ServiceIcon details={{ value: serviceKey, label: _config.services[serviceKey].name }} />
    <Label>{_config.services[serviceKey].name}</Label>