From 0670d1d67db8751a83d16d8c56cb499d7df6a194 Mon Sep 17 00:00:00 2001
From: Laszlo Moczo <laszlo.moczo@bitrise.io>
Date: Wed, 31 Jul 2024 13:15:57 +0200
Subject: [PATCH] Fix YAML editor (#1098)

---
 source/javascripts/_componentRegister.js      |  2 +-
 .../components/YmlEditor/YmlEditor.tsx        |  9 ++++---
 .../javascripts/controllers/_YMLController.js | 27 ++++++++++++-------
 source/templates/yml.slim                     |  2 +-
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/source/javascripts/_componentRegister.js b/source/javascripts/_componentRegister.js
index 647119be9..527d00812 100644
--- a/source/javascripts/_componentRegister.js
+++ b/source/javascripts/_componentRegister.js
@@ -143,7 +143,7 @@ angular
   )
   .component(
     "rYmlEditor",
-    register(YmlEditor, ["yml", "readonly", "onChange"]),
+    register(YmlEditor, ["yml", "readonly", "onChange", "isLoading"]),
   )
   .component(
     "rWorkflowToolbar",
diff --git a/source/javascripts/components/YmlEditor/YmlEditor.tsx b/source/javascripts/components/YmlEditor/YmlEditor.tsx
index ff543d9ed..d66ec01a6 100644
--- a/source/javascripts/components/YmlEditor/YmlEditor.tsx
+++ b/source/javascripts/components/YmlEditor/YmlEditor.tsx
@@ -2,11 +2,12 @@ import Editor from '@monaco-editor/react';
 import { configureMonacoYaml } from 'monaco-yaml';
 
 type YmlEditorProps = {
+  isLoading?: boolean;
   readonly: boolean;
   yml: string;
   onChange: VoidFunction;
 };
-const YmlEditor = ({ readonly, yml, onChange }: YmlEditorProps) => {
+const YmlEditor = ({ isLoading, readonly, yml, onChange }: YmlEditorProps) => {
   const defaultSchema = {
     uri: 'https://json.schemastore.org/bitrise.json',
     fileMatch: ['*'],
@@ -14,11 +15,11 @@ const YmlEditor = ({ readonly, yml, onChange }: YmlEditorProps) => {
 
   return (
     <Editor
-      defaultLanguage="yaml"
-      defaultValue={yml}
+      language="yaml"
+      value={isLoading ? 'Loading...' : yml}
       theme="vs-dark"
       options={{
-        readOnly: readonly,
+        readOnly: readonly || isLoading,
         roundedSelection: false,
         scrollBeyondLastLine: false,
         stickyScroll: {
diff --git a/source/javascripts/controllers/_YMLController.js b/source/javascripts/controllers/_YMLController.js
index 264028833..6271d5462 100644
--- a/source/javascripts/controllers/_YMLController.js
+++ b/source/javascripts/controllers/_YMLController.js
@@ -21,6 +21,7 @@ import { safeDigest } from "../services/react-compat";
       viewModel.modularYamlSupported = undefined;
       viewModel.lastModified = null;
       viewModel.isWebsiteMode = requestService.isWebsiteMode();
+      viewModel.isEditorLoading = true;
 
       viewModel.downloadAppConfigYMLPath = function () {
         return requestService.isWebsiteMode() && !viewModel.usesRepositoryYml ? requestService.appConfigYMLDownloadPath() : null;
@@ -59,22 +60,28 @@ import { safeDigest } from "../services/react-compat";
         }, (value) => {
           if (value !== undefined) {
             viewModel.yml = value;
+            viewModel.isEditorLoading = false;
             unwatchYMLChange();
-          };
+          }
         });
-      }
 
-      function updateAppConfigYML() {
-        $timeout(function () {
-          if (model && !model.isDisposed()) {
-            appService.appConfigYML = model.getValue();
-            viewModel.appConfigYML = model.getValue();
-          }
-        }, 100);
+        $scope.$on(
+          "$destroy",
+          $rootScope.$on("MainController::changesDiscarded", function () {
+            viewModel.yml = undefined;
+            safeDigest($scope);
+            viewModel.yml = appService.appConfigYML;
+            safeDigest($scope);
+          })
+        );
       }
 
       viewModel.onUsesRepositoryYmlChangeSaved = function (usesRepositoryYml) {
-        appService.getAppConfigYML(true);
+        viewModel.isEditorLoading = true;
+        appService.getAppConfigYML(true).then(() => {
+          viewModel.yml = appService.appConfigYML;
+          viewModel.isEditorLoading = false;
+        });
 
         appService.appConfig = undefined;
         appService.pipelineConfig.usesRepositoryYml = usesRepositoryYml;
diff --git a/source/templates/yml.slim b/source/templates/yml.slim
index a3b00964e..f37dc2965 100644
--- a/source/templates/yml.slim
+++ b/source/templates/yml.slim
@@ -21,4 +21,4 @@
     last-modified="ymlCtrl.lastModified"
   ]
   #editor-container
-    r-yml-editor[yml="ymlCtrl.yml" readonly="ymlCtrl.usesRepositoryYml" on-change="ymlCtrl.onChangeHandler"]
+    r-yml-editor[yml="ymlCtrl.yml" readonly="ymlCtrl.usesRepositoryYml" on-change="ymlCtrl.onChangeHandler" is-loading="ymlCtrl.isEditorLoading"]