Refactor empty state pages for license compliance & dependency list

This commit adresses: https://gitlab.com/gitlab-org/gitlab/-/issues/290948
It refactors the empty state pages for license compliance &
dependency list, where it replaces the primary button
with an inline link.

ee/app/assets/javascripts/dependencies/components/app.vue

 <script>
-import { GlEmptyState, GlIcon, GlLoadingIcon, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
+import { GlEmptyState, GlIcon, GlLoadingIcon, GlSprintf, GlLink } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { __ } from '~/locale';
 import { DEPENDENCY_LIST_TYPES } from '../store/constants';
@@ -18,7 +18,6 @@ export default {
     GlLoadingIcon,
     GlSprintf,
     GlLink,
-    GlButton,
     DependencyListIncompleteAlert,
     DependencyListJobFailedAlert,
     PaginatedDependenciesTable,
@@ -79,7 +78,7 @@ export default {
           description: __(
             'The dependency list details information about the components used within your project.',
           ),
-          buttonLabel: __('Learn more about the dependency list'),
+          linkText: __('More Information'),
           link: this.documentationPath,
         },
         [REPORT_STATUS.noDependencies]: {
@@ -87,7 +86,7 @@ export default {
           description: __(
             'It seems like the Dependency Scanning job ran successfully, but no dependencies have been detected in your project.',
           ),
-          buttonLabel: __('View supported languages and frameworks'),
+          linkText: __('View supported languages and frameworks'),
           link: this.supportDocumentationPath,
         },
       };
@@ -122,13 +121,13 @@ export default {
   <gl-empty-state
     v-else-if="showEmptyState"
     :title="emptyStateOptions.title"
-    :description="emptyStateOptions.description"
     :svg-path="emptyStateSvgPath"
   >
-    <template #actions>
-      <gl-button variant="info" :href="emptyStateOptions.link">
-        {{ emptyStateOptions.buttonLabel }}
-      </gl-button>
+    <template #description>
+      {{ emptyStateOptions.description }}
+      <gl-link target="_blank" :href="emptyStateOptions.link">
+        {{ emptyStateOptions.linkText }}
+      </gl-link>
     </template>
   </gl-empty-state>
 

ee/app/assets/javascripts/license_compliance/components/app.vue

@@ -96,15 +96,19 @@ export default {
   <gl-empty-state
     v-else-if="hasEmptyState"
     :title="s__('Licenses|View license details for your project')"
-    :description="
-      s__(
-        'Licenses|The license list details information about the licenses used within your project.',
-      )
-    "
     :svg-path="emptyStateSvgPath"
-    :primary-button-link="documentationPath"
-    :primary-button-text="s__('Licenses|Learn more about license compliance')"
-  />
+  >
+    <template #description>
+      {{
+        s__(
+          'Licenses|The license list details information about the licenses used within your project.',
+        )
+      }}
+      <gl-link target="_blank" :href="documentationPath">
+        {{ __('More Information') }}
+      </gl-link>
+    </template>
+  </gl-empty-state>
 
   <div v-else>
     <gl-alert v-if="hasPolicyViolations" class="mt-3" variant="warning" :dismissible="false">

ee/changelogs/unreleased/jnnkl-inline-links-dependency-license.yml

+---
+title: Update License Compliance and Dependency List Empty State Pages
+merge_request: 54314
+author:
+type: changed

ee/spec/features/projects/licenses/maintainer_views_policies_spec.rb

@@ -21,7 +21,7 @@ RSpec.describe 'EE > Projects > Licenses > Maintainer views policies', :js do
   context 'when policies are not configured' do
     it 'displays a link to the documentation to configure license compliance' do
       expect(page).to have_content('License Compliance')
-      expect(page).to have_content('Learn more about license compliance')
+      expect(page).to have_content('More Information')
     end
   end
 

ee/spec/frontend/dependencies/components/__snapshots__/app_spec.js.snap

@@ -3,7 +3,7 @@
 exports[`DependenciesApp component on creation given the dependency list job has not yet run shows only the empty state 1`] = `
 Object {
   "compact": false,
-  "description": "The dependency list details information about the components used within your project.",
+  "description": null,
   "primaryButtonLink": null,
   "primaryButtonText": null,
   "secondaryButtonLink": null,
@@ -17,7 +17,7 @@ Object {
 exports[`DependenciesApp component on creation given there are no dependencies detected shows only the empty state 1`] = `
 Object {
   "compact": false,
-  "description": "It seems like the Dependency Scanning job ran successfully, but no dependencies have been detected in your project.",
+  "description": null,
   "primaryButtonLink": null,
   "primaryButtonText": null,
   "secondaryButtonLink": null,

ee/spec/frontend/dependencies/components/app_spec.js

@@ -115,6 +115,19 @@ describe('DependenciesApp component', () => {
   const expectNoDependenciesTables = () => expect(findDependenciesTables()).toHaveLength(0);
   const expectNoHeader = () => expect(findHeader().exists()).toBe(false);
 
+  const expectEmptyStateDescription = () => {
+    expect(wrapper.html()).toContain(
+      'The dependency list details information about the components used within your project.',
+    );
+  };
+
+  const expectEmptyStateLink = () => {
+    const emptyStateLink = wrapper.find(GlLink);
+    expect(emptyStateLink.html()).toContain('More Information');
+    expect(emptyStateLink.attributes('href')).toBe(TEST_HOST);
+    expect(emptyStateLink.attributes('target')).toBe('_blank');
+  };
+
   const expectDependenciesTable = () => {
     const tables = findDependenciesTables();
     expect(tables).toHaveLength(1);
@@ -157,6 +170,8 @@ describe('DependenciesApp component', () => {
       it('shows only the empty state', () => {
         expectComponentWithProps(GlEmptyState, { svgPath: basicAppProps.emptyStateSvgPath });
         expectComponentPropsToMatchSnapshot(GlEmptyState);
+        expectEmptyStateDescription();
+        expectEmptyStateLink();
         expectNoHeader();
         expectNoDependenciesTables();
       });

locale/gitlab.pot

@@ -17523,9 +17523,6 @@ msgstr ""
 msgid "Learn more about signing commits"
 msgstr ""
 
-msgid "Learn more about the dependency list"
-msgstr ""
-
 msgid "Learn more in the"
 msgstr ""
 
@@ -17748,9 +17745,6 @@ msgstr ""
 msgid "Licenses|Error fetching the license list. Please check your network connection and try again."
 msgstr ""
 
-msgid "Licenses|Learn more about license compliance"
-msgstr ""
-
 msgid "Licenses|License Compliance"
 msgstr ""