Add latest changes from gitlab-org/gitlab@master

3 files changed, 170 insertions, 30 deletions

diff --git a/app/assets/javascripts/releases/components/app_edit.vue b/app/assets/javascripts/releases/components/app_edit.vue
index 06e388002e4..df356c18417 100644
--- a/app/assets/javascripts/releases/components/app_edit.vue
+++ b/app/assets/javascripts/releases/components/app_edit.vue
@@ -1,6 +1,6 @@
 <script>
-import { mapState, mapActions } from 'vuex';
-import { GlDeprecatedButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui';
+import { mapState, mapActions, mapGetters } from 'vuex';
+import { GlNewButton, GlFormInput, GlFormGroup } from '@gitlab/ui';
 import { escape as esc } from 'lodash';
 import { __, sprintf } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -15,8 +15,7 @@ export default {
   components: {
     GlFormInput,
     GlFormGroup,
-    GlDeprecatedButton,
-    GlLink,
+    GlNewButton,
     MarkdownField,
     AssetLinksForm,
   },
@@ -27,12 +26,14 @@ export default {
   computed: {
     ...mapState('detail', [
       'isFetchingRelease',
+      'isUpdatingRelease',
       'fetchError',
       'markdownDocsPath',
       'markdownPreviewPath',
       'releasesPagePath',
       'updateReleaseApiDocsPath',
     ]),
+    ...mapGetters('detail', ['isValid']),
     showForm() {
       return !this.isFetchingRelease && !this.fetchError;
     },
@@ -87,6 +88,9 @@ export default {
     showAssetLinksForm() {
       return this.glFeatures.releaseAssetLinkEditing;
     },
+    isSaveChangesDisabled() {
+      return this.isUpdatingRelease || !this.isValid;
+    },
   },
   created() {
     this.fetchRelease();
@@ -163,17 +167,19 @@ export default {
       <asset-links-form v-if="showAssetLinksForm" />
 
       <div class="d-flex pt-3">
-        <gl-deprecated-button
-          class="mr-auto js-submit-button"
+        <gl-new-button
+          class="mr-auto js-no-auto-disable"
+          category="primary"
           variant="success"
           type="submit"
           :aria-label="__('Save changes')"
+          :disabled="isSaveChangesDisabled"
         >
           {{ __('Save changes') }}
-        </gl-deprecated-button>
-        <gl-link :href="cancelPath" class="js-cancel-button btn btn-default">
+        </gl-new-button>
+        <gl-new-button :href="cancelPath" class="js-cancel-button">
           {{ __('Cancel') }}
-        </gl-link>
+        </gl-new-button>
       </div>
     </form>
   </div>
diff --git a/app/assets/javascripts/releases/components/asset_links_form.vue b/app/assets/javascripts/releases/components/asset_links_form.vue
index 7299fd24ec5..6ca700c2b30 100644
--- a/app/assets/javascripts/releases/components/asset_links_form.vue
+++ b/app/assets/javascripts/releases/components/asset_links_form.vue
@@ -1,10 +1,10 @@
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import {
   GlSprintf,
   GlLink,
   GlFormGroup,
-  GlDeprecatedButton,
+  GlNewButton,
   GlIcon,
   GlTooltipDirective,
   GlFormInput,
@@ -12,13 +12,14 @@ import {
 
 export default {
   name: 'AssetLinksForm',
-  components: { GlSprintf, GlLink, GlFormGroup, GlDeprecatedButton, GlIcon, GlFormInput },
+  components: { GlSprintf, GlLink, GlFormGroup, GlNewButton, GlIcon, GlFormInput },
   directives: { GlTooltip: GlTooltipDirective },
   computed: {
     ...mapState('detail', ['release', 'releaseAssetsDocsPath']),
+    ...mapGetters('detail', ['validationErrors']),
   },
   created() {
-    this.addEmptyAssetLink();
+    this.ensureAtLeastOneLink();
   },
   methods: {
     ...mapActions('detail', [
@@ -32,6 +33,7 @@ export default {
     },
     onRemoveClicked(linkId) {
       this.removeAssetLink(linkId);
+      this.ensureAtLeastOneLink();
     },
     onUrlInput(linkIdToUpdate, newUrl) {
       this.updateAssetLinkUrl({ linkIdToUpdate, newUrl });
@@ -39,6 +41,37 @@ export default {
     onLinkTitleInput(linkIdToUpdate, newName) {
       this.updateAssetLinkName({ linkIdToUpdate, newName });
     },
+    hasDuplicateUrl(link) {
+      return Boolean(this.getLinkErrors(link).isDuplicate);
+    },
+    hasBadFormat(link) {
+      return Boolean(this.getLinkErrors(link).isBadFormat);
+    },
+    hasEmptyUrl(link) {
+      return Boolean(this.getLinkErrors(link).isUrlEmpty);
+    },
+    hasEmptyName(link) {
+      return Boolean(this.getLinkErrors(link).isNameEmpty);
+    },
+    getLinkErrors(link) {
+      return this.validationErrors.assets.links[link.id] || {};
+    },
+    isUrlValid(link) {
+      return !this.hasDuplicateUrl(link) && !this.hasBadFormat(link) && !this.hasEmptyUrl(link);
+    },
+    isNameValid(link) {
+      return !this.hasEmptyName(link);
+    },
+
+    /**
+     * Make sure the form is never completely empty by adding an
+     * empty row if the form contains 0 links
+     */
+    ensureAtLeastOneLink() {
+      if (this.release.assets.links.length === 0) {
+        this.addEmptyAssetLink();
+      }
+    },
   },
 };
 </script>
@@ -69,60 +102,93 @@ export default {
     <p>
       {{
         __(
-          'Point to any links you like: documentation, built binaries, or other related materials. These can be internal or external links from your GitLab instance.',
+          'Point to any links you like: documentation, built binaries, or other related materials. These can be internal or external links from your GitLab instance. Duplicate URLs are not allowed.',
         )
       }}
     </p>
     <div
       v-for="(link, index) in release.assets.links"
       :key="link.id"
-      class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-end"
+      class="row flex-column flex-sm-row align-items-stretch align-items-sm-start"
     >
       <gl-form-group
-        class="url-field form-group flex-grow-1 mr-sm-4"
+        class="url-field form-group col"
         :label="__('URL')"
         :label-for="`asset-url-${index}`"
       >
         <gl-form-input
           :id="`asset-url-${index}`"
+          ref="urlInput"
           :value="link.url"
           type="text"
           class="form-control"
+          :state="isUrlValid(link)"
           @change="onUrlInput(link.id, $event)"
         />
+        <template #invalid-feedback>
+          <span v-if="hasEmptyUrl(link)" class="invalid-feedback d-inline">
+            {{ __('URL is required') }}
+          </span>
+          <span v-else-if="hasBadFormat(link)" class="invalid-feedback d-inline">
+            <gl-sprintf
+              :message="
+                __(
+                  'URL must start with %{codeStart}http://%{codeEnd}, %{codeStart}https://%{codeEnd}, or %{codeStart}ftp://%{codeEnd}',
+                )
+              "
+            >
+              <template #code="{ content }">
+                <code>{{ content }}</code>
+              </template>
+            </gl-sprintf>
+          </span>
+          <span v-else-if="hasDuplicateUrl(link)" class="invalid-feedback d-inline">
+            {{ __('This URL is already used for another link; duplicate URLs are not allowed') }}
+          </span>
+        </template>
       </gl-form-group>
 
       <gl-form-group
-        class="link-title-field flex-grow-1 mr-sm-4"
+        class="link-title-field col"
         :label="__('Link title')"
         :label-for="`asset-link-name-${index}`"
       >
         <gl-form-input
           :id="`asset-link-name-${index}`"
+          ref="nameInput"
           :value="link.name"
           type="text"
           class="form-control"
+          :state="isNameValid(link)"
           @change="onLinkTitleInput(link.id, $event)"
         />
+        <template v-slot:invalid-feedback>
+          <span v-if="hasEmptyName(link)" class="invalid-feedback d-inline">
+            {{ __('Link title is required') }}
+          </span>
+        </template>
       </gl-form-group>
 
-      <gl-deprecated-button
-        v-gl-tooltip
-        class="mb-5 mb-sm-3 flex-grow-0 flex-shrink-0 remove-button"
-        :aria-label="__('Remove asset link')"
-        :title="__('Remove asset link')"
-        @click="onRemoveClicked(link.id)"
-      >
-        <gl-icon class="m-0" name="remove" />
-        <span class="d-inline d-sm-none">{{ __('Remove asset link') }}</span>
-      </gl-deprecated-button>
+      <div class="mb-5 mb-sm-3 mt-sm-4 col col-sm-auto">
+        <gl-new-button
+          v-gl-tooltip
+          class="remove-button w-100"
+          :aria-label="__('Remove asset link')"
+          :title="__('Remove asset link')"
+          @click="onRemoveClicked(link.id)"
+        >
+          <gl-icon class="mr-1 mr-sm-0 mb-1" :size="16" name="remove" />
+          <span class="d-inline d-sm-none">{{ __('Remove asset link') }}</span>
+        </gl-new-button>
+      </div>
     </div>
-    <gl-deprecated-button
+    <gl-new-button
+      ref="addAnotherLinkButton"
       variant="link"
       class="align-self-end mb-5 mb-sm-0"
       @click="onAddAnotherClicked"
     >
       {{ __('Add another link') }}
-    </gl-deprecated-button>
+    </gl-new-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/releases/stores/modules/detail/getters.js b/app/assets/javascripts/releases/stores/modules/detail/getters.js
index 562284dc48d..84dc2fca4be 100644
--- a/app/assets/javascripts/releases/stores/modules/detail/getters.js
+++ b/app/assets/javascripts/releases/stores/modules/detail/getters.js
@@ -1,9 +1,13 @@
+import { isEmpty } from 'lodash';
+import { hasContent } from '~/lib/utils/text_utility';
+
 /**
+ * @param {Object} link The link to test
  * @returns {Boolean} `true` if the release link is empty, i.e. it has
  * empty (or whitespace-only) values for both `url` and `name`.
  * Otherwise, `false`.
  */
-const isEmptyReleaseLink = l => !/\S/.test(l.url) && !/\S/.test(l.name);
+const isEmptyReleaseLink = link => !hasContent(link.url) && !hasContent(link.name);
 
 /** Returns all release links that aren't empty */
 export const releaseLinksToCreate = state => {
@@ -22,3 +26,67 @@ export const releaseLinksToDelete = state => {
 
   return state.originalRelease.assets.links;
 };
+
+/** Returns all validation errors on the release object */
+export const validationErrors = state => {
+  const errors = {
+    assets: {
+      links: {},
+    },
+  };
+
+  if (!state.release) {
+    return errors;
+  }
+
+  // Each key of this object is a URL, and the value is an
+  // array of Release link objects that share this URL.
+  // This is used for detecting duplicate URLs.
+  const urlToLinksMap = new Map();
+
+  state.release.assets.links.forEach(link => {
+    errors.assets.links[link.id] = {};
+
+    // Only validate non-empty URLs
+    if (isEmptyReleaseLink(link)) {
+      return;
+    }
+
+    if (!hasContent(link.url)) {
+      errors.assets.links[link.id].isUrlEmpty = true;
+    }
+
+    if (!hasContent(link.name)) {
+      errors.assets.links[link.id].isNameEmpty = true;
+    }
+
+    const normalizedUrl = link.url.trim().toLowerCase();
+
+    // Compare each URL to every other URL and flag any duplicates
+    if (urlToLinksMap.has(normalizedUrl)) {
+      // a duplicate URL was found!
+
+      // add a validation error for each link that shares this URL
+      const duplicates = urlToLinksMap.get(normalizedUrl);
+      duplicates.push(link);
+      duplicates.forEach(duplicateLink => {
+        errors.assets.links[duplicateLink.id].isDuplicate = true;
+      });
+    } else {
+      // no duplicate URL was found
+
+      urlToLinksMap.set(normalizedUrl, [link]);
+    }
+
+    if (!/^(http|https|ftp):\/\//.test(normalizedUrl)) {
+      errors.assets.links[link.id].isBadFormat = true;
+    }
+  });
+
+  return errors;
+};
+
+/** Returns whether or not the release object is valid */
+export const isValid = (_state, getters) => {
+  return Object.values(getters.validationErrors.assets.links).every(isEmpty);
+};