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

app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue

 <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>

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"

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 } ×

changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml

+---
+title: Update gl-toggles with deprecated attributes
+merge_request: 34660
+author:
+type: changed

ee/app/assets/javascripts/boards/toggle_labels.js

 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"

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">

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>

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 ""
 

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",

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

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>

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"