Updated the terraform empty state

To fix the UX bug on the /terraform page if no terraform states exist,
we are updating the copy of the empty state component.

Changelog: fixed

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

 <script>
-import { GlEmptyState, GlIcon, GlLink } from '@gitlab/ui';
+import { GlEmptyState, GlLink } from '@gitlab/ui';
+import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 
 export default {
+  i18n: {
+    title: s__("Terraform|Your project doesn't have any Terraform state files"),
+    description: s__('Terraform|How to use GitLab-managed Terraform state?'),
+  },
+  docsUrl: helpPagePath('user/infrastructure/iac/terraform_state'),
   components: {
     GlEmptyState,
-    GlIcon,
     GlLink,
   },
   props: {
@@ -14,23 +19,13 @@ export default {
       required: true,
     },
   },
-  computed: {
-    docsUrl() {
-      return helpPagePath('user/infrastructure/iac/terraform_state');
-    },
-  },
 };
 </script>
 
 <template>
-  <gl-empty-state :svg-path="image" :title="s__('Terraform|Get started with Terraform')">
+  <gl-empty-state :svg-path="image" :title="$options.i18n.title">
     <template #description>
-      <p>
-        <gl-link :href="docsUrl" target="_blank"
-          >{{ s__('Terraform|How to use GitLab-managed Terraform State?') }}
-          <gl-icon name="external-link"
-        /></gl-link>
-      </p>
+      <gl-link :href="$options.docsUrl">{{ $options.i18n.description }}</gl-link>
     </template>
   </gl-empty-state>
 </template>

locale/gitlab.pot

@@ -37180,10 +37180,7 @@ 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?"
+msgid "Terraform|How to use GitLab-managed Terraform state?"
 msgstr ""
 
 msgid "Terraform|Job status"
@@ -37264,6 +37261,9 @@ msgstr ""
 msgid "Terraform|You cannot remove the State file because it's locked. Unlock the State file first before removing it."
 msgstr ""
 
+msgid "Terraform|Your project doesn't have any Terraform state files"
+msgstr ""
+
 msgid "Test"
 msgstr ""
 

spec/features/projects/terraform_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe 'Terraform', :js do
       end
 
       it 'sees an empty state' do
-        expect(page).to have_content('Get started with Terraform')
+        expect(page).to have_content("Your project doesn't have any Terraform state files")
       end
     end
 

spec/frontend/terraform/components/empty_state_spec.js

@@ -13,15 +13,20 @@ describe('EmptyStateComponent', () => {
   const findLink = () => wrapper.findComponent(GlLink);
 
   beforeEach(() => {
-    wrapper = shallowMount(EmptyState, { propsData, stubs: { GlEmptyState, GlLink } });
+    wrapper = shallowMount(EmptyState, { propsData });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   it('should render content', () => {
-    expect(findEmptyState().exists()).toBe(true);
-    expect(wrapper.text()).toContain('Get started with Terraform');
+    expect(findEmptyState().props('title')).toBe(
+      "Your project doesn't have any Terraform state files",
+    );
   });
 
-  it('should have a link to the GitLab managed Terraform States docs', () => {
+  it('should have a link to the GitLab managed Terraform states docs', () => {
     expect(findLink().attributes('href')).toBe(docsUrl);
   });
 });