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,20 +2,23 @@
 - page_title "Pipelines"
 = render "projects/pipelines/head"
 
-#pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
-  "css-class" => container_class,
-  "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),
-  "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
-  "all-path" =>  project_pipelines_path(@project),
-  "pending-path" => project_pipelines_path(@project, scope: :pending),
-  "running-path" => project_pipelines_path(@project, scope: :running),
-  "finished-path" => project_pipelines_path(@project, scope: :finished),
-  "branches-path" => project_pipelines_path(@project, scope: :branches),
-  "tags-path" => project_pipelines_path(@project, scope: :tags),
-  "has-ci" => @repository.gitlab_ci_yml || @project.auto_devops_enabled?,
-  "ci-lint-path" => ci_lint_path } }
+%div{ 'class' => container_class }
+  -# TODO add verfication
+  = render 'shared/auto_devops_callout'
 
-= page_specific_javascript_bundle_tag('common_vue')
-= page_specific_javascript_bundle_tag('pipelines')
+  #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),
+    "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
+    "all-path" =>  project_pipelines_path(@project),
+    "pending-path" => project_pipelines_path(@project, scope: :pending),
+    "running-path" => project_pipelines_path(@project, scope: :running),
+    "finished-path" => project_pipelines_path(@project, scope: :finished),
+    "branches-path" => project_pipelines_path(@project, scope: :branches),
+    "tags-path" => project_pipelines_path(@project, scope: :tags),
+    "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')

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

@@ -0,0 +1,17 @@
+.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'

changelogs/unreleased/37158-autodevops-banner.yml

@@ -0,0 +1,5 @@
+---
+title: Created callout for auto devops
+merge_request:
+author:
+type: added