[Web] Add List View to Unified Resources by rudream · Pull Request #34203 · gravitational/teleport

rudream · 2023-11-03T14:48:53Z

Purpose

Adds a list view option to the Unified Resources page as an alternative to the card view.

Also changes the hover state for the card view to use a shadow.

e counterpart: https://github.com/gravitational/teleport.e/pull/2619

Figma design

Demo

TODO:

Add view mode preference to user preferences.
Add skeleton loader. [Web] Unified Resources: Add skeleton loader to list view #34381
Force card view when viewport is narrow.

changelog: Add list view to resources page

github-actions · 2023-11-03T14:49:31Z

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

github-actions · 2023-11-03T14:51:00Z

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

github-actions · 2023-11-03T19:19:08Z

The PR changelog entry failed validation: Changelog entry not found in the PR body. Please add a "no-changelog" label to the PR, or changelog lines starting with changelog: followed by the changelog entries for the PR.

gzdunek · 2023-11-06T13:19:43Z

Something is causing the the horizontal scrollbar blinking (Firefox):

horizontal.scroll.mov

zmb3 · 2023-11-06T18:03:32Z

What do you think about putting a tooltip over the labels icon that says "Show Labels" (similar to how we show the "Click to Copy" tooltip on the copy button)?

rudream · 2023-11-08T05:04:33Z

Something is causing the the horizontal scrollbar blinking (Firefox)

@gzdunek Good catch, looks like this was being caused because the box-shadow on hover was increasing the width by a few pixels. I added a workaround using a pseudo-element to prevent this.

avatus · 2023-11-08T12:24:08Z

This looks/works great. My only concern is leaving out the user preferences part because until that goes in, a user who would want this view would have to click the list view button every time they load the page (could lead to more frustration than not having it at all). Lets pair up and bust it out real quick to squeeze it into this PR?

gzdunek

Second pass

gzdunek

We are almost there!

gzdunek · 2023-11-09T14:11:00Z

+  const selectViewMode = (viewMode: UnifiedViewModePreference) => {
+    updateUnifiedResourcesPreferences({
+      ...unifiedResourcePreferences,
+      viewMode,
+    });


This is great 👏
However, now we have some inconsistency: viewMode state is kept outside, but information if pinned tab is active is kept in params and sent externally via updateUnifiedResourcesPreferences.
It seems to me that it would be good to have a single way of updating both properties. I made an attempt to refactor this, you can check out the draft #34394.
It's not perfect, but we should refactor useUrlFiltering first.
I also improved naming and fixed imports (shared and teleterm shouldn't import from teleport).

Agreed, though I think we should do the refactoring after this is merged since this PR is already large enough and this doesn't affect UX.

avatus

Looks and works great to me. 👍 , after @gzdunek comments are taken care of

gzdunek

I left two small comments.

🚢 it!

public-teleport-github-review-bot · 2023-11-10T19:26:41Z

@rudream See the table below for backport results.

Branch	Result
branch/v14	Failed

rudream requested review from avatus and gzdunek November 3, 2023 14:48

github-actions Bot added size/lg ui labels Nov 3, 2023

rudream added changelog labels Nov 3, 2023

rudream force-pushed the yassine/unified-list branch 3 times, most recently from a4d084a to cc41cb6 Compare November 3, 2023 19:18

rudream force-pushed the yassine/unified-list branch from cc41cb6 to 900f096 Compare November 3, 2023 21:16

gzdunek reviewed Nov 6, 2023

View reviewed changes

rudream force-pushed the yassine/unified-list branch from 900f096 to c8129a3 Compare November 8, 2023 03:23

rudream requested a review from gzdunek November 8, 2023 05:04

avatus reviewed Nov 8, 2023

View reviewed changes

Comment thread web/packages/shared/components/ToolTip/HoverTooltip.tsx

gzdunek reviewed Nov 8, 2023

View reviewed changes

rudream force-pushed the yassine/unified-list branch from e54aa45 to baef29c Compare November 9, 2023 06:23

rudream requested review from avatus and gzdunek November 9, 2023 07:20

rudream force-pushed the yassine/unified-list branch 2 times, most recently from a762d03 to d0bc2d6 Compare November 9, 2023 09:33

rudream mentioned this pull request Nov 9, 2023

[Web] Unified Resources: Add skeleton loader to list view #34381

Merged

gzdunek reviewed Nov 9, 2023

View reviewed changes

fheinecke removed the changelog label Nov 9, 2023

rudream requested a review from gzdunek November 10, 2023 00:08

avatus approved these changes Nov 10, 2023

View reviewed changes

gzdunek approved these changes Nov 10, 2023

View reviewed changes

Comment thread web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx Outdated

Comment thread web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx Outdated

Comment thread web/packages/shared/components/UnifiedResources/shared/PinButton.tsx Outdated

rudream force-pushed the yassine/unified-list branch from 4388f04 to af5e440 Compare November 10, 2023 16:24

rudream enabled auto-merge November 10, 2023 16:24

rudream force-pushed the yassine/unified-list branch 6 times, most recently from 9ac71a7 to d0b42dc Compare November 10, 2023 18:32

add unified resources list view

21d6550

rudream force-pushed the yassine/unified-list branch from d0b42dc to 21d6550 Compare November 10, 2023 18:49

rudream added this pull request to the merge queue Nov 10, 2023

Merged via the queue into master with commit 99ae674 Nov 10, 2023

rudream deleted the yassine/unified-list branch November 10, 2023 19:25

rudream added a commit that referenced this pull request Nov 10, 2023

add unified resources list view (#34203)

34770e0

rudream mentioned this pull request Nov 10, 2023

[v14] [Web] Add List View to Unified Resources #34466

Merged

github-merge-queue Bot pushed a commit that referenced this pull request Nov 10, 2023

add unified resources list view (#34203) (#34466)

05b79ac

zmb3 mentioned this pull request Nov 14, 2023

Teleport v14: Resources: Add a list view of resources #32999

Closed

Conversation

rudream commented Nov 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Demo

TODO:

Uh oh!

github-actions Bot commented Nov 3, 2023

Uh oh!

github-actions Bot commented Nov 3, 2023

Uh oh!

github-actions Bot commented Nov 3, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gzdunek commented Nov 6, 2023

Uh oh!

zmb3 commented Nov 6, 2023

Uh oh!

rudream commented Nov 8, 2023

Uh oh!

Uh oh!

avatus commented Nov 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gzdunek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gzdunek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gzdunek Nov 9, 2023

Choose a reason for hiding this comment

Uh oh!

rudream Nov 9, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

avatus left a comment

Choose a reason for hiding this comment

Uh oh!

gzdunek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

public-teleport-github-review-bot Bot commented Nov 10, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

rudream commented Nov 3, 2023 •

edited

Loading

avatus commented Nov 8, 2023 •

edited

Loading