Skip to content

G
gitlab-ce
Commit d2b74758 authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

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
parents 0518f309 b43c1794
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 133 deletions
app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue
View file @ d2b74758
...@@ -180,9 +180,11 @@ export default { ...@@ -180,9 +180,11 @@ export default {
/> />
</span> </span>
</div> </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 $options.RESET_KEY
}}</gl-button> }}</gl-button>
</span>
<gl-modal <gl-modal
modal-id="authKeyModal" modal-id="authKeyModal"
:title="$options.RESET_KEY" :title="$options.RESET_KEY"
......
app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
View file @ d2b74758
...@@ -512,9 +512,14 @@ export default { ...@@ -512,9 +512,14 @@ export default {
/> />
</template> </template>
</gl-form-input-group> </gl-form-input-group>
<gl-button v-gl-modal.authKeyModal :disabled="!selectedService.active" class="gl-mt-3">{{ <div class="gl-display-flex gl-justify-content-end">
$options.i18n.resetKey <gl-button
}}</gl-button> v-gl-modal.authKeyModal
:disabled="!selectedService.active"
class="gl-mt-3"
>{{ $options.i18n.resetKey }}</gl-button
>
</div>
<gl-modal <gl-modal
modal-id="authKeyModal" modal-id="authKeyModal"
:title="$options.i18n.resetKey" :title="$options.i18n.resetKey"
...@@ -541,11 +546,16 @@ export default { ...@@ -541,11 +546,16 @@ export default {
max-rows="10" max-rows="10"
/> />
</gl-form-group> </gl-form-group>
<div class="gl-display-flex gl-justify-content-end">
<gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{ <gl-button :disabled="!canTestAlert" @click="validateTestAlert">{{
$options.i18n.testAlertInfo $options.i18n.testAlertInfo
}}</gl-button> }}</gl-button>
</div>
</template> </template>
<div class="footer-block row-content-block gl-display-flex gl-justify-content-space-between"> <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 <gl-button
variant="success" variant="success"
category="primary" category="primary"
...@@ -554,9 +564,6 @@ export default { ...@@ -554,9 +564,6 @@ export default {
> >
{{ __('Save changes') }} {{ __('Save changes') }}
</gl-button> </gl-button>
<gl-button variant="default" category="primary" :disabled="!canSaveConfig" @click="onReset">
{{ __('Cancel') }}
</gl-button>
</div> </div>
</gl-form> </gl-form>
</div> </div>
......
app/assets/javascripts/error_tracking_settings/components/app.vue
View file @ d2b74758
<script> <script>
import { mapActions, mapGetters, mapState } from 'vuex'; 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 ProjectDropdown from './project_dropdown.vue';
import ErrorTrackingForm from './error_tracking_form.vue'; import ErrorTrackingForm from './error_tracking_form.vue';
export default { export default {
components: { ProjectDropdown, ErrorTrackingForm, GlDeprecatedButton }, components: { ProjectDropdown, ErrorTrackingForm, GlButton },
props: { props: {
initialApiHost: { initialApiHost: {
type: String, type: String,
...@@ -92,13 +92,15 @@ export default { ...@@ -92,13 +92,15 @@ export default {
@select-project="updateSelectedProject" @select-project="updateSelectedProject"
/> />
</div> </div>
<gl-deprecated-button <div class="gl-display-flex gl-justify-content-end">
<gl-button
:disabled="settingsLoading" :disabled="settingsLoading"
class="js-error-tracking-button" class="js-error-tracking-button"
variant="success" variant="success"
@click="handleSubmit" @click="handleSubmit"
> >
{{ __('Save changes') }} {{ __('Save changes') }}
</gl-deprecated-button> </gl-button>
</div>
</div> </div>
</template> </template>
app/assets/javascripts/grafana_integration/components/grafana_integration.vue
View file @ d2b74758
...@@ -93,9 +93,11 @@ export default { ...@@ -93,9 +93,11 @@ export default {
</a> </a>
</p> </p>
</gl-form-group> </gl-form-group>
<div class="gl-display-flex gl-justify-content-end">
<gl-button variant="success" category="primary" @click="updateGrafanaIntegration"> <gl-button variant="success" category="primary" @click="updateGrafanaIntegration">
{{ __('Save Changes') }} {{ __('Save Changes') }}
</gl-button> </gl-button>
</div>
</form> </form>
</div> </div>
</section> </section>
......
app/assets/javascripts/incidents_settings/components/alerts_form.vue
View file @ d2b74758
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
<span>{{ $options.i18n.sendEmail.label }}</span> <span>{{ $options.i18n.sendEmail.label }}</span>
</gl-form-checkbox> </gl-form-checkbox>
</gl-form-group> </gl-form-group>
<div class="gl-display-flex gl-justify-content-end">
<gl-button <gl-button
ref="submitBtn" ref="submitBtn"
data-qa-selector="save_changes_button" data-qa-selector="save_changes_button"
...@@ -134,6 +134,7 @@ export default { ...@@ -134,6 +134,7 @@ export default {
> >
{{ $options.i18n.saveBtnLabel }} {{ $options.i18n.saveBtnLabel }}
</gl-button> </gl-button>
</div>
</form> </form>
</div> </div>
</template> </template>
app/assets/javascripts/incidents_settings/components/pagerduty_form.vue
View file @ d2b74758
...@@ -149,6 +149,7 @@ export default { ...@@ -149,6 +149,7 @@ export default {
</template> </template>
</gl-sprintf> </gl-sprintf>
</div> </div>
<div class="gl-display-flex gl-justify-content-end">
<gl-button <gl-button
v-gl-modal.resetWebhookModal v-gl-modal.resetWebhookModal
class="gl-mt-3" class="gl-mt-3"
...@@ -158,6 +159,7 @@ export default { ...@@ -158,6 +159,7 @@ export default {
> >
{{ $options.i18n.webhookUrl.resetWebhookUrl }} {{ $options.i18n.webhookUrl.resetWebhookUrl }}
</gl-button> </gl-button>
</div>
<gl-modal <gl-modal
modal-id="resetWebhookModal" modal-id="resetWebhookModal"
:title="$options.i18n.webhookUrl.resetWebhookUrl" :title="$options.i18n.webhookUrl.resetWebhookUrl"
...@@ -168,7 +170,7 @@ export default { ...@@ -168,7 +170,7 @@ export default {
{{ $options.i18n.webhookUrl.restKeyInfo }} {{ $options.i18n.webhookUrl.restKeyInfo }}
</gl-modal> </gl-modal>
</gl-form-group> </gl-form-group>
<div class="gl-display-flex gl-justify-content-end">
<gl-button <gl-button
ref="submitBtn" ref="submitBtn"
:disabled="isSaveDisabled" :disabled="isSaveDisabled"
...@@ -178,6 +180,7 @@ export default { ...@@ -178,6 +180,7 @@ export default {
> >
{{ $options.i18n.saveBtnLabel }} {{ $options.i18n.saveBtnLabel }}
</gl-button> </gl-button>
</div>
</form> </form>
</div> </div>
</template> </template>
app/assets/javascripts/operation_settings/components/metrics_settings.vue
View file @ d2b74758
<script> <script>
import { mapState, mapActions } from 'vuex'; 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 ExternalDashboard from './form_group/external_dashboard.vue';
import DashboardTimezone from './form_group/dashboard_timezone.vue'; import DashboardTimezone from './form_group/dashboard_timezone.vue';
export default { export default {
components: { components: {
GlDeprecatedButton, GlButton,
GlLink, GlLink,
ExternalDashboard, ExternalDashboard,
DashboardTimezone, DashboardTimezone,
...@@ -34,7 +34,7 @@ export default { ...@@ -34,7 +34,7 @@ export default {
<h3 class="js-section-header h4"> <h3 class="js-section-header h4">
{{ s__('MetricsSettings|Metrics dashboard') }} {{ s__('MetricsSettings|Metrics dashboard') }}
</h3> </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"> <p class="js-section-sub-header">
{{ s__('MetricsSettings|Manage Metrics Dashboard settings.') }} {{ s__('MetricsSettings|Manage Metrics Dashboard settings.') }}
<gl-link :href="helpPage">{{ __('Learn more') }}</gl-link> <gl-link :href="helpPage">{{ __('Learn more') }}</gl-link>
...@@ -44,9 +44,11 @@ export default { ...@@ -44,9 +44,11 @@ export default {
<form> <form>
<dashboard-timezone /> <dashboard-timezone />
<external-dashboard /> <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') }} {{ __('Save Changes') }}
</gl-deprecated-button> </gl-button>
</div>
</form> </form>
</div> </div>
</section> </section>
......
ee/app/assets/javascripts/status_page_settings/components/settings_form.vue
View file @ d2b74758
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { mapActions, mapState } from 'vuex'; import { mapActions, mapState } from 'vuex';
import { mapComputed } from '~/vuex_shared/bindings'; import { mapComputed } from '~/vuex_shared/bindings';
import { import {
GlDeprecatedButton, GlDeprecatedButton as GlButton,
GlSprintf, GlSprintf,
GlLink, GlLink,
GlIcon, GlIcon,
...@@ -14,7 +14,7 @@ import { __, s__ } from '~/locale'; ...@@ -14,7 +14,7 @@ import { __, s__ } from '~/locale';
export default { export default {
components: { components: {
GlDeprecatedButton, GlButton,
GlSprintf, GlSprintf,
GlLink, GlLink,
GlFormGroup, GlFormGroup,
...@@ -78,9 +78,9 @@ export default { ...@@ -78,9 +78,9 @@ export default {
<h3 ref="sectionHeader" class="h4"> <h3 ref="sectionHeader" class="h4">
{{ $options.i18n.headerText }} {{ $options.i18n.headerText }}
</h3> </h3>
<gl-deprecated-button ref="toggleBtn" class="js-settings-toggle">{{ <gl-button ref="toggleBtn" class="js-settings-toggle">{{
$options.i18n.expandBtnLabel $options.i18n.expandBtnLabel
}}</gl-deprecated-button> }}</gl-button>
<p ref="sectionSubHeader"> <p ref="sectionSubHeader">
{{ $options.i18n.subHeaderText }} {{ $options.i18n.subHeaderText }}
</p> </p>
...@@ -180,8 +180,8 @@ export default { ...@@ -180,8 +180,8 @@ export default {
> >
<gl-form-input id="status-page-aws-secret-access-key " v-model="awsSecretKey" /> <gl-form-input id="status-page-aws-secret-access-key " v-model="awsSecretKey" />
</gl-form-group> </gl-form-group>
<div class="gl-display-flex gl-justify-content-end">
<gl-deprecated-button <gl-button
ref="submitBtn" ref="submitBtn"
:disabled="loading" :disabled="loading"
variant="success" variant="success"
...@@ -189,7 +189,8 @@ export default { ...@@ -189,7 +189,8 @@ export default {
class="js-no-auto-disable" class="js-no-auto-disable"
> >
{{ $options.i18n.saveBtnLabel }} {{ $options.i18n.saveBtnLabel }}
</gl-deprecated-button> </gl-button>
</div>
</form> </form>
</div> </div>
</section> </section>
......
ee/app/views/projects/settings/operations/_tracing.html.haml
View file @ d2b74758
...@@ -32,5 +32,5 @@ ...@@ -32,5 +32,5 @@
- link_start_tag = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: jaeger_help_url } - 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 - 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 } = _("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' = f.submit _('Save changes'), class: 'btn btn-success'
ee/spec/frontend/status_page_settings/__snapshots__/settings_form_spec.js.snap
View file @ d2b74758
...@@ -16,13 +16,13 @@ exports[`Status Page settings form default state should match the default snapsh ...@@ -16,13 +16,13 @@ exports[`Status Page settings form default state should match the default snapsh
</h3> </h3>
<gl-deprecated-button-stub <gl-button-stub
class="js-settings-toggle" class="js-settings-toggle"
size="md" size="md"
variant="secondary" variant="secondary"
> >
Expand Expand
</gl-deprecated-button-stub> </gl-button-stub>
<p> <p>
...@@ -142,7 +142,10 @@ exports[`Status Page settings form default state should match the default snapsh ...@@ -142,7 +142,10 @@ exports[`Status Page settings form default state should match the default snapsh
/> />
</gl-form-group-stub> </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" class="js-no-auto-disable"
size="md" size="md"
type="submit" type="submit"
...@@ -151,7 +154,8 @@ exports[`Status Page settings form default state should match the default snapsh ...@@ -151,7 +154,8 @@ exports[`Status Page settings form default state should match the default snapsh
Save changes Save changes
</gl-deprecated-button-stub> </gl-button-stub>
</div>
</form> </form>
</div> </div>
</section> </section>
......
spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap
View file @ d2b74758
...@@ -26,7 +26,9 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`] ...@@ -26,7 +26,9 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`]
</gl-form-group-stub> </gl-form-group-stub>
<gl-form-group-stub label=\\"Authorization key\\" label-for=\\"authorization-key\\" label-class=\\"label-bold\\"> <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-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> <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\\"> <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. Resetting the authorization key for this project will require updating the authorization key in every alert source it is enabled in.
</gl-modal-stub> </gl-modal-stub>
...@@ -34,14 +36,16 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`] ...@@ -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-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-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-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> <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\\"> <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\\"> <gl-button-stub category=\\"primary\\" variant=\\"default\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">
Cancel Cancel
</gl-button-stub> </gl-button-stub>
<gl-button-stub category=\\"primary\\" variant=\\"success\\" size=\\"medium\\" icon=\\"\\" disabled=\\"true\\">
Save changes
</gl-button-stub>
</div> </div>
</gl-form-stub> </gl-form-stub>
</div>" </div>"
......
spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
View file @ d2b74758
...@@ -92,6 +92,9 @@ exports[`grafana integration component default state to match the default snapsh ...@@ -92,6 +92,9 @@ exports[`grafana integration component default state to match the default snapsh
</p> </p>
</gl-form-group-stub> </gl-form-group-stub>
<div
class="gl-display-flex gl-justify-content-end"
>
<gl-button-stub <gl-button-stub
category="primary" category="primary"
icon="" icon=""
...@@ -102,6 +105,7 @@ exports[`grafana integration component default state to match the default snapsh ...@@ -102,6 +105,7 @@ exports[`grafana integration component default state to match the default snapsh
Save Changes Save Changes
</gl-button-stub> </gl-button-stub>
</div>
</form> </form>
</div> </div>
</section> </section>
......
spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap
View file @ d2b74758
...@@ -81,6 +81,9 @@ exports[`Alert integration settings form default state should match the default ...@@ -81,6 +81,9 @@ exports[`Alert integration settings form default state should match the default
</gl-form-checkbox-stub> </gl-form-checkbox-stub>
</gl-form-group-stub> </gl-form-group-stub>
<div
class="gl-display-flex gl-justify-content-end"
>
<gl-button-stub <gl-button-stub
category="tertiary" category="tertiary"
class="js-no-auto-disable" class="js-no-auto-disable"
...@@ -94,6 +97,7 @@ exports[`Alert integration settings form default state should match the default ...@@ -94,6 +97,7 @@ exports[`Alert integration settings form default state should match the default
Save changes Save changes
</gl-button-stub> </gl-button-stub>
</div>
</form> </form>
</div> </div>
`; `;
spec/frontend/incidents_settings/components/__snapshots__/pagerduty_form_spec.js.snap
View file @ d2b74758
...@@ -42,6 +42,9 @@ exports[`Alert integration settings form should match the default snapshot 1`] = ...@@ -42,6 +42,9 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
/> />
</div> </div>
<div
class="gl-display-flex gl-justify-content-end"
>
<gl-button-stub <gl-button-stub
category="tertiary" category="tertiary"
class="gl-mt-3" class="gl-mt-3"
...@@ -56,6 +59,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] = ...@@ -56,6 +59,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
Reset webhook URL Reset webhook URL
</gl-button-stub> </gl-button-stub>
</div>
<gl-modal-stub <gl-modal-stub
modalclass="" modalclass=""
...@@ -72,6 +76,9 @@ exports[`Alert integration settings form should match the default snapshot 1`] = ...@@ -72,6 +76,9 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
</gl-modal-stub> </gl-modal-stub>
</gl-form-group-stub> </gl-form-group-stub>
<div
class="gl-display-flex gl-justify-content-end"
>
<gl-button-stub <gl-button-stub
category="tertiary" category="tertiary"
class="js-no-auto-disable" class="js-no-auto-disable"
...@@ -84,6 +91,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] = ...@@ -84,6 +91,7 @@ exports[`Alert integration settings form should match the default snapshot 1`] =
Save changes Save changes
</gl-button-stub> </gl-button-stub>
</div>
</form> </form>
</div> </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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7