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

Update dependency @gitlab/ui to ^74.9.3

See merge request !145335



Merged-by: GitLab Dependency Bot <leipert+gitlab-renovate-bot@gitlab.com>
Reviewed-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Co-authored-by: Eduardo Sanz García <esanz-garcia@gitlab.com>
Co-authored-by: Marcel van Remmerden <maclbb@hotmail.de>
Co-authored-by: GitLab Renovate Bot <gitlab-bot@gitlab.com>

app/assets/javascripts/access_tokens/components/access_token_table_app.vue

@@ -129,7 +129,7 @@ export default {
           <template #head(lastUsedAt)="{ label }">
             <span>{{ label }}</span>
             <gl-link :href="$options.lastUsedHelpLink"
-              ><gl-icon name="question-o" /><span class="gl-sr-only">{{
+              ><gl-icon name="question-o" class="gl-ml-2" /><span class="gl-sr-only">{{
                 s__('AccessTokens|The last time a token was used')
               }}</span></gl-link
             >

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

@@ -21,7 +21,6 @@ import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue'
 import { TOKEN_TYPE_ASSIGNEE } from '~/vue_shared/components/filtered_search_bar/constants';
 import {
   tdClass,
-  thClass,
   bodyTrClass,
   initialPaginationState,
 } from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants';
@@ -53,7 +52,8 @@ export default {
     {
       key: 'severity',
       label: s__('AlertManagement|Severity'),
-      thClass: `${thClass} gl-w-eighth`,
+      variant: 'secondary',
+      thClass: `gl-w-eighth`,
       thAttr: TH_TEST_ID,
       tdClass: `${tdClass} rounded-top text-capitalize sortable-cell`,
       sortable: true,
@@ -61,7 +61,8 @@ export default {
     {
       key: 'startedAt',
       label: s__('AlertManagement|Start time'),
-      thClass: `${thClass} js-started-at w-15p`,
+      variant: 'secondary',
+      thClass: `js-started-at w-15p`,
       tdClass: `${tdClass} sortable-cell`,
       sortable: true,
     },
@@ -74,8 +75,8 @@ export default {
     {
       key: 'eventCount',
       label: s__('AlertManagement|Events'),
-      thClass: `${thClass} text-right gl-w-12`,
-      tdClass: `${tdClass} text-md-right sortable-cell`,
+      variant: 'secondary',
+      tdClass: `${tdClass} sortable-cell`,
       sortable: true,
     },
     {
@@ -93,7 +94,8 @@ export default {
     {
       key: 'status',
       label: s__('AlertManagement|Status'),
-      thClass: `${thClass} w-15p`,
+      variant: 'secondary',
+      thClass: `w-15p`,
       tdClass: `${tdClass} rounded-bottom sortable-cell`,
       sortable: true,
     },
@@ -329,8 +331,10 @@ export default {
           :sort-direction="sortDirection"
           :sort-desc.sync="sortDesc"
           :sort-by.sync="sortBy"
-          sort-icon-left
           fixed
+          hover
+          selectable
+          selected-variant="primary"
           @row-clicked="navigateToAlertDetails"
           @sort-changed="fetchSortedData"
         >

app/assets/javascripts/analytics/cycle_analytics/components/stage_table.vue

@@ -211,7 +211,7 @@ export default {
     >
       <template v-if="stageCount" #head(title)="data">
         <span>{{ data.label }}</span
-        ><gl-badge class="gl-ml-2" size="sm"
+        ><gl-badge class="gl-ml-3" size="sm"
           ><formatted-stage-count :stage-count="stageCount"
         /></gl-badge>
       </template>

app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue

@@ -269,7 +269,6 @@ export default {
         stacked="md"
         fixed
         show-empty
-        sort-icon-left
         no-sort-reset
         no-local-sorting
         @sort-changed="(val) => $emit('sort-changed', val)"

app/assets/javascripts/ci_secure_files/components/secure_files_list.vue

@@ -238,7 +238,6 @@ export default {
           stacked="md"
           table-class="text-secondary"
           show-empty
-          sort-icon-left
           no-sort-reset
           :empty-text="$options.i18n.noFilesMessage"
         >

app/assets/javascripts/crm/contacts/components/contacts_root.vue

@@ -231,7 +231,6 @@ export default {
           sort-by="createdAt"
           show-empty
           no-local-sorting
-          sort-icon-left
           fixed
           @sort-changed="fetchSortedData"
         >

app/assets/javascripts/crm/organizations/components/organizations_root.vue

@@ -222,7 +222,6 @@ export default {
           sort-by="createdAt"
           show-empty
           no-local-sorting
-          sort-icon-left
           fixed
           @sort-changed="fetchSortedData"
         >

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

@@ -20,7 +20,6 @@ import SeverityToken from '~/sidebar/components/severity/severity.vue';
 import Tracking from '~/tracking';
 import {
   tdClass,
-  thClass,
   bodyTrClass,
   initialPaginationState,
 } from '~/vue_shared/components/paginated_table_with_search_and_tabs/constants';
@@ -54,7 +53,8 @@ export default {
     {
       key: 'severity',
       label: s__('IncidentManagement|Severity'),
-      thClass: `${thClass} gl-w-15p`,
+      variant: 'secondary',
+      thClass: `gl-w-15p`,
       tdClass: `${tdClass} sortable-cell`,
       actualSortKey: 'SEVERITY',
       sortable: true,
@@ -69,7 +69,8 @@ export default {
     {
       key: 'escalationStatus',
       label: s__('IncidentManagement|Status'),
-      thClass: `${thClass} gl-w-eighth`,
+      variant: 'secondary',
+      thClass: `gl-w-eighth`,
       tdClass: `${tdClass} sortable-cell`,
       actualSortKey: 'ESCALATION_STATUS',
       sortable: true,
@@ -78,7 +79,8 @@ export default {
     {
       key: 'createdAt',
       label: s__('IncidentManagement|Date created'),
-      thClass: `${thClass} gl-w-eighth`,
+      variant: 'secondary',
+      thClass: `gl-w-eighth`,
       tdClass: `${tdClass} sortable-cell`,
       actualSortKey: 'CREATED',
       sortable: true,
@@ -87,7 +89,8 @@ export default {
     {
       key: 'incidentSla',
       label: s__('IncidentManagement|Time to SLA'),
-      thClass: `${thClass} gl-text-right gl-w-10p`,
+      variant: 'secondary',
+      thClass: `gl-text-right gl-w-10p`,
       tdClass: `${tdClass} gl-text-right`,
       thAttr: TH_INCIDENT_SLA_TEST_ID,
       actualSortKey: 'SLA_DUE_AT',
@@ -102,7 +105,8 @@ export default {
     {
       key: 'published',
       label: s__('IncidentManagement|Published'),
-      thClass: `${thClass} gl-w-15`,
+      variant: 'secondary',
+      thClass: `gl-w-15`,
       tdClass: `${tdClass} sortable-cell`,
       actualSortKey: 'PUBLISHED',
       sortable: true,
@@ -388,8 +392,10 @@ export default {
           sort-by="createdAt"
           show-empty
           no-local-sorting
-          sort-icon-left
           fixed
+          hover
+          selectable
+          selected-variant="primary"
           @row-clicked="navigateToIncidentDetails"
           @sort-changed="fetchSortedData"
         >

app/assets/javascripts/usage_quotas/storage/components/storage_type_help_link.vue

@@ -30,7 +30,7 @@ export default {
 </script>
 
 <template>
-  <gl-link :href="helpLinks[storageType]" target="_blank" :aria-label="ariaLabel">
-    <gl-icon name="question-o" :size="12" />
+  <gl-link :href="helpLinks[storageType]" target="_blank" :aria-label="ariaLabel" class="gl-ml-3">
+    <gl-icon name="question-o" :size="16" />
   </gl-link>
 </template>

app/assets/javascripts/vue_shared/components/paginated_table_with_search_and_tabs/constants.js

 export const tdClass =
   'table-col gl-display-flex d-md-table-cell gl-align-items-center gl-white-space-nowrap';
-export const thClass = 'gl-hover-bg-blue-50';
 export const bodyTrClass =
   'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-gray-50 gl-hover-border-b-solid';
 

app/assets/stylesheets/framework/variables_overrides.scss

@@ -55,26 +55,3 @@ $tooltip-padding-y: 0.5rem;
 $tooltip-padding-x: 0.75rem;
 $tooltip-arrow-height: 0.5rem;
 $tooltip-arrow-width: 1rem;
-$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \
-  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
-  <path style="fill: #666;" fill-rule="evenodd" d="M11.707085,11.7071 \
-  L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, \
-  10.6834 4.292875,10.2929 C4.683375,9.90237 \
-  5.316575,9.90237 5.707075,10.2929 L6.999975, \
-  11.5858 L6.999975,2 C6.999975,1.44771 \
-  7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \
-  8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395 \
-  ,9.90237 11.316555,9.90237 11.707085,10.2929 \
-  C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/> \
-  </svg>') !default;
-$b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg \
-  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
-  <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 \
-  L11.7071,4.2971 C12.0976,4.6876 \
-  12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834, \
-  6.10183 10.2929,5.7113 L9,4.4184 L9,14.0042 C9,14.55649 \
-  8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649 \
-  7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113 \
-  C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/> \
-  </svg> ') !default;
-$b-table-sort-icon-bg-not-sorted: '';

ee/app/assets/javascripts/analytics/devops_reports/devops_adoption/components/devops_adoption_table.vue

@@ -158,8 +158,9 @@ export default {
             v-if="header.tooltip"
             v-gl-tooltip.hover="header.tooltip"
             name="information-o"
-            class="gl-text-gray-200 gl-ml-1"
-            :size="14"
+            class="gl-text-blue-500 gl-ml-3"
+            :size="16"
+            data-testid="information-icon"
           />
         </div>
       </template>

ee/app/assets/javascripts/compliance_dashboard/components/violations_report/report.vue

@@ -241,7 +241,6 @@ export default {
       :sort-by="sortBy"
       :sort-desc="sortDesc"
       no-local-sorting
-      sort-icon-left
       show-empty
       stacked="lg"
       select-mode="single"

ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue

@@ -253,7 +253,6 @@ export default {
       :sort-desc="sort.sortDesc"
       :sort-by="sort.sortBy"
       sort-direction="last"
-      sort-icon-left
       no-local-sorting
       no-sort-reset
       stacked="sm"

ee/spec/frontend/analytics/devops_reports/devops_adoption/components/devops_adoption_table_spec.js

@@ -73,7 +73,7 @@ describe('DevopsAdoptionTable', () => {
           const expected = Boolean(tooltipText);
 
           it(`${expected ? 'displays' : "doesn't display"} an information icon`, () => {
-            expect(headerWrapper.findComponent(GlIcon).exists()).toBe(expected);
+            expect(headerWrapper.find(`[data-testid="information-icon"]`).exists()).toBe(expected);
           });
 
           if (expected) {

ee/spec/frontend/compliance_dashboard/components/frameworks_report/frameworks_table_spec.js

@@ -23,7 +23,7 @@ describe('FrameworksTable component', () => {
   const GlModalStub = stubComponent(GlModal, { methods: { show: jest.fn(), hide: jest.fn() } });
 
   const findTable = () => wrapper.findComponent(GlTable);
-  const findTableHeaders = () => findTable().findAll('th div');
+  const findTableHeaders = () => findTable().findAll('th > div');
   const findTableRow = (idx) => findTable().findAll('tbody > tr').at(idx);
   const findTableRowData = (idx) => findTableRow(idx).findAll('td');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);

ee/spec/frontend/compliance_dashboard/components/projects_report/projects_table_spec.js

@@ -40,7 +40,7 @@ describe('ProjectsTable component', () => {
   const ROW_WITHOUT_FRAMEWORK_IDX = 1;
 
   const findTable = () => wrapper.findComponent(GlTable);
-  const findTableHeaders = () => findTable().findAll('th div');
+  const findTableHeaders = () => findTable().findAll('th > div');
   const findTableRowData = (idx) => findTable().findAll('tbody > tr').at(idx).findAll('td');
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findEmptyState = () => wrapper.findByTestId('projects-table-empty-state');

ee/spec/frontend/compliance_dashboard/components/violations_report/report_spec.js

@@ -59,7 +59,7 @@ describe('ComplianceViolationsReport component', () => {
   const findViolationFilter = () => wrapper.findComponent(ViolationFilter);
   const findUrlSync = () => wrapper.findComponent(UrlSync);
 
-  const findTableHeaders = () => findViolationsTable().findAll('th div');
+  const findTableHeaders = () => findViolationsTable().findAll('th > div');
   const findTableRowData = (idx) =>
     findViolationsTable().findAll('tbody > tr').at(idx).findAll('td');
   const findSelectedRows = () => findViolationsTable().findAll('tr.b-table-row-selected');
@@ -206,7 +206,7 @@ describe('ComplianceViolationsReport component', () => {
     });
 
     it('has the correct table headers', () => {
-      const headerTexts = findTableHeaders().wrappers.map((h) => h.text());
+      const headerTexts = findTableHeaders().wrappers.map((h) => h.text().trim());
 
       expect(headerTexts).toStrictEqual([
         'Severity',

ee/spec/frontend/packages_and_registries/google_artifact_registry/components/list/table_spec.js

@@ -78,8 +78,8 @@ describe('ListTable', () => {
 
   it('sets the correct sort props', () => {
     expect(findTable().attributes()).toMatchObject({
-      'sort-by': 'name',
-      'sort-desc': 'true',
+      sortby: 'name',
+      sortdesc: 'true',
       'sort-icon-left': '',
       'no-sort-reset': '',
       'no-local-sorting': '',

ee/spec/frontend/security_configuration/corpus_management/__snapshots__/corpus_table_spec.js.snap

@@ -10,7 +10,9 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
     role="columnheader"
     scope="col"
   >
-    <div>
+    <div
+      class="gl-align-items-center gl-display-flex"
+    >
       Corpus name
     </div>
   </th>
@@ -20,7 +22,9 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
     role="columnheader"
     scope="col"
   >
-    <div>
+    <div
+      class="gl-align-items-center gl-display-flex"
+    >
       Target
     </div>
   </th>
@@ -30,7 +34,9 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
     role="columnheader"
     scope="col"
   >
-    <div>
+    <div
+      class="gl-align-items-center gl-display-flex"
+    >
       Last updated
     </div>
   </th>
@@ -40,7 +46,9 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
     role="columnheader"
     scope="col"
   >
-    <div>
+    <div
+      class="gl-align-items-center gl-display-flex"
+    >
       Last used
     </div>
   </th>
@@ -50,7 +58,9 @@ exports[`Corpus table corpus management renders with the correct columns 1`] = `
     role="columnheader"
     scope="col"
   >
-    <div>
+    <div
+      class="gl-align-items-center gl-display-flex"
+    >
       Actions
     </div>
   </th>