Icons

components/dashboard/src/components/PageWithSubMenu.tsx

@@ -14,10 +14,7 @@ import { Separator } from "./Separator";
 export interface PageWithSubMenuProps {
     title: string;
     subtitle: string;
-    subMenu: {
-        title: string;
-        link: string[];
-    }[];
+    subMenu: SubmenuItemProps[];
     tabs?: TabEntry[];
     children: React.ReactNode;
 }
@@ -56,9 +53,10 @@ export function PageWithSubMenu(p: PageWithSubMenuProps) {
 export type SubmenuItemProps = {
     title: string;
     link: string[];
+    icon?: React.ReactNode;
 };
 
-export const SubmenuItem: FC<SubmenuItemProps> = ({ title, link }) => {
+export const SubmenuItem: FC<SubmenuItemProps> = ({ title, link, icon }) => {
     const location = useLocation();
     const itemRef = useRef<HTMLLIElement>(null);
 
@@ -69,7 +67,7 @@ export const SubmenuItem: FC<SubmenuItemProps> = ({ title, link }) => {
         }
     }, [link, location.pathname]);
 
-    let classes = "flex block py-2 px-4 rounded-md whitespace-nowrap max-w-52";
+    let classes = "flex justify-between block py-2 px-4 rounded-md whitespace-nowrap max-w-52";
 
     if (link.some((l) => l === location.pathname)) {
         classes += " bg-gray-300 text-gray-800 dark:bg-gray-800 dark:text-gray-50";
@@ -79,7 +77,7 @@ export const SubmenuItem: FC<SubmenuItemProps> = ({ title, link }) => {
     return (
         <Link to={link[0]} key={title} className="md:w-full">
             <li ref={itemRef} className={classes}>
-                {title}
+                {title} {icon}
             </li>
         </Link>
     );

components/dashboard/src/components/WidePageWithSubmenu.tsx

@@ -31,7 +31,7 @@ export function WidePageWithSubMenu(p: PageWithSubMenuProps) {
                         )}
                     >
                         {p.subMenu.map((e) => {
-                            return <SubmenuItem title={e.title} link={e.link} key={e.title} />;
+                            return <SubmenuItem title={e.title} link={e.link} key={e.title} icon={e.icon} />;
                         })}
                     </ul>
                 </div>

components/dashboard/src/configurations/detail/ConfigurationDetailPage.tsx

@@ -8,10 +8,11 @@ import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configurati
 import { BreadcrumbNav } from "@podkit/breadcrumbs/BreadcrumbNav";
 import { Button } from "@podkit/buttons/Button";
 import type { UseQueryResult } from "@tanstack/react-query";
-import { Loader2 } from "lucide-react";
+import { HelpCircle, Loader2 } from "lucide-react";
 import { useMemo } from "react";
 import Alert from "../../components/Alert";
 import { WidePageWithSubMenu } from "../../components/WidePageWithSubmenu";
+import type { SubmenuItemProps } from "../../components/PageWithSubMenu";
 
 export interface PageWithAdminSubMenuProps {
     children: React.ReactNode;
@@ -63,12 +64,13 @@ export function ConfigurationDetailPage({ children, configurationQuery, id }: Pa
     );
 }
 
-function getConfigurationsMenu(id: string) {
+function getConfigurationsMenu(id: string): SubmenuItemProps[] {
     const base = `/configurations/${id}`;
     return [
         {
             title: "General",
             link: [base],
+            icon: <HelpCircle />,
         },
         {
             title: "Gitpod YAML",