minor: fix spacing 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.module.scss

@@ -0,0 +1,7 @@
+.slugPreviewGroup {
+  margin-top: 1px;
+}
+
+.slugPreviewButton {
+  margin-top: -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"
@@ -65,9 +73,8 @@ export default function SlugPreviewFormField<T extends FieldValues>({
   );
 
   return (
-    <div>
+    <div className={cx(styles.slugPreviewGroup)}>
       {slugPreview}
-
       {isCollapseOpen && (
         <>
           <div

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}

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",