Merge branch '323245-update-terraform-empty-state-copy-and-link' into 'master'

Update Terraform view empty state copy and docs link

See merge request gitlab-org/gitlab!67428

app/assets/javascripts/terraform/components/empty_state.vue

 <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>

locale/gitlab.pot

@@ -32522,15 +32522,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 ""
 

spec/frontend/terraform/components/empty_state_spec.js

-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);
+  });
 });