Merge branch 'master' into 38464-k8s-apps

Conflicts:
	db/schema.rb

3 files changed, 59 insertions, 44 deletions

diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 8c0d9b9cda8..a873e00d0f3 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -3,6 +3,7 @@
   import GLForm from '../../../gl_form';
   import markdownHeader from './header.vue';
   import markdownToolbar from './toolbar.vue';
+  import icon from '../icon.vue';
 
   export default {
     props: {
@@ -37,6 +38,7 @@
     components: {
       markdownHeader,
       markdownToolbar,
+      icon,
     },
     computed: {
       shouldShowReferencedUsers() {
@@ -45,8 +47,10 @@
       },
     },
     methods: {
-      toggleMarkdownPreview() {
-        this.previewMarkdown = !this.previewMarkdown;
+      showPreviewTab() {
+        if (this.previewMarkdown) return;
+
+        this.previewMarkdown = true;
 
         /*
           Can't use `$refs` as the component is technically in the parent component
@@ -54,20 +58,22 @@
         */
         const text = this.$slots.textarea[0].elm.value;
 
-        if (!this.previewMarkdown) {
-          this.markdownPreview = '';
-        } else if (text) {
+        if (text) {
           this.markdownPreviewLoading = true;
           this.$http.post(this.markdownPreviewPath, { text })
             .then(resp => resp.json())
-            .then((data) => {
-              this.renderMarkdown(data);
-            })
+            .then(data => this.renderMarkdown(data))
             .catch(() => new Flash('Error loading markdown preview'));
         } else {
           this.renderMarkdown();
         }
       },
+
+      showWriteTab() {
+        this.markdownPreview = '';
+        this.previewMarkdown = false;
+      },
+
       renderMarkdown(data = {}) {
         this.markdownPreviewLoading = false;
         this.markdownPreview = data.body || 'Nothing to preview.';
@@ -104,7 +110,8 @@
     ref="gl-form">
     <markdown-header
       :preview-markdown="previewMarkdown"
-      @toggle-markdown="toggleMarkdownPreview" />
+      @preview-markdown="showPreviewTab"
+      @write-markdown="showWriteTab" />
     <div
       class="md-write-holder"
       v-show="!previewMarkdown">
@@ -114,10 +121,10 @@
           class="zen-control zen-control-leave js-zen-leave"
           href="#"
           aria-label="Enter zen mode">
-          <i
-            class="fa fa-compress"
-            aria-hidden="true">
-          </i>
+          <icon
+            name="screen-normal"
+            :size="32">
+          </icon>
         </a>
         <markdown-toolbar
           :markdown-docs-path="markdownDocsPath"
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 5bf2a90cc3b..70f5fc1d664 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,7 @@
 <script>
   import tooltip from '../../directives/tooltip';
   import toolbarButton from './toolbar_button.vue';
+  import icon from '../icon.vue';
 
   export default {
     props: {
@@ -14,25 +15,34 @@
     },
     components: {
       toolbarButton,
+      icon,
     },
     methods: {
-      toggleMarkdownPreview(e, form) {
-        if (form && !form.find('.js-vue-markdown-field').length) {
-          return;
-        } else if (e.target.blur) {
-          e.target.blur();
-        }
+      isMarkdownForm(form) {
+        return form && !form.find('.js-vue-markdown-field').length;
+      },
+
+      previewMarkdownTab(event, form) {
+        if (event.target.blur) event.target.blur();
+        if (this.isMarkdownForm(form)) return;
+
+        this.$emit('preview-markdown');
+      },
+
+      writeMarkdownTab(event, form) {
+        if (event.target.blur) event.target.blur();
+        if (this.isMarkdownForm(form)) return;
 
-        this.$emit('toggle-markdown');
+        this.$emit('write-markdown');
       },
     },
     mounted() {
-      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
-      $(document).on('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+      $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
     beforeDestroy() {
-      $(document).on('markdown-preview:show.vue', this.toggleMarkdownPreview);
-      $(document).off('markdown-preview:hide.vue', this.toggleMarkdownPreview);
+      $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
+      $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
     },
   };
 </script>
@@ -42,17 +52,19 @@
     <ul class="nav-links clearfix">
       <li :class="{ active: !previewMarkdown }">
         <a
+          class="js-write-link"
           href="#md-write-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="writeMarkdownTab($event)">
           Write
         </a>
       </li>
       <li :class="{ active: previewMarkdown }">
         <a
+          class="js-preview-link"
           href="#md-preview-holder"
           tabindex="-1"
-          @click.prevent="toggleMarkdownPreview($event)">
+          @click.prevent="previewMarkdownTab($event)">
           Preview
         </a>
       </li>
@@ -70,7 +82,7 @@
             tag="> "
             :prepend="true"
             button-title="Insert a quote"
-            icon="quote-right" />
+            icon="quote" />
           <toolbar-button
             tag="`"
             tag-block="```"
@@ -80,17 +92,17 @@
             tag="* "
             :prepend="true"
             button-title="Add a bullet list"
-            icon="list-ul" />
+            icon="list-bulleted" />
           <toolbar-button
             tag="1. "
             :prepend="true"
             button-title="Add a numbered list"
-            icon="list-ol" />
+            icon="list-numbered" />
           <toolbar-button
             tag="* [ ] "
             :prepend="true"
             button-title="Add a task list"
-            icon="check-square-o" />
+            icon="task-done" />
         </div>
         <div class="toolbar-group">
           <button
@@ -101,10 +113,9 @@
             tabindex="-1"
             title="Go full screen"
             type="button">
-            <i
-              aria-hidden="true"
-              class="fa fa-arrows-alt fa-fw">
-            </i>
+            <icon
+              name="screen-full">
+            </icon>
           </button>
         </div>
       </li>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index f7da7ebfcfe..b930fb116a3 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,5 +1,6 @@
 <script>
   import tooltip from '../../directives/tooltip';
+  import icon from '../icon.vue';
 
   export default {
     props: {
@@ -26,14 +27,12 @@
         default: false,
       },
     },
+    components: {
+      icon,
+    },
     directives: {
       tooltip,
     },
-    computed: {
-      iconClass() {
-        return `fa-${this.icon}`;
-      },
-    },
   };
 </script>
 
@@ -49,10 +48,8 @@
     :data-md-prepend="prepend"
     :title="buttonTitle"
     :aria-label="buttonTitle">
-    <i
-      aria-hidden="true"
-      class="fa fa-fw"
-      :class="iconClass">
-    </i>
+    <icon
+      :name="icon">
+    </icon>
   </button>
 </template>