Fix assignment list search with no items found (#2206)

* Fix assignment list search with no items found

* Create warehouse and shipping zones separated count queries

* Remove total count displaying from assignment list

src/channels/components/AssignmentList/AssignmentList.tsx

@@ -17,12 +17,7 @@ const messages = defineMessages({
 });
 
 const AssignmentList: React.FC<AssignmentListProps> = props => {
-  const {
+  const { items, itemsName, totalCount = 0, removeItem } = props;
-    items,
-    itemsName,
-    fetchMoreItems: { totalCount },
-    removeItem,
-  } = props;
 
   const intl = useIntl();
   const classes = useStyles();
@@ -32,11 +27,7 @@ const AssignmentList: React.FC<AssignmentListProps> = props => {
 
   return (
     <Accordion classes={expanderClasses}>
-      <AssignmentListHeader
+      <AssignmentListHeader assignCount={items.length} itemsName={itemsName} />
-        assignCount={items.length}
-        totalCount={totalCount}
-        itemsName={itemsName}
-      />
       <Divider />
       {items.map(item => (
         <Item key={item.id} item={item} onDelete={removeItem} />

src/channels/components/AssignmentList/AssignmentListHeader.tsx

@@ -7,13 +7,11 @@ import { useHeaderStyles } from "./styles";
 
 interface AssignmentListHeaderProps {
   assignCount: number;
-  totalCount: number;
   itemsName: string;
 }
 
 const AssignmentListHeader: React.FC<AssignmentListHeaderProps> = ({
   assignCount,
-  totalCount,
   itemsName,
 }) => {
   const classes = useHeaderStyles();
@@ -22,7 +20,7 @@ const AssignmentListHeader: React.FC<AssignmentListHeaderProps> = ({
     <div className={classes.container}>
       <AccordionSummary expandIcon={<IconChevronDown />} classes={classes}>
         <Typography variant="subtitle2" color="textSecondary">
-          {`${assignCount} / ${totalCount} ${itemsName.toLowerCase()}`}
+          {`${assignCount} ${itemsName.toLowerCase()}`}
         </Typography>
       </AccordionSummary>
       <HorizontalSpacer spacing={1.5} />

src/channels/components/AssignmentList/types.ts

@@ -10,6 +10,7 @@ export interface AssignmentListProps {
   itemsChoices: AssignItem[];
   itemsName: string;
   fetchMoreItems: FetchMoreProps;
+  totalCount: number;
   inputName: string;
   dataTestId: string;
   addItem: (id: string) => void;

src/channels/components/ShippingZones/ShippingZones.stories.tsx

@@ -3,7 +3,7 @@ import CommonDecorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import ShippingZones from "./ShippingZones";
+import ShippingZones, { ShippingZonesProps } from "./ShippingZones";
 
 const shippingZones = [
   {
@@ -18,7 +18,7 @@ const shippingZones = [
   },
 ];
 
-const baseProps = {
+const baseProps: ShippingZonesProps = {
   addShippingZone: () => undefined,
   removeShippingZone: () => undefined,
   searchShippingZones: () => undefined,
@@ -30,6 +30,7 @@ const baseProps = {
   },
   shippingZones: [],
   shippingZonesChoices: shippingZones as ChannelShippingZones,
+  totalCount: 10,
 };
 
 storiesOf("Shipping zones", module)

src/channels/components/ShippingZones/ShippingZones.tsx

@@ -18,10 +18,11 @@ const messages = defineMessages({
   },
 });
 
-interface ShippingZonesProps {
+export interface ShippingZonesProps {
   addShippingZone: (id: string) => void;
   removeShippingZone: (id: string) => void;
   searchShippingZones: (searchPhrase: string) => void;
+  totalCount: number;
   fetchMoreShippingZones: FetchMoreProps;
   shippingZones: ChannelShippingZones;
   shippingZonesChoices: RelayToFlat<SearchShippingZonesQuery["search"]>;
@@ -32,6 +33,7 @@ const ShippingZones: React.FC<ShippingZonesProps> = props => {
     addShippingZone,
     removeShippingZone,
     searchShippingZones,
+    totalCount,
     fetchMoreShippingZones,
     shippingZones,
     shippingZonesChoices,
@@ -52,6 +54,7 @@ const ShippingZones: React.FC<ShippingZonesProps> = props => {
         removeItem={removeShippingZone}
         searchItems={searchShippingZones}
         fetchMoreItems={fetchMoreShippingZones}
+        totalCount={totalCount}
         dataTestId="shipping"
         inputName="shippingZone"
         itemsName={intl.formatMessage(sectionNames.shippingZones)}

src/channels/components/Warehouses/Warehouses.stories.tsx

@@ -3,7 +3,7 @@ import CommonDecorator from "@saleor/storybook/Decorator";
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import Warehouses from "./Warehouses";
+import Warehouses, { WarehousesProps } from "./Warehouses";
 
 const warehouses = [
   {
@@ -18,7 +18,7 @@ const warehouses = [
   },
 ];
 
-const baseProps = {
+const baseProps: WarehousesProps = {
   addWarehouse: () => undefined,
   removeWarehouse: () => undefined,
   searchWarehouses: () => undefined,
@@ -30,6 +30,7 @@ const baseProps = {
   },
   warehouses: [],
   warehousesChoices: warehouses as ChannelWarehouses,
+  totalCount: 10,
 };
 
 storiesOf("Warehouses", module)

src/channels/components/Warehouses/Warehouses.tsx

@@ -18,10 +18,11 @@ const messages = defineMessages({
   },
 });
 
-interface WarehousesProps {
+export interface WarehousesProps {
   addWarehouse: (id: string) => void;
   removeWarehouse: (id: string) => void;
   searchWarehouses: (searchPhrase: string) => void;
+  totalCount: number;
   fetchMoreWarehouses: FetchMoreProps;
   warehouses: ChannelWarehouses;
   warehousesChoices: RelayToFlat<SearchWarehousesQuery["search"]>;
@@ -32,6 +33,7 @@ const Warehouses: React.FC<WarehousesProps> = props => {
     addWarehouse,
     removeWarehouse,
     searchWarehouses,
+    totalCount,
     fetchMoreWarehouses,
     warehouses,
     warehousesChoices,
@@ -52,6 +54,7 @@ const Warehouses: React.FC<WarehousesProps> = props => {
         removeItem={removeWarehouse}
         searchItems={searchWarehouses}
         fetchMoreItems={fetchMoreWarehouses}
+        totalCount={totalCount}
         dataTestId="warehouse"
         inputName="warehouse"
         itemsName={intl.formatMessage(sectionNames.warehouses)}

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx

@@ -29,6 +29,7 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
     country: name,
     __typename: "CountryDisplay",
   })),
+  allShippingZonesCount: 10,
   channelShippingZones: [
     {
       __typename: "ShippingZone",
@@ -47,6 +48,7 @@ const props: ChannelDetailsPageProps<ChannelErrorFragment[]> = {
     onFetchMore: () => undefined,
     totalCount: 0,
   },
+  allWarehousesCount: 10,
   channelWarehouses: [
     {
       __typename: "Warehouse",

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -44,9 +44,11 @@ export interface ChannelDetailsPageProps<TErrors> {
   searchShippingZonesData?: SearchData;
   fetchMoreShippingZones: FetchMoreProps;
   channelShippingZones?: ChannelShippingZones;
+  allShippingZonesCount: number;
   searchWarehousesData?: SearchData;
   fetchMoreWarehouses: FetchMoreProps;
   channelWarehouses?: ChannelWarehouses;
+  allWarehousesCount: number;
   countries: CountryFragment[];
   onDelete?: () => void;
   onSubmit: (data: FormData) => SubmitPromise<TErrors[]>;
@@ -69,10 +71,12 @@ const ChannelDetailsPage = function<TErrors>({
   searchShippingZonesData,
   fetchMoreShippingZones,
   channelShippingZones = [],
+  allShippingZonesCount,
   searchWarehouses,
   searchWarehousesData,
   fetchMoreWarehouses,
   channelWarehouses = [],
+  allWarehousesCount,
   countries,
 }: ChannelDetailsPageProps<TErrors>) {
   const navigate = useNavigator();
@@ -268,6 +272,7 @@ const ChannelDetailsPage = function<TErrors>({
                   removeShippingZone={removeShippingZone}
                   searchShippingZones={searchShippingZones}
                   fetchMoreShippingZones={fetchMoreShippingZones}
+                  totalCount={allShippingZonesCount}
                 />
                 <CardSpacer />
                 <Warehouses
@@ -277,6 +282,7 @@ const ChannelDetailsPage = function<TErrors>({
                   removeWarehouse={removeWarehouse}
                   searchWarehouses={searchWarehouses}
                   fetchMoreWarehouses={fetchMoreWarehouses}
+                  totalCount={allWarehousesCount}
                 />
               </div>
             </Grid>

src/channels/views/ChannelCreate/ChannelCreate.tsx

@@ -7,6 +7,8 @@ import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
 import {
   ChannelCreateMutation,
   useChannelCreateMutation,
+  useShippingZonesCountQuery,
+  useWarehousesCountQuery,
 } from "@saleor/graphql";
 import { getSearchFetchMoreProps } from "@saleor/hooks/makeTopLevelSearch/utils";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -63,6 +65,11 @@ export const ChannelCreateView = ({}) => {
       }),
     );
 
+  const {
+    data: shippingZonesCountData,
+    loading: shippingZonesCountLoading,
+  } = useShippingZonesCountQuery();
+
   const {
     loadMore: fetchMoreShippingZones,
     search: searchShippingZones,
@@ -71,6 +78,11 @@ export const ChannelCreateView = ({}) => {
     variables: DEFAULT_INITIAL_SEARCH_DATA,
   });
 
+  const {
+    data: warehousesCountData,
+    loading: warehousesCountLoading,
+  } = useWarehousesCountQuery();
+
   const {
     loadMore: fetchMoreWarehouses,
     search: searchWarehouses,
@@ -115,19 +127,27 @@ export const ChannelCreateView = ({}) => {
           })}
         />
         <ChannelDetailsPage
+          allShippingZonesCount={
+            shippingZonesCountData?.shippingZones?.totalCount
+          }
           searchShippingZones={searchShippingZones}
           searchShippingZonesData={searchShippingZonesResult.data}
           fetchMoreShippingZones={getSearchFetchMoreProps(
             searchShippingZonesResult,
             fetchMoreShippingZones,
           )}
+          allWarehousesCount={warehousesCountData?.warehouses?.totalCount}
           searchWarehouses={searchWarehouses}
           searchWarehousesData={searchWarehousesResult.data}
           fetchMoreWarehouses={getSearchFetchMoreProps(
             searchWarehousesResult,
             fetchMoreWarehouses,
           )}
-          disabled={createChannelOpts.loading}
+          disabled={
+            createChannelOpts.loading ||
+            shippingZonesCountLoading ||
+            warehousesCountLoading
+          }
           errors={createChannelOpts?.data?.channelCreate?.errors || []}
           currencyCodes={currencyCodeChoices}
           onSubmit={handleSubmit}

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -18,6 +18,8 @@ import {
   useChannelsQuery,
   useChannelUpdateMutation,
   useChannelWarehousesQuery,
+  useShippingZonesCountQuery,
+  useWarehousesCountQuery,
 } from "@saleor/graphql";
 import { getSearchFetchMoreProps } from "@saleor/hooks/makeTopLevelSearch/utils";
 import useNavigator from "@saleor/hooks/useNavigator";
@@ -163,6 +165,11 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
     deleteChannel({ variables: data });
   };
 
+  const {
+    data: shippingZonesCountData,
+    loading: shippingZonesCountLoading,
+  } = useShippingZonesCountQuery();
+
   const {
     data: channelShippingZonesData,
     loading: channelsShippingZonesLoading,
@@ -182,6 +189,11 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
     variables: DEFAULT_INITIAL_SEARCH_DATA,
   });
 
+  const {
+    data: warehousesCountData,
+    loading: warehousesCountLoading,
+  } = useWarehousesCountQuery();
+
   const {
     data: channelWarehousesData,
     loading: channelsWarehousesLoading,
@@ -219,6 +231,9 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
           channelShippingZones={channelShippingZonesData?.shippingZones?.edges?.map(
             ({ node }) => node,
           )}
+          allShippingZonesCount={
+            shippingZonesCountData?.shippingZones?.totalCount
+          }
           searchShippingZones={searchShippingZones}
           searchShippingZonesData={searchShippingZonesResult.data}
           fetchMoreShippingZones={getSearchFetchMoreProps(
@@ -228,6 +243,7 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
           channelWarehouses={channelWarehousesData?.warehouses?.edges?.map(
             ({ node }) => node,
           )}
+          allWarehousesCount={warehousesCountData?.warehouses?.totalCount}
           searchWarehouses={searchWarehouses}
           searchWarehousesData={searchWarehousesResult.data}
           fetchMoreWarehouses={getSearchFetchMoreProps(
@@ -238,6 +254,8 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
           disabled={
             updateChannelOpts.loading ||
             loading ||
+            shippingZonesCountLoading ||
+            warehousesCountLoading ||
             channelsShippingZonesLoading ||
             channelsWarehousesLoading
           }

src/graphql/hooks.generated.ts

@@ -14200,6 +14200,40 @@ export function useChannelShippingZonesLazyQuery(baseOptions?: ApolloReactHooks.
 export type ChannelShippingZonesQueryHookResult = ReturnType<typeof useChannelShippingZonesQuery>;
 export type ChannelShippingZonesLazyQueryHookResult = ReturnType<typeof useChannelShippingZonesLazyQuery>;
 export type ChannelShippingZonesQueryResult = Apollo.QueryResult<Types.ChannelShippingZonesQuery, Types.ChannelShippingZonesQueryVariables>;
+export const ShippingZonesCountDocument = gql`
+    query ShippingZonesCount {
+  shippingZones {
+    totalCount
+  }
+}
+    `;
+
+/**
+ * __useShippingZonesCountQuery__
+ *
+ * To run a query within a React component, call `useShippingZonesCountQuery` and pass it any options that fit your needs.
+ * When your component renders, `useShippingZonesCountQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useShippingZonesCountQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useShippingZonesCountQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<Types.ShippingZonesCountQuery, Types.ShippingZonesCountQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.ShippingZonesCountQuery, Types.ShippingZonesCountQueryVariables>(ShippingZonesCountDocument, options);
+      }
+export function useShippingZonesCountLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.ShippingZonesCountQuery, Types.ShippingZonesCountQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.ShippingZonesCountQuery, Types.ShippingZonesCountQueryVariables>(ShippingZonesCountDocument, options);
+        }
+export type ShippingZonesCountQueryHookResult = ReturnType<typeof useShippingZonesCountQuery>;
+export type ShippingZonesCountLazyQueryHookResult = ReturnType<typeof useShippingZonesCountLazyQuery>;
+export type ShippingZonesCountQueryResult = Apollo.QueryResult<Types.ShippingZonesCountQuery, Types.ShippingZonesCountQueryVariables>;
 export const ShopSettingsUpdateDocument = gql`
     mutation ShopSettingsUpdate($shopSettingsInput: ShopSettingsInput!, $addressInput: AddressInput, $isCloudInstance: Boolean!) {
   shopSettingsUpdate(input: $shopSettingsInput) {
@@ -16541,6 +16575,40 @@ export function useChannelWarehousesLazyQuery(baseOptions?: ApolloReactHooks.Laz
 export type ChannelWarehousesQueryHookResult = ReturnType<typeof useChannelWarehousesQuery>;
 export type ChannelWarehousesLazyQueryHookResult = ReturnType<typeof useChannelWarehousesLazyQuery>;
 export type ChannelWarehousesQueryResult = Apollo.QueryResult<Types.ChannelWarehousesQuery, Types.ChannelWarehousesQueryVariables>;
+export const WarehousesCountDocument = gql`
+    query WarehousesCount {
+  warehouses {
+    totalCount
+  }
+}
+    `;
+
+/**
+ * __useWarehousesCountQuery__
+ *
+ * To run a query within a React component, call `useWarehousesCountQuery` and pass it any options that fit your needs.
+ * When your component renders, `useWarehousesCountQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useWarehousesCountQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useWarehousesCountQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return ApolloReactHooks.useQuery<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>(WarehousesCountDocument, options);
+      }
+export function useWarehousesCountLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return ApolloReactHooks.useLazyQuery<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>(WarehousesCountDocument, options);
+        }
+export type WarehousesCountQueryHookResult = ReturnType<typeof useWarehousesCountQuery>;
+export type WarehousesCountLazyQueryHookResult = ReturnType<typeof useWarehousesCountLazyQuery>;
+export type WarehousesCountQueryResult = Apollo.QueryResult<Types.WarehousesCountQuery, Types.WarehousesCountQueryVariables>;
 export const WebhookCreateDocument = gql`
     mutation WebhookCreate($input: WebhookCreateInput!) {
   webhookCreate(input: $input) {

src/graphql/types.generated.ts

@@ -8018,6 +8018,11 @@ export type ChannelShippingZonesQueryVariables = Exact<{
 
 export type ChannelShippingZonesQuery = { __typename: 'Query', shippingZones: { __typename: 'ShippingZoneCountableConnection', edges: Array<{ __typename: 'ShippingZoneCountableEdge', node: { __typename: 'ShippingZone', id: string, name: string } }> } | null };
 
+export type ShippingZonesCountQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ShippingZonesCountQuery = { __typename: 'Query', shippingZones: { __typename: 'ShippingZoneCountableConnection', totalCount: number | null } | null };
+
 export type ShopSettingsUpdateMutationVariables = Exact<{
   shopSettingsInput: ShopSettingsInput;
   addressInput?: InputMaybe<AddressInput>;
@@ -8470,6 +8475,11 @@ export type ChannelWarehousesQueryVariables = Exact<{
 
 export type ChannelWarehousesQuery = { __typename: 'Query', warehouses: { __typename: 'WarehouseCountableConnection', edges: Array<{ __typename: 'WarehouseCountableEdge', node: { __typename: 'Warehouse', id: string, name: string } }> } | null };
 
+export type WarehousesCountQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type WarehousesCountQuery = { __typename: 'Query', warehouses: { __typename: 'WarehouseCountableConnection', totalCount: number | null } | null };
+
 export type WebhookCreateMutationVariables = Exact<{
   input: WebhookCreateInput;
 }>;

src/shipping/queries.ts

@@ -72,3 +72,11 @@ export const channelShippingZones = gql`
     }
   }
 `;
+
+export const shippingZonesCount = gql`
+  query ShippingZonesCount {
+    shippingZones {
+      totalCount
+    }
+  }
+`;

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -24575,7 +24575,7 @@ exports[`Storyshots Shipping zones with no options selected 1`] = `
             <div
               class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
             >
-              0 / 0 shipping zones
+              0 shipping zones
             </div>
           </div>
           <div
@@ -24625,9 +24625,32 @@ exports[`Storyshots Shipping zones with no options selected 1`] = `
                 class="MuiDivider-root-id"
               />
               <div
-                class="MuiTypography-root-id AssignmentList-infoMessage-id MuiTypography-subtitle1-id MuiTypography-colorTextSecondary-id"
+                class="CardAddItemsFooter-container-id"
               >
-                All available shipping zones have been selected
+                <a
+                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
+                  data-test-id="shipping-add-link"
+                >
+                  Add Shipping Zones
+                </a>
+                <button
+                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                  color="primary"
+                  data-test-id="shipping-add-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
@@ -24686,7 +24709,7 @@ exports[`Storyshots Shipping zones with options selected 1`] = `
             <div
               class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
             >
-              2 / 0 shipping zones
+              2 shipping zones
             </div>
           </div>
           <div
@@ -47104,7 +47127,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 shipping zones
+                    2 shipping zones
                   </div>
                 </div>
                 <div
@@ -47306,7 +47329,7 @@ exports[`Storyshots Views / Channels / Channel details default 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 warehouses
+                    2 warehouses
                   </div>
                 </div>
                 <div
@@ -47840,7 +47863,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 shipping zones
+                    2 shipping zones
                   </div>
                 </div>
                 <div
@@ -48042,7 +48065,7 @@ exports[`Storyshots Views / Channels / Channel details disabled 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 warehouses
+                    2 warehouses
                   </div>
                 </div>
                 <div
@@ -48572,7 +48595,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 shipping zones
+                    2 shipping zones
                   </div>
                 </div>
                 <div
@@ -48774,7 +48797,7 @@ exports[`Storyshots Views / Channels / Channel details loading 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 warehouses
+                    2 warehouses
                   </div>
                 </div>
                 <div
@@ -49304,7 +49327,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 shipping zones
+                    2 shipping zones
                   </div>
                 </div>
                 <div
@@ -49506,7 +49529,7 @@ exports[`Storyshots Views / Channels / Channel details with data 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 warehouses
+                    2 warehouses
                   </div>
                 </div>
                 <div
@@ -50042,7 +50065,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 shipping zones
+                    2 shipping zones
                   </div>
                 </div>
                 <div
@@ -50244,7 +50267,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 warehouses
+                    2 warehouses
                   </div>
                 </div>
                 <div
@@ -50712,7 +50735,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 shipping zones
+                    2 shipping zones
                   </div>
                 </div>
                 <div
@@ -50914,7 +50937,7 @@ exports[`Storyshots Views / Channels / Channel details without editable currency
                   <div
                     class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                   >
-                    2 / 0 warehouses
+                    2 warehouses
                   </div>
                 </div>
                 <div
@@ -260343,7 +260366,7 @@ exports[`Storyshots Warehouses with no options selected 1`] = `
             <div
               class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
             >
-              0 / 0 warehouses
+              0 warehouses
             </div>
           </div>
           <div
@@ -260393,9 +260416,32 @@ exports[`Storyshots Warehouses with no options selected 1`] = `
                 class="MuiDivider-root-id"
               />
               <div
-                class="MuiTypography-root-id AssignmentList-infoMessage-id MuiTypography-subtitle1-id MuiTypography-colorTextSecondary-id"
+                class="CardAddItemsFooter-container-id"
               >
-                All available warehouses have been selected
+                <a
+                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-noUnderline-id MuiTypography-body1-id"
+                  data-test-id="warehouse-add-link"
+                >
+                  Add Warehouses
+                </a>
+                <button
+                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                  color="primary"
+                  data-test-id="warehouse-add-button"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+                    />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>
@@ -260454,7 +260500,7 @@ exports[`Storyshots Warehouses with options selected 1`] = `
             <div
               class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
             >
-              2 / 0 warehouses
+              2 warehouses
             </div>
           </div>
           <div

src/warehouses/queries.ts

@@ -50,3 +50,11 @@ export const channelWarehouses = gql`
     }
   }
 `;
+
+export const warehousesCount = gql`
+  query WarehousesCount {
+    warehouses {
+      totalCount
+    }
+  }
+`;