Merge branch...

Merge branch '222327-ux-pajamas-implementation-move-buttons-in-settings-general-to-the-right' into 'master'

Move buttons in Settings > General to the right

Closes #222327

See merge request gitlab-org/gitlab!38651

app/assets/javascripts/badges/components/badge_form.vue

@@ -184,7 +184,7 @@ export default {
         @input="debouncedPreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
-      <span class="form-text text-muted"> {{ badgeLinkUrlExample }} </span>
+      <span class="form-text text-muted">{{ badgeLinkUrlExample }}</span>
     </div>
 
     <div class="form-group">
@@ -199,7 +199,7 @@ export default {
         @input="debouncedPreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
-      <span class="form-text text-muted"> {{ badgeImageUrlExample }} </span>
+      <span class="form-text text-muted">{{ badgeImageUrlExample }}</span>
     </div>
 
     <div class="form-group">
@@ -210,22 +210,26 @@ export default {
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
-      <p v-show="isRendering"><gl-loading-icon :inline="true" /></p>
+      <p v-show="isRendering">
+        <gl-loading-icon :inline="true" />
+      </p>
       <p v-show="!renderedBadge && !isRendering" class="disabled-content">
         {{ s__('Badges|No image to preview') }}
       </p>
     </div>
 
-    <div v-if="isEditing" class="row-content-block">
+    <div v-if="isEditing" class="row-content-block gl-display-flex gl-justify-content-end">
+      <button class="btn btn-cancel gl-mr-4" type="button" @click="onCancel">
+        {{ __('Cancel') }}
+      </button>
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Save changes')"
         type="submit"
         container-class="btn btn-success"
       />
-      <button class="btn btn-cancel" type="button" @click="onCancel">{{ __('Cancel') }}</button>
     </div>
-    <div v-else class="form-group">
+    <div v-else class="gl-display-flex gl-justify-content-end form-group">
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Add badge')"

app/views/admin/application_settings/_account_and_limit.html.haml

@@ -60,5 +60,5 @@
 
     = render_if_exists 'admin/application_settings/updating_name_disabled_for_users', form: f
     = render_if_exists 'admin/application_settings/availability_on_namespace_setting', form: f
-
-  = f.submit _('Save changes'), class: 'btn btn-success qa-save-changes-button'
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _('Save changes'), class: 'btn btn-success qa-save-changes-button'

app/views/admin/application_settings/_diff_limits.html.haml

@@ -12,5 +12,5 @@
         = link_to icon('question-circle'),
           help_page_path('user/admin_area/diff_limits',
           anchor: 'maximum-diff-patch-size')
-
-  = f.submit _('Save changes'), class: 'btn btn-success'
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _('Save changes'), class: 'btn btn-success'

app/views/admin/application_settings/_external_authorization_service_form.html.haml

@@ -47,5 +47,5 @@
         .form-group
           = f.label :external_authorization_service_default_label, _('Default classification label'), class: 'label-bold'
           = f.text_field :external_authorization_service_default_label, class: 'form-control'
-
-      = f.submit 'Save changes', class: "btn btn-success"
+      .gl-display-flex.gl-justify-content-end
+        = f.submit 'Save changes', class: "btn btn-success"

app/views/admin/application_settings/_signin.html.haml

@@ -57,5 +57,5 @@
       = f.label :sign_in_text, class: 'label-bold'
       = f.text_area :sign_in_text, class: 'form-control', rows: 4
       .form-text.text-muted Markdown enabled
-
-  = f.submit 'Save changes', class: "btn btn-success"
+  .gl-display-flex.gl-justify-content-end
+    = f.submit 'Save changes', class: "btn btn-success"

app/views/admin/application_settings/_signup.html.haml

@@ -67,5 +67,5 @@
       = f.label :after_sign_up_text, class: 'label-bold'
       = f.text_area :after_sign_up_text, class: 'form-control', rows: 4
       .form-text.text-muted Markdown enabled
-
-  = f.submit 'Save changes', class: "btn btn-success"
+  .gl-display-flex.gl-justify-content-end
+    = f.submit 'Save changes', class: "btn btn-success"

app/views/admin/application_settings/_terminal.html.haml

@@ -8,5 +8,5 @@
       .form-text.text-muted
         Maximum time for web terminal websocket connection (in seconds).
         0 for unlimited.
-
-  = f.submit 'Save changes', class: "btn btn-success"
+  .gl-display-flex.gl-justify-content-end
+    = f.submit 'Save changes', class: "btn btn-success"

app/views/admin/application_settings/_terms.html.haml

@@ -15,5 +15,5 @@
       = f.text_area :terms, class: 'form-control', rows: 8
       .form-text.text-muted
         = _("Markdown enabled")
-
-  = f.submit _("Save changes"), class: "btn btn-success"
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _("Save changes"), class: "btn btn-success"

app/views/admin/application_settings/_visibility_and_access.html.haml

@@ -66,5 +66,5 @@
       .form-group
         = f.label field_name, "#{type.upcase} SSH keys", class: 'label-bold'
         = f.select field_name, key_restriction_options_for_select(type), {}, class: 'form-control'
-
-  = f.submit _('Save changes'), class: "btn btn-success"
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _('Save changes'), class: "btn btn-success"

app/views/admin/application_settings/general.html.haml

@@ -101,8 +101,8 @@
               = s_('IDE|Live Preview')
             %span.form-text.text-muted
               = s_('IDE|Allow live previews of JavaScript projects in the Web IDE using CodeSandbox Live Preview.')
-
-      = f.submit _('Save changes'), class: "btn btn-success"
+      .gl-display-flex.gl-justify-content-end
+        = f.submit _('Save changes'), class: "btn btn-success"
 
 - if Feature.enabled?(:maintenance_mode)
   %section.settings.no-animate#js-maintenance-mode-toggle{ class: ('expanded' if expanded_by_default?) }

app/views/groups/settings/_advanced.html.haml

@@ -22,8 +22,8 @@
           pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS,
           title: s_('GroupSettings|Please choose a group URL with no special characters.'),
           "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
-
-    = f.submit s_('GroupSettings|Change group URL'), class: 'btn btn-warning'
+    .gl-display-flex.gl-justify-content-end
+      = f.submit s_('GroupSettings|Change group URL'), class: 'btn btn-warning'
 
 .sub-section
   %h4.warning-title= s_('GroupSettings|Transfer group')
@@ -39,7 +39,8 @@
       %li= s_('GroupSettings|You can only transfer the group to a group you manage.')
       %li= s_('GroupSettings|You will need to update your local repositories to point to the new location.')
       %li= s_("GroupSettings|If the parent group's visibility is lower than the group current visibility, visibility levels for subgroups and projects will be changed to match the new parent group's visibility.")
-    = f.submit s_('GroupSettings|Transfer group'), class: 'btn btn-warning'
+    .gl-display-flex.gl-justify-content-end
+      = f.submit s_('GroupSettings|Transfer group'), class: 'btn btn-warning'
 
 = render 'groups/settings/remove', group: @group
 = render_if_exists 'groups/settings/restore', group: @group

app/views/groups/settings/_export.html.haml

@@ -24,5 +24,6 @@
     = link_to _('Download export'), download_export_group_path(group),
         rel: 'nofollow', method: :get, class: 'btn btn-default', data: { qa_selector: 'download_export_link' }
   - else
-    = link_to _('Export group'), export_group_path(group),
-        method: :post, class: 'btn btn-default', data: { qa_selector: 'export_group_link' }
+    .gl-display-flex.gl-justify-content-end
+      = link_to _('Export group'), export_group_path(group),
+          method: :post, class: 'btn btn-default', data: { qa_selector: 'export_group_link' }

app/views/groups/settings/_general.html.haml

@@ -29,5 +29,5 @@
       = link_to _('Remove avatar'), group_avatar_path(@group.to_param), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
 
   = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
-
-  = f.submit _('Save changes'), class: 'btn btn-success mt-4 js-dirty-submit', data: { qa_selector: 'save_name_visibility_settings_button' }
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _('Save changes'), class: 'btn btn-success mt-4 js-dirty-submit', data: { qa_selector: 'save_name_visibility_settings_button' }

app/views/groups/settings/_permanent_deletion.html.haml

@@ -5,5 +5,5 @@
       = _('Removing this group also removes all child projects, including archived projects, and their resources.')
       %br
       %strong= _('Removed group can not be restored!')
-
-    = button_to _('Remove group'), '#', class: 'btn btn-remove js-confirm-danger', data: { 'confirm-danger-message' => remove_group_message(group) }
+    .gl-display-flex.gl-justify-content-end
+      = button_to _('Remove group'), '#', class: 'btn btn-remove js-confirm-danger', data: { 'confirm-danger-message' => remove_group_message(group) }

app/views/groups/settings/_permissions.html.haml

@@ -41,5 +41,5 @@
     = render 'groups/settings/two_factor_auth', f: f
     = render_if_exists 'groups/personal_access_token_expiration_policy', f: f, group: @group
     = render_if_exists 'groups/member_lock_setting', f: f, group: @group
-
-  = f.submit _('Save changes'), class: 'btn btn-success gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _('Save changes'), class: 'btn btn-success gl-mt-3 js-dirty-submit', data: { qa_selector: 'save_permissions_changes_button' }

app/views/projects/_export.html.haml

@@ -26,5 +26,6 @@
     = link_to _('Generate new export'), generate_new_export_project_path(project),
             method: :post, class: "btn btn-default"
   - else
-    = link_to _('Export project'), export_project_path(project),
+    .gl-display-flex.gl-justify-content-end
+      = link_to _('Export project'), export_project_path(project),
             method: :post, class: "btn btn-default", data: { qa_selector: 'export_project_link' }

app/views/projects/_visibility_modal.html.haml

@@ -23,8 +23,7 @@
           = ("To confirm, type %{phrase_code}").html_safe % { phrase_code: '<code class="js-confirm-danger-match">%{phrase_name}</code>'.html_safe % { phrase_name: @project.full_path } }
         .form-group
           = text_field_tag 'confirm_path_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
-        .form-actions.clearfix
-          .float-right
-            %button.btn.btn-default{ type: "button", "data-dismiss": "modal" }
-              = _('Cancel')
-            = submit_tag _('Reduce project visibility'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true
+        .form-actions.gl-display-flex.gl-justify-content-end
+          %button.btn.btn-default.gl-mr-4{ type: "button", "data-dismiss": "modal" }
+            = _('Cancel')
+          = submit_tag _('Reduce project visibility'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button", disabled: true

app/views/projects/edit.html.haml

@@ -21,9 +21,10 @@
       %input{ name: 'update_section', type: 'hidden', value: 'js-shared-permissions' }
       %template.js-project-permissions-form-data{ type: "application/json" }= project_permissions_panel_data_json(@project)
       .js-project-permissions-form
-      - if show_visibility_confirm_modal?(@project)
-        = render "visibility_modal"
-      = f.submit _('Save changes'), class: "btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      .gl-display-flex.gl-justify-content-end
+        - if show_visibility_confirm_modal?(@project)
+          = render "visibility_modal"
+        = f.submit _('Save changes'), class: "btn btn-success #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
 
 %section.qa-merge-request-settings.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)] }
   .settings-header
@@ -37,7 +38,8 @@
     = form_for @project, remote: true, html: { multipart: true, class: "merge-request-settings-form js-mr-settings-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-settings' }
       = render 'projects/merge_request_settings', form: f
-      = f.submit _('Save changes'), class: "btn btn-success qa-save-merge-request-changes rspec-save-merge-request-changes"
+      .gl-display-flex.gl-justify-content-end
+        = f.submit _('Save changes'), class: "btn btn-succes qa-save-merge-request-changes rspec-save-merge-request-changes"
 
 = render_if_exists 'projects/merge_request_approvals_settings', expanded: expanded
 
@@ -68,8 +70,9 @@
     .sub-section
       %h4= _('Housekeeping')
       %p= _('Runs a number of housekeeping tasks within the current repository, such as compressing file revisions and removing unreachable objects.')
-      = link_to _('Run housekeeping'), housekeeping_project_path(@project),
-        method: :post, class: "btn btn-default"
+      .gl-display-flex.gl-justify-content-end
+        = link_to _('Run housekeeping'), housekeeping_project_path(@project),
+          method: :post, class: "btn btn-default"
 
     = render 'export', project: @project
 
@@ -91,7 +94,8 @@
             %li= _('You will need to update your local repositories to point to the new location.')
             - if @project.deployment_platform.present?
               %li= _('Your deployment services will be broken, you will need to manually fix the services after renaming.')
-        = f.submit _('Change path'), class: "btn btn-warning qa-change-path-button"
+        .gl-display-flex.gl-justify-content-end
+          = f.submit _('Change path'), class: "btn btn-warning qa-change-path-button"
 
     - if can?(current_user, :change_namespace, @project)
       .sub-section
@@ -107,7 +111,8 @@
               %li= _('You can only transfer the project to namespaces you manage.')
               %li= _('You will need to update your local repositories to point to the new location.')
               %li= _('Project visibility level will be changed to match namespace rules when transferring to a group.')
-          = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger qa-transfer-button", data: { "confirm-danger-message" => transfer_project_message(@project) }
+          .gl-display-flex.gl-justify-content-end
+            = f.submit 'Transfer project', class: "btn btn-remove js-confirm-danger qa-transfer-button", data: { "confirm-danger-message" => transfer_project_message(@project) }
 
     - if @project.forked? && can?(current_user, :remove_fork_project, @project)
       .sub-section

app/views/projects/settings/_archive.html.haml

@@ -13,6 +13,7 @@
         method: :post, class: "btn btn-success"
   - else
     %p= _("Archiving the project will make it entirely read only. It is hidden from the dashboard and doesn't show up in searches. %{strong_start}The repository cannot be committed to, and no issues, comments, or other entities can be created.%{strong_end}").html_safe % { strong_start: '<strong>'.html_safe, strong_end: '</strong>'.html_safe }
-    = link_to _('Archive project'), archive_project_path(@project),
+    .gl-display-flex.gl-justify-content-end
+      = link_to _('Archive project'), archive_project_path(@project),
         data: { confirm: _("Are you sure that you want to archive this project?"), qa_selector: 'archive_project_link' },
         method: :post, class: "btn btn-warning"

app/views/projects/settings/_general.html.haml

@@ -40,5 +40,5 @@
       %hr
       = link_to _('Remove avatar'), project_avatar_path(@project), data: { confirm: _('Avatar will be removed. Are you sure?')}, method: :delete, class: 'btn btn-link'
 
-
-  = f.submit _('Save changes'), class: "btn btn-success mt-4 qa-save-naming-topics-avatar-button"
+  .gl-display-flex.gl-justify-content-end
+    = f.submit _('Save changes'), class: "btn btn-success mt-4 qa-save-naming-topics-avatar-button"

app/views/shared/_confirm_modal.html.haml

@@ -17,5 +17,5 @@
 
         .form-group
           = text_field_tag 'confirm_name_input', '', class: 'form-control js-confirm-danger-input qa-confirm-input'
-        .form-actions
+        .form-actions.gl-display-flex.gl-justify-content-end
           = submit_tag _('Confirm'), class: "btn btn-danger js-confirm-danger-submit qa-confirm-button"

ee/app/views/projects/_merge_request_approvals_settings.html.haml

@@ -13,4 +13,5 @@
     = form_for @project, remote: true, html: { class: "merge-request-approval-settings-form js-mr-approvals-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-approval-settings' }
       = render 'projects/merge_request_approvals_settings_form', form: f, project: @project
-      = f.submit _("Save changes"), class: "btn btn-success qa-save-merge-request-approval-settings-button"
+      .gl-display-flex.gl-justify-content-end
+        = f.submit _("Save changes"), class: "btn btn-success qa-save-merge-request-approval-settings-button"

ee/app/views/projects/_remove.html.haml

@@ -20,7 +20,8 @@
       %p= permanent_delete_message(project)
       %p
         %strong= _('Are you ABSOLUTELY SURE you wish to delete this project?')
-      #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: confirm_phrase } }
+      .gl-display-flex.gl-justify-content-end
+        #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: confirm_phrase } }
 - else
   = render 'projects/settings/restore', project: project
 

ee/app/views/projects/settings/_default_issue_template.html.haml

@@ -18,4 +18,5 @@
             .text-secondary
               - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/markdown') }
               = _('Description parsed with %{link_start}GitLab Flavored Markdown%{link_end}').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
-        = f.submit _('Save changes'), class: "btn btn-success"
+        .gl-display-flex.gl-justify-content-end
+          = f.submit _('Save changes'), class: "btn btn-success"

ee/app/views/shared/promotions/_promotion_link_project.html.haml

@@ -20,6 +20,7 @@
   - if License.current&.expired?
     = link_to (!short_form ? s_('Promotions|Buy GitLab Enterprise Edition') : s_('Promotions|Buy EE')), ::EE::SUBSCRIPTIONS_PLANS_URL, class: 'btn btn-primary'
   - else
-    = link_to s_('Promotions|Start GitLab Ultimate trial'), new_trial_url, class: 'btn btn-primary'
+    .gl-display-flex.gl-justify-content-end
+      = link_to s_('Promotions|Start GitLab Ultimate trial'), new_trial_url, class: 'btn btn-primary'
 - else
   %p= s_('Promotions|Contact your Administrator to upgrade your license.')

spec/frontend/badges/components/badge_form_spec.js

@@ -182,11 +182,11 @@ describe('BadgeForm component', () => {
       const buttons = vm.$el.querySelectorAll('.row-content-block button');
 
       expect(buttons.length).toBe(2);
-      const buttonSaveElement = buttons[0];
+      const buttonSaveElement = buttons[1];
 
       expect(buttonSaveElement).toBeVisible();
       expect(buttonSaveElement).toHaveText('Save changes');
-      const buttonCancelElement = buttons[1];
+      const buttonCancelElement = buttons[0];
 
       expect(buttonCancelElement).toBeVisible();
       expect(buttonCancelElement).toHaveText('Cancel');