feat: add "Created on" column to SBOMs by package tab (#583)

[rkdfx]

Adds the "Created on" column to the "SBOMs using package" tab on the package detail page, matching the main SBOM list. Uses the existing published field with sortable column support.

Closes #583

Summary by Sourcery

Add a created-on date column to the SBOMs-by-package table on the package detail page, aligning it with the main SBOM list and enabling sorting by this field.

New Features:

• Display a Created on column for SBOMs in the package details SBOMs-by-package tab using the existing published date.
• Allow sorting SBOMs by their created-on (published) date in the SBOMs-by-package table.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adds a sortable "Created on" (published) column to the SBOMs-by-package table, wiring it through the table controls and rendering a formatted date, while slightly adjusting column widths to accommodate the new column.

Sequence diagram for sorting SBOMs by Created on in SbomsByPackage

sequenceDiagram
  actor User
  participant SbomsByPackage
  participant TableControls
  participant SbomQuery as useFetchSbomsByPackageId

  User->>SbomsByPackage: Load package_details_page_with_purl
  SbomsByPackage->>TableControls: useControlledTableParams(columns, sortableColumns[name,published])
  TableControls-->>SbomsByPackage: tableControlState_with_hubSortFieldKeys(name,published)
  SbomsByPackage->>SbomQuery: useFetchSbomsByPackageId(purl, sortField, sortDirection)
  SbomQuery-->>SbomsByPackage: sboms_list_with_published
  loop Render table
    SbomsByPackage->>SbomsByPackage: formatDate(published) for each_row
    SbomsByPackage-->>User: Render table_with_created_on_column
  end

  User->>SbomsByPackage: Click_created_on_column_header
  SbomsByPackage->>TableControls: updateSort(columnKey=published)
  TableControls-->>SbomsByPackage: updated_tableControlState(sortField=published)
  SbomsByPackage->>SbomQuery: refetch_sboms(sortField=published)
  SbomQuery-->>SbomsByPackage: sorted_sboms_by_published
  SbomsByPackage-->>User: Re_render_table_sorted_by_created_on

Loading

Class diagram for SbomsByPackage component with Created on column

classDiagram
  class SbomsByPackage {
    +string purl
    +SbomsByPackage(props)
    -columns: object
    -sortableColumns: string[]
    -filterCategories: object[]
    -tableControlState: object
    -items: SbomItem[]
  }

  class SbomItem {
    +string id
    +string name
    +string[] suppliers
    +DescribedByItem[] described_by
    +string published
  }

  class DescribedByItem {
    +string version
  }

  class useControlledTableParams {
    +useControlledTableParams(columns, isPaginationEnabled, isSortEnabled, sortableColumns, isFilterEnabled, filterCategories)
  }

  class useTableControlProps {
    +useTableControlProps(tableControlState, hubSortFieldKeys)
  }

  class useFetchSbomsByPackageId {
    +useFetchSbomsByPackageId(purl, sortField, sortDirection)
  }

  class formatDate {
    +formatDate(dateString)
  }

  SbomsByPackage --> useControlledTableParams : uses
  SbomsByPackage --> useTableControlProps : uses
  SbomsByPackage --> useFetchSbomsByPackageId : uses
  SbomsByPackage --> formatDate : formats_published
  SbomsByPackage --> SbomItem : renders
  SbomItem --> DescribedByItem : contains

  class HubSortFieldKeys {
    +string name
    +string published
  }

  SbomsByPackage --> HubSortFieldKeys : configures_sort_fields

Loading

File-Level Changes

Change	Details	Files
Expose the SBOM published date as a new sortable "Created on" column in the SBOMs-by-package table.	Import the shared formatDate helper to render the SBOM published timestamp consistently with other tables. Add a published entry to the table columns configuration with label "Created on" and include it in the sortableColumns array. Wire the published field into hubSortFieldKeys so server-side or hook-based sorting can use the correct backend field. Render a new table header cell and body cell for the published column, using getThProps/getTdProps and formatDate(item.published). Rebalance existing column widths (name and supplier) and assign width to the new published column so the layout accommodates the extra column.	client/src/app/pages/package-details/sboms-by-package.tsx

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#583	Add a "Created on" column to the "SBOMs using package" tab that displays the SBOM creation date and supports sorting, consistent with the main SBOM list.	✅

Possibly linked issues

• Add "created on" to "SBOMs using package" tab #583: PR adds a sortable Created on (published) column to the SBOMs using package tab as requested.

---

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.

[sourcery-ai]

Hey - I've left some high level feedback:

• When rendering the new published column, consider defensively handling missing or invalid item.published values (e.g., null/undefined or unexpected formats) before passing them to formatDate to avoid runtime errors or inconsistent display.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- When rendering the new `published` column, consider defensively handling missing or invalid `item.published` values (e.g., null/undefined or unexpected formats) before passing them to `formatDate` to avoid runtime errors or inconsistent display.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.82%. Comparing base (2007d2c) to head (ee69a18).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #982      +/-   ##
==========================================
+ Coverage   66.79%   66.82%   +0.02%     
==========================================
  Files         221      221              
  Lines        3882     3882              
  Branches      898      898              
==========================================
+ Hits         2593     2594       +1     
+ Misses        949      946       -3     
- Partials      340      342       +2     

☔ 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.