Replace old MultiAutocompleteSelectField with new Multiselect (#5022)

* Replace old MultiAutocompleteSelectField with new in AccountPermissionGroups * Replace old MultiAutocompleteSelectField with new in ChannelSelection * Replace old MultiAutocompleteSelectField with new in WerehousesSection with add new warehouse button * Add changeset * Update locators * Fix channel locator * Fix test when multipe selected channels * Fix warehouse selector * Update changeset * Fix verifyAssignedPermission * Fix verifyAssignedPermission and Multiselect when options is undefined
saleor · Jul 8, 2024 · b594e00 · b594e00
1 parent 00e178b
commit b594e00
Show file tree

Hide file tree

Showing 16 changed files with 97 additions and 149 deletions.
diff --git a/.changeset/big-beds-bathe.md b/.changeset/big-beds-bathe.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+The legacy multiselect are not longer present within the codebase. this means you should use the ones from new macaw when developing the UI
diff --git a/playwright/pages/pageElements/rightSideDetailsSection.ts b/playwright/pages/pageElements/rightSideDetailsSection.ts
@@ -22,9 +22,7 @@ export class RightSideDetailsPage extends BasePage {
       "[data-test-id*='select-option']",
     ),
     readonly taxSelectOption = page.locator("[data-test-id*='select-option']"),
-    readonly selectOption = page.getByTestId(
-      "multi-autocomplete-select-option",
-    ),
+    readonly selectOption = page.getByTestId("select-option"),
     readonly categoryInput = page.getByTestId("category"),
     readonly taxInput = page.getByTestId("taxes"),
     readonly categoryItem = page.getByTestId(
@@ -98,19 +96,19 @@ export class RightSideDetailsPage extends BasePage {
   }
   async expectOptionsSelected(section: Locator, names: string[]) {
     for (const name of names) {
-      await expect(section.getByText(name)).toBeVisible({timeout: 30000});
+      await expect(section.getByText(name)).toBeVisible({ timeout: 30000 });
     }
   }
   async typeAndSelectSingleWarehouseShippingPage(warehouse = "Europe") {
-    await this.selectWarehouseShippingMethodButton.locator("input").fill(warehouse);
+    await this.selectWarehouseShippingMethodButton.fill(warehouse);
 
     await this.selectOption.filter({ hasText: warehouse }).first().click();
     // below click hides prompted options
     this.clickWarehouseSelectShippingPage();
   }
   async typeAndSelectMultipleWarehousesShippingPage(warehouses: string[]) {
     for (const warehouse of warehouses) {
-      await this.selectWarehouseShippingMethodButton.locator("input").fill(warehouse);
+      await this.selectWarehouseShippingMethodButton.fill(warehouse);
 
       await this.selectOption.filter({ hasText: warehouse }).first().click();
     }

diff --git a/playwright/pages/shippingMethodsPage.ts b/playwright/pages/shippingMethodsPage.ts
@@ -76,12 +76,17 @@ export class ShippingMethodsPage extends BasePage {
 
     await console.log(`Navigates to existing shipping method page: ${existingShippingMethodUrl}`);
     await this.page.goto(existingShippingMethodUrl);
-    await this.rightSideDetailsPage.channelSection
-      .locator(this.page.getByTestId("selected-options"))
-      .waitFor({
+
+    const channels = await this.rightSideDetailsPage.channelSection
+      .locator('[data-test-id*="selected-option-"]')
+      .all();
+
+    for (const channel of channels) {
+      await channel.waitFor({
         state: "visible",
         timeout: 60000,
       });
+    }
   }
 
   async gotoExistingShippingRate(shippingMethodId: string, shippingRateId: string) {

diff --git a/playwright/pages/staffMembersPage.ts b/playwright/pages/staffMembersPage.ts
@@ -20,9 +20,9 @@ export class StaffMembersPage extends BasePage {
     readonly lastName = page.getByTestId("staffLastName"),
     readonly email = page.getByTestId("staffEmail"),
     readonly permissionsGroupSelectButton = page.getByTestId("permission-groups"),
-    readonly permissionGroupOptions = page.getByTestId("multi-autocomplete-select-option"),
-    readonly assignedPermissionGroups = page.getByTestId("assigned-permission-group"),
+    readonly permissionGroupOptions = page.getByTestId("select-option"),
     readonly isActiveCheckbox = page.getByTestId("is-active-checkbox").locator("input"),
+    readonly selectedPermissions = page.locator("[data-test-id*='selected-option']"),
   ) {
     super(page);
     this.request = request;
@@ -60,7 +60,7 @@ export class StaffMembersPage extends BasePage {
   }
 
   async verifyAssignedPermission(permission: string) {
-    await expect(this.assignedPermissionGroups.filter({ hasText: permission })).toBeVisible();
+    await expect(this.selectedPermissions.filter({ hasText: permission })).toBeVisible();
   }
 
   async updateStaffInfo(name: string, lastName: string, email: string) {

diff --git a/playwright/pages/variantsPage.ts b/playwright/pages/variantsPage.ts
@@ -36,9 +36,7 @@ export class VariantsPage {
     readonly booleanAttributeCheckbox = page.locator(
       "[name*='attribute'][type='checkbox']",
     ),
-    readonly selectOption = page.getByTestId(
-      "multi-autocomplete-select-option",
-    ),
+    readonly selectOption = page.getByTestId("select-option"),
     readonly manageChannels = page.getByTestId("manage-channels-button"),
     readonly allChannels = page.locator("[name='allChannels']"),
   ) {

diff --git a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
@@ -8,24 +8,22 @@ import { FetchMoreProps, RelayToFlat, SearchPageProps } from "@dashboard/types";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getStaffErrorMessage from "@dashboard/utils/errors/staff";
 import { Typography } from "@material-ui/core";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType,
-} from "../MultiAutocompleteSelectField";
+import { Multiselect } from "../Combobox";
 
 export interface AccountPermissionGroupsProps
   extends FetchMoreProps,
     SearchPageProps {
   formData: {
-    permissionGroups: string[];
+    permissionGroups: Option[];
   };
   disabled: boolean;
   errors: StaffErrorFragment[];
   availablePermissionGroups: RelayToFlat<SearchPermissionGroupsQuery["search"]>;
   onChange: FormChange;
-  displayValues: MultiAutocompleteChoiceType[];
 }
 
 const AccountPermissionGroups: React.FC<
@@ -34,7 +32,6 @@ const AccountPermissionGroups: React.FC<
   const {
     availablePermissionGroups,
     disabled,
-    displayValues,
     errors,
     formData,
     hasMore,
@@ -54,21 +51,24 @@ const AccountPermissionGroups: React.FC<
   const formErrors = getFormErrors(["addGroups", "removeGroups"], errors);
   return (
     <>
-      <MultiAutocompleteSelectField
-        displayValues={displayValues}
+      <Multiselect
         label={intl.formatMessage({
           id: "C7eDb9",
           defaultMessage: "Permission groups",
         })}
-        choices={disabled ? [] : choices}
         name="permissionGroups"
+        options={disabled ? [] : choices}
         value={formData?.permissionGroups}
         onChange={onChange}
-        fetchChoices={onSearchChange}
+        fetchOptions={onSearchChange}
+        fetchMore={{
+          onFetchMore,
+          hasMore,
+          loading,
+        }}
         data-test-id="permission-groups"
-        onFetchMore={onFetchMore}
-        hasMore={hasMore}
-        loading={loading}
+        error={!!formErrors.addGroups}
+        helperText={getStaffErrorMessage(formErrors.addGroups, intl)}
       />
       {!!formErrors.addGroups && (
         <Typography color="error">

diff --git a/src/components/Combobox/components/Multiselect.tsx b/src/components/Combobox/components/Multiselect.tsx
@@ -33,7 +33,7 @@ const MultiselectRoot = forwardRef<HTMLInputElement, MultiselectProps>(
   (
     {
       disabled,
-      options,
+      options = [],
       onChange,
       fetchOptions,
       value,

diff --git a/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx b/src/shipping/components/ShippingZoneDetailsPage/ShippingZoneDetailsPage.tsx
@@ -6,9 +6,7 @@ import CountryList from "@dashboard/components/CountryList";
 import Form from "@dashboard/components/Form";
 import { DetailPageLayout } from "@dashboard/components/Layouts";
 import { Metadata } from "@dashboard/components/Metadata/Metadata";
-import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
-import Savebar from "@dashboard/components/Savebar";
-import { SingleAutocompleteChoiceType } from "@dashboard/components/SingleAutocompleteSelectField";
+import { Savebar } from "@dashboard/components/Savebar";
 import {
   ChannelFragment,
   ShippingErrorFragment,
@@ -18,11 +16,9 @@ import {
 } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import useNavigator from "@dashboard/hooks/useNavigator";
-import useStateFromProps from "@dashboard/hooks/useStateFromProps";
 import { shippingZonesListUrl } from "@dashboard/shipping/urls";
-import createMultiAutocompleteSelectHandler from "@dashboard/utils/handlers/multiAutocompleteSelectChangeHandler";
-import { mapNodeToChoice } from "@dashboard/utils/maps";
 import useMetadataChangeTrigger from "@dashboard/utils/metadata/useMetadataChangeTrigger";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
@@ -74,9 +70,7 @@ export interface ShippingZoneDetailsPageProps
   allChannels?: ChannelFragment[];
 }
 
-function warehouseToChoice(
-  warehouse: Record<"id" | "name", string>,
-): SingleAutocompleteChoiceType {
+function warehouseToChoice(warehouse: Record<"id" | "name", string>): Option {
   return {
     label: warehouse.name,
     value: warehouse.id,
@@ -110,19 +104,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   const navigate = useNavigator();
 
   const initialForm = getInitialFormData(shippingZone);
-
-  const [warehouseDisplayValues, setWarehouseDisplayValues] = useStateFromProps<
-    MultiAutocompleteChoiceType[]
-  >(mapNodeToChoice(shippingZone?.warehouses));
-
   const warehouseChoices = warehouses.map(warehouseToChoice);
-
-  const channelChoices = mapNodeToChoice(allChannels);
-
-  const [channelsDisplayValues, setChannelDisplayValues] = useStateFromProps<
-    MultiAutocompleteChoiceType[]
-  >(mapNodeToChoice(shippingZone?.channels));
-
   const { makeChangeHandler: makeMetadataChangeHandler } =
     useMetadataChangeTrigger();
 
@@ -133,21 +115,7 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
       confirmLeave
       disabled={disabled}
     >
-      {({ change, data, isSaveDisabled, submit, toggleValue }) => {
-        const handleWarehouseChange = createMultiAutocompleteSelectHandler(
-          toggleValue,
-          setWarehouseDisplayValues,
-          warehouseDisplayValues,
-          warehouseChoices,
-        );
-
-        const handleChannelChange = createMultiAutocompleteSelectHandler(
-          toggleValue,
-          setChannelDisplayValues,
-          channelsDisplayValues,
-          channelChoices,
-        );
-
+      {({ change, data, isSaveDisabled, submit }) => {
         const changeMetadata = makeMetadataChangeHandler(change);
 
         return (
@@ -204,17 +172,15 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
             <DetailPageLayout.RightSidebar>
               <ShippingZoneSettingsCard
                 formData={data}
-                warehousesDisplayValues={warehouseDisplayValues}
                 hasMoreWarehouses={hasMore}
                 loading={loading}
-                onWarehouseChange={handleWarehouseChange}
+                onWarehouseChange={change}
                 onFetchMoreWarehouses={onFetchMore}
                 onWarehousesSearchChange={onSearchChange}
                 onWarehouseAdd={onWarehouseAdd}
                 warehousesChoices={warehouseChoices}
                 allChannels={allChannels}
-                channelsDisplayValues={channelsDisplayValues}
-                onChannelChange={handleChannelChange}
+                onChannelChange={change}
               />
             </DetailPageLayout.RightSidebar>
             <Savebar

diff --git a/src/shipping/components/ShippingZoneDetailsPage/types.ts b/src/shipping/components/ShippingZoneDetailsPage/types.ts
@@ -1,8 +1,9 @@
 import { MetadataFormData } from "@dashboard/components/Metadata";
+import { Option } from "@saleor/macaw-ui-next";
 
 export interface ShippingZoneUpdateFormData extends MetadataFormData {
   name: string;
   description: string;
-  warehouses: string[];
-  channels: string[];
+  warehouses: Option[];
+  channels: Option[];
 }
diff --git a/src/shipping/components/ShippingZoneDetailsPage/utils.ts b/src/shipping/components/ShippingZoneDetailsPage/utils.ts
@@ -11,6 +11,14 @@ export const getInitialFormData = (
   metadata: shippingZone?.metadata.map(mapMetadataItemToInput),
   name: shippingZone?.name || "",
   privateMetadata: shippingZone?.privateMetadata.map(mapMetadataItemToInput),
-  warehouses: shippingZone?.warehouses?.map(warehouse => warehouse.id) || [],
-  channels: shippingZone?.channels.map(({ id }) => id) || [],
+  warehouses:
+    shippingZone?.warehouses?.map(warehouse => ({
+      label: warehouse.name,
+      value: warehouse.id,
+    })) || [],
+  channels:
+    shippingZone?.channels.map(({ id, name }) => ({
+      label: name,
+      value: id,
+    })) || [],
 });
diff --git a/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx b/src/shipping/components/ShippingZoneSettingsCard/ChannelsSection.tsx
@@ -1,11 +1,10 @@
 import CardSpacer from "@dashboard/components/CardSpacer";
-import MultiAutocompleteSelectField, {
-  MultiAutocompleteChoiceType,
-} from "@dashboard/components/MultiAutocompleteSelectField";
+import { Multiselect } from "@dashboard/components/Combobox";
 import { ChannelFragment } from "@dashboard/graphql";
 import { useChannelsSearch } from "@dashboard/hooks/useChannelsSearch";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { mapNodeToChoice } from "@dashboard/utils/maps";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
@@ -30,16 +29,14 @@ const messages = defineMessages({
 
 interface ChannelsSectionProps {
   onChange: FormChange;
-  selectedChannels: string[];
+  selectedChannels: Option[];
   allChannels?: ChannelFragment[];
-  channelsDisplayValues: MultiAutocompleteChoiceType[];
 }
 
 const ChannelsSection: React.FC<ChannelsSectionProps> = ({
   onChange,
   allChannels = [],
   selectedChannels,
-  channelsDisplayValues,
 }) => {
   const { onQueryChange, filteredChannels } = useChannelsSearch(allChannels);
 
@@ -49,18 +46,14 @@ const ChannelsSection: React.FC<ChannelsSectionProps> = ({
     <>
       <FormattedMessage {...messages.subtitle} />
       <CardSpacer />
-      <MultiAutocompleteSelectField
-        choices={mapNodeToChoice(filteredChannels)}
-        displayValues={channelsDisplayValues}
-        fetchChoices={onQueryChange}
-        hasMore={false}
+
+      <Multiselect
         label={intl.formatMessage(messages.selectFieldLabel)}
-        loading={false}
         name="channels"
-        onChange={onChange}
-        placeholder={intl.formatMessage(messages.selectFieldPlaceholder)}
+        options={mapNodeToChoice(filteredChannels)}
         value={selectedChannels}
-        testId="channels"
+        onChange={onChange}
+        fetchOptions={onQueryChange}
         data-test-id="select-channel-for-shipping-method"
       />
     </>