1 files changed, 122 insertions, 0 deletions
diff --git a/app/assets/javascripts/feature_flags/components/user_lists_table.vue b/app/assets/javascripts/feature_flags/components/user_lists_table.vue
new file mode 100644
index 00000000000..0bfd18f992c
--- /dev/null
+++ b/app/assets/javascripts/feature_flags/components/user_lists_table.vue
@@ -0,0 +1,122 @@
+<script>
+import {
+  GlButton,
+  GlButtonGroup,
+  GlModal,
+  GlSprintf,
+  GlTooltipDirective,
+  GlModalDirective,
+} from '@gitlab/ui';
+import { s__, sprintf } from '~/locale';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+
+export default {
+  components: { GlButton, GlButtonGroup, GlModal, GlSprintf },
+  directives: { GlTooltip: GlTooltipDirective, GlModal: GlModalDirective },
+  mixins: [timeagoMixin],
+  props: {
+    userLists: {
+      type: Array,
+      required: true,
+    },
+  },
+  translations: {
+    createdTimeagoLabel: s__('UserList|created %{timeago}'),
+    deleteListTitle: s__('UserList|Delete %{name}?'),
+    deleteListMessage: s__('User list %{name} will be removed. Are you sure?'),
+  },
+  modal: {
+    id: 'deleteListModal',
+    actionPrimary: {
+      text: s__('Delete user list'),
+      attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
+    },
+  },
+  data() {
+    return {
+      deleteUserList: null,
+    };
+  },
+  computed: {
+    deleteListName() {
+      return this.deleteUserList?.name;
+    },
+    modalTitle() {
+      return sprintf(this.$options.translations.deleteListTitle, {
+        name: this.deleteListName,
+      });
+    },
+  },
+  methods: {
+    createdTimeago(list) {
+      return sprintf(this.$options.translations.createdTimeagoLabel, {
+        timeago: this.timeFormatted(list.created_at),
+      });
+    },
+    displayList(list) {
+      return list.user_xids.replace(/,/g, ', ');
+    },
+    onDelete() {
+      this.$emit('delete', this.deleteUserList);
+    },
+    confirmDeleteList(list) {
+      this.deleteUserList = list;
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div
+      v-for="list in userLists"
+      :key="list.id"
+      data-testid="ffUserList"
+      class="gl-border-b-solid gl-border-gray-100 gl-border-b-1 gl-w-full gl-py-4 gl-display-flex gl-justify-content-space-between"
+    >
+      <div class="gl-display-flex gl-flex-direction-column gl-overflow-hidden gl-flex-grow-1">
+        <span data-testid="ffUserListName" class="gl-font-weight-bold gl-mb-2">
+          {{ list.name }}
+        </span>
+        <span
+          v-gl-tooltip
+          :title="tooltipTitle(list.created_at)"
+          data-testid="ffUserListTimestamp"
+          class="gl-text-gray-300 gl-mb-2"
+        >
+          {{ createdTimeago(list) }}
+        </span>
+        <span data-testid="ffUserListIds" class="gl-str-truncated">{{ displayList(list) }}</span>
+      </div>
+
+      <gl-button-group class="gl-align-self-start gl-mt-2">
+        <gl-button
+          :href="list.path"
+          category="secondary"
+          icon="pencil"
+          data-testid="edit-user-list"
+        />
+        <gl-button
+          v-gl-modal="$options.modal.id"
+          category="secondary"
+          variant="danger"
+          icon="remove"
+          data-testid="delete-user-list"
+          @click="confirmDeleteList(list)"
+        />
+      </gl-button-group>
+    </div>
+    <gl-modal
+      :title="modalTitle"
+      :modal-id="$options.modal.id"
+      :action-primary="$options.modal.actionPrimary"
+      static
+      @primary="onDelete"
+    >
+      <gl-sprintf :message="$options.translations.deleteListMessage">
+        <template #name>
+          <b>{{ deleteListName }}</b>
+        </template>
+      </gl-sprintf>
+    </gl-modal>
+  </div>
+</template>