Redesign packages screen #376

maciaszczykm · 2022-07-20T09:02:25Z

Summary

Closes ENG-316.

This pull request updates all views for charts and terraform charts. I've already done most of the layer changes, updated part of component styling, removed duplicated code but still quite a lot is missing.

Test Plan

Tested manually.

Checklist

If required, I have updated the Plural documentation accordingly.
I have added tests to cover my changes.
I have added a meaningful title and summary to convey the impact of this PR to a user.
I have added relevant labels to this PR to help with categorization for release notes.

michaeljguarino · 2022-07-20T15:02:26Z

www/src/components/repos/packages/ChartReadme.js

+  const { current } = useContext(ChartContext)
+
+  return (
+    <Box pad="large"><Markdown components={MARKDOWN_STYLING}>{current?.readme || 'n/a'}</Markdown></Box>


we can use react routers Outlet component to manage this a bit smoother like in other views

I've used it already in a way like it is done for repositories (see Chart.js:291 if the link doesn't open). I'm not sure if that's enough or you would like to move the Outlet placement or add another one here for different purpose. Can you explain?

Oh I see you are structuring it right, where is the Outlet component injected in the component tree? I just couldn't find it in the diff anywhere

It's in Plural.js if i understand you correctly. There are only two of them at the moment as it's still in progress.

michaeljguarino · 2022-07-20T19:24:54Z

We should also have this pr be based on the packages-redesign branch

www/src/components/repository/RepositoryDescriptionMarkdown.js

maciaszczykm · 2022-07-22T10:21:47Z

You can review it already, once it will get approved I will merge and continue to work from another branch. I've created subissues for better progress tracking: https://linear.app/pluralsh/issue/ENG-316/redesign-packages-screen

Some screens from current state:

maciaszczykm · 2022-07-22T14:24:02Z

I've added some updates, i.e. version picker with installed label:

maciaszczykm · 2022-07-22T14:31:29Z

www/src/components/repos/queries.js

@@ -195,7 +195,7 @@ export const CHART_Q = gql`
      }
      installation { ...ChartInstallationFragment }
    }
-    versions(chartId: $chartId, first: 10, after: $cursor) {
+    versions(chartId: $chartId, first: 15, after: $cursor) {


I'll switch back to 10 once the button to load more will be done. 100 cannot be used because it scroll doesn't show inside select panel.

michaeljguarino

Cool, good progress, let's get this merged and continue from there

* Add "Edit" page to Repository tab (#375) * Update design-system * Add typescript plugin to yarn * Add linting for typescript Update linting options * Convert to .tsx * Fix ts errors * format with prettier * Implement new page design Prevent file upload/delete buttons from submitting form Mostly done Last bits mutation partially working Full mutation working (but tags don’t come back in update) Finish functionality * Remove unused typing * Linting fixes * Better intial form state * Stop renaming tag props in gql queries * Suppress apollo warning when removing tags * Remove unnecessary manual cache update * lint * Better TS type * Redesign packages screen (#376) * Redesign detail container * Redesigning chart layout * Use light dashed lines in tree graphs * Add view headers * Redesign readme * Redesign grades * Header improvements * Redesigning terraform layout * Fix typos * Extract duplicated header component * Switch from flex to box to fix scaling issues * Display configuration in code block * Adjust terraform layout * Remove redundant export * Improvements on security screen * Remove duplicated border * Add message when there are no vunerabilities * Add message when there are no scan failures * Update messages * Update install buttons * Use outlet context * Use select as version picker * Add installed chip * Add comment * Fix console errors * Other styling improvements * Other styling improvements * Lint * Fill viewport * Packages improvements (#382) * Add back to packages button instead of breadcrumbs * Redesign vulnerability list * Put back button in scrollable container * Add gap between vulnerability properties * Use const width for first column * Use pointer cursor * Packages improvements (#383) * Add collapse icon * Fix linting issues * Add legend * Grid layout (#378) * Add RepositorySideNav * Edit vscode settings * Remove an anchor * Design some more * More layout design * Implement SideCar * Delete RepositoryHeader * Add icons * Update deps * And here goes the final grid * Finish feature * Update deps * Update deps * Lint * Move layout components to their own files * Update deps * Rework layout to adapt to changes * Break words on RepositorySidecar * Fix InstallDropdownButton caret * Add RepositorySideCarCollapsed * Add Marketplace Layout * Remove vscode dir * Add typescript linter (#384) * Add new linter config * Lint * Update after review * Package improvements (#385) * Update deps (#389) * Packages improvements (#392) * Put scan failures in scrollable container * Change scroll container * Add margin for hide button * Reduce content padding * Fix typo * Do not force container height * Redesign update queue * Use new chips * Move date component to utils and reuse it in update queue * Fix markeplace layout (#388) * Fix markeplace layout * Design fixes * Fix marketplace layout bug * Add input margin * ENG-310 - Redesign cluster view (#387) * fix graphql * Redesign cluster view * Revert cluster.js * Update clusters view * Bump design system * Use responsive layout and update logic * Revert change * Compensate for the missing right border * Fix lint * Fix unit tests Co-authored-by: michaeljguarino <mjg@plural.sh> * My profile refinement (#393) * Use design system's page title component * Redesign EAB credentials * Fix list item borders when there is only one element * Redesign public keys * Set 896px width for ResponsiveLayoutContentContainer * Redesign access tokens * Add banner messages * Add zero state * Fix console errors * Redesign security * Redesign profile * Finish profile redesign * Layout refactoring * Fix alignment issue * Fix console error * Add reset functionality * Remove debug leftover * Remove duplicated file and update imports * Format files * Design improvements (#401) * Add empty states and other design improvements (#403) * ENG-311 - Repository refinement (#399) * Initial commit * Improve OIDC view, toasts and more * Use content card * Use PageTitle where applicable * Update tests view * Fix an issue with scroller and add xterm theme * Revert to token for tag input * Fix redirect urls width * Fix unit tests * Lint fixes * Fix lint issues, improve toasts and more * New notifications system (#396) * Update deps * Add new notifications system * Update deps * Add empty state * Setup Firebase hosting for plural Should provide support for pr-based preview envs * Add run and entryPoint to workflow * Use yarn * Remove entrypoint * fix apiHost function for firebase * disable service worker on previews * Update design system and add ThemeProvider for new styled-components theme (#412) Fix some TS and lint errors Update design system * Fix build issue (#414) * Lint * Redesign package version picker (#409) * Use code and markdown components (#424) * Update dependencies * Replace markdown components * Replace code components * Login view refinement (#425) * ENG-481/ENG-310 - Use new select component on clusters view (#417) * Add cluster selector * Use looping logo and bump design system * Fix lint * Update cloud shell init styling * Update cloud shell build * Use onboarding wrapper only * Design improvements (#430) * Bump design system version * Set main branch for repo description * Change highlight.js theme to base16/rebecca * Set scrollable areas in my profile views * Adjust "read more" & "hide" shifting * Adjust tests bottom padding * Make dependencies graph smaller * Use secondary button as back button * Redesign packages button group * ENG-480 - Update login view and skip demo button styling (#429) * Update login view and skip demo button styling * Fix lint * Review updates * Design improvements (#433) * Bump design system version * Bump design system version * Use sub tabs in repo packages view * Use sub tab in chart dependencies view * Use sub tabs in geodistribution view * Use the same component for go back links * Minor styling adjustments * Remove unused imports * Add small padding to outlet to make sure outline will not be hidden * Update empty readme message * Redesign packages filter * Add empty state messages for packages * Set content as scrollable not whole page * Start Docker image redesign * Redesign range picker * Redesign public switch * Restore vulnerability view * Update header and empty message * Redesign vulnerabilities table * Redesign vulnerability details * Improve scroll * Fix go back link * Update graph tooltip * Minor adjustments * Adjust graph ticks * Ensure user stays on the same view when switching tag * fix yarn lock * fix lint Co-authored-by: Chris Klink <85062+dogmar@users.noreply.github.com> Co-authored-by: Marcin Maciaszczyk <marcin@plural.sh> Co-authored-by: Sebastian Florek <sebastian@plural.sh> Co-authored-by: michaeljguarino <mjg@plural.sh> Co-authored-by: Marcin Maciaszczyk <marcin9yk@icloud.com> Co-authored-by: michaeljguarino <mguarino46@gmail.com>

Redesign detail container

8a174e6

maciaszczykm added design Any design-related changes frontend Changes related to the frontend labels Jul 20, 2022

maciaszczykm changed the title ~~Redesign detail container~~ Redesign packages screen Jul 20, 2022

maciaszczykm force-pushed the marcin/eng-316-redesign-packages-screen branch from a8bec1f to 1350f3d Compare July 20, 2022 14:04

michaeljguarino reviewed Jul 20, 2022

View reviewed changes

maciaszczykm changed the base branch from master to packages-redesign July 21, 2022 07:29

Redesigning chart layout

c029d31

maciaszczykm force-pushed the marcin/eng-316-redesign-packages-screen branch from 1350f3d to c029d31 Compare July 21, 2022 09:09

maciaszczykm added 11 commits July 21, 2022 11:23

Use light dashed lines in tree graphs

0689585

Add view headers

1a6d02c

Redesign readme

02f9a07

Redesign grades

8342518

Header improvements

d676539

Redesigning terraform layout

034f1b8

Fix typos

0b0fb4c

Extract duplicated header component

f5e40c4

Switch from flex to box to fix scaling issues

402eb08

Display configuration in code block

d2b639f

Adjust terraform layout

e9e2de6

michaeljguarino reviewed Jul 21, 2022

View reviewed changes

www/src/components/repository/RepositoryDescriptionMarkdown.js Outdated Show resolved Hide resolved

maciaszczykm added 8 commits July 22, 2022 09:31

Remove redundant export

5986fe7

Improvements on security screen

7c95d21

Remove duplicated border

9c289de

Add message when there are no vunerabilities

b4d0528

Add message when there are no scan failures

f9a837a

Update messages

6ac1819

Update install buttons

044333f

Use outlet context

3c701dc

maciaszczykm requested a review from a team July 22, 2022 10:16

maciaszczykm marked this pull request as ready for review July 22, 2022 10:16

maciaszczykm added 8 commits July 22, 2022 14:25

Use select as version picker

914c57c

Add installed chip

35b9e1e

Add comment

14c67c7

Fix console errors

257ee2a

Other styling improvements

d553e48

Other styling improvements

212dd0a

Lint

eba7d8c

Fill viewport

cbac2e6

maciaszczykm commented Jul 22, 2022

View reviewed changes

michaeljguarino approved these changes Jul 22, 2022

View reviewed changes

maciaszczykm merged commit 1747b09 into packages-redesign Jul 22, 2022

maciaszczykm deleted the marcin/eng-316-redesign-packages-screen branch July 22, 2022 15:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign packages screen #376

Redesign packages screen #376

maciaszczykm commented Jul 20, 2022 •

edited

Loading

michaeljguarino Jul 20, 2022

maciaszczykm Jul 20, 2022 •

edited

Loading

michaeljguarino Jul 20, 2022

maciaszczykm Jul 21, 2022

michaeljguarino commented Jul 20, 2022

maciaszczykm commented Jul 22, 2022

maciaszczykm commented Jul 22, 2022

maciaszczykm Jul 22, 2022

michaeljguarino left a comment

Redesign packages screen #376

Redesign packages screen #376

Conversation

maciaszczykm commented Jul 20, 2022 • edited Loading

Summary

Test Plan

Checklist

michaeljguarino Jul 20, 2022

Choose a reason for hiding this comment

maciaszczykm Jul 20, 2022 • edited Loading

Choose a reason for hiding this comment

michaeljguarino Jul 20, 2022

Choose a reason for hiding this comment

maciaszczykm Jul 21, 2022

Choose a reason for hiding this comment

michaeljguarino commented Jul 20, 2022

maciaszczykm commented Jul 22, 2022

maciaszczykm commented Jul 22, 2022

maciaszczykm Jul 22, 2022

Choose a reason for hiding this comment

michaeljguarino left a comment

Choose a reason for hiding this comment

maciaszczykm commented Jul 20, 2022 •

edited

Loading

maciaszczykm Jul 20, 2022 •

edited

Loading