Home Original page

fix: ui inconsistencies by ogzhanolguncu · Pull Request #5167 · unkeyed/unkey

📝 Walkthrough

Walkthrough

Infrastructure configuration and dashboard UI refactoring for deployment management. Adds GitHub App credential configuration in Kubernetes manifests, restructures deployment progress and information components, introduces skeleton loaders and expanded log views, updates column sizing in tables, adds multiple new language icons and utilities, and extends onboarding flows with virtualization and deployment tracking.

Changes

Cohort / File(s) Summary
Kubernetes Infrastructure
dev/k8s/manifests/ctrl-worker.yaml		 Added GitHub App ID and unauthenticated deployment configuration parameters to ConfigMap and Deployment, replacing hardcoded values with environment variable references.
Deployment Progress Refactoring
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(deployment-progress)/*		 Renamed DeploymentProgressSection to DeploymentProgress with significant control flow changes including router navigation, domain integration via DeploymentDomainsCard, and auto-navigation on network completion. Added new DeploymentInfo component displaying CPU, memory, region flags, and status. Added DeploymentStep component for expandable status displays. Introduced DeploymentLiveStep for onboarding with countdown-based auto-redirect (15s).
Build Steps Table & Logs
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(deployment-progress)/build-steps-table/*		 Added BuildStepLogsExpanded component for displaying detailed step logs. Created four skeleton components (StartedAtColumnSkeleton, StatusColumnSkeleton, NameColumnSkeleton, DurationColumnSkeleton). Adjusted column widths (expand 32→25px, started_at 180→85px, duration 10%→115px) and styling. Updated deployment-build-steps-table to integrate skeleton rendering and reorganized imports.
Removed Deployment Sections
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/sections/*		 Removed DeploymentInfoSection and DeploymentDomainsSection components (previously rendered in overview, now consolidated into deployment-progress layout).
Removed Overview Components
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/table/*		 Removed BuildStepLogsExpanded and useDeploymentBuildStepsQuery hook from overview table components (relocated to deployment-progress directory).
Deployment Layout & Provider Updates
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/*		 Updated layout-provider to accept optional deploymentId prop. Modified deployment-network-view zoom from 1 to 0.75 and removed locked prop. Updated page.tsx to replace old sections with new DeploymentInfo and DeploymentProgress components with conditional rendering based on deployment readiness.
Metric Formatting Refactoring
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/network/unkey-flow/components/nodes/components/*, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/details/project-details-expandables/sections.tsx, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/runtime-settings/*, web/apps/dashboard/lib/utils/deployment-formatters.ts		 Changed CPU/memory formatting from string-returning functions (formatCpu, formatMemory) to parts-returning functions (formatCpuParts, formatMemoryParts) that provide separate value and unit fields. Updated MetricPillProps.value type from string | number to React.ReactNode. Modified multiple components to use new formatters and render separated value/unit styling.
Column Sizing & Border Styling
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/components/table/deployments-list.tsx, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/deployments/[deploymentId]/(overview)/components/metrics/metric-card.tsx, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/components/active-deployment-card/*, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/components/deployment-domains-card.tsx		 Adjusted multiple border-radius values from rounded-xl to rounded-[14px]. Updated deployment list column widths (Deployment ID 15%→12%, Status 15%→10%, Domains 25%→20%, Instances 10%→8%, Size 15%→14%, Source 15%→12%, Created 10%→8%, Author 10%→8%, Action 5%→4%). Replaced Cube icon with Connections3, added Bolt and ScanCode icons for resources. Updated deployment card border color from border-grayA-5 to border-grayA-4.
Deployment Domains Card
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/components/deployment-domains-card.tsx		 New component rendering deployment domains with primary domain display, additional domains in popover, copy-to-clipboard support, and optional glow state. Fetches domains via useProjectData and supports filtering.
Onboarding Flow Updates
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/onboarding/*		 Modified onboarding wizard to conditionally show GitHub connection step only when no installation exists (via trpc hasInstallations check). Added deployment tracking state (deploymentId) and DeploymentLiveStep. Updated ConfigureDeploymentStep to accept onDeploymentCreated callback and use step wizard navigation instead of router. Introduced LanguageIcon component for repository language display. Added repository virtualization via useVirtualizer with max-height constraints.
Select Repo Enhancements
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/onboarding/steps/select-repo/*		 Added virtualization for repository lists using useVirtualizer. Created LanguageIcon component mapping language strings to icon components. Updated RepoListItem to accept language property and render LanguageIcon. Updated skeleton styling with ring and shadow.
Icon Library Expansion
web/internal/icons/src/icons/hammer-2.tsx, web/internal/icons/src/icons/lang-*.tsx, web/internal/icons/src/icons/layer-front.tsx, web/internal/icons/src/index.ts		 Added 11 new icon components: Hammer2, LangElixir, LangGo, LangJava, LangJavascript, LangPhp, LangPython, LangRuby, LangRust, LangTypescript, LayerFront. All follow standard IconProps pattern with sizeMap-based sizing.
Virtual Table & Config Updates
web/apps/dashboard/components/virtual-table/*		 Added optional className to TableConfig for container styling. Updated virtual table rendering to conditionally render headers only when hasHeaders is true, consolidate spacer rows, and use optional chaining for renderExpanded. Added config.className merging with padding classes.
Settings & UI Components
web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/(overview)/settings/components/shared/settings-group.tsx, web/internal/ui/src/components/settings-card.tsx, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/components/section.tsx		 Updated SettingsGroup to accept hideChevron prop and changed title type to React.ReactNode. Updated SettingCard with iconClassName prop, adjusted border-radius to 14px, reduced padding (px-6→px-4), added dark ring and shadow styling. Changed Section header padding from py-1.5 px-2 to mb-4 px-2, removed gap-1 from container.
GitHub & TRPC Integration
web/apps/dashboard/lib/github.ts, web/apps/dashboard/lib/trpc/routers/github.ts		 Added nullable language field to GitHubRepository type. Added hasInstallations query endpoint returning boolean for GitHub App installation status. Extended listRepositories to include language field from repository data.
Styling & Minor Updates
web/apps/dashboard/app/(app)/[workspaceSlug]/layout.tsx, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/[projectId]/page.tsx, web/apps/dashboard/app/(app)/[workspaceSlug]/projects/_components/list/projects-card*.tsx, web/apps/dashboard/components/loading-state.tsx, web/apps/dashboard/components/stats-card/index.tsx, web/apps/dashboard/tailwind.config.js, web/apps/dashboard/app/(app)/integrations/github/callback/page.tsx		 Text color updates (text-gray-600→text-gray-11), border color updates (border-gray-6→border-gray-4), gradient and shadow adjustments in card skeletons. Replaced PageLoading with LoadingState component. Updated project page to async redirect to deployments. Added comprehensive Tailwind configuration with theme customization, color palette, animations, and merge utility function. Adjusted spacing in project content wrapper (mt-4→mt-6) and removed breadcrumb Overview entry.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DeploymentProgress
    participant DeploymentLiveStep
    participant DeploymentService
    participant Router

    User->>DeploymentProgress: View deployment progress
    DeploymentProgress->>DeploymentService: Query build steps & network status
    DeploymentService-->>DeploymentProgress: Return progress data
    DeploymentProgress->>DeploymentProgress: Monitor network completion
    
    alt Network Not Ready
        DeploymentProgress->>User: Display DeploymentProgress component
        User->>User: View step indicators
    else Network Ready
        DeploymentProgress->>DeploymentLiveStep: Navigate with deploymentId
        DeploymentLiveStep->>DeploymentService: Check deployment ready state
        DeploymentService-->>DeploymentLiveStep: Return ready status
        DeploymentLiveStep->>DeploymentLiveStep: Start 15s countdown timer
        User->>User: View countdown
        DeploymentLiveStep->>Router: Auto-navigate to deployment overview (on countdown=0)
        Router-->>User: Display deployment page
    end
Loading 
sequenceDiagram
    participant User
    participant OnboardingWizard
    participant GitHubCheck
    participant ConfigureDeployment
    participant DeploymentMonitor
    participant Router

    User->>OnboardingWizard: Start onboarding
    OnboardingWizard->>OnboardingWizard: Render Create Project step
    User->>OnboardingWizard: Proceed
    OnboardingWizard->>OnboardingWizard: Render Select Repository step
    User->>OnboardingWizard: Choose repository
    OnboardingWizard->>GitHubCheck: Check hasInstallations
    GitHubCheck-->>OnboardingWizard: Installation status
    
    alt No GitHub Installation
        OnboardingWizard->>User: Show Connect GitHub step
        User->>User: Authorize app
    end
    
    OnboardingWizard->>ConfigureDeployment: Render Configure Deployment step
    User->>ConfigureDeployment: Create deployment
    ConfigureDeployment->>DeploymentMonitor: Trigger onDeploymentCreated callback
    DeploymentMonitor->>OnboardingWizard: Advance wizard to Deploying
    OnboardingWizard->>DeploymentMonitor: Render DeploymentLiveStep with deploymentId
    DeploymentMonitor->>Router: Auto-redirect on ready
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • PR #4804: Overlapping changes to deployment overview components (DeploymentProgress, DeploymentInfo, ActiveDeploymentCard, domain components) and layout-provider updates in similar deployment-related directories.
  • PR #4881: Shared changes to deployment network UI components (deployment-network-view, node components, metric formatting utilities) affecting visualization and metrics display.
🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title 'fix: ui inconsistencies' is vague and generic, using a non-specific term 'ui inconsistencies' that doesn't clearly convey the main changes in this substantial PR. Consider a more specific title that reflects the primary change, such as 'feat: redesign deployment progress experience and GitHub integration' or similar, to better summarize the core work.
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The PR description is comprehensive and well-structured, following the template with clear sections covering objectives, key changes, testing instructions, and a completed checklist.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch improve-deployment-page

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