Fix YAML editor (#1098)

bitrise-io · Jul 31, 2024 · 0670d1d · 0670d1d
1 parent 6965519
commit 0670d1d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git 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
@@ -2,23 +2,24 @@ 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: ['*'],
   };
 
   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
@@ -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
@@ -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"]