Add latest changes from gitlab-org/gitlab@master

4 files changed, 92 insertions, 18 deletions

diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue
index 7272e8eceb0..e602f26acdf 100644
--- a/app/assets/javascripts/static_site_editor/components/edit_area.vue
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -2,6 +2,7 @@
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
 import PublishToolbar from './publish_toolbar.vue';
 import EditHeader from './edit_header.vue';
+import EditDrawer from './edit_drawer.vue';
 import UnsavedChangesConfirmDialog from './unsaved_changes_confirm_dialog.vue';
 import parseSourceFile from '~/static_site_editor/services/parse_source_file';
 import { EDITOR_TYPES } from '~/vue_shared/components/rich_content_editor/constants';
@@ -15,6 +16,7 @@ export default {
     RichContentEditor,
     PublishToolbar,
     EditHeader,
+    EditDrawer,
     UnsavedChangesConfirmDialog,
   },
   props: {
@@ -48,6 +50,8 @@ export default {
       parsedSource: parseSourceFile(this.preProcess(true, this.content)),
       editorMode: EDITOR_TYPES.wysiwyg,
       isModified: false,
+      hasMatter: false,
+      isDrawerOpen: false,
     };
   },
   imageRepository: imageRepository(),
@@ -55,10 +59,19 @@ export default {
     editableContent() {
       return this.parsedSource.content(this.isWysiwygMode);
     },
+    editableMatter() {
+      return this.isDrawerOpen ? this.parsedSource.matter() : {};
+    },
+    hasSettings() {
+      return this.hasMatter && this.isWysiwygMode;
+    },
     isWysiwygMode() {
       return this.editorMode === EDITOR_TYPES.wysiwyg;
     },
   },
+  created() {
+    this.refreshEditHelpers();
+  },
   methods: {
     preProcess(isWrap, value) {
       const formattedContent = formatter(value);
@@ -67,9 +80,21 @@ export default {
         : templater.unwrap(formattedContent);
       return templatedContent;
     },
+    refreshEditHelpers() {
+      this.isModified = this.parsedSource.isModified();
+      this.hasMatter = this.parsedSource.hasMatter();
+    },
+    onDrawerOpen() {
+      this.isDrawerOpen = true;
+      this.refreshEditHelpers();
+    },
+    onDrawerClose() {
+      this.isDrawerOpen = false;
+      this.refreshEditHelpers();
+    },
     onInputChange(newVal) {
       this.parsedSource.syncContent(newVal, this.isWysiwygMode);
-      this.isModified = this.parsedSource.isModified();
+      this.refreshEditHelpers();
     },
     onModeChange(mode) {
       this.editorMode = mode;
@@ -77,6 +102,9 @@ export default {
       const preProcessedContent = this.preProcess(this.isWysiwygMode, this.editableContent);
       this.$refs.editor.resetInitialValue(preProcessedContent);
     },
+    onUpdateSettings(settings) {
+      this.parsedSource.syncMatter(settings);
+    },
     onUploadImage({ file, imageUrl }) {
       this.$options.imageRepository.add(file, imageUrl);
     },
@@ -93,6 +121,13 @@ export default {
 <template>
   <div class="d-flex flex-grow-1 flex-column h-100">
     <edit-header class="py-2" :title="title" />
+    <edit-drawer
+      v-if="hasMatter"
+      :is-open="isDrawerOpen"
+      :settings="editableMatter"
+      @close="onDrawerClose"
+      @updateSettings="onUpdateSettings"
+    />
     <rich-content-editor
       ref="editor"
       :content="editableContent"
@@ -106,9 +141,11 @@ export default {
     <unsaved-changes-confirm-dialog :modified="isModified" />
     <publish-toolbar
       class="gl-fixed gl-left-0 gl-bottom-0 gl-w-full"
+      :has-settings="hasSettings"
       :return-url="returnUrl"
       :saveable="isModified"
       :saving-changes="savingChanges"
+      @editSettings="onDrawerOpen"
       @submit="onSubmit"
     />
   </div>
diff --git a/app/assets/javascripts/static_site_editor/components/edit_drawer.vue b/app/assets/javascripts/static_site_editor/components/edit_drawer.vue
new file mode 100644
index 00000000000..2cf88e50b0e
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/edit_drawer.vue
@@ -0,0 +1,32 @@
+<script>
+import { GlDrawer } from '@gitlab/ui';
+import FrontMatterControls from './front_matter_controls.vue';
+
+export default {
+  components: {
+    GlDrawer,
+    FrontMatterControls,
+  },
+  props: {
+    isOpen: {
+      type: Boolean,
+      required: true,
+    },
+    settings: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-drawer class="pt-6" :open="isOpen" @close="$emit('close')">
+    <template #header>{{ __('Page settings') }}</template>
+    <template>
+      <front-matter-controls
+        :settings="settings"
+        @updateSettings="$emit('updateSettings', $event)"
+      />
+    </template>
+  </gl-drawer>
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
index 6cd2a4dd700..2d62964cb3b 100644
--- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
+++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue
@@ -6,6 +6,11 @@ export default {
     GlButton,
   },
   props: {
+    hasSettings: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     returnUrl: {
       type: String,
       required: false,
@@ -31,12 +36,21 @@ export default {
         s__('StaticSiteEditor|Return to site')
       }}</gl-button>
       <gl-button
+        v-if="hasSettings"
+        ref="settings"
+        :disabled="savingChanges"
+        @click="$emit('editSettings')"
+      >
+        {{ __('Settings') }}
+      </gl-button>
+      <gl-button
+        ref="submit"
         variant="success"
         :disabled="!saveable"
         :loading="savingChanges"
         @click="$emit('submit')"
       >
-        <span>{{ __('Submit Changes') }}</span>
+        {{ __('Submit changes') }}
       </gl-button>
     </div>
   </div>
diff --git a/app/assets/javascripts/static_site_editor/services/parse_source_file.js b/app/assets/javascripts/static_site_editor/services/parse_source_file.js
index 5618e36e017..640186ee1d0 100644
--- a/app/assets/javascripts/static_site_editor/services/parse_source_file.js
+++ b/app/assets/javascripts/static_site_editor/services/parse_source_file.js
@@ -17,33 +17,24 @@ const parseSourceFile = raw => {
 
   const content = (isBody = false) => (isBody ? editable.content.trim() : trimmedEditable()); // gray-matter internally adds an eof newline so we trim to bypass, open issue: https://github.com/jonschlinkert/gray-matter/issues/96
 
-  const matter = () => editable.matter;
-
-  const syncMatter = newMatter => {
-    const targetMatter = newMatter.replace(/---/gm, ''); // TODO dynamic delimiter removal vs. hard code
-    const currentMatter = matter();
-    const currentContent = content();
-    const newSource = currentContent.replace(currentMatter, targetMatter);
-    syncContent(newSource);
-    editable.matter = newMatter;
-  };
-
-  const matterObject = () => editable.data;
+  const matter = () => editable.data;
 
-  const syncMatterObject = obj => {
-    editable.data = obj;
+  const syncMatter = settings => {
+    const source = grayMatter.stringify(editable.content, settings);
+    syncContent(source);
   };
 
   const isModified = () => trimmedEditable() !== raw;
 
+  const hasMatter = () => editable.matter.length > 0;
+
   return {
     matter,
     syncMatter,
-    matterObject,
-    syncMatterObject,
     content,
     syncContent,
     isModified,
+    hasMatter,
   };
 };