Merge branch...

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

Move Buttons in Settings > Operations to the right

Closes #222436

See merge request gitlab-org/gitlab!38652

app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue

@@ -180,9 +180,11 @@ export default {
           />
         </span>
       </div>
-      <gl-button v-gl-modal.authKeyModal class="mt-2" :disabled="isDisabled">{{
+      <span class="gl-display-flex gl-justify-content-end">
+        <gl-button v-gl-modal.authKeyModal class="gl-mt-2" :disabled="isDisabled">{{
           $options.RESET_KEY
         }}</gl-button>
+      </span>
       <gl-modal
         modal-id="authKeyModal"
         :title="$options.RESET_KEY"

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -512,9 +512,14 @@ export default {
               />
             </template>
           </gl-form-input-group>
-          <gl-button v-gl-modal.authKeyModal :disabled="!selectedService.active" class="gl-mt-3">{{
-            $options.i18n.resetKey
-          }}</gl-button>
+          <div class="gl-display-flex gl-justify-content-end">
+            <gl-button
+              v-gl-modal.authKeyModal
+              :disabled="!selectedService.active"
+              class="gl-mt-3"
+              >{{ $options.i18n.resetKey }}</gl-button
+            >
+          </div>
           <gl-modal
             modal-id="authKeyModal"
             :title="$options.i18n.resetKey"
@@ -541,11 +546,16 @@ export default {
             max-rows="10"
           />
         </gl-form-group>
+        <div class="gl-display-flex gl-justify-content-end">
           <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
             $options.i18n.testAlertInfo
           }}</gl-button>
+        </div>
       </template>
       <div class="footer-block row-content-block gl-display-flex gl-justify-content-space-between">
+        <gl-button category="primary" :disabled="!canSaveConfig" @click="onReset">
+          {{ __('Cancel') }}
+        </gl-button>
         <gl-button
           variant="success"
           category="primary"
@@ -554,9 +564,6 @@ export default {
         >
           {{ __('Save changes') }}
         </gl-button>
-        <gl-button variant="default" category="primary" :disabled="!canSaveConfig" @click="onReset">
-          {{ __('Cancel') }}
-        </gl-button>
       </div>
     </gl-form>
   </div>

app/assets/javascripts/error_tracking_settings/components/app.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlDeprecatedButton as GlButton } from '@gitlab/ui';
 import ProjectDropdown from './project_dropdown.vue';
 import ErrorTrackingForm from './error_tracking_form.vue';
 
 export default {
-  components: { ProjectDropdown, ErrorTrackingForm, GlDeprecatedButton },
+  components: { ProjectDropdown, ErrorTrackingForm, GlButton },
   props: {
     initialApiHost: {
       type: String,
@@ -92,13 +92,15 @@ export default {
         @select-project="updateSelectedProject"
       />
     </div>
-    <gl-deprecated-button
+    <div class="gl-display-flex gl-justify-content-end">
+      <gl-button
         :disabled="settingsLoading"
         class="js-error-tracking-button"
         variant="success"
         @click="handleSubmit"
       >
         {{ __('Save changes') }}
-    </gl-deprecated-button>
+      </gl-button>
+    </div>
   </div>
 </template>

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

@@ -93,9 +93,11 @@ export default {
             </a>
           </p>
         </gl-form-group>
+        <div class="gl-display-flex gl-justify-content-end">
           <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
             {{ __('Save Changes') }}
           </gl-button>
+        </div>
       </form>
     </div>
   </section>

app/assets/javascripts/incidents_settings/components/alerts_form.vue

@@ -123,7 +123,7 @@ export default {
           <span>{{ $options.i18n.sendEmail.label }}</span>
         </gl-form-checkbox>
       </gl-form-group>
-
+      <div class="gl-display-flex gl-justify-content-end">
         <gl-button
           ref="submitBtn"
           data-qa-selector="save_changes_button"
@@ -134,6 +134,7 @@ export default {
         >
           {{ $options.i18n.saveBtnLabel }}
         </gl-button>
+      </div>
     </form>
   </div>
 </template>

app/assets/javascripts/incidents_settings/components/pagerduty_form.vue

@@ -149,6 +149,7 @@ export default {
             </template>
           </gl-sprintf>
         </div>
+        <div class="gl-display-flex gl-justify-content-end">
           <gl-button
             v-gl-modal.resetWebhookModal
             class="gl-mt-3"
@@ -158,6 +159,7 @@ export default {
           >
             {{ $options.i18n.webhookUrl.resetWebhookUrl }}
           </gl-button>
+        </div>
         <gl-modal
           modal-id="resetWebhookModal"
           :title="$options.i18n.webhookUrl.resetWebhookUrl"
@@ -168,7 +170,7 @@ export default {
           {{ $options.i18n.webhookUrl.restKeyInfo }}
         </gl-modal>
       </gl-form-group>
-
+      <div class="gl-display-flex gl-justify-content-end">
         <gl-button
           ref="submitBtn"
           :disabled="isSaveDisabled"
@@ -178,6 +180,7 @@ export default {
         >
           {{ $options.i18n.saveBtnLabel }}
         </gl-button>
+      </div>
     </form>
   </div>
 </template>

app/assets/javascripts/operation_settings/components/metrics_settings.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDeprecatedButton, GlLink } from '@gitlab/ui';
+import { GlDeprecatedButton as GlButton, GlLink } from '@gitlab/ui';
 import ExternalDashboard from './form_group/external_dashboard.vue';
 import DashboardTimezone from './form_group/dashboard_timezone.vue';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlLink,
     ExternalDashboard,
     DashboardTimezone,
@@ -34,7 +34,7 @@ export default {
       <h3 class="js-section-header h4">
         {{ s__('MetricsSettings|Metrics dashboard') }}
       </h3>
-      <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
+      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
         {{ s__('MetricsSettings|Manage Metrics Dashboard settings.') }}
         <gl-link :href="helpPage">{{ __('Learn more') }}</gl-link>
@@ -44,9 +44,11 @@ export default {
       <form>
         <dashboard-timezone />
         <external-dashboard />
-        <gl-deprecated-button variant="success" @click="saveChanges">
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button variant="success" @click="saveChanges">
             {{ __('Save Changes') }}
-        </gl-deprecated-button>
+          </gl-button>
+        </div>
       </form>
     </div>
   </section>

ee/app/assets/javascripts/status_page_settings/components/settings_form.vue

@@ -2,7 +2,7 @@
 import { mapActions, mapState } from 'vuex';
 import { mapComputed } from '~/vuex_shared/bindings';
 import {
-  GlDeprecatedButton,
+  GlDeprecatedButton as GlButton,
   GlSprintf,
   GlLink,
   GlIcon,
@@ -14,7 +14,7 @@ import { __, s__ } from '~/locale';
 
 export default {
   components: {
-    GlDeprecatedButton,
+    GlButton,
     GlSprintf,
     GlLink,
     GlFormGroup,
@@ -78,9 +78,9 @@ export default {
       <h3 ref="sectionHeader" class="h4">
         {{ $options.i18n.headerText }}
       </h3>
-      <gl-deprecated-button ref="toggleBtn" class="js-settings-toggle">{{
+      <gl-button ref="toggleBtn" class="js-settings-toggle">{{
         $options.i18n.expandBtnLabel
-      }}</gl-deprecated-button>
+      }}</gl-button>
       <p ref="sectionSubHeader">
         {{ $options.i18n.subHeaderText }}
       </p>
@@ -180,8 +180,8 @@ export default {
         >
           <gl-form-input id="status-page-aws-secret-access-key " v-model="awsSecretKey" />
         </gl-form-group>
-
-        <gl-deprecated-button
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button
             ref="submitBtn"
             :disabled="loading"
             variant="success"
@@ -189,7 +189,8 @@ export default {
             class="js-no-auto-disable"
           >
             {{ $options.i18n.saveBtnLabel }}
-        </gl-deprecated-button>
+          </gl-button>
+        </div>
       </form>
     </div>
   </section>

ee/app/views/projects/settings/operations/_tracing.html.haml

@@ -32,5 +32,5 @@
             - link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url }
             - link_end_tag = "#{sprite_icon('external-link', size: 16, css_class: 'ml-1 vertical-align-middle')}</a>".html_safe
             = _("For more information, please review %{link_start_tag}Jaeger's configuration doc%{link_end_tag}").html_safe % { link_start_tag: link_start_tag, link_end_tag: link_end_tag }
-
+      .gl-display-flex.gl-justify-content-end
         = f.submit _('Save changes'), class: 'btn btn-success'

ee/spec/frontend/status_page_settings/__snapshots__/settings_form_spec.js.snap

@@ -16,13 +16,13 @@ exports[`Status Page settings form default state should match the default snapsh
     
     </h3>
      
-    <gl-deprecated-button-stub
+    <gl-button-stub
       class="js-settings-toggle"
       size="md"
       variant="secondary"
     >
       Expand
-    </gl-deprecated-button-stub>
+    </gl-button-stub>
      
     <p>
       
@@ -142,7 +142,10 @@ exports[`Status Page settings form default state should match the default snapsh
         />
       </gl-form-group-stub>
        
-      <gl-deprecated-button-stub
+      <div
+        class="gl-display-flex gl-justify-content-end"
+      >
+        <gl-button-stub
           class="js-no-auto-disable"
           size="md"
           type="submit"
@@ -151,7 +154,8 @@ exports[`Status Page settings form default state should match the default snapsh
           
           Save changes
         
-      </gl-deprecated-button-stub>
+        </gl-button-stub>
+      </div>
     </form>
   </div>
 </section>

spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap

@@ -26,7 +26,9 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
     </gl-form-group-stub>
     <gl-form-group-stub label=\\"Authorization key\\" label-for=\\"authorization-key\\" label-class=\\"label-bold\\">
       <gl-form-input-group-stub value=\\"abcedfg123\\" predefinedoptions=\\"[object Object]\\" id=\\"authorization-key\\" readonly=\\"\\" class=\\"gl-mb-2\\"></gl-form-input-group-stub>
+      <div class=\\"gl-display-flex gl-justify-content-end\\">
         <gl-button-stub category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\" class=\\"gl-mt-3\\" role=\\"button\\" tabindex=\\"0\\">Reset key</gl-button-stub>
+      </div>
       <gl-modal-stub modalid=\\"authKeyModal\\" titletag=\\"h4\\" modalclass=\\"\\" size=\\"md\\" title=\\"Reset key\\" ok-title=\\"Reset key\\" ok-variant=\\"danger\\">
         Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.
       </gl-modal-stub>
@@ -34,14 +36,16 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
     <gl-form-group-stub label=\\"Alert test payload\\" label-for=\\"alert-json\\" label-class=\\"label-bold\\">
       <gl-form-textarea-stub noresize=\\"true\\" id=\\"alert-json\\" disabled=\\"true\\" state=\\"true\\" placeholder=\\"Enter test alert JSON....\\" rows=\\"6\\" max-rows=\\"10\\"></gl-form-textarea-stub>
     </gl-form-group-stub>
+    <div class=\\"gl-display-flex gl-justify-content-end\\">
       <gl-button-stub category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">Test alert payload</gl-button-stub>
+    </div>
     <div class=\\"footer-block row-content-block gl-display-flex gl-justify-content-space-between\\">
-      <gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">
-        Save changes
-      </gl-button-stub>
       <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">
         Cancel
       </gl-button-stub>
+      <gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">
+        Save changes
+      </gl-button-stub>
     </div>
   </gl-form-stub>
 </div>"

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -92,6 +92,9 @@ exports[`grafana integration component default state to match the default snapsh
         </p>
       </gl-form-group-stub>
        
+      <div
+        class="gl-display-flex gl-justify-content-end"
+      >
         <gl-button-stub
           category="primary"
           icon=""
@@ -102,6 +105,7 @@ exports[`grafana integration component default state to match the default snapsh
           Save Changes
         
         </gl-button-stub>
+      </div>
     </form>
   </div>
 </section>

spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap

@@ -81,6 +81,9 @@ exports[`Alert integration settings form default state should match the default
       </gl-form-checkbox-stub>
     </gl-form-group-stub>
      
+    <div
+      class="gl-display-flex gl-justify-content-end"
+    >
       <gl-button-stub
         category="tertiary"
         class="js-no-auto-disable"
@@ -94,6 +97,7 @@ exports[`Alert integration settings form default state should match the default
         Save changes
       
       </gl-button-stub>
+    </div>
   </form>
 </div>
 `;

spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap

@@ -42,6 +42,9 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
         />
       </div>
        
+      <div
+        class="gl-display-flex gl-justify-content-end"
+      >
         <gl-button-stub
           category="tertiary"
           class="gl-mt-3"
@@ -56,6 +59,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
           Reset webhook URL
         
         </gl-button-stub>
+      </div>
        
       <gl-modal-stub
         modalclass=""
@@ -72,6 +76,9 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
       </gl-modal-stub>
     </gl-form-group-stub>
      
+    <div
+      class="gl-display-flex gl-justify-content-end"
+    >
       <gl-button-stub
         category="tertiary"
         class="js-no-auto-disable"
@@ -84,6 +91,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
         Save changes
       
       </gl-button-stub>
+    </div>
   </form>
 </div>
 `;