Move badge settings to general settings

14 files changed, 107 insertions, 95 deletions

diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 7a13f74c570..b3f25da87ce 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -23,6 +23,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      wasValidated: false,
+    };
+  },
   computed: {
     ...mapState([
       'badgeInAddForm',
@@ -39,16 +44,6 @@ export default {
 
       return this.badgeInAddForm;
     },
-    canSubmit() {
-      return (
-        this.badge !== null &&
-        this.badge.imageUrl &&
-        this.badge.imageUrl.trim() !== '' &&
-        this.badge.linkUrl &&
-        this.badge.linkUrl.trim() !== '' &&
-        !this.isSaving
-      );
-    },
     helpText() {
       const placeholders = ['project_path', 'project_id', 'default_branch', 'commit_sha']
         .map(placeholder => `<code>%{${placeholder}}</code>`)
@@ -93,11 +88,18 @@ export default {
         });
       },
     },
-    submitButtonLabel() {
-      if (this.isEditing) {
-        return s__('Badges|Save changes');
-      }
-      return s__('Badges|Add badge');
+    badgeImageUrlExample() {
+      const exampleUrl =
+        'https://example.gitlab.com/%{project_path}/badges/%{default_branch}/badge.svg';
+      return sprintf(s__('Badges|e.g. %{exampleUrl}'), {
+        exampleUrl,
+      });
+    },
+    badgeLinkUrlExample() {
+      const exampleUrl = 'https://example.gitlab.com/%{project_path}';
+      return sprintf(s__('Badges|e.g. %{exampleUrl}'), {
+        exampleUrl,
+      });
     },
   },
   methods: {
@@ -109,7 +111,9 @@ export default {
       this.stopEditing();
     },
     onSubmit() {
-      if (!this.canSubmit) {
+      const form = this.$el;
+      if (!form.checkValidity()) {
+        this.wasValidated = true;
         return Promise.resolve();
       }
 
@@ -117,6 +121,7 @@ export default {
         return this.saveBadge()
           .then(() => {
             createFlash(s__('Badges|The badge was saved.'), 'notice');
+            this.wasValidated = false;
           })
           .catch(error => {
             createFlash(
@@ -129,6 +134,7 @@ export default {
       return this.addBadge()
         .then(() => {
           createFlash(s__('Badges|A new badge was added.'), 'notice');
+          this.wasValidated = false;
         })
         .catch(error => {
           createFlash(
@@ -138,47 +144,58 @@ export default {
         });
     },
   },
-  badgeImageUrlPlaceholder:
-    'https://example.gitlab.com/%{project_path}/badges/%{default_branch}/<badge>.svg',
-  badgeLinkUrlPlaceholder: 'https://example.gitlab.com/%{project_path}',
 };
 </script>
 
 <template>
   <form
-    class="prepend-top-default append-bottom-default"
+    :class="{ 'was-validated': wasValidated }"
+    class="prepend-top-default append-bottom-default needs-validation"
+    novalidate
     @submit.prevent.stop="onSubmit"
   >
     <div class="form-group">
-      <label for="badge-link-url">{{ s__('Badges|Link') }}</label>
+      <label
+        for="badge-link-url"
+        class="label-bold"
+      >{{ s__('Badges|Link') }}</label>
+      <p v-html="helpText"></p>
       <input
         id="badge-link-url"
         v-model="linkUrl"
-        :placeholder="$options.badgeLinkUrlPlaceholder"
-        type="text"
+        type="URL"
         class="form-control"
+        required
         @input="debouncedPreview"
       />
-      <span
-        class="form-text text-muted"
-        v-html="helpText"
-      ></span>
+      <div class="invalid-feedback">
+        {{ s__('Badges|Please fill in a valid URL') }}
+      </div>
+      <span class="form-text text-muted">
+        {{ badgeLinkUrlExample }}
+      </span>
     </div>
 
     <div class="form-group">
-      <label for="badge-image-url">{{ s__('Badges|Badge image URL') }}</label>
+      <label
+        for="badge-image-url"
+        class="label-bold"
+      >{{ s__('Badges|Badge image URL') }}</label>
+      <p v-html="helpText"></p>
       <input
         id="badge-image-url"
         v-model="imageUrl"
-        :placeholder="$options.badgeImageUrlPlaceholder"
-        type="text"
+        type="URL"
         class="form-control"
+        required
         @input="debouncedPreview"
       />
-      <span
-        class="form-text text-muted"
-        v-html="helpText"
-      ></span>
+      <div class="invalid-feedback">
+        {{ s__('Badges|Please fill in a valid URL') }}
+      </div>
+      <span class="form-text text-muted">
+        {{ badgeImageUrlExample }}
+      </span>
     </div>
 
     <div class="form-group">
@@ -200,20 +217,32 @@ export default {
       >{{ s__('Badges|No image to preview') }}</p>
     </div>
 
-    <div class="row-content-block">
+    <div
+      v-if="isEditing"
+      class="row-content-block"
+    >
       <loading-button
-        :disabled="!canSubmit"
         :loading="isSaving"
-        :label="submitButtonLabel"
+        :label="s__('Badges|Save changes')"
         type="submit"
         container-class="btn btn-success"
       />
       <button
-        v-if="isEditing"
         class="btn btn-cancel"
         type="button"
         @click="onCancel"
       >{{ __('Cancel') }}</button>
     </div>
+    <div
+      v-else
+      class="form-group"
+    >
+      <loading-button
+        :loading="isSaving"
+        :label="s__('Badges|Add badge')"
+        type="submit"
+        container-class="btn btn-success"
+      />
+    </div>
   </form>
 </template>
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index 268968b63b3..d2ec0fbb2c0 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -28,7 +28,7 @@ export default {
       {{ s__('Badges|Your badges') }}
       <span
         v-show="!isLoading"
-        class="badge"
+        class="badge badge-pill"
       >{{ badges.length }}</span>
     </div>
     <loading-icon
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index 98aa00af0d7..712d81d0430 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -43,13 +43,13 @@ export default {
     <badge
       :image-url="badge.renderedImageUrl"
       :link-url="badge.renderedLinkUrl"
-      class="table-section section-30"
+      class="table-section section-40"
     />
-    <span class="table-section section-50 str-truncated">{{ badge.linkUrl }}</span>
-    <div class="table-section section-10">
-      <span class="badge">{{ badgeKindText }}</span>
+    <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span>
+    <div class="table-section section-15">
+      <span class="badge badge-pill">{{ badgeKindText }}</span>
     </div>
-    <div class="table-section section-10 table-button-footer">
+    <div class="table-section section-15 table-button-footer">
       <div
         v-if="canEditBadge"
         class="table-action-buttons">
diff --git a/app/assets/javascripts/pages/groups/edit/index.js b/app/assets/javascripts/pages/groups/edit/index.js
index 8737f537296..002b2279fcc 100644
--- a/app/assets/javascripts/pages/groups/edit/index.js
+++ b/app/assets/javascripts/pages/groups/edit/index.js
@@ -2,14 +2,13 @@ import groupAvatar from '~/group_avatar';
 import TransferDropdown from '~/groups/transfer_dropdown';
 import initConfirmDangerModal from '~/confirm_danger_modal';
 import initSettingsPanels from '~/settings_panels';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
+import { GROUP_BADGE } from '~/badges/constants';
 
 document.addEventListener('DOMContentLoaded', () => {
   groupAvatar();
   new TransferDropdown(); // eslint-disable-line no-new
   initConfirmDangerModal();
-});
-
-document.addEventListener('DOMContentLoaded', () => {
-  // Initialize expandable settings panels
   initSettingsPanels();
+  mountBadgeSettings(GROUP_BADGE);
 });
diff --git a/app/assets/javascripts/pages/projects/edit/index.js b/app/assets/javascripts/pages/projects/edit/index.js
index 628913483c6..f5b1cf85e68 100644
--- a/app/assets/javascripts/pages/projects/edit/index.js
+++ b/app/assets/javascripts/pages/projects/edit/index.js
@@ -1,6 +1,8 @@
+import { PROJECT_BADGE } from '~/badges/constants';
 import initSettingsPanels from '~/settings_panels';
 import setupProjectEdit from '~/project_edit';
 import initConfirmDangerModal from '~/confirm_danger_modal';
+import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import initProjectLoadingSpinner from '../shared/save_project_loader';
 import projectAvatar from '../shared/project_avatar';
 import initProjectPermissionsSettings from '../shared/permissions';
@@ -13,4 +15,5 @@ document.addEventListener('DOMContentLoaded', () => {
   projectAvatar();
   initProjectPermissionsSettings();
   initConfirmDangerModal();
+  mountBadgeSettings(PROJECT_BADGE);
 });
diff --git a/app/assets/javascripts/pages/projects/settings/badges/index/index.js b/app/assets/javascripts/pages/projects/settings/badges/index/index.js
deleted file mode 100644
index 30469550866..00000000000
--- a/app/assets/javascripts/pages/projects/settings/badges/index/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Vue from 'vue';
-import Translate from '~/vue_shared/translate';
-import { PROJECT_BADGE } from '~/badges/constants';
-import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
-
-Vue.use(Translate);
-
-document.addEventListener('DOMContentLoaded', () => {
-  mountBadgeSettings(PROJECT_BADGE);
-});
diff --git a/app/controllers/groups/settings/badges_controller.rb b/app/controllers/groups/settings/badges_controller.rb
deleted file mode 100644
index ccbd0a3bc02..00000000000
--- a/app/controllers/groups/settings/badges_controller.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-module Groups
-  module Settings
-    class BadgesController < Groups::ApplicationController
-      include API::Helpers::RelatedResourcesHelpers
-
-      before_action :authorize_admin_group!
-
-      def index
-        @badge_api_endpoint = expose_url(api_v4_groups_badges_path(id: @group.id))
-      end
-    end
-  end
-end
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index 83169636ccf..e57b9ff23a7 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -1,4 +1,5 @@
 class GroupsController < Groups::ApplicationController
+  include API::Helpers::RelatedResourcesHelpers
   include IssuesAction
   include MergeRequestsAction
   include ParamsBackwardCompatibility
@@ -77,6 +78,7 @@ class GroupsController < Groups::ApplicationController
   end
 
   def edit
+    @badge_api_endpoint = expose_url(api_v4_groups_badges_path(id: @group.id))
   end
 
   def projects
diff --git a/app/controllers/projects/settings/badges_controller.rb b/app/controllers/projects/settings/badges_controller.rb
deleted file mode 100644
index 7887bee49c5..00000000000
--- a/app/controllers/projects/settings/badges_controller.rb
+++ /dev/null
@@ -1,13 +0,0 @@
-module Projects
-  module Settings
-    class BadgesController < Projects::ApplicationController
-      include API::Helpers::RelatedResourcesHelpers
-
-      before_action :authorize_admin_project!
-
-      def index
-        @badge_api_endpoint = expose_url(api_v4_projects_badges_path(id: @project.id))
-      end
-    end
-  end
-end
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index e9ae8c13142..0eaf9f94e37 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -1,4 +1,5 @@
 class ProjectsController < Projects::ApplicationController
+  include API::Helpers::RelatedResourcesHelpers
   include IssuableCollections
   include ExtractsPath
   include PreviewMarkdown
@@ -32,6 +33,7 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def edit
+    @badge_api_endpoint = expose_url(api_v4_projects_badges_path(id: @project.id))
     render 'edit'
   end
 
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index cae2df4699e..fc17dd2d310 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -25,6 +25,18 @@
   .settings-content
     = render 'groups/settings/permissions'
 
+%section.settings.no-animate{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = s_('GroupSettings|Badges')
+    %button.btn.js-settings-toggle{ type: 'button' }
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = s_('GroupSettings|Customize your group badges.')
+      = link_to s_('GroupSettings|Learn more about badges.'), help_page_path('user/project/badges')
+  .settings-content
+    = render 'shared/badges/badge_settings'
+
 %section.settings.gs-advanced.no-animate#js-advanced-settings{ class: ('expanded' if expanded) }
   .settings-header
     %h4
diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml
index d471dd84550..4158bb69452 100644
--- a/app/views/layouts/nav/sidebar/_group.html.haml
+++ b/app/views/layouts/nav/sidebar/_group.html.haml
@@ -122,12 +122,6 @@
                 %span
                   = _('General')
 
-            = nav_link(controller: :badges) do
-              = link_to group_settings_badges_path(@group), title: _('Project Badges') do
-                %span
-                  = _('Project Badges')
-
-
             = nav_link(path: 'groups#projects') do
               = link_to projects_group_path(@group), title: _('Projects') do
                 %span
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 34f47806205..30e0e9fca27 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -313,11 +313,6 @@
                 %span
                   = _('Members')
             - if can_edit
-              = nav_link(controller: :badges) do
-                = link_to project_settings_badges_path(@project), title: _('Badges') do
-                  %span
-                    = _('Badges')
-            - if can_edit
               = nav_link(controller: [:integrations, :services, :hooks, :hook_logs]) do
                 = link_to project_settings_integrations_path(@project), title: _('Integrations') do
                   %span
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index e37a444c1c9..fb837b27207 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -102,6 +102,18 @@
 
   = render_if_exists 'projects/service_desk_settings'
 
+  %section.settings.no-animate{ class: ('expanded' if expanded) }
+    .settings-header
+      %h4
+        = s_('ProjectSettings|Badges')
+      %button.btn.js-settings-toggle{ type: 'button' }
+        = expanded ? 'Collapse' : 'Expand'
+      %p
+        = s_('ProjectSettings|Customize your project badges.')
+        = link_to s_('ProjectSettings|Learn more about badges.'), help_page_path('user/project/badges')
+    .settings-content
+      = render 'shared/badges/badge_settings'
+
   = render 'export', project: @project
 
   %section.qa-advanced-settings.settings.advanced-settings.no-animate#js-project-advanced-settings{ class: ('expanded' if expanded) }