Fusion Help Integration

Fusion Help Integration

Wire the Fusion Help Center into app pages so users can open contextual help articles via the PageLayout help button.

When to use

• Add help button to a page
• Wire useHelpCenter into a page component
• Create/update help articles constants file
• Connect PageLayout to Fusion Help Center
• Page uses PageLayout without openHelpArticle
• Add help support to an app
• Open a specific help article from a page

When not to use

• Authoring markdown help articles → fusion-help-docs
• Direct REST API calls to Help service → fusion-help-api
• Modifying @fra/ui shared components (PageLayout, PageHeader, FusionHelpButton)
• Non-Fusion-framework apps or apps outside this monorepo

Required inputs

Collect before making changes:

If article slugs are auto-derived, confirm with user before applying — slugs must match articles published via fhelp.

Instructions

1. Check existing help integration

Search target app for existing help wiring:

apps/{app-name}/src/**/helpArticles.ts
apps/{app-name}/src/**/fusionHelpArticles.ts

Also search for useHelpCenter imports. If app already has partial integration, extend rather than duplicate.

2. Determine slug convention

Check if app already has a constants file with slugs:

• Has existing slugs → follow its naming pattern
• No existing slugs → use {app-name}-{page-kebab} convention

Reference existing conventions:

Prefer prefixed convention for new apps — avoids slug collisions across apps.

3. Create or update the constants file

Create src/constants/helpArticles.ts (or the app's chosen location):

export const FUSION_HELP_ARTICLES = {
    PAGE_NAME: '{app-name}-{page-kebab}',
};

Keys are SCREAMING_SNAKE_CASE matching the page concept. Values are kebab-case slug strings.

See references/wiring-pattern.md for the full canonical pattern with real examples.

4. Wire each target page

For each page component that uses PageLayout:

a. Add imports (externals first, then @fra/*, then @/* aliases, then relative):

import { useHelpCenter } from '@equinor/fusion-framework-react-app/help-center';

import { PageLayout } from '@fra/ui';

import { FUSION_HELP_ARTICLES } from '@/constants/helpArticles';

b. Destructure the hook inside the component body:

const { openArticle, openReleaseNotes } = useHelpCenter();

If release notes not needed, destructure only { openArticle }.

c. Pass props to PageLayout:

<PageLayout
    title="Page Title"
    openHelpArticle={() => openArticle(FUSION_HELP_ARTICLES.PAGE_NAME)}
    openReleaseNotes={openReleaseNotes}
>

Important: openHelpArticle must be a callback wrapper () => openArticle(slug), not a direct reference — openArticle requires the slug argument.

5. Verify the integration

After wiring:

1. Run TypeScript check: pnpm --filter {app-name} exec tsc --noEmit
2. Check lint: pnpm --filter {app-name} exec eslint src/
3. Visual check: page header shows info-circle (ⓘ) icon. Clicking opens Fusion Help sidesheet.

6. Cross-reference with published content

Each slug in FUSION_HELP_ARTICLES must correspond to a published article. If articles don't exist:

• Point to fusion-help-docs for authoring
• Slug in constants must exactly match slug field in help-articles.json
• Articles are published per-environment via fhelp

Expected output

• Constants file created/updated with article slug mappings
• Target page(s) wired with useHelpCenter + PageLayout props
• TypeScript compilation passes
• List of slugs needing corresponding help articles (for handoff to fusion-help-docs)

Safety & constraints

• Never invent slug names without confirmation — slugs must match published articles
• Don't modify @fra/ui components — PageLayout, PageHeader, FusionHelpButton already support help props
• Don't add new dependencies — @equinor/fusion-framework-react-app is already in every app
• Follow app's import alias convention — most apps use @/* → src/*
• Respect existing code style — use type for type-only imports, maintain import group ordering
• Don't duplicate help wiring — if page already has useHelpCenter, extend rather than re-add
• Confirm auto-derived slugs before applying — wrong slug silently fails (no article shown)