1 files changed, 62 insertions, 5 deletions

diff --git a/app/assets/javascripts/packages/details/components/package_files.vue b/app/assets/javascripts/packages/details/components/package_files.vue
index 103d1f489bd..0563b612d04 100644
--- a/app/assets/javascripts/packages/details/components/package_files.vue
+++ b/app/assets/javascripts/packages/details/components/package_files.vue
@@ -1,8 +1,9 @@
 <script>
-import { GlLink, GlTable } from '@gitlab/ui';
+import { GlLink, GlTable, GlDropdownItem, GlDropdown, GlIcon, GlButton } from '@gitlab/ui';
 import { last } from 'lodash';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __ } from '~/locale';
+import FileSha from '~/packages/details/components/file_sha.vue';
 import Tracking from '~/tracking';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -12,8 +13,13 @@ export default {
   components: {
     GlLink,
     GlTable,
+    GlIcon,
+    GlDropdown,
+    GlDropdownItem,
+    GlButton,
     FileIcon,
     TimeAgoTooltip,
+    FileSha,
   },
   mixins: [Tracking.mixin()],
   props: {
@@ -22,6 +28,11 @@ export default {
       required: false,
       default: () => [],
     },
+    canDelete: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     filesTableRows() {
@@ -39,7 +50,6 @@ export default {
         {
           key: 'name',
           label: __('Name'),
-          tdClass: 'gl-display-flex gl-align-items-center',
         },
         {
           key: 'commit',
@@ -55,6 +65,13 @@ export default {
           label: __('Created'),
           class: 'gl-text-right',
         },
+        {
+          key: 'actions',
+          label: '',
+          hide: !this.canDelete,
+          class: 'gl-text-right',
+          tdClass: 'gl-w-4',
+        },
       ].filter((c) => !c.hide);
     },
   },
@@ -62,6 +79,12 @@ export default {
     formatSize(size) {
       return numberToHumanSize(size);
     },
+    hasDetails(item) {
+      return item.file_sha256 || item.file_md5 || item.file_sha1;
+    },
+  },
+  i18n: {
+    deleteFile: __('Delete file'),
   },
 };
 </script>
@@ -74,10 +97,18 @@ export default {
       :items="filesTableRows"
       :tbody-tr-attr="{ 'data-testid': 'file-row' }"
     >
-      <template #cell(name)="{ item }">
+      <template #cell(name)="{ item, toggleDetails, detailsShowing }">
+        <gl-button
+          v-if="hasDetails(item)"
+          :icon="detailsShowing ? 'angle-up' : 'angle-down'"
+          :aria-label="detailsShowing ? __('Collapse') : __('Expand')"
+          category="tertiary"
+          size="small"
+          @click="toggleDetails"
+        />
         <gl-link
           :href="item.download_path"
-          class="gl-relative gl-text-gray-500"
+          class="gl-text-gray-500"
           data-testid="download-link"
           @click="$emit('download-file')"
         >
@@ -86,7 +117,7 @@ export default {
             css-classes="gl-relative file-icon"
             class="gl-mr-1 gl-relative"
           />
-          <span class="gl-relative">{{ item.file_name }}</span>
+          <span>{{ item.file_name }}</span>
         </gl-link>
       </template>
 
@@ -103,6 +134,32 @@ export default {
       <template #cell(created)="{ item }">
         <time-ago-tooltip :time="item.created_at" />
       </template>
+
+      <template #cell(actions)="{ item }">
+        <gl-dropdown category="tertiary" right>
+          <template #button-content>
+            <gl-icon name="ellipsis_v" />
+          </template>
+          <gl-dropdown-item data-testid="delete-file" @click="$emit('delete-file', item)">
+            {{ $options.i18n.deleteFile }}
+          </gl-dropdown-item>
+        </gl-dropdown>
+      </template>
+
+      <template #row-details="{ item }">
+        <div
+          class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100"
+        >
+          <file-sha
+            v-if="item.file_sha256"
+            data-testid="sha-256"
+            title="SHA-256"
+            :sha="item.file_sha256"
+          />
+          <file-sha v-if="item.file_md5" data-testid="md5" title="MD5" :sha="item.file_md5" />
+          <file-sha v-if="item.file_sha1" data-testid="sha-1" title="SHA-1" :sha="item.file_sha1" />
+        </div>
+      </template>
     </gl-table>
   </div>
 </template>