Redesign admin dashboard

Finish project card

Update user stat card

Update group stat card

Add Changelog

Transparent card footer

Remove div tags

Remove href in span tag

Update Translations

Turn into white bg

Move to card for licence overview

Update licence summary and breakdown

Update Translations

Fix margins

Add separate heading

Update translations

Fix test

Fix test

Update index.html.haml_spec.rb

Update index.html.haml_spec.rb

Move to span

Fix test

Switch to col-md-4

Fix mobile view

Fix Test

app/assets/javascripts/admin/statistics_panel/components/app.vue

@@ -26,8 +26,8 @@ export default {
 </script>
 
 <template>
-  <div class="info-well">
-    <div class="well-segment admin-well admin-well-statistics">
+  <div class="gl-card">
+    <div class="gl-card-body">
       <h4>{{ __('Statistics') }}</h4>
       <gl-loading-icon v-if="isLoading" size="md" class="my-3" />
       <template v-else>

app/assets/stylesheets/pages/admin.scss

-.info-well {
-  .admin-well-statistics,
-  .admin-well-features {
-    padding-bottom: 46px;
-  }
-}
-
 .usage-data {
   max-height: 400px;
 }

app/views/admin/dashboard/index.html.haml

@@ -15,49 +15,63 @@
     = render_if_exists 'admin/licenses/breakdown'
 
 .admin-dashboard.gl-mt-3
+  .h3.gl-mb-5.gl-mt-0= _('Instance overview')
   .row
-    .col-sm-4
-      .info-well.dark-well.flex-fill
-        .well-segment.well-centered
-          = link_to admin_projects_path do
-            %h3.text-center
-              = s_('AdminArea|Projects: %{number_of_projects}') % { number_of_projects: approximate_count_with_delimiters(@counts, Project) }
-          %hr
-          = link_to(s_('AdminArea|New project'), new_project_path, class: "btn gl-button btn-success gl-w-full")
-    .col-sm-4
-      .info-well.dark-well
-        .well-segment.well-centered.gl-text-center
-          = link_to admin_users_path do
-            %h3.gl-display-inline-block.gl-mb-0
-              = s_('AdminArea|Users: %{number_of_users}') % { number_of_users: approximate_count_with_delimiters(@counts, User) }
-
-          %span.gl-outline-0.gl-ml-2{ href: "#", tabindex: "0", data: { container: "body",
-            toggle: "popover",
-            placement: "top",
-            html: "true",
-            trigger: "focus",
-            content: s_("AdminArea|All users created in the instance, including users who are not %{billable_users_link_start}billable users%{billable_users_link_end}.").html_safe % { billable_users_link_start: billable_users_link_start, billable_users_link_end: '</a>'.html_safe },
-          } }
-            = sprite_icon('question', size: 16, css_class: 'gl-text-gray-700 gl-mb-1')
-
-          %hr
-          .btn-group.d-flex{ role: 'group' }
-            = link_to s_('AdminArea|New user'), new_admin_user_path, class: "btn gl-button btn-success gl-w-full"
-            = link_to s_('AdminArea|Users statistics'), admin_dashboard_stats_path, class: 'btn gl-button btn-info gl-w-full'
-    .col-sm-4
-      .info-well.dark-well
-        .well-segment.well-centered
-          = link_to admin_groups_path do
-            %h3.text-center
-              = s_('AdminArea|Groups: %{number_of_groups}') % { number_of_groups: approximate_count_with_delimiters(@counts, Group) }
-          %hr
-          = link_to s_('AdminArea|New group'), new_admin_group_path, class: "btn gl-button btn-success gl-w-full"
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body.d-flex.justify-content-between.align-items-center.gl-p-6
+          %span
+            .d-flex.align-items-center
+              = sprite_icon('project', size: 16, css_class: 'gl-text-gray-700')
+              %h3.gl-m-0.gl-ml-3= approximate_count_with_delimiters(@counts, Project)
+            .gl-mt-3.text-uppercase= s_('AdminArea|Projects')
+          = link_to(s_('AdminArea|New project'), new_project_path, class: "btn gl-button btn-default")
+        .gl-card-footer.gl-bg-transparent
+          .d-flex.align-items-center
+            = link_to(s_('AdminArea|View latest projects'), admin_projects_path)
+            = sprite_icon('angle-right', size: 12, css_class: 'gl-text-gray-700 gl-ml-2')
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body.d-flex.justify-content-between.align-items-center.gl-p-6
+          %span
+            .d-flex.align-items-center
+              = sprite_icon('users', size: 16, css_class: 'gl-text-gray-700')
+              %h3.gl-m-0.gl-ml-3= approximate_count_with_delimiters(@counts, User)
+              %span.gl-outline-0.gl-ml-3{ tabindex: "0", data: { container: "body",
+                toggle: "popover",
+                placement: "top",
+                html: "true",
+                trigger: "focus",
+                content: s_("AdminArea|All users created in the instance, including users who are not %{billable_users_link_start}billable users%{billable_users_link_end}.").html_safe % { billable_users_link_start: billable_users_link_start, billable_users_link_end: '</a>'.html_safe },
+              } }
+                = sprite_icon('question', size: 16, css_class: 'gl-text-gray-700')
+            .gl-mt-3.text-uppercase
+              = s_('AdminArea|Users')
+              = link_to(s_('AdminArea|Users statistics'), admin_dashboard_stats_path, class: "text-capitalize gl-ml-2")
+          = link_to(s_('AdminArea|New user'), new_admin_user_path, class: "btn gl-button btn-default")
+        .gl-card-footer.gl-bg-transparent
+          .d-flex.align-items-center
+            = link_to(s_('AdminArea|View latest users'), admin_users_path)
+            = sprite_icon('angle-right', size: 12, css_class: 'gl-text-gray-700 gl-ml-2')
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body.d-flex.justify-content-between.align-items-center.gl-p-6
+          %span
+            .d-flex.align-items-center
+              = sprite_icon('group', size: 16, css_class: 'gl-text-gray-700')
+              %h3.gl-m-0.gl-ml-3= approximate_count_with_delimiters(@counts, Group)
+            .gl-mt-3.text-uppercase= s_('AdminArea|Projects')
+          = link_to(s_('AdminArea|New group'), new_admin_group_path, class: "btn gl-button btn-default")
+        .gl-card-footer.gl-bg-transparent
+          .d-flex.align-items-center
+            = link_to(s_('AdminArea|View latest groups'), admin_groups_path)
+            = sprite_icon('angle-right', size: 12, css_class: 'gl-text-gray-700 gl-ml-2')
   .row
-    .col-md-4
+    .col-md-4.gl-mb-6
       #js-admin-statistics-container
-    .col-md-4
-      .info-well
-        .well-segment.admin-well.admin-well-features
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body
           %h4= s_('AdminArea|Features')
           = feature_entry(_('Sign up'),
             href: general_admin_application_settings_path(anchor: 'js-signup-settings'),
@@ -94,9 +108,9 @@
           = feature_entry(_('Shared Runners'),
             href: admin_runners_path,
             enabled: Gitlab.config.gitlab_ci.shared_runners_enabled)
-    .col-md-4
-      .info-well
-        .well-segment.admin-well
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body
           %h4
             = s_('AdminArea|Components')
             - if Gitlab::CurrentSettings.version_check_enabled
@@ -146,18 +160,18 @@
           %p
             = link_to _("Gitaly Servers"), admin_gitaly_servers_path
   .row
-    .col-md-4
-      .info-well
-        .well-segment.admin-well
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body
           %h4= s_('AdminArea|Latest projects')
           - @projects.each do |project|
             %p
               = link_to project.full_name, admin_project_path(project), class: 'str-truncated-60'
               %span.light.float-right
                 #{time_ago_with_tooltip(project.created_at)}
-    .col-md-4
-      .info-well
-        .well-segment.admin-well
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body
           %h4= s_('AdminArea|Latest users')
           - @users.each do |user|
             %p
@@ -165,9 +179,9 @@
                 = user.name
               %span.light.float-right
                 #{time_ago_with_tooltip(user.created_at)}
-    .col-md-4
-      .info-well
-        .well-segment.admin-well
+    .col-md-4.gl-mb-6
+      .gl-card
+        .gl-card-body
           %h4= s_('AdminArea|Latest groups')
           - @groups.each do |group|
             %p

changelogs/unreleased/yo-new-admin-header.yml

+---
+title: Admin dashboard basic stats redesign
+merge_request: 52176
+author: Yogi (@yo)
+type: changed

ee/app/views/admin/licenses/_breakdown.html.haml

@@ -4,46 +4,44 @@
 - billable_users_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer nofollow">'.html_safe % { url: billable_users_url }
 - link_end = '</a>'.html_safe
 
-.d-flex.gl-mb-5
-  .col-sm-6.d-flex.pl-0
-    .info-well.dark-well.gl-mb-0
-      .well-segment.well-centered
-        %h3.center
-          = _('Users in License:')
-          = licensed_users(@license)
-        %hr
-        - if @license.will_expire?
-          = _('Your license is valid from')
-          %strong<>
-            = _(' %{start} to %{end}') % { start: @license.starts_at, end: @license.expires_at }
-          \.
-        = _('The %{link_start}true-up model%{link_end} allows having more users, and additional users will incur a retroactive charge on renewal.').html_safe % { link_start: true_up_link_start, link_end: link_end }
-        = seats_calculation_message(@license)
-  .col-sm-6.d-flex.pr-0
-    .info-well.dark-well.gl-mb-0
-      .well-segment.well-centered
-        %h3.center
-          = _('Billable Users:')
-          = number_with_delimiter @license.daily_billable_users_count
-        %hr
+.d-flex
+  .row
+    .col-sm-6.d-flex.gl-mb-5
+      .gl-card
+        .gl-card-body
+          %h2.gl-mt-0
+            = licensed_users(@license)
+          .text-uppercase.gl-mb-4= _('Users in License')
+          - if @license.will_expire?
+            = _('Your license is valid from')
+            %strong<>
+              = _(' %{start} to %{end}') % { start: @license.starts_at, end: @license.expires_at }
+            \.
+          = _('The %{link_start}true-up model%{link_end} allows having more users, and additional users will incur a retroactive charge on renewal.').html_safe % { link_start: true_up_link_start, link_end: link_end }
+          = seats_calculation_message(@license)
+    .col-sm-6.d-flex.gl-mb-5
+      .gl-card
+        .gl-card-body
+          %h2.gl-mt-0
+            = number_with_delimiter @license.daily_billable_users_count
+          .text-uppercase.gl-mb-4= _('Billable Users')
           %p
           = _('This is the number of %{billable_users_link_start}billable users%{link_end} on your installation, and this is the minimum number you need to purchase when you renew your license.').html_safe % { billable_users_link_start: billable_users_link_start, link_end: link_end }
-.d-flex.gl-pb-5
-  .col-sm-6.d-flex.pl-0
-    .info-well.dark-well.flex-fill.gl-mb-0
-      .well-segment.well-centered
-        %h3.center
-          = _('Maximum Users:')
-          = number_with_delimiter @license.maximum_user_count
-        %hr
+.d-flex
+  .row
+    .col-sm-6.d-flex.gl-mb-5
+      .gl-card.flex-fill
+        .gl-card-body
+          %h2.gl-mt-0
+            = number_with_delimiter @license.maximum_user_count
+          .text-uppercase.gl-mb-4= _('Maximum Users')
           = _('This is the highest peak of users on your installation since the license started.')
-  .col-sm-6.d-flex.pr-0
-    .info-well.dark-well.gl-mb-0
-      .well-segment.well-centered
-        %h3.center
-          = _('Users over License:')
-          = number_with_delimiter users_over_license
-        %hr
+    .col-sm-6.d-flex.gl-mb-5
+      .gl-card
+        .gl-card-body
+          %h2.gl-mt-0
+            = number_with_delimiter users_over_license
+          .text-uppercase.gl-mb-4= _('Users over License')
           - if users_over_license > 0
             .gl-alert.gl-alert-info.gl-mb-3{ role: 'alert' }
               = sprite_icon('information-o', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')

ee/app/views/admin/licenses/_summary.html.haml

-.gl-mb-5.info-well.dark-well
-  .gl-display-flex.gl-justify-content-space-between.gl-align-items-center.gl-p-5
+.h3.gl-mb-5= _('License overview')
+.gl-mb-5.gl-card
+  .gl-display-flex.gl-justify-content-space-between.gl-align-items-center.gl-card-body
     %div
-      %h4.gl-mt-0
-        = _('License overview')
       %p.gl-mb-0
         = sprite_icon('license', css_class: 'gl-fill-gray-700')
         %span.gl-ml-3
@@ -15,4 +14,4 @@
           %strong= @license.licensee['Name']
           = "(#{@license.licensee['Email']})"
     %div
-      = link_to 'View details', admin_license_path, class: "gl-button btn btn-secondary"
+      = link_to 'View details', admin_license_path, class: "gl-button btn btn-default"

ee/spec/views/admin/dashboard/index.html.haml_spec.rb

@@ -45,7 +45,7 @@ RSpec.describe 'admin/dashboard/index.html.haml' do
     it 'includes license breakdown' do
       render
 
-      expect(rendered).to have_content "Users in License:"
+      expect(rendered).to have_content "Users in License"
       expect(rendered).to have_content "Billable Users"
       expect(rendered).to have_content "Maximum Users"
       expect(rendered).to have_content "Users over License"
@@ -56,7 +56,7 @@ RSpec.describe 'admin/dashboard/index.html.haml' do
     it 'does not show content' do
       render
 
-      expect(rendered).not_to have_content 'Users in License:'
+      expect(rendered).not_to have_content "USERS IN LICENSE"
     end
   end
 end

ee/spec/views/admin/licenses/show.html.haml_spec.rb

@@ -29,7 +29,7 @@ RSpec.describe 'admin/licenses/show.html.haml' do
 
       expect(rendered).not_to have_content('Buy License')
       expect(rendered).to have_content('Licensed to')
-      expect(rendered).to have_content('Users in License:')
+      expect(rendered).to have_content('Users in License')
       expect(rendered).to have_content('Upload New License')
     end
   end
@@ -39,7 +39,7 @@ RSpec.describe 'admin/licenses/show.html.haml' do
       render
 
       expect(rendered).not_to have_content('Licensed to')
-      expect(rendered).not_to have_content('Users in License:')
+      expect(rendered).not_to have_content('Users in License')
       expect(rendered).to have_content('Upload New License')
     end
   end

locale/gitlab.pot

@@ -1927,9 +1927,6 @@ msgstr ""
 msgid "AdminArea|Features"
 msgstr ""
 
-msgid "AdminArea|Groups: %{number_of_groups}"
-msgstr ""
-
 msgid "AdminArea|Guest"
 msgstr ""
 
@@ -1963,7 +1960,7 @@ msgstr ""
 msgid "AdminArea|Owner"
 msgstr ""
 
-msgid "AdminArea|Projects: %{number_of_projects}"
+msgid "AdminArea|Projects"
 msgstr ""
 
 msgid "AdminArea|Reporter"
@@ -1987,6 +1984,9 @@ msgstr ""
 msgid "AdminArea|User cap"
 msgstr ""
 
+msgid "AdminArea|Users"
+msgstr ""
+
 msgid "AdminArea|Users statistics"
 msgstr ""
 
@@ -1996,7 +1996,13 @@ msgstr ""
 msgid "AdminArea|Users without a Group and Project"
 msgstr ""
 
-msgid "AdminArea|Users: %{number_of_users}"
+msgid "AdminArea|View latest groups"
+msgstr ""
+
+msgid "AdminArea|View latest projects"
+msgstr ""
+
+msgid "AdminArea|View latest users"
 msgstr ""
 
 msgid "AdminArea|You’re about to stop all jobs.This will halt all current jobs that are running."
@@ -4445,7 +4451,7 @@ msgstr ""
 msgid "Bi-weekly code coverage"
 msgstr ""
 
-msgid "Billable Users:"
+msgid "Billable Users"
 msgstr ""
 
 msgid "Billing"
@@ -15281,6 +15287,9 @@ msgstr ""
 msgid "Instance administrators group already exists"
 msgstr ""
 
+msgid "Instance overview"
+msgstr ""
+
 msgid "InstanceStatistics|Could not load the issues and merge requests chart. Please refresh the page to try again."
 msgstr ""
 
@@ -17460,7 +17469,7 @@ msgstr ""
 msgid "Maximum PyPI package file size in bytes"
 msgstr ""
 
-msgid "Maximum Users:"
+msgid "Maximum Users"
 msgstr ""
 
 msgid "Maximum allowable lifetime for personal access token (days)"
@@ -31166,13 +31175,10 @@ msgstr ""
 msgid "Users in License"
 msgstr ""
 
-msgid "Users in License:"
-msgstr ""
-
 msgid "Users or groups set as approvers in the project's or merge request's settings."
 msgstr ""
 
-msgid "Users over License:"
+msgid "Users over License"
 msgstr ""
 
 msgid "Users requesting access to"