Creates auto devops callout

app/assets/javascripts/dispatcher.js

@@ -155,6 +155,9 @@ import initChangesDropdown from './init_changes_dropdown';
           shortcut_handler = new ShortcutsNavigation();
           new UsersSelect();
           break;
+        case 'projects:merge_requests:index':
+          new UserCallout();
+          break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
           if (filteredSearchEnabled) {
@@ -344,6 +347,7 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
+          new UserCallout();
 
           if ($('#tree-slider').length) new TreeView();
           if ($('.blob-viewer').length) new BlobViewer();
@@ -363,6 +367,9 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:pipelines:new':
           new NewBranchForm($('.js-new-pipeline-form'));
           break;
+        case 'projects:pipelines:index':
+          new UserCallout();
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':
@@ -378,6 +385,8 @@ import initChangesDropdown from './init_changes_dropdown';
               parentEl: '.pipelines-tabs',
             },
           });
+
+          new UserCallout();
           break;
         case 'groups:activity':
           new gl.Activities();
@@ -420,6 +429,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
+          new UserCallout();
           $('#tree-slider').waitForImages(function() {
             gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
           });

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

@@ -25,7 +25,6 @@
 
       return {
         endpoint: pipelinesData.endpoint,
-        cssClass: pipelinesData.cssClass,
         helpPagePath: pipelinesData.helpPagePath,
         autoDevopsPath: pipelinesData.helpautoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
@@ -140,9 +139,7 @@
   };
 </script>
 <template>
-  <div
-    class="pipelines-container"
-    :class="cssClass">
+  <div class="pipelines-container">
     <div
       class="top-area scrolling-tabs-container inner-page-scroll-tabs"
       v-if="!isLoading && !shouldRenderEmptyState">

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

@@ -20,6 +20,8 @@
 
 - if @project.merge_requests.exists?
   %div{ class: container_class }
+    -# TODO add verfication
+    = render 'shared/auto_devops_callout'
     .top-area
       = render 'shared/issuable/nav', type: :merge_requests
       .nav-controls{ class: ("visible-xs" if show_new_nav?) }

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

@@ -2,8 +2,11 @@
 - page_title "Pipelines"
 = render "projects/pipelines/head"
 
-#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
-  "css-class" => container_class,
+%div{ 'class' => container_class }
+  -# TODO add verfication
+  = render 'shared/auto_devops_callout'
+
+  #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
     "help-page-path" => help_page_path('ci/quick_start/README'),
     "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
     "new-pipeline-path" => new_project_pipeline_path(@project),
@@ -17,5 +20,5 @@
     "has-ci" => @repository.gitlab_ci_yml || @project.auto_devops_enabled?,
     "ci-lint-path" => ci_lint_path } }
 
-= page_specific_javascript_bundle_tag('common_vue')
-= page_specific_javascript_bundle_tag('pipelines')
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('pipelines')

app/views/projects/show.html.haml

@@ -81,5 +81,8 @@
 
   - view_path = default_project_view
 
+  -# TODO add verfication
+  = render 'shared/auto_devops_callout'
+
   %div{ class: project_child_container_class(view_path) }
     = render view_path

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

@@ -14,5 +14,7 @@
 = render "projects/commits/head"
 
 %div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+  -# TODO add verfication
+  = render 'shared/auto_devops_callout'
   = render 'projects/last_push'
   = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)

app/views/shared/_auto_devops_callout.html.haml

+.user-callout{ data: { uid: 'TODO' } }
+  .bordered-box.landing.content-block
+    %button.btn.btn-default.close.js-close-callout{ type: 'button',
+      'aria-label' => 'Dismiss Auto Dev Ops box' }
+      = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+    .svg-container
+      = custom_icon('icon_autodevops')
+    .user-callout-copy
+      %h4
+        Auto Dev Ops (Beta)
+      %p
+        Automated Dev Ops can be activated for this project. It will automatically run tests on your code based on a predefined set of rules.
+      %p
+        Learn more in the
+        = link_to 'Auto Dev Ops documentation', help_page_path('topics/autodevops/index.md'), target: '_blank', rel: 'noopener noreferrer'
+
+      = link_to 'Enable in settings', project_settings_ci_cd_path(@project), class: 'btn btn-primary js-close-callout'

app/views/shared/icons/_icon_autodevops.svg

+<svg width="224" height="143" viewBox="0 0 224 143" xmlns="http://www.w3.org/2000/svg"><title>illustration auto-devops</title><g fill="none" fill-rule="evenodd"><path d="M114.16 32.5c-.577-9.034 4.308-16.999 10.91-17.789l39.847-4.77c6.602-.791 12.422 5.89 13 14.926l3.922 61.348c.578 9.034-4.307 16.998-10.909 17.788l-39.847 4.771c-6.602.79-12.422-5.891-13-14.926L114.16 32.5z" fill="#FAFAFA"/><path d="M109.986 24.296c-.481-7.526 3.587-14.161 9.09-14.82l43.833-5.248c5.502-.659 10.352 4.907 10.834 12.435l4.27 66.808c.482 7.526-3.586 14.161-9.09 14.82l-43.832 5.248c-5.502.659-10.352-4.907-10.834-12.435l-4.27-66.808z" stroke="#EEE" stroke-width="3" fill="#FFF" stroke-linecap="round"/><rect fill="#FAFAFA" transform="rotate(10 130.5 47.5)" x="97" y="10" width="67" height="75" rx="12"/><g transform="rotate(10 46.21 577.712)"><rect stroke="#EEE" stroke-width="3" fill="#FFF" stroke-linecap="round" width="67" height="75" rx="10"/><rect fill="#FDE5D8" x="10.659" y="15.306" width="9.136" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="28.932" y="24.49" width="9.136" height="3.061" rx="1.531"/><rect fill="#6B4FBB" x="10.659" y="42.857" width="9.136" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="24.364" y="42.857" width="9.136" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="10.659" y="56.633" width="9.136" height="3.061" rx="1.531"/><rect fill="#FC6D26" x="38.068" y="42.857" width="9.136" height="3.061" rx="1.531"/><rect fill="#6B4FBB" x="42.636" y="24.49" width="4.568" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="38.068" y="33.673" width="4.568" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="51.773" y="42.857" width="4.568" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="47.205" y="33.673" width="4.568" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="42.636" y="56.633" width="4.568" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="10.659" y="33.673" width="4.568" height="3.061" rx="1.531"/><rect fill="#FDE5D8" x="24.364" y="15.306" width="13.705" height="3.061" rx="1.531"/><rect fill="#FC6D26" x="24.364" y="56.633" width="13.705" height="3.061" rx="1.531"/><rect fill="#FC8A51" x="10.659" y="24.49" width="13.705" height="3.061" rx="1.531"/><rect fill="#FC6D26" x="19.795" y="33.673" width="13.705" height="3.061" rx="1.531"/><rect fill="#FC6D26" x="42.636" y="15.306" width="9.136" height="3.061" rx="1.531"/></g><path d="M126.028 143l-88.06-.012c-.322.008-.644.012-.968.012-20.435 0-37-16.565-37-37 0-17.351 11.944-31.913 28.058-35.912A37.59 37.59 0 0 1 28 68c0-20.435 16.565-37 37-37 12.77 0 24.03 6.47 30.68 16.31A36.865 36.865 0 0 1 111 44c16.277 0 30.1 10.511 35.05 25.116A37.508 37.508 0 0 1 149 69c20.435 0 37 16.565 37 37 0 20.1-16.028 36.457-36 37h-23.972z" fill="#E5E5E5" fill-rule="nonzero"/><path d="M149.944 139c17.824-.513 32.056-15.126 32.056-33 0-18.225-14.775-33-33-33-.883 0-1.762.035-2.635.103a4 4 0 0 1-4.103-2.703C137.76 57.118 125.252 48 111 48a32.863 32.863 0 0 0-13.662 2.951 4 4 0 0 1-4.973-1.4C86.263 40.518 76.102 35 65 35c-18.225 0-33 14.775-33 33 0 .624.017 1.246.052 1.866a4 4 0 0 1-3.03 4.104C14.43 77.591 4 90.752 4 106c0 18.225 14.775 33 33 33 .289 0 .578-.004.865-.011l88.163.011h23.916z" fill="#FFF"/><path d="M56.369 83.327l-2.142 1.768-3.933-2.27a1.495 1.495 0 0 0-2.046.542l-1.507 2.61a1.504 1.504 0 0 0 .553 2.044l3.926 2.267-.455 2.734a16.137 16.137 0 0 0-.218 2.65c0 .897.074 1.782.218 2.651l.455 2.735-3.926 2.266a1.495 1.495 0 0 0-.553 2.043l1.507 2.61a1.504 1.504 0 0 0 2.046.543l3.933-2.27 2.142 1.768a15.978 15.978 0 0 0 4.578 2.648l2.6.972v4.534c0 .831.669 1.5 1.493 1.5h3.014c.818 0 1.493-.675 1.493-1.5v-4.534l2.6-.972a15.978 15.978 0 0 0 4.579-2.648l2.142-1.768 3.933 2.27c.72.416 1.633.172 2.045-.542l1.507-2.61a1.504 1.504 0 0 0-.552-2.044l-3.927-2.266.455-2.735a16.137 16.137 0 0 0 0-5.3l-.455-2.735 3.927-2.267c.72-.416.965-1.33.552-2.043l-1.507-2.61a1.504 1.504 0 0 0-2.045-.543l-3.933 2.27-2.142-1.768a15.978 15.978 0 0 0-4.579-2.648l-2.6-.972v-4.534c0-.831-.668-1.5-1.493-1.5H65.04c-.817 0-1.493.675-1.493 1.5v4.534l-2.6.972a15.978 15.978 0 0 0-4.578 2.648zm3.178-6.395v-1.76c0-3.037 2.471-5.5 5.493-5.5h3.014a5.495 5.495 0 0 1 5.493 5.5v1.76c2.098.784 4.03 1.91 5.726 3.31l1.528-.881a5.504 5.504 0 0 1 7.51 2.006l1.506 2.61a5.495 5.495 0 0 1-2.016 7.508l-1.526.88c.18 1.076.272 2.181.272 3.308 0 1.126-.093 2.23-.272 3.307l1.526.88a5.504 5.504 0 0 1 2.016 7.507l-1.507 2.61a5.495 5.495 0 0 1-7.51 2.008l-1.527-.882a19.979 19.979 0 0 1-5.726 3.31v1.76c0 3.037-2.47 5.5-5.493 5.5H65.04a5.495 5.495 0 0 1-5.493-5.5v-1.76a19.979 19.979 0 0 1-5.725-3.31l-1.528.882a5.504 5.504 0 0 1-7.51-2.007l-1.507-2.61a5.495 5.495 0 0 1 2.017-7.508l1.525-.88a20.137 20.137 0 0 1-.272-3.307c0-1.127.093-2.232.272-3.307l-1.525-.881a5.504 5.504 0 0 1-2.017-7.507l1.507-2.61a5.495 5.495 0 0 1 7.51-2.007l1.528.882a19.979 19.979 0 0 1 5.725-3.311z" fill="#B5A7DD" fill-rule="nonzero"/><path d="M66.343 100a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 4a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" fill="#6B4FBB" fill-rule="nonzero"/><path d="M105.43 66.565l-2.142 1.769-3.664-2.116a.399.399 0 0 0-.543.154l-1.229 2.13a.393.393 0 0 0 .138.546l3.658 2.112-.455 2.735a12.208 12.208 0 0 0 0 4.01l.455 2.735-3.658 2.112a.399.399 0 0 0-.138.547l1.23 2.129c.115.2.352.264.542.154l3.664-2.115 2.142 1.768a12.08 12.08 0 0 0 3.462 2.002l2.6.972v4.225c0 .215.178.393.405.393h2.458a.393.393 0 0 0 .405-.393v-4.225l2.6-.972a12.08 12.08 0 0 0 3.461-2.002l2.142-1.768 3.664 2.115c.186.108.43.042.543-.154l1.23-2.129a.393.393 0 0 0-.138-.547l-3.659-2.112.455-2.735a12.208 12.208 0 0 0 0-4.01l-.455-2.735 3.659-2.112a.399.399 0 0 0 .137-.547l-1.229-2.129a.393.393 0 0 0-.543-.154l-3.664 2.116-2.142-1.769a12.08 12.08 0 0 0-3.461-2.002l-2.6-.972v-4.225a.399.399 0 0 0-.405-.393h-2.458a.393.393 0 0 0-.405.393v4.225l-2.6.972a12.08 12.08 0 0 0-3.462 2.002zm2.062-5.749v-1.45a4.393 4.393 0 0 1 4.405-4.393h2.458a4.399 4.399 0 0 1 4.405 4.393v1.45a16.08 16.08 0 0 1 4.608 2.665l1.26-.727a4.393 4.393 0 0 1 6.006 1.618l1.23 2.13a4.399 4.399 0 0 1-1.602 6.01l-1.258.726a16.208 16.208 0 0 1 0 5.324l1.258.726a4.393 4.393 0 0 1 1.601 6.011l-1.229 2.129a4.399 4.399 0 0 1-6.007 1.618l-1.259-.727a16.08 16.08 0 0 1-4.608 2.665v1.45a4.393 4.393 0 0 1-4.405 4.393h-2.458a4.399 4.399 0 0 1-4.405-4.393v-1.45a16.08 16.08 0 0 1-4.609-2.665l-1.26.727a4.393 4.393 0 0 1-6.006-1.618l-1.229-2.129a4.399 4.399 0 0 1 1.602-6.011l1.257-.726a16.208 16.208 0 0 1 0-5.324l-1.257-.726a4.393 4.393 0 0 1-1.602-6.01l1.23-2.13a4.399 4.399 0 0 1 6.006-1.618l1.26.727a16.08 16.08 0 0 1 4.608-2.665z" fill="#B5A7DD" fill-rule="nonzero"/><path d="M113.154 78.378a2.439 2.439 0 1 0 0-4.878 2.439 2.439 0 0 0 0 4.878zm0 4a6.439 6.439 0 1 1 0-12.878 6.439 6.439 0 0 1 0 12.878z" fill="#6B4FBB" fill-rule="nonzero"/><path d="M101.626 106.81l-1.828 1.51-3.128-1.806a.34.34 0 0 0-.463.132l-1.05 1.817a.336.336 0 0 0 .118.467l3.123 1.803-.388 2.334a10.42 10.42 0 0 0 0 3.423l.388 2.335-3.123 1.802a.34.34 0 0 0-.117.468l1.049 1.817c.099.17.301.225.463.132l3.128-1.806 1.828 1.509c.884.73 1.883 1.308 2.955 1.71l2.22.828v3.607a.34.34 0 0 0 .345.336h2.099a.336.336 0 0 0 .345-.336v-3.607l2.22-.829c1.072-.4 2.07-.98 2.955-1.71l1.828-1.508 3.128 1.806a.34.34 0 0 0 .463-.132l1.05-1.817a.336.336 0 0 0-.118-.468l-3.123-1.802.388-2.335a10.42 10.42 0 0 0 0-3.423l-.388-2.334 3.123-1.803a.34.34 0 0 0 .117-.467l-1.049-1.817a.336.336 0 0 0-.463-.132l-3.128 1.806-1.828-1.51a10.312 10.312 0 0 0-2.955-1.709l-2.22-.829v-3.607a.34.34 0 0 0-.345-.335h-2.099a.336.336 0 0 0-.345.335v3.607l-2.22.83c-1.072.4-2.07.979-2.955 1.708zm1.76-4.907v-1.238a3.75 3.75 0 0 1 3.76-3.75h2.099a3.755 3.755 0 0 1 3.76 3.75v1.238a13.726 13.726 0 0 1 3.934 2.275l1.075-.621a3.75 3.75 0 0 1 5.127 1.381l1.05 1.818a3.755 3.755 0 0 1-1.368 5.131l-1.073.62a13.835 13.835 0 0 1 0 4.544l1.073.62a3.75 3.75 0 0 1 1.367 5.13l-1.049 1.818a3.755 3.755 0 0 1-5.127 1.382l-1.075-.621a13.726 13.726 0 0 1-3.934 2.275v1.237a3.75 3.75 0 0 1-3.76 3.75h-2.099a3.755 3.755 0 0 1-3.76-3.75v-1.237a13.726 13.726 0 0 1-3.934-2.275l-1.075.62a3.75 3.75 0 0 1-5.127-1.381l-1.05-1.817a3.755 3.755 0 0 1 1.368-5.132l1.073-.62a13.835 13.835 0 0 1 0-4.543l-1.073-.62a3.75 3.75 0 0 1-1.367-5.131l1.049-1.818a3.755 3.755 0 0 1 5.127-1.381l1.075.62a13.726 13.726 0 0 1 3.934-2.274z" fill="#FDE5D8" fill-rule="nonzero"/><path d="M108.496 117.078a2.082 2.082 0 1 0 0-4.164 2.082 2.082 0 0 0 0 4.164zm0 3.415a5.496 5.496 0 1 1 0-10.993 5.496 5.496 0 0 1 0 10.993z" fill="#FC8A51" fill-rule="nonzero"/><path d="M168.905 59.554c-2.173-.14-3.324-2.14-2.36-4.088l3.425-6.928a27.138 27.138 0 0 1-.47-5.038c0-14.912 12.088-27 27-27s27 12.088 27 27-12.088 27-27 27c-8.5 0-16.34-3.956-21.41-10.547l-6.185-.399z" fill="#E5E5E5" fill-rule="nonzero"/><path d="M175.973 57.004a1.5 1.5 0 0 1 1.116.613c4.492 6.165 11.64 9.883 19.411 9.883 13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24c0 1.675.171 3.327.508 4.939a1.5 1.5 0 0 1-.123.972l-3.543 7.165 6.631.428z" fill="#FFF"/><path d="M196.5 57.5c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14-6.268 14-14 14zm0-3c6.075 0 11-4.925 11-11s-4.925-11-11-11-11 4.925-11 11 4.925 11 11 11z" fill="#31AF64" fill-rule="nonzero"/><path d="M195.18 44.81l-1.932-1.932a1.468 1.468 0 0 0-2.075 0 1.463 1.463 0 0 0 0 2.074l2.875 2.874a1.491 1.491 0 0 0 .048.048c.55.55 1.43.549 1.975.005l5.808-5.808a1.396 1.396 0 0 0-.005-1.975 1.393 1.393 0 0 0-1.975-.005l-4.719 4.719z" fill="#31AF64"/></g></svg>
\ No newline at end of file

changelogs/unreleased/37158-autodevops-banner.yml

+---
+title: Created callout for auto devops
+merge_request:
+author:
+type: added