@growth-operations/ui-shared 1.0.8 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Shared HubSpot UI-extension modules (Home, Billing) for Growth Operations apps.",
   "license": "MIT",
   "private": false,

package/src/home/AppHome.jsx

@@ -6,6 +6,7 @@ import { OnboardingChecklist } from "./OnboardingChecklist";
 import { SyncPulse } from "./SyncPulse";
 import { CreditMeter } from "./CreditMeter";
 import { FeatureNudges } from "./FeatureNudges";
+import { HelpfulLinks } from "./HelpfulLinks";
 
 // Minimal inline ATS tile (the `pipeline` block). Kept tiny here rather than a
 // separate file — it's the simplest of the three archetype tiles. Renders
@@ -76,7 +77,13 @@ function ArchetypeTile({ state }) {
 //                PageLink navigation (the host owns the router).
 //   appName    — display name override; defaults to state.app.name.
 //   onRetry    — optional, passed to InstallProgress for the failed state.
-export function AppHome({ state, onNavigate, appName, onRetry }) {
+//   helpfulLinks — optional props for the standard HelpfulLinks section
+//                  (e.g. { portalId, appId, appName, docsUrl, supportUrl,
+//                  links }). Omit to hide the section. The host passes this
+//                  (it owns context.portal.id + the app's docs/support); it can
+//                  also come from a state.helpful_links block if the backend
+//                  builds one.
+export function AppHome({ state, onNavigate, appName, onRetry, helpfulLinks }) {
   if (!state) {
     return <LoadingSpinner showLabel label="Loading…" />;
   }
@@ -85,10 +92,21 @@ export function AppHome({ state, onNavigate, appName, onRetry }) {
   const activationComplete =
     !activation || activation.complete === true || activation.status === "completed";
 
+  // HelpfulLinks props: explicit prop wins, else a state.helpful_links block if
+  // the backend builds one. Shown in both the install and cockpit views so help
+  // is reachable even mid-setup.
+  const links = helpfulLinks ?? state.helpful_links ?? null;
+  const helpfulLinksEl = links ? <HelpfulLinks {...links} /> : null;
+
   // Install isn't finished (running / failed / completed-with-warnings) — show
   // the install experience instead of the cockpit.
   if (!activationComplete) {
-    return <InstallProgress state={state} onRetry={onRetry} />;
+    return (
+      <Flex direction="column" gap="medium">
+        <InstallProgress state={state} onRetry={onRetry} />
+        {helpfulLinksEl}
+      </Flex>
+    );
   }
 
   const onboardingComplete = state.onboarding?.complete === true;
@@ -108,6 +126,8 @@ export function AppHome({ state, onNavigate, appName, onRetry }) {
       <ArchetypeTile state={state} />
 
       <FeatureNudges nudges={state.nudges} onNavigate={onNavigate} />
+
+      {helpfulLinksEl}
     </Flex>
   );
 }

package/src/home/HelpfulLinks.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Flex, Text, Link, Divider } from "@hubspot/ui-extensions";
+
+// Build the in-app app-pages deep link (the app's Home/tabs live under /app).
+function appPagesUrl(portalId, appId, pagePath = "") {
+  const suffix = pagePath ? `/${pagePath.replace(/^\//, "")}` : "";
+  return `https://app.hubspot.com/app/${portalId}/${appId}${suffix}`;
+}
+
+// HelpfulLinks — a standard "Helpful Links" section for every Growth Operations
+// app. Renders a labeled list of links: optionally an "Open <app>" deep link
+// back to the app pages (so the settings extension isn't a dead end), docs +
+// support from the app config, and any app-specific extras.
+//
+// Props:
+//   portalId   — context.portal.id (number/string).
+//   appId      — this app's HubSpot app id (per-env). Needed for the app-pages
+//                deep link; omit to hide that link.
+//   appName    — display name, e.g. "Sparkfly" (used in the deep-link label).
+//   appPages   — when true (default) and appId is set, show "Open <appName> →"
+//                linking to the app pages. Set the page path via appPagesPath.
+//   appPagesPath — optional pages route to deep-link into (default: Home).
+//   docsUrl, supportUrl — external help links (omit to hide).
+//   links      — app-specific extras: [{ label, url }]. Rendered after the
+//                standard links.
+//   title      — section heading (default "Helpful Links").
+export function HelpfulLinks({
+  portalId,
+  appId,
+  appName = "the app",
+  appPages = true,
+  appPagesPath = "",
+  docsUrl,
+  supportUrl,
+  links = [],
+  title = "Helpful Links",
+}) {
+  // external=false keeps navigation in the SAME tab. The app-pages deep link is
+  // an in-app HubSpot URL, so it must stay same-tab (external:true would force a
+  // new tab). Docs/support and app-specific extras are off-platform → external.
+  const items = [];
+
+  if (appPages && appId && portalId != null) {
+    items.push({
+      label: `Open ${appName} →`,
+      url: appPagesUrl(portalId, appId, appPagesPath),
+      external: false,
+    });
+  }
+  if (docsUrl) items.push({ label: "Documentation", url: docsUrl, external: true });
+  if (supportUrl) items.push({ label: "Support", url: supportUrl, external: true });
+  for (const l of links) {
+    if (l && l.url && l.label) {
+      // Default app-specific extras to external (they're usually HubSpot record
+      // URLs or off-platform), but let a link opt into same-tab via external:false.
+      items.push({ label: l.label, url: l.url, external: l.external !== false });
+    }
+  }
+
+  if (items.length === 0) return null;
+
+  return (
+    <Flex direction="column" gap="small">
+      <Text format={{ fontWeight: "bold" }}>{title}</Text>
+      <Divider />
+      {items.map((item) => (
+        <Link key={item.url} href={{ url: item.url, external: item.external }}>
+          {item.label}
+        </Link>
+      ))}
+    </Flex>
+  );
+}
+
+export default HelpfulLinks;

package/src/index.js

@@ -12,6 +12,7 @@ export { OnboardingChecklist } from "./home/OnboardingChecklist";
 export { SyncPulse } from "./home/SyncPulse";
 export { FeatureNudges } from "./home/FeatureNudges";
 export { CreditMeter } from "./home/CreditMeter";
+export { HelpfulLinks } from "./home/HelpfulLinks";
 
 // Billing.
 export { BillingTab } from "./billing/BillingTab";