Merge branch 'yo-new-admin-header' into 'master'

Admin dashboard redesign

See merge request gitlab-org/gitlab!52176

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"