Add latest changes from gitlab-org/gitlab@master

8 files changed, 145 insertions, 39 deletions

diff --git a/app/assets/javascripts/blob/components/blob_edit_header.vue b/app/assets/javascripts/blob/components/blob_edit_header.vue
index e1e1d76f721..5d3a1f0ccdb 100644
--- a/app/assets/javascripts/blob/components/blob_edit_header.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_header.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlFormInput } from '@gitlab/ui';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 
 export default {
   components: {
     GlFormInput,
+    GlButton,
   },
   inheritAttrs: false,
   props: {
@@ -11,6 +12,16 @@ export default {
       type: String,
       required: true,
     },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -21,17 +32,27 @@ export default {
 </script>
 <template>
   <div class="js-file-title file-title-flex-parent">
-    <gl-form-input
-      id="snippet_file_name"
-      v-model="name"
-      :placeholder="
-        s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
-      "
-      name="snippet_file_name"
-      class="form-control js-snippet-file-name"
-      type="text"
-      v-bind="$attrs"
-      @change="$emit('input', name)"
-    />
+    <div class="gl-display-flex gl-align-items-center gl-w-full">
+      <gl-form-input
+        v-model="name"
+        :placeholder="
+          s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
+        "
+        name="snippet_file_name"
+        class="form-control js-snippet-file-name"
+        type="text"
+        v-bind="$attrs"
+        @change="$emit('input', name)"
+      />
+      <gl-button
+        v-if="showDelete"
+        class="gl-ml-4"
+        variant="danger"
+        category="secondary"
+        :disabled="!canDelete"
+        @click="$emit('delete')"
+        >{{ s__('Snippets|Delete file') }}</gl-button
+      >
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue
index 7411c0ffe0d..d6e963c6f4f 100644
--- a/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue
+++ b/app/assets/javascripts/incidents_settings/components/incidents_settings_tabs.vue
@@ -24,9 +24,9 @@ export default {
     class="settings no-animate qa-incident-management-settings"
   >
     <div class="settings-header">
-      <h3 ref="sectionHeader" class="h4">
+      <h4 ref="sectionHeader" class="gl-my-3! gl-py-1">
         {{ $options.i18n.headerText }}
-      </h3>
+      </h4>
       <gl-button ref="toggleBtn" class="js-settings-toggle">{{
         $options.i18n.expandBtnLabel
       }}</gl-button>
diff --git a/app/assets/javascripts/projects/components/shared/delete_button.vue b/app/assets/javascripts/projects/components/shared/delete_button.vue
index b00edc94abd..e3f4500d404 100644
--- a/app/assets/javascripts/projects/components/shared/delete_button.vue
+++ b/app/assets/javascripts/projects/components/shared/delete_button.vue
@@ -54,7 +54,7 @@ export default {
     },
   },
   strings: {
-    deleteProject: __('Remove project'),
+    deleteProject: __('Delete project'),
     title: __('Delete project. Are you ABSOLUTELY SURE?'),
     confirmText: __('Please type the following to confirm:'),
   },
diff --git a/app/assets/javascripts/snippets/components/edit.vue b/app/assets/javascripts/snippets/components/edit.vue
index 896ab900fd7..81be39bda04 100644
--- a/app/assets/javascripts/snippets/components/edit.vue
+++ b/app/assets/javascripts/snippets/components/edit.vue
@@ -18,7 +18,7 @@ import {
   SNIPPET_BLOB_ACTION_UPDATE,
   SNIPPET_BLOB_ACTION_MOVE,
 } from '../constants';
-import SnippetBlobEdit from './snippet_blob_edit.vue';
+import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
 import { SNIPPET_MARK_EDIT_APP_START } from '~/performance_constants';
@@ -27,7 +27,7 @@ export default {
   components: {
     SnippetDescriptionEdit,
     SnippetVisibilityEdit,
-    SnippetBlobEdit,
+    SnippetBlobActionsEdit,
     TitleField,
     FormFooterActions,
     GlButton,
@@ -261,15 +261,7 @@ export default {
         :markdown-preview-path="markdownPreviewPath"
         :markdown-docs-path="markdownDocsPath"
       />
-      <template v-if="blobs.length">
-        <snippet-blob-edit
-          v-for="blob in blobs"
-          :key="blob.name"
-          :blob="blob"
-          @blob-updated="updateBlobActions"
-        />
-      </template>
-      <snippet-blob-edit v-else @blob-updated="updateBlobActions" />
+      <snippet-blob-actions-edit :blobs="blobs" @blob-updated="updateBlobActions" />
 
       <snippet-visibility-edit
         v-model="snippet.visibilityLevel"
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
new file mode 100644
index 00000000000..fd81a5fa69c
--- /dev/null
+++ b/app/assets/javascripts/snippets/components/snippet_blob_actions_edit.vue
@@ -0,0 +1,25 @@
+<script>
+import SnippetBlobEdit from './snippet_blob_edit.vue';
+
+export default {
+  components: {
+    SnippetBlobEdit,
+  },
+  props: {
+    blobs: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="form-group file-editor">
+    <label for="snippet_file_path">{{ s__('Snippets|File') }}</label>
+    <template v-if="blobs.length">
+      <snippet-blob-edit v-for="blob in blobs" :key="blob.name" :blob="blob" v-on="$listeners" />
+    </template>
+    <snippet-blob-edit v-else v-on="$listeners" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index df293de103b..2fe7cae3ae4 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -91,17 +91,18 @@ export default {
 };
 </script>
 <template>
-  <div class="form-group file-editor">
-    <label>{{ s__('Snippets|File') }}</label>
-    <div class="file-holder snippet">
-      <blob-header-edit v-model="filePath" data-qa-selector="file_name_field" />
-      <gl-loading-icon
-        v-if="isContentLoading"
-        :label="__('Loading snippet')"
-        size="lg"
-        class="loading-animation prepend-top-20 append-bottom-20"
-      />
-      <blob-content-edit v-else v-model="content" :file-global-id="id" :file-name="filePath" />
-    </div>
+  <div class="file-holder snippet">
+    <blob-header-edit
+      id="snippet_file_path"
+      v-model="filePath"
+      data-qa-selector="file_name_field"
+    />
+    <gl-loading-icon
+      v-if="isContentLoading"
+      :label="__('Loading snippet')"
+      size="lg"
+      class="loading-animation prepend-top-20 append-bottom-20"
+    />
+    <blob-content-edit v-else v-model="content" :file-global-id="id" :file-name="filePath" />
   </div>
 </template>
diff --git a/app/assets/javascripts/snippets/constants.js b/app/assets/javascripts/snippets/constants.js
index 99ee698408d..a59d7aa84eb 100644
--- a/app/assets/javascripts/snippets/constants.js
+++ b/app/assets/javascripts/snippets/constants.js
@@ -30,3 +30,4 @@ export const SNIPPET_BLOB_CONTENT_FETCH_ERROR = __("Can't fetch content for the
 export const SNIPPET_BLOB_ACTION_CREATE = 'create';
 export const SNIPPET_BLOB_ACTION_UPDATE = 'update';
 export const SNIPPET_BLOB_ACTION_MOVE = 'move';
+export const SNIPPET_BLOB_ACTION_DELETE = 'delete';
diff --git a/app/assets/javascripts/snippets/utils/blob.js b/app/assets/javascripts/snippets/utils/blob.js
new file mode 100644
index 00000000000..fd5ff9a3d2e
--- /dev/null
+++ b/app/assets/javascripts/snippets/utils/blob.js
@@ -0,0 +1,66 @@
+import { uniqueId } from 'lodash';
+import {
+  SNIPPET_BLOB_ACTION_CREATE,
+  SNIPPET_BLOB_ACTION_UPDATE,
+  SNIPPET_BLOB_ACTION_MOVE,
+  SNIPPET_BLOB_ACTION_DELETE,
+} from '../constants';
+
+const createLocalId = () => uniqueId('blob_local_');
+
+export const decorateBlob = blob => ({
+  ...blob,
+  id: createLocalId(),
+  isLoaded: false,
+  content: '',
+});
+
+export const createBlob = () => ({
+  id: createLocalId(),
+  content: '',
+  path: '',
+  isLoaded: true,
+});
+
+const diff = ({ content, path }, origBlob) => {
+  if (!origBlob) {
+    return {
+      action: SNIPPET_BLOB_ACTION_CREATE,
+      previousPath: path,
+      content,
+      filePath: path,
+    };
+  } else if (origBlob.path !== path || origBlob.content !== content) {
+    return {
+      action: origBlob.path === path ? SNIPPET_BLOB_ACTION_UPDATE : SNIPPET_BLOB_ACTION_MOVE,
+      previousPath: origBlob.path,
+      content,
+      filePath: path,
+    };
+  }
+
+  return null;
+};
+
+/**
+ * This function returns an array of diff actions (to be sent to the BE) based on the current vs. original blobs
+ *
+ * @param {Object} blobs
+ * @param {Object} origBlobs
+ */
+export const diffAll = (blobs, origBlobs) => {
+  const deletedEntries = Object.values(origBlobs)
+    .filter(x => !blobs[x.id])
+    .map(({ path, content }) => ({
+      action: SNIPPET_BLOB_ACTION_DELETE,
+      previousPath: path,
+      filePath: path,
+      content,
+    }));
+
+  const newEntries = Object.values(blobs)
+    .map(blob => diff(blob, origBlobs[blob.id]))
+    .filter(x => x);
+
+  return [...deletedEntries, ...newEntries];
+};