From be834a25982746ffd85252ff502df42bb88cb9d5 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Mon, 5 Oct 2020 13:54:15 +0000
Subject: Add latest changes from gitlab-org/gitlab@13-5-stable-ee

---
 .../components/enable_review_app_button.vue        |   2 +-
 .../environments/components/environments_app.vue   | 103 +++++++++++++++------
 .../environments/components/environments_table.vue |   1 -
 .../components/stop_environment_modal.vue          |  47 +++++-----
 4 files changed, 98 insertions(+), 55 deletions(-)

(limited to 'app/assets/javascripts/environments/components')

diff --git a/app/assets/javascripts/environments/components/enable_review_app_button.vue b/app/assets/javascripts/environments/components/enable_review_app_button.vue
index 8fbbc5189bf..554875b7ce3 100644
--- a/app/assets/javascripts/environments/components/enable_review_app_button.vue
+++ b/app/assets/javascripts/environments/components/enable_review_app_button.vue
@@ -49,7 +49,7 @@ export default {
       variant="info"
       category="secondary"
       type="button"
-      class="js-enable-review-app-button"
+      class="gl-w-full js-enable-review-app-button"
     >
       {{ s__('Environments|Enable review app') }}
     </gl-button>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index f0e74d96f09..18f69855349 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlBadge, GlButton, GlTab, GlTabs } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { s__ } from '~/locale';
 import emptyState from './empty_state.vue';
@@ -16,7 +16,10 @@ export default {
     ConfirmRollbackModal,
     emptyState,
     EnableReviewAppButton,
-    GlDeprecatedButton,
+    GlBadge,
+    GlButton,
+    GlTab,
+    GlTabs,
     StopEnvironmentModal,
     DeleteEnvironmentModal,
   },
@@ -124,43 +127,87 @@ export default {
 };
 </script>
 <template>
-  <div>
+  <div class="environments-section">
     <stop-environment-modal :environment="environmentInStopModal" />
     <delete-environment-modal :environment="environmentInDeleteModal" />
     <confirm-rollback-modal :environment="environmentInRollbackModal" />
 
-    <div class="top-area">
-      <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
-
-      <div class="nav-controls">
-        <enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" />
-        <gl-deprecated-button
+    <div class="gl-w-full">
+      <div
+        class="
+        gl-display-flex
+        gl-flex-direction-column
+        gl-mt-3
+        gl-display-md-none!"
+      >
+        <enable-review-app-button
+          v-if="state.reviewAppDetails.can_setup_review_app"
+          class="gl-mb-3 gl-flex-fill-1"
+        />
+        <gl-button
           v-if="canCreateEnvironment && !isLoading"
           :href="newEnvironmentPath"
           category="primary"
           variant="success"
         >
           {{ s__('Environments|New environment') }}
-        </gl-deprecated-button>
+        </gl-button>
       </div>
+      <gl-tabs content-class="gl-display-none">
+        <gl-tab
+          v-for="(tab, idx) in tabs"
+          :key="idx"
+          :title-item-class="`js-environments-tab-${tab.scope}`"
+          @click="onChangeTab(tab.scope)"
+        >
+          <template #title>
+            <span>{{ tab.name }}</span>
+            <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge>
+          </template>
+        </gl-tab>
+        <template #tabs-end>
+          <div
+            class="
+            gl-display-none
+            gl-display-md-flex
+            gl-lg-align-items-center
+            gl-lg-flex-direction-row
+            gl-lg-flex-fill-1
+            gl-lg-justify-content-end
+            gl-lg-mt-0"
+          >
+            <enable-review-app-button
+              v-if="state.reviewAppDetails.can_setup_review_app"
+              class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0"
+            />
+            <gl-button
+              v-if="canCreateEnvironment && !isLoading"
+              :href="newEnvironmentPath"
+              category="primary"
+              variant="success"
+            >
+              {{ s__('Environments|New environment') }}
+            </gl-button>
+          </div>
+        </template>
+      </gl-tabs>
+      <container
+        :is-loading="isLoading"
+        :environments="state.environments"
+        :pagination="state.paginationInformation"
+        :can-read-environment="canReadEnvironment"
+        :canary-deployment-feature-id="canaryDeploymentFeatureId"
+        :show-canary-deployment-callout="showCanaryDeploymentCallout"
+        :user-callouts-path="userCalloutsPath"
+        :lock-promotion-svg-path="lockPromotionSvgPath"
+        :help-canary-deployments-path="helpCanaryDeploymentsPath"
+        :deploy-boards-help-path="deployBoardsHelpPath"
+        @onChangePage="onChangePage"
+      >
+        <template v-if="!isLoading && state.environments.length === 0" #emptyState>
+          <empty-state :help-path="helpPagePath" />
+        </template>
+      </container>
     </div>
-
-    <container
-      :is-loading="isLoading"
-      :environments="state.environments"
-      :pagination="state.paginationInformation"
-      :can-read-environment="canReadEnvironment"
-      :canary-deployment-feature-id="canaryDeploymentFeatureId"
-      :show-canary-deployment-callout="showCanaryDeploymentCallout"
-      :user-callouts-path="userCalloutsPath"
-      :lock-promotion-svg-path="lockPromotionSvgPath"
-      :help-canary-deployments-path="helpCanaryDeploymentsPath"
-      :deploy-boards-help-path="deployBoardsHelpPath"
-      @onChangePage="onChangePage"
-    >
-      <template v-if="!isLoading && state.environments.length === 0" #emptyState>
-        <empty-state :help-path="helpPagePath" />
-      </template>
-    </container>
   </div>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index c06ab265915..c1b3eabec16 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -184,7 +184,6 @@ export default {
             :deploy-boards-help-path="deployBoardsHelpPath"
             :is-loading="model.isLoadingDeployBoard"
             :is-empty="model.isEmptyDeployBoard"
-            :has-legacy-app-label="model.hasLegacyAppLabel"
             :logs-path="model.logs_path"
           />
         </div>
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 88612376b6e..892d0b96da1 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -1,8 +1,7 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings, vue/no-v-html */
-import { GlTooltipDirective } from '@gitlab/ui';
+/* eslint-disable @gitlab/vue-require-i18n-strings */
+import { GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
-import { s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
@@ -11,6 +10,7 @@ export default {
 
   components: {
     GlModal: DeprecatedModal2,
+    GlSprintf,
   },
 
   directives: {
@@ -24,27 +24,6 @@ export default {
     },
   },
 
-  computed: {
-    noStopActionMessage() {
-      return sprintf(
-        s__(
-          `Environments|Note that this action will stop the environment,
-        but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment
-        due to no “stop environment action” being defined
-        in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file.`,
-        ),
-        {
-          emphasisStart: '<strong>',
-          emphasisEnd: '</strong>',
-          ciConfigLinkStart:
-            '<a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">',
-          ciConfigLinkEnd: '</a>',
-        },
-        false,
-      );
-    },
-  },
-
   methods: {
     onSubmit() {
       eventHub.$emit('stopEnvironment', this.environment);
@@ -72,7 +51,25 @@ export default {
     <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>
 
     <div v-if="!environment.has_stop_action" class="warning_message">
-      <p v-html="noStopActionMessage"></p>
+      <p>
+        <gl-sprintf
+          :message="
+            s__(`Environments|Note that this action will stop the environment,
+        but it will %{emphasisStart}not%{emphasisEnd} have an effect on any existing deployment
+        due to no “stop environment action” being defined
+        in the %{ciConfigLinkStart}.gitlab-ci.yml%{ciConfigLinkEnd} file.`)
+          "
+        >
+          <template #emphasis="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+          <template #ciConfigLink="{ content }">
+            <a href="https://docs.gitlab.com/ee/ci/yaml/" target="_blank" rel="noopener noreferrer">
+              {{ content }}</a
+            >
+          </template>
+        </gl-sprintf>
+      </p>
       <a
         href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment"
         target="_blank"
-- 
cgit v1.2.3