From 6f2ff22eb644ec6d375786067750dc51ba23f922 Mon Sep 17 00:00:00 2001
From: Daniel Pokorny <danielp@kontent.ai>
Date: Tue, 1 Oct 2024 14:11:45 +0200
Subject: [PATCH 1/3] add workflows to diff template, adjust styles

---
 src/modules/sync/utils/diffTemplate.html | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/modules/sync/utils/diffTemplate.html b/src/modules/sync/utils/diffTemplate.html
index 83856ef4..11d3a74b 100644
--- a/src/modules/sync/utils/diffTemplate.html
+++ b/src/modules/sync/utils/diffTemplate.html
@@ -114,6 +114,11 @@
         margin-top: 5px;
         border-radius: 16px;
     }
+
+    .entity-section-content > .op {
+        padding-left: 1em;
+    }
+
     .entity-detail {
         border: 1px solid #ccc;
         border-radius: 16px;
@@ -271,6 +276,10 @@
     .entity-operations {
         padding: 0 0 1rem 1rem;
         font-size: smaller;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+    .entity-operations .div {
+        font-family: Arial, Helvetica, sans-serif;
     }
     .op p {
         text-indent: -1em;
@@ -345,7 +354,7 @@ <h2>Modified entities</h2>
         <div>state from <strong>{{datetime_generated}}</strong></div>
         {{types_section}} {{snippets_section}} {{taxonomies_section}}
         {{asset_folders_section}} {{collections_section}} {{languages_section}}
-        {{web_spotlight_section}} {{spaces_section}}
+        {{web_spotlight_section}} {{spaces_section}} {{workflows_section}}
       </div>
     </div>
     <script>

From 4d588f7352dbfcfd2e30f020b7c528ad9af0214b Mon Sep 17 00:00:00 2001
From: Daniel Pokorny <danielp@kontent.ai>
Date: Tue, 1 Oct 2024 14:40:10 +0200
Subject: [PATCH 2/3] add missing entity renderers, refactor

---
 src/modules/sync/utils/htmlRenderers.ts | 148 +++++++++++++++++++++---
 1 file changed, 133 insertions(+), 15 deletions(-)

diff --git a/src/modules/sync/utils/htmlRenderers.ts b/src/modules/sync/utils/htmlRenderers.ts
index 6c940143..a55b35a8 100644
--- a/src/modules/sync/utils/htmlRenderers.ts
+++ b/src/modules/sync/utils/htmlRenderers.ts
@@ -39,7 +39,15 @@ type Operation = PatchOperation["op"];
 type TypeOrSnippet = ContentTypeModels.IAddContentTypeData | ContentTypeSnippetModels.IAddContentTypeSnippetData;
 type ElementOrTerm = ContentTypeElements.Element | TaxonomyModels.IAddTaxonomyRequestModel;
 type RenderFunction<T extends PatchOperation> = (patchOp: T) => string;
-type EntityType = "taxonomies" | "types" | "snippets" | "spaces" | "languages";
+type EntityType =
+  | "taxonomies"
+  | "types"
+  | "snippets"
+  | "spaces"
+  | "languages"
+  | "workflows"
+  | "collections"
+  | "assetFolders";
 type EntityActionType = "added" | "updated" | "deleted";
 type AdvancedDiffParams =
   & Readonly<{
@@ -148,16 +156,29 @@ const getValueOrIdentifier = (value: unknown): string | string[] => {
     if (typeof valueObj.regex === "string") {
       return `<strong>${valueObj.regex}</strong>`;
     }
+
+    if ("step" in valueObj) {
+      return getValueOrIdentifier(valueObj.step);
+    }
+
+    if ("scope" in valueObj) {
+      return getValueOrIdentifier(valueObj.scope);
+    }
+
+    if ("content_types" in valueObj && "collections" in valueObj) {
+      return `types: ${getValueOrIdentifier(valueObj.content_types)}, collections: ${
+        getValueOrIdentifier(valueObj.collections)
+      }`;
+    }
+
+    if ("collections" in valueObj) {
+      return getValueOrIdentifier(valueObj.collections);
+    }
   }
 
   return `<strong>${String(value)}</strong>`;
 };
 
-const renderAddObjectProperties = (obj: Object) =>
-  Object.entries(obj).map(([key, value]) => renderAddProperty(key, value)).join("\n");
-
-const renderAddProperty = (key: string, value: string) => `<div class="added-element">${key}: ${value}</div>`;
-
 const renderPatchOp = (patchOp: PatchOperation) => patchOpRendererMap.get(patchOp.op)?.(patchOp);
 
 const renderMoveOpPosition = (patchOp: MovePatchOperation) =>
@@ -206,7 +227,7 @@ const renderTaxonomyPath = (pathSegments: ReadonlyArray<string>) => {
 
 const renderAddedElement = (element: ContentTypeElements.Element) =>
   `<div class="added-element"><div class="element" onClick="toggleVisibility('${element.codename}')">${element.codename}<div id=${element.codename} style="display: none">${
-    renderAddedElementProperties(element)
+    renderAddedObjectProperties(element)
   }</div></div><div class="element-type">${
     element.type
       .toUpperCase()
@@ -214,12 +235,12 @@ const renderAddedElement = (element: ContentTypeElements.Element) =>
   }
     </div></div>`;
 
-const renderAddedElementProperties = (element: ContentTypeElements.Element) =>
-  Object.entries(element)
-    .map(renderAddedElementProperty)
+const renderAddedObjectProperties = (object: object) =>
+  Object.entries(object)
+    .map(renderAddedObjectProperty)
     .join("\n");
 
-const renderAddedElementProperty = ([property, value]: Readonly<[string, unknown]>) => {
+const renderAddedObjectProperty = ([property, value]: Readonly<[string, unknown]>) => {
   // property keys where empty array means all related values are allowed
   const emptyAllowsAll: ReadonlyArray<string> = [
     "allowed_content_types",
@@ -317,8 +338,18 @@ const renderAddedLanguagesSectionData = (
   diff: Pick<DiffObject<RequiredCodename<LanguageModels.IAddLanguageData>>, "added">,
 ) =>
   diff.added.map(entity =>
-    `<div class="entity-detail"><div class="entity-name" onClick="toggleVisibility('${entity.codename}')">${entity.codename}</div><div class="entity-operations" style="display: block" id=${entity.codename}>
-    ${renderAddObjectProperties({ ...entity, fallback_language: entity.fallback_language?.codename })}
+    `<div class="entity-detail"><div class="entity-name" onClick="toggleVisibility('${entity.codename}')">${entity.codename}</div><div class="entity-operations" style="display: none" id=${entity.codename}>
+    ${renderAddedObjectProperties({ ...entity, fallback_language: entity.fallback_language?.codename })}
+    </div></div>`
+  )
+    .join("\n");
+
+const renderAddedWorkflowsOrSpacesSectionData = (
+  diff: Pick<DiffObject<RequiredCodename<LanguageModels.IAddLanguageData>>, "added">,
+) =>
+  diff.added.map(entity =>
+    `<div class="entity-detail"><div class="entity-name" onClick="toggleVisibility('${entity.codename}')">${entity.codename}</div><div class="entity-operations" style="display: none" id=${entity.codename}>
+    ${renderAddedObjectProperties(entity)}
     </div></div>`
   )
     .join("\n");
@@ -346,12 +377,15 @@ const renderEntitySection = (
   entityType: EntityType,
   { added, updated, deleted }: DiffObject<unknown>,
 ) => {
-  const entityTypeNameMap: Readonly<Record<typeof entityType, string>> = {
+  const entityTypeNameMap: Readonly<Record<EntityType, string>> = {
     snippets: "Snippets",
     taxonomies: "Taxonomy groups",
     types: "Content types",
     spaces: "Spaces",
     languages: "Languages",
+    collections: "Collections",
+    assetFolders: "Asset folders",
+    workflows: "Workflows",
   };
 
   return renderSection({
@@ -471,6 +505,30 @@ const rendererMap: ReadonlyMap<string, (data: DiffData) => string> = new Map([
     "{{updated_languages}}",
     ({ languages }: DiffData) => renderUpdatedEntitiesSectionData(languages),
   ],
+  [
+    "{{added_workflows}}",
+    ({ workflows }: DiffData) => renderAddedWorkflowsOrSpacesSectionData(workflows),
+  ],
+  [
+    "{{deleted_workflows}}",
+    ({ workflows }: DiffData) => renderDeletedEntitiesSectionData(workflows),
+  ],
+  [
+    "{{updated_workflows}}",
+    ({ workflows }: DiffData) => renderUpdatedEntitiesSectionData(workflows),
+  ],
+  [
+    "{{added_spaces}}",
+    ({ spaces }: DiffData) => renderAddedWorkflowsOrSpacesSectionData(spaces),
+  ],
+  [
+    "{{deleted_spaces}}",
+    ({ spaces }: DiffData) => renderDeletedEntitiesSectionData(spaces),
+  ],
+  [
+    "{{updated_spaces}}",
+    ({ spaces }: DiffData) => renderUpdatedEntitiesSectionData(spaces),
+  ],
   [
     "{{source_env_id}}",
     ({ sourceEnvironmentId, folderName }: DiffData) => sourceEnvironmentId ?? folderName!,
@@ -545,6 +603,13 @@ const rendererMap: ReadonlyMap<string, (data: DiffData) => string> = new Map([
     ({ languages }: DiffData) =>
       getCombinedOpLength(languages) ? renderEntitySection("languages", languages) : "<h3>No changes to languages</h3>",
   ],
+  [
+    "{{workflows_section}}",
+    ({ workflows }: DiffData) =>
+      getCombinedOpLength(workflows)
+        ? renderEntitySection("workflows", workflows)
+        : "<h3>No changes to workflows.</h3>",
+  ],
 ]);
 
 const patchOpRendererMap: ReadonlyMap<
@@ -567,7 +632,31 @@ const modifierMap: ReadonlyMap<Operation, string> = new Map([
 const replaceEntityPathRenderers: ReadonlyArray<EntityPathRenderer> = [
   {
     regex: /^\/name$/,
-    render: () => `Property name`,
+    render: () => `Property <strong>name</strong>`,
+  },
+  {
+    regex: /^\/collections$/,
+    render: () => `Collection for space`,
+  },
+  {
+    regex: /^\/codename$/,
+    render: () => `Property <strong>codename</strong>`,
+  },
+  {
+    regex: /^\/codename:([^/]+)/,
+    render: (match: string[]) => `Object <strong>${match[1]}</strong>`,
+  },
+  {
+    regex: /^\/scopes\/codename:([^/]+)$/,
+    render: (match: string[]) => `Scope <strong>${match[1]}</strong>`,
+  },
+  {
+    regex: /^\/fallback_language$/,
+    render: () => `Property <strong>fallback_language</strong>`,
+  },
+  {
+    regex: /^\/steps\/codename:([^/]+)\/color$/,
+    render: (match: string[]) => `Color for step <strong>${match[1]}</strong>`,
   },
   {
     regex: /^\/elements\/codename:([^/]+)\/([^/]+)$/,
@@ -603,6 +692,18 @@ const addEntityPathRenderers: ReadonlyArray<EntityPathRenderer> = [
     regex: /^\/terms$/,
     render: () => `Top level term`,
   },
+  {
+    regex: /steps$/,
+    render: () => `Step`,
+  },
+  {
+    regex: /scopes$/,
+    render: () => `Scope with the following configuration →`,
+  },
+  {
+    regex: /^\/steps\/codename:([^/]+)\/transitions_to$/,
+    render: (match: string[]) => `Transition from step <strong>${match[1]}</strong> to step`,
+  },
   {
     regex: /^\/elements\/codename:([^/]+)\/allowed_content_types$/,
     render: (match: string[]) => `For element <strong>${match[1]}</strong>, allowed content type`,
@@ -686,6 +787,19 @@ const removeEntityPathRenderers: ReadonlyArray<EntityPathRenderer> = [
     render: (match: string[]) =>
       `Allowed block <strong>${match[2]}</strong> for rich text element <strong>${match[1]}</strong>`,
   },
+  {
+    regex: /^\/steps\/codename:([^/]+)\/transitions_to\/codename:([^/]+)$/,
+    render: (match: string[]) =>
+      `Transition from step <strong>${match[1]}</strong> to step <strong>${match[2]}</strong>`,
+  },
+  {
+    regex: /^\/steps\/codename:([^/]+)$/,
+    render: (match: string[]) => `Step <strong>${match[1]}</strong>`,
+  },
+  {
+    regex: /^\/codename:([^/]+)/,
+    render: (match: string[]) => `Object <strong>${match[1]}</strong>`,
+  },
 ];
 
 const moveEntityPathRenderers: ReadonlyArray<EntityPathRenderer> = [
@@ -706,4 +820,8 @@ const moveEntityPathRenderers: ReadonlyArray<EntityPathRenderer> = [
     regex: /\/terms\/codename:([^/]+)/g,
     render: (matches: string[]) => renderTaxonomyPath(matches),
   },
+  {
+    regex: /^\/codename:([^/]+)/,
+    render: (match: string[]) => `Object <strong>${match[1]}</strong>`,
+  },
 ];

From 5ed18a1477d921abffbbebaf88466204b91fda31 Mon Sep 17 00:00:00 2001
From: Ivan Kiral <kiralivan@gmail.com>
Date: Tue, 1 Oct 2024 14:59:30 +0200
Subject: [PATCH 3/3] update advanced diff test snapshot

---
 .../diff/advancedDiff.test.ts.snap.html       | 308 ++++++++++++++++--
 1 file changed, 274 insertions(+), 34 deletions(-)

diff --git a/tests/integration/diff/advancedDiff.test.ts.snap.html b/tests/integration/diff/advancedDiff.test.ts.snap.html
index 4d89112e..c1d4994e 100644
--- a/tests/integration/diff/advancedDiff.test.ts.snap.html
+++ b/tests/integration/diff/advancedDiff.test.ts.snap.html
@@ -114,6 +114,11 @@
         margin-top: 5px;
         border-radius: 16px;
     }
+
+    .entity-section-content > .op {
+        padding-left: 1em;
+    }
+
     .entity-detail {
         border: 1px solid #ccc;
         border-radius: 16px;
@@ -271,6 +276,10 @@
     .entity-operations {
         padding: 0 0 1rem 1rem;
         font-size: smaller;
+        font-family: Arial, Helvetica, sans-serif;
+    }
+    .entity-operations .div {
+        font-family: Arial, Helvetica, sans-serif;
     }
     .op p {
         text-indent: -1em;
@@ -2301,20 +2310,20 @@ <h3>added</h3>
               /codename:nochange/folders <strong>tomoveinside</strong> added
             </div>
             <div class="op">
-              <span class="num-removed modifier-icon">−</span>Object at path
-              /codename:nochange/folders/codename:tomoveoutside removed
+              <span class="num-removed modifier-icon">−</span>Object <strong
+              >nochange</strong> removed
             </div>
             <div class="op">
               <span class="num-added modifier-icon">+</span>Object at path
               <strong>tomoveoutside</strong> added
             </div>
             <div class="op">
-              <span class="num-removed modifier-icon">−</span>Object at path
-              /codename:todelete removed
+              <span class="num-removed modifier-icon">−</span>Object <strong
+              >todelete</strong> removed
             </div>
             <div class="op">
-              <span class="num-removed modifier-icon">−</span>Object at path
-              /codename:tomoveinside removed
+              <span class="num-removed modifier-icon">−</span>Object <strong
+              >tomoveinside</strong> removed
             </div>
           </div>
         </div>
@@ -2331,8 +2340,8 @@ <h3>added</h3>
           </div>
           <div id="collections-section" class="entity-section-content">
             <div class="op">
-              <span class="num-modified modifier-icon">⇄</span>Object at path
-              /codename:collection_to_be_renamed/name changed <div
+              <span class="num-modified modifier-icon">⇄</span>Object <strong
+              >collection_to_be_renamed</strong> changed <div
                 class="compared-elements"
               >
                 <div class="element">Collection To Rename</div>
@@ -2345,22 +2354,22 @@ <h3>added</h3>
               <strong>collection_to_add</strong> added
             </div>
             <div class="op">
-              <span class="num-removed modifier-icon">−</span>Object at path
-              /codename:collection_to_delete removed
+              <span class="num-removed modifier-icon">−</span>Object <strong
+              >collection_to_delete</strong> removed
             </div>
             <div class="op">
-              <span class="num-modified modifier-icon">⤷</span>Object at path
-              /codename:collection_to_be_renamed moved after <strong
+              <span class="num-modified modifier-icon">⤷</span>Object <strong
+              >collection_to_be_renamed</strong> moved after <strong
               >collection_to_be_moved</strong>
             </div>
             <div class="op">
-              <span class="num-modified modifier-icon">⤷</span>Object at path
-              /codename:collection_to_add moved after <strong
+              <span class="num-modified modifier-icon">⤷</span>Object <strong
+              >collection_to_add</strong> moved after <strong
               >collection_to_be_renamed</strong>
             </div>
             <div class="op">
-              <span class="num-modified modifier-icon">⤷</span>Object at path
-              /codename:default moved after <strong>collection_to_add</strong>
+              <span class="num-modified modifier-icon">⤷</span>Object <strong
+              >default</strong> moved after <strong>collection_to_add</strong>
             </div>
           </div>
         </div>
@@ -2392,15 +2401,19 @@ <h3>updated</h3>
                 >
                   <div class="op">
                     <span class="num-modified modifier-icon">⇄</span>Property
-                    name changed <div class="compared-elements">
+                    <strong>name</strong> changed <div
+                      class="compared-elements"
+                    >
                       <div class="element">Changed Default Lang Name</div>
                       <div class="comparator">→</div>
                       <div class="element">Default project language</div>
                     </div>
                   </div>
                   <div class="op">
-                    <span class="num-modified modifier-icon">⇄</span>Object at
-                    path /codename changed <div class="compared-elements">
+                    <span class="num-modified modifier-icon">⇄</span>Property
+                    <strong>codename</strong> changed <div
+                      class="compared-elements"
+                    >
                       <div class="element">default_changed</div>
                       <div class="comparator">→</div>
                       <div class="element">default</div>
@@ -2414,8 +2427,8 @@ <h3>updated</h3>
                 </div>
                 <div class="entity-operations" style="display: none" id="lang1">
                   <div class="op">
-                    <span class="num-modified modifier-icon">⇄</span>Object at
-                    path /fallback_language changed <div
+                    <span class="num-modified modifier-icon">⇄</span>Property
+                    <strong>fallback_language</strong> changed <div
                       class="compared-elements"
                     >
                       <div class="element">lang2</div>
@@ -2431,8 +2444,8 @@ <h3>updated</h3>
                 </div>
                 <div class="entity-operations" style="display: none" id="lang2">
                   <div class="op">
-                    <span class="num-modified modifier-icon">⇄</span>Object at
-                    path /fallback_language changed <div
+                    <span class="num-modified modifier-icon">⇄</span>Property
+                    <strong>fallback_language</strong> changed <div
                       class="compared-elements"
                     >
                       <div class="element">lang4</div>
@@ -2455,8 +2468,8 @@ <h3>updated</h3>
                   id="static_lang"
                 >
                   <div class="op">
-                    <span class="num-modified modifier-icon">⇄</span>Object at
-                    path /fallback_language changed <div
+                    <span class="num-modified modifier-icon">⇄</span>Property
+                    <strong>fallback_language</strong> changed <div
                       class="compared-elements"
                     >
                       <div class="element">default_changed</div>
@@ -2484,14 +2497,14 @@ <h3>added</h3>
                   </div>
                   <div
                     class="entity-operations"
-                    style="display: block"
+                    style="display: none"
                     id="lang3"
                   >
-                    <div class="added-element">name: lang3</div>
-                    <div class="added-element">codename: lang3</div>
-                    <div class="added-element">is_active: true</div>
-                    <div class="added-element">is_default: false</div>
-                    <div class="added-element">fallback_language: lang2</div>
+                    <div>name: <strong>lang3</strong></div>
+                    <div>codename: <strong>lang3</strong></div>
+                    <div>is_active: <strong>true</strong></div>
+                    <div>is_default: <strong>false</strong></div>
+                    <div>fallback_language: <strong>lang2</strong></div>
                   </div>
                 </div>
               </div>
@@ -2528,18 +2541,245 @@ <h3>
           <div id="spaces" class="entity-section-content">
             <div class="updated">
               <h3>updated</h3>
-              {{updated_spaces}}
+              <div class="entity-detail">
+                <div
+                  class="entity-name"
+                  onClick="toggleVisibility('space_to_rename')"
+                >
+                  space_to_rename
+                </div>
+                <div
+                  class="entity-operations"
+                  style="display: none"
+                  id="space_to_rename"
+                >
+                  <div class="op">
+                    <span class="num-modified modifier-icon">⇄</span>Property
+                    <strong>name</strong> changed <div
+                      class="compared-elements"
+                    >
+                      <div class="element">Space to rename (target)</div>
+                      <div class="comparator">→</div>
+                      <div class="element">Space to rename</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="entity-detail">
+                <div
+                  class="entity-name"
+                  onClick="toggleVisibility('space_to_change_collections')"
+                >
+                  space_to_change_collections
+                </div>
+                <div
+                  class="entity-operations"
+                  style="display: none"
+                  id="space_to_change_collections"
+                >
+                  <div class="op">
+                    <span class="num-modified modifier-icon">⇄</span>Collection
+                    for space changed <div class="compared-elements">
+                      <div class="element">
+                        collection_to_delete, collection_to_be_renamed
+                      </div>
+                      <div class="comparator">→</div>
+                      <div class="element">default</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
 
             <div class="added-and-deleted">
               <div class="deleted">
                 <h3>deleted</h3>
-                {{deleted_spaces}}
+                <div class="entity-detail">
+                  <div class="entity-name removed">space_to_delete</div>
+                </div>
               </div>
 
               <div class="added">
                 <h3>added</h3>
-                {{added_spaces}}
+                <div class="entity-detail">
+                  <div
+                    class="entity-name"
+                    onClick="toggleVisibility('space_to_add')"
+                  >
+                    space_to_add
+                  </div>
+                  <div
+                    class="entity-operations"
+                    style="display: none"
+                    id="space_to_add"
+                  >
+                    <div>codename: <strong>space_to_add</strong></div>
+                    <div>name: <strong>Space to add</strong></div>
+                    <div>
+                      web_spotlight_root_item: <strong>undefined</strong>
+                    </div>
+                    <div>
+                      collections: <strong>collection_to_add</strong>,<strong
+                      >collection_to_be_renamed</strong>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="entity-section">
+          <div
+            class="entity-section-header"
+            onclick="toggleVisibility('workflows')"
+          >
+            <div>Workflows</div>
+            <div class="num-modified push">✎ 2</div>
+            <div class="num-added">+ 1</div>
+            <div class="num-removed">− 1</div>
+          </div>
+          <div id="workflows" class="entity-section-content">
+            <div class="updated">
+              <h3>updated</h3>
+              <div class="entity-detail">
+                <div class="entity-name" onClick="toggleVisibility('default')">
+                  default
+                </div>
+                <div
+                  class="entity-operations"
+                  style="display: none"
+                  id="default"
+                >
+                  <div class="op">
+                    <span class="num-added modifier-icon">+</span>Transition
+                    from step <strong>draft</strong> to step <strong
+                    >added_default_workflow_step</strong> added
+                  </div>
+                  <div class="op">
+                    <span class="num-added modifier-icon">+</span>Step <strong
+                    >added_default_workflow_step</strong> added
+                  </div>
+                </div>
+              </div>
+              <div class="entity-detail">
+                <div
+                  class="entity-name"
+                  onClick="toggleVisibility('workflow_to_be_extensively_updated')"
+                >
+                  workflow_to_be_extensively_updated
+                </div>
+                <div
+                  class="entity-operations"
+                  style="display: none"
+                  id="workflow_to_be_extensively_updated"
+                >
+                  <div class="op">
+                    <span class="num-added modifier-icon">+</span>Step <strong
+                    >draft_d4f48a1</strong> added
+                  </div>
+                  <div class="op">
+                    <span class="num-modified modifier-icon">⇄</span>Color for
+                    step <strong>workflow_step_to_be_updated</strong> changed
+                    <div class="compared-elements">
+                      <div class="element">sky-blue</div>
+                      <div class="comparator">→</div>
+                      <div class="element">dark-green</div>
+                    </div>
+                  </div>
+                  <div class="op">
+                    <span class="num-added modifier-icon">+</span>Transition
+                    from step <strong>workflow_step_to_be_updated</strong> to
+                    step <strong>published</strong> added
+                  </div>
+                  <div class="op">
+                    <span class="num-removed modifier-icon">−</span>Transition
+                    from step <strong>workflow_step_to_be_updated</strong> to
+                    step <strong>step_to_be_transitioned_into</strong> removed
+                  </div>
+                  <div class="op">
+                    <span class="num-removed modifier-icon">−</span>Step <strong
+                    >draft_713b4c6</strong> removed
+                  </div>
+                  <div class="op">
+                    <span class="num-removed modifier-icon">−</span>Step <strong
+                    >workflow_step_to_be_removed</strong> removed
+                  </div>
+                  <div class="op">
+                    <span class="num-modified modifier-icon">⇄</span>Scope
+                    <strong>0</strong> changed <div class="compared-elements">
+                      <div class="element">
+                        types: <strong>empty_type_b</strong>,<strong
+                        >empty_type</strong>, collections: <strong
+                        >collection_to_be_moved</strong>
+                      </div>
+                      <div class="comparator">→</div>
+                      <div class="element">
+                        types: <strong>empty_type_b</strong>, collections:
+                        <strong>collection_to_be_moved</strong>,<strong
+                        >collection_to_be_renamed</strong>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="op">
+                    <span class="num-modified modifier-icon">⇄</span>Scope
+                    <strong>1</strong> changed <div class="compared-elements">
+                      <div class="element">
+                        types: <strong>no_change_base_type</strong>,
+                        collections: <strong>collection_to_be_renamed</strong>
+                      </div>
+                      <div class="comparator">→</div>
+                      <div class="element">
+                        types: <strong>empty_type</strong>, collections: <strong
+                        >collection_to_add</strong>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="op">
+                    <span class="num-added modifier-icon">+</span>Scope with the
+                    following configuration → types: <strong
+                    >no_change_base_type</strong>, collections: added
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="added-and-deleted">
+              <div class="deleted">
+                <h3>deleted</h3>
+                <div class="entity-detail">
+                  <div class="entity-name removed">workflow_to_be_deleted</div>
+                </div>
+              </div>
+
+              <div class="added">
+                <h3>added</h3>
+                <div class="entity-detail">
+                  <div
+                    class="entity-name"
+                    onClick="toggleVisibility('untitled_workflow')"
+                  >
+                    untitled_workflow
+                  </div>
+                  <div
+                    class="entity-operations"
+                    style="display: none"
+                    id="untitled_workflow"
+                  >
+                    <div>name: <strong>Added workflow</strong></div>
+                    <div>codename: <strong>untitled_workflow</strong></div>
+                    <div>
+                      scopes: types: <strong>empty_type</strong>, collections:
+                      <strong>collection_to_add</strong>
+                    </div>
+                    <div>
+                      steps: <strong>draft_9be4e8b</strong>,<strong
+                      >some_step</strong>
+                    </div>
+                    <div>published_step: <strong>published</strong></div>
+                    <div>archived_step: <strong>archived</strong></div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>