Updated as per new designs

Added manually published display
Updated group/project link
Updated tests

ee/app/assets/javascripts/packages/list/components/packages_list_row.vue

 <script>
 import PackageTags from '../../shared/components/package_tags.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import { GlButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
+import PublishMethod from './publish_method.vue';
+import { GlDeprecatedButton, GlIcon, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { getPackageType } from '../../shared/utils';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
-import { mapGetters, mapState } from 'vuex';
+import { mapState } from 'vuex';
 
 export default {
   name: 'PackagesListRow',
   components: {
-    ClipboardButton,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlLink,
     GlSprintf,
     PackageTags,
+    PublishMethod,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -28,18 +28,11 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['getCommitLink']),
     ...mapState({
       isGroupPage: state => state.config.isGroupPage,
     }),
-    author() {
-      return this.packageEntity.pipeline?.user.name;
-    },
-    hasPipeline() {
-      return Boolean(this.packageEntity.pipeline);
-    },
     createdBy() {
-      if (this.hasPipeline) {
+      if (this.packageEntity.pipeline) {
         return s__('PackageRegistry|%{version} published by %{author}');
       }
 
@@ -48,12 +41,6 @@ export default {
     packageType() {
       return getPackageType(this.packageEntity.package_type);
     },
-    packageShaShort() {
-      return this.packageEntity.pipeline.sha.substring(0, 8);
-    },
-    linkToCommit() {
-      return this.getCommitLink(this.packageEntity);
-    },
     hasProjectLink() {
       return Boolean(this.packageEntity.project_path);
     },
@@ -80,22 +67,26 @@ export default {
         />
       </div>
 
-      <div class="d-flex text-secondary text-truncate">
+      <div class="d-flex text-secondary text-truncate mt-md-2">
         <gl-sprintf :message="createdBy">
           <template #version>
+            <gl-icon name="eye" class="text-secondary mr-1" />
             {{ packageEntity.version }}
           </template>
 
           <template #author>{{ packageEntity.pipeline.user.name }}</template>
         </gl-sprintf>
 
-        <gl-link
-          v-if="hasProjectLink"
-          ref="packages-row-project"
-          :href="`/${packageEntity.project_path}`"
-          class="text-secondary ml-2"
-          >{{ packageEntity.projectPathName }}</gl-link
-        >
+        <div v-if="hasProjectLink" class="d-flex align-items-center">
+          <gl-icon name="review-list" class="text-secondary ml-2 mr-1" />
+
+          <gl-link
+            ref="packages-row-project"
+            :href="`/${packageEntity.project_path}`"
+            class="text-secondary"
+            >{{ packageEntity.projectPathName }}</gl-link
+          >
+        </div>
 
         <div class="d-flex align-items-center">
           <gl-icon name="package" class="text-secondary ml-2 mr-1" />
@@ -108,26 +99,9 @@ export default {
       class="table-section section-40 d-flex flex-md-column justify-content-between align-items-md-end"
       :class="{ 'section-50': isGroupPage }"
     >
-      <div
-        v-if="hasPipeline"
-        class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1"
-      >
-        <gl-icon name="git-merge" class="mr-1" />
-        <strong ref="pipeline-ref" class="mr-1 text-dark">{{ packageEntity.pipeline.ref }}</strong>
-
-        <gl-icon name="commit" class="mr-1" />
-        <gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{
-          packageShaShort
-        }}</gl-link>
-
-        <clipboard-button
-          :text="packageEntity.pipeline.sha"
-          :title="__('Copy commit SHA')"
-          css-class="border-0 text-secondary py-0 px-1"
-        />
-      </div>
+      <publish-method :package-entity="packageEntity" />
 
-      <div class="text-secondary order-0 order-md-1">
+      <div class="text-secondary order-0 order-md-1 mt-md-2">
         <gl-sprintf :message="__('Created %{timestamp}')">
           <template #timestamp>
             <span v-gl-tooltip :title="tooltipTitle(packageEntity.created_at)">
@@ -139,7 +113,7 @@ export default {
     </div>
 
     <div v-if="deleteAvailable" class="table-section section-10 d-flex justify-content-end">
-      <gl-button
+      <gl-deprecated-button
         ref="action-delete"
         variant="danger"
         :title="s__('PackageRegistry|Remove package')"
@@ -148,7 +122,7 @@ export default {
         @click="$emit('packageToDelete', packageEntity)"
       >
         <gl-icon name="remove" />
-      </gl-button>
+      </gl-deprecated-button>
     </div>
   </div>
 </template>

ee/app/assets/javascripts/packages/list/components/publish_method.vue

+<script>
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { GlIcon, GlLink } from '@gitlab/ui';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'PublishMethod',
+  components: {
+    ClipboardButton,
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    packageEntity: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters(['getCommitLink']),
+    hasPipeline() {
+      return Boolean(this.packageEntity.pipeline);
+    },
+    packageShaShort() {
+      return this.packageEntity.pipeline?.sha.substring(0, 8);
+    },
+    linkToCommit() {
+      return this.getCommitLink(this.packageEntity);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1">
+    <template v-if="hasPipeline">
+      <gl-icon name="git-merge" class="mr-1" />
+      <strong ref="pipeline-ref" class="mr-1 text-dark">{{ packageEntity.pipeline.ref }}</strong>
+
+      <gl-icon name="commit" class="mr-1" />
+      <gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{ packageShaShort }}</gl-link>
+
+      <clipboard-button
+        :text="packageEntity.pipeline.sha"
+        :title="__('Copy commit SHA')"
+        css-class="border-0 text-secondary py-0 px-1"
+      />
+    </template>
+
+    <template v-else>
+      <gl-icon name="upload" class="mr-1" />
+      <strong ref="manual-ref" class="text-dark">{{
+        s__('PackageRegistry|Manually Published')
+      }}</strong>
+    </template>
+  </div>
+</template>

ee/spec/frontend/packages/list/components/__snapshots__/packages_list_row_spec.js.snap

@@ -22,18 +22,28 @@ exports[`packages_list_row renders 1`] = `
     </div>
      
     <div
-      class="d-flex text-secondary text-truncate"
+      class="d-flex text-secondary text-truncate mt-md-2"
     >
       <gl-sprintf-stub
         message="%{version}"
       />
        
-      <gl-link-stub
-        class="text-secondary ml-2"
-        href="/foo/bar/baz"
+      <div
+        class="d-flex align-items-center"
       >
-        
-      </gl-link-stub>
+        <gl-icon-stub
+          class="text-secondary ml-2 mr-1"
+          name="review-list"
+          size="16"
+        />
+         
+        <gl-link-stub
+          class="text-secondary"
+          href="/foo/bar/baz"
+        >
+          
+        </gl-link-stub>
+      </div>
        
       <div
         class="d-flex align-items-center"
@@ -54,10 +64,12 @@ exports[`packages_list_row renders 1`] = `
   <div
     class="table-section section-40 d-flex flex-md-column justify-content-between align-items-md-end"
   >
-    <!---->
+    <publish-method-stub
+      packageentity="[object Object]"
+    />
      
     <div
-      class="text-secondary order-0 order-md-1"
+      class="text-secondary order-0 order-md-1 mt-md-2"
     >
       <gl-sprintf-stub
         message="Created %{timestamp}"
@@ -68,7 +80,7 @@ exports[`packages_list_row renders 1`] = `
   <div
     class="table-section section-10 d-flex justify-content-end"
   >
-    <gl-button-stub
+    <gl-deprecated-button-stub
       aria-label="Remove package"
       size="md"
       title="Remove package"
@@ -78,7 +90,7 @@ exports[`packages_list_row renders 1`] = `
         name="remove"
         size="16"
       />
-    </gl-button-stub>
+    </gl-deprecated-button-stub>
   </div>
 </div>
 `;

ee/spec/frontend/packages/list/components/__snapshots__/publish_method_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`publish_method renders 1`] = `
+<div
+  class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1"
+>
+  <gl-icon-stub
+    class="mr-1"
+    name="git-merge"
+    size="16"
+  />
+   
+  <strong
+    class="mr-1 text-dark"
+  >
+    branch-name
+  </strong>
+   
+  <gl-icon-stub
+    class="mr-1"
+    name="commit"
+    size="16"
+  />
+   
+  <gl-link-stub
+    class="mr-1"
+    href="commit-link"
+  >
+    xxxxxxxx
+  </gl-link-stub>
+   
+  <clipboard-button-stub
+    cssclass="border-0 text-secondary py-0 px-1"
+    text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+    title="Copy commit SHA"
+    tooltipplacement="top"
+  />
+</div>
+`;

ee/spec/frontend/packages/list/components/packages_list_row_spec.js

@@ -11,17 +11,15 @@ describe('packages_list_row', () => {
   let wrapper;
   let store;
 
-  const [packageWithoutTagsOrPipeline, packageWithTabsAndPipeline] = packageList;
+  const [packageWithoutTags, packageWithTags] = packageList;
 
   const findPackageTags = () => wrapper.find(PackageTags);
   const findProjectLink = () => wrapper.find({ ref: 'packages-row-project' });
   const findDeleteButton = () => wrapper.find({ ref: 'action-delete' });
-  const findPipelineRef = () => wrapper.find({ ref: 'pipeline-ref' });
-  const findPipelineSha = () => wrapper.find({ ref: 'pipeline-sha' });
 
   const mountComponent = (
     isGroupPage = false,
-    packageEntity = packageWithoutTagsOrPipeline,
+    packageEntity = packageWithoutTags,
     shallow = true,
   ) => {
     const mountFunc = shallow ? shallowMount : mount;
@@ -62,7 +60,7 @@ describe('packages_list_row', () => {
 
   describe('tags', () => {
     it('renders package tags when a package has tags', () => {
-      mountComponent(false, packageWithTabsAndPipeline);
+      mountComponent(false, packageWithTags);
 
       expect(findPackageTags().exists()).toBe(true);
     });
@@ -88,31 +86,15 @@ describe('packages_list_row', () => {
     });
   });
 
-  describe('pipeline information', () => {
-    it('displays branch and commit when pipeline info exists', () => {
-      mountComponent(false, packageWithTabsAndPipeline);
-
-      expect(findPipelineRef().exists()).toBe(true);
-      expect(findPipelineSha().exists()).toBe(true);
-    });
-
-    it('does not show any pipeline details when no information exists', () => {
-      mountComponent(false, packageWithoutTagsOrPipeline);
-
-      expect(findPipelineRef().exists()).toBe(false);
-      expect(findPipelineSha().exists()).toBe(false);
-    });
-  });
-
   describe('delete event', () => {
-    beforeEach(() => mountComponent(false, packageWithoutTagsOrPipeline, false));
+    beforeEach(() => mountComponent(false, packageWithoutTags, false));
 
     it('emits the packageToDelete event when the delete button is clicked', () => {
       findDeleteButton().trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('packageToDelete')).toBeTruthy();
-        expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTagsOrPipeline]);
+        expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
       });
     });
   });

ee/spec/frontend/packages/list/components/publish_method_spec.js

+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import PublishMethod from 'ee/packages/list/components/publish_method.vue';
+import { packageList } from '../../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('publish_method', () => {
+  let wrapper;
+  let store;
+
+  const [packageWithoutPipeline, packageWithPipeline] = packageList;
+
+  const findPipelineRef = () => wrapper.find({ ref: 'pipeline-ref' });
+  const findPipelineSha = () => wrapper.find({ ref: 'pipeline-sha' });
+  const findManualPublish = () => wrapper.find({ ref: 'manual-ref' });
+
+  const mountComponent = packageEntity => {
+    store = new Vuex.Store({
+      getters: {
+        getCommitLink: () => () => {
+          return 'commit-link';
+        },
+      },
+    });
+
+    wrapper = shallowMount(PublishMethod, {
+      localVue,
+      store,
+      propsData: {
+        packageEntity,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders', () => {
+    mountComponent(packageWithPipeline);
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  describe('pipeline information', () => {
+    it('displays branch and commit when pipeline info exists', () => {
+      mountComponent(packageWithPipeline);
+
+      expect(findPipelineRef().exists()).toBe(true);
+      expect(findPipelineSha().exists()).toBe(true);
+    });
+
+    it('does not show any pipeline details when no information exists', () => {
+      mountComponent(packageWithoutPipeline);
+
+      expect(findPipelineRef().exists()).toBe(false);
+      expect(findPipelineSha().exists()).toBe(false);
+      expect(findManualPublish().exists()).toBe(true);
+      expect(findManualPublish().text()).toBe('Manually Published');
+    });
+  });
+});

locale/gitlab.pot

@@ -14341,6 +14341,9 @@ msgstr ""
 msgid "PackageRegistry|Learn how to %{noPackagesLinkStart}publish and share your packages%{noPackagesLinkEnd} with GitLab."
 msgstr ""
 
+msgid "PackageRegistry|Manually Published"
+msgstr ""
+
 msgid "PackageRegistry|Maven"
 msgstr ""