refactor: fix some admin page modals, titles and content visual glitches (#3894)

lorenzo-cavazzi · web-flow · commit f43511a76125 · 2025-11-11T10:40:45.000+01:00
diff --git a/client/src/components/container/CollapseBody.tsx b/client/src/components/container/CollapseBody.tsx
@@ -27,14 +27,17 @@ export default function CollapseBody({
   className,
   children,
 }: CollapseBodyProps) {
+  const customMarginStart = /\bms-(?:auto|[0-5])\b/.test(className ?? "");
+  const customPaddingStart = /\bps-(?:auto|[0-5])\b/.test(className ?? "");
+
   return (
     <div
       className={cx(
         "border-3",
         "border-dark-subtle",
         "border-start",
-        "ms-1",
-        "ps-2",
+        !customMarginStart && "ms-1",
+        !customPaddingStart && "ps-2",
         className
       )}
     >
diff --git a/client/src/features/admin/AddSessionEnvironmentButton.tsx b/client/src/features/admin/AddSessionEnvironmentButton.tsx
@@ -45,7 +45,7 @@ export default function AddSessionEnvironmentButton() {
 
   return (
     <>
-      <Button className="btn-outline-rk-green" onClick={toggle}>
+      <Button color="primary" onClick={toggle}>
         <PlusLg className={cx("bi", "me-1")} />
         Add Session Environment
       </Button>
@@ -128,7 +128,7 @@ function AddSessionEnvironmentModal({
       toggle={toggle}
     >
       <Form
-        className="form-rk-green"
+        className="modal-content"
         noValidate
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -140,11 +140,11 @@ function AddSessionEnvironmentModal({
           <SessionEnvironmentFormContent control={control} errors={errors} />
         </ModalBody>
         <ModalFooter>
-          <Button className="btn-outline-rk-green" onClick={toggle}>
+          <Button color="outline-primary" onClick={toggle}>
             <XLg className={cx("bi", "me-1")} />
             Cancel
           </Button>
-          <Button disabled={result.isLoading} type="submit">
+          <Button color="primary" disabled={result.isLoading} type="submit">
             {result.isLoading ? (
               <Loader className="me-1" inline size={16} />
             ) : (
diff --git a/client/src/features/admin/ConnectedServicesSection.tsx b/client/src/features/admin/ConnectedServicesSection.tsx
@@ -44,7 +44,7 @@ import UpdateConnectedServiceButton from "./UpdateConnectedServiceButton";
 export default function ConnectedServicesSection() {
   return (
     <section className="mt-4">
-      <h2 className="fs-4">Integrations</h2>
+      <h2>Integrations</h2>
       <ConnectedServices />
     </section>
   );
@@ -103,10 +103,7 @@ function ConnectedService({ provider }: ConnectedServiceProps) {
   return (
     <Col xs={12} md={6}>
       <Card>
-        <CardHeader
-          className={cx("bg-white", "border-0", "rounded", "fs-6", "p-0")}
-          tag="h5"
-        >
+        <CardHeader className={cx("fs-4", "p-0")} tag="h3">
           <button
             className={cx(
               "align-items-center",
diff --git a/client/src/features/admin/DeleteSessionEnvironmentButton.tsx b/client/src/features/admin/DeleteSessionEnvironmentButton.tsx
@@ -86,23 +86,16 @@ function DeleteSessionEnvironmentModal({
   }, [isOpen, result]);
 
   return (
-    <Modal
-      backdrop="static"
-      centered
-      fullscreen="lg"
-      isOpen={isOpen}
-      size="lg"
-      toggle={toggle}
-    >
+    <Modal backdrop="static" centered isOpen={isOpen} size="lg" toggle={toggle}>
       <ModalHeader tag="h2" toggle={toggle}>
         Are you sure?
       </ModalHeader>
       <ModalBody>
         {result.error && <RtkErrorAlert error={result.error} />}
 
         <p className="mb-0">
-          Please confirm that you want to delete the {environment.name} session
-          environment.
+          Please confirm that you want to delete the{" "}
+          <code>{environment.name}</code> session environment.
         </p>
       </ModalBody>
       <ModalFooter>
diff --git a/client/src/features/admin/SessionEnvironmentAdvancedFields.tsx b/client/src/features/admin/SessionEnvironmentAdvancedFields.tsx
@@ -66,7 +66,7 @@ export default function SessionEnvironmentAdvancedFields({
         </button>
 
         <Collapse isOpen={isAdvancedSettingOpen}>
-          <CollapseBody className="mt-1">
+          <CollapseBody className={cx("ms-0", "mt-4")}>
             <AdvancedSettingsFields<SessionEnvironmentForm>
               control={control}
               errors={errors}
diff --git a/client/src/features/admin/SessionEnvironmentsSection.tsx b/client/src/features/admin/SessionEnvironmentsSection.tsx
@@ -17,19 +17,22 @@
  */
 
 import cx from "classnames";
+import { useCallback, useState } from "react";
 import {
   Card,
   CardBody,
+  CardHeader,
   CardText,
-  CardTitle,
   Col,
+  Collapse,
   Container,
   Row,
 } from "reactstrap";
 
 import { CommandCopy } from "~/components/commandCopy/CommandCopy";
 import { RtkErrorAlert } from "~/components/errors/RtkErrorAlert";
 import { ErrorLabel } from "~/components/formlabels/FormLabels";
+import ChevronFlippedIcon from "~/components/icons/ChevronFlippedIcon";
 import { Loader } from "~/components/Loader";
 import { TimeCaption } from "~/components/TimeCaption";
 import type {
@@ -45,7 +48,7 @@ import UpdateSessionEnvironmentButton from "./UpdateSessionEnvironmentButton";
 export default function SessionEnvironmentsSection() {
   return (
     <section className="mt-4">
-      <h2 className="fs-4">Session Environments - Renku 2.0</h2>
+      <h2>Session Environments</h2>
       <SessionEnvironments />
     </section>
   );
@@ -121,69 +124,95 @@ function SessionEnvironmentDisplay({
     strip_path_prefix,
   } = environment;
 
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = useCallback(() => {
+    setIsOpen((isOpen) => !isOpen);
+  }, []);
+
   return (
     <Col className={cx("col-12", "col-sm-6")}>
       <Card>
-        <CardBody>
-          <CardTitle className={cx("mb-0", "fs-5")} tag="h5">
-            {name}
-          </CardTitle>
-          <CardText className="mb-0">
-            {description ? description : <i>No description</i>}
-          </CardText>
-          <CardText className="mb-0" tag="div">
-            <CommandCopy command={container_image} />
-          </CardText>
-          <CardText className="mb-0">
-            {default_url ? (
-              <>
-                Default URL: <code>{default_url}</code>
-              </>
-            ) : (
-              <i>
-                No default URL {"("}will use <code>{"/lab"}</code>
-                {")"}
-              </i>
+        <CardHeader className={cx("fs-4", "p-0")} tag="h3">
+          <button
+            className={cx(
+              "align-items-center",
+              "bg-transparent",
+              "border-0",
+              "d-flex",
+              "fw-bold",
+              "gap-3",
+              "p-3",
+              "w-100"
             )}
-          </CardText>
-          <CardText className="mb-0">
-            Mount directory: <code>{mount_directory}</code>
-          </CardText>
-          <CardText className="mb-0">
-            Work directory: <code>{working_directory}</code>
-          </CardText>
-          <CardText className="mb-0">
-            Port: <code>{port}</code>
-          </CardText>
-          <CardText className="mb-0">
-            GID: <code>{gid}</code>
-          </CardText>
-          <CardText className="mb-0">
-            UID: <code>{uid}</code>
-          </CardText>
-          <CardText className="mb-0">
-            Command:{" "}
-            <EnvironmentCode value={command ? safeStringify(command) : "-"} />
-          </CardText>
-          <CardText className="mb-0">
-            Args: <EnvironmentCode value={args ? safeStringify(args) : "-"} />
-          </CardText>
-          <CardText className="mb-0">
-            Strip path prefix: {strip_path_prefix ? "Yes" : "No"}
-          </CardText>
-          <CardText>
-            <TimeCaption
-              datetime={creation_date}
-              enableTooltip
-              prefix="Created"
-            />
-          </CardText>
-
-          <div className={cx("d-flex", "justify-content-end", "gap-2")}>
-            <UpdateSessionEnvironmentButton environment={environment} />
-            <DeleteSessionEnvironmentButton environment={environment} />
-          </div>
-        </CardBody>
+            onClick={toggle}
+            type="button"
+          >
+            {name}
+            <div className="ms-auto">
+              <ChevronFlippedIcon flipped={isOpen} />
+            </div>
+          </button>
+        </CardHeader>
+
+        <Collapse isOpen={isOpen}>
+          <CardBody className="pt-0">
+            <CardText className="mb-0">
+              {description ? description : <i>No description</i>}
+            </CardText>
+            <CardText className="mb-0" tag="div">
+              <CommandCopy command={container_image} />
+            </CardText>
+            <CardText className="mb-0">
+              {default_url ? (
+                <>
+                  Default URL: <code>{default_url}</code>
+                </>
+              ) : (
+                <i>
+                  No default URL {"("}will use <code>{"/lab"}</code>
+                  {")"}
+                </i>
+              )}
+            </CardText>
+            <CardText className="mb-0">
+              Mount directory: <code>{mount_directory}</code>
+            </CardText>
+            <CardText className="mb-0">
+              Work directory: <code>{working_directory}</code>
+            </CardText>
+            <CardText className="mb-0">
+              Port: <code>{port}</code>
+            </CardText>
+            <CardText className="mb-0">
+              GID: <code>{gid}</code>
+            </CardText>
+            <CardText className="mb-0">
+              UID: <code>{uid}</code>
+            </CardText>
+            <CardText className="mb-0">
+              Command:{" "}
+              <EnvironmentCode value={command ? safeStringify(command) : "-"} />
+            </CardText>
+            <CardText className="mb-0">
+              Args: <EnvironmentCode value={args ? safeStringify(args) : "-"} />
+            </CardText>
+            <CardText className="mb-0">
+              Strip path prefix: {strip_path_prefix ? "Yes" : "No"}
+            </CardText>
+            <CardText>
+              <TimeCaption
+                datetime={creation_date}
+                enableTooltip
+                prefix="Created"
+              />
+            </CardText>
+
+            <div className={cx("d-flex", "justify-content-end", "gap-2")}>
+              <UpdateSessionEnvironmentButton environment={environment} />
+              <DeleteSessionEnvironmentButton environment={environment} />
+            </div>
+          </CardBody>
+        </Collapse>
       </Card>
     </Col>
   );
diff --git a/client/src/features/admin/UpdateSessionEnvironmentButton.tsx b/client/src/features/admin/UpdateSessionEnvironmentButton.tsx
@@ -39,8 +39,6 @@ import SessionEnvironmentFormContent, {
   SessionEnvironmentForm,
 } from "./SessionEnvironmentFormContent";
 
-import ButtonStyles from "~/components/buttons/Buttons.module.scss";
-
 interface UpdateSessionEnvironmentButtonProps {
   environment: SessionEnvironment;
 }
@@ -55,17 +53,9 @@ export default function UpdateSessionEnvironmentButton({
 
   return (
     <>
-      <Button
-        className={cx(
-          "bg-transparent",
-          "shadow-none",
-          "border-0",
-          ButtonStyles.EditButton
-        )}
-        onClick={toggle}
-      >
-        <PencilSquare size={24} />
-        <span className="visually-hidden">Edit</span>
+      <Button color="outline-primary" onClick={toggle}>
+        <PencilSquare className={cx("bi", "me-1")} />
+        Edit
       </Button>
       <UpdateSessionEnvironmentModal
         environment={environment}
@@ -153,7 +143,7 @@ function UpdateSessionEnvironmentModal({
       toggle={toggle}
     >
       <Form
-        className="form-rk-green"
+        className="modal-content"
         noValidate
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -165,11 +155,15 @@ function UpdateSessionEnvironmentModal({
           <SessionEnvironmentFormContent control={control} errors={errors} />
         </ModalBody>
         <ModalFooter>
-          <Button className="btn-outline-rk-green" onClick={toggle}>
+          <Button color="outline-primary" onClick={toggle}>
             <XLg className={cx("bi", "me-1")} />
             Cancel
           </Button>
-          <Button disabled={result.isLoading || !isDirty} type="submit">
+          <Button
+            color="primary"
+            disabled={result.isLoading || !isDirty}
+            type="submit"
+          >
             {result.isLoading ? (
               <Loader className="me-1" inline size={16} />
             ) : (
diff --git a/client/src/features/sessionsV2/components/SessionForm/AdvancedSettingsFields.tsx b/client/src/features/sessionsV2/components/SessionForm/AdvancedSettingsFields.tsx
@@ -257,7 +257,7 @@ export function AdvancedSettingsFields<
   return (
     <>
       <div className={cx("row", "gy-3", "mb-3")}>
-        <div className={cx("col-12", "col-md-9")}>
+        <div className={cx("col-12", "col-md-9", "mt-0")}>
           <FormField<T>
             control={control}
             name={"default_url" as Path<T>}
@@ -268,7 +268,7 @@ export function AdvancedSettingsFields<
             type="text"
           />
         </div>
-        <div className={cx("col-12", "col-md-3")}>
+        <div className={cx("col-12", "col-md-3", "mt-md-0")}>
           <FormField<T>
             control={control}
             name={"port" as Path<T>}
