Merge pull request #2485 from NationalSecurityAgency/t#2474/add-name-…

…columns T#2474/add name columns
NationalSecurityAgency · Dec 6, 2023 · 509df30 · 509df30
2 parents 58340c8 + b8f2232
commit 509df30
Show file tree

Hide file tree

Showing 25 changed files with 292 additions and 74 deletions.
diff --git a/dashboard/src/components/access/RevokeUserAccess.vue b/dashboard/src/components/access/RevokeUserAccess.vue
@@ -18,8 +18,8 @@ limitations under the License.
     <b-card body-class="p-0">
       <div class="row px-3 pt-3">
         <div class="col-12">
-          <b-form-group label="User Id Filter" label-class="text-muted">
-            <b-input v-model="filters.userId" v-on:keydown.enter="applyFilters" data-cy="privateProjectUsers-userIdFilter" aria-label="user id filter"/>
+          <b-form-group label="User Filter" label-class="text-muted">
+            <b-input v-model="filters.user" v-on:keydown.enter="applyFilters" data-cy="privateProjectUsers-userIdFilter" aria-label="user filter"/>
           </b-form-group>
         </div>
         <div class="col-md">
@@ -40,7 +40,7 @@ limitations under the License.
                       tableStoredStateId="privateProjectUsersTable"
                       data-cy="privateProjectUsersTable">
         <template v-slot:cell(userId)="data">
-          {{ getUserDisplay(data.item) }}
+          {{ getUserDisplay(data.item, true) }}
 
           <b-button-group class="float-right">
             <b-button @click="revokeAccess(data.value, getUserDisplay(data.item))"
@@ -70,7 +70,7 @@ limitations under the License.
     data() {
       return {
         filters: {
-          userId: '',
+          user: '',
         },
         table: {
           items: [],
@@ -84,7 +84,7 @@ limitations under the License.
             fields: [
               {
                 key: 'userId',
-                label: 'User Id',
+                label: 'User',
                 sortable: true,
               },
             ],
@@ -123,11 +123,11 @@ limitations under the License.
       applyFilters() {
         this.table.options.pagination.currentPage = 1;
         this.loadData().then(() => {
-          this.$nextTick(() => this.$announcer.polite(`Revoke user access table has been filtered by ${this.filters.userId}`));
+          this.$nextTick(() => this.$announcer.polite(`Revoke user access table has been filtered by ${this.filters.user}`));
         });
       },
       reset() {
-        this.filters.userId = '';
+        this.filters.user = '';
         this.table.options.pagination.currentPage = 1;
         this.loadData().then(() => {
           this.$nextTick(() => this.$announcer.polite('Revoke user access table filters have been removed'));
@@ -136,7 +136,7 @@ limitations under the License.
       loadData() {
         this.table.options.busy = true;
         const pageParams = {
-          query: this.filters.userId,
+          query: this.filters.user,
           limit: this.table.options.pagination.pageSize,
           ascending: !this.table.options.sortDesc,
           page: this.table.options.pagination.currentPage,
@@ -166,19 +166,23 @@ limitations under the License.
           }
         });
       },
-      getUserDisplay(props) {
+      getUserDisplay(props, fullName = false) {
         const userDisplay = props.userIdForDisplay ? props.userIdForDisplay : props.userId;
         const { oAuthProviders } = this.$store.getters.config;
+        let userName = '';
+        if (fullName && props.firstName && props.lastName) {
+          userName = ` (${props.lastName}, ${props.firstName})`;
+        }
         if (oAuthProviders) {
           const indexOfDash = userDisplay.lastIndexOf('-');
           if (indexOfDash > 0) {
             const provider = userDisplay.substr(indexOfDash + 1);
             if (oAuthProviders.includes(provider)) {
-              return userDisplay.substr(0, indexOfDash);
+              return `${userDisplay.substr(0, indexOfDash)}${userName}`;
             }
           }
         }
-        return userDisplay;
+        return `${userDisplay}${userName}`;
       },
     },
   };

diff --git a/dashboard/src/components/expiration/ExpirationHistory.vue b/dashboard/src/components/expiration/ExpirationHistory.vue
@@ -54,7 +54,7 @@ limitations under the License.
             <span class="text-primary"><i class="fas fa-clock text-warning" aria-hidden="true"></i> {{ data.label }}</span>
           </template>
           <template v-slot:cell(userIdForDisplay)="data">
-            {{ data.value }}
+            {{ getUserDisplay(data.item, true) }}
 
             <b-button-group class="float-right">
               <b-button :to="calculateClientDisplayRoute(data)"
@@ -82,9 +82,11 @@ limitations under the License.
   import SkillsBTable from '@/components/utils/table/SkillsBTable';
   import ExpirationService from '@/components/expiration/ExpirationService';
   import DateCell from '../utils/table/DateCell';
+  import UserIdForDisplayMixin from '../users/UserIdForDisplayMixin';
 
   export default {
     name: 'ExpirationHistory',
+    mixins: [UserIdForDisplayMixin],
     components: {
       SubPageHeader,
       SkillsBTable,

diff --git a/dashboard/src/components/metrics/skill/PostAchievementUsersTable.vue b/dashboard/src/components/metrics/skill/PostAchievementUsersTable.vue
@@ -27,7 +27,7 @@ limitations under the License.
                           @page-size-changed="pageSizeChanged"
                           @sort-changed="sortTable">
         <template v-slot:cell(userId)="data">
-          {{ getUserDisplay(data.item) }}
+          {{ getUserDisplay(data.item, true) }}
 
           <b-button-group class="float-right">
             <b-button :to="calculateClientDisplayRoute(data.item)"

diff --git a/dashboard/src/components/quiz/access/QuizAccessPage.vue b/dashboard/src/components/quiz/access/QuizAccessPage.vue
@@ -60,7 +60,7 @@ limitations under the License.
           <template v-slot:cell(userIdForDisplay)="data">
             <div class="row" :data-cy="`quizAdmin_${data.item.userId}`">
               <div class="col">
-                {{ data.value }}
+                {{ getUserDisplay(data.item, true) }}
               </div>
               <div class="col-auto">
                 <b-tooltip target="warningIconForSelfRemoval" triggers="hover">
@@ -100,9 +100,11 @@ limitations under the License.
   import SkillsBTable from '@/components/utils/table/SkillsBTable';
   import ExistingUserInput from '@/components/utils/ExistingUserInput';
   import RemovalValidation from '@/components/utils/modal/RemovalValidation';
+  import UserIdForDisplayMixin from '../../users/UserIdForDisplayMixin';
 
   export default {
     name: 'QuizAccessPage',
+    mixins: [UserIdForDisplayMixin],
     components: {
       ExistingUserInput,
       SubPageHeader,

diff --git a/dashboard/src/components/quiz/metrics/QuizAnswerHistory.vue b/dashboard/src/components/quiz/metrics/QuizAnswerHistory.vue
@@ -50,7 +50,7 @@ limitations under the License.
         <template v-slot:cell(userIdForDisplay)="data">
           <div class="row" style="min-width: 15rem;" :data-cy="`row${data.index}-colUserId`">
             <div class="col mb-2">
-              {{ data.value }}
+              {{ getUserDisplay(data.item, true) }}
             </div>
             <div class="col-auto mb-2">
               <b-button size="sm" variant="outline-info"
@@ -80,10 +80,11 @@ limitations under the License.
   import SkillsBTable from '@/components/utils/table/SkillsBTable';
   import DateCell from '@/components/utils/table/DateCell';
   import UserTagsConfigMixin from '@/components/users/UserTagsConfigMixin';
+  import UserIdForDisplayMixin from '../../users/UserIdForDisplayMixin';
 
   export default {
     name: 'QuizAnswerHistory',
-    mixins: [UserTagsConfigMixin],
+    mixins: [UserTagsConfigMixin, UserIdForDisplayMixin],
     components: { DateCell, SkillsBTable },
     props: {
       answerDefId: Number,

diff --git a/dashboard/src/components/quiz/runsHistory/QuizRunsHistoryPage.vue b/dashboard/src/components/quiz/runsHistory/QuizRunsHistoryPage.vue
@@ -75,7 +75,10 @@ limitations under the License.
         <template v-slot:cell(userIdForDisplay)="data">
           <div class="row" :data-cy="`row${data.index}-userCell`">
             <div class="col">
-              <span v-if="data.item.userIdForDisplayHtml" v-html="data.item.userIdForDisplayHtml"></span><span v-else>{{ data.item.userIdForDisplay }}</span>
+              <span v-if="data.item.userIdForDisplayHtml" v-html="data.item.userIdForDisplayHtml"></span>
+              <span v-else>
+                {{ getUserDisplay(data.item, true) }}
+              </span>
             </div>
             <div class="col-auto">
               <b-button variant="outline-info" size="sm" :data-cy="`row${data.index}-viewRun`"
@@ -142,12 +145,13 @@ limitations under the License.
   import UserTagsConfigMixin from '@/components/users/UserTagsConfigMixin';
   import QuizUserTagsChart from '@/components/quiz/metrics/QuizUserTagsChart';
   import QuizAttemptsTimeChart from '@/components/quiz/metrics/QuizAttemptsTimeChart';
+  import UserIdForDisplayMixin from '../../users/UserIdForDisplayMixin';
 
   const { mapActions } = createNamespacedHelpers('quiz');
 
   export default {
     name: 'QuizRunsHistoryPage',
-    mixins: [UserTagsConfigMixin],
+    mixins: [UserTagsConfigMixin, UserIdForDisplayMixin],
     components: {
       QuizRunStatus,
       DateCell,
@@ -247,7 +251,7 @@ limitations under the License.
                 let items = res.data;
                 if (this.filters.userId && this.filters.userId.trim().length > 0) {
                   items = items.map((item) => {
-                    const userIdForDisplayHtml = StringHighlighter.highlight(item.userIdForDisplay, this.filters.userId);
+                    const userIdForDisplayHtml = StringHighlighter.highlight(this.getUserDisplay(item, true), this.filters.userId);
                     return { userIdForDisplayHtml, ...item };
                   });
                 }

diff --git a/dashboard/src/components/userActions/UserActionsPage.vue b/dashboard/src/components/userActions/UserActionsPage.vue
@@ -137,7 +137,7 @@ limitations under the License.
         </template>
 
         <template v-slot:cell(userIdForDisplay)="data">
-          <span :data-cy="`row${data.index}-userId`">{{ data.value }}</span>
+          <span :data-cy="`row${data.index}-userId`">{{ getUserDisplay(data.item, true) }}</span>
         </template>
 
         <template v-slot:cell(action)="data">
@@ -178,9 +178,11 @@ limitations under the License.
   import DateCell from '@/components/utils/table/DateCell';
   import SingleUserAction from '@/components/userActions/SingleUserAction';
   import StartRecordingUserActionsDateWarning from '@/components/userActions/StartRecordingUserActionsDateWarning';
+  import UserIdForDisplayMixin from '../users/UserIdForDisplayMixin';
 
   export default {
     name: 'UserActionsPage',
+    mixins: [UserIdForDisplayMixin],
     components: {
       StartRecordingUserActionsDateWarning,
       SingleUserAction,

diff --git a/dashboard/src/components/users/UserIdForDisplayMixin.vue b/dashboard/src/components/users/UserIdForDisplayMixin.vue
@@ -17,19 +17,23 @@ limitations under the License.
   export default {
     name: 'UserIdForDisplayMixin',
     methods: {
-      getUserDisplay(props) {
+      getUserDisplay(props, fullName = false) {
         const userDisplay = props.userIdForDisplay ? props.userIdForDisplay : props.userId;
         const { oAuthProviders } = this.$store.getters.config;
+        let userName = '';
+        if (fullName && props.firstName && props.lastName) {
+          userName = ` (${props.lastName}, ${props.firstName})`;
+        }
         if (oAuthProviders) {
           const indexOfDash = userDisplay.lastIndexOf('-');
           if (indexOfDash > 0) {
             const provider = userDisplay.substr(indexOfDash + 1);
             if (oAuthProviders.includes(provider)) {
-              return userDisplay.substr(0, indexOfDash);
+              return `${userDisplay.substr(0, indexOfDash)}${userName}`;
             }
           }
         }
-        return userDisplay;
+        return `${userDisplay}${userName}`;
       },
     },
   };

diff --git a/dashboard/src/components/users/UserPage.vue b/dashboard/src/components/users/UserPage.vue
@@ -72,17 +72,12 @@ limitations under the License.
         });
       }
 
-      if (this.$store.getters.isPkiAuthenticated) {
-        UsersService.getUserInfo(this.$route.params.projectId, this.$route.params.userId)
-          .then((result) => {
-            this.userIdForDisplay = result.userIdForDisplay;
-            this.userTitle = result.first && result.last ? `${result.first} ${result.last}` : result.userIdForDisplay;
-            userDetails = this.loadUserDetails();
-          });
-      } else {
-        userDetails = this.loadUserDetails();
-      }
-      userDetails = this.loadUserDetails();
+      UsersService.getUserInfo(this.$route.params.projectId, this.$route.params.userId)
+        .then((result) => {
+          this.userIdForDisplay = result.userIdForDisplay;
+          this.userTitle = result.first && result.last ? `${result.first} ${result.last}` : result.userIdForDisplay;
+          userDetails = this.loadUserDetails();
+        });
 
       Promise.all([userTags, userDetails]).finally(() => {
         this.isLoading = false;

diff --git a/dashboard/src/components/users/UsersTable.vue b/dashboard/src/components/users/UsersTable.vue
@@ -17,8 +17,8 @@ limitations under the License.
     <div>
       <div class="row px-3 pt-3">
         <div class="col-md-6">
-          <b-form-group label="User Id Filter" label-class="text-muted">
-            <b-input v-model="filters.userId" v-on:keydown.enter="applyFilters" data-cy="users-skillIdFilter" aria-label="user id filter"/>
+          <b-form-group label="User Filter" label-class="text-muted">
+            <b-input v-model="filters.user" v-on:keydown.enter="applyFilters" data-cy="users-skillIdFilter" aria-label="user filter"/>
           </b-form-group>
         </div>
         <div class="col-md-6">
@@ -63,13 +63,13 @@ limitations under the License.
         </template>
 
         <template v-slot:cell(userId)="data">
-          {{ getUserDisplay(data.item) }}
+          {{ getUserDisplay(data.item, true) }}
 
           <b-button-group class="float-right">
             <b-button :to="calculateClientDisplayRoute(data.item)"
                       variant="outline-info" size="sm" class="text-secondary"
                       v-b-tooltip.hover="'View User Details'"
-                      :aria-label="`View details for user ${getUserDisplay(data.item)}`"
+                      :aria-label="`View details for user ${getUserDisplay(data.item, true)}`"
                       data-cy="usersTable_viewDetailsBtn"><i class="fa fa-user-alt" aria-hidden="true"/><span class="sr-only">view user details</span>
             </b-button>
           </b-button-group>
@@ -138,7 +138,7 @@ limitations under the License.
         inviteOnlyProject: false,
         data: [],
         filters: {
-          userId: '',
+          user: '',
           progress: 0,
           minimumPoints: 0,
         },
@@ -156,7 +156,7 @@ limitations under the License.
             fields: [
               {
                 key: 'userId',
-                label: 'User Id',
+                label: 'User',
                 sortable: true,
               },
               {
@@ -236,17 +236,17 @@ limitations under the License.
         this.filters.minimumPoints = Math.floor(this.totalPoints * (this.filters.progress / 100));
         this.loadData().then(() => {
           let filterMessage = 'Users table has been filtered by';
-          if (this.filters.userId) {
-            filterMessage += ` ${this.filters.userId}`;
+          if (this.filters.user) {
+            filterMessage += ` ${this.filters.user}`;
           }
           if (this.filters.minimumPoints > 0) {
-            filterMessage += `${this.filters.userId ? ' and' : ''} users with at least ${this.filters.minimumPoints} points`;
+            filterMessage += `${this.filters.user ? ' and' : ''} users with at least ${this.filters.minimumPoints} points`;
           }
           this.$nextTick(() => this.$announcer.polite(filterMessage));
         });
       },
       reset() {
-        this.filters.userId = '';
+        this.filters.user = '';
         this.filters.minimumPoints = 0;
         this.filters.progress = 0;
         this.table.options.pagination.currentPage = 1;
@@ -258,7 +258,7 @@ limitations under the License.
         this.table.options.busy = true;
         const url = this.getUrl();
         return UsersService.ajaxCall(url, {
-          query: this.filters.userId,
+          query: this.filters.user,
           limit: this.table.options.pagination.pageSize,
           ascending: !this.table.options.sortDesc,
           page: this.table.options.pagination.currentPage,

diff --git a/e2e-tests/cypress/e2e/metrics/projectMetrics_achievements_spec.js b/e2e-tests/cypress/e2e/metrics/projectMetrics_achievements_spec.js
@@ -201,13 +201,13 @@ describe('Metrics Tests - Achievements', () => {
 
         const m = moment.utc('2020-09-12 11', 'YYYY-MM-DD HH');
         cy.request('POST', `/api/projects/proj1/skills/skill1`, {
-            userId: 'user0Good@skills.org',
+            userId: 'user0good@skills.org',
             timestamp: m.clone()
                 .subtract(1, 'day')
                 .format('x')
         });
         cy.request('POST', `/api/projects/proj1/skills/skill2`, {
-            userId: 'user0Good@skills.org',
+            userId: 'user0good@skills.org',
             timestamp: m.clone()
                 .subtract(4, 'day')
                 .format('x')
@@ -223,7 +223,7 @@ describe('Metrics Tests - Achievements', () => {
         cy.validateTable(tableSelector, [
             [{
                 colIndex: 0,
-                value: 'user0Good@skills.org'
+                value: 'user0good@skills.org'
             }, {
                 colIndex: 1,
                 value: 'Skill'
@@ -239,7 +239,7 @@ describe('Metrics Tests - Achievements', () => {
             }],
             [{
                 colIndex: 0,
-                value: 'user0Good@skills.org'
+                value: 'user0good@skills.org'
             }, {
                 colIndex: 1,
                 value: 'Skill'

diff --git a/e2e-tests/cypress/e2e/metrics/projectMetrics_userTags_spec.js b/e2e-tests/cypress/e2e/metrics/projectMetrics_userTags_spec.js
@@ -379,7 +379,7 @@ describe('Metrics Using User Tags Tests', () => {
               .contains('Level 1: 0 users');
 
             cy.intercept('/admin/projects/proj1/userTags/manyValues/tag0/users*').as('getUsers');
-            cy.get(`${usersTableSelector}`).contains('User Id').click();
+            cy.get(`${usersTableSelector}`).contains('User').click();
             cy.wait('@getUsers')
 
             cy.get('[data-cy="levelsChart"] [data-cy="metricsCard-header"]').contains('Overall Levels for Best Label: tag0')