Add latest changes from gitlab-org/gitlab@master

3 files changed, 138 insertions, 120 deletions

diff --git a/app/assets/javascripts/environments/components/enable_review_app_button.vue b/app/assets/javascripts/environments/components/enable_review_app_button.vue
deleted file mode 100644
index 554875b7ce3..00000000000
--- a/app/assets/javascripts/environments/components/enable_review_app_button.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
-import { GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
-import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
-import { s__ } from '~/locale';
-
-export default {
-  components: {
-    GlButton,
-    GlLink,
-    GlModal,
-    GlSprintf,
-    ModalCopyButton,
-  },
-  directives: {
-    'gl-modal': GlModalDirective,
-  },
-  instructionText: {
-    step1: s__(
-      'EnableReviewApp|%{stepStart}Step 1%{stepEnd}. Ensure you have Kubernetes set up and have a base domain for your %{linkStart}cluster%{linkEnd}.',
-    ),
-    step2: s__('EnableReviewApp|%{stepStart}Step 2%{stepEnd}. Copy the following snippet:'),
-    step3: s__(
-      `EnableReviewApp|%{stepStart}Step 3%{stepEnd}. Add it to the project %{linkStart}gitlab-ci.yml%{linkEnd} file.`,
-    ),
-  },
-  modalInfo: {
-    closeText: s__('EnableReviewApp|Close'),
-    copyToClipboardText: s__('EnableReviewApp|Copy snippet text'),
-    copyString: `deploy_review:
-  stage: deploy
-  script:
-    - echo "Deploy a review app"
-  environment:
-    name: review/$CI_COMMIT_REF_NAME
-    url: https://$CI_ENVIRONMENT_SLUG.example.com
-  only:
-    - branches
-  except:
-    - master`,
-    id: 'enable-review-app-info',
-    title: s__('ReviewApp|Enable Review App'),
-  },
-};
-</script>
-<template>
-  <div>
-    <gl-button
-      v-gl-modal="$options.modalInfo.id"
-      variant="info"
-      category="secondary"
-      type="button"
-      class="gl-w-full js-enable-review-app-button"
-    >
-      {{ s__('Environments|Enable review app') }}
-    </gl-button>
-    <gl-modal
-      :modal-id="$options.modalInfo.id"
-      :title="$options.modalInfo.title"
-      size="lg"
-      class="text-2 ws-normal"
-      ok-only
-      ok-variant="light"
-      :ok-title="$options.modalInfo.closeText"
-    >
-      <p>
-        <gl-sprintf :message="$options.instructionText.step1">
-          <template #step="{ content }">
-            <strong>{{ content }}</strong>
-          </template>
-          <template #link="{ content }">
-            <gl-link
-              href="https://docs.gitlab.com/ee/user/project/clusters/add_remove_clusters.html"
-              target="_blank"
-              >{{ content }}</gl-link
-            >
-          </template>
-        </gl-sprintf>
-      </p>
-      <div>
-        <p>
-          <gl-sprintf :message="$options.instructionText.step2">
-            <template #step="{ content }">
-              <strong>{{ content }}</strong>
-            </template>
-          </gl-sprintf>
-        </p>
-        <div class="flex align-items-start">
-          <pre class="w-100"> {{ $options.modalInfo.copyString }} </pre>
-          <modal-copy-button
-            :title="$options.modalInfo.copyToClipboardText"
-            :text="$options.modalInfo.copyString"
-            :modal-id="$options.modalInfo.id"
-            css-classes="border-0"
-          />
-        </div>
-      </div>
-      <p>
-        <gl-sprintf :message="$options.instructionText.step3">
-          <template #step="{ content }">
-            <strong>{{ content }}</strong>
-          </template>
-          <template #link="{ content }">
-            <gl-link href="blob/master/.gitlab-ci.yml" target="_blank">{{ content }}</gl-link>
-          </template>
-        </gl-sprintf>
-      </p>
-    </gl-modal>
-  </div>
-</template>
diff --git a/app/assets/javascripts/environments/components/enable_review_app_modal.vue b/app/assets/javascripts/environments/components/enable_review_app_modal.vue
new file mode 100644
index 00000000000..3dd1d5a1bcc
--- /dev/null
+++ b/app/assets/javascripts/environments/components/enable_review_app_modal.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlLink, GlModal, GlSprintf } from '@gitlab/ui';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlLink,
+    GlModal,
+    GlSprintf,
+    ModalCopyButton,
+  },
+  props: {
+    modalId: {
+      type: String,
+      required: true,
+    },
+  },
+  instructionText: {
+    step1: s__(
+      'EnableReviewApp|%{stepStart}Step 1%{stepEnd}. Ensure you have Kubernetes set up and have a base domain for your %{linkStart}cluster%{linkEnd}.',
+    ),
+    step2: s__('EnableReviewApp|%{stepStart}Step 2%{stepEnd}. Copy the following snippet:'),
+    step3: s__(
+      `EnableReviewApp|%{stepStart}Step 3%{stepEnd}. Add it to the project %{linkStart}gitlab-ci.yml%{linkEnd} file.`,
+    ),
+  },
+  modalInfo: {
+    closeText: s__('EnableReviewApp|Close'),
+    copyToClipboardText: s__('EnableReviewApp|Copy snippet text'),
+    copyString: `deploy_review:
+  stage: deploy
+  script:
+    - echo "Deploy a review app"
+  environment:
+    name: review/$CI_COMMIT_REF_NAME
+    url: https://$CI_ENVIRONMENT_SLUG.example.com
+  only:
+    - branches
+  except:
+    - master`,
+    title: s__('ReviewApp|Enable Review App'),
+  },
+};
+</script>
+<template>
+  <gl-modal
+    :modal-id="modalId"
+    :title="$options.modalInfo.title"
+    size="lg"
+    ok-only
+    ok-variant="light"
+    :ok-title="$options.modalInfo.closeText"
+  >
+    <p>
+      <gl-sprintf :message="$options.instructionText.step1">
+        <template #step="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #link="{ content }">
+          <gl-link
+            href="https://docs.gitlab.com/ee/user/project/clusters/add_remove_clusters.html"
+            target="_blank"
+            >{{ content }}</gl-link
+          >
+        </template>
+      </gl-sprintf>
+    </p>
+    <div>
+      <p>
+        <gl-sprintf :message="$options.instructionText.step2">
+          <template #step="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </p>
+      <div class="gl-display-flex align-items-start">
+        <pre class="gl-w-full"> {{ $options.modalInfo.copyString }} </pre>
+        <modal-copy-button
+          :title="$options.modalInfo.copyToClipboardText"
+          :text="$options.modalInfo.copyString"
+          :modal-id="modalId"
+          css-classes="border-0"
+        />
+      </div>
+    </div>
+    <p>
+      <gl-sprintf :message="$options.instructionText.step3">
+        <template #step="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #link="{ content }">
+          <gl-link href="blob/master/.gitlab-ci.yml" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
+  </gl-modal>
+</template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index 8c4d374ebe7..9bafc7ed153 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,21 +1,28 @@
 <script>
-import { GlBadge, GlButton, GlTab, GlTabs } from '@gitlab/ui';
+import { GlBadge, GlButton, GlModalDirective, GlTab, GlTabs } from '@gitlab/ui';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import { s__ } from '~/locale';
 import emptyState from './empty_state.vue';
 import eventHub from '../event_hub';
 import environmentsMixin from '../mixins/environments_mixin';
 import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
-import EnableReviewAppButton from './enable_review_app_button.vue';
+import EnableReviewAppModal from './enable_review_app_modal.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
 import DeleteEnvironmentModal from './delete_environment_modal.vue';
 import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 
 export default {
+  i18n: {
+    newEnvironmentButtonLabel: s__('Environments|New environment'),
+    reviewAppButtonLabel: s__('Environments|Enable review app'),
+  },
+  modal: {
+    id: 'enable-review-app-info',
+  },
   components: {
     ConfirmRollbackModal,
     emptyState,
-    EnableReviewAppButton,
+    EnableReviewAppModal,
     GlBadge,
     GlButton,
     GlTab,
@@ -23,9 +30,10 @@ export default {
     StopEnvironmentModal,
     DeleteEnvironmentModal,
   },
-
+  directives: {
+    'gl-modal': GlModalDirective,
+  },
   mixins: [CIPaginationMixin, environmentsMixin],
-
   props: {
     endpoint: {
       type: String,
@@ -140,17 +148,25 @@ export default {
         gl-mt-3
         gl-display-md-none!"
       >
-        <enable-review-app-button
+        <gl-button
           v-if="state.reviewAppDetails.can_setup_review_app"
+          v-gl-modal="$options.modal.id"
+          data-testid="enable-review-app"
+          variant="info"
+          category="secondary"
+          type="button"
           class="gl-mb-3 gl-flex-fill-1"
-        />
+        >
+          {{ $options.i18n.reviewAppButtonLabel }}
+        </gl-button>
         <gl-button
           v-if="canCreateEnvironment"
           :href="newEnvironmentPath"
+          data-testid="new-environment"
           category="primary"
           variant="success"
         >
-          {{ s__('Environments|New environment') }}
+          {{ $options.i18n.newEnvironmentButtonLabel }}
         </gl-button>
       </div>
       <gl-tabs content-class="gl-display-none">
@@ -176,17 +192,25 @@ export default {
             gl-lg-justify-content-end
             gl-lg-mt-0"
           >
-            <enable-review-app-button
+            <gl-button
               v-if="state.reviewAppDetails.can_setup_review_app"
+              v-gl-modal="$options.modal.id"
+              data-testid="enable-review-app"
+              variant="info"
+              category="secondary"
+              type="button"
               class="gl-mb-3 gl-lg-mr-3 gl-lg-mb-0"
-            />
+            >
+              {{ $options.i18n.reviewAppButtonLabel }}
+            </gl-button>
             <gl-button
               v-if="canCreateEnvironment"
               :href="newEnvironmentPath"
+              data-testid="new-environment"
               category="primary"
               variant="success"
             >
-              {{ s__('Environments|New environment') }}
+              {{ $options.i18n.newEnvironmentButtonLabel }}
             </gl-button>
           </div>
         </template>
@@ -208,6 +232,11 @@ export default {
           <empty-state :help-path="helpPagePath" />
         </template>
       </container>
+      <enable-review-app-modal
+        v-if="state.reviewAppDetails.can_setup_review_app"
+        :modal-id="$options.modal.id"
+        data-testid="enable-review-app-modal"
+      />
     </div>
   </div>
 </template>