Merge branch '250343-yaml-try-catch' into 'master'

Add catch during manual yaml front matter editing

See merge request gitlab-org/gitlab!44782

app/assets/javascripts/static_site_editor/components/edit_area.vue

@@ -50,12 +50,12 @@ export default {
   },
   data() {
     return {
-      saveable: false,
       parsedSource: parseSourceFile(this.preProcess(true, this.content)),
       editorMode: EDITOR_TYPES.wysiwyg,
-      isModified: false,
       hasMatter: false,
       isDrawerOpen: false,
+      isModified: false,
+      isSaveable: false,
     };
   },
   imageRepository: imageRepository(),
@@ -85,8 +85,11 @@ export default {
       return templatedContent;
     },
     refreshEditHelpers() {
-      this.isModified = this.parsedSource.isModified();
-      this.hasMatter = this.parsedSource.hasMatter();
+      const { isModified, hasMatter, isMatterValid } = this.parsedSource;
+      this.isModified = isModified();
+      this.hasMatter = hasMatter();
+      const hasValidMatter = this.hasMatter ? isMatterValid() : true;
+      this.isSaveable = this.isModified && hasValidMatter;
     },
     onDrawerOpen() {
       this.isDrawerOpen = true;
@@ -142,12 +145,12 @@ export default {
       @input="onInputChange"
       @uploadImage="onUploadImage"
     />
-    <unsaved-changes-confirm-dialog :modified="isModified" />
+    <unsaved-changes-confirm-dialog :modified="isSaveable" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
       :has-settings="hasSettings"
       :return-url="returnUrl"
-      :saveable="isModified"
+      :saveable="isSaveable"
       :saving-changes="savingChanges"
       @editSettings="onDrawerOpen"
       @submit="onSubmit"

app/assets/javascripts/static_site_editor/services/front_matterify.js

@@ -16,6 +16,7 @@ export const frontMatterify = source => {
   const NO_FRONTMATTER = {
     source,
     matter: null,
+    hasMatter: false,
     spacing: null,
     content: source,
     delimiter: null,
@@ -53,6 +54,7 @@ export const frontMatterify = source => {
   return {
     source,
     matter,
+    hasMatter: true,
     spacing,
     content,
     delimiter,

app/assets/javascripts/static_site_editor/services/parse_source_file.js

 import { frontMatterify, stringify } from './front_matterify';
 
 const parseSourceFile = raw => {
-  const remake = source => frontMatterify(source);
-
-  let editable = remake(raw);
+  let editable;
 
   const syncContent = (newVal, isBody) => {
     if (isBody) {
       editable.content = newVal;
     } else {
-      editable = remake(newVal);
+      try {
+        editable = frontMatterify(newVal);
+        editable.isMatterValid = true;
+      } catch (e) {
+        editable.isMatterValid = false;
+      }
     }
   };
 
@@ -23,10 +26,15 @@ const parseSourceFile = raw => {
 
   const isModified = () => stringify(editable) !== raw;
 
-  const hasMatter = () => Boolean(editable.matter);
+  const hasMatter = () => editable.hasMatter;
+
+  const isMatterValid = () => editable.isMatterValid;
+
+  syncContent(raw);
 
   return {
     matter,
+    isMatterValid,
     syncMatter,
     content,
     syncContent,

spec/frontend/static_site_editor/services/front_matterify_spec.js

@@ -11,6 +11,7 @@ describe('static_site_editor/services/front_matterify', () => {
   const frontMatterifiedContent = {
     source: content,
     matter: yamlFrontMatterObj,
+    hasMatter: true,
     spacing,
     content: body,
     delimiter: '---',
@@ -19,6 +20,7 @@ describe('static_site_editor/services/front_matterify', () => {
   const frontMatterifiedBody = {
     source: body,
     matter: null,
+    hasMatter: false,
     spacing: null,
     content: body,
     delimiter: null,
@@ -33,6 +35,12 @@ describe('static_site_editor/services/front_matterify', () => {
     `('returns $target from $frontMatterified', ({ frontMatterified, target }) => {
       expect(frontMatterified).toEqual(target);
     });
+
+    it('should throw when matter is invalid', () => {
+      const invalidContent = `---\nkey: val\nkeyNoVal\n---\n${body}`;
+
+      expect(() => frontMatterify(invalidContent)).toThrow();
+    });
   });
 
   describe('stringify', () => {