feat: plugin config param tooltips

.cspell.json

@@ -8,5 +8,5 @@
   "dictionaries": ["typescript", "node", "software-terms"],
   "import": ["@cspell/dict-typescript/cspell-ext.json", "@cspell/dict-node/cspell-ext.json", "@cspell/dict-software-terms"],
   "ignoreRegExpList": ["[0-9a-fA-F]{6}"],
-  "ignoreWords": ["ubiquibot", "Supabase", "supabase", "SUPABASE", "sonarjs", "mischeck"]
+  "ignoreWords": ["ubiquibot", "Supabase", "supabase", "SUPABASE", "sonarjs", "mischeck", "tooltiptext"]
 }

static/manifest-gui.css

@@ -178,6 +178,32 @@ button#add:active::before {
   margin: 0 0 16px;
 }
 
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: help;
+  padding-left: 8px;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 200px;
+  background-color: #101010;
+  color: #fff;
+  text-align: center;
+  border-radius: 4px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
 .picker-select {
   width: 100%;
   padding: 8px 16px;

static/scripts/decode-manifest.ts

@@ -1,5 +1,22 @@
 import { Manifest, ManifestPreDecode } from "../types/plugins";
 
+function injectDescriptionIntoProperties(properties: ManifestPreDecode["configuration"]["properties"]) {
+  return Object.fromEntries(
+    Object.entries(properties).map(([key, value]) => {
+      const newValue = {
+        ...value,
+        description: "This is a placeholder description that'll be replaced once the PRs are merged for the plugins",
+      };
+
+      if (value.properties) {
+        newValue.properties = injectDescriptionIntoProperties(value.properties);
+      }
+
+      return [key, newValue];
+    })
+  );
+}
+
 export class ManifestDecoder {
   constructor() {}
 
@@ -8,6 +25,8 @@ export class ManifestDecoder {
       return null;
     }
 
+    manifest.configuration.properties = injectDescriptionIntoProperties(manifest.configuration.properties);
+
     const decodedManifest: Manifest = {
       name: manifest.name,
       description: manifest.description,

static/types/plugins.ts

@@ -12,6 +12,7 @@ export interface Uses {
 }
 
 export interface ManifestPreDecode extends Manifest {
+  manifest: Manifest;
   actionUrl?: string;
   workerUrl?: string;
   error?: string;
@@ -34,10 +35,12 @@ export type Manifest = {
     properties: {
       [key: string]: {
         default: unknown;
-        type?: string;
+        description?: string;
+        type: string;
+        properties?: Record<string, ManifestProps>;
       };
     };
   };
 };
 
-export type ManifestProps = { type: string; default: string; items?: { type: string }; properties?: Record<string, ManifestProps> };
+export type ManifestProps = { type: string; default: unknown; description: string; items?: { type: string }; properties?: Record<string, ManifestProps> };

static/utils/element-helpers.ts

@@ -27,6 +27,9 @@ export function createInputRow(
   const headerCell = document.createElement("td");
   headerCell.className = "table-data-header";
   headerCell.textContent = key;
+
+  createConfigParamTooltip(headerCell, prop);
+
   row.appendChild(headerCell);
 
   const valueCell = document.createElement("td");
@@ -106,3 +109,36 @@ export function createTextareaInput(key: string, defaultValue: object | unknown,
 
   return inputElem;
 }
+
+function createConfigParamTooltip(headerCell: HTMLElement, prop: ManifestProps) {
+  if (!prop.description) return;
+
+  const tooltip = createElement("span", { class: "tooltip", textContent: "?" });
+  const tooltipText = createElement("span", { class: "tooltiptext", textContent: prop.description });
+
+  tooltip.appendChild(tooltipText);
+  headerCell.appendChild(tooltip);
+
+  tooltip.addEventListener("mouseenter", () => {
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const tooltipTextRect = tooltipText.getBoundingClientRect();
+    const spaceAbove = tooltipRect.top;
+    const spaceBelow = window.innerHeight - tooltipRect.bottom;
+
+    if (spaceBelow < tooltipTextRect.height && spaceAbove > spaceBelow) {
+      tooltipText.style.bottom = `${tooltipRect.height}px`;
+      tooltipText.style.top = "auto";
+    } else {
+      tooltipText.style.top = `${tooltipRect.height}px`;
+      tooltipText.style.bottom = "auto";
+    }
+
+    tooltipText.style.visibility = "visible";
+    tooltipText.style.opacity = "1";
+  });
+
+  tooltip.addEventListener("mouseleave", () => {
+    tooltipText.style.visibility = "hidden";
+    tooltipText.style.opacity = "0";
+  });
+}