From 29e87143e453721f0f7ce2ad59d3e438f27838cc Mon Sep 17 00:00:00 2001
From: Don Walizer <12420708+dwalizer@users.noreply.github.com>
Date: Tue, 25 Jun 2024 10:13:44 -0400
Subject: [PATCH] #2490 Fix missing user tag features, unskip tests

---
 .../src/components/users/UserPage.vue         | 13 ++++++++++
 .../src/components/users/UsersTable.vue       | 19 ++++++++++++++-
 .../e2e/accessibility/accessibility_specs.js  | 24 ++++++-------------
 .../learning_path_management_spec.js          |  2 +-
 e2e-tests/cypress/e2e/users_spec.js           | 15 ++++++------
 5 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/dashboard-prime/src/components/users/UserPage.vue b/dashboard-prime/src/components/users/UserPage.vue
index 36ff1ef75e..f26b510e95 100644
--- a/dashboard-prime/src/components/users/UserPage.vue
+++ b/dashboard-prime/src/components/users/UserPage.vue
@@ -116,6 +116,19 @@ const processUserTags = (userTags) =>{
 <template>
 <div>
   <page-header :loading="isLoading" :options="headerOptions">
+    <template #subSubTitle v-if="tags">
+        <span v-for="(tag, index) in tags" :key="index" data-cy="userTagHeader">
+          <span class="text-muted">{{tag.label}}: </span>
+          <span v-for="(value, vIndex) in tag.value" :key="vIndex">
+            <router-link
+                :to="{ name: 'UserTagMetrics', params: { projectId: route.params.projectId, tagKey: tag.key, tagFilter: value } }"
+                class="text-info mb-0 pb-0 preview-card-title"
+                :aria-label="`View metrics for ${value}`" role="link">{{ value }}</router-link>
+              <span v-if="vIndex < tag.value.length - 1">, </span>
+          </span>
+          <span v-if="index < tags.length - 1">; </span>
+        </span>
+    </template>
   </page-header>
 
   <navigation v-if="!isLoading" :nav-items="navItems">
diff --git a/dashboard-prime/src/components/users/UsersTable.vue b/dashboard-prime/src/components/users/UsersTable.vue
index c0ff6d6c57..dbe8af8d6d 100644
--- a/dashboard-prime/src/components/users/UsersTable.vue
+++ b/dashboard-prime/src/components/users/UsersTable.vue
@@ -29,12 +29,14 @@ import { useSkillsDisplayInfo } from '@/skills-display/UseSkillsDisplayInfo.js'
 import SkillsDisplayPathAppendValues from '@/router/SkillsDisplayPathAppendValues.js'
 import SkillsDataTable from '@/components/utils/table/SkillsDataTable.vue'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+import {useUserInfo} from "@/components/utils/UseUserInfo.js";
 
 const route = useRoute()
 const announcer = useSkillsAnnouncer()
 const responsive = useResponsiveBreakpoints()
 const colors = useColors()
 const appConfig = useAppConfig()
+const userInfo = useUserInfo()
 
 let filters = ref({
   user: '',
@@ -55,6 +57,10 @@ const showUserTagColumn = computed(() => {
  return !!(appConfig.usersTableAdditionalUserTagKey && appConfig.usersTableAdditionalUserTagLabel);
 })
 
+const tagKey = computed(() => {
+  return appConfig.usersTableAdditionalUserTagKey;
+});
+
 onMounted(() => {
   loadData()
 })
@@ -214,7 +220,7 @@ const sortField = () => {
               aria-label="View user details"
               data-cy="usersTable_viewDetailsLink"
             >
-              {{ slotProps.data.userIdForDisplay || slotProps.data.userId }}
+              {{ userInfo.getUserDisplay(slotProps.data, true) }}
             </router-link>
           </template>
         </Column>
@@ -225,6 +231,17 @@ const sortField = () => {
           <template #header>
             <i class="fas fa-tag mr-1" :class="colors.getTextClass(2)" aria-hidden="true"></i>
           </template>
+          <template #body="slotProps">
+            <router-link
+                v-if="showUserTagColumn && slotProps.data.userTag"
+                :to="{ name: 'UserTagMetrics', params: { projectId: route.params.projectId, tagKey: tagKey, tagFilter: slotProps.data.userTag } }"
+                class="text-info mb-0 pb-0 preview-card-title"
+                :aria-label="`View metrics for ${slotProps.data.userTag}`"
+                role="link"
+                data-cy="usersTable_viewUserTagMetricLink">
+              {{ slotProps.data.userTag }}
+            </router-link>
+          </template>
         </Column>
         <Column field="totalPoints" header="Progress" :sortable="true" :class="{'flex': responsive.md.value }">
           <template #header>
diff --git a/e2e-tests/cypress/e2e/accessibility/accessibility_specs.js b/e2e-tests/cypress/e2e/accessibility/accessibility_specs.js
index ddb35f0f30..d8c1580d82 100644
--- a/e2e-tests/cypress/e2e/accessibility/accessibility_specs.js
+++ b/e2e-tests/cypress/e2e/accessibility/accessibility_specs.js
@@ -375,7 +375,7 @@ describe('Accessibility Tests', () => {
         cy.customA11y();
     });
 
-    it.skip('global badges', () => {
+    it('global badges', () => {
         cy.logout();
         cy.login('root@skills.org', 'password');
 
@@ -394,9 +394,9 @@ describe('Accessibility Tests', () => {
 
         cy.get('[aria-label="new global badge"]')
             .click();
-        cy.get('[data-cy=badgeName]')
+        cy.get('[data-cy=name]')
             .type('global badge');
-        cy.get('[data-cy=saveBadgeButton]')
+        cy.get('[data-cy=saveDialogBtn]')
             .click();
         cy.contains('Manage')
             .click();
@@ -404,12 +404,7 @@ describe('Accessibility Tests', () => {
         cy.customLighthouse();
         cy.customA11y();
 
-        cy.get('[data-cy="skillsSelector2"]')
-            .click();
-        cy.contains('This is 1');
-        cy.get('[data-cy="skillsSelector2"] .vs__dropdown-option')
-            .eq(0)
-            .click();
+        cy.selectItem('[data-cy="skillsSelector"]', 'This is 1')
         cy.customA11y();
         cy.get('[data-cy=nav-Levels]')
             .click();
@@ -419,15 +414,10 @@ describe('Accessibility Tests', () => {
         cy.wait('@getAvailableProjects')
         cy.get('#project-selector')
             .click();
-        cy.get('#project-selector .vs__dropdown-option')
-            .eq(0)
-            .click();
-        cy.get('#level-selector')
-            .click();
+        cy.get('[data-cy="MyNewtestProject_option"]').click();
+        cy.get('#level-selector').click();
         cy.wait('@getProjectLevels')
-        cy.get('#level-selector .vs__dropdown-option')
-            .eq(1)
-            .click();
+        cy.get('[data-pc-section="item"]').contains(2).click();
         // cy.get('.multiselect__select').eq(0).click();
         // cy.get('.multiselect__element').eq(0).click();
         // cy.get('.multiselect__select').eq(1).click();
diff --git a/e2e-tests/cypress/e2e/learning-path/learning_path_management_spec.js b/e2e-tests/cypress/e2e/learning-path/learning_path_management_spec.js
index 8760f4cff0..365e8d1f4f 100644
--- a/e2e-tests/cypress/e2e/learning-path/learning_path_management_spec.js
+++ b/e2e-tests/cypress/e2e/learning-path/learning_path_management_spec.js
@@ -167,7 +167,7 @@ describe('Learning Path Management Validation Tests', () => {
             .should('have.length', 1)
     });
 
-    it.skip('Remove learning path item from the table', () => {
+    it('Remove learning path item from the table', () => {
         cy.intercept('POST', '/admin/projects/proj1/badge2/prerequisite/proj1/badge1').as('badge1ToBadge2')
         cy.intercept('POST', '/admin/projects/proj1/badge1/prerequisite/proj1/skill5Subj2').as('skill1ToBadge1')
         cy.intercept('POST', '/admin/projects/proj1/badge2/prerequisite/proj1/skill6Subj2').as('skill6ToBadge2')
diff --git a/e2e-tests/cypress/e2e/users_spec.js b/e2e-tests/cypress/e2e/users_spec.js
index aeabf01f79..fe0bc8cce4 100644
--- a/e2e-tests/cypress/e2e/users_spec.js
+++ b/e2e-tests/cypress/e2e/users_spec.js
@@ -262,7 +262,7 @@ describe('Users Tests', () => {
         cy.get('@row2').eq(3).should('contain', 'Today');
     });
 
-    it.skip('strip the oauth provider from the userId if present', () => {
+    it('strip the oauth provider from the userId if present', () => {
         const res = `
         {"data":
             [
@@ -296,7 +296,7 @@ describe('Users Tests', () => {
         }
     });
 
-    it.skip('displays user name if available', () => {
+    it('displays user name if available', () => {
         const res = `
         {"data":
             [
@@ -782,7 +782,7 @@ describe('Users Tests', () => {
         cy.get('[data-cy="usr_progress-user0"] [data-cy="progressCurrentLevel"]').should('have.text', 'None')
     });
 
-    it.skip('show user tag in users table', () => {
+    it('show user tag in users table', () => {
         const res = `
         {"data":
             [
@@ -817,7 +817,7 @@ describe('Users Tests', () => {
         cy.contains("Users for Org: tagA");
     });
 
-    it.skip('do not show user tag in users table when not configured', () => {
+    it('do not show user tag in users table when not configured', () => {
         const res = `
         {"data":
             [
@@ -849,7 +849,7 @@ describe('Users Tests', () => {
         cy.get(`${tableSelector}`).should('not.contain', 'Org');
     });
 
-    it.skip('show user tag on users page', () => {
+    it('show user tag on users page', () => {
         const res = `
         {"data":
             [
@@ -893,10 +893,11 @@ describe('Users Tests', () => {
         cy.get(`${tableSelector} [data-cy="usersTable_viewDetailsLink"]`).first().click();
         cy.wait('@getUserTags')
         cy.contains("Client Display");
+        cy.get('[data-cy="userTagHeader"]').should('exist');
         cy.contains("Org: tagA");
     });
 
-    it.skip('do not show user tag on users page if not enabled', () => {
+    it('do not show user tag on users page if not enabled', () => {
         const res = `
         {"data":
             [
@@ -929,7 +930,7 @@ describe('Users Tests', () => {
 
         cy.get(`${tableSelector} [data-cy="usersTable_viewDetailsLink"]`).first().click();
         cy.contains("Client Display");
-        cy.get('.h5').should('not.have.text', "Org: tagA");
+        cy.get('[data-cy="userTagHeader"]').should('not.exist');
     });
 
     it('filter project users by completion', () => {