@growth-operations/ui-shared 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-operations/ui-shared",
-  "version": "1.0.9",
+  "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

@@ -35,18 +35,26 @@ export function HelpfulLinks({
   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 });
-  if (supportUrl) items.push({ label: "Support", url: supportUrl });
+  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) items.push({ label: l.label, url: l.url });
+    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;
@@ -56,7 +64,7 @@ export function HelpfulLinks({
       <Text format={{ fontWeight: "bold" }}>{title}</Text>
       <Divider />
       {items.map((item) => (
-        <Link key={item.url} href={{ url: item.url, external: true }}>
+        <Link key={item.url} href={{ url: item.url, external: item.external }}>
           {item.label}
         </Link>
       ))}