All files / ee/app/assets/javascripts/pages/groups/saml_providers/saml_members index.vue

100% Statements 3/3
100% Branches 0/0
100% Functions 2/2
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69      1x                                                   5x         1x                                                                    
<!-- eslint-disable vue/multi-word-component-names -->
<script>
import { GlSkeletonLoader, GlTable, GlAvatar } from '@gitlab/ui';
// eslint-disable-next-line no-restricted-imports
import { mapState, mapActions } from 'vuex';
import { __, s__ } from '~/locale';
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
 
export default {
  components: {
    GlSkeletonLoader,
    GlTable,
    GlAvatar,
    TablePagination,
  },
  computed: {
    ...mapState(['isInitialLoadInProgress', 'members', 'pageInfo']),
  },
  fields: [
    {
      key: 'name',
      label: __('User'),
    },
    {
      key: 'identity',
      label: s__('GroupSAML|Identifier'),
    },
  ],
  mounted() {
    this.fetchPage();
  },
  methods: {
    ...mapActions(['fetchPage']),
    change(nextPage) {
      this.fetchPage(nextPage);
    },
  },
};
</script>
<template>
  <div class="gl-mt-3">
    <gl-skeleton-loader v-if="isInitialLoadInProgress" />
    <gl-table v-else :items="members" :fields="$options.fields">
      <template #cell(name)="{ item }">
        <span class="d-flex">
          <gl-avatar :src="item.avatar_url" :size="48" />
          <div class="ml-2">
            <div class="font-weight-bold">
              <a
                class="js-user-link"
                :href="item.web_url"
                :data-user-id="item.id"
                :data-username="item.username"
              >
                {{ item.name }}
              </a>
            </div>
            <div class="cgray">@{{ item.username }}</div>
          </div>
        </span>
      </template>
      <template #cell(identity)="{ value }">
        <span class="font-weight-bold">{{ value }}</span>
      </template>
    </gl-table>
    <table-pagination :page-info="pageInfo" :change="change" />
  </div>
</template>