Add latest changes from gitlab-org/gitlab@master

app/assets/javascripts/behaviors/markdown/editor_extensions.js

@@ -21,6 +21,7 @@ import Reference from './nodes/reference';
 import TableOfContents from './nodes/table_of_contents';
 import Video from './nodes/video';
+import Audio from './nodes/audio';
 import BulletList from './nodes/bullet_list';
 import OrderedList from './nodes/ordered_list';
@@ -78,6 +79,7 @@ export default [
   new TableOfContents(),
   new Video(),
+  new Audio(),
   new BulletList(),
   new OrderedList(),

app/assets/javascripts/behaviors/markdown/nodes/audio.js

+/* eslint-disable class-methods-use-this */
+
+import { Node } from 'tiptap';
+import { defaultMarkdownSerializer } from 'prosemirror-markdown';
+
+// Transforms generated HTML back to GFM for Banzai::Filter::AudioLinkFilter
+export default class Audio extends Node {
+  get name() {
+    return 'audio';
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        src: {},
+        alt: {
+          default: null,
+        },
+      },
+      group: 'block',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: '.audio-container',
+          skip: true,
+        },
+        {
+          tag: '.audio-container p',
+          priority: 51,
+          ignore: true,
+        },
+        {
+          tag: 'audio[src]',
+          getAttrs: el => ({ src: el.getAttribute('src'), alt: el.dataset.title }),
+        },
+      ],
+      toDOM: node => [
+        'audio',
+        {
+          src: node.attrs.src,
+          controls: true,
+          'data-setup': '{}',
+          'data-title': node.attrs.alt,
+        },
+      ],
+    };
+  }
+
+  toMarkdown(state, node) {
+    defaultMarkdownSerializer.nodes.image(state, node);
+    state.closeBlock(node);
+  }
+}

app/assets/javascripts/blob/viewer/index.js

@@ -107,18 +107,18 @@ export default class BlobViewer {
   toggleCopyButtonState() {
     if (!this.copySourceBtn) return;
     if (this.simpleViewer.getAttribute('data-loaded')) {
-      this.copySourceBtn.setAttribute('title', __('Copy source to clipboard'));
+      this.copySourceBtn.setAttribute('title', __('Copy file contents'));
       this.copySourceBtn.classList.remove('disabled');
     } else if (this.activeViewer === this.simpleViewer) {
       this.copySourceBtn.setAttribute(
         'title',
-        __('Wait for the source to load to copy it to the clipboard'),
+        __('Wait for the file to load to copy its contents'),
       );
       this.copySourceBtn.classList.add('disabled');
     } else {
       this.copySourceBtn.setAttribute(
         'title',
-        __('Switch to the source to copy it to the clipboard'),
+        __('Switch to the source to copy the file contents'),
       );
       this.copySourceBtn.classList.add('disabled');
     }

app/assets/javascripts/clusters/components/applications.vue

@@ -294,7 +294,7 @@ export default {
                 <span class="input-group-append">
                   <clipboard-button
                     :text="ingressExternalEndpoint"
-                    :title="s__('ClusterIntegration|Copy Ingress Endpoint to clipboard')"
+                    :title="s__('ClusterIntegration|Copy Ingress Endpoint')"
                     class="input-group-text js-clipboard-btn"
                   />
                 </span>
@@ -472,7 +472,7 @@ export default {
                 <span class="input-group-btn">
                   <clipboard-button
                     :text="jupyterHostname"
-                    :title="s__('ClusterIntegration|Copy Jupyter Hostname to clipboard')"
+                    :title="s__('ClusterIntegration|Copy Jupyter Hostname')"
                     class="js-clipboard-btn"
                   />
                 </span>

app/assets/javascripts/clusters/components/knative_domain_editor.vue

@@ -103,7 +103,7 @@ export default {
           <span class="input-group-append">
             <clipboard-button
               :text="knativeExternalEndpoint"
-              :title="s__('ClusterIntegration|Copy Knative Endpoint to clipboard')"
+              :title="s__('ClusterIntegration|Copy Knative Endpoint')"
               class="input-group-text js-knative-endpoint-clipboard-btn"
             />
           </span>

app/assets/javascripts/diffs/components/commit_item.vue

@@ -121,7 +121,7 @@ export default {
           <div class="label label-monospace monospace" v-text="commit.short_id"></div>
           <clipboard-button
             :text="commit.id"
-            :title="__('Copy commit SHA to clipboard')"
+            :title="__('Copy commit SHA')"
             class="btn btn-default"
           />
         </div>

app/assets/javascripts/diffs/components/diff_file_header.vue

@@ -209,7 +209,7 @@ export default {
       </a>
       <clipboard-button
-        :title="__('Copy file path to clipboard')"
+        :title="__('Copy file path')"
         :text="diffFile.file_path"
         :gfm="gfmCopyText"
         css-class="btn-default btn-transparent btn-clipboard"

app/assets/javascripts/jobs/components/commit_block.vue

@@ -41,7 +41,7 @@ export default {
       <clipboard-button
         :text="commit.id"
-        :title="__('Copy commit SHA to clipboard')"
+        :title="__('Copy commit SHA')"
         css-class="btn btn-clipboard btn-transparent"
       />

app/assets/javascripts/monitoring/components/dashboard.vue

 <script>
+import _ from 'underscore';
+import { mapActions, mapState } from 'vuex';
+import VueDraggable from 'vuedraggable';
 import {
   GlButton,
   GlDropdown,
@@ -8,8 +11,6 @@ import {
   GlModalDirective,
   GlTooltipDirective,
 } from '@gitlab/ui';
-import _ from 'underscore';
-import { mapActions, mapState } from 'vuex';
 import { __, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
@@ -26,6 +27,7 @@ let sidebarMutationObserver;
 export default {
   components: {
+    VueDraggable,
     MonitorTimeSeriesChart,
     MonitorSingleStatChart,
     PanelType,
@@ -151,6 +153,11 @@ export default {
       required: false,
       default: false,
     },
+    rearrangePanelsAvailable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -160,6 +167,7 @@ export default {
       selectedTimeWindowKey: '',
       formIsValid: null,
       timeWindows: {},
+      isRearrangingPanels: false,
     };
   },
   computed: {
@@ -183,6 +191,9 @@ export default {
     selectedDashboardText() {
       return this.currentDashboard || this.firstDashboard.display_name;
     },
+    showRearrangePanelsBtn() {
+      return !this.showEmptyState && this.rearrangePanelsAvailable;
+    },
     addingMetricsAvailable() {
       return IS_EE && this.canAddMetrics && !this.showEmptyState;
     },
@@ -271,9 +282,14 @@ export default {
       return Object.values(this.getGraphAlerts(queries));
     },
     showToast() {
-      this.$toast.show(__('Link copied to clipboard'));
+      this.$toast.show(__('Link copied'));
     },
     // TODO: END
+    removeGraph(metrics, graphIndex) {
+      // At present graphs will not be removed, they should removed using the vuex store
+      // See https://gitlab.com/gitlab-org/gitlab/issues/27835
+      metrics.splice(graphIndex, 1);
+    },
     generateLink(group, title, yLabel) {
       const dashboard = this.currentDashboard || this.firstDashboard.path;
       const params = _.pick({ dashboard, group, title, y_label: yLabel }, value => value != null);
@@ -287,6 +303,9 @@ export default {
         this.elWidth = this.$el.clientWidth;
       }, sidebarAnimationDuration);
     },
+    toggleRearrangingPanels() {
+      this.isRearrangingPanels = !this.isRearrangingPanels;
+    },
     setFormValidity(isValid) {
       this.formIsValid = isValid;
     },
@@ -389,15 +408,27 @@ export default {
         </template>
         <gl-form-group
-          v-if="addingMetricsAvailable || externalDashboardUrl.length"
+          v-if="addingMetricsAvailable || showRearrangePanelsBtn || externalDashboardUrl.length"
           label-for="prometheus-graphs-dropdown-buttons"
           class="dropdown-buttons col-lg d-lg-flex align-items-end"
         >
           <div id="prometheus-graphs-dropdown-buttons">
+            <gl-button
+              v-if="showRearrangePanelsBtn"
+              :pressed="isRearrangingPanels"
+              new-style
+              variant="default"
+              class="mr-2 mt-1 js-rearrange-button"
+              @click="toggleRearrangingPanels"
+            >
+              {{ __('Arrange charts') }}
+            </gl-button>
             <gl-button
               v-if="addingMetricsAvailable"
               v-gl-modal="$options.addMetric.modalId"
-              class="mr-2 mt-1 js-add-metric-button text-success border-success"
+              new-style
+              variant="outline-success"
+              class="mr-2 mt-1 js-add-metric-button"
             >
               {{ $options.addMetric.title }}
             </gl-button>
@@ -451,17 +482,42 @@ export default {
         :collapse-group="groupHasData(groupData)"
       >
         <template v-if="additionalPanelTypesEnabled">
-          <panel-type
-            v-for="(graphData, graphIndex) in groupData.metrics"
-            :key="`panel-type-${graphIndex}`"
-            class="col-12 col-lg-6 pb-3"
-            :clipboard-text="generateLink(groupData.group, graphData.title, graphData.y_label)"
-            :graph-data="graphData"
-            :dashboard-width="elWidth"
-            :alerts-endpoint="alertsEndpoint"
-            :prometheus-alerts-available="prometheusAlertsAvailable"
-            :index="`${index}-${graphIndex}`"
-          />
+          <vue-draggable
+            :list="groupData.metrics"
+            group="metrics-dashboard"
+            :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
+            :disabled="!isRearrangingPanels"
+          >
+            <div
+              v-for="(graphData, graphIndex) in groupData.metrics"
+              :key="`panel-type-${graphIndex}`"
+              class="col-12 col-lg-6 px-2 mb-2 draggable"
+              :class="{ 'draggable-enabled': isRearrangingPanels }"
+            >
+              <div class="position-relative draggable-panel js-draggable-panel">
+                <div
+                  v-if="isRearrangingPanels"
+                  class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
+                  @click="removeGraph(groupData.metrics, graphIndex)"
+                >
+                  <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')"
+                    ><icon name="close"
+                  /></a>
+                </div>
+
+                <panel-type
+                  :clipboard-text="
+                    generateLink(groupData.group, graphData.title, graphData.y_label)
+                  "
+                  :graph-data="graphData"
+                  :dashboard-width="elWidth"
+                  :alerts-endpoint="alertsEndpoint"
+                  :prometheus-alerts-available="prometheusAlertsAvailable"
+                  :index="`${index}-${graphIndex}`"
+                />
+              </div>
+            </div>
+          </vue-draggable>
         </template>
         <template v-else>
           <monitor-time-series-chart

app/assets/javascripts/monitoring/components/graph_group.vue

@@ -52,7 +52,7 @@ export default {
     <div
       v-if="collapseGroup"
       v-show="collapseGroup && showGroup"
-      class="card-body prometheus-graph-group"
+      class="card-body prometheus-graph-group p-0"
     >
       <slot></slot>
     </div>

app/assets/javascripts/monitoring/components/panel_type.vue

@@ -82,7 +82,7 @@ export default {
       return this.graphData.type && this.graphData.type === type;
     },
     showToast() {
-      this.$toast.show(__('Link copied to clipboard'));
+      this.$toast.show(__('Link copied'));
     },
   },
 };

app/assets/javascripts/registry/components/app.vue

@@ -143,7 +143,7 @@ export default {
           <span class="input-group-append">
             <clipboard-button
               :text="dockerBuildCommand"
-              :title="s__('ContainerRegistry|Copy build command to clipboard')"
+              :title="s__('ContainerRegistry|Copy build command')"
               class="input-group-text"
             />
           </span>
@@ -154,7 +154,7 @@ export default {
           <span class="input-group-append">
             <clipboard-button
               :text="dockerPushCommand"
-              :title="s__('ContainerRegistry|Copy push command to clipboard')"
+              :title="s__('ContainerRegistry|Copy push command')"
               class="input-group-text"
             />
           </span>

app/assets/javascripts/repository/components/last_commit.vue

@@ -144,7 +144,7 @@ export default {
             </div>
             <clipboard-button
               :text="commit.sha"
-              :title="__('Copy commit SHA to clipboard')"
+              :title="__('Copy commit SHA')"
               tooltip-placement="bottom"
             />
           </div>

app/assets/javascripts/serverless/components/url.vue

@@ -23,7 +23,7 @@ export default {
     <div class="url-text-field label label-monospace monospace">{{ uri }}</div>
     <clipboard-button
       :text="uri"
-      :title="s__('ServerlessURL|Copy URL to clipboard')"
+      :title="s__('ServerlessURL|Copy URL')"
       class="input-group-text js-clipboard-btn"
     />
     <gl-button

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -90,7 +90,7 @@ export default {
             v-html="mr.sourceBranchLink"
           /><clipboard-button
             :text="branchNameClipboardData"
-            :title="__('Copy branch name to clipboard')"
+            :title="__('Copy branch name')"
             css-class="btn-default btn-transparent btn-clipboard"
           />
           {{ s__('mrWidget|into') }}

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue

@@ -170,7 +170,7 @@ export default {
             >
             </a>
             <clipboard-button
-              :title="__('Copy commit SHA to clipboard')"
+              :title="__('Copy commit SHA')"
               :text="mr.mergeCommitSha"
               css-class="btn-default btn-transparent btn-clipboard js-mr-merged-copy-sha"
             />

app/assets/javascripts/vue_shared/components/clipboard_button.vue

@@ -7,7 +7,7 @@
  *
  * @example
  * <clipboard-button
- *   title="Copy to clipboard"
+ *   title="Copy"
  *   text="Content to be copied"
  *    css-class="btn-transparent"
  * />

app/assets/stylesheets/pages/prometheus.scss

@@ -15,6 +15,37 @@
   }
 }
+.draggable {
+  &.draggable-enabled {
+    .draggable-panel {
+      border: $gray-200 1px solid;
+      border-radius: $border-radius-default;
+      margin: -1px;
+      cursor: grab;
+    }
+
+    .prometheus-graph {
+      // Make dragging easier by disabling use of chart
+      pointer-events: none;
+    }
+  }
+
+  &.sortable-chosen .draggable-panel {
+    background: $white-light;
+    box-shadow: 0 0 4px $gray-500;
+  }
+
+  .draggable-remove {
+    z-index: 1;
+
+    .draggable-remove-link {
+      cursor: pointer;
+      color: $gray-600;
+      background-color: $white-light;
+    }
+  }
+}
+
 .prometheus-panel {
   margin-top: 20px;
 }
@@ -22,11 +53,11 @@
 .prometheus-graph-group {
   display: flex;
   flex-wrap: wrap;
-  padding: $gl-padding / 2;
+  margin-top: $gl-padding-8;
 }
 .prometheus-graph {
-  padding: $gl-padding / 2;
+  padding: $gl-padding-8;
 }
 .prometheus-graph-embed {

app/controllers/concerns/uploads_actions.rb

@@ -37,7 +37,7 @@ module UploadsActions
       expires_in 0.seconds, must_revalidate: true, private: true
     end
-    disposition = uploader.image_or_video? ? 'inline' : 'attachment'
+    disposition = uploader.embeddable? ? 'inline' : 'attachment'
     uploaders = [uploader, *uploader.versions.values]
     uploader = uploaders.find { |version| version.filename == params[:filename] }
@@ -112,8 +112,8 @@ module UploadsActions
     uploader
   end
-  def image_or_video?
-    uploader && uploader.exists? && uploader.image_or_video?
+  def embeddable?
+    uploader && uploader.exists? && uploader.embeddable?
   end
   def find_model

app/controllers/groups/uploads_controller.rb

@@ -4,7 +4,7 @@ class Groups::UploadsController < Groups::ApplicationController
   include UploadsActions
   include WorkhorseRequest
-  skip_before_action :group, if: -> { action_name == 'show' && image_or_video? }
+  skip_before_action :group, if: -> { action_name == 'show' && embeddable? }
   before_action :authorize_upload_file!, only: [:create, :authorize]
   before_action :verify_workhorse_api!, only: [:authorize]