Remove container-image: from location on the Dependency List

Changelog: fixed
EE: true

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

@@ -4,6 +4,7 @@ import { n__ } from '~/locale';
 import DependencyPathViewer from './dependency_path_viewer.vue';
 
 export const VISIBLE_DEPENDENCY_COUNT = 2;
+export const CONTAINER_IMAGE_PREFIX = 'container-image:';
 
 export default {
   name: 'DependencyLocation',
@@ -32,7 +33,14 @@ export default {
       return this.ancestors.length > 0;
     },
     isContainerImageDependency() {
-      return this.location.path.includes('container-image:');
+      return this.location.path.startsWith(CONTAINER_IMAGE_PREFIX);
+    },
+    locationPath() {
+      if (this.isContainerImageDependency) {
+        return this.location.path.slice(CONTAINER_IMAGE_PREFIX.length);
+      }
+
+      return this.location.path;
     },
     isTopLevelDependency() {
       return this.location.top_level;
@@ -63,13 +71,14 @@ export default {
         class="gl-display-inline-block gl-lg-display-block!"
         :href="location.blob_path"
       >
-        <gl-icon v-if="!isContainerImageDependency" name="doc-text" />
+        <gl-icon v-if="isContainerImageDependency" name="container-image" />
+        <gl-icon v-else name="doc-text" />
         <gl-truncate
           class="gl-lg-max-w-80p gl-display-none gl-lg-display-inline-flex"
-          :text="location.path"
+          :text="locationPath"
           with-tooltip
         />
-        <span class="gl-lg-display-none">{{ location.path }}</span>
+        <span class="gl-lg-display-none">{{ locationPath }}</span>
       </component>
       <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
     </span>

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

@@ -27,7 +27,7 @@ describe('Dependency Location component', () => {
 
   it.each`
     name                      | location                    | path
-    ${'container image path'} | ${Paths.containerImagePath} | ${Paths.containerImagePath.path}
+    ${'container image path'} | ${Paths.containerImagePath} | ${Paths.containerImagePath.image}
     ${'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'}
@@ -100,13 +100,16 @@ describe('Dependency Location component', () => {
       });
     });
 
-    it('should render the dependency name not as a link', () => {
+    it('should render the dependency name not as a link without container-image: prefix', () => {
       expect(findPathLink().exists()).toBe(false);
-      expect(findPath().text()).toBe(Paths.containerImagePath.path);
+      expect(findPath().text()).toBe(Paths.containerImagePath.image);
+      expect(findPath().text()).not.toContain('container-image:');
     });
 
-    it('should not render the icon', () => {
-      expect(findIcon().exists()).toBe(false);
+    it('should render the container-image icon', () => {
+      const icon = findIcon();
+      expect(icon.exists()).toBe(true);
+      expect(icon.props('name')).toBe('container-image');
     });
   });
 });

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

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