diff --git a/frontend/playwright/data/dashboard/check-nitrate-sso-authorized.json b/frontend/playwright/data/dashboard/check-nitrate-sso-authorized.json new file mode 100644 index 0000000000..4adb4d785d --- /dev/null +++ b/frontend/playwright/data/dashboard/check-nitrate-sso-authorized.json @@ -0,0 +1,3 @@ +{ + "~:authorized": true +} diff --git a/frontend/playwright/data/dashboard/get-teams-organization-switcher.json b/frontend/playwright/data/dashboard/get-teams-organization-switcher.json new file mode 100644 index 0000000000..91b9c2a20e --- /dev/null +++ b/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 + } +] diff --git a/frontend/playwright/ui/specs/dashboard-teams.spec.js b/frontend/playwright/ui/specs/dashboard-teams.spec.js index 31153ac4cb..860a6aad18 100644 --- a/frontend/playwright/ui/specs/dashboard-teams.spec.js +++ b/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(); +}); diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs index 08f6dcaad6..c1b45cde76 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss index 1047c8f3d8..2cf4583bfd 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.scss +++ b/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. diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 48ea44fed3..5f4fc3b975 100644 --- a/frontend/translations/en.po +++ b/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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 87d6b89e7d..068dee9cf8 100644 --- a/frontend/translations/es.po +++ b/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"