fix(app-headless-cms): do not set dirty model unless it changed

packages/app-headless-cms/src/admin/components/ContentModelEditor/ContentModelEditorProvider.tsx

@@ -13,9 +13,10 @@ import {
     UpdateCmsModelMutationVariables
 } from "~/admin/graphql/contentModels";
 import { LIST_MENU_CONTENT_GROUPS_MODELS } from "~/admin/viewsGraphql";
-import { CmsModelField, CmsModel } from "~/types";
+import { CmsModel, CmsModelField } from "~/types";
 import { FetchResult } from "apollo-link";
 import { ModelProvider } from "~/admin/components/ModelProvider";
+import { createHashing } from "@webiny/app/utils";
 
 export interface ContentModelEditorProviderContext {
     apolloClient: ApolloClient<any>;
@@ -65,6 +66,8 @@ export const contentModelEditorReducer: Reducer = (prev: State, action: Action):
     }
 };
 
+const hashModel = createHashing("SHA-256");
+
 /**
  * Cleanup is required because backend always expects string value in predefined values entries
  */
@@ -176,8 +179,13 @@ export const ContentModelEditorProvider = ({
      * Return new data once finished.
      */
     const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {
-        setPristine(false);
         const data = setter(state.data);
+        const existingHash = await hashModel(state.data);
+        const newHash = await hashModel(data);
+        if (existingHash === newHash) {
+            return;
+        }
+        setPristine(false);
         dispatch({ type: "data", data });
         if (!saveModel) {
             return;
@@ -204,6 +212,7 @@ export const ContentModelEditorProvider = ({
         }
 
         await setData(() => data, false);
+
         setPristine(true);
         return response;
     };

packages/app/src/utils/createHashing.ts

@@ -0,0 +1,18 @@
+export type IHashingAlgorithm = "SHA-1" | "SHA-256" | "SHA-512";
+
+export const createHashing = (algorithm: IHashingAlgorithm) => {
+    return async (value: unknown) => {
+        const data = JSON.stringify(value);
+        return new Promise<string>(resolve => {
+            window.crypto.subtle.digest(algorithm, new TextEncoder().encode(data)).then(encoded => {
+                const hexes: string[] = [];
+                const view = new DataView(encoded);
+                for (let i = 0; i < view.byteLength; i += 4) {
+                    hexes.push(("00000000" + view.getUint32(i).toString(16)).slice(-8));
+                }
+                const hash = hexes.join("");
+                resolve(hash);
+            });
+        });
+    };
+};

packages/app/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./createHashing";
 export * from "./getApiUrl";
 export * from "./getGqlApiUrl";
 export * from "./getHeadlessCmsGqlApiUrl";