Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add upgradable packages list component #2636

Merged
merged 4 commits into from
May 23, 2024

Conversation

jamie-suse
Copy link
Contributor

Description

This PR add an upgradable packages list component.

Example output:

image

How was this tested?

Added unit test and Storybook demo.

@jamie-suse jamie-suse added enhancement New feature or request javascript Pull requests that update Javascript code labels May 20, 2024
@jamie-suse jamie-suse marked this pull request as ready for review May 20, 2024 10:08
@jamie-suse jamie-suse requested a review from dottorblaster May 20, 2024 10:08
@jamie-suse jamie-suse force-pushed the upgradable-pkgs-list branch from e54e0c3 to 1dde68d Compare May 22, 2024 15:24
@jamie-suse jamie-suse changed the base branch from main to suse-manager-overviews May 22, 2024 15:25
Copy link
Contributor

@dottorblaster dottorblaster left a comment

Choose a reason for hiding this comment

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

Just a couple things then we can merge, nice job! 💪

Comment on lines 54 to 63
<h1 className="text-3xl w-4/5 p-4">
<span className="font-medium">Upgradable Packages: </span>
<span
className={classNames(
'font-bold truncate w-60 inline-block align-top'
)}
>
{hostname}
</span>
</h1>
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we can move all of this into the page component 👍

],
};

const data = upgradablePackages.map((up) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const data = upgradablePackages.map((up) => {
const data = upgradablePackages.map((package) => {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Parsing error: The keyword 'package' is reserved

Identifier expected. 'package' is a reserved word in strict mode. Modules are automatically in strict mode.

Copy link
Contributor

Choose a reason for hiding this comment

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

Frown

This will be moved to the corresponding *page* component
Copy link
Contributor

@dottorblaster dottorblaster left a comment

Choose a reason for hiding this comment

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

LGTM

@jamie-suse jamie-suse merged commit 66cc9a7 into suse-manager-overviews May 23, 2024
26 checks passed
@jamie-suse jamie-suse deleted the upgradable-pkgs-list branch May 23, 2024 15:25
dottorblaster added a commit that referenced this pull request Jun 28, 2024
* Add PatchList component (#2623)

* Port relevant_patch_factory from Elixir to JavaScript

This commit adds a ported version of the relevant_patch_factory, so it
is available in tests and Storybook.

* Add PatchList component and accompanying stories

This commit adds the PatchList component. It will become the basis for
the relevant patches page.

* Implement changes requested for merge

* Make eslint happy

* Add jest test for PatchList

* Remove Link component from PatchList

This commit removes the Link component from React Router DOM and
replaces it with an onNavigate function. This way the component becomes
encapsulated from the responsibility of handling the navigation.

* Move onNavigate from the patches array to a prop

This makes the API way cleaner from a callee perspective.

* Patches for a single package plus errata details infrastructure (#2643)

* Add factories

* Add http ground work for errata details and patches for package

* Add callbacks to discovery, patches for package function to the context

* Add tests

* Fix missing label in tests

* Change relevant_patches_hosts to relevant_patches_system_ids

* LMAO logging

* Add upgradable packages list component (#2636)

* Fix empty body inside SUMA http executor (#2648)

* Add host patches page (#2649)

* Filter patches on HostRelevantPatches

This commit introducses filtering by advisory and synapsis and adds a
suppoprting story.

* Clean up styling and rename host to hostName

* Add HostRelevantPatches page and state selectors

* Update routes to include HostRelevantPatches

* Resolve and add TODOs with Alessio

This commit adds TODOs and resolves open questions

* Fix formatting

* Fix Storybook story after renaming a variable

Furthermore, this patch removes a wrapper container for the story, as
that is nod needed anymore

* Add relevant patches factory to common export

* Fix linting errors

* Remove debugging styles

* Add Jest test for HostRelevantPatches page

* Add test for the selector and rename HostRelevantPatches

* Add tiny fixes to host relevant patches page (#2653)

* Add patches for packages to SUSE Manager controller (#2654)

* Add upgradable packages view (#2668)

* Add sorting to `Table` component (#2669)

* Add sorting in `Upgradable Packages` & `Available Patches` lists (#2679)

* Add header to upgradable packages view (#2685)

* Add search to table component (#2684)

* Add search to table component

This commit adds a search capability to the table component.
The search is case insensitive and respects normalises Unicode character
differences. However, it is not fuzzy or can accommodate spelling
mistakes.

Furthermore, the change is supported via a story and several test cases,
that describe the behaviour.

* Functional JavaScript aka. fix ESLint

Prefer array iteration methods over for loops

* Implement changes proposed by Jamie

Thanks for the feedback. I agree with all of it.

* Ripping search out of the Table

This commit removes the search API from the Table component and adds a
reduced version to the @lib folder.

The idea is that the components themselves are now responsible for
handling search and the library just provides utilities and functions to
make this simpler.

* Move HostRelevantPatchesPage to new search API

* Add search to UpgradablePackagesPage

This commit adds search to the UpgradablePackagesPage. Furthermore, it
adds a story for the page and splits the Page into a navigation and
Redux independent part for easier design work.

* Add inspect function

This commit adds a Elixir inspired inspect function. Using this
function, one can log data to the console, without breaking up long call
chains.

It's literally the identity function plus a "console.dir()".

* Add test fro search

* Add test for filtering in pages

This commit adds tests for filtering the UpgradablePackagesPage and
HostRelevantPatchesPage by their content via search.

* Remove dead code

This commit completely removes the search API from the Table.

* Add search to UpgradablePackagesPage

This commit adds search to the UpgradablePackagesPage. Furthermore, it
adds a story for the page and splits the Page into a navigation and
Redux independent part for easier design work.

* Keep consistent casing

* Fix case

* Rename Page and UpgradablePackages

* Fix ESLint

* Implement changes proposed by Jamie

* Add ability to download CSV file when `Download CSV` button is clicked (#2688)

* SUSE Manager views navigation (#2689)

* Add navigation for SUSE Manager box in host details

* Fix tests and update storybook stories

* Make the indicators in AvailableSoftwareUpdates a11y-compliant

* Rename navigate to onNavigate

* Add `Errata Details` controller (#2700)

* Add controller to get errata details

* Make *all* properties of response (`ErrataDetailsResponse`) snake case

* Add ability to get Bugzilla fixes from SUMA (#2715)

* Add advisory details page (#2699)

* Add styled AdvisoryDetails page and accompanying story

* Rework AdvisoryDetails for errata data

This commit updates booth the AdvisoryDetails story and the component to
accept data, that comes from the errata endpoint directly.

* Add and mount the advisory details page

This commit adds an advisory details page and mounts it.

* Add factories for the advisory errata

* Add simple test for the advisory details page

This commit adds a test case for the advisory page.

* Add AdvisoryIcon

This commit adds an AdvisoryIcon component, since it has to be used in
multiple places.  I extracted the component, because it is easy to miss,
when adding another advisory type to the backend.

I can not add any a11y information to the upstream component, which
means I will not be able to easily differentiate between the SVGs.
I might have to do these changes upstream.

* Move AdvisoryDetails and AdvisoryDetailsPage to AdvisoryIcon

* Remove unneeded API and polish story

* Fix typos

* Adhere to snake case

* Only render list element, when data is available

* Fix wrong API and network call

* Add render test for AdvisoryIcon

* Include errata data in AdvisoryDetails test

* Fix styling

* Fix ESLint issues

* Fix API call

* Enhance backend fixture

* Fix format

* Add back advisory details page in the router

* Fix typo add test for CVEs fixes and packages

---------

Co-authored-by: Alessio Biancalana <alessio.biancalana@suse.com>

---------

Co-authored-by: Jan Fooken <jan.fooken@suse.com>
Co-authored-by: Jamie Rodríguez <jamie.rodriguez@suse.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request javascript Pull requests that update Javascript code
Development

Successfully merging this pull request may close these issues.

2 participants