1 files changed, 143 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
new file mode 100644
index 00000000000..ad07052a298
--- /dev/null
+++ b/app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue
@@ -0,0 +1,143 @@
+<script>
+import { GlTable, GlButton, GlBadge, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  components: {
+    GlTable,
+    GlButton,
+    GlBadge,
+    ClipboardButton,
+    TooltipOnTruncate,
+    UserAvatarLink,
+    TimeAgoTooltip,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    triggers: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  fields: [
+    {
+      key: 'token',
+      label: s__('Pipelines|Token'),
+    },
+    {
+      key: 'description',
+      label: s__('Pipelines|Description'),
+    },
+    {
+      key: 'owner',
+      label: s__('Pipelines|Owner'),
+    },
+    {
+      key: 'lastUsed',
+      label: s__('Pipelines|Last Used'),
+    },
+    {
+      key: 'actions',
+      label: '',
+      tdClass: 'gl-text-right gl-white-space-nowrap',
+    },
+  ],
+};
+</script>
+
+<template>
+  <div>
+    <gl-table
+      v-if="triggers.length"
+      :fields="$options.fields"
+      :items="triggers"
+      class="triggers-list"
+      responsive
+    >
+      <template #cell(token)="{item}">
+        {{ item.token }}
+        <clipboard-button
+          v-if="item.hasTokenExposed"
+          :text="item.token"
+          data-testid="clipboard-btn"
+          data-qa-selector="clipboard_button"
+          :title="s__('Pipelines|Copy trigger token')"
+          css-class="gl-border-none gl-py-0 gl-px-2"
+        />
+        <div class="label-container">
+          <gl-badge v-if="!item.canAccessProject" variant="danger">
+            <span
+              v-gl-tooltip.viewport
+              boundary="viewport"
+              :title="s__('Pipelines|Trigger user has insufficient permissions to project')"
+              >{{ s__('Pipelines|invalid') }}</span
+            >
+          </gl-badge>
+        </div>
+      </template>
+      <template #cell(description)="{item}">
+        <tooltip-on-truncate
+          :title="item.description"
+          truncate-target="child"
+          placement="top"
+          class="trigger-description gl-display-flex"
+        >
+          <div class="gl-flex-fill-1 gl-text-truncate">{{ item.description }}</div>
+        </tooltip-on-truncate>
+      </template>
+      <template #cell(owner)="{item}">
+        <span class="trigger-owner sr-only">{{ item.owner.name }}</span>
+        <user-avatar-link
+          v-if="item.owner"
+          :link-href="item.owner.path"
+          :img-src="item.owner.avatarUrl"
+          :tooltip-text="item.owner.name"
+          :img-alt="item.owner.name"
+        />
+      </template>
+      <template #cell(lastUsed)="{item}">
+        <time-ago-tooltip v-if="item.lastUsed" :time="item.lastUsed" />
+        <span v-else>{{ __('Never') }}</span>
+      </template>
+      <template #cell(actions)="{item}">
+        <gl-button
+          :title="s__('Pipelines|Edit')"
+          icon="pencil"
+          data-testid="edit-btn"
+          :href="item.editProjectTriggerPath"
+        />
+        <gl-button
+          :title="s__('Pipelines|Revoke')"
+          icon="remove"
+          variant="warning"
+          :data-confirm="
+            s__(
+              'Pipelines|By revoking a trigger you will break any processes making use of it. Are you sure?',
+            )
+          "
+          data-method="delete"
+          rel="nofollow"
+          class="gl-ml-3"
+          data-testid="trigger_revoke_button"
+          data-qa-selector="trigger_revoke_button"
+          :href="item.projectTriggerPath"
+        />
+      </template>
+    </gl-table>
+    <div
+      v-else
+      data-testid="no_triggers_content"
+      data-qa-selector="no_triggers_content"
+      class="settings-message gl-text-center gl-mb-3"
+    >
+      {{ s__('Pipelines|No triggers have been created yet. Add one using the form above.') }}
+    </div>
+  </div>
+</template>