Host block on template pack profile page

[bobbykolev]

Summary by CodeRabbit

• New Features
  • Added a Host section on the Innovation Pack Profile Page that displays the provider's profile information in a card format, now visible alongside existing content to help users identify and learn about the innovation pack provider.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds a Host section UI block to the InnovationPackProfilePage displaying the innovation pack provider's profile using the ContributorCardHorizontal component with existing provider data and a seamless presentation style.

Changes

Cohort / File(s)	Summary
Host Section Component src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx	Introduces a new Host section rendering ContributorCardHorizontal component to display innovation pack provider profile data. Adds imports for ContributorCardHorizontal and React. Uses PageContentBlock wrapper with translation key 'community.host' for the header.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify proper prop passing to ContributorCardHorizontal component
• Confirm translation key 'community.host' exists and is correctly referenced
• Check correct nullish coalescing on innovationPack?.provider?.profile data access

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Host block on template pack profile page' accurately describes the main change: adding a Host section to display the innovation pack provider on the profile page.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch client-8756-inno-pack-host

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx (1)

22-22: Remove unnecessary React import.

With React 19 and the modern JSX transform (required per coding guidelines), explicitly importing React for JSX is no longer necessary. This import can be safely removed as there are no direct usages of the React object in this file.

Apply this diff:

-import React from 'react';

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a7bf954 and b1167c9.

📒 Files selected for processing (1)

• src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*

⚙️ CodeRabbit configuration file

**/*: Repository overview:

• React 19 + TypeScript single-page app for the Alkemio platform. Uses Vite 5, Apollo Client 3, MUI 7, Emotion, Vitest.
• Large surface (production build transforms ~18k modules). Core implementation lives in src/core, src/domain, and src/main; generated GraphQL hooks reside in src/core/apollo/generated.
• Authoritative docs: README.md, docs/development-setup.md, .specify/memory/constitution.md, agents.md, .github/copilot-instructions.md.

Environment & bootstrap:

1. Ensure Node >=20.9.0 (Volta pins 20.15.1) and pnpm >=10.17.1.
2. Keep .env (checked in) present; override locally via .env.local.
3. pnpm install (validated 2025-10-30, ~1s with cached deps). pnpm warns about ignored build scripts (@sentry/cli, esbuild, husky, msw); ignore or run pnpm approve-builds if required.

Validation flow (validated 2025-10-30):

• pnpm lint → runs tsc --noEmit then ESLint on src/**/*.ts(x); completed cleanly.
• pnpm vitest run --reporter=basic.
• pnpm build →Rewrites .build/docker/.env.base and public/env-config.js; revert before commit. Emits expected large-chunk warnings.
• pnpm serve:dev → serves ./build on port 3001 (after pnpm build).
• pnpm format → Prettier for src/**/*.ts(x).
• pnpm codegen → requires backend GraphQL endpoint at http://localhost:3000/graphql; regenerates src/core/apollo/generated artifacts.
• pnpm start → Vite dev server (app reachable via Traefik on http://localhost:3000, Vite listens on 3001). Regenerates public/env-config.js each run.

Layout & architecture:

• src/index.tsx bootstraps the SPA; src/root.tsx wires Sentry, Apollo, routing, auth, and global state.
• src/core/ houses shared infrastructure (auth, analytics, routing helpers, UI kit, utilities).
• src/domain/ contains domain façades/hooks grouped by business context (space, innovationHub, communication, etc.).
• src/main/ provides routed shells, layouts, notifications, admin flows; keep business rules in `src/domain...

Files:

• src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx

src/**/*.{ts,tsx,js}

⚙️ CodeRabbit configuration file

src/**/*.{ts,tsx,js}: Review the React/TypeScript code for correctness and alignment with docs/code-guidelines.md.
Rely on global error handling and logging; only flag missing local try/catch or logging when additional mitigation is required.
Non-null assertions are discouraged except when paired with skip guards on GraphQL queries (see existing patterns).
Watch for security issues (XSS, CSRF, sensitive data exposure) and TypeScript typing violations.

Files:

• src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx

🧠 Learnings (2)

📓 Common learnings

Learnt from: bobbykolev
Repo: alkem-io/client-web PR: 7150
File: src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx:50-53
Timestamp: 2024-11-06T16:19:58.877Z
Learning: In `VCProfilePageView.tsx`, the `ContributorCardHorizontal` component includes the tooltip and click handler functionality for the Host card.

📚 Learning: 2024-11-06T16:19:58.877Z

Learnt from: bobbykolev
Repo: alkem-io/client-web PR: 7150
File: src/domain/community/virtualContributor/vcProfilePage/VCProfilePageView.tsx:50-53
Timestamp: 2024-11-06T16:19:58.877Z
Learning: In `VCProfilePageView.tsx`, the `ContributorCardHorizontal` component includes the tooltip and click handler functionality for the Host card.

Applied to files:

• src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx

🔇 Additional comments (1)

src/domain/InnovationPack/InnovationPackProfilePage/InnovationPackProfilePage.tsx (1)

75-78: Verification confirms all implementation details are correct.

The GraphQL query InnovationPackProfilePage includes the provider field with the InnovationPackProviderProfileWithAvatar fragment, which provides access to the profile data. The translation key 'community.host' is defined in the i18n resource files and resolves to "Host". The component's use of optional chaining (innovationPack?.provider?.profile) safely handles potential undefined values. All implementation requirements are satisfied.