Merge v2

docs/testing-deployment-publishing/branching-collaboration/branching.md

@@ -5,6 +5,7 @@ description: Learn how branching in FlutterFlow allows you to add new features w
 tags: [Branching, Collaboration]
 sidebar_position: 1
 keywords: [Branching, Collaboration, FlutterFlow, Concepts]
+toc_max_heading_level: 4
 ---
 
 # Branching
@@ -183,10 +184,24 @@ During a merge, FlutterFlow compares the changes made in both branches, if the c
 
 :::
 
-### Initiating a merge
+### Initiating a Merge
 
-You can initiate a merge in either direction by selecting the **Branch Options** button next to the current branch in the **Branching Menu.**
+FlutterFlow currently supports **two merging approaches**: the existing “**Merge**” functionality and the new “**Git Merge**” (v2).
 
+- [**Merge (Legacy)**](#merge-legacy): The legacy merge uses a custom tool (originally built in FlutterFlow) to calculate differences and conflicts between branches.
+- [**Git Merge (New)**](#git-merge-new): The new Git Merge option leverages Git's robust repository and conflict-resolution capabilities.
+
+:::warning
+
+At present, both methods are available side by side, allowing you to either continue using the legacy merge or adopt Git Merge. Over time, as Git Merge proves its stability, the legacy merge may be deprecated. 
+
+The Merge (Legacy) option has some known issues with merges being incorrectly calculated. Therefore, **we strongly recommend using [Git Merge](#git-merge-new) whenever possible for a smoother and more accurate merge process.**
+
+:::
+
+#### Merge (Legacy)
+
+You can initiate a merge in either direction—merging from a parent branch into a child branch or from a child branch back into the parent branch—by selecting the **Branch** Options button next to the current branch in the Branching Menu.
 
 <div style={{
     position: 'relative',
@@ -220,7 +235,123 @@ Next, you'll see a screen that will display if there are any conflicts. If you d
 
 ![merge](../imgs/merge.avif)
 
-### Resolve merge conflicts
+#### Git Merge (New)
+
+The new Git Merge option uses Git under the hood to calculate differences between project files. Each project is backed by a repository of YAML files (except for custom code, which appears as Dart files). These YAML files map directly to various project properties, and Git calculates differences among these files to identify merge conflicts. This method provides clearer and more consistent conflict detection compared to [legacy Merge](#merge-legacy) (a custom solution).
+
+:::info
+
+This option is currently in **Beta**. In addition to fixing any issues, here’s what we have planned:
+
+- **Hover-Based Documentation**: Display helpful tooltips for YAML fields (scheduled before production release).
+- **Inline YAML Errors**: Show errors directly in the file for quicker fixes (scheduled before production release).
+- **Simplified YAML**: Make YAML files and errors more user-friendly and understandable.
+- **Enhanced Visual Diff Tools**: Provide more intuitive views for comparing changes.
+- **User Experience Improvements**: Continuously refine merging workflows and UI elements.
+- **Performance Optimizations**: Improve speed when initiating merges.
+
+:::
+
+To initiate a Git Merge, navigate to **Toolbar >** select **Branching > Branching options >** select **Git Merge**.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/8RY2cm1vYI5waxHLGImY?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
+When performing a Git merge in FlutterFlow, you’ll see a screen with multiple panels and info sections. Here are the details of it.
+
+![merging-window](imgs/merging-window.avif)
+
+**Top Panel**
+
+- **Branch Information**: At the top of the merge interface, you’ll see exactly which branches are being merged. You have two options for merging directions:
+    - **Parent → Child**: Pulls changes down from the parent into the child branch, often used to keep a feature branch in sync with the parent branch.
+    - **Child → Parent**: Pushes features (or other changes) from the child branch back up to the parent, commonly done once a feature is ready to go into the parent branch.
+- **YAML Validation Errors**: Occurs when manual edits to the project files produce invalid syntax. Clicking on these errors should redirect you to the specific file. Invalid lines will be underlined in red within the file, and, you **cannot** complete the merge while YAML errors exist.
+- **Project Errors**: Project errors occur when the result of a merge creates a problem in your project. For example, this might happen if the merge results in two data types having the same name. These errors need to be resolved to ensure your project works as expected. You have several options to deal with project errors:
+    - **Fix Errors During the Merge**: This approach ensures that the merged project is error-free right from the start. Here’s how you can do it:
+        - **Edit the YAML files:** Update the project YAML files (in the Right Lower Panel) to fix issues, such as renaming a data type that causes a conflict.
+        - **Edit the Project Directly while Merging:** While still in the merge process, open the project, make the necessary changes (like renaming the conflicting data type), and then continue.
+    - **Fix Errors After the Merge**: If you prefer, you can complete the merge first and address the errors later. For example, finish the merge process as it is. After merging, go back to the project and resolve any issues.
+- **Cancel**: Abandons the merge process and discards any conflict resolutions you’ve already applied during this merge session.
+- **Merge**: Finalizes the merge once all merge conflicts and YAML validation errors are cleared. Project errors can remain if you choose to resolve them later.
+- **Bulk Accept Changes**: Accessible via the **arrow** next to **Merge** button. This option lets you accept all changes from one branch at once—handy if you already know which branch’s changes take precedence.
+
+**Left Panel**
+
+The left-hand side panel displays all the project files in YAML format. YAML (Yet Another Markup Language) files use a simple, human-readable format to define configuration data. They are particularly useful during a merge because they allow you to directly review, understand, and resolve any changes or conflicts in your project’s file.
+
+- **Filter Files:** You can use filters to narrow down the list of YAML files based on specific criteria:
+
+    - **All Files (Unchanged Files)**: Shows every YAML file in the project.
+    - **Files with Changes**: Displays only files where a change has been made on either branch.
+    - **Files with Conflicts**: Shows only files that have merge conflicts, where the changes in one branch directly contradict the changes in the other.
+
+        :::info
+        - A **change** refers to any update, addition, or deletion made in one of the branches. For example, modifying a field name or changing the properties of a widget.
+        - A **conflict** occurs when the same part of a file has been changed in both branches, making it unclear which version to keep. For instance, if one branch changes the color of the Container to blue and the other changes it to red, this creates a conflict.
+        :::
+
+- **Search File:** If you’re looking for a particular file, you can use the search bar to locate it quickly. This is especially useful in larger projects with many files.
+
+Clicking on a file in the panel opens it in the editor, allowing you to view, edit, and resolve issues directly.
+
+**Right Upper Panel**
+
+The Upper Right Panel offers a quick, side-by-side comparison of file changes from both branches, along with easy one-click accept buttons and previews. This panel makes it simple to decide which changes to keep or discard.
+
+:::info
+The edits are highlighted using green and red (Git) color coding:
+
+- **Green** indicates lines or values **added** (or unique) in one branch.
+- **Red** indicates lines or values **removed** (or replaced) by that branch.
+:::
+
+- **Accept Change Button**: Quickly accept changes from one branch if you know it has the correct edits.
+- **Eye (Preview) Icon**: Open or view the file in the FlutterFlow builder to see how the changes look. For example, you can preview a theme color change visually rather than just reading its name in the file.
+
+**Right Lower Panel**
+
+The **Lower Panel** displays the final merged files after Git applies its merging logic. It gives you a chance to manually inspect and edit the outcome—whether or not a conflict occurs.
+
+Git attempts to combine changes from both branches automatically. If Git can’t reconcile certain lines, it flags a **merge conflict** in the file. Conflicts appear with special markers like `<<<<<<<`, `=======`, and `>>>>>>>`.
+
+- `<<<<<<<`: Marks the beginning of other branch’s changes
+- `=======`: Separates your current branch’s changes from the other branch’s changes.
+- `>>>>>>>`: Marks the end of the conflict, indicating your current branch’s changes.
+
+:::tip
+You might decide to keep certain lines from `<<<<<<<` (from the other branch) or `>>>>>>>` (from your branch) or combine them manually.
+:::
+
+You can modify files or edit the project directly from the lower panel at any time—even if there’s no conflict.
+
+After editing, click **Save Changes** to confirm your changes. A red reset button appears if you want to undo your changes and restore the file to its initial state before you began editing.
+
+### Resolve Merge Conflicts
 A merge conflict occurs when multiple team members make changes to the same part of the project.
 
 For example, imagine two developers, Alice and Bob, are working on the same FlutterFlow project and both decide to update the same button widget.
@@ -236,6 +367,8 @@ When Alice's changes are merged into the main project first, her updates will be
 
 In your project, if you get merge conflicts, here’s how you resolve them.
 
+#### Merge (Legacy)
+
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -267,7 +400,7 @@ For certain conflicts, such as those involving variables and API configurations,
 
 ![view-configuration](../imgs/view-configuration.avif)
 
-### Resolve conflicts manually
+
 If you choose to resolve manually, you can directly make changes in the **Accepted Changes** section. Note that if you cancel a manual resolution, you can choose to either keep or discard the changes you have made since starting the manual resolution.
 
 <div style={{
@@ -304,6 +437,48 @@ If the visual editor doesn't display something in the split screen UI that you n
 ::::
 
 
+#### Git Merge (New)
+When you initiate a merge using Git, the system attempts to automatically reconcile your project files. Any conflicts that cannot be automatically resolved are flagged for your attention.
+
+You can review each file with merge conflicts and choose to:
+
+- Accept all changes from one branch.
+![accept-all-from-one-branch](imgs/accept-all-from-one-branch.avif)
+- Pick specific changes from any branch.
+![accept-specific-change-from-file](imgs/accept-specific-change-from-file.avif)
+- Manually edit the YAML files. **Note that** it’s essential to correct any YAML validation errors that arise from manual edits.
+    <div style={{
+        position: 'relative',
+        paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+        height: 0,
+        width: '100%'}}>
+        <iframe 
+            src="https://demo.arcade.software/hphsdsKGyT8Vid7c0NxX?embed&show_copy_link=true"
+            title=""
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                colorScheme: 'light'
+            }}
+            frameborder="0"
+            loading="lazy"
+            webkitAllowFullScreen
+            mozAllowFullScreen
+            allowFullScreen
+            allow="clipboard-write">
+        </iframe>
+    </div>
+    <p></p>
+
+Finally, complete the merge by clicking **Merge**.
+:::tip
+- If you merged a child branch into its parent and are confident everything looks correct, you may delete the child branch.
+- If you find any issues after the merge, you can revert the branch to an earlier commit. However, be aware that any changes made after that commit will be lost.
+:::
+
 ## Branch-level Permissions
 In your project, you have the ability to assign specific roles such as **Editors** and **Mergers** to project members for each branch.
 
@@ -361,4 +536,18 @@ Here’s how you can close a branch:
 
 - **Review before deletion:** Before closing a branch, ensure that all necessary changes have been merged or no longer need to be kept.
 - **Coordinate with your team:** If you’re working in a team, ensure that no one is actively using the branch before you close it, to avoid disrupting ongoing work.
-:::
+:::
+
+## FAQs
+<details>
+<summary>
+How YAML files are helpful during a merge?
+</summary>
+<p>
+YAML files play a key role in managing and resolving conflicts during the merge process because:
+- YAML files hold important configuration data, such as settings, resource definitions, and project properties. During a merge, changes in these files reflect modifications to the structure or behavior of the project.
+- The simple and hierarchical nature of YAML makes it easy to spot changes or conflicts, even in complex files. 
+- YAML files allow you to manually edit and resolve conflicts during the merge process.
+- Since YAML files are text-based, they are version-controlled effectively, enabling multiple team members to make changes and merge their work.
+</p>
+</details>