diff options
Diffstat (limited to 'app/assets/javascripts/packages/details/components/package_files.vue')
-rw-r--r-- | app/assets/javascripts/packages/details/components/package_files.vue | 67 |
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> |