HeaderPanelProfile

HeaderPanelProfile

The HeaderPanelProfile component displays comprehensive user profile information, preferences, and account actions within the header panel. It provides client/district selection and logout functionality.

Props

This component does not accept any props. It manages its own state through context hooks.

Usage

import HeaderPanelProfile from "@/components/Layout/HeaderPanelProfile";

// Typically used within LayoutHeaderPanel
<HeaderPanel>
  <HeaderPanelProfile />
</HeaderPanel>;

Features

User Information Display

1. Large Avatar: User initials in a circular avatar
2. Full Name: First and last name display
3. UserID: Identity provider and username (e.g., "IDIR\jdoe")
4. User Role: Comma-separated list of assigned roles
5. Email: User's email address

Entity Selection

Conditional selection based on user role:

• Client Role Users (VIEWER, SUBMITTER): Client selection interface
• Organization Role Users (ADMIN, DISTRICT_MANAGER, AREA_MANAGER): District/organization selection interface

Account Actions

• Logout: Sign out button with icon

Structure

┌─────────────────────────────────┐
│  [Avatar]  John Doe             │
│            IDIR\jdoe            │
│            Email: jdoe@gov.bc.ca│
├─────────────────────────────────┤
│  Select district/client         │
│  [?] Help tooltip               │
│                                 │
│  [District/Client Listing]      │
│                                 │
├─────────────────────────────────┤
│  [Exit Icon] Log out            │
└─────────────────────────────────┘

Sections

User Info Section

<div className="user-info-section">
  <div className="user-image">
    <AvatarImage
      userName={`${user?.firstName} ${user?.lastName}`}
      size="large"
    />
  </div>
  <div className="user-data">
    <p className="user-name">{`${user?.firstName} ${user?.lastName}`}</p>
    <p>{`${user?.idpProvider ? user?.idpProvider + "\\" : null}${user?.userName}`}</p>
    <p>{`Role: ${user?.roles?.map((r) => r.role)?.join(", ") ?? ""}`}</p>
    <p>{`Email: ${user?.email}`}</p>
  </div>
</div>

Entity Selection Section

<Tooltip label={tooltipText}>
  <div className="panel-section-light">
    <span>Select {entityType}</span>
    <Help aria-label={`Help: About selecting a default ${entityType}`} tabIndex={0} />
  </div>
</Tooltip>
<div className="district-selection-container">
  {isClientUser ? <ClientListing /> : <DistrictListing />}
</div>

Logout Section

<SideNavLink className="cursor-pointer" renderIcon={Exit} onClick={logout}>
  Log out
</SideNavLink>

Conditional Logic

Entity Type Determination

const CLIENT_ROLES = new Set([Role.VIEWER, Role.SUBMITTER]);
const isClientUser =
  user?.roles?.some((r) => CLIENT_ROLES.has(r.role)) ?? false;
const entityType = isClientUser ? "client" : "organization";

Users with VIEWER or SUBMITTER roles are client users and see client selection. All other users (ADMIN, DISTRICT_MANAGER, AREA_MANAGER) see organization/district selection.

Tooltip Text

Dynamic tooltip based on user role:

const tooltipText =
  `Optional: Select a default ${entityType}.` +
  ` This can help you do your searches faster if you work with one ${entityType} much more than others.` +
  ` You can change or remove this at any time.`;

For client users (VIEWER, SUBMITTER): "Select a default client..." For other users (ADMIN, DISTRICT_MANAGER, AREA_MANAGER): "Select a default organization..."

Component Selection

{isClientUser ? <ClientListing /> : <DistrictListing />}

Based on the determined isClientUser flag, the component conditionally renders either the client or district listing interface.

State Management

Authentication Context

const { logout, user } = useAuth();

Provides:

• logout: Function to sign out the user
• user: Current user object with profile information

User Object Properties

• firstName: User's first name
• lastName: User's last name
• userName: Login username
• email: User's email address
• idpProvider: Identity provider (BCEIDBUSINESS, IDIR, etc.)

Styling

Container

.my-profile-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

User Info Section

.user-info-section {
  padding: 1rem;
  display: flex;

  .user-data {
    margin-left: 2rem;
  }

  .user-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.user-name {
  @include font-weight(semibold);
}

District Panel

.district-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  div.district-selection-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

Panel Sections

.panel-section-light {
  height: 3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.94rem 1rem;
  background: var(--layer-02);
  display: flex;
  gap: 0.5rem;
}

.panel-section-light > span {
  @include type.type-style("label-01");
  color: var(--text-secondary);
  user-select: none;
}

Divider

.divisory {
  border: 1px solid var(--border-subtle-01);
}

Design Tokens

• Background: --layer-02
• Text primary: Applied to user name
• Text secondary: --text-secondary (for labels)
• Border: --border-subtle-01
• Typography: Carbon label-01

Accessibility

Test IDs

data-testid="user-fullname"

ARIA Labels

aria-label={`Help: About selecting a default ${entityType}`}

Keyboard Support

• Help icon is focusable (tabIndex={0})
• Logout link is keyboard accessible
• All interactive elements support keyboard navigation

Semantic HTML

• Proper heading hierarchy
• Navigation element with list structure
• Horizontal rule for visual separation

Help Tooltip

Content

Provides contextual help for entity selection:

"Optional: Select a default {entityType}. This can help you do your
searches faster if you work with one {entityType} much more than others.
You can change or remove this at any time."

Behavior

• Appears on hover/focus
• Icon is keyboard accessible
• ARIA label describes purpose

Logout Functionality

Implementation

<SideNavLink className="cursor-pointer" renderIcon={Exit} onClick={logout}>
  Log out
</SideNavLink>

Features

• Exit icon for visual clarity
• Uses Carbon's SideNavLink for consistency
• Executes logout function from AuthContext
• Styled as a cursor pointer

Dependencies

Required Context Providers

• AuthProvider: For user info and logout functionality
• PreferenceProvider: Required by ClientListing/DistrictListing

Sub-Components

• AvatarImage: Large user avatar
• ClientListing: Client selection for business users
• DistrictListing: District selection for IDIR users

Carbon Components

• SideNavLink: Logout button styling
• Tooltip: Help text display
• Help: Help icon

Carbon Icons

• Exit: Logout icon
• Help: Help tooltip icon

Integration Example

import { AuthProvider } from "@/context/auth/AuthProvider";
import { PreferenceProvider } from "@/context/preference/PreferenceProvider";
import HeaderPanelProfile from "@/components/Layout/HeaderPanelProfile";

function ProfilePanel() {
  return (
    <AuthProvider>
      <PreferenceProvider>
        <HeaderPanelProfile />
      </PreferenceProvider>
    </AuthProvider>
  );
}

User Experience Flow

Viewing Profile

1. User opens profile panel
2. Sees their avatar, name, and email
3. Can view currently selected client/district

Changing Selection

1. User scrolls to entity selection section
2. Reads tooltip for guidance
3. Selects from available clients/districts
4. Selection persists across sessions

Logging Out

1. User scrolls to bottom of panel
2. Clicks logout button
3. Redirected to login page
4. Session cleared

Identity Provider Display

BCeID Business

BCEIDBUSINESS\username

IDIR

IDIR\username

Other Providers

PROVIDERNAME\username

Related Components

• LayoutHeaderPanel: Parent panel container
• AvatarImage: User avatar display
• ClientListing: Business client selection
• DistrictListing: Government district selection

Best Practices

1. Context Providers: Ensure AuthProvider and PreferenceProvider are available
2. User Data: Validate user object exists before rendering
3. Entity Type: Handle different identity providers appropriately
4. Logout Handling: Ensure logout function clears all user data
5. Accessibility: Maintain keyboard navigation and screen reader support

Notes

• Component flexes to fill available panel height
• District/client selection takes up remaining space
• User information is always visible at the top
• Logout is anchored at the bottom
• Follows BC Government design patterns
• Username format includes identity provider prefix