Fix product type selection

src/containers/SearchProductTypes/index.tsx

@@ -0,0 +1,37 @@
+import gql from "graphql-tag";
+
+import BaseSearch from "../BaseSearch";
+import {
+  SearchProductTypes,
+  SearchProductTypesVariables
+} from "./types/SearchProductTypes";
+
+export const searchProductTypes = gql`
+  query SearchProductTypes($after: String, $first: Int!, $query: String!) {
+    productTypes(after: $after, first: $first, filter: { search: $query }) {
+      edges {
+        node {
+          id
+          name
+          hasVariants
+          productAttributes {
+            id
+            inputType
+            slug
+            name
+            valueRequired
+            values {
+              id
+              name
+              slug
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export default BaseSearch<SearchProductTypes, SearchProductTypesVariables>(
+  searchProductTypes
+);

src/containers/SearchProductTypes/types/SearchProductTypes.ts

@@ -0,0 +1,54 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { AttributeInputTypeEnum } from "./../../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: SearchProductTypes
+// ====================================================
+
+export interface SearchProductTypes_productTypes_edges_node_productAttributes_values {
+  __typename: "AttributeValue";
+  id: string;
+  name: string | null;
+  slug: string | null;
+}
+
+export interface SearchProductTypes_productTypes_edges_node_productAttributes {
+  __typename: "Attribute";
+  id: string;
+  inputType: AttributeInputTypeEnum | null;
+  slug: string | null;
+  name: string | null;
+  valueRequired: boolean;
+  values: (SearchProductTypes_productTypes_edges_node_productAttributes_values | null)[] | null;
+}
+
+export interface SearchProductTypes_productTypes_edges_node {
+  __typename: "ProductType";
+  id: string;
+  name: string;
+  hasVariants: boolean;
+  productAttributes: (SearchProductTypes_productTypes_edges_node_productAttributes | null)[] | null;
+}
+
+export interface SearchProductTypes_productTypes_edges {
+  __typename: "ProductTypeCountableEdge";
+  node: SearchProductTypes_productTypes_edges_node;
+}
+
+export interface SearchProductTypes_productTypes {
+  __typename: "ProductTypeCountableConnection";
+  edges: SearchProductTypes_productTypes_edges[];
+}
+
+export interface SearchProductTypes {
+  productTypes: SearchProductTypes_productTypes | null;
+}
+
+export interface SearchProductTypesVariables {
+  after?: string | null;
+  first: number;
+  query: string;
+}

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -77,6 +77,7 @@ interface ProductCreatePageProps {
   saveButtonBarState: ConfirmButtonTransitionState;
   fetchCategories: (data: string) => void;
   fetchCollections: (data: string) => void;
+  fetchProductTypes: (data: string) => void;
   onAttributesEdit: () => void;
   onBack?();
   onSubmit?(data: ProductCreatePageSubmitData);
@@ -96,6 +97,7 @@ export const ProductCreatePage: React.StatelessComponent<
   productTypes: productTypeChoiceList,
   saveButtonBarState,
   onBack,
+  fetchProductTypes,
   onSubmit
 }: ProductCreatePageProps) => {
   const intl = useIntl();
@@ -268,6 +270,7 @@ export const ProductCreatePage: React.StatelessComponent<
                   errors={errors}
                   fetchCategories={fetchCategories}
                   fetchCollections={fetchCollections}
+                  fetchProductTypes={fetchProductTypes}
                   productType={productType}
                   productTypeInputDisplayValue={productType.name}
                   productTypes={productTypes}

src/products/components/ProductOrganization/ProductOrganization.tsx

@@ -62,6 +62,7 @@ interface ProductOrganizationProps extends WithStyles<typeof styles> {
   productTypes?: SingleAutocompleteChoiceType[];
   fetchCategories: (query: string) => void;
   fetchCollections: (query: string) => void;
+  fetchProductTypes: (data: string) => void;
   onCategoryChange: (event: ChangeEvent) => void;
   onCollectionChange: (event: ChangeEvent) => void;
   onProductTypeChange?: (event: ChangeEvent) => void;
@@ -80,6 +81,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
     errors,
     fetchCategories,
     fetchCollections,
+    fetchProductTypes,
     productType,
     productTypeInputDisplayValue,
     productTypes,
@@ -111,6 +113,7 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })(
               choices={productTypes}
               value={data.productType}
               onChange={onProductTypeChange}
+              fetchChoices={fetchProductTypes}
               data-tc="product-type"
             />
           ) : (

src/products/queries.ts

@@ -282,35 +282,6 @@ export const TypedProductVariantQuery = TypedQuery<
   ProductVariantDetailsVariables
 >(productVariantQuery);
 
-const productCreateQuery = gql`
-  query ProductCreateData {
-    productTypes(first: 20) {
-      edges {
-        node {
-          id
-          name
-          hasVariants
-          productAttributes {
-            id
-            inputType
-            slug
-            name
-            valueRequired
-            values {
-              id
-              name
-              slug
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-export const TypedProductCreateQuery = TypedQuery<ProductCreateData, {}>(
-  productCreateQuery
-);
-
 const productVariantCreateQuery = gql`
   query ProductVariantCreateData($id: ID!) {
     product(id: $id) {

src/products/types/ProductCreateData.ts

@@ -1,48 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { AttributeInputTypeEnum } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL query operation: ProductCreateData
-// ====================================================
-
-export interface ProductCreateData_productTypes_edges_node_productAttributes_values {
-  __typename: "AttributeValue";
-  id: string;
-  name: string | null;
-  slug: string | null;
-}
-
-export interface ProductCreateData_productTypes_edges_node_productAttributes {
-  __typename: "Attribute";
-  id: string;
-  inputType: AttributeInputTypeEnum | null;
-  slug: string | null;
-  name: string | null;
-  valueRequired: boolean;
-  values: (ProductCreateData_productTypes_edges_node_productAttributes_values | null)[] | null;
-}
-
-export interface ProductCreateData_productTypes_edges_node {
-  __typename: "ProductType";
-  id: string;
-  name: string;
-  hasVariants: boolean;
-  productAttributes: (ProductCreateData_productTypes_edges_node_productAttributes | null)[] | null;
-}
-
-export interface ProductCreateData_productTypes_edges {
-  __typename: "ProductTypeCountableEdge";
-  node: ProductCreateData_productTypes_edges_node;
-}
-
-export interface ProductCreateData_productTypes {
-  __typename: "ProductTypeCountableConnection";
-  edges: ProductCreateData_productTypes_edges[];
-}
-
-export interface ProductCreateData {
-  productTypes: ProductCreateData_productTypes | null;
-}

src/products/views/ProductCreate.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import SearchProductTypes from "@saleor/containers/SearchProductTypes";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import useShop from "@saleor/hooks/useShop";
@@ -13,7 +14,6 @@ import ProductCreatePage, {
   ProductCreatePageSubmitData
 } from "../components/ProductCreatePage";
 import { TypedProductCreateMutation } from "../mutations";
-import { TypedProductCreateQuery } from "../queries";
 import { ProductCreate } from "../types/ProductCreate";
 import { productListUrl, productUrl } from "../urls";
 
@@ -37,8 +37,11 @@ export const ProductUpdate: React.StatelessComponent<
       {({ search: searchCategory, result: searchCategoryOpts }) => (
         <SearchCollections variables={DEFAULT_INITIAL_SEARCH_DATA}>
           {({ search: searchCollection, result: searchCollectionOpts }) => (
-            <TypedProductCreateQuery displayLoader>
+            <SearchProductTypes variables={DEFAULT_INITIAL_SEARCH_DATA}>
-              {({ data, loading }) => {
+              {({
+                search: searchProductTypes,
+                result: searchProductTypesOpts
+              }) => {
                 const handleSuccess = (data: ProductCreate) => {
                   if (data.productCreate.errors.length === 0) {
                     notify({
@@ -103,8 +106,6 @@ export const ProductUpdate: React.StatelessComponent<
                         });
                       };
 
-                      const disabled = loading || productCreateDataLoading;
-
                       const formTransitionState = getMutationState(
                         productCreateCalled,
                         productCreateDataLoading,
@@ -128,19 +129,22 @@ export const ProductUpdate: React.StatelessComponent<
                               () => searchCollectionOpts.data.collections.edges,
                               []
                             ).map(edge => edge.node)}
-                            disabled={disabled}
+                            disabled={productCreateDataLoading}
                             errors={maybe(
                               () => productCreateData.productCreate.errors,
                               []
                             )}
                             fetchCategories={searchCategory}
                             fetchCollections={searchCollection}
+                            fetchProductTypes={searchProductTypes}
                             header={intl.formatMessage({
                               defaultMessage: "New Product",
                               description: "page header"
                             })}
                             productTypes={maybe(() =>
-                              data.productTypes.edges.map(edge => edge.node)
+                              searchProductTypesOpts.data.productTypes.edges.map(
+                                edge => edge.node
+                              )
                             )}
                             onAttributesEdit={handleAttributesEdit}
                             onBack={handleBack}
@@ -153,7 +157,7 @@ export const ProductUpdate: React.StatelessComponent<
                   </TypedProductCreateMutation>
                 );
               }}
-            </TypedProductCreateQuery>
+            </SearchProductTypes>
           )}
         </SearchCollections>
       )}