Merge branch '40468-empty-states' into 'master'

Resolve "Update styling of empty states"

Closes #40468

See merge request gitlab-org/gitlab-ce!15791

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

 <script>
-export default {
-  props: {
-    helpPagePath: {
-      type: String,
-      required: true,
+  export default {
+    props: {
+      helpPagePath: {
+        type: String,
+        required: true,
+      },
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
     },
-    emptyStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
-};
+  };
 </script>
-
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content">
-        <img :src="emptyStateSvgPath"/>
+      <div class="svg-content svg-250">
+        <img :src="emptyStateSvgPath" />
       </div>
     </div>
 
-    <div class="col-xs-12 text-center">
+    <div class="col-xs-12">
       <div class="text-content">
-        <h4>Build with confidence</h4>
+        <h4 class="text-center">
+          {{ s__("Pipelines|Build with confidence") }}
+        </h4>
         <p>
-          Continous Integration can help catch bugs by running your tests automatically,
-          while Continuous Deployment can help you deliver code to your product environment.
+          {{ s__("Pipelines|Continous Integration can help catch bugs by running your tests automatically, while Continuous Deployment can help you deliver code to your product environment.") }}
         </p>
-        <a :href="helpPagePath" class="btn btn-info">
-          Get started with Pipelines
-        </a>
+        <div class="text-center">
+          <a
+            :href="helpPagePath"
+            class="btn btn-info"
+            >
+            {{ s__("Pipelines|Get started with Pipelines") }}
+          </a>
+        </div>
       </div>
     </div>
   </div>

app/assets/javascripts/pipelines/pipelines_bundle.js

 import Vue from 'vue';
 import PipelinesStore from './stores/pipelines_store';
 import pipelinesComponent from './components/pipelines.vue';
+import Translate from '../vue_shared/translate';
+
+Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#pipelines-list-vue',

app/assets/stylesheets/framework/images.scss

@@ -19,6 +19,13 @@
     max-width: 425px;
     width: 100%;
   }
+
+  &.svg-250 {
+    img,
+    svg {
+      width: 250px;
+    }
+  }
 }
 
 @mixin svg-size($size) {

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

@@ -83,12 +83,12 @@
         You're all done!
   - elsif current_user.todos.any?
     .todos-all-done
-      .svg-content
+      .svg-content.svg-250
         = image_tag 'illustrations/todos_all_done.svg'
       - if todos_filter_empty?
         %h4.text-center
           = Gitlab.config.gitlab.no_todos_messages.sample
-        %p.text-center
+        %p
           Are you looking for things to do? Take a look at
           = succeed "," do
             = link_to "the opened issues", issues_dashboard_path
@@ -104,7 +104,7 @@
         = image_tag 'illustrations/todos_empty.svg'
       .todos-empty-content
         %h4
-          Todos let you see what you should do next.
+          Todos let you see what you should do next
         %p
           When an issue or merge request is assigned to you, or when you
           %strong

app/views/projects/clusters/_empty_state.html.haml

 .row.empty-state
   .col-xs-12
     .svg-content= image_tag 'illustrations/clusters_empty.svg'
-  .col-xs-12.text-center
+  .col-xs-12
     .text-content
-      %h4= s_('ClusterIntegration|Integrate cluster automation')
+      %h4.text-center= s_('ClusterIntegration|Integrate cluster automation')
       - link_to_help_page = link_to(s_('ClusterIntegration|Learn more about Clusters'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
       %p= s_('ClusterIntegration|Clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way. %{link_to_help_page}').html_safe % { link_to_help_page: link_to_help_page}
 
-      %p
+      .text-center
         = link_to s_('ClusterIntegration|Add cluster'), new_project_cluster_path(@project), class: 'btn btn-success'
 

app/views/shared/empty_states/_issues.html.haml

@@ -6,18 +6,21 @@
   .col-xs-12
     .svg-content
       = image_tag 'illustrations/issues.svg'
-  .col-xs-12.text-center
+  .col-xs-12
     .text-content
       - if has_button && current_user
         %h4
-          The Issue Tracker is the place to add things that need to be improved or solved in a project
+          = _("The Issue Tracker is the place to add things that need to be improved or solved in a project")
         %p
-          Issues can be bugs, tasks or ideas to be discussed.
-          Also, issues are searchable and filterable.
-        - if project_select_button
-          = render 'shared/new_project_item_select', path: 'issues/new', label: 'New issue', type: :issues
-        - else
-          = link_to 'New issue', button_path, class: 'btn btn-new', title: 'New issue', id: 'new_issue_link'
+          = _("Issues can be bugs, tasks or ideas to be discussed. Also, issues are searchable and filterable.")
+        .text-center
+          - if project_select_button
+            = render 'shared/new_project_item_select', path: 'issues/new', label: 'New issue', type: :issues
+          - else
+            = link_to 'New issue', button_path, class: 'btn btn-success', title: 'New issue', id: 'new_issue_link'
       - else
+        %h4.text-center= _("There are no issues to show")
+        %p
+          = _("The Issue Tracker is the place to add things that need to be improved or solved in a project. You can register or sign in to create issues for this project.")
         .text-center
-          %h4 There are no issues to show.
+          = link_to _('Register / Sign In'), new_user_session_path, class: 'btn btn-success'

app/views/shared/empty_states/_labels.html.haml

@@ -2,10 +2,10 @@
   .col-xs-12
     .svg-content
       = image_tag 'illustrations/labels.svg'
-  .col-xs-12.text-center
+  .col-xs-12
     .text-content
-      %h4 Labels can be applied to issues and merge requests to categorize them.
-      %p You can also star a label to make it a priority label.
+      %h4= _("Labels can be applied to issues and merge requests to categorize them.")
+      %p= _("You can also star a label to make it a priority label.")
       - if can?(current_user, :admin_label, @project)
-        = link_to 'New label', new_project_label_path(@project), class: 'btn btn-new', title: 'New label', id: 'new_label_link'
-        = link_to 'Generate a default set of labels', generate_project_labels_path(@project), method: :post, class: 'btn btn-success btn-inverted', title: 'Generate a default set of labels', id: 'generate_labels_link'
+        = link_to _('New label'), new_project_label_path(@project), class: 'btn btn-new', title: _('New label'), id: 'new_label_link'
+        = link_to _('Generate a default set of labels'), generate_project_labels_path(@project), method: :post, class: 'btn btn-success btn-inverted', title: _('Generate a default set of labels'), id: 'generate_labels_link'

app/views/shared/empty_states/_merge_requests.html.haml

@@ -6,17 +6,18 @@
   .col-xs-12
     .svg-content
       = image_tag 'illustrations/merge_requests.svg'
-  .col-xs-12.text-center
+  .col-xs-12
     .text-content
       - if has_button
         %h4
-          Merge requests are a place to propose changes you've made to a project and discuss those changes with others.
+          = _("Merge requests are a place to propose changes you've made to a project and discuss those changes with others")
         %p
-          Interested parties can even contribute by pushing commits if they want to.
-        - if project_select_button
-          = render 'shared/new_project_item_select', path: 'merge_requests/new', label: 'New merge request', type: :merge_requests
-        - else
-          = link_to 'New merge request', button_path, class: 'btn btn-new', title: 'New merge request', id: 'new_merge_request_link'
+          = _("Interested parties can even contribute by pushing commits if they want to.")
+        .text-center
+          - if project_select_button
+            = render 'shared/new_project_item_select', path: 'merge_requests/new', label: _('New merge request'), type: :merge_requests
+          - else
+            = link_to _('New merge request'), button_path, class: 'btn btn-new', title: _('New merge request'), id: 'new_merge_request_link'
       - else
         %h4.text-center
-          There are no merge requests to show.
+          = _("There are no merge requests to show")

config/no_todos_messages.yml

@@ -3,9 +3,9 @@
 #
 # If you come up with a fun one, please feel free to contribute it to GitLab!
 # https://about.gitlab.com/contributing/
---- 
-- Good job! Looks like you don't have any todos left.
+---
+- Good job! Looks like you don't have any todos left
 - Isn't an empty todo list beautiful?
 - Give yourself a pat on the back!
 - Nothing left to do, high five!
-- Henceforth you shall be known as "Todo Destroyer".
+- Henceforth you shall be known as "Todo Destroyer"

spec/features/dashboard/todos/todos_spec.rb

@@ -13,7 +13,7 @@ feature 'Dashboard Todos' do
     end
 
     it 'shows "All done" message' do
-      expect(page).to have_content 'Todos let you see what you should do next.'
+      expect(page).to have_content 'Todos let you see what you should do next'
     end
   end