WIP: Streamline Forms

client/src/features/ProjectPageV2/ProjectPageContent/DataConnectors/ProjectConnectDataConnectorsModal.tsx

@@ -372,10 +372,6 @@ function ProjectLinkDataConnectorBodyAndFooter({
               pattern: /^[A-Za-z0-9._-]+(?:\/[A-Za-z0-9._-]+){0,2}$/,
             }}
           />
-          <div className="form-text">
-            Paste a data connector identifier. You can find it on the the data
-            connector&apos;s side panel
-          </div>
           <div className="invalid-feedback">
             {errors.dataConnectorIdentifier == null
               ? undefined
@@ -384,6 +380,10 @@ function ProjectLinkDataConnectorBodyAndFooter({
               ? errors.dataConnectorIdentifier.message
               : "Please provide an identifier for the data connector"}
           </div>
+          <div className="form-text">
+            Paste a data connector identifier. You can find it on the the data
+            connector&apos;s side panel
+          </div>
         </div>
         {error != null && <RtkOrNotebooksError error={error} />}
       </ModalBody>
@@ -530,10 +530,10 @@ function ProjectDoiDataConnectorBodyAndFooter({
               required: true,
             }}
           />
+          <div className="invalid-feedback">Please provide a valid DOI</div>
           <div className="form-text">
             Paste a DOI, e.g. <code>10.5281/zenodo.3831980</code>.
           </div>
-          <div className="invalid-feedback">Please provide a valid DOI</div>
         </div>
         {error !== null && <RtkOrNotebooksError error={error} />}
       </ModalBody>

client/src/features/ProjectPageV2/ProjectPageContent/SessionSecrets/ProjectSessionSecrets.tsx

@@ -141,8 +141,8 @@ export default function ProjectSessionSecrets() {
       </CardHeader>
       <CardBody>
         <div className={cx(sessionSecretSlots?.length !== 0 && "mb-3")}>
-          <p className="mb-1">
-            Session secrets will be mounted at the following location:
+          <p className={cx("form-label", "mb-1")}>
+            Session secrets will be mounted at the following location
           </p>
           <SecretsMountDirectoryComponent />
         </div>

client/src/features/dataConnectorsV2/components/DataConnectorModal/DataConnectorModalBody.tsx

@@ -400,9 +400,6 @@ export function DataConnectorMount({
         <div className="invalid-feedback">
           {errors.name?.message?.toString()}
         </div>
-      </div>
-
-      <div className="mb-3">
         <SlugPreviewFormField
           compact={true}
           control={control}

client/src/features/groupsV2/new/GroupNew.tsx

@@ -174,15 +174,13 @@ function GroupV2CreationDetails() {
         >
           <FormGroup className="d-inline" disabled={result.isLoading}>
             <div className={cx("d-flex", "flex-column", "gap-3")}>
-              <div>
-                <div className="mb-1">
-                  <NameFormField
-                    control={control}
-                    entityName="group"
-                    errors={errors}
-                    name="name"
-                  />
-                </div>
+              <div className="mb-1">
+                <NameFormField
+                  control={control}
+                  entityName="group"
+                  errors={errors}
+                  name="name"
+                />
 
                 <SlugPreviewFormField
                   compact={true}

client/src/features/project/components/cloudStorage/AddOrEditCloudStorage.tsx

@@ -395,7 +395,9 @@ function CheckboxOptionItem({
           />
         )}
       />
-      <label htmlFor={option.name}>{option.friendlyName ?? option.name}</label>
+      <label className="form-label" htmlFor={option.name}>
+        {option.friendlyName ?? option.name}
+      </label>
     </>
   );
 }
@@ -434,7 +436,7 @@ function PasswordOptionItem({
   const tooltipContainerId = `option-is-secret-${option.name}`;
   return (
     <>
-      <label htmlFor={option.name}>
+      <label className="form-label" htmlFor={option.name}>
         {option.friendlyName ?? option.name}{" "}
         <div id={tooltipContainerId} className="d-inline">
           <KeyFill className={cx("bi", "ms-1")} />
@@ -514,7 +516,7 @@ function PasswordOptionItemStored({
   const tooltipContainerId = `option-is-secret-${option.name}`;
   return (
     <>
-      <label htmlFor={option.name}>
+      <label className="form-label" htmlFor={option.name}>
         {option.friendlyName ?? option.name}{" "}
         <div id={tooltipContainerId} className="d-inline">
           <KeyFill className={cx("bi", "ms-1")} />
@@ -582,7 +584,9 @@ function InputOptionItem({
       : option.friendlyName ?? option.name;
   return (
     <>
-      <label htmlFor={option.name}>{inputName}</label>
+      <label className="form-label" htmlFor={option.name}>
+        {inputName}
+      </label>
 
       <Controller
         name={option.name}

client/src/features/project/components/projectMigration/ProjectMigrationFormInputs.tsx

@@ -112,8 +112,6 @@ export default function ProjectMigrationFormInputs({
             errors={errors}
             name="namespace"
           />
-        </div>
-        <div>
           <SlugPreviewFormField
             compact={true}
             control={control}

client/src/features/projectsV2/fields/DescriptionFormField.tsx

@@ -50,10 +50,10 @@ export default function DescriptionFormField<T extends FieldValues>({
         )}
         rules={{ maxLength: 500, required: false }}
       />
+      <div className="invalid-feedback">Please provide a description</div>
       <FormText id={`${entityName}DescriptionHelp`} className="input-hint">
         A brief (at most 500 character) description of the {entityName}.
       </FormText>
-      <div className="invalid-feedback">Please provide a description</div>
     </div>
   );
 }

client/src/features/projectsV2/fields/SlugPreviewFormField.module.scss

@@ -0,0 +1,7 @@
+// .slugPreviewGroup {
+//   margin-top: -2px;
+// }
+
+.slugPreviewButton {
+  margin-bottom: 1px;
+}

client/src/features/projectsV2/fields/SlugPreviewFormField.tsx

@@ -26,6 +26,8 @@ import AppContext from "../../../utils/context/appContext.ts";
 import { SlugPreviewFormFieldProps } from "./formField.types.ts";
 import SlugFormField from "./SlugFormField";
 
+import styles from "./SlugPreviewFormField.module.scss";
+
 export default function SlugPreviewFormField<T extends FieldValues>({
   compact = false,
   control,
@@ -53,7 +55,13 @@ export default function SlugPreviewFormField<T extends FieldValues>({
         </span>
       </FormText>
       <button
-        className={cx("btn", "btn-link", "p-0", "mb-1", "text-decoration-none")}
+        className={cx(
+          "btn",
+          "btn-link",
+          "p-0",
+          "text-decoration-none",
+          styles.slugPreviewButton
+        )}
         data-cy={`${entityName}-slug-toggle`}
         onClick={toggleCollapse}
         type="button"

client/src/features/projectsV2/new/ProjectV2New.tsx

@@ -25,7 +25,7 @@ import {
   Button,
   Form,
   FormGroup,
-  Label,
+  FormText,
   ModalBody,
   ModalFooter,
 } from "reactstrap";
@@ -199,17 +199,15 @@ function ProjectV2CreationDetails() {
                 formId={formId}
                 name="name"
               />
-              <div>
-                <div className="mb-1">
-                  <ProjectNamespaceFormField
-                    control={control}
-                    ensureNamespace={defaultNamespace}
-                    entityName={`${formId}-project`}
-                    errors={errors}
-                    name="namespace"
-                  />
-                </div>
 
+              <div className="mb-1">
+                <ProjectNamespaceFormField
+                  control={control}
+                  ensureNamespace={defaultNamespace}
+                  entityName={`${formId}-project`}
+                  errors={errors}
+                  name="namespace"
+                />
                 <SlugPreviewFormField
                   compact={true}
                   control={control}
@@ -241,10 +239,10 @@ function ProjectV2CreationDetails() {
               />
 
               <div>
-                <Label className="mb-0" for="projectV2NewForm-users">
+                <FormText className="mb-0" color="body">
                   <InfoCircle className="bi" /> You can add members after
                   creating the project.
-                </Label>
+                </FormText>
               </div>
 
               {result.error && <RtkOrNotebooksError error={result.error} />}

client/src/features/sessionsV2/components/SessionForm/AdvancedSettingsFields.tsx

@@ -43,6 +43,38 @@ function OptionalLabel() {
   return <span className={cx("small", "text-muted")}>(Optional)</span>;
 }
 
+interface FormFieldLabelProps<T extends FieldValues> {
+  info: string;
+  isOptional?: boolean;
+  label: ReactNode;
+  name: Path<T>;
+}
+
+function FormFieldLabel<T extends FieldValues>({
+  info,
+  isOptional,
+  label,
+  name,
+}: FormFieldLabelProps<T>) {
+  return (
+    <div className={cx("d-flex", "align-items-center", "gap-2", "mb-1")}>
+      <Label
+        for={`addSessionLauncher${name}`}
+        className="mb-0"
+        aria-required={isOptional ? "false" : "true"}
+      >
+        {label}
+      </Label>
+      {info && (
+        <MoreInfo>
+          <LazyRenkuMarkdown markdownText={info} />
+        </MoreInfo>
+      )}
+      {isOptional && <OptionalLabel />}
+    </div>
+  );
+}
+
 function FormField<T extends FieldValues>({
   control,
   errors,
@@ -53,16 +85,12 @@ function FormField<T extends FieldValues>({
   rules,
   type = "text",
   isOptional,
-}: {
+}: FormFieldLabelProps<T> & {
   control: Control<T>;
   errors?: FieldErrors<T>;
-  info: string;
-  label: ReactNode;
-  name: Path<T>;
   placeholder?: string;
   rules?: ControllerProps<T>["rules"];
   type: InputType;
-  isOptional?: boolean;
 }) {
   if (type === "checkbox" || type === "radio") {
     return (
@@ -82,20 +110,12 @@ function FormField<T extends FieldValues>({
 
   return (
     <>
-      <Label
-        for={`addSessionLauncher${name}`}
-        className={cx("align-items-center", "d-flex", "gap-2")}
-        aria-required={isOptional ? "false" : "true"}
-      >
-        {label}
-        {info && (
-          <MoreInfo>
-            <LazyRenkuMarkdown markdownText={info} />
-          </MoreInfo>
-        )}
-
-        {isOptional && <OptionalLabel />}
-      </Label>
+      <FormFieldLabel
+        info={info}
+        isOptional={isOptional}
+        label={label}
+        name={name}
+      />
       <Controller
         control={control}
         name={name}
@@ -207,20 +227,12 @@ function JsonField<T extends FieldValues>({
 }: JsonFieldProps<T>) {
   return (
     <>
-      <Label
-        for={`addSessionLauncher${name}`}
-        className={cx("align-items-center", "d-flex", "gap-2")}
-      >
-        {label}
-        {info && (
-          <MoreInfo>
-            <LazyRenkuMarkdown markdownText={info} />
-          </MoreInfo>
-        )}
-        {isOptional && <OptionalLabel />}
-      </Label>
-
-      <FormText tag="div">{helpText}</FormText>
+      <FormFieldLabel
+        info={info}
+        isOptional={isOptional}
+        label={label}
+        name={name}
+      />
       <Controller
         control={control}
         name={name}
@@ -242,6 +254,7 @@ function JsonField<T extends FieldValues>({
           {errors[name]?.message?.toString()}
         </div>
       )}
+      <FormText tag="div">{helpText}</FormText>
     </>
   );
 }
@@ -295,7 +308,7 @@ export function AdvancedSettingsFields<
 
       <div className="row">
         <div className={cx("col-12")}>
-          <h4 className="fw-bold">Docker settings</h4>
+          <h3 className={cx("fw-bold", "mt-3")}>Docker settings</h3>
         </div>
       </div>
 

client/src/features/sessionsV2/components/SessionForm/CustomEnvironmentFields.tsx

@@ -130,7 +130,7 @@ export function CustomEnvironmentFields({
       </div>
 
       <div>
-        <h4 className="fw-bold">Advanced settings</h4>
+        <h3 className={cx("fw-bold", "mt-3")}>Advanced settings</h3>
 
         <InfoAlert dismissible={false} timeout={0}>
           <p className="mb-0">

client/src/features/sessionsV2/components/SessionForm/LauncherDetailsFields.tsx

@@ -184,14 +184,14 @@ export function LauncherDetailsFields({ control }: LauncherDetailsFieldsProps) {
                       Gigabytes
                     </UncontrolledTooltip>
                   </InputGroup>
-                  <FormText>
-                    Default: {watchCurrentSessionClass.default_storage} GB, max:{" "}
-                    {watchCurrentSessionClass.max_storage} GB
-                  </FormText>
                   <div className="invalid-feedback">
                     {error?.message ||
                       "Please provide a valid value for disk storage."}
                   </div>
+                  <FormText>
+                    Default: {watchCurrentSessionClass.default_storage} GB, max:{" "}
+                    {watchCurrentSessionClass.max_storage} GB
+                  </FormText>
                 </>
               )}
               rules={{

client/src/features/sessionsV2/components/SessionForm/SessionEnvironmentItem.tsx

@@ -115,12 +115,14 @@ export function SessionEnvironmentItem({
           for={`addSessionLauncherGlobalEnvironment-${id}`}
         >
           <h4 className="fw-semibold">{name}</h4>
-          <p className="mb-2">
+          <p className={cx("mb-2", "fw-normal")}>
             <EnvironmentIcon type="global" className="me-1" />
             Global environment
           </p>
-          {description ? <p className="mb-2">{description}</p> : null}
-          <p className="m-0">
+          {description ? (
+            <p className={cx("mb-2", "fw-normal")}>{description}</p>
+          ) : null}
+          <p className={cx("m-0", "fw-normal")}>
             <TimeCaption
               datetime={creation_date}
               enableTooltip