Skip to content

[OSDEV-2224] Update free emission estimate styles#797

Merged
protsack-stephan merged 9 commits intomainfrom
OSDEV-2224-update-emission-estimates
Nov 6, 2025
Merged

[OSDEV-2224] Update free emission estimate styles#797
protsack-stephan merged 9 commits intomainfrom
OSDEV-2224-update-emission-estimates

Conversation

@protsack-stephan
Copy link
Collaborator

Add several UI improvements to the facility claim flow and emissions estimate form, focusing on consistency and user clarity.

Emissions Estimate Form

  • All energy input placeholders (e.g., "Enter value in J") have been updated to be more descriptive (e.g., "Enter value in Joules (J)").
  • The layout for energy source inputs has been refined. The unit label (e.g., "J", "MWh") alignment was changed, and validation errors are repositioned to display cleanly beneath the input field, even on smaller screens.
  • The tooltip for the "Actual Annual Energy Consumption" section has been updated with a more comprehensive description of the expected data.

Facility Claim Form

  • The horizontal padding for the main form (ClaimForm.jsx) and the intro page (ClaimIntro.jsx) has been standardized (using 4% on large screens) to ensure a consistent content width.
  • A boxWarningContainer style has been added to the ClaimForm to prominently display submission errors in a red-bordered box, making them more visible to the user.

Copy link
Contributor

@VadimKovalenkoSNF VadimKovalenkoSNF left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@sonarqubecloud
Copy link

sonarqubecloud bot commented Nov 6, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
27.6% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud

@barecheck
Copy link

barecheck bot commented Nov 6, 2025

React App | Jest test suite - Code coverage report

Total: 37.09%

Your code coverage diff: 0.01% ▴

✅ All code changes are covered

@protsack-stephan protsack-stephan enabled auto-merge (squash) November 6, 2025 13:30
@coderabbitai
Copy link

coderabbitai bot commented Nov 6, 2025

📝 Walkthrough

Walkthrough

Multiple UI components across FreeEmissionsEstimate and InitialClaimFlow features are enhanced. Changes include adding tooltip-enabled labels to energy inputs, restructuring error message display, introducing warning icons to error states, improving styling consistency with new helper functions, and adding loading/disabled states to submission controls.

Changes

Cohort / File(s) Summary
FreeEmissionsEstimate Component Updates
src/react/src/components/FreeEmissionsEstimate/EmissionsEstimateForm.jsx, EnergySourceInput.jsx
Added LabelWithTooltip component for energy consumption labeling; restructured error display from inline helperText to separate grid container with InputErrorText component; enhanced TextField styling with custom InputProps classes; added Checkbox styling classes and Typography variant adjustments for unit labels.
FreeEmissionsEstimate Configuration & Styling
src/react/src/components/FreeEmissionsEstimate/constants.jsx
Introduced energySourcePlaceholder constant and applied to all numeric energy sources; added tooltipText property to energyConsumptionLabel describing energy reporting conventions; updated Electricity placeholder to explicit MWh format.
FreeEmissionsEstimate Style Enhancements
src/react/src/components/FreeEmissionsEstimate/styles.js
Added COLOURS import; extended label, tooltip, and input styling with margins and max-widths; introduced inputStyles and notchedOutlineStyles as exposed constants; expanded energySourceInputStyles with unitText formatting, flex layout, checkbox color overrides (COLOURS.DARK_MATERIAL_GREEN), energySourceInputRoot, and errorTextContainer with responsive margins.
ClaimForm Component Enhancement
src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx
Added Warning icon import; replaced plain error Typography with styled warning container including warning icon and "ERROR!" label; disabled back navigation during submission; extended submit button with loading state handling and dynamic label ("Submitting..." vs. "Submit Claim").
ClaimForm Styling Updates
src/react/src/components/InitialClaimFlow/ClaimForm/styles.js
Extracted shared button styling into primaryButtonStyles helper function; refactored buttonPrimary and continueButton to use helper; introduced new style keys (boxWarningContainer, boxWarningText, warningIcon, boxWarningTextIcon) for warning UI; adjusted paper padding for responsive breakpoints (lg breakpoint and changed sm from 5% to 4%).
ProfileStep Spacing Enhancement
src/react/src/components/InitialClaimFlow/ClaimForm/Steps/ProfileStep/styles.js
Added marginTop: '24px' to emissionsEstimateContainer for improved vertical spacing.
ClaimIntro Styling Adjustments
src/react/src/components/InitialClaimFlow/ClaimIntro/styles.js
Added lg breakpoint rule to claimInfoStyles with percentage-based horizontal padding (40px 4% 0 4%); changed boxHeader bottom margin from theme.spacing.unit \* 2 to fixed 5px.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ClaimForm
    participant Server

    User->>ClaimForm: Submit Form
    ClaimForm->>ClaimForm: Set submissionFetching = true
    ClaimForm->>ClaimForm: Disable Back Button
    ClaimForm->>ClaimForm: Update Submit Button<br/>(show "Submitting...")
    ClaimForm->>Server: Send Claim Data
    
    alt Submission Success
        Server-->>ClaimForm: Success Response
        ClaimForm->>ClaimForm: Clear Error State
        ClaimForm->>User: Navigate/Close
    else Submission Error
        Server-->>ClaimForm: Error Response
        ClaimForm->>ClaimForm: Set submissionFetching = false
        ClaimForm->>ClaimForm: Enable Back Button
        ClaimForm->>ClaimForm: Update Submit Button<br/>(show "Submit Claim")
        ClaimForm->>ClaimForm: Display Warning Container<br/>with Icon + "ERROR!"
        ClaimForm->>User: Render Error Message
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

  • File variety: 8 files across two feature areas (FreeEmissionsEstimate, InitialClaimFlow) require separate context and reasoning
  • Mixed change types: Combination of UI restructuring (error/warning display), styling enhancements, and logic modifications (loading states) necessitates varied review approach
  • Helper function extraction: New primaryButtonStyles function in ClaimForm styles requires careful verification of reuse patterns and consistency
  • Error/warning display refactoring: Error rendering changes from inline helperText to separate grid containers across multiple files—verify consistency in implementation
  • Responsive styling updates: Multiple breakpoint changes and margin adjustments across styles files—confirm no unintended layout regressions

Possibly related PRs

Suggested reviewers

  • VadimKovalenkoSNF
  • roman-stolar

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The PR title accurately describes the main focus of the changeset: updating styles for the free emissions estimate components and related form elements.
Description check ✅ Passed The PR description is well-related to the changeset, detailing specific UI improvements made to the emissions estimate form and facility claim flow.
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 OSDEV-2224-update-emission-estimates

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 727f915 and 072acf0.

📒 Files selected for processing (8)
  • src/react/src/components/FreeEmissionsEstimate/EmissionsEstimateForm.jsx (1 hunks)
  • src/react/src/components/FreeEmissionsEstimate/EnergySourceInput.jsx (2 hunks)
  • src/react/src/components/FreeEmissionsEstimate/constants.jsx (10 hunks)
  • src/react/src/components/FreeEmissionsEstimate/styles.js (4 hunks)
  • src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (3 hunks)
  • src/react/src/components/InitialClaimFlow/ClaimForm/Steps/ProfileStep/styles.js (1 hunks)
  • src/react/src/components/InitialClaimFlow/ClaimForm/styles.js (4 hunks)
  • src/react/src/components/InitialClaimFlow/ClaimIntro/styles.js (2 hunks)
🧰 Additional context used
🧠 Learnings (9)
📓 Common learnings
Learnt from: vlad-shapik
Repo: opensupplyhub/open-supply-hub PR: 775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.869Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.
📚 Learning: 2025-10-24T13:01:46.869Z
Learnt from: vlad-shapik
Repo: opensupplyhub/open-supply-hub PR: 775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Steps/EligibilityStep.jsx:88-109
Timestamp: 2025-10-24T13:01:46.869Z
Learning: In the InitialClaimFlow ClaimForm steps (src/react/src/components/InitialClaimFlow/ClaimForm/Steps/), optional TextField components intentionally do not include the onBlur={handleBlur} handler, while required fields do include it. This is expected behavior for the claim form validation UX.

Applied to files:

  • src/react/src/components/InitialClaimFlow/ClaimForm/Steps/ProfileStep/styles.js
  • src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx
  • src/react/src/components/InitialClaimFlow/ClaimIntro/styles.js
  • src/react/src/components/InitialClaimFlow/ClaimForm/styles.js
📚 Learning: 2025-10-24T12:42:48.908Z
Learnt from: vlad-shapik
Repo: opensupplyhub/open-supply-hub PR: 775
File: src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx:43-45
Timestamp: 2025-10-24T12:42:48.908Z
Learning: In the InitialClaimFlow ClaimForm Stepper component (src/react/src/components/InitialClaimFlow/ClaimForm/Stepper/Stepper.jsx), the stepper intentionally uses `index < currentStep` for the `isClickable` check rather than `completedSteps.includes(index)` to prevent users from jumping forward to completed future steps when navigating back, enforcing a linear backward-only navigation pattern.

Applied to files:

  • src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx
  • src/react/src/components/InitialClaimFlow/ClaimForm/styles.js
📚 Learning: 2024-11-20T23:08:05.475Z
Learnt from: Innavin369
Repo: opensupplyhub/open-supply-hub PR: 415
File: src/react/src/components/ContributeForm.jsx:175-206
Timestamp: 2024-11-20T23:08:05.475Z
Learning: In the `ContributeForm.jsx` React component, it's acceptable to include an empty `onClick={() => {}}` handler on a disabled `<Button>` to prevent console warnings.

Applied to files:

  • src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx
  • src/react/src/components/InitialClaimFlow/ClaimForm/styles.js
📚 Learning: 2025-10-31T08:29:48.108Z
Learnt from: VadimKovalenkoSNF
Repo: opensupplyhub/open-supply-hub PR: 781
File: src/react/src/components/InitialClaimFlow/ClaimForm/validationSchemas.js:23-52
Timestamp: 2025-10-31T08:29:48.108Z
Learning: In src/react/src/components/InitialClaimFlow/ClaimForm/validationSchemas.js, the Redux state field `claimantEmploymentVerificationMethod` stores the label (full sentence, e.g., "Company website showing your name and title (e.g., About Us, Team page)") from EMPLOYMENT_VERIFICATION_OPTIONS, not the option value (e.g., "company-website-address"). The validation schema correctly compares against labels.

Applied to files:

  • src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx
📚 Learning: 2024-12-03T06:52:22.170Z
Learnt from: VadimKovalenkoSNF
Repo: opensupplyhub/open-supply-hub PR: 436
File: src/react/src/components/ProductionLocationDialog.jsx:255-257
Timestamp: 2024-12-03T06:52:22.170Z
Learning: In `src/react/src/components/ProductionLocationDialog.jsx`, the 'Submit another Location' button's `onClick` handler logs to the console as the endpoint is not yet implemented on the frontend.

Applied to files:

  • src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx
📚 Learning: 2025-10-07T10:55:42.752Z
Learnt from: roman-stolar
Repo: opensupplyhub/open-supply-hub PR: 765
File: src/django/api/models/extended_field.py:38-38
Timestamp: 2025-10-07T10:55:42.752Z
Learning: In the Open Supply Hub codebase, the `ESTIMATED_EMISSIONS_ACTIVITY` and `ESTIMATED_ANNUAL_ENERGY_CONSUMPTION` constants were defined in `src/django/api/models/extended_field.py` but were never actually implemented in database migrations or used to store data. They were removed as unused code cleanup.

Applied to files:

  • src/react/src/components/FreeEmissionsEstimate/constants.jsx
📚 Learning: 2024-12-05T10:43:59.922Z
Learnt from: Innavin369
Repo: opensupplyhub/open-supply-hub PR: 437
File: src/react/src/components/Filters/StyledSelect.jsx:31-39
Timestamp: 2024-12-05T10:43:59.922Z
Learning: In the `StyledSelect` component (`src/react/src/components/Filters/StyledSelect.jsx`), the `label` prop is optional. The `InputLabel` should be conditionally rendered only when a label is provided to prevent unnecessary DOM elements, extra padding, and browser console warnings.

Applied to files:

  • src/react/src/components/FreeEmissionsEstimate/EmissionsEstimateForm.jsx
  • src/react/src/components/FreeEmissionsEstimate/styles.js
  • src/react/src/components/FreeEmissionsEstimate/EnergySourceInput.jsx
📚 Learning: 2024-11-08T14:17:38.915Z
Learnt from: Innavin369
Repo: opensupplyhub/open-supply-hub PR: 397
File: src/react/src/components/Dashboard/DashboardContributionRecord.jsx:25-35
Timestamp: 2024-11-08T14:17:38.915Z
Learning: In `src/react/src/components/Dashboard/DashboardContributionRecord.jsx`, using inline styles with the `List` component is acceptable and functions correctly in this context.

Applied to files:

  • src/react/src/components/FreeEmissionsEstimate/styles.js
🧬 Code graph analysis (2)
src/react/src/components/FreeEmissionsEstimate/EmissionsEstimateForm.jsx (1)
src/react/src/components/FreeEmissionsEstimate/LabelWithTooltip.jsx (1)
  • LabelWithTooltip (10-29)
src/react/src/components/FreeEmissionsEstimate/EnergySourceInput.jsx (1)
src/react/src/components/Contribute/InputErrorText.jsx (1)
  • InputErrorText (8-15)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (13)
  • GitHub Check: run-flake8-linter
  • GitHub Check: run-contricleaner-code-quality
  • GitHub Check: get-base-branch-dd-cov
  • GitHub Check: get-base-branch-contricleaner-cov
  • GitHub Check: get-base-branch-countries-cov
  • GitHub Check: run-countries-code-quality
  • GitHub Check: run-eslint-linter-and-prettier-formatter
  • GitHub Check: run-dd-code-quality
  • GitHub Check: run-integration-test-code-quality
  • GitHub Check: get-base-branch-django-cov
  • GitHub Check: run-fe-code-quality
  • GitHub Check: get-base-branch-fe-cov
  • GitHub Check: run-django-code-quality
🔇 Additional comments (20)
src/react/src/components/InitialClaimFlow/ClaimIntro/styles.js (2)

84-86: LGTM - Standardized padding for large screens.

The addition of the lg breakpoint with 4% horizontal padding ensures consistent content width across the claim flow, aligning with the PR objectives.


124-124: LGTM - Consistent spacing adjustment.

The fixed margin value ensures predictable spacing for the box header.

src/react/src/components/InitialClaimFlow/ClaimForm/Steps/ProfileStep/styles.js (1)

89-89: LGTM - Improved vertical spacing.

The updated margin provides better visual separation for the emissions estimate container.

src/react/src/components/FreeEmissionsEstimate/styles.js (4)

1-1: LGTM - Well-structured shared styling constants.

The COLOURS import and shared inputStyles/notchedOutlineStyles constants promote consistency across the emissions estimate form components.

Also applies to: 42-49


6-6: LGTM - Enhanced label and tooltip styling.

The added margin and tooltip max-width improve visual consistency and ensure tooltips remain readable on all screen sizes.

Also applies to: 20-20


55-55: LGTM - Consistent border radius.

Changing to borderRadius: '0px' maintains visual consistency with other form elements in the claim flow.


89-127: LGTM - Comprehensive energy source input styling.

The extensive styling updates for energy source inputs address the PR objectives:

  • Enhanced unit text display with proper alignment
  • Consistent green checkbox colors using theme values
  • Responsive error text positioning with media queries for clean display on small screens
src/react/src/components/FreeEmissionsEstimate/EmissionsEstimateForm.jsx (2)

346-351: LGTM - Consistent input styling.

Applying custom InputProps classes ensures the throughput field matches the visual style of other form inputs.


357-361: LGTM - Enhanced energy consumption label with tooltip.

Replacing the plain Typography with LabelWithTooltip implements the PR objective to provide a comprehensive description of expected energy data. The tooltip text from energyConsumptionLabel.tooltipText guides users on how to report facility energy consumption by source.

src/react/src/components/InitialClaimFlow/ClaimForm/ClaimForm.jsx (2)

18-18: LGTM - Enhanced error visibility.

The boxed warning UI with the Warning icon and bold "ERROR!" label significantly improves the visibility of submission errors, aligning with the PR objective. The red-bordered container (via boxWarningContainer style) makes errors immediately noticeable to users.

Also applies to: 308-323


331-331: LGTM - Improved submission state handling.

Disabling both navigation buttons during submission and displaying "Submitting..." provides clear feedback and prevents users from triggering duplicate submissions or navigating away during the process.

Also applies to: 354-361

src/react/src/components/FreeEmissionsEstimate/constants.jsx (3)

3-3: LGTM - DRY placeholder constant.

Introducing the energySourcePlaceholder constant eliminates duplication and ensures consistency across energy source inputs.


43-44: LGTM - Comprehensive tooltip for energy consumption.

The tooltip text provides clear guidance on reporting facility energy consumption, explaining the mix of sources and units (Joules for solid/liquid fuels, MWh for electricity). This aligns with the PR objective to update the tooltip with a more comprehensive description.


51-123: LGTM - Descriptive placeholders for energy inputs.

The updated placeholders (e.g., "Enter value in Joules (J)" and "Enter value in Megawatt-Hours (MWh)") are more user-friendly than the previous short unit labels, directly implementing the PR objective for improved placeholder text.

src/react/src/components/FreeEmissionsEstimate/EnergySourceInput.jsx (3)

40-43: LGTM - Consistent component styling.

Applying custom classes to the Checkbox and TextField ensures visual consistency with the design system and allows centralized style management.

Also applies to: 83-87


49-55: LGTM - Improved layout structure.

Wrapping the TextField in a Grid container with proper alignment classes ensures consistent positioning across different screen sizes. The unit text styling provides clear visual hierarchy.

Also applies to: 75-78


93-105: LGTM - Clean error display positioning.

Moving error rendering to a separate Grid item outside the TextField, combined with responsive margins from errorTextContainer, implements the PR objective for validation errors to appear cleanly beneath inputs, including on small screens.

src/react/src/components/InitialClaimFlow/ClaimForm/styles.js (3)

9-31: LGTM - Excellent refactor for shared button styles.

The primaryButtonStyles helper eliminates duplication between buttonPrimary and continueButton, ensuring consistent styling and easier maintenance. The inclusion of disabled state styles is particularly valuable.


53-57: LGTM - Standardized padding across breakpoints.

Adding the lg breakpoint with 4% horizontal padding and updating the sm breakpoint to match ensures consistent content width across the claim form, aligning with the PR objective.


165-189: LGTM - Well-defined warning UI styles.

The boxWarningContainer and related styles provide a visually distinct error display with a light red background, warning icon, and proper spacing. This implements the PR objective for displaying submission errors in a red-bordered box for increased visibility.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@barecheck
Copy link

barecheck bot commented Nov 6, 2025

Dedupe Hub App | Unittest test suite - Code coverage report

Total: 55.73%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

@barecheck
Copy link

barecheck bot commented Nov 6, 2025

Countries App | Unittest test suite - Code coverage report

Total: 100%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

@barecheck
Copy link

barecheck bot commented Nov 6, 2025

Contricleaner App | Unittest test suite - Code coverage report

Total: 98.75%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

@barecheck
Copy link

barecheck bot commented Nov 6, 2025

Django App | Unittest test suite - Code coverage report

Total: 81.48%

Your code coverage diff: 0.00% ▴

✅ All code changes are covered

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants