1 files changed, 76 insertions, 17 deletions
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 93252293ba6..65fe7bbd94e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,10 +1,14 @@
 <script>
   export default {
     props: {
-      markdownDocs: {
+      markdownDocsPath: {
         type: String,
         required: true,
       },
+      quickActionsDocsPath: {
+        type: String,
+        required: false,
+      },
     },
   };
 </script>
@@ -12,22 +16,77 @@
 <template>
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
-      <a
-        :href="markdownDocs"
-        target="_blank"
-        tabindex="-1">
-        Markdown is supported
-      </a>
+      <template v-if="!quickActionsDocsPath && markdownDocsPath">
+        <a
+          :href="markdownDocsPath"
+          target="_blank"
+          tabindex="-1">
+          Markdown is supported
+        </a>
+      </template>
+      <template v-if="quickActionsDocsPath && markdownDocsPath">
+         <a
+          :href="markdownDocsPath"
+          target="_blank"
+          tabindex="-1">
+          Markdown
+        </a>
+        and
+         <a
+          :href="quickActionsDocsPath"
+          target="_blank"
+          tabindex="-1">
+          quick actions
+        </a>
+        are supported
+      </template>
     </div>
-    <button
-      class="toolbar-button markdown-selector"
-      type="button"
-      tabindex="-1">
-      <i
-        class="fa fa-file-image-o toolbar-button-icon"
-        aria-hidden="true">
-      </i>
-      Attach a file
-    </button>
+    <span class="uploading-container">
+      <span class="uploading-progress-container hide">
+        <i
+          class="fa fa-file-image-o toolbar-button-icon"
+          aria-hidden="true"></i>
+        <span class="attaching-file-message"></span>
+        <span class="uploading-progress">0%</span>
+        <span class="uploading-spinner">
+          <i
+            class="fa fa-spinner fa-spin toolbar-button-icon"
+            aria-hidden="true"></i>
+        </span>
+      </span>
+      <span class="uploading-error-container hide">
+        <span class="uploading-error-icon">
+          <i
+            class="fa fa-file-image-o toolbar-button-icon"
+            aria-hidden="true"></i>
+        </span>
+        <span class="uploading-error-message"></span>
+        <button
+          class="retry-uploading-link"
+          type="button">
+            Try again
+        </button>
+        or
+        <button
+          class="attach-new-file markdown-selector"
+          type="button">
+          attach a new file
+        </button>
+      </span>
+      <button
+        class="markdown-selector button-attach-file"
+        tabindex="-1"
+        type="button">
+        <i
+          class="fa fa-file-image-o toolbar-button-icon"
+          aria-hidden="true"></i>
+        Attach a file
+      </button>
+      <button
+        class="btn btn-default btn-xs hide button-cancel-uploading-files"
+        type="button">
+        Cancel
+      </button>
+    </span>
   </div>
 </template>