Merge branch 'renovate/gitlab-uisvg' into 'master'

Update dependency @gitlab/ui to v33.1.2

See merge request gitlab-org/gitlab!79324

app/assets/javascripts/alert_management/components/alert_management_table.vue

@@ -15,7 +15,7 @@ import getAlertsQuery from '~/graphql_shared/queries/get_alerts.query.graphql';
 import { fetchPolicies } from '~/lib/graphql';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import { joinPaths, visitUrl } from '~/lib/utils/url_utility';
-import { s__, __ } from '~/locale';
+import { s__, __, n__ } from '~/locale';
 import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import {
   tdClass,
@@ -32,8 +32,11 @@ const TH_TEST_ID = { 'data-testid': 'alert-management-severity-sort' };
 
 const TWELVE_HOURS_IN_MS = 12 * 60 * 60 * 1000;
 
+const MAX_VISIBLE_ASSIGNEES = 4;
+
 export default {
   trackAlertListViewsOptions,
+  MAX_VISIBLE_ASSIGNEES,
   i18n: {
     noAlertsMsg: s__(
       'AlertManagement|No alerts available to display. See %{linkStart}enabling alert management%{linkEnd} for more information on adding alerts to the list.',
@@ -258,6 +261,13 @@ export default {
       this.serverErrorMessage = '';
       this.isErrorAlertDismissed = true;
     },
+    assigneesBadgeSrOnlyText(item) {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        item.assignees.nodes.length - MAX_VISIBLE_ASSIGNEES,
+      );
+    },
   },
 };
 </script>
@@ -365,10 +375,11 @@ export default {
                 <gl-avatars-inline
                   :avatars="item.assignees.nodes"
                   :collapsed="true"
-                  :max-visible="4"
+                  :max-visible="$options.MAX_VISIBLE_ASSIGNEES"
                   :avatar-size="24"
                   badge-tooltip-prop="name"
                   :badge-tooltip-max-chars="100"
+                  :badge-sr-only-text="assigneesBadgeSrOnlyText(item)"
                 >
                   <template #avatar="{ avatar }">
                     <gl-avatar-link

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -12,7 +12,7 @@ import {
 } from '@gitlab/ui';
 import { isValidSlaDueAt } from 'ee_else_ce/vue_shared/components/incidents/utils';
 import { visitUrl, mergeUrlParams, joinPaths } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { s__, n__ } from '~/locale';
 import { INCIDENT_SEVERITY } from '~/sidebar/components/severity/constants';
 import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import Tracking from '~/tracking';
@@ -38,6 +38,8 @@ import {
 import getIncidentsCountByStatus from '../graphql/queries/get_count_by_status.query.graphql';
 import getIncidents from '../graphql/queries/get_incidents.query.graphql';
 
+const MAX_VISIBLE_ASSIGNEES = 4;
+
 export default {
   trackIncidentCreateNewOptions,
   trackIncidentListViewsOptions,
@@ -94,6 +96,7 @@ export default {
       thAttr: TH_PUBLISHED_TEST_ID,
     },
   ],
+  MAX_VISIBLE_ASSIGNEES,
   components: {
     GlLoadingIcon,
     GlTable,
@@ -295,6 +298,13 @@ export default {
     errorAlertDismissed() {
       this.isErrorAlertDismissed = true;
     },
+    assigneesBadgeSrOnlyText(item) {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        item.assignees.nodes.length - MAX_VISIBLE_ASSIGNEES,
+      );
+    },
     isValidSlaDueAt,
   },
 };
@@ -391,10 +401,11 @@ export default {
                 <gl-avatars-inline
                   :avatars="item.assignees.nodes"
                   :collapsed="true"
-                  :max-visible="4"
+                  :max-visible="$options.MAX_VISIBLE_ASSIGNEES"
                   :avatar-size="24"
                   badge-tooltip-prop="name"
                   :badge-tooltip-max-chars="100"
+                  :badge-sr-only-text="assigneesBadgeSrOnlyText(item)"
                 >
                   <template #avatar="{ avatar }">
                     <gl-avatar-link

ee/app/assets/javascripts/analytics/code_review_analytics/components/approvers_column.vue

 <script>
 import { GlAvatarLink, GlAvatar, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
+import { n__ } from '~/locale';
 
 export const MAX_VISIBLE_AVATARS_DEFAULT = 3;
 export const MAX_VISIBLE_AVATARS_COLLAPSED = 2;
@@ -36,6 +37,13 @@ export default {
     firstApprover() {
       return this.approvers[0];
     },
+    approversBadgeSrOnlyText() {
+      return n__(
+        '%d additional approver',
+        '%d additional approvers',
+        this.approvers.length - this.maxVisible,
+      );
+    },
   },
   avatarSize: 24,
   badgeTooltipMaxChars: 50,
@@ -52,6 +60,7 @@ export default {
       :avatar-size="$options.avatarSize"
       badge-tooltip-prop="name"
       :badge-tooltip-max-chars="$options.badgeTooltipMaxChars"
+      :badge-sr-only-text="approversBadgeSrOnlyText"
     >
       <template #avatar="{ avatar }">
         <gl-avatar-link v-gl-tooltip target="_blank" :href="avatar.web_url" :title="avatar.name">

ee/app/assets/javascripts/analytics/merge_request_analytics/components/throughput_table.vue

@@ -255,6 +255,13 @@ export default {
     hasPipelineNodes(item) {
       return item.pipelines?.nodes;
     },
+    assigneesBadgeSrOnlyText(item) {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        item.assignees.nodes.length - this.$options.assigneesVisible,
+      );
+    },
   },
   assigneesVisible: ASSIGNEES_VISIBLE,
   avatarSize: AVATAR_SIZE,
@@ -361,6 +368,7 @@ export default {
             :avatars="item.assignees.nodes"
             :avatar-size="$options.avatarSize"
             :max-visible="$options.assigneesVisible"
+            :badge-sr-only-text="assigneesBadgeSrOnlyText(item)"
             collapsed
           >
             <template #avatar="{ avatar }">

ee/app/assets/javascripts/compliance_dashboard/components/drawer_sections/committers.vue

@@ -2,6 +2,7 @@
 import { __, n__ } from '~/locale';
 import DrawerAvatarsList from '../shared/drawer_avatars_list.vue';
 import DrawerSectionHeader from '../shared/drawer_section_header.vue';
+import { DRAWER_MAXIMUM_AVATARS } from '../../constants';
 
 export default {
   components: {
@@ -19,6 +20,13 @@ export default {
     committersHeaderText() {
       return n__('%d commit author', '%d commit authors', this.committers.length);
     },
+    committersBadgeSrOnlyText() {
+      return n__(
+        '%d additional committer',
+        '%d additional committers',
+        this.committers.length - DRAWER_MAXIMUM_AVATARS,
+      );
+    },
   },
   i18n: {
     header: __('Change made by'),
@@ -33,6 +41,7 @@ export default {
       :header="committersHeaderText"
       :empty-header="$options.i18n.emptyHeader"
       :avatars="committers"
+      :badge-sr-only-text="committersBadgeSrOnlyText"
     />
   </div>
 </template>

ee/app/assets/javascripts/compliance_dashboard/components/drawer_sections/reviewers.vue

 <script>
 import { __, n__ } from '~/locale';
-import { DRAWER_AVATAR_SIZE } from '../../constants';
+import { DRAWER_AVATAR_SIZE, DRAWER_MAXIMUM_AVATARS } from '../../constants';
 import DrawerAvatarsList from '../shared/drawer_avatars_list.vue';
 import DrawerSectionHeader from '../shared/drawer_section_header.vue';
 
@@ -28,6 +28,20 @@ export default {
     approversHeaderText() {
       return n__('%d approver', '%d approvers', this.approvers.length);
     },
+    commentersBadgeSrOnlyText() {
+      return n__(
+        '%d additional commenter',
+        '%d additional commenters',
+        this.commenters.length - DRAWER_MAXIMUM_AVATARS,
+      );
+    },
+    approversBadgeSrOnlyText() {
+      return n__(
+        '%d additional approver',
+        '%d additional approvers',
+        this.approvers.length - DRAWER_MAXIMUM_AVATARS,
+      );
+    },
     hasCommenters() {
       return this.commenters.length > 0;
     },
@@ -50,6 +64,7 @@ export default {
       :header="commentersHeaderText"
       :empty-header="$options.i18n.commentersEmptyHeader"
       :avatars="commenters"
+      :badge-sr-only-text="commentersBadgeSrOnlyText"
       data-testid="commenters-avatar-list"
     />
     <drawer-avatars-list
@@ -57,6 +72,7 @@ export default {
       :header="approversHeaderText"
       :empty-header="$options.i18n.approversEmptyHeader"
       :avatars="approvers"
+      :badge-sr-only-text="approversBadgeSrOnlyText"
       data-testid="approvers-avatar-list"
     />
   </div>

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/approvers.vue

 <script>
 import { GlAvatarLink, GlAvatar, GlAvatarsInline, GlTooltipDirective } from '@gitlab/ui';
-import { sprintf, __ } from '~/locale';
+import { sprintf, __, n__ } from '~/locale';
 import { PRESENTABLE_APPROVERS_LIMIT } from '../../constants';
 
 export default {
@@ -36,6 +36,13 @@ export default {
         approvers: this.amountOfApproversOverLimit,
       });
     },
+    approversBadgeSrOnlyText() {
+      return n__(
+        '%d additional approver',
+        '%d additional approvers',
+        this.amountOfApproversOverLimit,
+      );
+    },
   },
   PRESENTABLE_APPROVERS_LIMIT,
   strings: {
@@ -61,6 +68,7 @@ export default {
       :collapsed="true"
       :max-visible="$options.PRESENTABLE_APPROVERS_LIMIT"
       :avatar-size="24"
+      :badge-sr-only-text="approversBadgeSrOnlyText"
       class="gl-display-inline-flex gl-lg-display-none! gl-ml-3"
       badge-tooltip-prop="name"
     >

ee/app/assets/javascripts/compliance_dashboard/components/shared/drawer_avatars_list.vue

@@ -26,6 +26,10 @@ export default {
       required: false,
       default: '',
     },
+    badgeSrOnlyText: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     isEmpty() {
@@ -53,6 +57,7 @@ export default {
       :avatars="avatars"
       :max-visible="$options.DRAWER_MAXIMUM_AVATARS"
       :avatar-size="$options.DRAWER_AVATAR_SIZE"
+      :badge-sr-only-text="badgeSrOnlyText"
       class="gl-flex-wrap gl-w-full!"
       badge-tooltip-prop="name"
     >

ee/app/assets/javascripts/issues_analytics/components/issues_analytics_table.vue

@@ -24,6 +24,7 @@ const SYMBOL = {
   ISSUE: '#',
   EPIC: '&',
 };
+const MAX_VISIBLE_ASSIGNEES = 2;
 
 const TH_TEST_ID = { 'data-testid': 'header' };
 
@@ -141,8 +142,16 @@ export default {
     labelTarget(name) {
       return mergeUrlParams({ 'label_name[]': name }, this.endpoints.issuesPage);
     },
+    assigneesBadgeSrOnlyText(assignees) {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        assignees.length - MAX_VISIBLE_ASSIGNEES,
+      );
+    },
   },
   avatarSize: 24,
+  MAX_VISIBLE_ASSIGNEES,
 };
 </script>
 <template>
@@ -213,7 +222,8 @@ export default {
       <gl-avatars-inline
         :avatars="value"
         :avatar-size="$options.avatarSize"
-        :max-visible="2"
+        :max-visible="$options.MAX_VISIBLE_ASSIGNEES"
+        :badge-sr-only-text="assigneesBadgeSrOnlyText(value)"
         collapsed
       >
         <template #avatar="{ avatar }">

ee/app/assets/javascripts/threat_monitoring/components/alerts/alerts_list.vue

@@ -13,6 +13,7 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import produce from 'immer';
+import { n__ } from '~/locale';
 import getAlertsQuery from '~/graphql_shared/queries/get_alerts.query.graphql';
 import { convertToSnakeCase } from '~/lib/utils/text_utility';
 import { joinPaths } from '~/lib/utils/url_utility';
@@ -23,6 +24,8 @@ import AlertFilters from './alert_filters.vue';
 import AlertStatus from './alert_status.vue';
 import { DEFAULT_FILTERS, FIELDS, MESSAGES, STATUSES, DOMAIN, CLOSED } from './constants';
 
+const MAX_VISIBLE_ASSIGNEES = 4;
+
 export default {
   PAGE_SIZE,
   DOMAIN,
@@ -32,6 +35,7 @@ export default {
     STATUSES,
     CLOSED,
   },
+  MAX_VISIBLE_ASSIGNEES,
   components: {
     AlertDrawer,
     AlertStatus,
@@ -166,6 +170,13 @@ export default {
       this.isAlertDrawerOpen = true;
       this.selectedAlert = data;
     },
+    assigneesBadgeSrOnlyText(assignees) {
+      return n__(
+        '%d additional assignee',
+        '%d additional assignees',
+        assignees.length - MAX_VISIBLE_ASSIGNEES,
+      );
+    },
   },
 };
 </script>
@@ -255,10 +266,11 @@ export default {
             data-testid="assigneesField"
             :avatars="item.assignees.nodes"
             :collapsed="true"
-            :max-visible="4"
+            :max-visible="$options.MAX_VISIBLE_ASSIGNEES"
             :avatar-size="24"
             badge-tooltip-prop="name"
             :badge-tooltip-max-chars="100"
+            :badge-sr-only-text="assigneesBadgeSrOnlyText(item.assignees.nodes)"
           >
             <template #avatar="{ avatar }">
               <gl-avatar-link

ee/spec/frontend/analytics/code_review_analytics/components/__snapshots__/approvers_column_spec.js.snap

@@ -5,6 +5,7 @@ exports[`ApproversColumn component when a list with more than three approvers is
   <gl-avatars-inline-stub
     avatars="[object Object],[object Object],[object Object],[object Object]"
     avatarsize="24"
+    badgesronlytext="2 additional approvers"
     badgetooltipmaxchars="50"
     badgetooltipprop="name"
     collapsed="true"
@@ -37,6 +38,7 @@ exports[`ApproversColumn component when a list with three approvers is passed ma
   <gl-avatars-inline-stub
     avatars="[object Object],[object Object],[object Object]"
     avatarsize="24"
+    badgesronlytext="0 additional approvers"
     badgetooltipmaxchars="50"
     badgetooltipprop="name"
     collapsed="true"
@@ -50,6 +52,7 @@ exports[`ApproversColumn component when a list with two approvers is passed matc
   <gl-avatars-inline-stub
     avatars="[object Object],[object Object]"
     avatarsize="24"
+    badgesronlytext="-1 additional approvers"
     badgetooltipmaxchars="50"
     badgetooltipprop="name"
     collapsed="true"

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/approvers_spec.js.snap

@@ -16,6 +16,7 @@ exports[`MergeRequest component when there are approvers matches snapshot 1`] =
   <gl-avatars-inline-stub
     avatars="[object Object]"
     avatarsize="24"
+    badgesronlytext="-1 additional approvers"
     badgetooltipprop="name"
     class="gl-display-inline-flex gl-lg-display-none! gl-ml-3"
     collapsed="true"

ee/spec/frontend/compliance_dashboard/components/shared/drawer_avatars_list_spec.js

@@ -17,7 +17,10 @@ describe('DrawerAvatarsList component', () => {
 
   const createComponent = (mountFn = shallowMount, propsData = {}) => {
     return mountFn(DrawerAvatarsList, {
-      propsData,
+      propsData: {
+        badgeSrOnlyText: 'additional approvers',
+        ...propsData,
+      },
     });
   };
 

locale/gitlab.pot

@@ -116,6 +116,26 @@ msgid_plural "%d URLs scanned"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%d additional approver"
+msgid_plural "%d additional approvers"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "%d additional assignee"
+msgid_plural "%d additional assignees"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "%d additional commenter"
+msgid_plural "%d additional commenters"
+msgstr[0] ""
+msgstr[1] ""
+
+msgid "%d additional committer"
+msgid_plural "%d additional committers"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%d approver"
 msgid_plural "%d approvers"
 msgstr[0] ""

package.json

@@ -56,7 +56,7 @@
     "@gitlab/at.js": "1.5.7",
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "2.2.0",
-    "@gitlab/ui": "33.1.0",
+    "@gitlab/ui": "34.0.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.4-1",
     "@rails/ujs": "6.1.4-1",

yarn.lock

@@ -962,15 +962,15 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-2.2.0.tgz#95cf58d6ae634d535145159f08f5cff6241d4013"
   integrity sha512-mCwR3KfNPsxRoojtTjMIZwdd4FFlBh5DlR9AeodP+7+k8rILdWGYxTZbJMPNXoPbZx16R94nG8c5bR7toD4QBw==
 
-"@gitlab/ui@33.1.0":
-  version "33.1.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-33.1.0.tgz#45ac2e6362546530b5756b1973f97f74a9c920da"
-  integrity sha512-kSpnGx7UjWxl0s6RBl9njhthD2tSyLHoVd3Q/E3WEE9gdw8VSa4tEeI2srD9eGl2npd/VUvO7tNIXzk5NpjLZg==
+"@gitlab/ui@34.0.0":
+  version "34.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-34.0.0.tgz#0fe9574df2c38aeb63add94e4549ed4e65975ef8"
+  integrity sha512-BFh3x+GCqWAoWhNJhJUunW3eHQLQkBOTBwZFJWSS+1+9ZtetqU3t0/OoqYjJuyTsqdra7A/e6BZsU0j7CnbY+Q==
   dependencies:
     "@babel/standalone" "^7.0.0"
     bootstrap-vue "2.20.1"
     copy-to-clipboard "^3.0.8"
-    dompurify "^2.3.4"
+    dompurify "^2.3.5"
     echarts "^5.2.1"
     highlight.js "^10.6.0"
     iframe-resizer "^4.3.2"
@@ -4890,7 +4890,7 @@ dompurify@2.3.4:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.4.tgz#1cf5cf0105ccb4debdf6db162525bd41e6ddacc6"
   integrity sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ==
 
-dompurify@^2.3.4, dompurify@^2.3.5:
+dompurify@^2.3.5:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.5.tgz#c83ed5a3ae5ce23e52efe654ea052ffb358dd7e3"
   integrity sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ==