HelpHoverable template added, for use as help tooltips

Signed-off-by: Fenn-CS <[email protected]>

package.json

@@ -28,20 +28,20 @@
     "@testing-library/svelte": "^3.0.3",
     "babel-jest": "^26.6.3",
     "babel-loader": "8.2.2",
-    "eslint": "7.16.0",
+    "eslint": "7.17.0",
     "eslint-config-airbnb-base": "14.2.1",
     "eslint-config-prettier": "6.15.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jest": "24.1.3",
-    "eslint-plugin-prettier": "3.3.0",
+    "eslint-plugin-prettier": "3.3.1",
     "eslint-plugin-svelte3": "3.0.0",
     "jest": "^26.6.3",
     "lerna": "3.22.1",
     "npm-run-all": "4.1.5",
     "page": "1.11.6",
     "prettier": "^2.2.1",
     "prettier-plugin-svelte": "^1.4.2",
-    "rollup": "2.35.1",
+    "rollup": "2.36.1",
     "rollup-plugin-livereload": "2.0.0",
     "rollup-plugin-postcss": "3.1.8",
     "rollup-plugin-svelte": "6.0.1",
@@ -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,9 @@ export default {
       __VERSION__: execSync("git rev-list HEAD --max-count=1")
         .toString()
         .trim(),
+      "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

scripts/build-glean-metadata.py

@@ -43,6 +43,9 @@ def _serialize_sets(obj):
 
     app_data = dict(app.repo, pings=[], metrics=[])
 
+    app_id = app.app_id
+    app_id_snakecase = stringcase.snakecase(app_id)
+
     # metrics data
     metrics = app.get_metrics()
     metric_pings = dict(data=[])
@@ -62,12 +65,28 @@ def _serialize_sets(obj):
                 "description": metric.description,
             }
         )
+
+        stable_ping_table_names = []
+        for ping in metric.definition["send_in_pings"]:
+            stable_ping_table_names.append(
+                [ping, f"{app_id_snakecase}.{stringcase.snakecase(ping)}"]
+            )
+
+        metric_type = metric.definition["type"]
+        metric_name_snakecase = stringcase.snakecase(metric.identifier)
+        bigquery_names = dict(
+            stable_ping_table_names=stable_ping_table_names,
+            metric_type=metric_type,
+            metric_table_name=f"metrics.{metric_type}.{metric_name_snakecase}",
+        )
+
         open(os.path.join(app_metrics_dir, f"{metric.identifier}.json"), "w").write(
             json.dumps(
                 dict(
                     metric.definition,
                     name=metric.identifier,
                     history=metric.definition_history,
+                    bigquery_names=bigquery_names,
                 ),
                 default=_serialize_sets,
             )
@@ -79,8 +98,6 @@ def _serialize_sets(obj):
         )
 
         # write table description
-        app_id = app.app_id
-        app_id_snakecase = stringcase.snakecase(app_id)
         ping_name_snakecase = stringcase.snakecase(ping.identifier)
         stable_ping_table_name = f"{app_id_snakecase}.{ping_name_snakecase}"
         live_ping_table_name = f"{app_id_snakecase}_live_v1.{ping_name_snakecase}"

src/__snapshots__/storyshots.test.js.snap

@@ -645,6 +645,7 @@ exports[`Storyshots ItemList Default 1`] = `
     </div>
   </div>
   
+  
 </section>
 `;
 
@@ -681,7 +682,7 @@ exports[`Storyshots Pagination Default 1`] = `
   of
   
     <code>
-      21
+      11
     </code>
     
   (
@@ -692,13 +693,13 @@ exports[`Storyshots Pagination Default 1`] = `
   -
   
     <code>
-      8
+      20
     </code>
     
   on
   
     <code>
-      204
+      210
     </code>
     
   items)
@@ -761,7 +762,7 @@ exports[`Storyshots Pagination Default 1`] = `
         <div
           class="w-12 md:flex justify-center items-center hidden cursor-pointer "
         >
-          21
+          11
            
         </div>
       </div>
@@ -788,6 +789,7 @@ exports[`Storyshots Pagination Default 1`] = `
       </div>
     </div>
   </div>
+  
 </section>
 `;
 
@@ -796,7 +798,7 @@ exports[`Storyshots Pill Deprecated 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="inline-block border rounded-full text-xs py-1 px-3 w-15 text-white"
+    class="pill svelte-1ohi0f1"
     style="background-color: rgb(74, 85, 104);"
   >
     Deprecated

src/components/HelpHoverable.svelte

@@ -0,0 +1,23 @@
+<script>
+  import tippy from "sveltejs-tippy";
+
+  export let props = {
+    content: "<span class='tooltip'>Tooltip Info</span>",
+    allowHTML: true,
+    placement: "top",
+  };
+  export let link;
+</script>
+
+<style>
+  .main {
+    @apply inline-block;
+    @apply text-gray-500;
+  }
+</style>
+
+<div class="main">
+  <a href={link} use:tippy={props}>
+    <slot />
+  </a>
+</div>