Add latest changes from gitlab-org/gitlab@13-0-stable-ee

3 files changed, 268 insertions, 0 deletions

diff --git a/app/assets/javascripts/design_management/components/upload/button.vue b/app/assets/javascripts/design_management/components/upload/button.vue
new file mode 100644
index 00000000000..e3c5e369170
--- /dev/null
+++ b/app/assets/javascripts/design_management/components/upload/button.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
+
+export default {
+  components: {
+    GlDeprecatedButton,
+    GlLoadingIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    isSaving: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    openFileUpload() {
+      this.$refs.fileUpload.click();
+    },
+    onFileUploadChange(e) {
+      this.$emit('upload', e.target.files);
+    },
+  },
+  VALID_DESIGN_FILE_MIMETYPE,
+};
+</script>
+
+<template>
+  <div>
+    <gl-deprecated-button
+      v-gl-tooltip.hover
+      :title="
+        s__(
+          'DesignManagement|Adding a design with the same filename replaces the file in a new version.',
+        )
+      "
+      :disabled="isSaving"
+      variant="success"
+      @click="openFileUpload"
+    >
+      {{ s__('DesignManagement|Add designs') }}
+      <gl-loading-icon v-if="isSaving" inline class="ml-1" />
+    </gl-deprecated-button>
+
+    <input
+      ref="fileUpload"
+      type="file"
+      name="design_file"
+      :accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
+      class="hide"
+      multiple
+      @change="onFileUploadChange"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/design_management/components/upload/design_dropzone.vue b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue
new file mode 100644
index 00000000000..e2e1fc8bfad
--- /dev/null
+++ b/app/assets/javascripts/design_management/components/upload/design_dropzone.vue
@@ -0,0 +1,134 @@
+<script>
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import createFlash from '~/flash';
+import uploadDesignMutation from '../../graphql/mutations/uploadDesign.mutation.graphql';
+import { UPLOAD_DESIGN_INVALID_FILETYPE_ERROR } from '../../utils/error_messages';
+import { isValidDesignFile } from '../../utils/design_management_utils';
+import { VALID_DATA_TRANSFER_TYPE, VALID_DESIGN_FILE_MIMETYPE } from '../../constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+    GlSprintf,
+  },
+  data() {
+    return {
+      dragCounter: 0,
+      isDragDataValid: false,
+    };
+  },
+  computed: {
+    dragging() {
+      return this.dragCounter !== 0;
+    },
+  },
+  methods: {
+    isValidUpload(files) {
+      return files.every(isValidDesignFile);
+    },
+    isValidDragDataType({ dataTransfer }) {
+      return Boolean(dataTransfer && dataTransfer.types.some(t => t === VALID_DATA_TRANSFER_TYPE));
+    },
+    ondrop({ dataTransfer = {} }) {
+      this.dragCounter = 0;
+      // User already had feedback when dropzone was active, so bail here
+      if (!this.isDragDataValid) {
+        return;
+      }
+
+      const { files } = dataTransfer;
+      if (!this.isValidUpload(Array.from(files))) {
+        createFlash(UPLOAD_DESIGN_INVALID_FILETYPE_ERROR);
+        return;
+      }
+
+      this.$emit('change', files);
+    },
+    ondragenter(e) {
+      this.dragCounter += 1;
+      this.isDragDataValid = this.isValidDragDataType(e);
+    },
+    ondragleave() {
+      this.dragCounter -= 1;
+    },
+    openFileUpload() {
+      this.$refs.fileUpload.click();
+    },
+    onDesignInputChange(e) {
+      this.$emit('change', e.target.files);
+    },
+  },
+  uploadDesignMutation,
+  VALID_DESIGN_FILE_MIMETYPE,
+};
+</script>
+
+<template>
+  <div
+    class="w-100 position-relative"
+    @dragstart.prevent.stop
+    @dragend.prevent.stop
+    @dragover.prevent.stop
+    @dragenter.prevent.stop="ondragenter"
+    @dragleave.prevent.stop="ondragleave"
+    @drop.prevent.stop="ondrop"
+  >
+    <slot>
+      <button
+        class="card design-dropzone-card design-dropzone-border w-100 h-100 d-flex-center p-3"
+        @click="openFileUpload"
+      >
+        <div class="d-flex-center flex-column text-center">
+          <gl-icon name="doc-new" :size="48" class="mb-4" />
+          <p>
+            <gl-sprintf
+              :message="
+                __(
+                  '%{lineOneStart}Drag and drop to upload your designs%{lineOneEnd} or %{linkStart}click to upload%{linkEnd}.',
+                )
+              "
+            >
+              <template #lineOne="{ content }"
+                ><span class="d-block">{{ content }}</span>
+              </template>
+
+              <template #link="{ content }">
+                <gl-link class="h-100 w-100" @click.stop="openFileUpload">{{ content }}</gl-link>
+              </template>
+            </gl-sprintf>
+          </p>
+        </div>
+      </button>
+
+      <input
+        ref="fileUpload"
+        type="file"
+        name="design_file"
+        :accept="$options.VALID_DESIGN_FILE_MIMETYPE.mimetype"
+        class="hide"
+        multiple
+        @change="onDesignInputChange"
+      />
+    </slot>
+    <transition name="design-dropzone-fade">
+      <div
+        v-show="dragging"
+        class="card design-dropzone-border design-dropzone-overlay w-100 h-100 position-absolute d-flex-center p-3 bg-white"
+      >
+        <div v-show="!isDragDataValid" class="mw-50 text-center">
+          <h3>{{ __('Oh no!') }}</h3>
+          <span>{{
+            __(
+              'You are trying to upload something other than an image. Please upload a .png, .jpg, .jpeg, .gif, .bmp, .tiff or .ico.',
+            )
+          }}</span>
+        </div>
+        <div v-show="isDragDataValid" class="mw-50 text-center">
+          <h3>{{ __('Incoming!') }}</h3>
+          <span>{{ __('Drop your designs to start your upload.') }}</span>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
diff --git a/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
new file mode 100644
index 00000000000..993eac6f37f
--- /dev/null
+++ b/app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue
@@ -0,0 +1,76 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { __, sprintf } from '~/locale';
+import allVersionsMixin from '../../mixins/all_versions';
+import { findVersionId } from '../../utils/design_management_utils';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  mixins: [allVersionsMixin],
+  computed: {
+    queryVersion() {
+      return this.$route.query.version;
+    },
+    currentVersionIdx() {
+      if (!this.queryVersion) return 0;
+
+      const idx = this.allVersions.findIndex(
+        version => this.findVersionId(version.node.id) === this.queryVersion,
+      );
+
+      // if the currentVersionId isn't a valid version (i.e. not in allVersions)
+      // then return the latest version (index 0)
+      return idx !== -1 ? idx : 0;
+    },
+    currentVersionId() {
+      if (this.queryVersion) return this.queryVersion;
+
+      const currentVersion = this.allVersions[this.currentVersionIdx];
+      return this.findVersionId(currentVersion.node.id);
+    },
+    dropdownText() {
+      if (this.isLatestVersion) {
+        return __('Showing Latest Version');
+      }
+      // allVersions is sorted in reverse chronological order (latest first)
+      const currentVersionNumber = this.allVersions.length - this.currentVersionIdx;
+
+      return sprintf(__('Showing Version #%{versionNumber}'), {
+        versionNumber: currentVersionNumber,
+      });
+    },
+  },
+  methods: {
+    findVersionId,
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
+    <gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
+      <router-link
+        class="d-flex js-version-link"
+        :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
+      >
+        <div class="flex-grow-1 ml-2">
+          <div>
+            <strong
+              >{{ __('Version') }} {{ allVersions.length - index }}
+              <span v-if="findVersionId(version.node.id) === latestVersionId"
+                >({{ __('latest') }})</span
+              >
+            </strong>
+          </div>
+        </div>
+        <i
+          v-if="findVersionId(version.node.id) === currentVersionId"
+          class="fa fa-check pull-right"
+        ></i>
+      </router-link>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>