Update dashboard navigation #10309

gtsiolis · 2022-05-27T17:45:04Z

Description

Update dashboard navigation per #8385.

Notable changes:

Workspaces menu moved to the top right
Better colors for light and dark themes
Better interaction while moving between teams
Improved breadcrumb path

Some bugs that still need to be addressed:

1. Do not switch team selection when going to Workspaces or Admin
2. Do not go to workspaces when selecting your personal account from the team selection scope
3. Go to the projects of each scope when selecting the scope. For example, go to /projects when clicking on the personal account scope and go to /t/$TEAM/projects when clicking on the team scope.
4. Hide tabs when going to admin pages.

What's missing for completing #8385:

1. Shift tabs for projects and teams down below the heading
2. Re-structure admin layout to use tabs instead of sidebar

Reposting things to consider from #8385:

1. Use a narrower container width (optional).
2. Remove the separator border between the top-level navigation and the header title. (would help to show top-nav everywhere)

Other things worth considering

1. Moving the feedback menu inside the user dropdown.

Related Issue(s)

Related to #8385.

Screenshots

BEFORE	AFTER

Release Notes

Update dashboard navigation

AlexTugarev · 2022-05-30T08:49:44Z

/werft run

👍 started the job as gitpod-build-gt-update-dashboard-navigation.4
(with .werft/ from main)

components/dashboard/src/Menu.tsx

gtsiolis · 2022-05-30T09:33:08Z

components/dashboard/src/Menu.tsx

@@ -100,6 +98,7 @@ export default function Menu() {

    // Hide most of the top menu when in a full-page form.
    const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
+    const isWorkspacesUI = ["/workspaces"].includes(location.pathname);


thought: The idea here is that for the workspaces' page we'd like to remove the tabs but also keep the navigation up there.

components/dashboard/src/Menu.tsx

gtsiolis · 2022-05-30T09:38:47Z

components/dashboard/src/components/PillMenuItem.tsx

+        "flex block font-medium dark:text-gray-400 px-3 py-1 rounded-2xl transition ease-in-out font-semibold " +
+        (p.selected
+            ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50"
+            : "hover:bg-gray-100 dark:hover:bg-gray-700");


issue: Some overriding is happening here, but haven't checked in depth.

gtsiolis · 2022-05-30T09:40:59Z

components/dashboard/src/Menu.tsx

+                {projectSlug && !prebuildId && (
+                    <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
+                        <span className=" flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
+                            {project?.name}
+                        </span>
+                    </Link>
                )}
                {prebuildId && (
-                    <div className="flex h-full ml-2 py-1">
-                        <img alt="" className="mr-3 filter-grayscale m-auto transform -rotate-90" src={CaretDown} />
-                        <span className="text-base text-gray-600 dark:text-gray-400 font-semibold">{prebuildId}</span>
+                    <Link to={`${teamOrUserSlug}/${projectSlug}${prebuildId ? "/prebuilds" : ""}`}>
+                        <span className=" flex h-full text-base text-gray-500 bg-gray-50 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 font-semibold ml-2 px-3 py-1 rounded-2xl border-gray-100">
+                            {project?.name}
+                        </span>
+                    </Link>
+                )}
+                {prebuildId && (
+                    <div className="flex ml-2">
+                        <div className="flex pl-0 pr-1 py-1.5">
+                            <svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    fill-rule="evenodd"
+                                    clip-rule="evenodd"
+                                    d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z"
+                                    fill="#78716C"
+                                />
+                            </svg>
+                        </div>
+                        <Link to={`${teamOrUserSlug}/${projectSlug}/${prebuildId}`}>
+                            <span className="flex h-full text-base text-gray-50 bg-gray-800 dark:bg-gray-50 dark:text-gray-900 font-semibold px-3 py-1 rounded-2xl border-gray-100">
+                                {prebuildId.substring(0, 8).trimEnd()}
+                            </span>
+                        </Link>
                    </div>
                )}


thought: Not sure if this could be better handled. Sorry for the potentially duplicate code here, but it helped push this forward, @AlexTugarev! 😬

AlexTugarev · 2022-05-30T12:57:47Z

/werft run

👍 started the job as gitpod-build-gt-update-dashboard-navigation.5
(with .werft/ from main)

AlexTugarev · 2022-05-30T14:38:01Z

@gtsiolis, when selecting the name of any team or my account name from the redesigned pill menu, I get redirected to /projects. I was not expecting this. Currently, it's opening the drop down menu. What's the reason for this changes?

gtsiolis · 2022-05-30T14:50:21Z

@gtsiolis, when selecting the name of any team or my account name from the redesigned pill menu, I get redirected to /projects. I was not expecting this. Currently, it's opening the drop down menu. What's the reason for this changes?

@AlexTugarev Yes, this is expected as the goal of this new navigation is to separate the workspaces page from the team-specific pages, and more. Muscle memory could be one of the reasons why this was confusing.

Do you think it could it help to introduce a dark colors team scope selector as described in Update dashboard navigation #10309 (comment)
In case it helps, I'd suggest trying adding a project and navigating through the project and its prebuilds.

🍊 🍊 🍊 🍊

Also, the UX of the team selector is still missing two things. Re-pasting from the PR description:

Do not switch team selection when going to Workspaces or Admin

Do not go to workspaces when selecting your personal account from the team selection scope

🍋 🍋 🍋 🍋

In case, the new highlighted Workspaces menu went unnoticed, it could be worth considering using a narrower container width. Re-posting also from the PR description:

Use a narrower container width (optional).

gtsiolis · 2022-05-30T16:03:38Z

@AlexTugarev I just re-read what you wrote in #10309 (comment)! This is not expected! Clicking on the team scope should go back to the team projects, not personal account projects.

I've added this also in the PR description:

3. Go to the projects of each scope when selecting the scope. For example, go to /projects when clicking on the personal account scope and go to /t/$TEAM/projects when clicking on the team scope.

gtsiolis · 2022-05-30T21:19:37Z

/werft run

👍 started the job as gitpod-build-gt-update-dashboard-navigation.8
(with .werft/ from main)

AlexTugarev · 2022-05-31T05:53:23Z

Thanks for double-checking. Agree this seems to be odd. Just loom'd it https://www.loom.com/share/396efa9fb5044a0fb08214cd0985c2fa

gtsiolis · 2022-06-02T14:05:46Z

/werft run

👍 started the job as gitpod-build-gt-update-dashboard-navigation.9
(with .werft/ from main)

gtsiolis · 2022-06-06T22:37:13Z

components/dashboard/src/Menu.tsx

+        const classes =
+            "flex h-full text-base py-0 " +
+            (!projectSlug && !isWorkspacesUI && !isAdminUI && teamOrUserSlug
+                ? "text-gray-50 bg-gray-800 dark:text-gray-900 dark:bg-gray-50 border-gray-700"
+                : "text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700  dark:border-gray-700");


thought: Probably not the best way to handle classes for the left and right part of the team scope selector. 😇

gtsiolis · 2022-06-06T22:46:11Z

In case anyone from the @gitpod-io/engineering-webapp wants to take a look, here's the current status:

UX changes should work as expected, using the second approach described in Update dashboard navigation #10309 (comment). ✔️
Code changes, specifically for the menu style changes, may contain inefficient class handling. Let me know if you have a better way to handle this use case. 👀
The only pending bug remaining to get this ready-to-merge from UX perspective is the first point mentioned in the PR description, to keep the selected team when visiting /admin or /workspaces. But maybe we could skip this. 🆘
The rest of the changes mentioned in the PR description can be part of future iterations. 🛹

AlexTugarev

That works really nice! 🎉

🙏🏻 Thanks for improving the situation, @gtsiolis!

w.r.t to preserving the team selection when navigating to /workspaces, this should not block us from merging this as is. Also, I did not miss it at all, that said, personally I wouldn't mind not doing it at all.

gtsiolis · 2022-06-07T08:09:50Z

Thanks for taking a look, @AlexTugarev! ✨

Agree with your comments in #10309 (review).

However, I think it could save users some extra clicks if we also kept the team selection when visiting workspaces and admin. I've opened #10496 to track this and continue the discussion.

I've also updated the tasks and changes to consider in #8385 to include the remaining tasks mentioned here. Cc @jldec

gtsiolis requested a review from a team May 27, 2022 17:45

roboquat added do-not-merge/release-note-label-needed size/L labels May 27, 2022

github-actions bot added team: webapp Issue belongs to the WebApp team and removed size/L labels May 27, 2022

gtsiolis marked this pull request as draft May 27, 2022 17:45

roboquat added do-not-merge/work-in-progress release-note size/L and removed do-not-merge/release-note-label-needed labels May 27, 2022

AlexTugarev reviewed May 30, 2022

View reviewed changes

components/dashboard/src/Menu.tsx Show resolved Hide resolved

gtsiolis commented May 30, 2022

View reviewed changes

components/dashboard/src/Menu.tsx Outdated Show resolved Hide resolved

gtsiolis commented May 30, 2022

View reviewed changes

gtsiolis force-pushed the gt/update-dashboard-navigation branch from 2fc4f89 to 3645b52 Compare May 30, 2022 14:06

gtsiolis force-pushed the gt/update-dashboard-navigation branch from 3645b52 to 2f897ee Compare May 30, 2022 15:08

gtsiolis force-pushed the gt/update-dashboard-navigation branch 3 times, most recently from a4d9353 to 386f2f7 Compare June 6, 2022 21:17

Update dashboard navigation

6ed1432

gtsiolis force-pushed the gt/update-dashboard-navigation branch from 386f2f7 to 6ed1432 Compare June 6, 2022 22:36

gtsiolis commented Jun 6, 2022

View reviewed changes

gtsiolis marked this pull request as ready for review June 6, 2022 22:40

roboquat removed the do-not-merge/work-in-progress label Jun 6, 2022

AlexTugarev approved these changes Jun 7, 2022

View reviewed changes

roboquat merged commit 0a6e84e into main Jun 7, 2022

roboquat deleted the gt/update-dashboard-navigation branch June 7, 2022 07:28

gtsiolis mentioned this pull request Jun 7, 2022

Consider remembering team selection when visiting pages like workspaces #10496

Closed

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Jun 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dashboard navigation #10309

Update dashboard navigation #10309

gtsiolis commented May 27, 2022 •

edited

Loading

AlexTugarev commented May 30, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis May 30, 2022

gtsiolis May 30, 2022

gtsiolis May 30, 2022

AlexTugarev commented May 30, 2022 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev commented May 30, 2022

gtsiolis commented May 30, 2022 •

edited

Loading

gtsiolis commented May 30, 2022

gtsiolis commented May 30, 2022 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev commented May 31, 2022

gtsiolis commented Jun 2, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis Jun 6, 2022

gtsiolis commented Jun 6, 2022 •

edited

Loading

AlexTugarev left a comment

gtsiolis commented Jun 7, 2022 •

edited by werft-gitpod-dev-com bot

Loading

Update dashboard navigation #10309

Update dashboard navigation #10309

Conversation

gtsiolis commented May 27, 2022 • edited Loading

Description

Related Issue(s)

Screenshots

Release Notes

AlexTugarev commented May 30, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis May 30, 2022

Choose a reason for hiding this comment

gtsiolis May 30, 2022

Choose a reason for hiding this comment

gtsiolis May 30, 2022

Choose a reason for hiding this comment

AlexTugarev commented May 30, 2022 • edited by werft-gitpod-dev-com bot Loading

AlexTugarev commented May 30, 2022

gtsiolis commented May 30, 2022 • edited Loading

gtsiolis commented May 30, 2022

gtsiolis commented May 30, 2022 • edited by werft-gitpod-dev-com bot Loading

AlexTugarev commented May 31, 2022

gtsiolis commented Jun 2, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis Jun 6, 2022

Choose a reason for hiding this comment

gtsiolis commented Jun 6, 2022 • edited Loading

AlexTugarev left a comment

Choose a reason for hiding this comment

gtsiolis commented Jun 7, 2022 • edited by werft-gitpod-dev-com bot Loading

gtsiolis commented May 27, 2022 •

edited

Loading

AlexTugarev commented May 30, 2022 •

edited by werft-gitpod-dev-com bot

Loading

AlexTugarev commented May 30, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented May 30, 2022 •

edited

Loading

gtsiolis commented May 30, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Jun 2, 2022 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis commented Jun 6, 2022 •

edited

Loading

gtsiolis commented Jun 7, 2022 •

edited by werft-gitpod-dev-com bot

Loading