From e128c17816bfc758ad5851de3bfd249708d35bbc Mon Sep 17 00:00:00 2001 From: GitLab Bot <gitlab-bot@gitlab.com> Date: Tue, 16 Jun 2020 16:54:09 +0000 Subject: [PATCH] Upgrade GitLab UI to v17.8.1 Updates all gl-toggle instances that use outdated attributes. MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/34660 --- .../behaviors/shortcuts/shortcuts_toggle.vue | 28 +++---------------- .../ingress_modsecurity_settings.vue | 8 +----- app/views/help/_shortcuts.html.haml | 4 --- ...xt-int-test-gitlab-ui-integration-test.yml | 5 ++++ .../javascripts/boards/toggle_labels.js | 16 ++--------- .../components/service_desk_setting.vue | 4 +-- .../components/network_policy_list.vue | 8 +----- locale/gitlab.pot | 24 ---------------- package.json | 4 +-- .../expiration_policy_fields_spec.js.snap | 4 +-- .../self_monitor_form_spec.js.snap | 4 +-- yarn.lock | 18 ++++++------ 12 files changed, 28 insertions(+), 99 deletions(-) create mode 100644 changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue index a53b1b06be941..8418c0f66ac94 100644 --- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue +++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue @@ -1,11 +1,10 @@ <script> -import { GlToggle, GlSprintf } from '@gitlab/ui'; +import { GlToggle } from '@gitlab/ui'; import AccessorUtilities from '~/lib/utils/accessor'; import { disableShortcuts, enableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle'; export default { components: { - GlSprintf, GlToggle, }, data() { @@ -32,29 +31,10 @@ export default { <gl-toggle v-model="shortcutsEnabled" aria-describedby="shortcutsToggle" - class="prepend-left-10 mb-0" - label-position="right" + label="Keyboard shortcuts" + label-position="left" @change="onChange" - > - <template #labelOn> - <gl-sprintf - :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled')" - > - <template #screenreaderOnly="{ content }"> - <span class="sr-only">{{ content }}</span> - </template> - </gl-sprintf> - </template> - <template #labelOff> - <gl-sprintf - :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled')" - > - <template #screenreaderOnly="{ content }"> - <span class="sr-only">{{ content }}</span> - </template> - </gl-sprintf> - </template> - </gl-toggle> + /> <div id="shortcutsToggle" class="sr-only">{{ __('Enable or disable keyboard shortcuts') }}</div> </div> </template> diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue index 54f5468bdd0ce..87c3225085f35 100644 --- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue +++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue @@ -198,13 +198,7 @@ export default { </strong> </p> <div class="form-check form-check-inline mt-3"> - <gl-toggle - v-model="modSecurityEnabled" - :label-on="__('Enabled')" - :label-off="__('Disabled')" - :disabled="saveButtonDisabled" - label-position="right" - /> + <gl-toggle v-model="modSecurityEnabled" :disabled="saveButtonDisabled" /> </div> <div v-if="ingress.modsecurity_enabled" diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml index bd5424c30c679..3e9a77d01b451 100644 --- a/app/views/help/_shortcuts.html.haml +++ b/app/views/help/_shortcuts.html.haml @@ -2,10 +2,6 @@ .modal-dialog.modal-lg.modal-1040 .modal-content .modal-header - %h4.modal-title - = _('Keyboard Shortcuts') - %small - = link_to _('(Show all)'), '#', class: 'js-more-help-button' .js-toggle-shortcuts %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') } %span{ "aria-hidden": true } × diff --git a/changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml b/changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml new file mode 100644 index 0000000000000..24990c85d472b --- /dev/null +++ b/changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml @@ -0,0 +1,5 @@ +--- +title: Update gl-toggles with deprecated attributes +merge_request: 34660 +author: +type: changed diff --git a/ee/app/assets/javascripts/boards/toggle_labels.js b/ee/app/assets/javascripts/boards/toggle_labels.js index 67369df82fe54..4a5f92c08a89d 100644 --- a/ee/app/assets/javascripts/boards/toggle_labels.js +++ b/ee/app/assets/javascripts/boards/toggle_labels.js @@ -1,7 +1,6 @@ import Vue from 'vue'; import { mapState, mapGetters, mapActions } from 'vuex'; import { GlToggle } from '@gitlab/ui'; -import { __ } from '~/locale'; import Tracking from '~/tracking'; import store from '~/boards/stores'; @@ -15,13 +14,6 @@ export default () => computed: { ...mapState(['isShowingLabels']), ...mapGetters(['getLabelToggleState']), - - toggleOnLabel() { - return __('Showing all labels'); - }, - toggleOffLabel() { - return __('Hiding all labels'); - }, }, methods: { ...mapActions(['toggleShowLabels']), @@ -37,14 +29,10 @@ export default () => }, template: ` <div class="board-labels-toggle-wrapper d-flex align-items-center prepend-left-10"> - <span id="board-labels-toggle-text" class="text-nowrap"> - {{ __('Show labels') }} - </span> <gl-toggle :value="isShowingLabels" - class="prepend-left-10 mb-0" - :label-on="toggleOnLabel" - :label-off="toggleOffLabel" + label="Show labels" + label-position="left" aria-describedby="board-labels-toggle-text" data-qa-selector="show_labels_toggle" @change="onToggle" diff --git a/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue index 9e6a4eb1c8f42..43c20fea43e6d 100644 --- a/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue +++ b/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue @@ -91,8 +91,8 @@ export default { id="service-desk-checkbox" :value="isEnabled" class="d-inline-block align-middle mr-1" - :label-on="__('Service Desk is on')" - :label-off="__('Service Desk is off')" + label="Service desk" + label-position="left" @change="onCheckboxToggle" /> <label class="align-middle" for="service-desk-checkbox"> diff --git a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue index 8c132e29dead8..ebbe97cb9d764 100644 --- a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue +++ b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue @@ -215,13 +215,7 @@ export default { <h5 class="mt-4">{{ s__('NetworkPolicies|Enforcement status') }}</h5> <p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p> - <gl-toggle - v-model="selectedPolicy.isEnabled" - :label-on="__('Enabled')" - :label-off="__('Disabled')" - label-position="right" - data-testid="policyToggle" - /> + <gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" /> </div> </template> </gl-drawer> diff --git a/locale/gitlab.pot b/locale/gitlab.pot index c8125fabb4a3b..f55a3fd836204 100644 --- a/locale/gitlab.pot +++ b/locale/gitlab.pot @@ -567,12 +567,6 @@ msgstr "" msgid "%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}" msgstr "" -msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled" -msgstr "" - -msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled" -msgstr "" - msgid "%{service_title} %{message}." msgstr "" @@ -735,9 +729,6 @@ msgstr "" msgid "(No changes)" msgstr "" -msgid "(Show all)" -msgstr "" - msgid "(check progress)" msgstr "" @@ -11778,9 +11769,6 @@ msgstr[1] "" msgid "Hide values" msgstr "" -msgid "Hiding all labels" -msgstr "" - msgid "High or unknown vulnerabilities present" msgstr "" @@ -12941,9 +12929,6 @@ msgstr "" msgid "Key: %{key}" msgstr "" -msgid "Keyboard Shortcuts" -msgstr "" - msgid "Keyboard shortcuts" msgstr "" @@ -20565,12 +20550,6 @@ msgstr "" msgid "Service Desk is enabled but not yet active" msgstr "" -msgid "Service Desk is off" -msgstr "" - -msgid "Service Desk is on" -msgstr "" - msgid "Service Templates" msgstr "" @@ -20893,9 +20872,6 @@ msgstr "" msgid "Showing all issues" msgstr "" -msgid "Showing all labels" -msgstr "" - msgid "Showing last %{size} of log -" msgstr "" diff --git a/package.json b/package.json index 1a4b3674d433e..8566692295971 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,8 @@ "@babel/plugin-syntax-import-meta": "^7.10.1", "@babel/preset-env": "^7.10.1", "@gitlab/at.js": "1.5.5", - "@gitlab/svgs": "1.144.0", - "@gitlab/ui": "17.8.0", + "@gitlab/svgs": "1.139.0", + "@gitlab/ui": "17.8.1", "@gitlab/visual-review-tools": "1.6.1", "@rails/actioncable": "^6.0.3-1", "@sentry/browser": "^5.10.2", diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap index a9034b81d2f0f..2d4f920ef3a0c 100644 --- a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap +++ b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap @@ -16,9 +16,7 @@ exports[`Expiration Policy Form renders 1`] = ` > <gl-toggle-stub id="expiration-policy-toggle" - labeloff="Toggle Status: OFF" - labelon="Toggle Status: ON" - labelposition="hidden" + labelposition="top" /> <span diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap index f7a9827a9ad05..f4ac2f57261b4 100644 --- a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap +++ b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap @@ -47,9 +47,7 @@ exports[`self monitor component When the self monitor project has not been creat label-for="self-monitor-toggle" > <gl-toggle-stub - labeloff="Toggle Status: OFF" - labelon="Toggle Status: ON" - labelposition="hidden" + labelposition="top" name="self-monitor-toggle" /> </gl-form-group-stub> diff --git a/yarn.lock b/yarn.lock index f5ca6a8ea29b4..6b4a307fafa80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -843,15 +843,15 @@ eslint-plugin-vue "^6.2.1" vue-eslint-parser "^7.0.0" -"@gitlab/svgs@1.144.0": - version "1.144.0" - resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.144.0.tgz#ee0ec58516405391cbaef00f5a660da6edf27538" - integrity sha512-ejcsxoyfYwXyG8naOnn7QnY0oxrRNcWRBuH9VHrGL9/FXBJWq2NLXENi+v0TjcWvSsc2fBx/nk5V8Au96g0yEg== - -"@gitlab/ui@17.8.0": - version "17.8.0" - resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-17.8.0.tgz#187b92634d3b034f036d96238a7c39a5e7f1606b" - integrity sha512-BwZY5D6zUilCj9Uh1nhB3VQMHsSwYxMHpz/t4qu1URIwWLeyDuEMxx6CEMT4p1Cir2eWxwxh9AauduPcmRTJPw== +"@gitlab/svgs@1.139.0": + version "1.139.0" + resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.139.0.tgz#8a4874e76000e2dd7d3ed3a8967d62bed47d7ea7" + integrity sha512-o1KAmQLYL727HodlPHkmj+d+Kdw8OIgHzlKmmPYMzeE+As2l1oz6CTilca56KqXGklOgrouC9P2puMwyX8e/6g== + +"@gitlab/ui@17.8.1": + version "17.8.1" + resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-17.8.1.tgz#78c177f925a1bee97cf891093c0f2e606bbd7c4e" + integrity sha512-WzJKbX9PgdlbXEVboz1OQ30eLx9/1bOtFCIbZ9/dHEpmRu7sNK/+NlxLnQO+Ls5byAo4xk26Ykv8HDm888J7Vw== dependencies: "@babel/standalone" "^7.0.0" "@gitlab/vue-toasted" "^1.3.0" -- GitLab