Update TopBar with new navigation items and styles by avatus · Pull Request #36368 · gravitational/teleport

avatus · 2024-01-06T00:52:52Z

This is part 2 of the PRs to update our TopBar with the new designs. See figma here https://www.figma.com/file/Gpjs9vjhzUKF1GDbeG9JGE/Application-Design-System?type=design&node-id=0-1&mode=design&t=QWzXjivwgbiKAVCp-0

I recommend commit by commit but most are pretty small.

Goes hand in hand with #36310 but they do not rely on each other (both need to be in to complete the task however)

changelog: Moved the resources side bar navigation into the top bar and updated the look and feel

github-actions · 2024-01-06T00:53:22Z

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.

ryanclark

NavigationSwitcher.tsx can be deleted too

ryanclark · 2024-01-08T11:58:38Z

+      <TeleportLogo />
      {feature?.hideNavigation && (
        <ButtonIconContainer onClick={handleBack}>
          <ArrowLeft size="medium" />
        </ButtonIconContainer>
      )}


This would look strange with the arrow being after the logo - can you move it back?

Spoke with kenny and for now (we will speak more about it tomorrow) we decided to hide the logo/access management button and replace with the arrow. Although, this still leaves the other nav items in the top bar. should they be there when viewing TAG? i can hide everything if necessary

Should we change "Access Management" to say "Back to Teleport" when viewing TAG? cc @roraback

Also yes can we hide the other nav items for TAG please?

ryanclark · 2024-01-08T12:01:02Z

 const Assist = lazy(() => import('teleport/Assist'));

-export function TopBar() {
+export function TopBar({ navigationItems }: NavigationProps) {


Can navigationItems come from useFeatures() instead of being passed through to here?

I sorta hijacked topmenuitem since it fit and my filter for topmenu items is if it's defined and a Resource category. worked well, and also was able to use the already filtered items based on access

ryanclark · 2024-01-08T12:02:08Z

-      />
+      <NavigationButton
+        selected={feature?.category === NavigationCategory.Management}
+        to="/web/users"


This URL shouldn't be hard coded

github-actions · 2024-01-10T00:47:06Z

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 · 2024-01-10T00:58:24Z

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.

kimlisa

i accidentally approved 😅

all the topbar icon has a tooltip except for notifications

i always seemed to have a horizontal scroll bar 🤔 (15 inch mac on chrome)

triple scroll bars (but i wasn't sure if we were aiming for mobile friendly)

some triple scrolling on some access management views (full screen width)

kimlisa · 2024-01-11T09:20:56Z

+          }
+          align-items: center;
+        `}
+        to="/web"


define in config as a route?

Thanks. I guess it was already defined under cfg.routes.root so i'll use that!

ryanclark · 2024-01-11T13:09:00Z

      return cfg.routes.accessRequest;
    },
  };
+  topMenuItem = this.navigationItem;


Instead of this being a copy of navigationItem, can it be an optional boolean?

the type of topMenuItem is used elsewhere as a component that shares a lot of the same props as navigationItem. I could make the type be TopMenuItem | boolean but that might muck it up instead of just copying over like this

github-actions · 2024-01-11T23:15:14Z

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.

kimlisa · 2024-01-12T01:01:06Z

almost there

access request and user locks when checking out, the top checkout header gets hidden by the menu and we can't exit it

this is probably unrelated to your PR... but i'm not sure when our row became uncentered:

also notification dot for notications should be closer to the bell? (create a access list, and make the audit due the next day and you'll se a notice dot)

current:

before:

kimlisa

everything else looks good! approving with the above ^ addressed

github-actions · 2024-01-12T02:57: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.

avatus · 2024-01-12T02:57:58Z

this is probably unrelated to your PR... but i'm not sure when our row became uncentered:

this was related to my PR. adding the height on every HoverTooltip broke a lot of then, so I just passed in the 100% height explicitly on the specific elements up top

also fixed the notification bell.

I lowered the z-index to keep the topbar below the drawer component for RequestCheckout which I believe is the original intention

avatus added 9 commits January 5, 2024 12:03

Remove ClusterSelector

dec904a

Add new breakpoints

b4a6e4d

Update HoverTooltip to accept anchor props

2bcb305

Move logos to new path

6e6fb6f

Pass clusterId to createPrivateRoutes

dabe454

Move topbar and pass navigation props

5eeab4f

Update notification button styles

2b67644

Make usernav responsive

1ee154a

Update topbar with new nav options

d123481

avatus requested review from kimlisa, rudream and ryanclark January 6, 2024 00:52

github-actions Bot requested a review from ibeckermayer January 6, 2024 00:53

github-actions Bot added size/sm ui labels Jan 6, 2024

avatus removed the request for review from ibeckermayer January 6, 2024 00:53

zmb3 approved these changes Jan 6, 2024

View reviewed changes

ryanclark reviewed Jan 8, 2024

View reviewed changes

avatus added 2 commits January 9, 2024 15:19

Remove NavigationSwitcher

1fd6983

Use features to generate TopBar items

f6aeddc

Fix tests

c570255

kimlisa approved these changes Jan 11, 2024

View reviewed changes

public-teleport-github-review-bot Bot removed the request for review from rudream January 11, 2024 08:58

kimlisa self-requested a review January 11, 2024 09:08

kimlisa reviewed Jan 11, 2024

View reviewed changes

ryanclark reviewed Jan 11, 2024

View reviewed changes

Update notification tooltip

fb405e2

Remove extra scrollbar and update styles

5808655

avatus requested review from kimlisa and ryanclark January 11, 2024 23:15

kimlisa approved these changes Jan 12, 2024

View reviewed changes

avatus added 2 commits January 11, 2024 20:48

Reduce zindex

ef3ab33

Fix hovertooltip and notification icon

d84435f

avatus requested a review from kimlisa January 12, 2024 03:09

avatus added this pull request to the merge queue Jan 12, 2024

avatus removed this pull request from the merge queue due to a manual request Jan 12, 2024

Remove topbar nav links if navigation hidden

14d9156

avatus enabled auto-merge January 12, 2024 17:51

avatus added this pull request to the merge queue Jan 12, 2024

Merged via the queue into master with commit d88bd6c Jan 12, 2024

avatus deleted the avatus/update_topbar branch January 12, 2024 18:24

avatus mentioned this pull request Jan 12, 2024

Supporting changes for download tab on Cloud #36399

Merged

rudream mentioned this pull request Aug 16, 2024

[Web] Fix Feature Hiding #45566

Merged

Conversation

avatus commented Jan 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jan 6, 2024

Uh oh!

ryanclark left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryanclark Jan 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

github-actions Bot commented Jan 10, 2024

Uh oh!

kimlisa left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 11, 2024

Uh oh!

kimlisa commented Jan 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kimlisa left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jan 12, 2024

Uh oh!

avatus commented Jan 12, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

avatus commented Jan 6, 2024 •

edited

Loading

ryanclark Jan 11, 2024 •

edited

Loading

kimlisa commented Jan 12, 2024 •

edited

Loading

kimlisa left a comment •

edited

Loading