Disable location link for container images

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

@@ -25,9 +25,15 @@ export default {
     ancestors() {
       return this.location.ancestors || [];
     },
+    locationComponent() {
+      return this.isContainerImageDependency ? 'span' : GlLink;
+    },
     hasAncestors() {
       return this.ancestors.length > 0;
     },
+    isContainerImageDependency() {
+      return this.location.path.includes('container-image:');
+    },
     isTopLevelDependency() {
       return this.location.top_level;
     },
@@ -51,15 +57,20 @@ export default {
   <gl-intersperse separator=" / " class="gl-text-gray-500">
     <!-- We need to put an extra span to avoid separator between path & top level label -->
     <span>
-      <gl-link class="gl-display-inline-block gl-lg-display-block!" :href="location.blob_path">
-        <gl-icon name="doc-text" />
+      <component
+        :is="locationComponent"
+        data-testid="dependency-path"
+        class="gl-display-inline-block gl-lg-display-block!"
+        :href="location.blob_path"
+      >
+        <gl-icon v-if="!isContainerImageDependency" name="doc-text" />
         <gl-truncate
           class="gl-lg-max-w-80p gl-display-none gl-lg-display-inline-flex"
           :text="location.path"
           with-tooltip
         />
         <span class="gl-lg-display-none">{{ location.path }}</span>
-      </gl-link>
+      </component>
       <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
     </span>
 

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

-import { GlLink, GlIntersperse, GlPopover } from '@gitlab/ui';
+import { GlLink, GlIcon, GlIntersperse, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import DependencyLocation from 'ee/dependencies/components/dependency_location.vue';
 import DependencyPathViewer from 'ee/dependencies/components/dependency_path_viewer.vue';
@@ -16,6 +16,9 @@ describe('Dependency Location component', () => {
     });
   };
 
+  const findIcon = () => wrapper.find(GlIcon);
+  const findPath = () => wrapper.find('[data-testid="dependency-path"]');
+  const findPathLink = () => wrapper.find(GlLink);
   const findPopover = () => wrapper.find(GlPopover);
 
   afterEach(() => {
@@ -23,11 +26,12 @@ describe('Dependency Location component', () => {
   });
 
   it.each`
-    name                | location              | path
-    ${'no path'}        | ${Paths.noPath}       | ${'package.json'}
-    ${'top level path'} | ${Paths.topLevelPath} | ${'package.json (top level)'}
-    ${'short path'}     | ${Paths.shortPath}    | ${'package.json / swell 1.2 / emmajsq 10.11'}
-    ${'long path'}      | ${Paths.longPath}     | ${'package.json / swell 1.2 / emmajsq 10.11 / 3 more'}
+    name                      | location                    | path
+    ${'container image path'} | ${Paths.containerImagePath} | ${Paths.containerImagePath.path}
+    ${'no path'}              | ${Paths.noPath}             | ${Paths.noPath.path}
+    ${'top level path'}       | ${Paths.topLevelPath}       | ${'package.json (top level)'}
+    ${'short path'}           | ${Paths.shortPath}          | ${'package.json / swell 1.2 / emmajsq 10.11'}
+    ${'long path'}            | ${Paths.longPath}           | ${'package.json / swell 1.2 / emmajsq 10.11 / 3 more'}
   `('shows dependency path for $name', ({ location, path }) => {
     createComponent({
       propsData: {
@@ -67,8 +71,8 @@ describe('Dependency Location component', () => {
       });
     });
 
-    it('should show the depedency name and link', () => {
-      const locationLink = wrapper.find(GlLink);
+    it('should show the dependency name and link', () => {
+      const locationLink = findPathLink();
       expect(locationLink.attributes().href).toBe('test.link');
       expect(locationLink.text()).toBe('package.json');
     });
@@ -81,5 +85,28 @@ describe('Dependency Location component', () => {
     it('should not render the popover', () => {
       expect(findPopover().exists()).toBe(false);
     });
+
+    it('should render the icon', () => {
+      expect(findIcon().exists()).toBe(true);
+    });
+  });
+
+  describe('dependency with container image dependency path', () => {
+    beforeEach(() => {
+      createComponent({
+        propsData: {
+          location: Paths.containerImagePath,
+        },
+      });
+    });
+
+    it('should render the dependency name not as a link', () => {
+      expect(findPathLink().exists()).toBe(false);
+      expect(findPath().text()).toBe(Paths.containerImagePath.path);
+    });
+
+    it('should not render the icon', () => {
+      expect(findIcon().exists()).toBe(false);
+    });
   });
 });

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

+export const containerImagePath = {
+  ancestors: null,
+  top_level: null,
+  blob_path: 'test.link',
+  path: 'container-image:nginx:1.17',
+};
+
 export const longPath = {
   ancestors: [
     {