diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/badges/components/badge_form.vue | 105 | ||||
-rw-r--r-- | app/assets/javascripts/badges/components/badge_list.vue | 2 | ||||
-rw-r--r-- | app/assets/javascripts/badges/components/badge_list_row.vue | 10 | ||||
-rw-r--r-- | app/assets/javascripts/pages/groups/edit/index.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/pages/projects/edit/index.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/pages/projects/settings/badges/index/index.js | 10 | ||||
-rw-r--r-- | app/controllers/groups/settings/badges_controller.rb | 13 | ||||
-rw-r--r-- | app/controllers/groups_controller.rb | 2 | ||||
-rw-r--r-- | app/controllers/projects/settings/badges_controller.rb | 13 | ||||
-rw-r--r-- | app/controllers/projects_controller.rb | 2 | ||||
-rw-r--r-- | app/views/groups/edit.html.haml | 12 | ||||
-rw-r--r-- | app/views/layouts/nav/sidebar/_group.html.haml | 6 | ||||
-rw-r--r-- | app/views/layouts/nav/sidebar/_project.html.haml | 5 | ||||
-rw-r--r-- | app/views/projects/edit.html.haml | 12 |
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) } |