Resolve "Clean up the top section of the cluster page"

app/assets/javascripts/clusters/clusters_bundle.js

 import Visibility from 'visibilityjs';
 import Vue from 'vue';
+import initDismissableCallout from '~/dismissable_callout';
 import { s__, sprintf } from '../locale';
 import Flash from '../flash';
 import Poll from '../lib/utils/poll';
 import initSettingsPanels from '../settings_panels';
 import eventHub from './event_hub';
-import {
-  APPLICATION_STATUS,
-  REQUEST_LOADING,
-  REQUEST_SUCCESS,
-  REQUEST_FAILURE,
-} from './constants';
+import { APPLICATION_STATUS, REQUEST_LOADING, REQUEST_SUCCESS, REQUEST_FAILURE } from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import applications from './components/applications.vue';
@@ -66,6 +62,7 @@ export default class Clusters {
     this.showTokenButton = document.querySelector('.js-show-cluster-token');
     this.tokenField = document.querySelector('.js-cluster-token');
 
+    initDismissableCallout('.js-cluster-security-warning');
     initSettingsPanels();
     setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area'));
     this.initApplications();
@@ -129,7 +126,8 @@ export default class Clusters {
     if (!Visibility.hidden()) {
       this.poll.makeRequest();
     } else {
-      this.service.fetchData()
+      this.service
+        .fetchData()
         .then(data => this.handleSuccess(data))
         .catch(() => Clusters.handleError());
     }
@@ -177,15 +175,21 @@ export default class Clusters {
 
   checkForNewInstalls(prevApplicationMap, newApplicationMap) {
     const appTitles = Object.keys(newApplicationMap)
-      .filter(appId => newApplicationMap[appId].status === APPLICATION_STATUS.INSTALLED &&
+      .filter(
+        appId =>
+          newApplicationMap[appId].status === APPLICATION_STATUS.INSTALLED &&
           prevApplicationMap[appId].status !== APPLICATION_STATUS.INSTALLED &&
-        prevApplicationMap[appId].status !== null)
+          prevApplicationMap[appId].status !== null,
+      )
       .map(appId => newApplicationMap[appId].title);
 
     if (appTitles.length > 0) {
-      const text = sprintf(s__('ClusterIntegration|%{appList} was successfully installed on your Kubernetes cluster'), {
+      const text = sprintf(
+        s__('ClusterIntegration|%{appList} was successfully installed on your Kubernetes cluster'),
+        {
           appList: appTitles.join(', '),
-      });
+        },
+      );
       Flash(text, 'notice', this.successApplicationContainer);
     }
   }
@@ -218,13 +222,18 @@ export default class Clusters {
     this.store.updateAppProperty(appId, 'requestStatus', REQUEST_LOADING);
     this.store.updateAppProperty(appId, 'requestReason', null);
 
-    this.service.installApplication(appId, data.params)
+    this.service
+      .installApplication(appId, data.params)
       .then(() => {
         this.store.updateAppProperty(appId, 'requestStatus', REQUEST_SUCCESS);
       })
       .catch(() => {
         this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE);
-        this.store.updateAppProperty(appId, 'requestReason', s__('ClusterIntegration|Request to begin installing failed'));
+        this.store.updateAppProperty(
+          appId,
+          'requestReason',
+          s__('ClusterIntegration|Request to begin installing failed'),
+        );
       });
   }
 

app/assets/javascripts/clusters/clusters_index.js

 import createFlash from '~/flash';
 import { __ } from '~/locale';
 import setupToggleButtons from '~/toggle_buttons';
-import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+import initDismissableCallout from '~/dismissable_callout';
 
 import ClustersService from './services/clusters_service';
 
 export default () => {
   const clusterList = document.querySelector('.js-clusters-list');
 
-  gcpSignupOffer();
+  initDismissableCallout('.gcp-signup-offer');
 
   // The empty state won't have a clusterList
   if (clusterList) {

app/assets/javascripts/clusters/components/gcp_signup_offer.js → app/assets/javascripts/dismissable_callout.js

@@ -3,8 +3,8 @@ import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import Flash from '~/flash';
 
-export default function gcpSignupOffer() {
-  const alertEl = document.querySelector('.gcp-signup-offer');
+export default function initDismissableCallout(alertSelector) {
+  const alertEl = document.querySelector(alertSelector);
   if (!alertEl) {
     return;
   }

app/assets/javascripts/pages/projects/index.js

-import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+import initDismissableCallout from '~/dismissable_callout';
 import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
 import Project from './project';
 import ShortcutsNavigation from '../../shortcuts_navigation';
@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
   ];
 
   if (newClusterViews.indexOf(page) > -1) {
-    gcpSignupOffer();
+    initDismissableCallout('.gcp-signup-offer');
     initGkeDropdowns();
   }
 

app/helpers/user_callouts_helper.rb

 module UserCalloutsHelper
   GKE_CLUSTER_INTEGRATION = 'gke_cluster_integration'.freeze
   GCP_SIGNUP_OFFER = 'gcp_signup_offer'.freeze
+  CLUSTER_SECURITY_WARNING = 'cluster_security_warning'.freeze
 
   def show_gke_cluster_integration_callout?(project)
     can?(current_user, :create_cluster, project) &&
@@ -11,6 +12,10 @@ module UserCalloutsHelper
     !user_dismissed?(GCP_SIGNUP_OFFER)
   end
 
+  def show_cluster_security_warning?
+    !user_dismissed?(CLUSTER_SECURITY_WARNING)
+  end
+
   private
 
   def user_dismissed?(feature_name)

app/models/user_callout.rb

@@ -5,7 +5,8 @@ class UserCallout < ActiveRecord::Base
 
   enum feature_name: {
     gke_cluster_integration: 1,
-    gcp_signup_offer: 2
+    gcp_signup_offer: 2,
+    cluster_security_warning: 3
   }
 
   validates :user, presence: true

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

-%h4= s_('ClusterIntegration|Kubernetes cluster integration')
-
-.settings-content
-  .hidden.js-cluster-error.alert.alert-danger.alert-block.append-bottom-10{ role: 'alert' }
+.hidden.js-cluster-error.bs-callout.bs-callout-danger{ role: 'alert' }
   = s_('ClusterIntegration|Something went wrong while creating your Kubernetes cluster on Google Kubernetes Engine')
   %p.js-error-reason
 
-  .hidden.js-cluster-creating.alert.alert-info.alert-block.append-bottom-10{ role: 'alert' }
+.hidden.js-cluster-creating.bs-callout.bs-callout-info{ role: 'alert' }
   = s_('ClusterIntegration|Kubernetes cluster is being created on Google Kubernetes Engine...')
 
-  .hidden.js-cluster-success.alert.alert-success.alert-block.append-bottom-10{ role: 'alert' }
+.hidden.js-cluster-success.bs-callout.bs-callout-success{ role: 'alert' }
   = s_("ClusterIntegration|Kubernetes cluster was successfully created on Google Kubernetes Engine. Refresh the page to see Kubernetes cluster's details")
 
-  %p= s_('ClusterIntegration|Control how your Kubernetes cluster integrates with GitLab')
+- if show_cluster_security_warning?
+  .js-cluster-security-warning.alert.alert-block.alert-dismissable.bs-callout.bs-callout-warning
+    %button.close{ type: "button", data: { feature_id: UserCalloutsHelper::CLUSTER_SECURITY_WARNING, dismiss_endpoint: user_callouts_path } }  ×
+    = s_("ClusterIntegration|The default cluster configuration grants access to many functionalities needed to successfully build and deploy a containerised application.")
+    = link_to s_("More information"),  help_page_path('user/project/clusters/index.md', anchor: 'security-implications')

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

@@ -2,14 +2,6 @@
   = form_errors(@cluster)
   .form-group
     %h5= s_('ClusterIntegration|Integration status')
-    %p
-      - if @cluster.enabled?
-        - if can?(current_user, :update_cluster, @cluster)
-          = s_('ClusterIntegration|Kubernetes cluster integration is enabled for this project. Disabling this integration will not affect your Kubernetes cluster, it will only temporarily turn off GitLab\'s connection to it.')
-        - else
-          = s_('ClusterIntegration|Kubernetes cluster integration is enabled for this project.')
-      - else
-        = s_('ClusterIntegration|Kubernetes cluster integration is disabled for this project.')
     %label.append-bottom-0.js-cluster-enable-toggle-area
       %button{ type: 'button',
         class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if @cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
@@ -19,14 +11,13 @@
         %span.toggle-icon
           = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
           = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
+      .form-text.text-muted= s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.')
 
   - if has_multiple_clusters?(@project)
     .form-group
       %h5= s_('ClusterIntegration|Environment scope')
-      %p
-        = s_("ClusterIntegration|Choose which of your project's environments will use this Kubernetes cluster.")
-        = link_to s_("ClusterIntegration|Learn more about environments"), help_page_path('ci/environments')
-      = field.text_field :environment_scope, class: 'form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Environment scope')
+      = field.text_field :environment_scope, class: 'col-md-6 form-control js-select-on-focus', placeholder: s_('ClusterIntegration|Environment scope')
+      .form-text.text-muted= s_("ClusterIntegration|Choose which of your environments will use this cluster.")
 
   - if can?(current_user, :update_cluster, @cluster)
     .form-group
@@ -38,8 +29,3 @@
       %code *
       is the default environment scope for this cluster. This means that all jobs, regardless of their environment, will use this cluster.
       = link_to 'More information', ('https://docs.gitlab.com/ee/user/project/clusters/#setting-the-environment-scope')
-
-  %h5= s_('ClusterIntegration|Security')
-  %p
-    = s_("ClusterIntegration|The default cluster configuration grants access to a wide set of functionalities needed to successfully build and deploy a containerised application.")
-    = link_to s_("ClusterIntegration|Learn more about security configuration"),  help_page_path('user/project/clusters/index.md', anchor: 'security-implications')

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

@@ -23,7 +23,8 @@
   .js-cluster-application-notice
     .flash-container
 
-  %section.settings.no-animate.expanded#cluster-integration
+  %section#cluster-integration
+    %h4= @cluster.name
     = render 'banner'
     = render 'integration_form'
 

changelogs/unreleased/49632-clean-up-the-top-section-of-the-cluster-page.yml

+---
+title: Make cluster page settings easier to read
+merge_request: 21550
+author:
+type: other

locale/gitlab.pot

@@ -1332,10 +1332,7 @@ msgstr ""
 msgid "ClusterIntegration|Certificate Authority bundle (PEM format)"
 msgstr ""
 
-msgid "ClusterIntegration|Choose which of your project's environments will use this Kubernetes cluster."
-msgstr ""
-
-msgid "ClusterIntegration|Control how your Kubernetes cluster integrates with GitLab"
+msgid "ClusterIntegration|Choose which of your environments will use this cluster."
 msgstr ""
 
 msgid "ClusterIntegration|Copy API URL"
@@ -1362,6 +1359,9 @@ msgstr ""
 msgid "ClusterIntegration|Did you know?"
 msgstr ""
 
+msgid "ClusterIntegration|Enable or disable GitLab's connection to your Kubernetes cluster."
+msgstr ""
+
 msgid "ClusterIntegration|Enable this setting if using role-based access control (RBAC)."
 msgstr ""
 
@@ -1455,15 +1455,6 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes cluster integration"
 msgstr ""
 
-msgid "ClusterIntegration|Kubernetes cluster integration is disabled for this project."
-msgstr ""
-
-msgid "ClusterIntegration|Kubernetes cluster integration is enabled for this project."
-msgstr ""
-
-msgid "ClusterIntegration|Kubernetes cluster integration is enabled for this project. Disabling this integration will not affect your Kubernetes cluster, it will only temporarily turn off GitLab's connection to it."
-msgstr ""
-
 msgid "ClusterIntegration|Kubernetes cluster is being created on Google Kubernetes Engine..."
 msgstr ""
 
@@ -1488,12 +1479,6 @@ msgstr ""
 msgid "ClusterIntegration|Learn more about %{help_link_start}zones%{help_link_end}."
 msgstr ""
 
-msgid "ClusterIntegration|Learn more about environments"
-msgstr ""
-
-msgid "ClusterIntegration|Learn more about security configuration"
-msgstr ""
-
 msgid "ClusterIntegration|Machine type"
 msgstr ""
 
@@ -1581,9 +1566,6 @@ msgstr ""
 msgid "ClusterIntegration|Search zones"
 msgstr ""
 
-msgid "ClusterIntegration|Security"
-msgstr ""
-
 msgid "ClusterIntegration|See and edit the details for your Kubernetes cluster"
 msgstr ""
 
@@ -1623,7 +1605,7 @@ msgstr ""
 msgid "ClusterIntegration|The IP address is in the process of being assigned. Please check your Kubernetes cluster or Quotas on Google Kubernetes Engine if it takes a long time."
 msgstr ""
 
-msgid "ClusterIntegration|The default cluster configuration grants access to a wide set of functionalities needed to successfully build and deploy a containerised application."
+msgid "ClusterIntegration|The default cluster configuration grants access to many functionalities needed to successfully build and deploy a containerised application."
 msgstr ""
 
 msgid "ClusterIntegration|This account must have permissions to create a Kubernetes cluster in the %{link_to_container_project} specified below"