Skip to content

feat(dashboard): Update header layout and start page branding #20762

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 22, 2025
Merged

feat(dashboard): Update header layout and start page branding #20762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96c97ed
feat(dashboard): Refactor header layout and update start page UI
Siddhant-K-code Apr 22, 2025
657d73f
addressing nit fixes
Siddhant-K-code Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 57 additions & 43 deletions components/dashboard/src/menu/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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();
Expand Down Expand Up @@ -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-4">
<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
Expand All @@ -98,31 +106,32 @@ export default function Menu() {
/>
</li>
)}
{isGitpodIo && (
<li className="cursor-pointer">
<PillMenuItem name="Feedback" onClick={handleFeedbackFormClick} />
{!isDataOps && (
<li>
<div className="flex items-center gap-x-1 text-sm text-pk-content-secondary">
<ProductLogo className="h-4 w-auto" />
<span>Gitpod Classic</span>
</div>
</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 && (
<div className="flex items-center gap-x-1 text-sm text-pk-content-secondary">
<ProductLogo className="h-4 w-auto" />
<span>Gitpod Classic</span>
</div>
)}
</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" />
</>
);
Expand Down Expand Up @@ -162,14 +171,13 @@ 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;

const extraSection = useMemo(() => {
const adminSection = useMemo(() => {
const items: ContextMenuEntry[] = [];

if (withAdminLink && user?.rolesOrPermissions?.includes(RoleOrPermission.ADMIN)) {
Expand All @@ -178,23 +186,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 entries: ContextMenuEntry[] = [
{
title: (user && (getPrimaryEmail(user) || user?.name)) || "User",
customFontStyle: "text-gray-400",
Expand All @@ -215,15 +217,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) {
entries.push({
title: "Feedback",
onClick: onFeedback,
separator: true,
});
}

entries.push(...adminSection);

entries.push({
title: "Log out",
href: gitpodHostUrl.asApiLogout().toString(),
});

return entries;
}, [adminSection, user, isGitpodIo, onFeedback]);

return (
<div
Expand All @@ -243,5 +257,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 + "/"));
}
4 changes: 4 additions & 0 deletions components/dashboard/src/start/StartPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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">
Expand All @@ -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-pk-content-secondary">Gitpod Classic</span>}
<Heading2 className="mt-8">{title}</Heading2>
{typeof phase === "number" && phase < StartPhase.IdeReady && (
<ProgressBar phase={phase} error={!!error} />
Expand Down
Loading