From 01c624c47dd235bd6519658aa66c45d186453d52 Mon Sep 17 00:00:00 2001
From: Anna Vovchenko <avovchenko@gitlab.com>
Date: Wed, 4 Aug 2021 12:00:32 +0000
Subject: [PATCH] Update Terraform view empty state copy and docs link
---
.../terraform/components/empty_state.vue | 30 +++++++------------
locale/gitlab.pot | 6 ++--
.../terraform/components/empty_state_spec.js | 19 ++++++------
3 files changed, 24 insertions(+), 31 deletions(-)
diff --git a/app/assets/javascripts/terraform/components/empty_state.vue b/app/assets/javascripts/terraform/components/empty_state.vue
index d86ba3af2b17..a5a613b72820 100644
--- a/app/assets/javascripts/terraform/components/empty_state.vue
+++ b/app/assets/javascripts/terraform/components/empty_state.vue
@@ -1,12 +1,12 @@
<script>
-import { GlEmptyState, GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlEmptyState, GlIcon, GlLink } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
export default {
components: {
GlEmptyState,
GlIcon,
GlLink,
- GlSprintf,
},
props: {
image: {
@@ -14,6 +14,11 @@ export default {
required: true,
},
},
+ computed: {
+ docsUrl() {
+ return helpPagePath('user/infrastructure/terraform_state');
+ },
+ },
};
</script>
@@ -21,23 +26,10 @@ export default {
<gl-empty-state :svg-path="image" :title="s__('Terraform|Get started with Terraform')">
<template #description>
<p>
- <gl-sprintf
- :message="
- s__(
- 'Terraform|Find out how to use the %{linkStart}GitLab managed Terraform State%{linkEnd}',
- )
- "
- >
- <template #link="{ content }">
- <gl-link
- href="https://docs.gitlab.com/ee/user/infrastructure/index.html"
- target="_blank"
- >
- {{ content }}
- <gl-icon name="external-link" />
- </gl-link>
- </template>
- </gl-sprintf>
+ <gl-link :href="docsUrl" target="_blank"
+ >{{ s__('Terraform|How to use GitLab-managed Terraform State?') }}
+ <gl-icon name="external-link"
+ /></gl-link>
</p>
</template>
</gl-empty-state>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b0017b7bbfe0..bea828625f33 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -32513,15 +32513,15 @@ msgstr ""
msgid "Terraform|Download JSON"
msgstr ""
-msgid "Terraform|Find out how to use the %{linkStart}GitLab managed Terraform State%{linkEnd}"
-msgstr ""
-
msgid "Terraform|Generating the report caused an error."
msgstr ""
msgid "Terraform|Get started with Terraform"
msgstr ""
+msgid "Terraform|How to use GitLab-managed Terraform State?"
+msgstr ""
+
msgid "Terraform|Job status"
msgstr ""
diff --git a/spec/frontend/terraform/components/empty_state_spec.js b/spec/frontend/terraform/components/empty_state_spec.js
index c86160e18f32..1637ac2039ca 100644
--- a/spec/frontend/terraform/components/empty_state_spec.js
+++ b/spec/frontend/terraform/components/empty_state_spec.js
@@ -1,4 +1,4 @@
-import { GlEmptyState, GlSprintf } from '@gitlab/ui';
+import { GlEmptyState, GlLink } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import EmptyState from '~/terraform/components/empty_state.vue';
@@ -8,19 +8,20 @@ describe('EmptyStateComponent', () => {
const propsData = {
image: '/image/path',
};
+ const docsUrl = '/help/user/infrastructure/terraform_state';
+ const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+ const findLink = () => wrapper.findComponent(GlLink);
beforeEach(() => {
- wrapper = shallowMount(EmptyState, { propsData, stubs: { GlEmptyState, GlSprintf } });
- return wrapper.vm.$nextTick();
- });
-
- afterEach(() => {
- wrapper.destroy();
- wrapper = null;
+ wrapper = shallowMount(EmptyState, { propsData, stubs: { GlEmptyState, GlLink } });
});
it('should render content', () => {
- expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+ expect(findEmptyState().exists()).toBe(true);
expect(wrapper.text()).toContain('Get started with Terraform');
});
+
+ it('should have a link to the GitLab managed Terraform States docs', () => {
+ expect(findLink().attributes('href')).toBe(docsUrl);
+ });
});
--
GitLab