Merge pull request #364 from NationalSecurityAgency/t#359/skill_tags

T#359/skill tags

cypress/e2e/admin.cy.js

@@ -85,7 +85,7 @@ context('Admin: Generate Screenshots', () => {
 
     it('Gen Subject page with custom viewport', () => {
         // use custom ratio
-        cy.viewport(1350, 800);
+        cy.viewport(1400, 800);
 
         // subjects page
         cy.visit('/administrator/projects/movies')
@@ -99,7 +99,7 @@ context('Admin: Generate Screenshots', () => {
     });
 
     it('New Subject modal', () => {
-        cy.viewport(1350, 950);
+        cy.viewport(1400, 950);
 
         cy.visit('/administrator/projects/movies')
         cy.get('[data-cy="subjectCard-Action"]');
@@ -111,7 +111,7 @@ context('Admin: Generate Screenshots', () => {
     });
 
     it('New Badge modal', () => {
-        cy.viewport(1350, 1200);
+        cy.viewport(1400, 1200);
 
         cy.visit('/administrator/projects/movies/badges')
         cy.get('[data-cy="btn_Badges"]').click();
@@ -172,7 +172,7 @@ context('Admin: Generate Screenshots', () => {
     })
 
     it('Gen Self Report page', () => {
-        cy.viewport(1350, 1200);
+        cy.viewport(1400, 1200);
 
         cy.visit('/administrator/projects/movies/badges')
 
@@ -182,9 +182,8 @@ context('Admin: Generate Screenshots', () => {
         cy.snap('page-project-self_report', '#mainContent1 [data-cy="nav"]');
     });
 
-    it('Skill Tags page', () => {
-        cy.viewport(1350, 1200);
-
+    it('Skill Tags from subject page', () => {
+        cy.viewport(1400, 1200);
         cy.visit('/administrator/projects/movies/subjects/Action')
 
         for (let i = 0; i < 3; i++) {
@@ -193,19 +192,27 @@ context('Admin: Generate Screenshots', () => {
         cy.get('[data-cy="skillActionsBtn"]').click();
         cy.get('[data-cy="skillsActionsMenu"] [aria-label="Add Tag"]').click()
 
+        cy.viewport(1400, 550);
         const tagName = 'Two Thumbs Up!'
-        cy.get('[data-cy="newTag"]').clear().type(tagName)
+        cy.get('[data-cy="noTagsMessage"]').should('be.visible')
+        cy.get('[data-pc-name="pcmaximizebutton"]').click()
+        cy.wait(1000)
+        cy.get('[data-pc-section="tablist"] [data-pc-name="tab"]').contains('Create New Tag').click()
+        cy.get('[data-cy="tagValue"]').clear().type(tagName)
+        cy.snap('create-new-tag-from-subject-page', '.p-dialog')
         cy.get('[data-cy="saveDialogBtn"]').click()
 
+        cy.viewport(1400, 1200);
+
         for (let i = 0; i < 3; i++) {
             cy.get(`[data-cy="skillsTable"] [data-p-index="${i}"] [data-pc-name="pcrowcheckbox"]`).click()
         }
         cy.get('[data-cy="skillActionsBtn"]').click();
         cy.get('[data-cy="skillsActionsMenu"] [aria-label="Add Tag"]')
 
-        cy.snap('skill-tags-page')
+        cy.snap('skill-tags-on-subject-page')
 
-        cy.viewport(1350, 450);
+        cy.viewport(1400, 450);
         cy.visit('/administrator/projects/movies/subjects/Action')
 
         for (let i = 0; i < 3; i++) {
@@ -228,6 +235,7 @@ context('Admin: Generate Screenshots', () => {
 
     it('Gen Learning Path', () => {
         cy.visit('/administrator/projects/movies/learning-path')
+        cy.viewport(1400, 1200);
         cy.get('[data-cy="graphLegend"]')
         cy.get('[data-cy="learningPathTable"] [data-cy="skillsBTableTotalRows"]')
         cy.wait(5000);
@@ -250,7 +258,7 @@ context('Admin: Generate Screenshots', () => {
     })
 
     it('Gen Project pages - levels', () => {
-        cy.viewport(1350, 800);
+        cy.viewport(1400, 800);
 
         cy.visit('/administrator/projects/movies/levels')
         cy.get('[data-cy="editLevelButton"]').should('have.length', 5);
@@ -258,14 +266,14 @@ context('Admin: Generate Screenshots', () => {
     })
 
     it('Gen Project pages - skill metrics', () => {
-        // cy.viewport(1350, 1200);
+        // cy.viewport(1400, 1200);
         cy.visit('/administrator/projects/movies/metrics/skills')
         cy.get('[data-cy="skillsNavigator-table"]');
         cy.snap('page-project-metrics-skills');
     })
 
     it('Gen Project pages - subjects metrics', () => {
-        // cy.viewport(1350, 1200);
+        // cy.viewport(1400, 1200);
         cy.visit('/administrator/projects/movies/metrics/subjects')
 
         cy.contains('Number of users for each level for each subject');
@@ -277,7 +285,7 @@ context('Admin: Generate Screenshots', () => {
     })
 
     it('Gen Project pages - achievements metrics', () => {
-        // cy.viewport(1350, 1200);
+        // cy.viewport(1400, 1200);
         cy.visit('/administrator/projects/movies/metrics/achievements')
         cy.contains('Overall Levels');
         cy.get('[data-cy="achievementsNavigator-table"]')
@@ -715,7 +723,7 @@ context('Admin: Generate Screenshots', () => {
     })
 
     it('Create self report skills', () => {
-        cy.viewport(1350, 1200);
+        cy.viewport(1400, 1200);
 
         cy.visit('/administrator/projects/movies/subjects/Action/')
         cy.get('[data-cy="newSkillButton"]').click()
@@ -753,6 +761,21 @@ context('Admin: Generate Screenshots', () => {
 
     })
 
+    it('page - skill tags', () => {
+      cy.visit('/administrator/projects/movies/skill-tags/');
+      cy.visit('/administrator/projects/movies/skill-tags/');
+      cy.wait(1000)
+      cy.snap('page-skill-tags')
+
+      cy.visit('/administrator/projects/movies/skill-tags/harrypottercollection');
+      cy.wait(1000)
+      cy.snap('page-skill-tag')
+
+      cy.visit('/administrator/projects/movies/skill-tags/harrypottercollection/users');
+      cy.wait(1000)
+      cy.snap('page-skill-tag-users')
+    })
+
     it('page - admin groups', () => {
         cy.visit('/administrator/adminGroups/FancyGroup')
         cy.get('[data-cy="roleManagerTable"] [data-cy="skillsBTableTotalRows"]').should('have.text', '3')

cypress/e2e/progress-and-ranking.cy.js

@@ -220,6 +220,23 @@ context('Progress and Ranking: Generate Screenshots', () => {
     cy.snap('contact_admins_form', '[data-cy="contactProjectOwnerDialog"]');
   })
 
+  it('Gen Project Tag pages', () => {
+    cy.intercept('GET', `/api/projects/movies/tags/summary`)
+      .as('loadSkillTagsSummary')
 
+    cy.intercept('GET', `/api/projects/movies/tags/harrypottercollection/summary`)
+      .as('loadSingleSkillTagSummary')
+    cy.visit('/progress-and-rankings/projects/movies');
+    cy.wait('@getConfig');
+    cy.snap('skill-tags-list', '[data-cy="skillTags"]');
+
+    cy.get('[data-cy="viewProjectTagsBtn"]').click()
+    cy.wait('@loadSkillTagsSummary')
+    cy.snap('page-skill-tags');
+
+    cy.get('[data-cy="tagLink-harrypottercollection"]').click()
+    cy.wait('@loadSingleSkillTagSummary')
+    cy.snap('page-skill-tag');
+  });
 
 })

docs/.vuepress/config.js

@@ -124,6 +124,7 @@ sidebar = sidebar.concat([{
             '/dashboard/user-guide/subjects',
             '/dashboard/user-guide/skills',
             '/dashboard/user-guide/self-reporting',
+            '/dashboard/user-guide/skills-tags',
             '/dashboard/user-guide/skills-catalog',
             '/dashboard/user-guide/skills-groups',
             '/dashboard/user-guide/rich-text-editor',

docs/dashboard/user-guide/skills-tags.md

@@ -0,0 +1,71 @@
+# Skill Tags
+
+Skill Tags allow project administrators to add one or more custom tags to skills. Tags provide an additional way to categorize, group, search, and filter skills across a project.
+
+Skill Tags are also displayed in the Skills Display so trainees can more easily understand how skills relate to one another, discover related training, and filter skills by tag.
+
+::: note Project-Level Skill Tag Management
+Skill Tags are now managed at the project level. Administrators can use the dedicated Skill Tags page to view and manage all tags across a project, drill into a single tag to manage its associated skills, and review trainee progress for skills associated with a specific tag.
+:::
+
+## Skill Tags Management Page
+
+![Skill Tags Management Page](../../screenshots/admin/page-skill-tags.png)
+
+To manage Skill Tags, open your project and navigate to `Project -> Skill Tags`.
+
+From the Skill Tags page, administrators can:
+
+- View all Skill Tags defined in the project
+- Create new Skill Tags
+- Delete existing Skill Tags
+- Open a dedicated management page for a specific tag
+- Review how many skills are associated with each tag
+
+This page provides a centralized place to manage tags across the entire project instead of managing them only from an individual subject or skill context.
+
+## Single Skill Tag Management Page
+
+![Single Skill Tag Management](../../screenshots/admin/page-skill-tag.png)
+
+Click a Skill Tag name from the Skill Tags management page to open the Single Skill Tag management page.
+
+From this page, administrators can:
+
+- Add skills to the selected tag
+- Remove skills from the selected tag
+- View all skills currently associated with the tag
+- Edit the tag value
+- Edit the tag ID
+- Review user progress for project participants advancing through skills associated with the tag
+
+The Single Skill Tag management page is useful when maintaining a curated group of related skills, such as skills that belong to a specific collection, topic, technology area, curriculum track, or learning objective.
+
+## Editing Tag Values and Tag IDs
+
+Administrators can update both the display value and the ID of a Skill Tag.
+
+- **Tag Value** is the human-readable label displayed to administrators and trainees.
+- **Tag ID** is the unique identifier used internally and in URLs.
+
+When editing a tag, choose a clear and stable value that describes the group of skills it represents. If the tag is already in use, consider whether changing the tag value or ID could affect administrator workflows or references to that tag.
+
+## Viewing Trainee Progress by Skill Tag
+
+Skill Tags include project participant progress information for the skills associated with a specific tag. This allows administrators to review how users are advancing within a tagged collection of skills.
+
+This can be helpful for tracking progress across a specific training area, such as:
+
+- A curriculum module
+- A certification topic
+- A feature-specific training path
+- A collection of related skills
+- A technology or competency area
+
+![Single Skill Tag Users](../../screenshots/admin/page-skill-tag-users.png)
+
+## Skill Tags in the Skills Display
+
+Skill Tags are visible to trainees in the Skills Display. This gives trainees another way to understand, categorize, and filter available training.
+
+Tags can help trainees quickly identify related skills and focus on a particular set of training objectives.

docs/dashboard/user-guide/skills.md

@@ -407,6 +407,10 @@ You can also move entire Skill Groups. Visit the [Moving Groups Section](/dashbo
 
 ## Skill Tags
 
+::: note
+Skill Tags can now also be managed at the project level. Visit the [Project-Level Skill Tag Management Section](/dashboard/user-guide/skills-tags.html) to learn more.
+:::
+
 Skill tagging is a feature that allows administrators to add one or more custom "tags" to skills.
 Adding tags to skills can help to categorize and group skills, giving users another way to search or filter a particular set of skills.
 Skill tags are visualized in the Skills Display to give users consuming the training another way to comprehend, categorize and filter skills.
@@ -417,8 +421,11 @@ Select the ``Tag Skill`` button to initiate the process.  After a tag has been a
 removed by selecting the skills you would like to remove the tag from, then click on the ``Action`` button, and then ``Remove Tags``.
 
 ::: tip
+To create a new tag for the first time, click on the "Create New Tag" tab and enter your new tag value.
+![Create new tag](../../screenshots/admin/create-new-tag-from-subject-page.png)
+
 Once a skill tag is created, you can easily reuse it to tag other skills by selecting it from the ``Existing Tag`` drop down menu.
 ![Existing tag menu](../../screenshots/admin/existing-tag-dropdown.png)
 :::
 
-![Tag skills](../../screenshots/admin/skill-tags-page.png)
+![Tag skills](../../screenshots/admin/skill-tags-on-subject-page.png)

docs/training-participation/take-training.md

@@ -113,6 +113,53 @@ Use the expand/collapse all groups controls at the top of the skill list to mana
 You can click on any Skill Group title to navigate to its dedicated page and view its details and skills.
 :::
 
+## Skill Tags
+
+Training creators may assign Skill Tags to skills to organize related training across subjects. Tags can represent topics, learning tracks, collections, technologies, competencies, or any other grouping that helps describe how skills are related.
+
+When Skill Tags are configured for a training, they may appear in several trainee-facing views:
+
+- **Training overview page**: Displays tags available across the entire training
+- **Subject overview pages**: Displays tags associated with skills in that subject
+- **Skill lists**: Displays tags on individual skills and enables filtering by tag
+- **Skill page**: Displays tags assigned to the selected skill
+- **Training-wide search**: Allows you to search for and navigate directly to tag progress pages
+
+![Skill Tags List](../screenshots/progress-and-ranking/skill-tags-list.png)
+
+Skill Tags provide another way to explore training content beyond subjects, badges, and skill groups. For example, a single tag can bring together related skills from multiple subjects.
+
+### All Skill Tags Progress Page
+
+When a training includes Skill Tags, you can view progress across all tags in the project. This page provides a tag-focused summary of your progress and helps you quickly identify areas where related skills are grouped together.
+
+Use the All Skill Tags progress page to:
+
+- View all tags available in the training
+- See your progress for each tag
+- Identify tagged collections of skills that still need work
+- Navigate to a specific tag for more details
+
+![Skill Tags Page](../screenshots/progress-and-ranking/page-skill-tags.png)
+
+### Single Skill Tag Progress Page
+
+Clicking a tag opens a dedicated progress page for that specific tag. The Single Skill Tag progress page tracks your progress through all skills associated with that tag.
+
+From a tag progress page, you can:
+
+- View all skills associated with the tag
+- Track earned points and overall completion for that tag
+- Open individual skills to continue training
+- Understand how tagged skills relate across the training
+
+This is useful when you want to focus on a particular topic or training collection without needing to browse each subject individually.
+
+![Skill Tag Page](../screenshots/progress-and-ranking/page-skill-tag.png)
+
+::: tip
+You can also use [Training Wide Search](/training-participation/take-training.html#training-wide-search) to quickly find a tag by name and jump directly to its progress page.
+:::
 
 ## Badge Page
 
@@ -358,8 +405,8 @@ You can always review your survey completions on the [Quizzes and Surveys Histor
 
 ## Training Wide Search
 
-Training-wide search functionality enables users to quickly find and navigate to any skill, group, subject, or badge by name.
-This is an effective method to jump directly to any skill, group, subject, or badge from any page of the training.
+Training-wide search functionality enables users to quickly find and navigate to any skill, group, subject, tag, or badge by name.
+This is an effective method to jump directly to any skill, group, subject, tag, or badge from any page of the training.
 
 The search can be activated either through a dedicated search button in the top right corner of the training or by using customizable keyboard shortcuts.
 - To initiate the search via the search button, click the **Search** button in the top right corner of the training page.
@@ -370,9 +417,9 @@ Once the search is initiated, the search modal will appear in the middle of the
 ![component-training-wide-search.png](../screenshots/progress-and-ranking/component-training-wide-search.png)
 
 To use the search:
-- Type the name of the skill, group, subject, or badge you are searching for into the search box.
+- Type the name of the skill, group, subject, tag, or badge you are searching for into the search box.
 - Use the up and down arrow keys to navigate through the search results.
-- Press **Enter** to select and navigate directly to a skill, group, subject, or badge page.
+- Press **Enter** to select and navigate directly to a skill, group, subject, tag, or badge page.
 - Press **Escape** to close the search modal.
 
 ::: tip Shortcut Customization