From a656cb84b4c47ed91da389e42c03494e39145bbc Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Thu, 20 Feb 2025 02:05:03 +0000 Subject: [PATCH 1/6] fix: default org selection in template form if only one --- .../OrganizationAutocomplete.stories.tsx | 61 +++++++++++++++++++ .../OrganizationAutocomplete.tsx | 7 ++- 2 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx new file mode 100644 index 0000000000000..5b9950bdd6bf5 --- /dev/null +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx @@ -0,0 +1,61 @@ +import { action } from "@storybook/addon-actions"; +import type { Meta, StoryObj } from "@storybook/react"; +import { userEvent, within } from "@storybook/test"; +import { + MockOrganization, + MockOrganization2, + MockUser, +} from "testHelpers/entities"; +import { OrganizationAutocomplete } from "./OrganizationAutocomplete"; + +const meta: Meta = { + title: "components/OrganizationAutocomplete", + component: OrganizationAutocomplete, + args: { + value: null, + onChange: action("Selected organization"), + }, +}; + +export default meta; +type Story = StoryObj; + +export const ManyOrgs: Story = { + parameters: { + showOrganizations: true, + user: MockUser, + features: ["multiple_organizations"], + permissions: { viewDeploymentValues: true }, + queries: [ + { + key: ["organizations"], + data: [MockOrganization, MockOrganization2], + }, + ], + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const button = canvas.getByRole("button"); + await userEvent.click(button); + }, +}; + +export const OneOrg: Story = { + parameters: { + showOrganizations: true, + user: MockUser, + features: ["multiple_organizations"], + permissions: { viewDeploymentValues: true }, + queries: [ + { + key: ["organizations"], + data: [MockOrganization], + }, + ], + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const button = canvas.getByRole("button"); + await userEvent.click(button); + }, +}; diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index 348c312ec9fe7..ea1e1e8dacdd7 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -85,7 +85,8 @@ export const OrganizationAutocomplete: FC = ({ className={className} options={options} loading={organizationsQuery.isLoading} - value={value} + value={options.length === 1 ? options[0] : value} + disabled={options.length === 1} data-testid="organization-autocomplete" open={autoComplete.open} isOptionEqualToValue={(a, b) => a.name === b.name} @@ -154,6 +155,6 @@ export const OrganizationAutocomplete: FC = ({ }; const root = css` - padding-left: 14px !important; // Same padding left as input - gap: 4px; + padding-left: 14px !important; // Same padding left as input + gap: 4px; `; From bb93325afd9b9e372566eef42ed8c904bbbce124 Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Thu, 20 Feb 2025 02:12:46 +0000 Subject: [PATCH 2/6] remove play key --- .../OrganizationAutocomplete.stories.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx index 5b9950bdd6bf5..154e6f7008080 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx @@ -53,9 +53,4 @@ export const OneOrg: Story = { }, ], }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const button = canvas.getByRole("button"); - await userEvent.click(button); - }, }; From dd921e90f9d4552fe2457cbf605bbc6af0c3889c Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Thu, 20 Feb 2025 02:45:10 +0000 Subject: [PATCH 3/6] fix e2e --- site/e2e/helpers.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts index a2f55ad2c86ff..cffb7f9fe4401 100644 --- a/site/e2e/helpers.ts +++ b/site/e2e/helpers.ts @@ -270,8 +270,13 @@ export const createTemplate = async ( ); } - await orgPicker.click(); - await page.getByText(orgName, { exact: true }).click(); + // picker is disabled if only one org is available + const pickerIsDisabled = await orgPicker.isDisabled(); + + if (!pickerIsDisabled) { + await orgPicker.click(); + await page.getByText(orgName, { exact: true }).click(); + } } const name = randomName(); From 0330ba6c29933d2a80c47592621ddd896fd08dd6 Mon Sep 17 00:00:00 2001 From: Kira Date: Fri, 7 Mar 2025 21:52:58 +0000 Subject: [PATCH 4/6] import order --- .../OrganizationAutocomplete/OrganizationAutocomplete.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index cb5128da7b516..b1173a6430233 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -7,7 +7,13 @@ import { organizations } from "api/queries/organizations"; import type { AuthorizationCheck, Organization } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; -import { type ComponentProps, type FC, useState, useMemo, useEffect } from "react"; +import { + type ComponentProps, + type FC, + useEffect, + useMemo, + useState, +} from "react"; import { useQuery } from "react-query"; export type OrganizationAutocompleteProps = { From 92e632ad1350f2765e75b59f756685480abaedde Mon Sep 17 00:00:00 2001 From: Kira Pilot Date: Fri, 7 Mar 2025 17:12:04 -0500 Subject: [PATCH 5/6] Update site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: ケイラ --- .../OrganizationAutocomplete/OrganizationAutocomplete.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index b1173a6430233..9cd0e1fb2e8c2 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -11,7 +11,6 @@ import { type ComponentProps, type FC, useEffect, - useMemo, useState, } from "react"; import { useQuery } from "react-query"; From cea580a6842ddce4858157e658e2aea673dc2b2f Mon Sep 17 00:00:00 2001 From: Kira Date: Mon, 10 Mar 2025 15:41:13 +0000 Subject: [PATCH 6/6] import order --- .../OrganizationAutocomplete/OrganizationAutocomplete.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx index 9cd0e1fb2e8c2..d5135980d2dc0 100644 --- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx +++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx @@ -7,12 +7,7 @@ import { organizations } from "api/queries/organizations"; import type { AuthorizationCheck, Organization } from "api/typesGenerated"; import { Avatar } from "components/Avatar/Avatar"; import { AvatarData } from "components/Avatar/AvatarData"; -import { - type ComponentProps, - type FC, - useEffect, - useState, -} from "react"; +import { type ComponentProps, type FC, useEffect, useState } from "react"; import { useQuery } from "react-query"; export type OrganizationAutocompleteProps = {