Skip to main content

Homepage Links Plugin

The Homepage Links plugin provides a customizable dashboard with multiple sections for onboarding, team links, GitHub repositories, GCP projects, and pull requests.

Overview​

PropertyValue
Package@internal/plugin-homepage-links
TypeFrontend
Entry Pointpackages/app/src/components/home/HomePage.tsx
Size~428KB

Architecture​

Main Sections​

1. Onboarding Section​

Displays group-specific onboarding links for new team members.

<OnboardingSection groupId={selectedGroup} />
  • Data Source: Backend API via HomepageLinksClient
  • Features: Links with icons, descriptions, and click tracking

Shows team-curated documentation and resource links.

<TeamLinksSection groupId={selectedGroup} />
  • Data Source: Backend API
  • Features: Categorized links, admin editing

3. Git Repo Section​

Displays GitHub repositories (saved and auto-detected).

<GitRepoSection limit={10} cacheMinutes={5} />
  • Data Source: HomepageReposClient + GitHub API
  • Features:
    • Saved repositories
    • Auto-detected from recent activity
    • Quick actions (clone, open in browser)

4. GCP Projects Section​

Shows GCP projects with billing information.

<GcpProjectsSection />
  • Data Source: HomepageGcpProjectsClient + GCP APIs
  • Features:
    • Project listing
    • Billing cost display
    • BigQuery integration

5. Pull Requests Section​

Displays user's open pull requests with diff viewer.

<PullRequestsSection />
  • Data Source: GitHub GraphQL API
  • Features:
    • Open PR listing
    • Inline diff viewer (react-diff-view)
    • Reviewer selection
    • Comment viewing

Key Components​

GithubTeamsBar​

Filter chips for selecting teams or individual users.

<GithubTeamsBar
  teams={teams}
  selectedTeam={selected}
  onTeamSelect={handleSelect}
/>

CollapsibleSection​

Drag-and-drop enabled card wrapper.

<CollapsibleSection title="My Section" defaultExpanded={true} draggable={true}>
  {children}
</CollapsibleSection>

DiffViewer​

PR diff display using react-diff-view library.

<DiffViewer
  diff={prDiff}
  viewType="split" // or "unified"
/>

ReviewerSelector​

Interactive reviewer selection for PRs.

<ReviewerSelector prNumber={123} repo="owner/repo" onReviewerAdd={handleAdd} />

APIs​

HomepageLinksClient​

interface HomepageLinksClient {
  getLinks(groupId: string): Promise<Link[]>;
  saveLink(link: Link): Promise<void>;
  deleteLink(linkId: string): Promise<void>;
  getPreferences(): Promise<Preferences>;
  savePreferences(prefs: Preferences): Promise<void>;
}

HomepageReposClient​

interface HomepageReposClient {
  getRepos(): Promise<Repository[]>;
  saveRepo(repo: Repository): Promise<void>;
  removeRepo(repoId: string): Promise<void>;
  detectRepos(): Promise<Repository[]>;
}

HomepageGcpProjectsClient​

interface HomepageGcpProjectsClient {
  getProjects(): Promise<GcpProject[]>;
  getBilling(projectId: string): Promise<BillingInfo>;
}

Custom Headers​

The plugin uses custom headers for authentication:

HeaderPurpose
X-Gcp-Access-TokenGCP user OAuth token
X-GitHub-TokenGitHub user OAuth token
CORS Configuration

These headers must be included in allowedHeaders in your CORS configuration:

cors:
  allowedHeaders:
    - X-Gcp-Access-Token
    - X-GitHub-Token