Commit d6cdeac2 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '118844-one-button-review-app-fe' into 'master'

Resolve "Create conditional "Enable Review App" button"

See merge request gitlab-org/gitlab!23703
parents 167540aa 48acb673
<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>
<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>
......
......@@ -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);
}
},
......
......@@ -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.
*
......
---
title: Create conditional Enable Review App button
merge_request: 23703
author:
type: added
......@@ -7137,6 +7137,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 ""
......@@ -7311,6 +7326,9 @@ msgstr ""
msgid "Environments|Deployment"
msgstr ""
msgid "Environments|Enable review app"
msgstr ""
msgid "Environments|Environment"
msgstr ""
......@@ -16189,6 +16207,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 ""
......
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);
});
});
});
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment