Add latest changes from gitlab-org/gitlab@master

5 files changed, 87 insertions, 9 deletions

diff --git a/app/assets/javascripts/clusters_list/components/clusters.vue b/app/assets/javascripts/clusters_list/components/clusters.vue
index 0d1534d20e0..cf0587341b5 100644
--- a/app/assets/javascripts/clusters_list/components/clusters.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters.vue
@@ -14,6 +14,7 @@ import { __, sprintf } from '~/locale';
 import { CLUSTER_TYPES, STATUSES } from '../constants';
 import AncestorNotice from './ancestor_notice.vue';
 import NodeErrorHelpText from './node_error_help_text.vue';
+import ClustersEmptyState from './clusters_empty_state.vue';
 
 export default {
   nodeMemoryText: __('%{totalMemory} (%{freeSpacePercentage}%{percentSymbol} free)'),
@@ -28,6 +29,7 @@ export default {
     GlSprintf,
     GlTable,
     NodeErrorHelpText,
+    ClustersEmptyState,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -40,7 +42,7 @@ export default {
       'loadingNodes',
       'page',
       'providers',
-      'totalCulsters',
+      'totalClusters',
     ]),
     contentAlignClasses() {
       return 'gl-display-flex gl-align-items-center gl-justify-content-end gl-justify-content-md-start';
@@ -83,9 +85,12 @@ export default {
         },
       ];
     },
-    hasClusters() {
+    hasClustersPerPage() {
       return this.clustersPerPage > 0;
     },
+    hasClusters() {
+      return this.totalClusters > 0;
+    },
   },
   mounted() {
     this.fetchClusters();
@@ -202,6 +207,7 @@ export default {
     <ancestor-notice />
 
     <gl-table
+      v-if="hasClusters"
       :items="clusters"
       :fields="fields"
       stacked="md"
@@ -241,7 +247,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.connection_error"
@@ -262,7 +268,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.node_connection_error"
@@ -283,7 +289,7 @@ export default {
 
         <gl-skeleton-loading v-else-if="loadingNodes" :lines="1" :class="contentAlignClasses" />
 
-        <NodeErrorHelpText
+        <node-error-help-text
           v-else-if="item.kubernetes_errors"
           :class="contentAlignClasses"
           :error-type="item.kubernetes_errors.metrics_connection_error"
@@ -298,11 +304,13 @@ export default {
       </template>
     </gl-table>
 
+    <clusters-empty-state v-else />
+
     <gl-pagination
-      v-if="hasClusters"
+      v-if="hasClustersPerPage"
       v-model="currentPage"
       :per-page="clustersPerPage"
-      :total-items="totalCulsters"
+      :total-items="totalClusters"
       :prev-text="__('Prev')"
       :next-text="__('Next')"
       align="center"
diff --git a/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
new file mode 100644
index 00000000000..fa13bdadc1b
--- /dev/null
+++ b/app/assets/javascripts/clusters_list/components/clusters_empty_state.vue
@@ -0,0 +1,60 @@
+<script>
+import { GlEmptyState, GlButton, GlLink } from '@gitlab/ui';
+import { mapState } from 'vuex';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export default {
+  i18n: {
+    title: s__('ClusterIntegration|Integrate Kubernetes with a cluster certificate'),
+    description: s__(
+      'ClusterIntegration|Kubernetes clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way.',
+    ),
+    learnMoreLinkText: s__('ClusterIntegration|Learn more about Kubernetes'),
+    buttonText: s__('ClusterIntegration|Integrate with a cluster certificate'),
+  },
+  components: {
+    GlEmptyState,
+    GlButton,
+    GlLink,
+  },
+  inject: ['emptyStateHelpText', 'clustersEmptyStateImage', 'newClusterPath'],
+  learnMoreHelpUrl: helpPagePath('user/project/clusters/index'),
+  computed: {
+    ...mapState(['canAddCluster']),
+  },
+};
+</script>
+
+<template>
+  <gl-empty-state :svg-path="clustersEmptyStateImage" :title="$options.i18n.title">
+    <template #description>
+      <p>
+        {{ $options.i18n.description }}
+      </p>
+
+      <p v-if="emptyStateHelpText" data-testid="clusters-empty-state-text">
+        {{ emptyStateHelpText }}
+      </p>
+
+      <p>
+        <gl-link :href="$options.learnMoreHelpUrl" target="_blank" data-testid="clusters-docs-link">
+          {{ $options.i18n.learnMoreLinkText }}
+        </gl-link>
+      </p>
+    </template>
+
+    <template #actions>
+      <gl-button
+        data-testid="integration-primary-button"
+        data-qa-selector="add_kubernetes_cluster_link"
+        category="primary"
+        variant="confirm"
+        :disabled="!canAddCluster"
+        :href="newClusterPath"
+      >
+        {{ $options.i18n.buttonText }}
+      </gl-button>
+    </template>
+  </gl-empty-state>
+</template>
diff --git a/app/assets/javascripts/clusters_list/load_clusters.js b/app/assets/javascripts/clusters_list/load_clusters.js
index 01430230879..1bb3ea546b2 100644
--- a/app/assets/javascripts/clusters_list/load_clusters.js
+++ b/app/assets/javascripts/clusters_list/load_clusters.js
@@ -8,8 +8,15 @@ export default (Vue) => {
     return null;
   }
 
+  const { emptyStateHelpText, newClusterPath, clustersEmptyStateImage } = el.dataset;
+
   return new Vue({
     el,
+    provide: {
+      emptyStateHelpText,
+      newClusterPath,
+      clustersEmptyStateImage,
+    },
     store: createStore(el.dataset),
     render(createElement) {
       return createElement(Clusters);
diff --git a/app/assets/javascripts/clusters_list/store/mutations.js b/app/assets/javascripts/clusters_list/store/mutations.js
index 5b462928518..e5c15ccbd6e 100644
--- a/app/assets/javascripts/clusters_list/store/mutations.js
+++ b/app/assets/javascripts/clusters_list/store/mutations.js
@@ -12,7 +12,7 @@ export default {
       clusters: data.clusters,
       clustersPerPage: paginationInformation.perPage,
       hasAncestorClusters: data.has_ancestor_clusters,
-      totalCulsters: paginationInformation.total,
+      totalClusters: paginationInformation.total,
     });
   },
   [types.SET_PAGE](state, value) {
diff --git a/app/assets/javascripts/clusters_list/store/state.js b/app/assets/javascripts/clusters_list/store/state.js
index 51fafd49479..3dcbf58c8d3 100644
--- a/app/assets/javascripts/clusters_list/store/state.js
+++ b/app/assets/javascripts/clusters_list/store/state.js
@@ -1,3 +1,5 @@
+import { parseBoolean } from '~/lib/utils/common_utils';
+
 export default (initialState = {}) => ({
   ancestorHelperPath: initialState.ancestorHelpPath,
   endpoint: initialState.endpoint,
@@ -12,5 +14,6 @@ export default (initialState = {}) => ({
     default: { path: initialState.imgTagsDefaultPath, text: initialState.imgTagsDefaultText },
     gcp: { path: initialState.imgTagsGcpPath, text: initialState.imgTagsGcpText },
   },
-  totalCulsters: 0,
+  totalClusters: 0,
+  canAddCluster: parseBoolean(initialState.canAddCluster),
 });