Commit b43c1794 authored by Serena Fang's avatar Serena Fang Committed by Kushal Pandya

Move buttons in Settings > Operations to right

Follow pajamas guidelines, move buttons to right
Git rebasing with master
parent 3f6b3993
......@@ -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"
......
......@@ -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>
......
<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>
......@@ -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>
......
......@@ -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>
......@@ -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>
<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>
......
......@@ -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>
......
......@@ -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'
......@@ -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>
......
......@@ -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>"
......
......@@ -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>
......
......@@ -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>
`;
......@@ -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>
`;
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment