Fix collection homepage assigining

CHANGELOG.md

@@ -35,4 +35,4 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update favicons to the new style - #3483 by @dominik-zeglen
 - Add publication date to collections - #3369 by @k-brk
 - Resolve to `None` when empty object ID was passed as mutation argument - #3497 by @maarcingebala
-- Improve shipping methods generator - #3500 by @maarcingebala
+- Change "Feature on Homepage" switch behavior - #3481 by @dominik-zeglen

saleor/static/dashboard-next/collections/containers/CollectionOperations.tsx

@@ -3,16 +3,12 @@ import * as React from "react";
 import { getMutationProviderData } from "../../misc";
 import { PartialMutationProviderOutput } from "../../types";
 import {
-  TypedAssignHomepageCollectionMutation,
   TypedCollectionAssignProductMutation,
   TypedCollectionRemoveMutation,
   TypedCollectionUpdateMutation,
+  TypedCollectionUpdateWithHomepageMutation,
   TypedUnassignCollectionProductMutation
 } from "../mutations";
-import {
-  AssignHomepageCollection,
-  AssignHomepageCollectionVariables
-} from "../types/AssignHomepageCollection";
 import {
   CollectionAssignProduct,
   CollectionAssignProductVariables
@@ -21,6 +17,10 @@ import {
   CollectionUpdate,
   CollectionUpdateVariables
 } from "../types/CollectionUpdate";
+import {
+  CollectionUpdateWithHomepage,
+  CollectionUpdateWithHomepageVariables
+} from "../types/CollectionUpdateWithHomepage";
 import {
   RemoveCollection,
   RemoveCollectionVariables
@@ -33,9 +33,9 @@ import {
 interface CollectionUpdateOperationsProps {
   children: (
     props: {
-      assignHomepageCollection: PartialMutationProviderOutput<
-        AssignHomepageCollection,
-        AssignHomepageCollectionVariables
+      updateCollectionWithHomepage: PartialMutationProviderOutput<
+        CollectionUpdateWithHomepage,
+        CollectionUpdateWithHomepageVariables
       >;
       assignProduct: PartialMutationProviderOutput<
         CollectionAssignProduct,
@@ -55,7 +55,6 @@ interface CollectionUpdateOperationsProps {
       >;
     }
   ) => React.ReactNode;
-  onHomepageCollectionAssign: (data: AssignHomepageCollection) => void;
   onUpdate: (data: CollectionUpdate) => void;
   onProductAssign: (data: CollectionAssignProduct) => void;
   onProductUnassign: (data: UnassignCollectionProduct) => void;
@@ -64,32 +63,20 @@ interface CollectionUpdateOperationsProps {
 
 const CollectionOperations: React.StatelessComponent<
   CollectionUpdateOperationsProps
-> = ({
-  children,
-  onHomepageCollectionAssign,
-  onUpdate,
-  onProductAssign,
-  onProductUnassign,
-  onRemove
-}) => (
+> = ({ children, onUpdate, onProductAssign, onProductUnassign, onRemove }) => (
   <TypedCollectionUpdateMutation onCompleted={onUpdate}>
     {(...updateCollection) => (
       <TypedCollectionRemoveMutation onCompleted={onRemove}>
         {(...removeCollection) => (
           <TypedCollectionAssignProductMutation onCompleted={onProductAssign}>
             {(...assignProduct) => (
-              <TypedAssignHomepageCollectionMutation
-                onCompleted={onHomepageCollectionAssign}
-              >
-                {(...assignHomepageCollection) => (
+              <TypedCollectionUpdateWithHomepageMutation onCompleted={onUpdate}>
+                {(...updateWithHomepage) => (
                   <TypedUnassignCollectionProductMutation
                     onCompleted={onProductUnassign}
                   >
                     {(...unassignProduct) =>
                       children({
-                        assignHomepageCollection: getMutationProviderData(
-                          ...assignHomepageCollection
-                        ),
                         assignProduct: getMutationProviderData(
                           ...assignProduct
                         ),
@@ -101,12 +88,15 @@ const CollectionOperations: React.StatelessComponent<
                         ),
                         updateCollection: getMutationProviderData(
                           ...updateCollection
+                        ),
+                        updateCollectionWithHomepage: getMutationProviderData(
+                          ...updateWithHomepage
                         )
                       })
                     }
                   </TypedUnassignCollectionProductMutation>
                 )}
-              </TypedAssignHomepageCollectionMutation>
+              </TypedCollectionUpdateWithHomepageMutation>
             )}
           </TypedCollectionAssignProductMutation>
         )}

saleor/static/dashboard-next/collections/mutations.ts

@@ -2,10 +2,6 @@ import gql from "graphql-tag";
 
 import { TypedMutation } from "../mutations";
 import { collectionDetailsFragment } from "./queries";
-import {
-  AssignHomepageCollection,
-  AssignHomepageCollectionVariables
-} from "./types/AssignHomepageCollection";
 import {
   CollectionAssignProduct,
   CollectionAssignProductVariables
@@ -14,6 +10,10 @@ import {
   CollectionUpdate,
   CollectionUpdateVariables
 } from "./types/CollectionUpdate";
+import {
+  CollectionUpdateWithHomepage,
+  CollectionUpdateWithHomepageVariables
+} from "./types/CollectionUpdateWithHomepage";
 import {
   CreateCollection,
   CreateCollectionVariables
@@ -46,9 +46,14 @@ export const TypedCollectionUpdateMutation = TypedMutation<
   CollectionUpdateVariables
 >(collectionUpdate);
 
-const assignHomepageCollection = gql`
-  mutation AssignHomepageCollection($id: ID) {
-    homepageCollectionUpdate(collection: $id) {
+const collectionUpdateWithHomepage = gql`
+  ${collectionDetailsFragment}
+  mutation CollectionUpdateWithHomepage(
+    $id: ID!
+    $input: CollectionInput!
+    $homepageId: ID
+  ) {
+    homepageCollectionUpdate(collection: $homepageId) {
       errors {
         field
         message
@@ -59,12 +64,21 @@ const assignHomepageCollection = gql`
         }
       }
     }
+    collectionUpdate(id: $id, input: $input) {
+      errors {
+        field
+        message
+      }
+      collection {
+        ...CollectionDetailsFragment
+      }
+    }
   }
 `;
-export const TypedAssignHomepageCollectionMutation = TypedMutation<
-  AssignHomepageCollection,
-  AssignHomepageCollectionVariables
->(assignHomepageCollection);
+export const TypedCollectionUpdateWithHomepageMutation = TypedMutation<
+  CollectionUpdateWithHomepage,
+  CollectionUpdateWithHomepageVariables
+>(collectionUpdateWithHomepage);
 
 const assignCollectionProduct = gql`
   mutation CollectionAssignProduct(

saleor/static/dashboard-next/collections/types/CollectionUpdateWithHomepage.ts

@@ -0,0 +1,70 @@
+/* tslint:disable */
+// This file was automatically generated and should not be edited.
+
+import { CollectionInput } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL mutation operation: CollectionUpdateWithHomepage
+// ====================================================
+
+export interface CollectionUpdateWithHomepage_homepageCollectionUpdate_errors {
+  __typename: "Error";
+  field: string | null;
+  message: string | null;
+}
+
+export interface CollectionUpdateWithHomepage_homepageCollectionUpdate_shop_homepageCollection {
+  __typename: "Collection";
+  id: string;
+}
+
+export interface CollectionUpdateWithHomepage_homepageCollectionUpdate_shop {
+  __typename: "Shop";
+  homepageCollection: CollectionUpdateWithHomepage_homepageCollectionUpdate_shop_homepageCollection | null;
+}
+
+export interface CollectionUpdateWithHomepage_homepageCollectionUpdate {
+  __typename: "HomepageCollectionUpdate";
+  errors: (CollectionUpdateWithHomepage_homepageCollectionUpdate_errors | null)[] | null;
+  shop: CollectionUpdateWithHomepage_homepageCollectionUpdate_shop | null;
+}
+
+export interface CollectionUpdateWithHomepage_collectionUpdate_errors {
+  __typename: "Error";
+  field: string | null;
+  message: string | null;
+}
+
+export interface CollectionUpdateWithHomepage_collectionUpdate_collection_backgroundImage {
+  __typename: "Image";
+  alt: string | null;
+  url: string;
+}
+
+export interface CollectionUpdateWithHomepage_collectionUpdate_collection {
+  __typename: "Collection";
+  id: string;
+  isPublished: boolean;
+  name: string;
+  backgroundImage: CollectionUpdateWithHomepage_collectionUpdate_collection_backgroundImage | null;
+  description: string;
+  seoDescription: string | null;
+  seoTitle: string | null;
+}
+
+export interface CollectionUpdateWithHomepage_collectionUpdate {
+  __typename: "CollectionUpdate";
+  errors: (CollectionUpdateWithHomepage_collectionUpdate_errors | null)[] | null;
+  collection: CollectionUpdateWithHomepage_collectionUpdate_collection | null;
+}
+
+export interface CollectionUpdateWithHomepage {
+  homepageCollectionUpdate: CollectionUpdateWithHomepage_homepageCollectionUpdate | null;
+  collectionUpdate: CollectionUpdateWithHomepage_collectionUpdate | null;
+}
+
+export interface CollectionUpdateWithHomepageVariables {
+  id: string;
+  input: CollectionInput;
+  homepageId?: string | null;
+}

saleor/static/dashboard-next/collections/views/CollectionDetails.tsx

@@ -122,54 +122,69 @@ export const CollectionDetails: React.StatelessComponent<
                     };
                     return (
                       <CollectionOperations
-                        onHomepageCollectionAssign={() => undefined}
                         onUpdate={handleCollectionUpdate}
                         onProductAssign={handleProductAssign}
                         onProductUnassign={handleProductUnassign}
                         onRemove={handleCollectionRemove}
                       >
                         {({
                           updateCollection,
-                          assignHomepageCollection,
+                          updateCollectionWithHomepage,
                           assignProduct,
                           unassignProduct,
                           removeCollection
                         }) => {
                           const handleSubmit = (
                             formData: CollectionDetailsPageFormData
                           ) => {
-                            updateCollection.mutate({
-                              id,
-                              input: {
-                                backgroundImageAlt: formData.backgroundImageAlt,
-                                description: formData.description,
-                                isPublished: formData.isPublished,
-                                name: formData.name,
-                                seo: {
-                                  description: formData.seoDescription,
-                                  title: formData.seoTitle
-                                }
+                            const input = {
+                              backgroundImageAlt: formData.backgroundImageAlt,
+                              description: formData.description,
+                              isPublished: formData.isPublished,
+                              name: formData.name,
+                              seo: {
+                                description: formData.seoDescription,
+                                title: formData.seoTitle
                               }
-                            });
-                            if (
-                              data.shop.homepageCollection !== null &&
-                              formData.isFeatured !==
-                                (data.shop.homepageCollection.id ===
-                                  data.collection.id)
-                            ) {
-                              assignHomepageCollection.mutate({
-                                id: formData.isFeatured ? id : null
+                            };
+                            const isFeatured = data.shop.homepageCollection
+                              ? data.shop.homepageCollection.id ===
+                                data.collection.id
+                              : false;
+
+                            if (formData.isFeatured !== isFeatured) {
+                              updateCollectionWithHomepage.mutate({
+                                homepageId: formData.isFeatured ? id : null,
+                                id,
+                                input
+                              });
+                            } else {
+                              updateCollection.mutate({
+                                id,
+                                input
                               });
                             }
                           };
 
                           const formTransitionState = getMutationState(
-                            updateCollection.opts.called,
-                            updateCollection.opts.loading,
+                            updateCollection.opts.called ||
+                              updateCollectionWithHomepage.opts.called,
+                            updateCollection.opts.loading ||
+                              updateCollectionWithHomepage.opts.loading,
                             maybe(
                               () =>
                                 updateCollection.opts.data.collectionUpdate
                                   .errors
+                            ),
+                            maybe(
+                              () =>
+                                updateCollectionWithHomepage.opts.data
+                                  .collectionUpdate.errors
+                            ),
+                            maybe(
+                              () =>
+                                updateCollectionWithHomepage.opts.data
+                                  .homepageCollectionUpdate.errors
                             )
                           );
                           const assignTransitionState = getMutationState(