Add flag check to code

This involves three files because store

app/assets/javascripts/environments/components/enable_review_app_button.vue

+<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="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>

app/assets/javascripts/environments/components/environments_app.vue

 <script>
+import { GlButton } from '@gitlab/ui';
 import envrionmentsAppMixin from 'ee_else_ce/environments/mixins/environments_app_mixin';
-import Flash from '../../flash';
-import { s__ } from '../../locale';
+import 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 CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
+import EnableReviewAppButton from './enable_review_app_button.vue';
 import StopEnvironmentModal from './stop_environment_modal.vue';
 import ConfirmRollbackModal from './confirm_rollback_modal.vue';
 
 export default {
   components: {
+    ConfirmRollbackModal,
     emptyState,
+    EnableReviewAppButton,
+    GlButton,
     StopEnvironmentModal,
-    ConfirmRollbackModal,
   },
 
   mixins: [CIPaginationMixin, environmentsMixin, envrionmentsAppMixin],
@@ -96,10 +100,16 @@ export default {
     <div class="top-area">
       <tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
 
-      <div v-if="canCreateEnvironment && !isLoading" class="nav-controls">
-        <a :href="newEnvironmentPath" class="btn btn-success">
+      <div class="nav-controls">
+        <enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" />
+        <gl-button
+          v-if="canCreateEnvironment && !isLoading"
+          :href="newEnvironmentPath"
+          category="primary"
+          variant="success"
+        >
           {{ s__('Environments|New environment') }}
-        </a>
+        </gl-button>
       </div>
     </div>
 

app/assets/javascripts/environments/mixins/environments_mixin.js

@@ -52,6 +52,7 @@ export default {
         this.store.storeAvailableCount(resp.data.available_count);
         this.store.storeStoppedCount(resp.data.stopped_count);
         this.store.storeEnvironments(resp.data.environments);
+        this.store.setReviewAppDetails(resp.data.review_app);
         this.store.setPagination(resp.headers);
       }
     },

app/assets/javascripts/environments/stores/environments_store.js

@@ -14,6 +14,7 @@ export default class EnvironmentsStore {
     this.state.stoppedCounter = 0;
     this.state.availableCounter = 0;
     this.state.paginationInformation = {};
+    this.state.reviewAppDetails = {};
 
     return this;
   }
@@ -104,6 +105,11 @@ export default class EnvironmentsStore {
     return paginationInformation;
   }
 
+  setReviewAppDetails(details = {}) {
+    this.state.reviewAppDetails = details;
+    return details;
+  }
+
   /**
    * Stores the number of available environments.
    *

changelogs/unreleased/118844-one-button-review-app-fe.yml

+---
+title: Create conditional Enable Review App button
+merge_request: 23703
+author:
+type: added

locale/gitlab.pot

@@ -7122,6 +7122,21 @@ msgstr ""
 msgid "Enable/disable your service desk. %{link_start}Learn more about service desk%{link_end}."
 msgstr ""
 
+msgid "EnableReviewApp|%{stepStart}Step 1%{stepEnd}. Ensure you have Kubernetes set up and have a base domain for your %{linkStart}cluster%{linkEnd}."
+msgstr ""
+
+msgid "EnableReviewApp|%{stepStart}Step 2%{stepEnd}. Copy the following snippet:"
+msgstr ""
+
+msgid "EnableReviewApp|%{stepStart}Step 3%{stepEnd}. Add it to the project %{linkStart}gitlab-ci.yml%{linkEnd} file."
+msgstr ""
+
+msgid "EnableReviewApp|Close"
+msgstr ""
+
+msgid "EnableReviewApp|Copy snippet text"
+msgstr ""
+
 msgid "Enabled"
 msgstr ""
 
@@ -7296,6 +7311,9 @@ msgstr ""
 msgid "Environments|Deployment"
 msgstr ""
 
+msgid "Environments|Enable review app"
+msgstr ""
+
 msgid "Environments|Environment"
 msgstr ""
 
@@ -16147,6 +16165,9 @@ msgstr ""
 msgid "Review time is defined as the time it takes from first comment until merged."
 msgstr ""
 
+msgid "ReviewApp|Enable Review App"
+msgstr ""
+
 msgid "Reviewing"
 msgstr ""
 

spec/frontend/environments/enable_review_app_button_spec.js

+import { shallowMount, mount } from '@vue/test-utils';
+import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
+import EnableReviewAppButton from '~/environments/components/enable_review_app_button.vue';
+
+describe('Enable Review App Button', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('renders button with text', () => {
+    beforeEach(() => {
+      wrapper = mount(EnableReviewAppButton);
+    });
+
+    it('renders Enable Review text', () => {
+      expect(wrapper.text()).toBe('Enable review app');
+    });
+  });
+
+  describe('renders the modal', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(EnableReviewAppButton);
+    });
+
+    it('renders the copyToClipboard button', () => {
+      expect(wrapper.find(ModalCopyButton).exists()).toBe(true);
+    });
+  });
+});

spec/javascripts/environments/environments_app_spec.js

@@ -55,6 +55,26 @@ describe('Environment', () => {
           "You don't have any environments right now",
         );
       });
+
+      describe('when it is possible to enable a review app', () => {
+        beforeEach(done => {
+          mock
+            .onGet(mockData.endpoint)
+            .reply(200, { environments: [], review_app: { can_setup_review_app: true } });
+
+          component = mountComponent(EnvironmentsComponent, mockData);
+
+          setTimeout(() => {
+            done();
+          }, 0);
+        });
+
+        it('should render the enable review app button', () => {
+          expect(component.$el.querySelector('.js-enable-review-app-button').textContent).toContain(
+            'Enable review app',
+          );
+        });
+      });
     });
 
     describe('with paginated environments', () => {