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">{{
-        $options.RESET_KEY
-      }}</gl-button>
+      <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>
-        <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
-          $options.i18n.testAlertInfo
-        }}</gl-button>
+        <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
-      :disabled="settingsLoading"
-      class="js-error-tracking-button"
-      variant="success"
-      @click="handleSubmit"
-    >
-      {{ __('Save changes') }}
-    </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-button>
+    </div>
   </div>
 </template>

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

@@ -93,9 +93,11 @@ export default {
             </a>
           </p>
         </gl-form-group>
-        <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
-          {{ __('Save Changes') }}
-        </gl-button>
+        <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,17 +123,18 @@ export default {
           <span>{{ $options.i18n.sendEmail.label }}</span>
         </gl-form-checkbox>
       </gl-form-group>
-
-      <gl-button
-        ref="submitBtn"
-        data-qa-selector="save_changes_button"
-        :disabled="loading"
-        variant="success"
-        type="submit"
-        class="js-no-auto-disable"
-      >
-        {{ $options.i18n.saveBtnLabel }}
-      </gl-button>
+      <div class="gl-display-flex gl-justify-content-end">
+        <gl-button
+          ref="submitBtn"
+          data-qa-selector="save_changes_button"
+          :disabled="loading"
+          variant="success"
+          type="submit"
+          class="js-no-auto-disable"
+        >
+          {{ $options.i18n.saveBtnLabel }}
+        </gl-button>
+      </div>
     </form>
   </div>
 </template>

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

@@ -149,15 +149,17 @@ export default {
             </template>
           </gl-sprintf>
         </div>
-        <gl-button
-          v-gl-modal.resetWebhookModal
-          class="gl-mt-3"
-          :disabled="loading"
-          :loading="resettingWebhook"
-          data-testid="webhook-reset-btn"
-        >
-          {{ $options.i18n.webhookUrl.resetWebhookUrl }}
-        </gl-button>
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button
+            v-gl-modal.resetWebhookModal
+            class="gl-mt-3"
+            :disabled="loading"
+            :loading="resettingWebhook"
+            data-testid="webhook-reset-btn"
+          >
+            {{ $options.i18n.webhookUrl.resetWebhookUrl }}
+          </gl-button>
+        </div>
         <gl-modal
           modal-id="resetWebhookModal"
           :title="$options.i18n.webhookUrl.resetWebhookUrl"
@@ -168,16 +170,17 @@ export default {
           {{ $options.i18n.webhookUrl.restKeyInfo }}
         </gl-modal>
       </gl-form-group>
-
-      <gl-button
-        ref="submitBtn"
-        :disabled="isSaveDisabled"
-        variant="success"
-        type="submit"
-        class="js-no-auto-disable"
-      >
-        {{ $options.i18n.saveBtnLabel }}
-      </gl-button>
+      <div class="gl-display-flex gl-justify-content-end">
+        <gl-button
+          ref="submitBtn"
+          :disabled="isSaveDisabled"
+          variant="success"
+          type="submit"
+          class="js-no-auto-disable"
+        >
+          {{ $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">
-          {{ __('Save Changes') }}
-        </gl-deprecated-button>
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button variant="success" @click="saveChanges">
+            {{ __('Save Changes') }}
+          </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,16 +180,17 @@ export default {
         >
           <gl-form-input id="status-page-aws-secret-access-key " v-model="awsSecretKey" />
         </gl-form-group>
-
-        <gl-deprecated-button
-          ref="submitBtn"
-          :disabled="loading"
-          variant="success"
-          type="submit"
-          class="js-no-auto-disable"
-        >
-          {{ $options.i18n.saveBtnLabel }}
-        </gl-deprecated-button>
+        <div class="gl-display-flex gl-justify-content-end">
+          <gl-button
+            ref="submitBtn"
+            :disabled="loading"
+            variant="success"
+            type="submit"
+            class="js-no-auto-disable"
+          >
+            {{ $options.i18n.saveBtnLabel }}
+          </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 }
-
-      = f.submit _('Save changes'), class: 'btn btn-success'
+      .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,16 +142,20 @@ exports[`Status Page settings form default state should match the default snapsh
         />
       </gl-form-group-stub>
        
-      <gl-deprecated-button-stub
-        class="js-no-auto-disable"
-        size="md"
-        type="submit"
-        variant="success"
+      <div
+        class="gl-display-flex gl-justify-content-end"
       >
+        <gl-button-stub
+          class="js-no-auto-disable"
+          size="md"
+          type="submit"
+          variant="success"
+        >
+          
+          Save changes
         
-        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>
-      <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 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>
-    <gl-button-stub category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">Test alert payload</gl-button-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,16 +92,20 @@ exports[`grafana integration component default state to match the default snapsh
         </p>
       </gl-form-group-stub>
        
-      <gl-button-stub
-        category="primary"
-        icon=""
-        size="medium"
-        variant="success"
+      <div
+        class="gl-display-flex gl-justify-content-end"
       >
+        <gl-button-stub
+          category="primary"
+          icon=""
+          size="medium"
+          variant="success"
+        >
+          
+          Save Changes
         
-        Save Changes
-      
-      </gl-button-stub>
+        </gl-button-stub>
+      </div>
     </form>
   </div>
 </section>

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

@@ -81,19 +81,23 @@ exports[`Alert integration settings form default state should match the default
       </gl-form-checkbox-stub>
     </gl-form-group-stub>
      
-    <gl-button-stub
-      category="tertiary"
-      class="js-no-auto-disable"
-      data-qa-selector="save_changes_button"
-      icon=""
-      size="medium"
-      type="submit"
-      variant="success"
+    <div
+      class="gl-display-flex gl-justify-content-end"
     >
+      <gl-button-stub
+        category="tertiary"
+        class="js-no-auto-disable"
+        data-qa-selector="save_changes_button"
+        icon=""
+        size="medium"
+        type="submit"
+        variant="success"
+      >
+        
+        Save changes
       
-      Save changes
-    
-    </gl-button-stub>
+      </gl-button-stub>
+    </div>
   </form>
 </div>
 `;

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

@@ -42,20 +42,24 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
         />
       </div>
        
-      <gl-button-stub
-        category="tertiary"
-        class="gl-mt-3"
-        data-testid="webhook-reset-btn"
-        icon=""
-        role="button"
-        size="medium"
-        tabindex="0"
-        variant="default"
+      <div
+        class="gl-display-flex gl-justify-content-end"
       >
+        <gl-button-stub
+          category="tertiary"
+          class="gl-mt-3"
+          data-testid="webhook-reset-btn"
+          icon=""
+          role="button"
+          size="medium"
+          tabindex="0"
+          variant="default"
+        >
+          
+          Reset webhook URL
         
-        Reset webhook URL
-      
-      </gl-button-stub>
+        </gl-button-stub>
+      </div>
        
       <gl-modal-stub
         modalclass=""
@@ -72,18 +76,22 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
       </gl-modal-stub>
     </gl-form-group-stub>
      
-    <gl-button-stub
-      category="tertiary"
-      class="js-no-auto-disable"
-      icon=""
-      size="medium"
-      type="submit"
-      variant="success"
+    <div
+      class="gl-display-flex gl-justify-content-end"
     >
+      <gl-button-stub
+        category="tertiary"
+        class="js-no-auto-disable"
+        icon=""
+        size="medium"
+        type="submit"
+        variant="success"
+      >
+        
+        Save changes
       
-      Save changes
-    
-    </gl-button-stub>
+      </gl-button-stub>
+    </div>
   </form>
 </div>
 `;