1 files changed, 120 insertions, 0 deletions
diff --git a/app/assets/javascripts/user_lists/components/user_lists.vue b/app/assets/javascripts/user_lists/components/user_lists.vue
new file mode 100644
index 00000000000..80be894c689
--- /dev/null
+++ b/app/assets/javascripts/user_lists/components/user_lists.vue
@@ -0,0 +1,120 @@
+<script>
+import { GlBadge, GlButton } from '@gitlab/ui';
+import { isEmpty } from 'lodash';
+import { mapState, mapActions } from 'vuex';
+import EmptyState from '~/feature_flags/components/empty_state.vue';
+import {
+  buildUrlWithCurrentLocation,
+  getParameterByName,
+  historyPushState,
+} from '~/lib/utils/common_utils';
+import { objectToQuery } from '~/lib/utils/url_utility';
+import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import UserListsTable from './user_lists_table.vue';
+
+export default {
+  components: {
+    EmptyState,
+    UserListsTable,
+    GlBadge,
+    GlButton,
+    TablePagination,
+  },
+  inject: {
+    newUserListPath: { default: '' },
+  },
+  data() {
+    return {
+      page: getParameterByName('page') || '1',
+    };
+  },
+  computed: {
+    ...mapState(['userLists', 'alerts', 'count', 'pageInfo', 'isLoading', 'hasError', 'options']),
+    canUserRotateToken() {
+      return this.rotateInstanceIdPath !== '';
+    },
+    shouldRenderPagination() {
+      return (
+        !this.isLoading &&
+        !this.hasError &&
+        this.userLists.length > 0 &&
+        this.pageInfo.total > this.pageInfo.perPage
+      );
+    },
+    shouldShowEmptyState() {
+      return !this.isLoading && !this.hasError && this.userLists.length === 0;
+    },
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
+    },
+    shouldRenderUserLists() {
+      return !this.isLoading && this.userLists.length > 0 && !this.hasError;
+    },
+    hasNewPath() {
+      return !isEmpty(this.newUserListPath);
+    },
+  },
+  created() {
+    this.setUserListsOptions({ page: this.page });
+    this.fetchUserLists();
+  },
+  methods: {
+    ...mapActions(['setUserListsOptions', 'fetchUserLists', 'clearAlert', 'deleteUserList']),
+    onChangePage(page) {
+      this.updateUserListsOptions({
+        /* URLS parameters are strings, we need to parse to match types */
+        page: Number(page).toString(),
+      });
+    },
+    updateUserListsOptions(parameters) {
+      const queryString = objectToQuery(parameters);
+
+      historyPushState(buildUrlWithCurrentLocation(`?${queryString}`));
+      this.setUserListsOptions(parameters);
+      this.fetchUserLists();
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-display-flex gl-flex-direction-column">
+      <div class="gl-display-flex gl-flex-direction-column gl-md-display-none!">
+        <gl-button v-if="hasNewPath" :href="newUserListPath" variant="confirm">
+          {{ s__('UserLists|New user list') }}
+        </gl-button>
+      </div>
+      <div
+        class="gl-display-flex gl-align-items-baseline gl-flex-direction-column gl-md-flex-direction-row gl-justify-content-space-between gl-mt-6"
+      >
+        <div class="gl-display-flex gl-align-items-center">
+          <h2 class="gl-font-size-h2 gl-my-0">
+            {{ s__('UserLists|User Lists') }}
+          </h2>
+          <gl-badge v-if="count" class="gl-ml-4">{{ count }}</gl-badge>
+        </div>
+        <div class="gl-display-flex gl-align-items-center gl-justify-content-end">
+          <gl-button v-if="hasNewPath" :href="newUserListPath" variant="confirm">
+            {{ s__('UserLists|New user list') }}
+          </gl-button>
+        </div>
+      </div>
+      <empty-state
+        :alerts="alerts"
+        :is-loading="isLoading"
+        :loading-label="s__('UserLists|Loading user lists')"
+        :error-state="shouldRenderErrorState"
+        :error-title="s__('UserLists|There was an error fetching the user lists.')"
+        :empty-state="shouldShowEmptyState"
+        :empty-title="s__('UserLists|Get started with user lists')"
+        :empty-description="
+          s__('UserLists|User lists allow you to define a set of users to use with Feature Flags.')
+        "
+        @dismissAlert="clearAlert"
+      >
+        <user-lists-table :user-lists="userLists" @delete="deleteUserList" />
+      </empty-state>
+    </div>
+    <table-pagination v-if="shouldRenderPagination" :change="onChangePage" :page-info="pageInfo" />
+  </div>
+</template>