🐛 Show the organization in the new team form (#13023)

frontend/playwright/data/dashboard/check-nitrate-sso-authorized.json

@@ -0,0 +1,3 @@
+{
+  "~:authorized": true
+}

frontend/playwright/data/dashboard/get-teams-organization-switcher.json

@@ -0,0 +1,91 @@
+[
+  {
+    "~:features": {
+      "~#set": [
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Brand Studio",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f40f6d",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": true,
+    "~:organization": {
+      "~:id": "~u11111111-1111-4111-8111-111111111111",
+      "~:name": "Brand Studio",
+      "~:slug": "brand-studio",
+      "~:owner-id": "~u22222222-2222-4222-8222-222222222222",
+      "~:avatar-bg-url": null,
+      "~:permissions": {
+        "~:create-teams": "any"
+      }
+    }
+  },
+  {
+    "~:features": {
+      "~#set": [
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": false,
+      "~:is-admin": false,
+      "~:can-edit": true
+    },
+    "~:name": "Product",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~udd33ff88-f4e5-8033-8003-8096cc07bdf3",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": true,
+    "~:organization": {
+      "~:id": "~u33333333-3333-4333-8333-333333333333",
+      "~:name": "Product Studio With a Long Organization Name That Must Remain Available",
+      "~:slug": "product-studio",
+      "~:owner-id": "~u44444444-4444-4444-8444-444444444444",
+      "~:avatar-bg-url": null,
+      "~:permissions": {
+        "~:create-teams": "any"
+      }
+    }
+  },
+  {
+    "~:features": {
+      "~#set": [
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Personal projects",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~ue3c2fd6d-2d3e-47b3-87f6-41b467dff123",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": true
+  }
+]

frontend/playwright/ui/specs/dashboard-teams.spec.js

@@ -24,3 +24,66 @@ test("BUG 12359 - Selected invitations count is not pluralized", async ({
   await page.getByText("test2@mail.com").check();
   await expect(page.getByText("2 invitations selected")).toBeVisible();
 });
+
+async function setupOrganizationTeamSwitcher(page) {
+  await DashboardPage.mockConfigFlags(page, [
+    "disable-onboarding",
+    "enable-admin-console",
+  ]);
+  await DashboardPage.mockRPC(
+    page,
+    "get-teams",
+    "dashboard/get-teams-organization-switcher.json",
+  );
+  await DashboardPage.mockRPC(
+    page,
+    "check-nitrate-sso",
+    "dashboard/check-nitrate-sso-authorized.json",
+  );
+
+  const dashboardPage = new DashboardPage(page);
+  await dashboardPage.goToDashboard();
+  return dashboardPage;
+}
+
+test("User sees the destination organization when creating a team", async ({
+  page,
+}) => {
+  const organizationName =
+    "Product Studio With a Long Organization Name That Must Remain Available";
+  const dashboardPage = await setupOrganizationTeamSwitcher(page);
+
+  await dashboardPage.teamDropdown.click();
+  await page.getByRole("menuitem", { name: organizationName }).click();
+  await page.getByRole("menuitem", { name: "Create new team" }).click();
+
+  const title = page.getByRole("heading", {
+    name: `Create new team in ${organizationName}`,
+    exact: true,
+  });
+  await expect(title).toBeVisible();
+  await expect(title).toHaveText(`Create new team in ${organizationName}`);
+
+  const titleFits = await title.evaluate(
+    (element) => element.scrollWidth <= element.clientWidth,
+  );
+  expect(titleFits).toBe(true);
+
+  const modal = title.locator("xpath=../../..");
+  const modalBounds = await modal.boundingBox();
+  expect(modalBounds.width).toBeLessThanOrEqual(512);
+});
+
+test("Creating a team under Other teams does not name an organization", async ({
+  page,
+}) => {
+  const dashboardPage = await setupOrganizationTeamSwitcher(page);
+
+  await dashboardPage.teamDropdown.click();
+  await page.getByRole("menuitem", { name: "Other teams" }).click();
+  await page.getByRole("menuitem", { name: "Create new team" }).click();
+
+  await expect(
+    page.getByRole("heading", { name: "Create new team", exact: true }),
+  ).toBeVisible();
+});

frontend/src/app/main/ui/dashboard/team_form.cljs

@@ -83,7 +83,7 @@
 (mf/defc team-form-modal
   {::mf/register modal/components
    ::mf/register-as :team-form}
-  [{:keys [team organization-id] :as props}]
+  [{:keys [team organization-id organization-name]}]
   (let [initial (mf/use-memo
                  (mf/deps team organization-id)
                  (fn []
@@ -117,7 +117,9 @@
           [:h2 {:class (stl/css :modal-title)}
            (tr "labels.rename-team")]
           [:h2 {:class (stl/css :modal-title)}
-           (tr "labels.create-team")])
+           (if organization-name
+             (tr "dashboard.create-team-in-organization" organization-name)
+             (tr "labels.create-team"))])
 
         [:> icon-button* {:variant "ghost"
                           :tooltip-class (stl/css :modal-close-btn)

frontend/src/app/main/ui/dashboard/team_form.scss

@@ -26,6 +26,9 @@
   @include use-typography("headline-large");
 
   color: var(--color-foreground-primary);
+  max-inline-size: 100%;
+  padding-inline-end: var(--sp-xxl);
+  overflow-wrap: anywhere;
 }
 
 // Tooltip wrapper of the close button: it places it in the corner.

frontend/translations/en.po

@@ -376,6 +376,10 @@ msgstr "Create new organization"
 msgid "dashboard.create-new-team"
 msgstr "Create new team"
 
+#: src/app/main/ui/dashboard/team_form.cljs:122
+msgid "dashboard.create-team-in-organization"
+msgstr "Create new team in %s"
+
 #: src/app/main/ui/workspace/main_menu.cljs:712
 msgid "dashboard.create-version-menu"
 msgstr "Pin this version"

frontend/translations/es.po

@@ -382,6 +382,10 @@ msgstr "Crear nueva organización"
 msgid "dashboard.create-new-team"
 msgstr "Crear nuevo equipo"
 
+#: src/app/main/ui/dashboard/team_form.cljs:122
+msgid "dashboard.create-team-in-organization"
+msgstr "Crea un nuevo equipo en %s"
+
 #: src/app/main/ui/workspace/main_menu.cljs:712
 msgid "dashboard.create-version-menu"
 msgstr "Guardar esta versión"