Improve styling and specs for support api token index page

app/views/support_interface/api_tokens/index.html.erb

@@ -3,15 +3,15 @@
 <%= govuk_button_link_to 'Add a token', new_support_interface_api_token_path %>
 
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-one-quarter">
+  <div class="govuk-grid-column-one-half">
     <%= render SupportInterface::TileComponent.new(
       count: @api_tokens.count,
       label: 'API tokens issued',
       colour: :blue,
       href: '#not-connected',
     ) %>
   </div>
-  <div class="govuk-grid-column-one-quarter">
+  <div class="govuk-grid-column-one-half">
     <%= render SupportInterface::TileComponent.new(
       count: @api_tokens_last_3_months_count,
       label: 'API tokens used in the last 3 months',

spec/system/support_interface/api_tokens/view_tokens_spec.rb

@@ -0,0 +1,40 @@
+require 'rails_helper'
+
+RSpec.describe 'API tokens' do
+  include DfESignInHelpers
+
+  scenario 'Support views vendors with api tokens' do
+    given_i_am_signed_in
+    and_api_tokens_exist
+    when_i_visit_the_tokens_page
+    then_i_see_all_the_providers_with_api_tokens
+  end
+
+  def given_i_am_signed_in
+    sign_in_as_support_user
+  end
+
+  def and_api_tokens_exist
+    vendor = create(:vendor, name: 'vendor_1')
+    provider_1 = create(:provider, name: 'Provider 1', vendor:)
+    provider_2 = create(:provider, name: 'Provider 2', vendor:)
+
+    create(:vendor_api_token, provider: provider_1, last_used_at: 1.month.ago)
+    create(:vendor_api_token, provider: provider_2)
+  end
+
+  def when_i_visit_the_tokens_page
+    visit support_interface_api_tokens_path
+  end
+
+  def then_i_see_all_the_providers_with_api_tokens
+    expect(page).to have_content '2 API tokens issued'
+    expect(page).to have_content '1 API tokens used in the last 3 months'
+
+    within '.govuk-table' do
+      expect(page).to have_content 'Provider 1'
+      expect(page).to have_content 'Provider 2'
+      expect(page).to have_content 'vendor_1'
+    end
+  end
+end