diff options
Diffstat (limited to 'app/assets/javascripts/token_access/components/token_projects_table.vue')
-rw-r--r-- | app/assets/javascripts/token_access/components/token_projects_table.vue | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/app/assets/javascripts/token_access/components/token_projects_table.vue b/app/assets/javascripts/token_access/components/token_projects_table.vue new file mode 100644 index 00000000000..777eda1c4d7 --- /dev/null +++ b/app/assets/javascripts/token_access/components/token_projects_table.vue @@ -0,0 +1,81 @@ +<script> +import { GlButton, GlTable } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; + +const defaultTableClasses = { + thClass: 'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!', +}; + +export default { + i18n: { + emptyText: s__('CI/CD|No projects have been added to the scope'), + }, + fields: [ + { + key: 'project', + label: __('Projects that can be accessed'), + tdClass: 'gl-p-5!', + ...defaultTableClasses, + columnClass: 'gl-w-85p', + }, + { + key: 'actions', + label: '', + tdClass: 'gl-p-5! gl-text-right', + ...defaultTableClasses, + columnClass: 'gl-w-15p', + }, + ], + components: { + GlButton, + GlTable, + }, + inject: { + fullPath: { + default: '', + }, + }, + props: { + projects: { + type: Array, + required: true, + }, + }, + methods: { + removeProject(project) { + this.$emit('removeProject', project); + }, + }, +}; +</script> +<template> + <gl-table + :items="projects" + :fields="$options.fields" + :tbody-tr-attr="{ 'data-testid': 'projects-token-table-row' }" + :empty-text="$options.i18n.emptyText" + show-empty + stacked="sm" + fixed + > + <template #table-colgroup="{ fields }"> + <col v-for="field in fields" :key="field.key" :class="field.columnClass" /> + </template> + + <template #cell(project)="{ item }"> + {{ item.name }} + </template> + + <template #cell(actions)="{ item }"> + <gl-button + v-if="item.fullPath !== fullPath" + category="primary" + variant="danger" + icon="remove" + :aria-label="__('Remove access')" + data-testid="remove-project-button" + @click="removeProject(item.fullPath)" + /> + </template> + </gl-table> +</template> |