Configuration Detail setup (#19021)

* Configuration Detail setup

* nav

* Breadcrumb above nav

* type updates

* Useconfig

* Fix undefined vs null

* Fix children rendering

* Update colors

* Cancel buttons

* Delete configs

* Refactor configuration detail page to use new
RemoveConfiguration component

* Fix styling and layout issues in BreadcrumbNav and
RemoveConfiguration components

* Update BreadcrumbNav and ConfigurationDetailPage
components.

* Fix spacings

* Update BreadcrumbNav styling

* Containerify

* Update configuration name and style, and add dark
mode support.

* Update BreadcrumbNav styling to include dark mode
hover text color

* Fix text color in BreadcrumbNav component

* Add WidePageWithSubMenu component and export
SubmenuItem

* Revert `PageWithSubMenu` changes

* Fix types

* Unify margins for ConfigurationName

* Icons

* Refactor configuration deletion queries

Co-authored-by: Brad Harris <[email protected]>

* Less useStates :}

Co-authored-by: Brad Harris <[email protected]>

* Call `onRemoved` only at `onSuccess`

* Add MiddleDot component to BreadcrumbNav

Co-authored-by: Brad Harris <[email protected]>

* Fix rectangular focus indicators

* Add icons to configurations menu

* navs

* Conditionally render children

* Fix rectangular list items

* `configurations` -> `repositories` underneath 🫣

* Update links in OrganizationSelector and
ConfigurationDetailPage

* Update BreadcrumbNav to use larger font size for
page description

* Componentize config setting fields

* y margin

* Fix contrast for Confirmation modal descriptions

* use dirty state hook and fix cancelling after updating

* Re-structure

* `asChild` for podkit headings

* Fix save button disabled state in
ConfigurationNameForm component

* Add type attribute to button in
ConfigurationNameForm component

* Remove hack, which didn't work 🙃

* Fix error handling in ConfigurationDetailPage
component

* Refactor sub-menu item styles to improve
accessibility.

* Update ConfigurationNameForm component with
useState hook

* Do not memoize 🤖

---------

Co-authored-by: Brad Harris <[email protected]>

Author: filiptronicek

components/dashboard/src/app/AppRoutes.tsx

@@ -76,9 +76,11 @@ const WorkspacesSearch = React.lazy(() => import(/* webpackPrefetch: true */ "..
 const ProjectsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "../admin/ProjectsSearch"));
 const TeamsSearch = React.lazy(() => import(/* webpackPrefetch: true */ "../admin/TeamsSearch"));
 const Usage = React.lazy(() => import(/* webpackPrefetch: true */ "../Usage"));
-const RepositoryListPage = React.lazy(() => import(/* webpackPrefetch: true */ "../repositories/list/RepositoryList"));
-const RepositoryDetailPage = React.lazy(
-    () => import(/* webpackPrefetch: true */ "../repositories/detail/RepositoryDetail"),
+const ConfigurationListPage = React.lazy(
+    () => import(/* webpackPrefetch: true */ "../repositories/list/RepositoryList"),
+);
+const ConfigurationGeneral = React.lazy(
+    () => import(/* webpackPrefetch: true */ "../repositories/detail/ConfigurationDetailGeneral"),
 );
 
 export const AppRoutes = () => {
@@ -216,8 +218,8 @@ export const AppRoutes = () => {
 
                     {repoConfigListAndDetail && (
                         <>
-                            <Route exact path="/repositories" component={RepositoryListPage} />
-                            <Route exact path="/repositories/:id" component={RepositoryDetailPage} />
+                            <Route exact path="/repositories" component={ConfigurationListPage} />
+                            <Route exact path="/repositories/:id" component={ConfigurationGeneral} />
                         </>
                     )}
                     {/* basic redirect for old team slugs */}

components/dashboard/src/components/ConfirmationModal.tsx

@@ -66,7 +66,9 @@ export const ConfirmationModal: FC<Props> = ({
                 {isEntity(children) ? (
                     <div className="w-full p-4 mb-2 bg-gray-100 dark:bg-gray-700 rounded-xl group">
                         <p className="text-base text-gray-800 dark:text-gray-100 font-semibold">{children.name}</p>
-                        {children.description && <p className="text-gray-500 truncate">{children.description}</p>}
+                        {children.description && (
+                            <p className="text-gray-500 dark:text-gray-300 truncate">{children.description}</p>
+                        )}
                     </div>
                 ) : (
                     children

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;
 }
@@ -53,12 +50,13 @@ export function PageWithSubMenu(p: PageWithSubMenuProps) {
     );
 }
 
-type SubmenuItemProps = {
+export type SubmenuItemProps = {
     title: string;
     link: string[];
+    icon?: React.ReactNode;
 };
 
-const SubmenuItem: FC<SubmenuItemProps> = ({ title, link }) => {
+export const SubmenuItem: FC<SubmenuItemProps> = ({ title, link, icon }) => {
     const location = useLocation();
     const itemRef = useRef<HTMLLIElement>(null);
 
@@ -69,17 +67,19 @@ 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 rounded-md py-2 px-4 whitespace-nowrap max-w-52";
 
-    if (link.some((l) => l === location.pathname)) {
+    const isCurrent = link.some((l) => l === location.pathname);
+    if (isCurrent) {
         classes += " bg-gray-300 text-gray-800 dark:bg-gray-800 dark:text-gray-50";
     } else {
-        classes += " hover:bg-gray-100 dark:hover:bg-gray-800";
+        classes += " hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-400";
     }
+
     return (
-        <Link to={link[0]} key={title} className="md:w-full">
+        <Link to={link[0]} key={title} className="md:w-full rounded-md">
             <li ref={itemRef} className={classes}>
-                {title}
+                {title} {icon}
             </li>
         </Link>
     );

components/dashboard/src/components/WidePageWithSubmenu.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import classNames from "classnames";
+import { Separator } from "./Separator";
+import { cn } from "@podkit/lib/cn";
+import { SubmenuItem, SubmenuItemProps } from "./PageWithSubMenu";
+
+export interface PageWithSubMenuProps {
+    /**
+     * The name of the navigation menu, as read by screen readers.
+     */
+    navTitle?: string;
+    subMenu: SubmenuItemProps[];
+    children: React.ReactNode;
+}
+
+export function WidePageWithSubMenu(p: PageWithSubMenuProps) {
+    return (
+        <div className="w-full">
+            <div className={cn("app-container flex flex-col md:flex-row")}>
+                {/* TODO: extract into SubMenu component and show scrolling indicators */}
+                <nav aria-label={p.navTitle}>
+                    <ul
+                        className={classNames(
+                            // Handle flipping between row and column layout
+                            "flex flex-row md:flex-col items-center",
+                            "w-full md:w-52 overflow-auto md:overflow-visible",
+                            "pt-4 pb-4 md:pb-0",
+                            "space-x-2 md:space-x-0 md:space-y-2",
+                            "tracking-wide text-gray-500",
+                        )}
+                    >
+                        {p.subMenu.map((e) => {
+                            return <SubmenuItem title={e.title} link={e.link} key={e.title} icon={e.icon} />;
+                        })}
+                    </ul>
+                </nav>
+                <div className="md:ml-4 w-full pt-1 mb-40">
+                    <Separator className="md:hidden" />
+                    <div className="pt-4 md:pt-0">{p.children}</div>
+                </div>
+            </div>
+        </div>
+    );
+}

components/dashboard/src/components/podkit/breadcrumbs/BreadcrumbNav.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { LinkButton } from "@podkit/buttons/LinkButton";
+import { cn } from "@podkit/lib/cn";
+import { ChevronLeft } from "lucide-react";
+import type { FC } from "react";
+import { MiddleDot } from "../../typography/MiddleDot";
+import { Heading3 } from "@podkit/typography/Headings";
+
+interface BreadcrumbPageNavProps {
+    /**
+     * The title of the current page.
+     */
+    pageTitle: string;
+    /**
+     * The description of the current page.
+     */
+    pageDescription?: string;
+    /**
+     * The link to the previous page.
+     */
+    backLink?: string;
+    className?: string;
+}
+
+export const BreadcrumbNav: FC<BreadcrumbPageNavProps> = ({ pageTitle, pageDescription, backLink, className }) => {
+    return (
+        <section className={cn("flex flex-row items-center justify-start gap-2 w-full py-4 app-container", className)}>
+            {backLink && (
+                <LinkButton
+                    variant={"ghost"}
+                    className="py-1 px-0 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                    href={backLink}
+                >
+                    <ChevronLeft size={24} />
+                </LinkButton>
+            )}
+            <Heading3 asChild>
+                <h1>{pageTitle}</h1>
+            </Heading3>
+            <MiddleDot />
+            <p className="text-gray-900 dark:text-gray-300 text-lg">{pageDescription}</p>
+        </section>
+    );
+};

components/dashboard/src/components/podkit/typography/Headings.tsx

@@ -6,38 +6,49 @@
 
 import { cn } from "@podkit/lib/cn";
 import { FC } from "react";
+import { Slot } from "@radix-ui/react-slot";
 
 type HeadingProps = {
     id?: string;
     tracking?: "tight" | "wide";
     color?: "light" | "dark";
     className?: string;
+    asChild?: boolean;
 };
 
-export const Heading1: FC<HeadingProps> = ({ id, color, tracking, className, children }) => {
+export const Heading1: FC<HeadingProps> = ({ id, color, tracking, className, children, asChild }) => {
+    const Comp = asChild ? Slot : "h1";
+
     return (
-        <h1
+        <Comp
             id={id}
             className={cn(getHeadingColor(color), getTracking(tracking), "font-bold text-4xl truncate", className)}
         >
             {children}
-        </h1>
+        </Comp>
     );
 };
 
-export const Heading2: FC<HeadingProps> = ({ id, color, tracking, className, children }) => {
+export const Heading2: FC<HeadingProps> = ({ id, color, tracking, className, children, asChild }) => {
+    const Comp = asChild ? Slot : "h2";
+
     return (
-        <h2 id={id} className={cn(getHeadingColor(color), getTracking(tracking), "font-semibold text-2xl", className)}>
+        <Comp
+            id={id}
+            className={cn(getHeadingColor(color), getTracking(tracking), "font-semibold text-2xl", className)}
+        >
             {children}
-        </h2>
+        </Comp>
     );
 };
 
-export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, children }) => {
+export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, children, asChild }) => {
+    const Comp = asChild ? Slot : "h3";
+
     return (
-        <h3 id={id} className={cn(getHeadingColor(color), getTracking(tracking), "font-semibold text-lg", className)}>
+        <Comp id={id} className={cn(getHeadingColor(color), getTracking(tracking), "font-semibold text-lg", className)}>
             {children}
-        </h3>
+        </Comp>
     );
 };
 

components/dashboard/src/data/configurations/configuration-queries.ts

@@ -4,10 +4,10 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCurrentOrg } from "../organizations/orgs-query";
 import { configurationClient } from "../../service/public-api";
-import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
+import type { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
 
 const BASE_KEY = "configurations";
 
@@ -60,6 +60,25 @@ export const useConfiguration = (configurationId: string) => {
     });
 };
 
+type DeleteConfigurationArgs = {
+    configurationId: string;
+};
+export const useDeleteConfiguration = () => {
+    const queryClient = useQueryClient();
+
+    return useMutation({
+        mutationFn: async ({ configurationId }: DeleteConfigurationArgs) => {
+            return await configurationClient.deleteConfiguration({
+                configurationId,
+            });
+        },
+        onSuccess: (_, { configurationId }) => {
+            queryClient.invalidateQueries({ queryKey: ["configurations", "list"] });
+            queryClient.invalidateQueries({ queryKey: getConfigurationQueryKey(configurationId) });
+        },
+    });
+};
+
 export const getConfigurationQueryKey = (configurationId: string) => {
     const key: any[] = [BASE_KEY, { configurationId }];
 

components/dashboard/src/menu/OrganizationSelector.tsx

@@ -57,8 +57,8 @@ export default function OrganizationSelector() {
     if (currentOrg.data) {
         if (repoConfigListAndDetail) {
             linkEntries.push({
-                title: "Repositories",
-                customContent: <LinkEntry>Repositories</LinkEntry>,
+                title: "Configurations",
+                customContent: <LinkEntry>Configurations</LinkEntry>,
                 active: false,
                 separator: false,
                 link: "/repositories",

components/dashboard/src/repositories/detail/ConfigurationDetailGeneral.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { FC } from "react";
+import { useParams } from "react-router";
+import { ConfigurationNameForm } from "./general/ConfigurationName";
+import { ConfigurationDetailPage } from "./ConfigurationDetailPage";
+import { useConfiguration } from "../../data/configurations/configuration-queries";
+import { RemoveConfiguration } from "./general/RemoveConfiguration";
+
+type PageRouteParams = {
+    id: string;
+};
+const ConfigurationDetailGeneral: FC = () => {
+    const { id } = useParams<PageRouteParams>();
+    const configurationQuery = useConfiguration(id);
+    const { data } = configurationQuery;
+
+    return (
+        <ConfigurationDetailPage configurationQuery={configurationQuery} id={id}>
+            {data && (
+                <>
+                    <ConfigurationNameForm configuration={data} />
+                    <RemoveConfiguration configuration={data} />
+                </>
+            )}
+        </ConfigurationDetailPage>
+    );
+};
+
+export default ConfigurationDetailGeneral;