From f9edc55a2084cdeabaa977ee6ac390888b6712f4 Mon Sep 17 00:00:00 2001 From: Dawid Date: Tue, 2 Aug 2022 11:04:45 +0200 Subject: [PATCH] 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 --- .../AssignmentList/AssignmentList.tsx | 13 +-- .../AssignmentList/AssignmentListHeader.tsx | 4 +- .../components/AssignmentList/types.ts | 1 + .../ShippingZones/ShippingZones.stories.tsx | 5 +- .../ShippingZones/ShippingZones.tsx | 5 +- .../Warehouses/Warehouses.stories.tsx | 5 +- .../components/Warehouses/Warehouses.tsx | 5 +- .../ChannelDetailsPage.stories.tsx | 2 + .../ChannelDetailsPage/ChannelDetailsPage.tsx | 6 ++ .../views/ChannelCreate/ChannelCreate.tsx | 22 ++++- .../views/ChannelDetails/ChannelDetails.tsx | 18 ++++ src/graphql/hooks.generated.ts | 68 +++++++++++++++ src/graphql/types.generated.ts | 10 +++ src/shipping/queries.ts | 8 ++ .../__snapshots__/Stories.test.ts.snap | 86 ++++++++++++++----- src/warehouses/queries.ts | 8 ++ 16 files changed, 225 insertions(+), 41 deletions(-) diff --git a/src/channels/components/AssignmentList/AssignmentList.tsx b/src/channels/components/AssignmentList/AssignmentList.tsx index 37364cbb3..765313f4f 100644 --- a/src/channels/components/AssignmentList/AssignmentList.tsx +++ b/src/channels/components/AssignmentList/AssignmentList.tsx @@ -17,12 +17,7 @@ const messages = defineMessages({ }); const AssignmentList: React.FC = props => { - const { - items, - itemsName, - fetchMoreItems: { totalCount }, - removeItem, - } = props; + const { items, itemsName, totalCount = 0, removeItem } = props; const intl = useIntl(); const classes = useStyles(); @@ -32,11 +27,7 @@ const AssignmentList: React.FC = props => { return ( - + {items.map(item => ( diff --git a/src/channels/components/AssignmentList/AssignmentListHeader.tsx b/src/channels/components/AssignmentList/AssignmentListHeader.tsx index 3b1f586b1..6139821ed 100644 --- a/src/channels/components/AssignmentList/AssignmentListHeader.tsx +++ b/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 = ({ assignCount, - totalCount, itemsName, }) => { const classes = useHeaderStyles(); @@ -22,7 +20,7 @@ const AssignmentListHeader: React.FC = ({
} classes={classes}> - {`${assignCount} / ${totalCount} ${itemsName.toLowerCase()}`} + {`${assignCount} ${itemsName.toLowerCase()}`} diff --git a/src/channels/components/AssignmentList/types.ts b/src/channels/components/AssignmentList/types.ts index bcff228ad..a9b76a204 100644 --- a/src/channels/components/AssignmentList/types.ts +++ b/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; diff --git a/src/channels/components/ShippingZones/ShippingZones.stories.tsx b/src/channels/components/ShippingZones/ShippingZones.stories.tsx index 1a682a2a0..b086b28ad 100644 --- a/src/channels/components/ShippingZones/ShippingZones.stories.tsx +++ b/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) diff --git a/src/channels/components/ShippingZones/ShippingZones.tsx b/src/channels/components/ShippingZones/ShippingZones.tsx index 4edcdd383..f1f2f4127 100644 --- a/src/channels/components/ShippingZones/ShippingZones.tsx +++ b/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; @@ -32,6 +33,7 @@ const ShippingZones: React.FC = props => { addShippingZone, removeShippingZone, searchShippingZones, + totalCount, fetchMoreShippingZones, shippingZones, shippingZonesChoices, @@ -52,6 +54,7 @@ const ShippingZones: React.FC = props => { removeItem={removeShippingZone} searchItems={searchShippingZones} fetchMoreItems={fetchMoreShippingZones} + totalCount={totalCount} dataTestId="shipping" inputName="shippingZone" itemsName={intl.formatMessage(sectionNames.shippingZones)} diff --git a/src/channels/components/Warehouses/Warehouses.stories.tsx b/src/channels/components/Warehouses/Warehouses.stories.tsx index ed44ab251..2c637afd9 100644 --- a/src/channels/components/Warehouses/Warehouses.stories.tsx +++ b/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) diff --git a/src/channels/components/Warehouses/Warehouses.tsx b/src/channels/components/Warehouses/Warehouses.tsx index 7cfb2a0fb..d41e2aae5 100644 --- a/src/channels/components/Warehouses/Warehouses.tsx +++ b/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; @@ -32,6 +33,7 @@ const Warehouses: React.FC = props => { addWarehouse, removeWarehouse, searchWarehouses, + totalCount, fetchMoreWarehouses, warehouses, warehousesChoices, @@ -52,6 +54,7 @@ const Warehouses: React.FC = props => { removeItem={removeWarehouse} searchItems={searchWarehouses} fetchMoreItems={fetchMoreWarehouses} + totalCount={totalCount} dataTestId="warehouse" inputName="warehouse" itemsName={intl.formatMessage(sectionNames.warehouses)} diff --git a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx index f3a998c71..32528d284 100644 --- a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx +++ b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.stories.tsx @@ -29,6 +29,7 @@ const props: ChannelDetailsPageProps = { country: name, __typename: "CountryDisplay", })), + allShippingZonesCount: 10, channelShippingZones: [ { __typename: "ShippingZone", @@ -47,6 +48,7 @@ const props: ChannelDetailsPageProps = { onFetchMore: () => undefined, totalCount: 0, }, + allWarehousesCount: 10, channelWarehouses: [ { __typename: "Warehouse", diff --git a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx index 340c38277..58e37e2aa 100644 --- a/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx +++ b/src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx @@ -44,9 +44,11 @@ export interface ChannelDetailsPageProps { searchShippingZonesData?: SearchData; fetchMoreShippingZones: FetchMoreProps; channelShippingZones?: ChannelShippingZones; + allShippingZonesCount: number; searchWarehousesData?: SearchData; fetchMoreWarehouses: FetchMoreProps; channelWarehouses?: ChannelWarehouses; + allWarehousesCount: number; countries: CountryFragment[]; onDelete?: () => void; onSubmit: (data: FormData) => SubmitPromise; @@ -69,10 +71,12 @@ const ChannelDetailsPage = function({ searchShippingZonesData, fetchMoreShippingZones, channelShippingZones = [], + allShippingZonesCount, searchWarehouses, searchWarehousesData, fetchMoreWarehouses, channelWarehouses = [], + allWarehousesCount, countries, }: ChannelDetailsPageProps) { const navigate = useNavigator(); @@ -268,6 +272,7 @@ const ChannelDetailsPage = function({ removeShippingZone={removeShippingZone} searchShippingZones={searchShippingZones} fetchMoreShippingZones={fetchMoreShippingZones} + totalCount={allShippingZonesCount} /> ({ removeWarehouse={removeWarehouse} searchWarehouses={searchWarehouses} fetchMoreWarehouses={fetchMoreWarehouses} + totalCount={allWarehousesCount} />
diff --git a/src/channels/views/ChannelCreate/ChannelCreate.tsx b/src/channels/views/ChannelCreate/ChannelCreate.tsx index 31cd17aff..faef4e05f 100644 --- a/src/channels/views/ChannelCreate/ChannelCreate.tsx +++ b/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 = ({}) => { })} /> = ({ deleteChannel({ variables: data }); }; + const { + data: shippingZonesCountData, + loading: shippingZonesCountLoading, + } = useShippingZonesCountQuery(); + const { data: channelShippingZonesData, loading: channelsShippingZonesLoading, @@ -182,6 +189,11 @@ export const ChannelDetails: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ disabled={ updateChannelOpts.loading || loading || + shippingZonesCountLoading || + warehousesCountLoading || channelsShippingZonesLoading || channelsWarehousesLoading } diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts index abfc418ab..eb8e78da3 100644 --- a/src/graphql/hooks.generated.ts +++ b/src/graphql/hooks.generated.ts @@ -14200,6 +14200,40 @@ export function useChannelShippingZonesLazyQuery(baseOptions?: ApolloReactHooks. export type ChannelShippingZonesQueryHookResult = ReturnType; export type ChannelShippingZonesLazyQueryHookResult = ReturnType; export type ChannelShippingZonesQueryResult = Apollo.QueryResult; +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) { + const options = {...defaultOptions, ...baseOptions} + return ApolloReactHooks.useQuery(ShippingZonesCountDocument, options); + } +export function useShippingZonesCountLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return ApolloReactHooks.useLazyQuery(ShippingZonesCountDocument, options); + } +export type ShippingZonesCountQueryHookResult = ReturnType; +export type ShippingZonesCountLazyQueryHookResult = ReturnType; +export type ShippingZonesCountQueryResult = Apollo.QueryResult; 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; export type ChannelWarehousesLazyQueryHookResult = ReturnType; export type ChannelWarehousesQueryResult = Apollo.QueryResult; +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) { + const options = {...defaultOptions, ...baseOptions} + return ApolloReactHooks.useQuery(WarehousesCountDocument, options); + } +export function useWarehousesCountLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return ApolloReactHooks.useLazyQuery(WarehousesCountDocument, options); + } +export type WarehousesCountQueryHookResult = ReturnType; +export type WarehousesCountLazyQueryHookResult = ReturnType; +export type WarehousesCountQueryResult = Apollo.QueryResult; export const WebhookCreateDocument = gql` mutation WebhookCreate($input: WebhookCreateInput!) { webhookCreate(input: $input) { diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts index e2b22e3fb..319d0ea2e 100644 --- a/src/graphql/types.generated.ts +++ b/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; @@ -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; }>; diff --git a/src/shipping/queries.ts b/src/shipping/queries.ts index bda8819e4..9a6bd204c 100644 --- a/src/shipping/queries.ts +++ b/src/shipping/queries.ts @@ -72,3 +72,11 @@ export const channelShippingZones = gql` } } `; + +export const shippingZonesCount = gql` + query ShippingZonesCount { + shippingZones { + totalCount + } + } +`; diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index c89f0209e..ea1c8a382 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -24575,7 +24575,7 @@ exports[`Storyshots Shipping zones with no options selected 1`] = `
- 0 / 0 shipping zones + 0 shipping zones
- All available shipping zones have been selected + + Add Shipping Zones + +
@@ -24686,7 +24709,7 @@ exports[`Storyshots Shipping zones with options selected 1`] = `
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 warehouses + 2 warehouses
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 warehouses + 2 warehouses
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 warehouses + 2 warehouses
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 warehouses + 2 warehouses
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 warehouses + 2 warehouses
- 2 / 0 shipping zones + 2 shipping zones
- 2 / 0 warehouses + 2 warehouses
- 0 / 0 warehouses + 0 warehouses
- All available warehouses have been selected + + Add Warehouses + +
@@ -260454,7 +260500,7 @@ exports[`Storyshots Warehouses with options selected 1`] = `
- 2 / 0 warehouses + 2 warehouses