Is your feature request related to a problem? Please describe.
As a Search UI user, I want to be able to see all the licenses and environment information on their own pages/

High-level Goals

• Licenses page
• Environment page

Describe the solution you'd like
I want each page to at least list all the available data but also pull out and highlight urgent or concerning data.

Additional context
The search ui already has tabs for these but they are greyed out

Acceptance Criteria

• list of all licenses
• provide if license is OSG
• show relevant packages that have that license
• show python environment
• show os env

As a Thoth UI user, I want a better navigational experience that can be used across all my devices.

We can convert Thoth Search UI to conform to Material Design 3 standards. This solves manny of the smaller UI fixes that need to be completed as part of the EPIC.

• Convert color and text theme to use MD3
• convert component styling to use MD3
• change navigation to use drawers

Is your feature request related to a problem? Please describe.
add links to upstream docs, for example for "Package is maintained according to Security Scorecards"

High-level Goals
improve the understandability of the information we provide.

Describe the solution you'd like
add ahref

Describe alternatives you've considered
none

Additional context
n/a

Acceptance Criteria

• link is clickable on search WUI

Hey, Kebechet!

Create a new patch release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a patch release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Describe the bug
On the home page, if you press enter after typing out a search, it will refresh the page instead of navigating.

To Reproduce
Steps to reproduce the behavior:

1. Go to homepage
2. Type query
3. Press ENTER key

Expected behavior
To navigate to the next page as if you pressed the button.

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Is your feature request related to a problem? Please describe.
As a Thoth developer I would like to have tests to check the integrity of the app.

High-level Goals
Add unit and integration tests to the React app.

Describe the solution you'd like
Add unit tests to core functions and integration tests to page components. For example, the data flow of packages and advise reports should be tested.

Acceptance Criteria

• unit tests for package data mutation
• unit tests for advise data mutation
• integration tests for package data flow
• integration tests for advise data flow
• usability tests for user iterations with the package package overview component

thoth-station/integration-tests#225

• pre-commit
• lint
• prettier
• jesk tests
• templates
• bots

Is your feature request related to a problem? Please describe.
As a Thoth Search user, I would like to see how much data Thoth has to assure me that I am getting a thorough result.

High-level Goals
Create a hook to grab Thoth data and populate in the home screen.

Describe the solution you'd like
Use API endpoints through the User API to get the data needed to display.

Describe alternatives you've considered
Hard code data

Additional context

Describe the bug
The web app is not able to build from forked PRs

To Reproduce
Build app using GitHub action Build

Expected behavior
expected to pass build but fails on gh-pages -d build

Additional context
https://github.com/thoth-station/thoth-search/actions/runs/1574999244

Is your feature request related to a problem? Please describe.
As a user of Thoth Search, I would like to be able to see the dependencies of a package and be able to navigate to their respective details.

High-level Goals

• Metric card gives all dependencies, and distinguishes between required and extra packages
• Able to navigate to the dependency package's page (routing)
• Able to see which versions can be installed ex: >= 2.2.1
  • provide a dropdown from the broad selector >= 2.2.1, to a list of all those versions
  • contents are links

Describe the solution you'd like
A new metric card that lists the dependencies and which versions of those dependencies that can be installed.

Additional context
Use the metric cards from advise report for context on how to incorporate them.

Is your feature request related to a problem? Please describe.
As a super user of Thoth, I want to be able to run an advise from the UI with a count more than 1, so that I can pick from multiple returned software stacks.

This feature depends on the resolution of thoth-station/user-api#1726.

High-level Goals
Add a count field tp the home page advise params, and add a way to see multiple advise reports and their differences.

Describe the solution you'd like
I want to be able to see the top advise results in a comparative way so I can pick a favorite.

Describe alternatives you've considered
Not possible in the UI

Acceptance Criteria
new param for count in the advise creation form n/a

• a way to switch and compare between advise reports.

As a Thoth Search UI developer, I want to know if the app will fail because of changes in the User API.

Acceptance Criteria

• A test for each call to the User API
• A test should handle different types of errors from the API (404, 500, ...)
• Tests should run before every push to Stage

Describe the bug

The search UI is currently unable to show information about individual packages.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://thoth-station.ninja/search/
2. Enter pandas as a package name (or any other package that is supposed to be known by Thoth)
3. Click on Analize
4. See error: Thoth does not know about that package

Expected behavior

Information about the requested package should be shown

Screenshots

Taking pandas as an example, the search UI checks this API call:

$ http 'https://khemenu.thoth-station.ninja/api/v1/python/package/versions?name=pandas&per_page=1'
HTTP/1.1 400 BAD REQUEST
access-control-allow-origin: *
content-length: 123
content-type: application/problem+json
date: Tue, 07 Jun 2022 21:02:02 GMT
server: gunicorn
set-cookie: 99770cb82864be05282857f803e02327=dc3a560c7c01a697dac473a08753a6f6; path=/; HttpOnly; Secure; SameSite=None
x-thoth-search-ui-url: https://thoth-station.ninja/search/
x-thoth-version: 0.35.2
x-user-api-service-version: 0.35.2+messaging.0.16.1.storages.0.72.1.common.0.36.2.python.0.16.10

{
    "detail": "Extra query parameter(s) per_page not in spec",
    "status": 400,
    "title": null,
    "type": "about:blank"
}

Is your feature request related to a problem? Please describe.
As a new Thoth user, I am confused on what certain metrics mean or what certain acronyms mean.

High-level Goals
Add question mark icons that display text to describe confusing sections.

Describe the solution you'd like
A component that can be inserted anywhere easily.

Describe alternatives you've considered
Rewording or adding text to metrics that are confusing.

Additional context

Acceptance Criteria

• A help/tip component that can be placed anywhere
• Add the tips to confusing parts of app

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Is your feature request related to a problem? Please describe.
As a service user, I want to be able to see all the data available in an advise document.

High-level Goals
Add or change UI to accommodate for more details.

Additional context
The advise document is not being fully represented.

Acceptance Criteria

• show INFO messages from advise stack_info
• show environment info for what an advise is based on
• show more info on what the advise was run on (metadata)
• show justifications that are not specifically for a package
• show package metadata on package overview page
• ABI shown in container image view (skopeo-inspect)

No dependency management found for the default environment. If you want
to keep your dependencies managed, please submit Pipfile or requirements.in or requirements-dev.in file.

To generate a Pipfile, use:

$ pip install --upgrade --user thamos
$ thamos discover --src-path ./
$ git add Pipfile
$ git commit -m 'Add Pipfile for dependency management'

Make sure your Pipfile or requirements.in or requirements-dev.in is placed in the root of your Git repository.

/kind feature
/priority important-soon

Is your feature request related to a problem? Please describe.
Just a list of things I'd improve in the output:

• Drop down where I pick from the past advises: please show a real date or some meaningful information, IDs are hard to process by humans, e.g.
  • adviser-220712133932-7d4aebd09e248cca - yuck
  • 2022-07-12T13:39:47 security, RHEL-8.5 (Python 3.8.8) - I get that
• Reorder sections: I personally don't care about internals, I care about the actual results: "Stack info" should be up, "Arguments" down
• -, +, ~ - it took some time to understand the output. Mostly because I'm used to associating colors with the diff output: lines starting with + should be green, - red, ~ yellow

With these simple improvements, I'd say the Compare tab would be even more useful.

No dependency management found for the default environment. If you want
to keep your dependencies managed, please submit Pipfile or requirements.in or requirements-dev.in file.

To generate a Pipfile, use:

$ pip install --upgrade --user thamos
$ thamos discover --src-path ./
$ git add Pipfile
$ git commit -m 'Add Pipfile for dependency management'

Make sure your Pipfile or requirements.in or requirements-dev.in is placed in the root of your Git repository.

/kind feature
/priority important-soon

Is your feature request related to a problem? Please describe.
As a user of Thoth Search UI, I would like to not only see the direct dependencies in the list, but also counts for total dependencies among other parameters. I would also like to be linked to other parts of the app from this page.

High-level Goals
more interactive page.

Describe the solution you'd like

• drop down menu for dependency column
  
• Add link to specific page of the package

Acceptance Criteria

• Drop down menu replaces "Dependency count label"
  • options to include are: total dependencies, total warnings, total file size
• add links to package page

Is your feature request related to a problem? Please describe.
After a conversation with a UI/UX expert, I have formulated a list of fixes to the UI of Thoth Search.

Acceptance Criteria

• #75
• align spacing on edges of cards
• convert large header into small header
  • Use breadcrumb navigation Home / adviser-213123132... / summary
  • move adviser doc name and completion to just the summary page or on the header
  • move logs to its own tab
• have latest log shown when advise is loading ( possibly a web-socket with the log endpoint? )
• prioritize info on the summary page at the top (priority on most critical info about the environment)
• #91
  • adding more internal linking between components and justifications
  • add more complex table on detail page so user can be linked to filters on licensees and other metadata
  • add more columns to the details package table
  • be able to link to specific sections and searches on the details and compare pages
• break up the licenses summary metric card accordion into root, direct, indirect (labeled)
• possibly incorporate (fig-1) into Thoth justifications on detail page
• possibly look into using different graphs and visualizations that compare data better compared to (fig-2). Or remove them if they don't provide value.

fig-1

fig-2

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Describe the bug

It seems that the numbers for Direct and Root depencencies in the summary are reversed, i.e. Root is showing the number of direct dependencies, while Direct is showing the number of root level dependencies.

To Reproduce
Steps to reproduce the behavior:

1. Have a Pipfile with a single dependency on it, nltk
2. Request a stack advise
3. Check the advise results in the search UI
4. Notice that the Dependencies Summary box shows wrong numbers

Expected behavior

There should be only 1 root package (nltk) and 4 direct (nltk's dependencies).

Screenshots

Additional context

Here is the advise I looked at: https://thoth-station.ninja/search/advise/adviser-220524121408-dc0af1f4d2307c27/summary

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

No dependency management found for the default environment. If you want
to keep your dependencies managed, please submit Pipfile or requirements.in or requirements-dev.in file.

To generate a Pipfile, use:

$ pip install --upgrade --user thamos
$ thamos discover --src-path ./
$ git add Pipfile
$ git commit -m 'Add Pipfile for dependency management'

Make sure your Pipfile or requirements.in or requirements-dev.in is placed in the root of your Git repository.

/kind feature
/priority important-soon

Is your feature request related to a problem? Please describe.
As a user of Thoth Search, I would like there to be a footer with links to other Thoth and Org related projects.

High-level Goals
Populate the footer similar to https://thoth-station.ninja/

Acceptance Criteria

• include helpful links to socials and other Thoth related pages
• include links to info pages (docs and landing page)
• include links to friends (AICoE-CI, Operate First, Open Data Hub)
• include RedHat logo

Hey, Kebechet!

Create a new minor release, please.

Is your feature request related to a problem? Please describe.
As a user of Thoth, I want to see details of the dependencies of my advise report.

High-level Goals
A new page detailing the dependencies of a advise

Acceptance Criteria
New page for dependencies

• charts detailing: size of package, root/direct/indirect deps, shared installs between pkgs, licenses and warnings aggregated.
• a network graph view
• [ ]

As a Thoth user, I want to see the most important information on one page so I dont have to dig around the site.

Acceptance criteria

• a summary of important justifications on the summary page
• adding more internal linking between components and justifications
• be able to link to specific sections and searches on the details and compare pages

Is your feature request related to a problem? Please describe.
As a Thoth search user, I expect data displayed in a readable way. In the Advise details tab, in the justifications card, all justifications are displayed in a list which is hard to read.

High-level Goals
Organize the justifications into either there own separate cards or into some other organized fashion. Try to include as much of the data as possible in as little space as possible

Describe the solution you'd like
Either new cards apart from justifications or as tags/banners in the header of the package.

Describe alternatives you've considered
Don't display info justifications

Additional context

Acceptance Criteria

• list is not longer visible
• data is all being displayed somewhere
• scorecards info in their own card
• group items in the UI (ex. links to GitHub, …)
• group items in the justification based on URL and see if that clustering will visualize justifications better

Describe the bug

I'm unable to browse adviser results.

To Reproduce
Steps to reproduce the behavior:

1. Trigger thamos advise
2. Wait for the recommendations to be computed
3. Check the URL to Thoth Search reported - ex. https://thoth-station.ninja/search/adviser-220329062130-e66ea4b2a189ee44/summary
4. See an error

Expected behavior

Thoth Search UI should show results of the advise.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Is your feature request related to a problem? Please describe.
I want to be able to use https://www.chromatic.com/ to visualize new or changed features in the ui.

High-level Goals
Implement https://www.chromatic.com/ into GitHub PR checks

Acceptance Criteria

• add https://www.chromatic.com/ to each PR
• possible reformat of code architecture

Is your feature request related to a problem? Please describe.
Currently thoth-search only provides granularity up to a package name and version. It should also be able to be filtered down to os name/version, python version, and index.

High-level Goals

• Produce new routes to support more detailed package metrics
• Create a way to search for specific routes by building off #33

Describe the solution you'd like
The search will narrow down with first the package name, then version, os name, os version, and finally index. In the case where a package is not narrowed all the way down to index, a default index is used. If OS name/version and python version do not need to be specified

The differences in the environments and indexes will also be highlighted in the metrics unless a specific environment is specified. Meaning the UI will grab all docs and aggregate them together but compare the differences.

Possible new route:
thoth-search/{package_name}/{package_version}/{index_url}/{os_name}/{os_version}/{python_version} thoth-station/adviser#2223

Additional context
This solution relies on the access to Thoth solver documents https://github.com/thoth-station/adviser/issues/2226

There will also need to be user api endpoints for queries such as:

• given package name and version, give me the OS names and versions that support that package at that version https://github.com/thoth-station/adviser/issues/2225

Acceptance Criteria

• App can handle new route endpoints: /{package_name}/{package_version}/{index_url}/{os_name}/{os_version}/{python_version}
• Can change endpoint through drop-downs somewhere in header
  • drop-downs are the same as #33
• Solver data is grabbed per route specifications
• solver data is merged (preserving differences) in the case of un specific specifications.
• Links between dependency packages works i.e. tensorflow 1.2.3 -> six 4.5.6 (will use same OS and index when linking to new page. if unspecific, it will link to an unspecific page)

Is your feature request related to a problem? Please describe.
As a developer of Search, I would like to to develop using typescript to increase visibility of the code.

High-level Goals
Convert all files to typescript
Avoid typing everything with any

Describe the solution you'd like
Switch from using traditional ReactJS to Typescript React.

Describe alternatives you've considered
Continue using PropTypes to type out components.

Additional context
Typescript will provide a more concrete code base that can be converted to documentation more easily.

Acceptance Criteria

• Every file uses Typescript
• [ ] There are no uses of any (some third party libraries needed any)

Is your feature request related to a problem? Please describe.
As a data scientist, I want Search UI to be able to help me build up a Pipfile and then run an advise on it, so I can directly plug it into my own environment.

High-level Goals
Options to add packages and constraints to a form that generates a pipfile.

Describe the solution you'd like
A form that opens and allows me to add packages and edit their constraints.

Describe alternatives you've considered
Manual input

Acceptance Criteria

• new form menu on home screen
• ability to dynamically add and remove packages
• can see all package versions in a dropdown
• can dynamically pick a constraint for the package version
• can move packages around to either dev or default

Is your feature request related to a problem? Please describe.
related to thoth-station/user-api#1619

a (clickable) link to a view in Thoth Search UI (CC @Gkrumbach07) that shows additional information about container images in a human-readable and easily consumable form (ex. a listing of RPM packages, ABI present, Python interpreter version available, ...)
... see package-extract JSON document for a full listing of available metadata

High-level Goals

• A new page separate from the package search and advise search
• Follow the same format of main header and metric cards as the other pages
• Have its own endpoint in search /search/image/{image_id}

Describe the solution you'd like
A new page that can be linked to that displays all relevant information about a container image. It should be linked to whenever it is mentioned.

Acceptance Criteria

• new page with url endpoints working
• a header with name and other basic information
• possibly metric cards if there is enough data
• add thoth container image list to home page

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Hey, Kebechet!

Create a new minor release, please.

IMPORTANT NOTES

• If Khebut GitHub App Bot is installed, this issue will trigger a minor release. The bot will open a Pull Request to update the CHANGELOG, fix the opened issue and create a tag.

• Only users that are allowed to release (a.k.a. maintainers specified in the .thoth.yaml file) can open the issue, otherwise bot will reject them, commenting and closing the issue. If AICoE CI GitHub App is installed, once the pull request is merged and a new tag is created by the bot, the pipeline to build and push image starts.

Is your feature request related to a problem? Please describe.
As a data scientist, I want to be able to visualize multiple runtime environments in my advise report so I can see what differences they have.

High-level Goals

Can run an advise with multiple runtime envs

• can visualize an advise with multiple runtim envs

Describe the solution you'd like
I want to be able to switch between different runtime envs with a dropdown and also have an option to compare their differences.

Describe alternatives you've considered
Only show one env

Acceptance Criteria

• new form options to add x many runtime environments local history instead (see comment)
• a dropdown to switch between which report to look at (might need to refactor how old and new envs work)
• A way to see old reports and go to them - from home page
• OPTIONAL - a way to add reports to a compare screen. (make this dynamic so it can be any two including the old lockfile)

Describe the bug
When searching for a package, thoth api will also throw a 404 because a version is not specified. It falls back to PyPi data.

To Reproduce
https://thoth-station.ninja/thoth-search/package/pandas

Expected behavior
It should check thoth for the latest version of the package and display that instead of defaulting to PyPi.

Additional context
Prioritize thoth in all ways possible and only when thoth does not have the data, do we fall back to PyPi. Always make a visual indication when PyPi is because used and show limitations PyPi data has.

To fix this bug:

• search thoth package versions to get the latest and display that, else fall back to PyPi
• store information on if a package metadata is from PyPi or Thoth Only use thoth data, null otherwise
• display an indicator or error/warning message to the user whenever PyPi metadata is used or a metric cannot be used b/c of PyPi data. Only use thoth data
• Create a new version picker in both the search screen and package page.

No dependency management found for the default environment. If you want
to keep your dependencies managed, please submit Pipfile or requirements.in or requirements-dev.in file.

To generate a Pipfile, use:

$ pip install --upgrade --user thamos
$ thamos discover --src-path ./
$ git add Pipfile
$ git commit -m 'Add Pipfile for dependency management'

Make sure your Pipfile or requirements.in or requirements-dev.in is placed in the root of your Git repository.

/kind feature
/priority important-soon