Grouping for Product - Group create/edit front end

[stanislavsemeniuk]

This pr is trying to resolve this issue:

https://issues.redhat.com/browse/TC-3447

Implemented SBOMGroupFormModal component that can be used as a form for creating and editing sbom group. Used react hook form and patternfly input components. Also implemented reusable component for adding labels that can be used inside hook form - HookFormPFAddLabels.

Pr is only in draft stage because as far as i know we don't have api endpoint yet (could be wrong)

Summary by Sourcery

Add a modal-driven form for creating and editing SBOM groups and wire it into the SBOM list toolbar.

New Features:

• Introduce SBOMGroupFormModal to capture SBOM group details including name, parent group, product flag, description, and labels.
• Add a reusable HookFormPFAddLabels field component for managing metadata labels within react-hook-form.
• Expose controllerProps in HookFormPFGroupController to allow passing validation and other Controller options from consumers.
• Add a Create Group action to the SBOM toolbar that opens the new group form modal.

[sourcery-ai]

Reviewer's Guide

Implements a reusable SBOM group create/edit modal and a generic label-adding hook-form component, wires the modal into the SBOM toolbar with a new "Create Group" action, and extends the hook-form group controller to accept extra react-hook-form Controller props.

Sequence diagram for SBOM group modal open and form submission

sequenceDiagram
  actor User
  participant SbomToolbar
  participant SBOMGroupFormModal
  participant ReactHookForm
  participant HookFormPFAddLabels

  User->>SbomToolbar: click Create Group button
  SbomToolbar->>SbomToolbar: setCreateGroupOpened(true)
  SbomToolbar->>SBOMGroupFormModal: render isOpen=true onClose onSubmit

  SBOMGroupFormModal->>ReactHookForm: useForm(defaultValues, initialValues)
  ReactHookForm-->>SBOMGroupFormModal: control handleSubmit formState

  SBOMGroupFormModal->>HookFormPFAddLabels: render with control name labels restrictedLabels
  HookFormPFAddLabels->>HookFormPFAddLabels: manage newLabel labelError state

  User->>HookFormPFAddLabels: type label and press Enter
  HookFormPFAddLabels->>HookFormPFAddLabels: validate not empty/restricted/duplicate
  HookFormPFAddLabels->>ReactHookForm: onChange(updatedLabels)

  User->>SBOMGroupFormModal: click Create button (submit)
  SBOMGroupFormModal->>ReactHookForm: handleSubmit(onSubmitHandler)
  ReactHookForm->>ReactHookForm: validate fields using controllerProps rules
  ReactHookForm-->>SBOMGroupFormModal: values
  SBOMGroupFormModal->>SbomToolbar: onSubmit(values)
  SbomToolbar->>SbomToolbar: console.log(values) (current draft behavior)

Loading

Class diagram for SBOM group modal and hook-form label component

classDiagram

  class SbomToolbar {
    +showFilters boolean
    +showBulkSelector boolean
    +showActions boolean
    +SbomToolbar(props)
    -createGroupOpened boolean
    -closeCreateGroup()
  }

  class SBOMGroupFormModal {
    +isOpen boolean
    +onClose()
    +onSubmit(values)
    +initialValues SBOMGroupFormValues
    +type string
    +SBOMGroupFormModal(props)
    -isAdvancedExpanded boolean
    -onSubmitHandler(values)
  }

  class SBOMGroupFormValues {
    +name string
    +parentGroup string
    +isProduct string
    +description string
    +labels string[]
  }

  class HookFormPFGroupController {
    +control Control
    +controllerProps ControllerProps
    +label ReactNode
    +labelIcon ReactElement
    +name Path
    +fieldId string
    +isRequired boolean
    +renderInput(renderProps)
  }

  class HookFormPFAddLabels {
    +inputPlaceholder string
    +inputAriaLabel string
    +restrictedLabels string[]
    +HookFormPFAddLabels(props)
    -newLabel string
    -labelError string
  }

  class HookFormPFTextInput {
    +control Control
    +controllerProps ControllerProps
    +name Path
    +label ReactNode
    +fieldId string
    +isRequired boolean
    +placeholder string
  }

  class HookFormPFSelect {
    +control Control
    +name Path
    +label ReactNode
    +fieldId string
    +placeholder string
  }

  class HookFormPFTextArea {
    +control Control
    +name Path
    +label ReactNode
    +fieldId string
    +resizeOrientation string
    +placeholder string
  }

  SbomToolbar --> SBOMGroupFormModal : renders
  SBOMGroupFormModal ..> HookFormPFTextInput : uses
  SBOMGroupFormModal ..> HookFormPFSelect : uses
  SBOMGroupFormModal ..> HookFormPFGroupController : uses
  SBOMGroupFormModal ..> HookFormPFTextArea : uses
  SBOMGroupFormModal ..> HookFormPFAddLabels : uses

  HookFormPFAddLabels ..> HookFormPFGroupController : wraps
  HookFormPFGroupController <.. HookFormPFTextInput : base props
  HookFormPFGroupController <.. HookFormPFSelect : base props
  HookFormPFGroupController <.. HookFormPFTextArea : base props

Loading

File-Level Changes

Change	Details	Files
Add SBOMGroupFormModal for creating/editing SBOM groups using react-hook-form and PatternFly components.	Define SBOMGroupFormValues and SBOMGroupFormModalProps, including create/edit mode and optional initial values. Initialize and reset form state with react-hook-form, merging defaults with provided initial values when the modal opens. Implement required fields for group name and isProduct, optional parentGroup and description, and an expandable advanced section for labels via HookFormPFAddLabels. Wire submit and cancel buttons to the form, using form validity/submitting state to disable the submit button appropriately.	client/src/app/pages/sbom-list/components/SBOMGroupFormModal.tsx
Wire the new SBOM group modal into the SBOM list toolbar and add a "Create Group" action.	Add local state to SbomToolbar to control the visibility of SBOMGroupFormModal. Insert a new primary "Create Group" button before existing actions that opens the modal. Render SBOMGroupFormModal next to the toolbar, passing open/close handlers and a temporary console.log-based submit handler.	client/src/app/pages/sbom-list/sbom-toolbar.tsx
Extend HookFormPFGroupController to accept additional react-hook-form Controller props and expose them to consumers.	Add an optional controllerProps field to BaseHookFormPFGroupControllerProps and thread it through HookFormPFGroupController. Spread controllerProps into the underlying react-hook-form Controller component, excluding render, name, and control. Update extractGroupControllerProps to carry controllerProps through to extractedProps so higher-level components can use it.	client/src/app/components/HookFormPFFields/HookFormPFGroupController.tsx
Introduce a reusable HookFormPFAddLabels component for adding and managing label lists within hook forms.	Create HookFormPFAddLabels as a wrapper around HookFormPFGroupController that uses extractGroupControllerProps to separate group and custom props. Maintain local state for the pending label text and per-input label validation errors. Implement label add/remove logic with duplicate checks and configurable restricted labels, rendering labels in a PatternFly LabelGroup within a Card. Export HookFormPFAddLabels via the HookFormPFFields barrel file for reuse in other forms.	client/src/app/components/HookFormPFFields/HookFormPFAddLabels.tsx client/src/app/components/HookFormPFFields/index.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[codecov]

Codecov Report

❌ Patch coverage is 27.11864% with 43 lines in your changes missing coverage. Please review.
✅ Project coverage is 62.12%. Comparing base (a9efaad) to head (b2a7bdb).

Files with missing lines	Patch %	Lines
...omponents/HookFormPFFields/HookFormPFAddLabels.tsx	3.12%	31 Missing ⚠️
.../pages/sbom-list/components/SBOMGroupFormModal.tsx	55.55%	7 Missing and 1 partial ⚠️
client/src/app/pages/sbom-list/sbom-toolbar.tsx	55.55%	4 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #886      +/-   ##
==========================================
- Coverage   63.29%   62.12%   -1.17%     
==========================================
  Files         184      190       +6     
  Lines        3264     3356      +92     
  Branches      742      764      +22     
==========================================
+ Hits         2066     2085      +19     
- Misses        910      980      +70     
- Partials      288      291       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.