Updated CSS classes to GitLab UI classes

Also updated rspec to test for the actual SVG icon rather than
arbitrary text highlighting

ee/app/views/shared/credentials_inventory/_expiry_date.html.haml

 - if credential.expires?
   - expiry_date = credential.expires_at.to_date
-  - date_classes = 'd-flex align-items-center has-tooltip h-100 justify-content-end justify-content-md-start'
+  - date_classes = 'gl-display-flex gl-align-items-center has-tooltip gl-w-full gl-justify-content-end gl-justify-content-md-start'
 
   - if credential.expired?
-    %span{ class: date_classes + ' text-danger', title: _('This credential has expired'), data: { testid: 'expiry-date-icon' } }
-      = sprite_icon('error', size: 16, css_class: "gl-icon mr-1")
+    %span{ class: date_classes + ' gl-text-red-500', title: _('This credential has expired'), data: { testid: 'expiry-date-icon' } }
+      = sprite_icon('error', size: 16, css_class: "gl-icon gl-mr-2")
       = expiry_date
   - elsif credential.expires_soon?
-    %span{ class: date_classes + ' text-warning', data: { testid: 'expiry-date-icon' } }
-      = sprite_icon('warning', size: 16, css_class: "gl-icon mr-1")
+    %span{ class: date_classes + ' gl-text-orange-500', data: { testid: 'expiry-date-icon' } }
+      = sprite_icon('warning', size: 16, css_class: "gl-icon gl-mr-2")
       = expiry_date
   - else
     = expiry_date

ee/app/views/shared/credentials_inventory/_personal_access_tokens.html.haml

 .table-holder
-  .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
+  .thead-white.gl-white-space-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
     .table-section.section-40{ role: 'rowheader' }= _('Owner')
     .table-section.section-20{ role: 'rowheader' }= _('Scope')
     .table-section.section-15{ role: 'rowheader' }= _('Created On')

ee/app/views/shared/credentials_inventory/_ssh_keys.html.haml

 .table-holder
-  .thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
+  .thead-white.gl-white-space-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
     .table-section.section-40{ role: 'rowheader' }= _('Owner')
     .table-section.section-15{ role: 'rowheader' }= _('Created On')
     .table-section.section-15{ role: 'rowheader' }= _('Last Accessed On')

ee/app/views/shared/credentials_inventory/personal_access_tokens/_personal_access_token.html.haml

@@ -7,7 +7,7 @@
   .table-section.section-20
     .table-mobile-header{ role: 'rowheader' }
       = _('Scope')
-    .table-mobile-content.ws-normal
+    .table-mobile-content.gl-white-space-normal
       - scopes = personal_access_token.scopes
       = scopes.present? ? scopes.join(", ") : _('No Scopes')
   .table-section.section-15
@@ -18,7 +18,7 @@
   .table-section.section-15
     .table-mobile-header{ role: 'rowheader' }
       = _('Expiration')
-    .table-mobile-content.h-100
+    .table-mobile-content.gl-w-full
       = render 'shared/credentials_inventory/expiry_date', credential: personal_access_token
   .table-section.section-10
     .table-mobile-header{ role: 'rowheader' }

ee/app/views/shared/credentials_inventory/ssh_keys/_ssh_key.html.haml

@@ -17,5 +17,5 @@
   .table-section.section-15
     .table-mobile-header{ role: 'rowheader' }
       = _('Expiration')
-    .table-mobile-content.h-100
+    .table-mobile-content.gl-w-full
       = render 'shared/credentials_inventory/expiry_date', credential: ssh_key

ee/spec/support/shared_examples/features/credentials_inventory_shared_examples.rb

@@ -38,7 +38,7 @@ RSpec.shared_examples 'credentials inventory expiry date close or past' do
   it 'adds a warning to the expiry date' do
     visit credentials_path
 
-    expect(first_row).to have_selector('[data-testid="expiry-date-icon"]', class: expected_css_class)
+    expect(first_row.find('[data-testid="expiry-date-icon"]').find('svg').native.inner_html).to match(/<use xlink:href=".+?icons-.+?##{expected_icon}">/)
   end
 end
 
@@ -86,7 +86,7 @@ RSpec.shared_examples_for 'credentials inventory personal access tokens' do |gro
     end
 
     context 'and is near expiry' do
-      let(:expected_css_class) { 'text-warning' }
+      let(:expected_icon) { 'warning' }
       let(:view_at_date) { 1.day.ago }
 
       it_behaves_like 'credentials inventory expiry date'
@@ -94,7 +94,7 @@ RSpec.shared_examples_for 'credentials inventory personal access tokens' do |gro
     end
 
     context 'and is expired' do
-      let(:expected_css_class) { 'text-danger' }
+      let(:expected_icon) { 'error' }
       let(:view_at_date) { 2.days.since }
 
       it_behaves_like 'credentials inventory expiry date'
@@ -168,7 +168,7 @@ RSpec.shared_examples_for 'credentials inventory SSH keys' do |group_managed_acc
     end
 
     context 'and is near expiry' do
-      let(:expected_css_class) { 'text-warning' }
+      let(:expected_icon) { 'warning' }
       let(:view_at_date) { 1.day.ago }
 
       it_behaves_like 'credentials inventory expiry date'
@@ -176,7 +176,7 @@ RSpec.shared_examples_for 'credentials inventory SSH keys' do |group_managed_acc
     end
 
     context 'and is expired' do
-      let(:expected_css_class) { 'text-danger' }
+      let(:expected_icon) { 'error' }
       let(:view_at_date) { 2.days.since }
 
       it_behaves_like 'credentials inventory expiry date'