feat(dashboard): Refactor header layout and update start page UI

Author: Siddhant-K-code

components/dashboard/src/menu/Menu.tsx

@@ -22,6 +22,8 @@ import { User, RoleOrPermission } from "@gitpod/public-api/lib/gitpod/v1/user_pb
 import { getPrimaryEmail } from "@gitpod/public-api-common/lib/user-utils";
 import { ConfigurationsMigrationCoachmark } from "../repositories/coachmarks/MigrationCoachmark";
 import { useInstallationConfiguration } from "../data/installation/installation-config-query";
+import { useIsDataOps } from "../data/featureflag-query";
+import { ProductLogo } from "../components/ProductLogo";
 
 interface Entry {
     title: string;
@@ -34,9 +36,7 @@ export default function Menu() {
     const location = useLocation();
     const { setCurrency } = useContext(PaymentContext);
     const [isFeedbackFormVisible, setFeedbackFormVisible] = useState<boolean>(false);
-
-    const { data: installationConfig, isLoading: isInstallationConfigLoading } = useInstallationConfiguration();
-    const isGitpodIo = isInstallationConfigLoading ? false : !installationConfig?.isDedicatedInstallation;
+    const isDataOps = useIsDataOps();
 
     useEffect(() => {
         const { server } = getGitpodService();
@@ -79,16 +79,24 @@ export default function Menu() {
                         <ConfigurationsMigrationCoachmark>
                             <OrganizationSelector />
                         </ConfigurationsMigrationCoachmark>
-                        {/* hidden on smaller screens (in its own menu below on smaller screens) */}
-                        <div className="hidden md:block pl-2">
-                            <OrgPagesNav />
+                        {/* Mobile Only Divider and User Menu */}
+                        <div className="flex items-center md:hidden">
+                            <div className="h-6 w-px bg-gray-300 dark:bg-gray-600 mx-2" />
+                            <UserMenu user={user} className="" onFeedback={handleFeedbackFormClick} withAdminLink />
+                        </div>
+                        {/* Desktop Only Divider, User Menu, and Workspaces Nav */}
+                        <div className="hidden md:flex items-center">
+                            <div className="h-6 w-px bg-gray-300 dark:bg-gray-600 mx-2" />
+                            <UserMenu user={user} className="" onFeedback={handleFeedbackFormClick} />
+                            <div className="pl-2">
+                                <OrgPagesNav />
+                            </div>
                         </div>
                     </div>
                     <div className="flex items-center w-auto" id="menu">
-                        {/* hidden on smaller screens - TODO: move to user menu on smaller screen */}
+                        {/* Right side nav - Desktop Only */}
                         <nav className="hidden md:block flex-1">
-                            <ul className="flex flex-1 items-center justify-between text-base text-gray-500 dark:text-gray-400 space-x-2">
-                                <li className="flex-1"></li>
+                            <ul className="flex flex-1 items-center justify-end text-base text-gray-500 dark:text-gray-400 space-x-4">
                                 {user?.rolesOrPermissions?.includes(RoleOrPermission.ADMIN) && (
                                     <li className="cursor-pointer">
                                         <PillMenuItem
@@ -98,31 +106,38 @@ export default function Menu() {
                                         />
                                     </li>
                                 )}
-                                {isGitpodIo && (
-                                    <li className="cursor-pointer">
-                                        <PillMenuItem name="Feedback" onClick={handleFeedbackFormClick} />
+                                {!isDataOps && (
+                                    <li>
+                                        <a
+                                            href="/"
+                                            className="flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                                        >
+                                            <ProductLogo className="h-4 w-auto" />
+                                            <span>Gitpod Classic</span>
+                                        </a>
                                     </li>
                                 )}
                             </ul>
                         </nav>
-                        {/* Hide normal user menu on small screens */}
-                        <UserMenu user={user} className="hidden md:block" />
-                        {/* Show a user menu w/ admin & feedback links on small screens */}
-                        <UserMenu
-                            user={user}
-                            className="md:hidden"
-                            withAdminLink
-                            withFeedbackLink
-                            onFeedback={handleFeedbackFormClick}
-                        />
+                        {/* Right side items - Mobile Only */}
+                        <div className="flex items-center space-x-3 md:hidden">
+                            {!isDataOps && (
+                                <a
+                                    href="/"
+                                    className="flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                                >
+                                    <ProductLogo className="h-4 w-auto" />
+                                    <span>Gitpod Classic</span>
+                                </a>
+                            )}
+                        </div>
                     </div>
                     {isFeedbackFormVisible && <FeedbackFormModal onClose={onFeedbackFormClose} />}
                 </div>
             </header>
             <Separator />
-            {/* only shown on small screens */}
+            {/* Mobile-only OrgPagesNav and Separator */}
             <OrgPagesNav className="md:hidden app-container flex justify-start py-2" />
-            {/* only shown on small screens */}
             <Separator className="md:hidden" />
         </>
     );
@@ -162,10 +177,9 @@ type UserMenuProps = {
     user?: User;
     className?: string;
     withAdminLink?: boolean;
-    withFeedbackLink?: boolean;
     onFeedback?: () => void;
 };
-const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedbackLink, onFeedback }) => {
+const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, onFeedback }) => {
     const { data: installationConfig, isLoading: isInstallationConfigLoading } = useInstallationConfiguration();
     const isGitpodIo = isInstallationConfigLoading ? false : !installationConfig?.isDedicatedInstallation;
 
@@ -178,23 +192,17 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
                 link: "/admin",
             });
         }
-        if (withFeedbackLink && isGitpodIo) {
-            items.push({
-                title: "Feedback",
-                onClick: onFeedback,
-            });
-        }
 
         // Add a separator to the last item
         if (items.length > 0) {
             items[items.length - 1].separator = true;
         }
 
         return items;
-    }, [isGitpodIo, onFeedback, user?.rolesOrPermissions, withAdminLink, withFeedbackLink]);
+    }, [user?.rolesOrPermissions, withAdminLink]);
 
     const menuEntries = useMemo(() => {
-        return [
+        const baseEntries: ContextMenuEntry[] = [
             {
                 title: (user && (getPrimaryEmail(user) || user?.name)) || "User",
                 customFontStyle: "text-gray-400",
@@ -215,15 +223,27 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
                 href: "https://www.gitpod.io/support/",
                 target: "_blank",
                 rel: "noreferrer",
-                separator: true,
-            },
-            ...extraSection,
-            {
-                title: "Log out",
-                href: gitpodHostUrl.asApiLogout().toString(),
+                separator: !isGitpodIo,
             },
         ];
-    }, [extraSection, user]);
+
+        if (isGitpodIo) {
+            baseEntries.push({
+                title: "Feedback",
+                onClick: onFeedback,
+                separator: true,
+            });
+        }
+
+        baseEntries.push(...extraSection);
+
+        baseEntries.push({
+            title: "Log out",
+            href: gitpodHostUrl.asApiLogout().toString(),
+        });
+
+        return baseEntries;
+    }, [extraSection, user, isGitpodIo, onFeedback]);
 
     return (
         <div
@@ -243,5 +263,5 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
 function isSelected(entry: Entry, location: Location<any>) {
     const all = [entry.link, ...(entry.alternatives || [])].map((l) => l.toLowerCase());
     const path = location.pathname.toLowerCase();
-    return all.some((n) => n === path || n + "/" === path);
+    return all.some((n) => n === path || n + "/" === path || path.startsWith(n + "/"));
 }

components/dashboard/src/start/StartPage.tsx

@@ -14,6 +14,7 @@ import { VerifyModal } from "./VerifyModal";
 import { useWorkspaceDefaultImageQuery } from "../data/workspaces/default-workspace-image-query";
 import { GetWorkspaceDefaultImageResponse_Source } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
 import { ProductLogo } from "../components/ProductLogo";
+import { useIsDataOps } from "../data/featureflag-query";
 
 export enum StartPhase {
     Checking = 0,
@@ -96,6 +97,8 @@ export function StartPage(props: StartPageProps) {
     const { phase, error, workspaceId } = props;
     let title = props.title || getPhaseTitle(phase, error);
     useDocumentTitle("Starting");
+    const isDataOps = useIsDataOps();
+
     return (
         <div className="w-screen h-screen align-middle">
             <div className="flex flex-col mx-auto items-center text-center h-screen">
@@ -105,6 +108,7 @@ export function StartPage(props: StartPageProps) {
                         error || phase === StartPhase.Stopped || phase === StartPhase.IdeReady ? "" : "animate-bounce"
                     }`}
                 />
+                {!isDataOps && <span className="block mt-2 text-gray-600 dark:text-gray-400">Gitpod Classic</span>}
                 <Heading2 className="mt-8">{title}</Heading2>
                 {typeof phase === "number" && phase < StartPhase.IdeReady && (
                     <ProgressBar phase={phase} error={!!error} />