add UI support for repo field in search results

[Mansi2007275]

Summary

Closes #265

Adds optional UI support for the repo field now present
in PDS data sources.

Changes Made

bin/database_build.py

• Added repo column to MySQL table schema in createTable()
• Updated jsontosql() to handle all INSERT cases

src/classes/package_search.py

• Added repo to both SELECT queries in searchSQLPackages()

src/static/js/views/home.html

• Added optional "Show Repository" checkbox
• Added Repository column — shows clickable link when repo
  exists, shows — when absent

[pleia2]

A couple days before your change, #302 was merged which handles the bin/database_build.py part of this, so you can remove this file from your change.

But the bigger issue is that we removed Flask entirely from this repository recently, so your work was on the old UI, oops! ☹️

We want this change on the new React-based front-end, which currently looks like this:

I'm thinking we want something like the version number tag (in the above screenshot, it's "0.2.0-1"), perhaps in another color? For sources that come from the IBM Validated software list.

[Mansi2007275]

Hi @pleia2, @vmuralictr thanks for the feedback! I've updated the PR to work with the new React/Node.js stack instead of the old Flask-based UI.
Changes made:

Removed the old Flask-based changes (src/classes/package_search.py, src/static/js/views/home.html) since Flask has been removed from the repo
Removed bin/database_build.py changes since #302 already handles this (now in bin/database_build.js)
backend/index.js — added repo to the SQL SELECT queries in the /searchPackages route
react-frontend/src/components/SearchBar.jsx — mapped the repo field from the API response
react-frontend/src/components/SearchResults.jsx — added a "Validated" tag next to the version tag when a package has a repo link, similar to how the version tag looks in your screenshot
react-frontend/src/App.css — added a .repo-tag style (purple) to visually distinguish it from the version tag (blue) and distro tag (green)

[Mansi2007275]

if there any issue then do let me know sorry for the delay

[pleia2]

We'll also need the DCO sign-off on the commits 😄

[Mansi2007275]

Hi @pleia2,

Thanks for the feedback! I've made the following changes:

Removed the link — changed the repo tag from a clickable link to a plain , since the repo field isn't a URL. It now displays the actual repo text (e.g. "FTP3 Product-SLES16.0 Pool scc repository") instead of the hardcoded "Validated" label.
Made it optional — added a "Show Repository" checkbox (next to the existing "Search Description" checkbox) so the field only displays when the user opts in.
DCO sign-off — the commit is now signed off.

Let me know if any further changes are needed!

[pleia2]

Not sure precisely what's causing it, but with your changes to SearchBar.jsx applied, the list of Distributions available has disappeared from the UI:

[vmuralictr]

Hi @Mansi2007275, thanks for the contribution! I tested your PR locally and found a few things to fix before we can merge:

1. repo missing from backend SELECT — add repo to all 3 SELECT queries in backend/index.js
2. Wrong environment variable — process.env.REACT_APP_API_URL should be import.meta.env.VITE_REACT_APP_API_URL (the project was migrated to Vite in Migrate React frontend from Create React App to Vite #291)
3. Missing newline at end of SearchResults.jsx
4. DCO sign-off needed on all commits

[pleia2]

@Mansi2007275 Have you had a chance to look at @vmuralictr's comments above? I'm hoping to do some user testing over the next couple weeks, and it would be great to have this feature land before that.