Replace old MultiAutocompleteSelectField with new Multiselect

.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

playwright/pages/pageElements/rightSideDetailsSection.ts

@@ -20,7 +20,7 @@ export class RightSideDetailsPage extends BasePage {
     readonly pickupAllWarehousesButton = page.getByTestId("ALL"),
     readonly categorySelectOption = page.locator("[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("single-autocomplete-select-option"),
@@ -77,7 +77,7 @@ export class RightSideDetailsPage extends BasePage {
   }
 
   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
@@ -86,7 +86,7 @@ export class RightSideDetailsPage extends BasePage {
 
   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();
     }

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) {

playwright/pages/staffMembersPage.ts

@@ -23,9 +23,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;
@@ -65,7 +65,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) {

playwright/pages/variantsPage.ts

@@ -36,7 +36,7 @@ export class VariantsPage {
     readonly checkoutLimitInput = page.getByTestId("checkout-limit-input"),
     readonly assignWarehouseButton = page.getByTestId("assign-warehouse-button"),
     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']"),
   ) {

src/components/AccountPermissionGroups/AccountPermissionGroups.tsx

@@ -5,29 +5,26 @@ 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<AccountPermissionGroupsProps> = props => {
   const {
     availablePermissionGroups,
     disabled,
-    displayValues,
     errors,
     formData,
     hasMore,
@@ -46,21 +43,24 @@ const AccountPermissionGroups: React.FC<AccountPermissionGroupsProps> = props =>
 
   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">{getStaffErrorMessage(formErrors.addGroups, intl)}</Typography>

src/components/Combobox/components/Multiselect.tsx

@@ -23,7 +23,7 @@ const MultiselectRoot = forwardRef<HTMLInputElement, MultiselectProps>(
   (
     {
       disabled,
-      options,
+      options = [],
       onChange,
       fetchOptions,
       value,

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 {
   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";
 
@@ -70,7 +66,7 @@ export interface ShippingZoneDetailsPageProps extends FetchMoreProps, SearchProp
   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,
@@ -103,31 +99,12 @@ const ShippingZoneDetailsPage: React.FC<ShippingZoneDetailsPageProps> = ({
   const intl = useIntl();
   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();
 
   return (
     <Form initial={initialForm} onSubmit={onSubmit} 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 (
@@ -178,17 +155,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>

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[];
 }

src/shipping/components/ShippingZoneDetailsPage/utils.ts

@@ -11,6 +11,8 @@ 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 })) || [],
 });

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);
   const intl = useIntl();
@@ -48,18 +45,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"
       />
     </>

src/shipping/components/ShippingZoneSettingsCard/ShippingZoneSettingsCard.tsx

@@ -1,8 +1,8 @@
 import CardTitle from "@dashboard/components/CardTitle";
-import { MultiAutocompleteChoiceType } from "@dashboard/components/MultiAutocompleteSelectField";
 import { ChannelFragment } from "@dashboard/graphql";
 import { FormChange } from "@dashboard/hooks/useForm";
 import { Card, CardContent, Divider } from "@material-ui/core";
+import { Option } from "@saleor/macaw-ui-next";
 import React from "react";
 import { defineMessages, useIntl } from "react-intl";
 
@@ -20,22 +20,19 @@ const messages = defineMessages({
 
 export interface ShippingZoneSettingsCardProps {
   formData: ShippingZoneUpdateFormData;
-  warehousesDisplayValues: MultiAutocompleteChoiceType[];
-  warehousesChoices: MultiAutocompleteChoiceType[];
+  warehousesChoices: Option[];
   onWarehouseAdd: () => void;
   onWarehouseChange: FormChange;
   hasMoreWarehouses: boolean;
   onFetchMoreWarehouses: () => void;
   onWarehousesSearchChange: (query: string) => void;
-  channelsDisplayValues: MultiAutocompleteChoiceType[];
   onChannelChange: FormChange;
   allChannels?: ChannelFragment[];
   loading: boolean;
 }
 
 export const ShippingZoneSettingsCard: React.FC<ShippingZoneSettingsCardProps> = ({
   formData,
-  warehousesDisplayValues,
   hasMoreWarehouses,
   loading,
   warehousesChoices,
@@ -45,7 +42,6 @@ export const ShippingZoneSettingsCard: React.FC<ShippingZoneSettingsCardProps> =
   onWarehouseChange,
   allChannels,
   onChannelChange,
-  channelsDisplayValues,
 }) => {
   const intl = useIntl();
 
@@ -54,7 +50,6 @@ export const ShippingZoneSettingsCard: React.FC<ShippingZoneSettingsCardProps> =
       <CardTitle title={intl.formatMessage(messages.title)} />
       <CardContent data-test-id="channel-section">
         <ChannelsSection
-          channelsDisplayValues={channelsDisplayValues}
           onChange={onChannelChange}
           allChannels={allChannels}
           selectedChannels={formData.channels}
@@ -67,7 +62,6 @@ export const ShippingZoneSettingsCard: React.FC<ShippingZoneSettingsCardProps> =
           onSearchChange={onWarehousesSearchChange}
           onChange={onWarehouseChange}
           onFetchMore={onFetchMoreWarehouses}
-          displayValues={warehousesDisplayValues}
           choices={warehousesChoices}
           selectedWarehouses={formData.warehouses}
           hasMore={hasMoreWarehouses}