Add latest changes from gitlab-org/gitlab@master

3 files changed, 78 insertions, 72 deletions

diff --git a/app/assets/javascripts/environments/components/empty_state.vue b/app/assets/javascripts/environments/components/empty_state.vue
index e40c37b5095..3ac32f0d045 100644
--- a/app/assets/javascripts/environments/components/empty_state.vue
+++ b/app/assets/javascripts/environments/components/empty_state.vue
@@ -1,12 +1,13 @@
 <script>
-import { GlEmptyState, GlLink } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLink, GlSprintf } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import { ENVIRONMENTS_SCOPE } from '../constants';
 
 export default {
   components: {
+    GlButton,
     GlEmptyState,
     GlLink,
+    GlSprintf,
   },
   inject: ['newEnvironmentPath'],
   props: {
@@ -14,10 +15,6 @@ export default {
       type: String,
       required: true,
     },
-    scope: {
-      type: String,
-      required: true,
-    },
     hasTerm: {
       type: Boolean,
       required: false,
@@ -26,40 +23,40 @@ export default {
   },
   computed: {
     title() {
-      return this.hasTerm
-        ? this.$options.i18n.searchingTitle
-        : this.$options.i18n.title[this.scope];
+      return this.hasTerm ? this.$options.i18n.searchingTitle : this.$options.i18n.title;
     },
     content() {
       return this.hasTerm ? this.$options.i18n.searchingContent : this.$options.i18n.content;
     },
-    buttonText() {
-      return this.hasTerm ? this.$options.i18n.newEnvironmentButtonLabel : '';
-    },
   },
   i18n: {
-    title: {
-      [ENVIRONMENTS_SCOPE.AVAILABLE]: s__("Environments|You don't have any environments."),
-      [ENVIRONMENTS_SCOPE.STOPPED]: s__("Environments|You don't have any stopped environments."),
-    },
-    content: s__(
-      'Environments|Environments are places where code gets deployed, such as staging or production.',
-    ),
     searchingTitle: s__('Environments|No results found'),
+    title: s__('Environments|Get started with environments'),
     searchingContent: s__('Environments|Edit your search and try again'),
-    link: s__('Environments|How do I create an environment?'),
-    newEnvironmentButtonLabel: s__('Environments|New environment'),
+    content: s__(
+      'Environments|Environments are places where code gets deployed, such as staging or production. You can create an environment in the UI or in your .gitlab-ci.yml file. You can also enable review apps, which assist with providing an environment to showcase product changes. %{linkStart}Learn more%{linkEnd} about environments.',
+    ),
+    newEnvironmentButtonLabel: s__('Environments|Create an environment'),
+    enablingReviewButtonLabel: s__('Environments|Enable review apps'),
   },
 };
 </script>
 <template>
-  <gl-empty-state :primary-button-text="buttonText" :primary-button-link="newEnvironmentPath">
-    <template #title>
-      <h4>{{ title }}</h4>
-    </template>
+  <gl-empty-state class="gl-layout-w-limited" :title="title">
     <template #description>
-      <p>{{ content }}</p>
-      <gl-link v-if="!hasTerm" :href="helpPath">{{ $options.i18n.link }}</gl-link>
+      <gl-sprintf :message="content">
+        <template #link="{ content: contentToDisplay }">
+          <gl-link :href="helpPath">{{ contentToDisplay }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </template>
+    <template v-if="!hasTerm" #actions>
+      <gl-button :href="newEnvironmentPath" variant="confirm">
+        {{ $options.i18n.newEnvironmentButtonLabel }}
+      </gl-button>
+      <gl-button @click="$emit('enable-review')">
+        {{ $options.i18n.enablingReviewButtonLabel }}
+      </gl-button>
     </template>
   </gl-empty-state>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index b2a69cdb6c6..a95b5b273f7 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -76,7 +76,7 @@ export default {
   inject: ['newEnvironmentPath', 'canCreateEnvironment', 'helpPagePath'],
   i18n: {
     newEnvironmentButtonLabel: s__('Environments|New environment'),
-    reviewAppButtonLabel: s__('Environments|Enable review app'),
+    reviewAppButtonLabel: s__('Environments|Enable review apps'),
     cleanUpEnvsButtonLabel: s__('Environments|Clean up environments'),
     available: __('Available'),
     stopped: __('Stopped'),
@@ -124,12 +124,24 @@ export default {
     hasEnvironments() {
       return this.environments.length > 0 || this.folders.length > 0;
     },
+    showEmptyState() {
+      return !this.$apollo.queries.environmentApp.loading && !this.hasEnvironments;
+    },
     hasSearch() {
       return Boolean(this.search);
     },
     availableCount() {
       return this.environmentApp?.availableCount;
     },
+    stoppedCount() {
+      return this.environmentApp?.stoppedCount;
+    },
+    hasAnyEnvironment() {
+      return this.availableCount > 0 || this.stoppedCount > 0;
+    },
+    showContent() {
+      return this.hasAnyEnvironment || this.hasSearch;
+    },
     addEnvironment() {
       if (!this.canCreateEnvironment) {
         return null;
@@ -170,9 +182,6 @@ export default {
         },
       };
     },
-    stoppedCount() {
-      return this.environmentApp?.stoppedCount;
-    },
     totalItems() {
       return this.pageInfo?.total;
     },
@@ -253,45 +262,45 @@ export default {
     <stop-environment-modal :environment="environmentToStop" graphql />
     <confirm-rollback-modal :environment="environmentToRollback" graphql />
     <canary-update-modal :environment="environmentToChangeCanary" :weight="weight" />
-    <gl-tabs
-      :action-secondary="openReviewAppModal"
-      :action-primary="openCleanUpEnvsModal"
-      :action-tertiary="addEnvironment"
-      sync-active-tab-with-query-params
-      query-param-name="scope"
-      @secondary="showReviewAppModal"
-      @primary="showCleanUpEnvsModal"
-    >
-      <gl-tab
-        :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE"
-        @click="setScope($options.ENVIRONMENTS_SCOPE.AVAILABLE)"
+    <template v-if="showContent">
+      <gl-tabs
+        :action-secondary="openReviewAppModal"
+        :action-primary="openCleanUpEnvsModal"
+        :action-tertiary="addEnvironment"
+        sync-active-tab-with-query-params
+        query-param-name="scope"
+        @secondary="showReviewAppModal"
+        @primary="showCleanUpEnvsModal"
       >
-        <template #title>
-          <span>{{ $options.i18n.available }}</span>
-          <gl-badge size="sm" class="gl-tab-counter-badge">
-            {{ availableCount }}
-          </gl-badge>
-        </template>
-      </gl-tab>
-      <gl-tab
-        :query-param-value="$options.ENVIRONMENTS_SCOPE.STOPPED"
-        @click="setScope($options.ENVIRONMENTS_SCOPE.STOPPED)"
-      >
-        <template #title>
-          <span>{{ $options.i18n.stopped }}</span>
-          <gl-badge size="sm" class="gl-tab-counter-badge">
-            {{ stoppedCount }}
-          </gl-badge>
-        </template>
-      </gl-tab>
-    </gl-tabs>
-    <gl-search-box-by-type
-      class="gl-mb-4"
-      :value="search"
-      :placeholder="$options.i18n.searchPlaceholder"
-      @input="setSearch"
-    />
-    <template v-if="hasEnvironments">
+        <gl-tab
+          :query-param-value="$options.ENVIRONMENTS_SCOPE.AVAILABLE"
+          @click="setScope($options.ENVIRONMENTS_SCOPE.AVAILABLE)"
+        >
+          <template #title>
+            <span>{{ $options.i18n.available }}</span>
+            <gl-badge size="sm" class="gl-tab-counter-badge">
+              {{ availableCount }}
+            </gl-badge>
+          </template>
+        </gl-tab>
+        <gl-tab
+          :query-param-value="$options.ENVIRONMENTS_SCOPE.STOPPED"
+          @click="setScope($options.ENVIRONMENTS_SCOPE.STOPPED)"
+        >
+          <template #title>
+            <span>{{ $options.i18n.stopped }}</span>
+            <gl-badge size="sm" class="gl-tab-counter-badge">
+              {{ stoppedCount }}
+            </gl-badge>
+          </template>
+        </gl-tab>
+      </gl-tabs>
+      <gl-search-box-by-type
+        class="gl-mb-4"
+        :value="search"
+        :placeholder="$options.i18n.searchPlaceholder"
+        @input="setSearch"
+      />
       <environment-folder
         v-for="folder in folders"
         :key="folder.name"
@@ -309,10 +318,10 @@ export default {
       />
     </template>
     <empty-state
-      v-else-if="!$apollo.queries.environmentApp.loading"
+      v-if="showEmptyState"
       :help-path="helpPagePath"
-      :scope="scope"
       :has-term="hasSearch"
+      @enable-review="showReviewAppModal"
     />
     <gl-pagination
       align="center"
diff --git a/app/assets/javascripts/environments/constants.js b/app/assets/javascripts/environments/constants.js
index e675a73ba7d..448cee530f6 100644
--- a/app/assets/javascripts/environments/constants.js
+++ b/app/assets/javascripts/environments/constants.js
@@ -51,7 +51,7 @@ export const ENVIRONMENT_COUNT_BY_SCOPE = {
 };
 
 export const REVIEW_APP_MODAL_I18N = {
-  title: s__('ReviewApp|Enable Review App'),
+  title: s__('Environments|Enable Review Apps'),
   intro: s__(
     'EnableReviewApp|Review apps are dynamic environments that you can use to provide a live preview of changes made in a feature branch.',
   ),