minor: fix before and after the SlugPreviewFormField

Author: ciyer

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/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/SlugPreviewFormField.tsx

@@ -44,7 +44,8 @@ export default function SlugPreviewFormField<T extends FieldValues>({
   const url = `${baseUrl}${parentPath}`;
 
   const slugPreview = (
-    <div>
+    // Compensate for the mb-1 on the button which is needed to align with the text
+    <div className="mb-n1">
       <FormText className="me-2">
         The URL for this {entityName} will be{" "}
         <span className="fw-bold" data-cy={`${entityName}-url-preview`}>

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

@@ -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}

client/src/styles/renku_bootstrap_customization.scss

@@ -1,6 +1,9 @@
 // Functions: should be imported first
 @import "~bootstrap/scss/functions";
 
+// Enable negative margins utility
+$enable-negative-margins: true;
+
 // Font
 @import "./fonts/fonts";
 $font-family-base: "Inter", sans-serif;

tests/cypress/e2e/projectV2setup.spec.ts

@@ -207,7 +207,8 @@ describe("Set up data connectors", () => {
         namespace: "user1-uuid/test-2-v2-project",
         visibility: "public",
       })
-      .postDataConnectorProjectLink({ dataConnectorId: "ULID-5" });
+      .postDataConnectorProjectLink({ dataConnectorId: "ULID-5" })
+      .readProjectV2Namespace();
     cy.visit("/p/user1-uuid/test-2-v2-project");
     cy.wait("@readProjectV2WithoutDocumentation");
     cy.wait("@listProjectDataConnectors");

tests/cypress/fixtures/projectV2/read-projectV2-namespace.json

@@ -0,0 +1,9 @@
+{
+  "id": "namespace-id",
+  "name": "test-2-v2-project",
+  "slug": "test-2-v2-project",
+  "path": "user1-uuid/test-2-v2-project",
+  "creation_date": "2023-11-15T09:55:59Z",
+  "created_by": "user-id",
+  "namespace_kind": "project"
+}

tests/cypress/support/renkulab-fixtures/namespaceV2.ts

@@ -53,6 +53,11 @@ interface ListManyNamespacesArgs extends NameOnlyFixture {
   numberOfNamespaces?: number;
 }
 
+interface ProjectV2Args extends SimpleFixture {
+  projectNamespace?: string;
+  projectSlug?: string;
+}
+
 interface UserNamespaceV2Args extends SimpleFixture {
   username?: string;
 }
@@ -308,6 +313,31 @@ export function NamespaceV2<T extends FixturesConstructor>(Parent: T) {
       return this;
     }
 
+    readProjectV2Namespace(args?: ProjectV2Args) {
+      const {
+        fixture = "projectV2/read-projectV2-namespace.json",
+        name = "readProjectV2Namespace",
+        projectNamespace = "user1-uuid",
+        projectSlug = "test-2-v2-project",
+      } = args ?? {};
+      cy.fixture(fixture).then((namespace_) => {
+        const namespace = {
+          ...namespace_,
+          name: projectSlug,
+          slug: projectSlug,
+          path: `${projectNamespace}/${projectSlug}`,
+        };
+        cy.intercept(
+          "GET",
+          `/api/data/namespaces/${projectNamespace}/${projectSlug}`,
+          {
+            body: namespace,
+          }
+        ).as(name);
+      });
+      return this;
+    }
+
     readUserV2Namespace(args?: UserNamespaceV2Args) {
       const {
         fixture = "namespaceV2/namespaceV2-user1.json",