Add tooltips for contextual help in ping and metric fields (fixes #293)…

… (#300)

Co-authored-by: William Lachance <[email protected]>

package.json

@@ -61,6 +61,7 @@
     "postcss-load-config": "^3.0.0",
     "sirv-cli": "1.0.10",
     "svelte-preprocess": "^4.6.1",
+    "sveltejs-tippy": "^3.0.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
   }
 }

rollup.config.js

@@ -1,5 +1,6 @@
 import replace from "@rollup/plugin-replace";
 import svelte from "rollup-plugin-svelte";
+import postcss from "rollup-plugin-postcss";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import livereload from "rollup-plugin-livereload";
@@ -39,6 +40,9 @@ export default {
     file: "public/build/bundle.js",
   },
   plugins: [
+    postcss({
+      plugins: [],
+    }),
     svelte({
       // enable run-time checks when not in production
       dev: !production,
@@ -56,6 +60,10 @@ export default {
       __VERSION__: execSync("git rev-list HEAD --max-count=1")
         .toString()
         .trim(),
+      // workaround the way sveltejs-tippy imports tippy: https://github.com/mdauner/sveltejs-tippy/issues/117
+      "process.env.NODE_ENV": JSON.stringify(
+        production ? "production" : "development"
+      ),
     }),
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In

src/components/HelpHoverable.svelte

@@ -0,0 +1,25 @@
+<script>
+  import tippy from "sveltejs-tippy";
+  import InfoIcon from "./icons/InfoIcon.svelte";
+
+  export let content;
+  export let link;
+  let props = {
+    content,
+    allowHTML: true,
+    placement: "top",
+  };
+</script>
+
+<style>
+  .main {
+    @apply inline-block;
+    @apply text-gray-500;
+  }
+</style>
+
+<div class="main">
+  <a href={link} use:tippy={props}>
+    <InfoIcon />
+  </a>
+</div>

src/components/icons/InfoIcon.svelte

@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  class="w-5 inline-block">
+  <path
+    fill-rule="evenodd"
+    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+    clip-rule="evenodd" />
+</svg>

src/data/help.js

@@ -0,0 +1,17 @@
+export default {
+  bugs: {
+    text:
+      "Required. A list of bugs (e.g. Bugzilla or GitHub) that are relevant to this metric. For example, bugs that track its original implementation or later changes to it.",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+  },
+  lifetime: {
+    text:
+      "Defines the lifetime of the metric. Different lifetimes affect when the metrics value is reset.",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+  },
+  send_in_pings: {
+    text:
+      "Defines which pings the metric should be sent on. If not specified, the metric is sent on the 'default ping', which is the events ping for events and the metrics ping for everything else. Most metrics don't need to specify this unless they are sent on custom pings.",
+    link: "https://mozilla.github.io/glean/book/user/metric-parameters.html",
+  },
+};

src/pages/MetricDetail.svelte

@@ -1,9 +1,10 @@
 <script>
   import { getMetricData } from "../state/api";
   import { getMetricBigQueryURL } from "../state/urls";
-
   import Markdown from "../components/Markdown.svelte";
   import NotFound from "../components/NotFound.svelte";
+  import HelpHoverable from "../components/HelpHoverable.svelte";
+  import helpText from "../data/help";
 
   export let params;
   let metricName = params.metric.replaceAll("-", ".");
@@ -76,7 +77,10 @@
   </p>
   <table class="metrics-table">
     <tr>
-      <td>Relevant Bugs</td>
+      <td>
+        Relevant Bugs
+        <HelpHoverable content={helpText.bugs.text} link={helpText.bugs.link} />
+      </td>
       <td>
         {#each metric.bugs as bug}
           <a
@@ -89,7 +93,12 @@
       </td>
     </tr>
     <tr>
-      <td>Send In Pings</td>
+      <td>
+        Send In Pings
+        <HelpHoverable
+          content={helpText.send_in_pings.text}
+          link={helpText.send_in_pings.link} />
+      </td>
       <td>
         {#each metric.send_in_pings as name}
           <a href={`/apps/${params.app}/pings/${name}`}> {name} </a>
@@ -104,6 +113,9 @@
             target="_blank">
             Lifetime
           </a>
+          <HelpHoverable
+            content={helpText.lifetime.text}
+            link={helpText.lifetime.link} />
         </td>
         <td>{metric.lifetime}</td>
       </tr>