From 6e4e1050d9dba2b7b2523fdd1768823ab85feef4 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 20 Aug 2020 18:42:06 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-3-stable-ee

---
 .../serverless/components/empty_state.vue          | 62 +++++++++++-----------
 .../serverless/components/function_details.vue     | 10 ----
 .../serverless/components/functions.vue            | 27 +++-------
 .../serverless/components/missing_prometheus.vue   | 10 +---
 .../javascripts/serverless/serverless_bundle.js    | 26 ++++-----
 app/assets/javascripts/serverless/store/actions.js |  5 +-
 app/assets/javascripts/serverless/store/getters.js |  3 --
 app/assets/javascripts/serverless/store/index.js   |  6 +--
 app/assets/javascripts/serverless/store/state.js   | 10 +++-
 .../javascripts/serverless/survey_banner.vue       |  2 +-
 app/assets/javascripts/serverless/utils.js         |  3 --
 11 files changed, 62 insertions(+), 102 deletions(-)

(limited to 'app/assets/javascripts/serverless')

diff --git a/app/assets/javascripts/serverless/components/empty_state.vue b/app/assets/javascripts/serverless/components/empty_state.vue
index 2683805f2f7..49922ad8e6c 100644
--- a/app/assets/javascripts/serverless/components/empty_state.vue
+++ b/app/assets/javascripts/serverless/components/empty_state.vue
@@ -1,40 +1,38 @@
 <script>
+import { GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
+import { mapState } from 'vuex';
+
 export default {
-  props: {
-    clustersPath: {
-      type: String,
-      required: true,
-    },
-    helpPath: {
-      type: String,
-      required: true,
-    },
+  components: {
+    GlEmptyState,
+    GlLink,
+    GlSprintf,
+  },
+  computed: {
+    ...mapState(['clustersPath', 'emptyImagePath', 'helpPath']),
   },
 };
 </script>
 
 <template>
-  <div class="row empty-state js-empty-state">
-    <div class="col-12">
-      <div class="text-content">
-        <h4 class="state-title text-center">
-          {{ s__('Serverless|Getting started with serverless') }}
-        </h4>
-        <p class="state-description">
-          {{
-            s__(`Serverless| In order to start using functions as a service,
-                 you must first install Knative on your Kubernetes cluster.`)
-          }}
-
-          <a :href="helpPath"> {{ __('More information') }} </a>
-        </p>
-
-        <div class="text-center">
-          <a :href="clustersPath" class="btn btn-success">
-            {{ s__('Serverless|Install Knative') }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <gl-empty-state
+    :svg-path="emptyImagePath"
+    :title="s__('Serverless|Getting started with serverless')"
+    :primary-button-link="clustersPath"
+    :primary-button-text="s__('Serverless|Install Knative')"
+  >
+    <template #description>
+      <gl-sprintf
+        :message="
+          s__(
+            'Serverless|In order to start using functions as a service, you must first install Knative on your Kubernetes cluster. %{linkStart}More information%{linkEnd}',
+          )
+        "
+      >
+        <template #link="{ content }">
+          <gl-link :href="helpPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+  </gl-empty-state>
 </template>
diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue
index 53c78b93254..6ab44eec5cd 100644
--- a/app/assets/javascripts/serverless/components/function_details.vue
+++ b/app/assets/javascripts/serverless/components/function_details.vue
@@ -23,14 +23,6 @@ export default {
       required: false,
       default: false,
     },
-    clustersPath: {
-      type: String,
-      required: true,
-    },
-    helpPath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
@@ -96,8 +88,6 @@ export default {
     <area-chart v-if="hasPrometheusData" :graph-data="graphData" :container-width="elWidth" />
     <missing-prometheus
       v-if="!hasPrometheus || hasPrometheusMissingData"
-      :help-path="helpPath"
-      :clusters-path="clustersPath"
       :missing-data="hasPrometheusMissingData"
     />
   </section>
diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue
index 8fa48134f1f..c44a14f1785 100644
--- a/app/assets/javascripts/serverless/components/functions.vue
+++ b/app/assets/javascripts/serverless/components/functions.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import EnvironmentRow from './environment_row.vue';
 import EmptyState from './empty_state.vue';
@@ -10,24 +10,11 @@ export default {
   components: {
     EnvironmentRow,
     EmptyState,
+    GlLink,
     GlLoadingIcon,
   },
-  props: {
-    clustersPath: {
-      type: String,
-      required: true,
-    },
-    helpPath: {
-      type: String,
-      required: true,
-    },
-    statusPath: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
-    ...mapState(['installed', 'isLoading', 'hasFunctionData']),
+    ...mapState(['installed', 'isLoading', 'hasFunctionData', 'helpPath', 'statusPath']),
     ...mapGetters(['getFunctions']),
 
     checkingInstalled() {
@@ -118,14 +105,14 @@ export default {
             }}
           </p>
           <div class="text-center">
-            <a :href="helpPath" class="btn btn-success">
-              {{ s__('Serverless|Learn more about Serverless') }}
-            </a>
+            <gl-link :href="helpPath" class="btn btn-success">{{
+              s__('Serverless|Learn more about Serverless')
+            }}</gl-link>
           </div>
         </div>
       </div>
     </div>
 
-    <empty-state v-else :clusters-path="clustersPath" :help-path="helpPath" />
+    <empty-state v-else />
   </section>
 </template>
diff --git a/app/assets/javascripts/serverless/components/missing_prometheus.vue b/app/assets/javascripts/serverless/components/missing_prometheus.vue
index 6c29f7c89ff..0d2c9f5151c 100644
--- a/app/assets/javascripts/serverless/components/missing_prometheus.vue
+++ b/app/assets/javascripts/serverless/components/missing_prometheus.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlDeprecatedButton, GlLink } from '@gitlab/ui';
+import { mapState } from 'vuex';
 import { s__ } from '../../locale';
 
 export default {
@@ -8,20 +9,13 @@ export default {
     GlLink,
   },
   props: {
-    clustersPath: {
-      type: String,
-      required: true,
-    },
-    helpPath: {
-      type: String,
-      required: true,
-    },
     missingData: {
       type: Boolean,
       required: true,
     },
   },
   computed: {
+    ...mapState(['clustersPath', 'helpPath']),
     missingStateClass() {
       return this.missingData ? 'missing-prometheus-state' : 'empty-prometheus-state';
     },
diff --git a/app/assets/javascripts/serverless/serverless_bundle.js b/app/assets/javascripts/serverless/serverless_bundle.js
index ed3b633d766..24a9b4ac521 100644
--- a/app/assets/javascripts/serverless/serverless_bundle.js
+++ b/app/assets/javascripts/serverless/serverless_bundle.js
@@ -6,6 +6,9 @@ import { createStore } from './store';
 export default class Serverless {
   constructor() {
     if (document.querySelector('.js-serverless-function-details-page') != null) {
+      const entryPointData = document.querySelector('.js-serverless-function-details-page').dataset;
+      const store = createStore(entryPointData);
+
       const {
         serviceName,
         serviceDescription,
@@ -15,9 +18,7 @@ export default class Serverless {
         servicePodcount,
         serviceMetricsUrl,
         prometheus,
-        clustersPath,
-        helpPath,
-      } = document.querySelector('.js-serverless-function-details-page').dataset;
+      } = entryPointData;
       const el = document.querySelector('#js-serverless-function-details');
 
       const service = {
@@ -32,35 +33,26 @@ export default class Serverless {
 
       this.functionDetails = new Vue({
         el,
-        store: createStore(),
+        store,
         render(createElement) {
           return createElement(FunctionDetails, {
             props: {
               func: service,
               hasPrometheus: prometheus !== undefined,
-              clustersPath,
-              helpPath,
             },
           });
         },
       });
     } else {
-      const { statusPath, clustersPath, helpPath } = document.querySelector(
-        '.js-serverless-functions-page',
-      ).dataset;
+      const entryPointData = document.querySelector('.js-serverless-functions-page').dataset;
+      const store = createStore(entryPointData);
 
       const el = document.querySelector('#js-serverless-functions');
       this.functions = new Vue({
         el,
-        store: createStore(),
+        store,
         render(createElement) {
-          return createElement(Functions, {
-            props: {
-              clustersPath,
-              helpPath,
-              statusPath,
-            },
-          });
+          return createElement(Functions);
         },
       });
     }
diff --git a/app/assets/javascripts/serverless/store/actions.js b/app/assets/javascripts/serverless/store/actions.js
index a0a9fdf7ace..b9d57138efa 100644
--- a/app/assets/javascripts/serverless/store/actions.js
+++ b/app/assets/javascripts/serverless/store/actions.js
@@ -2,7 +2,7 @@ import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import statusCodes from '~/lib/utils/http_status';
 import { backOff } from '~/lib/utils/common_utils';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { __ } from '~/locale';
 import { MAX_REQUESTS, CHECKING_INSTALLED, TIMEOUT } from '../constants';
 
@@ -123,6 +123,3 @@ export const fetchMetrics = ({ dispatch }, { metricsPath, hasPrometheus }) => {
       createFlash(error);
     });
 };
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/serverless/store/getters.js b/app/assets/javascripts/serverless/store/getters.js
index 071f663d9d2..c9b1d22799a 100644
--- a/app/assets/javascripts/serverless/store/getters.js
+++ b/app/assets/javascripts/serverless/store/getters.js
@@ -5,6 +5,3 @@ export const hasPrometheusMissingData = state => state.hasPrometheus && !state.h
 // Convert the function list into a k/v grouping based on the environment scope
 
 export const getFunctions = state => translate(state.functions);
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/serverless/store/index.js b/app/assets/javascripts/serverless/store/index.js
index 5f72060633e..6f32d85201e 100644
--- a/app/assets/javascripts/serverless/store/index.js
+++ b/app/assets/javascripts/serverless/store/index.js
@@ -7,12 +7,12 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-export const createStore = () =>
+export const createStore = (entryPointData = {}) =>
   new Vuex.Store({
     actions,
     getters,
     mutations,
-    state: createState(),
+    state: createState(entryPointData),
   });
 
-export default createStore();
+export default createStore;
diff --git a/app/assets/javascripts/serverless/store/state.js b/app/assets/javascripts/serverless/store/state.js
index fdd29299749..353bfcf3fed 100644
--- a/app/assets/javascripts/serverless/store/state.js
+++ b/app/assets/javascripts/serverless/store/state.js
@@ -1,14 +1,22 @@
-export default () => ({
+export default (
+  initialState = { clustersPath: null, helpPath: null, emptyImagePath: null, statusPath: null },
+) => ({
+  clustersPath: initialState.clustersPath,
   error: null,
+  helpPath: initialState.helpPath,
   installed: 'checking',
   isLoading: true,
 
   // functions
   functions: [],
   hasFunctionData: true,
+  statusPath: initialState.statusPath,
 
   // function_details
   hasPrometheus: true,
   hasPrometheusData: false,
   graphData: {},
+
+  // empty_state
+  emptyImagePath: initialState.emptyImagePath,
 });
diff --git a/app/assets/javascripts/serverless/survey_banner.vue b/app/assets/javascripts/serverless/survey_banner.vue
index a0a90fa5e80..18ab8315840 100644
--- a/app/assets/javascripts/serverless/survey_banner.vue
+++ b/app/assets/javascripts/serverless/survey_banner.vue
@@ -1,7 +1,7 @@
 <script>
 import Cookies from 'js-cookie';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { GlBanner } from '@gitlab/ui';
+import { parseBoolean } from '~/lib/utils/common_utils';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/serverless/utils.js b/app/assets/javascripts/serverless/utils.js
index 8b9e96ce9aa..1bf03ea8d42 100644
--- a/app/assets/javascripts/serverless/utils.js
+++ b/app/assets/javascripts/serverless/utils.js
@@ -18,6 +18,3 @@ export const translate = functions =>
       }),
     {},
   );
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
-- 
cgit v1.2.1