Improve dashboard projects blank state code

- Replace global css with utility classes where possible
- Move blank state css to page bundle
- Make UI text translatable

Changelog: fixed

app/assets/javascripts/environments/components/empty_state.vue

@@ -12,10 +12,10 @@ export default {
 <template>
   <div class="empty-state">
     <div class="text-content">
-      <h4 class="blank-state-title js-blank-state-title">
+      <h4 class="js-blank-state-title">
         {{ s__("Environments|You don't have any environments right now") }}
       </h4>
-      <p class="blank-state-text">
+      <p>
         {{
           s__(`Environments|Environments are places where
         code gets deployed, such as staging or production.`)

app/assets/stylesheets/framework.scss

@@ -46,7 +46,6 @@
 @import 'framework/toggle';
 @import 'framework/typography';
 @import 'framework/zen';
-@import 'framework/blank';
 @import 'framework/wells';
 @import 'framework/page_header';
 @import 'framework/page_title';

app/assets/stylesheets/framework/blank.scss

-.blank-state-parent-container {
-  .section-container {
-    padding: 10px;
-  }
-
-  .section-body {
-    width: 100%;
-    height: 100%;
-    padding-bottom: 25px;
-    border-radius: $border-radius-default;
-  }
-}
-
-.blank-state-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.blank-state-welcome {
-  text-align: center;
-  padding: $gl-padding 0 ($gl-padding * 2);
-
-  .blank-state-welcome-title {
-    font-size: 24px;
-  }
-
-  .blank-state-text {
-    margin-bottom: 0;
-  }
-}
-
-.blank-state-link {
-  color: $gl-text-color;
-  margin-bottom: 15px;
-
-  &:hover {
-    background-color: $gray-light;
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-}
-
-.blank-state-center {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
-}
-
-.blank-state {
-  display: flex;
-  align-items: center;
-  padding: 20px 50px;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  min-height: 240px;
-  margin-bottom: $gl-padding;
-  width: calc(50% - #{$gl-padding-8});
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    padding: 50px 20px;
-
-    .column-small & {
-      width: 100%;
-    }
-
-  }
-}
-
-.blank-state,
-.blank-state-center {
-  .blank-state-icon {
-    svg {
-      display: block;
-      margin: auto;
-    }
-  }
-
-  .blank-state-title {
-    margin-top: 0;
-    font-size: 18px;
-  }
-
-  .blank-state-body {
-    @include media-breakpoint-down(sm) {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 20px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .column-large {
-    flex: 2;
-  }
-
-  .column-small {
-    flex: 1;
-    margin-bottom: 15px;
-
-    .blank-state {
-      max-width: 400px;
-      flex-wrap: wrap;
-      margin-left: 15px;
-    }
-
-    .blank-state-icon {
-      margin-bottom: 30px;
-    }
-  }
-}

app/assets/stylesheets/page_bundles/dashboard_projects.scss

+@import 'mixins_and_variables_and_functions';
+
+.blank-state {
+  padding: 20px 50px;
+  min-height: 240px;
+  width: calc(50% - #{$gl-padding-8});
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
+  }
+}
+
+.blank-state-link {
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state-icon {
+  svg {
+    display: block;
+  }
+}
+
+.blank-state-body {
+  @include media-breakpoint-down(sm) {
+    text-align: center;
+    margin-top: 20px;
+  }
+}

app/views/dashboard/projects/_blank_state_admin_welcome.html.haml

-.blank-state-row
+- link_classes = "blank-state blank-state-link gl-text-body gl-display-flex gl-align-items-center gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-mb-5"
+
+.gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
   - if has_start_trial?
     = render_if_exists "dashboard/projects/blank_state_ee_trial"
 
-  = link_to new_project_path, class: "blank-state blank-state-link" do
+  = link_to new_project_path, class: link_classes do
     .blank-state-icon
       = custom_icon("add_new_project", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Create a project
-      %p.blank-state-text
-        Projects are where you store your code, access issues, wiki and other features of GitLab.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Create a project')
+      %p
+        = _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
 
   - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state blank-state-link" do
+    = link_to new_group_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_group", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a group
-        %p.blank-state-text
-          Groups are a great way to organize projects and people.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a group')
+        %p
+          = _('Groups are a great way to organize projects and people.')
 
-    = link_to new_admin_user_path, class: "blank-state blank-state-link" do
+    = link_to new_admin_user_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_user", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Add people
-        %p.blank-state-text
-          Add your team members and others to GitLab.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Add people')
+        %p
+          = _('Add your team members and others to GitLab.')
 
-  = link_to admin_root_path, class: "blank-state blank-state-link" do
+  = link_to admin_root_path, class: link_classes do
     .blank-state-icon
       = custom_icon("configure_server", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Configure GitLab
-      %p.blank-state-text
-        Make adjustments to how your GitLab instance is set up.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Configure GitLab')
+      %p
+        = _('Make adjustments to how your GitLab instance is set up.')

app/views/dashboard/projects/_blank_state_welcome.html.haml

-.blank-state-row
+- link_classes = "blank-state blank-state-link gl-text-body gl-display-flex gl-align-items-center gl-border-1 gl-border-solid gl-border-gray-100 gl-rounded-base gl-mb-5"
+
+.gl-display-flex.gl-flex-wrap.gl-justify-content-space-between
   - if current_user.can_create_project?
-    = link_to new_project_path, class: "blank-state blank-state-link" do
+    = link_to new_project_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_project", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a project
-        %p.blank-state-text
-          Projects are where you store your code, access issues, wiki and other features of GitLab.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a project')
+        %p
+          = _('Projects are where you store your code, access issues, wiki and other features of GitLab.')
   - else
-    .blank-state
+    .blank-state.gl-display-flex.gl-align-items-center.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base.gl-mb-5
       .blank-state-icon
         = custom_icon("add_new_project", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a project
-        %p.blank-state-text
-          If you are added to a project, it will be displayed here.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a project')
+        %p
+          = _('If you are added to a project, it will be displayed here.')
 
   - if current_user.can_create_group?
-    = link_to new_group_path, class: "blank-state blank-state-link" do
+    = link_to new_group_path, class: link_classes do
       .blank-state-icon
         = custom_icon("add_new_group", size: 50)
-      .blank-state-body
-        %h3.blank-state-title
-          Create a group
-        %p.blank-state-text
-          Groups are the best way to manage projects and members.
+      .blank-state-body.gl-sm-pl-0.gl-pl-6
+        %h3.gl-font-size-h2.gl-mt-0
+          = _('Create a group')
+        %p
+          = _('Groups are the best way to manage projects and members.')
 
-  = link_to trending_explore_projects_path, class: "blank-state blank-state-link" do
+  = link_to trending_explore_projects_path, class: link_classes do
     .blank-state-icon
       = custom_icon("globe", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Explore public projects
-      %p.blank-state-text
-        Public projects are an easy way to allow
-        everyone to have read-only access.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Explore public projects')
+      %p
+        = _('Public projects are an easy way to allow everyone to have read-only access.')
 
-  = link_to "https://docs.gitlab.com/", class: "blank-state blank-state-link" do
+  = link_to "https://docs.gitlab.com/", class: link_classes do
     .blank-state-icon
       = custom_icon("lightbulb", size: 50)
-    .blank-state-body
-      %h3.blank-state-title
-        Learn more about GitLab
-      %p.blank-state-text
-        Take a look at the documentation to discover all of GitLab's capabilities.
+    .blank-state-body.gl-sm-pl-0.gl-pl-6
+      %h3.gl-font-size-h2.gl-mt-0
+        = _('Learn more about GitLab')
+      %p
+        = _('Take a look at the documentation to discover all of GitLab’s capabilities.')

app/views/dashboard/projects/_zero_authorized_projects.html.haml

-.blank-state-parent-container
-  .section-container.section-welcome{ class: "#{ 'section-admin-welcome' if current_user.admin? }" }
-    .container.section-body
-      .row
-        .blank-state-welcome.w-100
-          %h2.blank-state-welcome-title{ data: { qa_selector: 'welcome_title_content' } }
-            = _('Welcome to GitLab')
-          %p.blank-state-text
-            = _('Faster releases. Better code. Less pain.')
-        - if current_user.admin?
-          = render "blank_state_admin_welcome"
-        - else
-          = render "blank_state_welcome"
+.container
+  .gl-text-center.gl-pt-6.gl-pb-7
+    %h2.gl-font-size-h1{ data: { qa_selector: 'welcome_title_content' } }
+      = _('Welcome to GitLab')
+    %p.gl-m-0
+      = _('Faster releases. Better code. Less pain.')
+  - if current_user.admin?
+    = render "blank_state_admin_welcome"
+  - else
+    = render "blank_state_welcome"

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

@@ -7,6 +7,7 @@
 
 - page_title    _("Projects")
 - header_title  _("Projects"), dashboard_projects_path
+- add_page_specific_style 'page_bundles/dashboard_projects'
 
 = render "projects/last_push"
 - if show_projects?(@projects, params)

app/views/projects/environments/show.html.haml

@@ -14,7 +14,7 @@
         .text-content
           %h4.state-title
             = _("You don't have any deployments right now.")
-          %p.blank-state-text
+          %p
             = html_escape(_("Define environments in the deploy stage(s) in %{code_open}.gitlab-ci.yml%{code_close} to track deployments here.")) % { code_open: '<code>'.html_safe, code_close: '</code>'.html_safe }
           .text-center
             = link_to _("Read more"), help_page_path("ci/environments/index.md"), class: "gl-button btn btn-confirm"

config/application.rb

@@ -257,6 +257,7 @@ module Gitlab
     config.assets.precompile << "page_bundles/build.css"
     config.assets.precompile << "page_bundles/ci_status.css"
     config.assets.precompile << "page_bundles/cycle_analytics.css"
+    config.assets.precompile << "page_bundles/dashboard_projects.css"
     config.assets.precompile << "page_bundles/dev_ops_reports.css"
     config.assets.precompile << "page_bundles/environments.css"
     config.assets.precompile << "page_bundles/epics.css"

ee/app/views/dashboard/projects/_blank_state_ee_trial.html.haml

 -# EE:Self Managed
-.blank-state
+.blank-state.gl-display-flex.gl-align-items-center.gl-border-1.gl-border-solid.gl-border-gray-100.gl-rounded-base.gl-mb-5
   .blank-state-icon
     = image_tag("illustrations/lock_promotion.svg", { lazy: false })
-  .blank-state-body
-    %h3.blank-state-title
-      Unlock more features with GitLab Ultimate
-    %p.blank-state-text
-      GitLab is free to use.
-      Many features for larger teams are part of
-      our
-      = succeed "." do
-        = link_to "paid products", "https://about.gitlab.com/pricing/", target: "_blank", rel: "noopener noreferrer nofollow"
-      You can try Ultimate for free without
-      any obligation or payment details.
+  .blank-state-body.gl-sm-pl-0.gl-pl-6
+    %h3.gl-font-size-h2.gl-mt-0
+      = _('Unlock more features with GitLab Ultimate')
+    %p
+      = _('GitLab is free to use. Many features for larger teams are part of our %{link_start}paid products%{link_end}. You can try Ultimate for free without any obligation or payment details.').html_safe % { link_start: '<a href="https://about.gitlab.com/pricing/">'.html_safe, link_end: '</a>'.html_safe }
     = link_to new_trial_url, class: "gl-button btn btn-success" do
-      Start free trial
+      = _('Start free trial')

locale/gitlab.pot

@@ -2188,6 +2188,9 @@ msgstr ""
 msgid "Add or subtract spent time"
 msgstr ""
 
+msgid "Add people"
+msgstr ""
+
 msgid "Add previously merged commits"
 msgstr ""
 
@@ -2254,6 +2257,9 @@ msgstr ""
 msgid "Add webhook"
 msgstr ""
 
+msgid "Add your team members and others to GitLab."
+msgstr ""
+
 msgid "Add/remove"
 msgstr ""
 
@@ -9078,6 +9084,9 @@ msgstr ""
 msgid "Configure Dependency Scanning in `.gitlab-ci.yml`, creating this file if it does not already exist"
 msgstr ""
 
+msgid "Configure GitLab"
+msgstr ""
+
 msgid "Configure GitLab runners to start using the Web Terminal. %{helpStart}Learn more.%{helpEnd}"
 msgstr ""
 
@@ -10068,6 +10077,9 @@ msgstr ""
 msgid "Create a Mattermost team for this group"
 msgstr ""
 
+msgid "Create a group"
+msgstr ""
+
 msgid "Create a merge request"
 msgstr ""
 
@@ -10092,6 +10104,9 @@ msgstr ""
 msgid "Create a personal access token on your account to pull or push via %{protocol}."
 msgstr ""
 
+msgid "Create a project"
+msgstr ""
+
 msgid "Create an account using:"
 msgstr ""
 
@@ -14581,6 +14596,9 @@ msgstr ""
 msgid "Explore public groups"
 msgstr ""
 
+msgid "Explore public projects"
+msgstr ""
+
 msgid "Explore snippets"
 msgstr ""
 
@@ -16322,6 +16340,9 @@ msgstr ""
 msgid "GitLab is a single application for the entire software development lifecycle. From project planning and source code management to CI/CD, monitoring, and security."
 msgstr ""
 
+msgid "GitLab is free to use. Many features for larger teams are part of our %{link_start}paid products%{link_end}. You can try Ultimate for free without any obligation or payment details."
+msgstr ""
+
 msgid "GitLab is obtaining a Let's Encrypt SSL certificate for this domain. This process can take some time. Please try again later."
 msgstr ""
 
@@ -17435,6 +17456,12 @@ msgstr ""
 msgid "Groups and subgroups"
 msgstr ""
 
+msgid "Groups are a great way to organize projects and people."
+msgstr ""
+
+msgid "Groups are the best way to manage projects and members."
+msgstr ""
+
 msgid "Groups to synchronize"
 msgstr ""
 
@@ -18066,6 +18093,9 @@ msgstr ""
 msgid "If you add %{codeStart}needs%{codeEnd} to jobs in your pipeline you'll be able to view the %{codeStart}needs%{codeEnd} relationships between jobs in this tab as a %{linkStart}Directed Acyclic Graph (DAG)%{linkEnd}."
 msgstr ""
 
+msgid "If you are added to a project, it will be displayed here."
+msgstr ""
+
 msgid "If you did not initiate these sign-in attempts, please reach out to your administrator or enable two-factor authentication (2FA) on your account."
 msgstr ""
 
@@ -21088,6 +21118,9 @@ msgstr ""
 msgid "Learn more about Auto DevOps"
 msgstr ""
 
+msgid "Learn more about GitLab"
+msgstr ""
+
 msgid "Learn more about Needs relationships"
 msgstr ""
 
@@ -21765,6 +21798,9 @@ msgstr ""
 msgid "Maintenance mode"
 msgstr ""
 
+msgid "Make adjustments to how your GitLab instance is set up."
+msgstr ""
+
 msgid "Make and review changes in the browser with the Web IDE"
 msgstr ""
 
@@ -28501,6 +28537,9 @@ msgstr ""
 msgid "Projects are organized into groups"
 msgstr ""
 
+msgid "Projects are where you store your code, access issues, wiki and other features of GitLab."
+msgstr ""
+
 msgid "Projects contributed to"
 msgstr ""
 
@@ -29152,6 +29191,9 @@ msgstr ""
 msgid "Public projects Minutes cost factor"
 msgstr ""
 
+msgid "Public projects are an easy way to allow everyone to have read-only access."
+msgstr ""
+
 msgid "Publish to status page"
 msgstr ""
 
@@ -34143,6 +34185,9 @@ msgstr ""
 msgid "Start date"
 msgstr ""
 
+msgid "Start free trial"
+msgstr ""
+
 msgid "Start merge train"
 msgstr ""
 
@@ -35217,6 +35262,9 @@ msgstr ""
 msgid "TagsPage|protected"
 msgstr ""
 
+msgid "Take a look at the documentation to discover all of GitLab’s capabilities."
+msgstr ""
+
 msgid "Target Branch"
 msgstr ""
 
@@ -38389,6 +38437,9 @@ msgstr ""
 msgid "Unlock account"
 msgstr ""
 
+msgid "Unlock more features with GitLab Ultimate"
+msgstr ""
+
 msgid "Unlock the discussion"
 msgstr ""