#2490: added dashboard skills (inception) views and all the associate…

…d cypress tests

.github/workflows/build-and-test.yml

@@ -140,7 +140,7 @@ jobs:
       - name: Run Cypress tests
         run: |
           cd e2e-tests
-          ../.github/scripts/runSubsetOfCypressTests.sh -t 6 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|inception_skills_spec|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|/error_pages_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/|/learning-path/|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver_conf_skills_spec|/approver_conf_spec|/approver_conf_userTags_spec|/approver_conf_users_spec|/approver_role_project_table_spec|/approver_role_spec|/manage-my-projects_spec'
+          ../.github/scripts/runSubsetOfCypressTests.sh -t 6 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|/inception|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|/error_pages_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/|/learning-path/|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver_conf_skills_spec|/approver_conf_spec|/approver_conf_userTags_spec|/approver_conf_users_spec|/approver_role_project_table_spec|/approver_role_spec|/manage-my-projects_spec'
           cd ..
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu'

dashboard-prime/src/components/header/DashboardHeader.vue

@@ -4,6 +4,7 @@ import HelpButton from '@/components/header/HelpButton.vue'
 import SkillsBreadcrumb from '@/components/header/SkillsBreadcrumb.vue'
 import { usePagePath } from '@/components/utils/UsePageLocation.js'
 import SwitchTheme from '@/components/header/SwitchTheme.vue'
+import InceptionButton from '@/components/inception /InceptionButton.vue'
 
 const pathPath = usePagePath()
 </script>
@@ -37,12 +38,14 @@ const pathPath = usePagePath()
                 src="@/assets/img/skilltree_logo_v1.png"
                 alt="skilltree logo" />
             </router-link>
-            <div v-if="pathPath.isAdminPage" ref="adminStamp" class="skills-stamp">ADMIN</div>
+            <div v-if="pathPath.isAdminPage.value" ref="adminStamp" class="skills-stamp">ADMIN</div>
           </div>
         </div>
         <div class="flex-none">
           <div class="flex flex-row">
-          <!--          <inception-button v-if="pathPath.isAdminPage" class="mr-2" data-cy="inception-button"></inception-button>-->
+            <inception-button v-if="pathPath.isAdminPage.value"
+                              class="mr-2"
+                              data-cy="inception-button" />
             <switch-theme />
             <settings-button data-cy="settings-button" class="ml-2" />
             <help-button data-cy="help-button" class="ml-2" />

dashboard-prime/src/components/header/SkillsBreadcrumb.vue

@@ -122,7 +122,12 @@ const buildBreadcrumb = () => {
 
         if (key) {
           if (!shouldExcludeKey(key)) {
-            newItems.push(buildResItem(key, value, res, index))
+            console.log(`key: ${key}, value: ${value}`)
+            if (key?.toLowerCase() === 'skills' && value?.toLowerCase() === 'inception') {
+              newItems.push(buildResItem(null, 'Dashboard Skills', res, index))
+            } else {
+              newItems.push(buildResItem(key, value, res, index))
+            }
           }
           key = null
         } else {

dashboard-prime/src/components/inception /InceptionButton.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { SkillsLevelJS, SkillsConfiguration } from '@skilltree/skills-client-js'
+
+const isConfigurationInitialized = ref(false)
+
+onMounted(() => {
+  SkillsConfiguration.afterConfigure()
+    .then(() => {
+      const skillsLevel = new SkillsLevelJS('Inception')
+      if (document.querySelector('#skills-level-container')) {
+        skillsLevel.attachTo(document.querySelector('#skills-level-container'))
+      }
+
+    }).finally(() => {
+    isConfigurationInitialized.value = true
+  })
+})
+
+</script>
+
+<template>
+  <router-link to="/administrator/skills/Inception" aria-label="Dashboard Skills">
+    <Button v-show="isConfigurationInitialized"
+            outlined
+            icon="fas fa-trophy"
+            label="Level 1"
+            severity="info">
+      <i class="fas fa-trophy mr-1" aria-hidden="true"></i>
+      <span id="skills-level-container" />
+    </Button>
+  </router-link>
+</template>
+
+<style scoped>
+
+</style>

dashboard-prime/src/components/inception /InceptionSkills.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
+import SkillsDisplayHome from '@/skills-display/components/SkillsDisplayHome.vue'
+import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js'
+import { useRoute } from 'vue-router'
+
+const skillsDisplayAttributes = useSkillsDisplayAttributesState()
+const themeState = useSkillsDisplayThemeState()
+
+skillsDisplayAttributes.projectId = 'Inception'
+skillsDisplayAttributes.serviceUrl = ''
+skillsDisplayAttributes.loadingConfig = false
+skillsDisplayAttributes.internalBackButton = false
+
+themeState.theme.landingPageTitle = 'Dashboard Skills'
+themeState.theme.disableSkillTreeBrand = true
+themeState.theme.disableBreadcrumb = true
+skillsDisplayAttributes.loadConfigStateIfNeeded()
+
+
+</script>
+
+<template>
+  <div>
+    <skills-display-home id="inception" class="my-3" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

dashboard-prime/src/components/myProgress/MyProjectSkillsPage.vue

@@ -18,7 +18,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <skills-display-home class="my-3" />
+    <skills-display-home :id="projectId" class="my-3" />
   </div>
 </template>
 

dashboard-prime/src/components/myProgress/discover/DiscoverProjectsPage.vue

@@ -13,11 +13,13 @@ import ProjectDescriptionRow from '@/components/myProgress/discover/ProjectDescr
 import { useMyProgressState } from '@/stores/UseMyProgressState.js'
 import NoProjectsInCatalogMsg from '@/components/myProgress/discover/NoProjectsInCatalogMsg.vue'
 import HighlightedValue from '@/components/utils/table/HighlightedValue.vue'
+import { useColors } from '@/skills-display/components/utilities/UseColors.js'
 
 const responsive = useResponsiveBreakpoints()
 const announcer = useSkillsAnnouncer()
 const appInfoState = useAppInfoState()
 const myProgressState = useMyProgressState()
+const colors = useColors()
 
 const isLoading = ref(true)
 const searchValue = ref('')
@@ -193,19 +195,19 @@ const contactProject = (name, id) => {
                   <media-info-card :title="countsAll"
                                    sub-title="ALL PROJECTS"
                                    class="flex-1"
-                                   icon-class="fas fa-globe"
+                                   :icon-class="`fas fa-globe ${colors.getTextClass(1)}`"
                                    data-cy="allProjectsCount">
                   </media-info-card>
                   <media-info-card :title="countsMyProjects"
                                    sub-title="MY PROJECTS"
                                    class="flex-1"
-                                   icon-class="fas fa-heart"
+                                   :icon-class="`fas fa-heart ${colors.getTextClass(2)}`"
                                    data-cy="myProjectCount">
                   </media-info-card>
                   <media-info-card :title="countsDiscoverProjects"
                                    sub-title="DISCOVER NEW"
                                    class="flex-1"
-                                   icon-class="fas fa-search"
+                                   :icon-class="`fas fa-search ${colors.getTextClass(3)}`"
                                    data-cy="discoverNewProjCount">
                   </media-info-card>
                 </div>

dashboard-prime/src/router/AdminRoutes.js

@@ -2,6 +2,7 @@ import AdminHomePage from '@/components/AdminHomePage.vue'
 import MyProjects from '@/components/projects/MyProjects.vue'
 import QuizDefinitionsPage from '@/components/quiz/QuizDefinitionsPage.vue'
 import UserActionsPage from '@/components/userActions/UserActionsPage.vue';
+import InceptionSkills from '@/components/inception /InceptionSkills.vue'
 
 const createAdminRoutes = () => {
   return {
@@ -45,7 +46,6 @@ const createAdminRoutes = () => {
           },
         },
       }
-
     ]
   }
 }

dashboard-prime/src/router/SkillsDisplayPathAppendValues.js

@@ -1,5 +1,6 @@
 export default {
   Local: 'Local',
   SkillsClient: 'SkillsClient',
-  LocalTest: 'LocalTest'
+  LocalTest: 'LocalTest',
+  Inception: 'Inception',
 };

dashboard-prime/src/router/UseGlobalNavGuards.js

@@ -37,7 +37,7 @@ export const useGlobalNavGuards = () => {
 
   const log = useLog()
 
-  const isAdminPage = (route) => route.path.startsWith('/administrator')
+  const isAdminPage = (route) => route.path.startsWith('/administrator') && !route.path.startsWith('/administrator/skills')
   const isActiveProjectIdChange = (to, from) => to.params.projectId !== from.params.projectId
   const isLoggedIn = () => authState.isAuthenticated
   const isPki = () => appConfig.isPkiAuthenticated

dashboard-prime/src/router/index.js

@@ -49,6 +49,7 @@ import createSkillsDisplayChildRoutes from '@/router/SkillsDisplayChildRoutes.js
 import TestSkillsClient from '@/skills-display/components/test/TestSkillsClient.vue'
 import TestSkillsDisplay from '@/skills-display/components/test/TestSkillsDisplay.vue'
 import PathAppendValues from '@/router/SkillsDisplayPathAppendValues.js'
+import InceptionSkills from '@/components/inception /InceptionSkills.vue'
 
 const routes = [
   {
@@ -85,6 +86,19 @@ const routes = [
       },
     },
   },
+  {
+    path: '/administrator/skills/:projectId',
+    name: 'InceptionSkills',
+    component: InceptionSkills,
+    meta: {
+      requiresAuth: true,
+      reportSkillId: 'VisitDashboardSkills',
+      announcer: {
+        message: 'Dashboard Skills',
+      },
+    },
+    children: createSkillsDisplayChildRoutes(PathAppendValues.Inception)
+  },
   {
     path: '/settings',
     component: GlobalSettings,

dashboard-prime/src/skills-display/UseSkillsDisplayInfo.js

@@ -23,6 +23,9 @@ export const useSkillsDisplayInfo = () => {
     if (route.path.startsWith('/progress-and-rankings')) {
       return `${name}${localContextAppend}`
     }
+    if (route.path.startsWith('/administrator/skills')) {
+      return `${name}${SkillsDisplayPathAppendValues.Inception}`
+    }
     return `${name}${localTestContextAppend}`
   }
 

dashboard-prime/src/skills-display/components/badges/BadgeCatalogItem.vue

@@ -161,7 +161,7 @@ const otherUsersAchieved = computed(() => {
         </div>
 
         <p v-if="badge && badge.description">
-          <markdown-text :text="badge.description" />
+          <markdown-text :text="badge.description" :instance-id="badge.badgeId" />
         </p>
 
         <div v-if="viewDetailsBtnTo" class="text-center md:text-left mt-3">

dashboard-prime/src/skills-display/stores/UseUserProgressSummaryState.js

@@ -21,6 +21,7 @@ export const useUserProgressSummaryState = defineStore('userProgressSummaryState
     return {}
   }
   const loadUserProgressSummary = () => {
+    console.log(`loadUserProgressSummary for ${attributes.projectId}`)
     return axios.get(`${attributes.serviceUrl}${servicePath}/${encodeURIComponent(attributes.projectId)}/summary`, {
       params: getUserIdAndVersionParams()
     }).then((result) => {