NationalSecurityAgency · sudo-may · Jan 8, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
diff --git a/dashboard/src/main.js b/dashboard/src/main.js
@@ -61,6 +61,7 @@ import Listbox from 'primevue/listbox'
 import ProgressBar from 'primevue/progressbar'
 import Chip from 'primevue/chip'
 import FloatLabel from "primevue/floatlabel";
+import Timeline from 'primevue/timeline';
 
 import ConfirmationService from 'primevue/confirmationservice'
 import BadgeDirective from 'primevue/badgedirective'
@@ -141,6 +142,7 @@ app.component('Listbox', Listbox)
 app.component('ProgressBar', ProgressBar)
 app.component('Chip', Chip)
 app.component('FloatLabel', FloatLabel)
+app.component('Timeline', Timeline)
 
 app.component('SkillsButton', SkillsButton)
 app.component('SkillsTextInput', SkillsTextInput)

diff --git a/dashboard/src/skills-display/components/skill/ApprovalEventMessage.vue b/dashboard/src/skills-display/components/skill/ApprovalEventMessage.vue
@@ -0,0 +1,51 @@
+/*
+Copyright 2024 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+<script setup>
+import { computed, ref } from 'vue'
+import MarkdownText from '@/common-components/utilities/markdown/MarkdownText.vue';
+
+const props = defineProps({
+  message: String,
+  messageId: String
+})
+
+const isDescriptionShowing = ref(false)
+const showMessageBtnLabel = computed(() => {
+  return `${isDescriptionShowing.value ? 'Hide' : 'Show'} Message`
+})
+const toggleShowMessage = () => {
+  isDescriptionShowing.value = !isDescriptionShowing.value
+}
+
+</script>
+
+<template>
+  <div v-if="props.message">
+    <SkillsButton
+        :label="showMessageBtnLabel"
+        :icon="isDescriptionShowing ? 'far fa-eye-slash' : 'far fa-eye'"
+        class="skills-theme-btn"
+        severity="info"
+        size="small"
+        @click="toggleShowMessage"
+        data-cy="viewTimeline"/>
+  <markdown-text v-if="isDescriptionShowing" :text="props.message" :instance-id="props.id" />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/dashboard/src/skills-display/components/skill/ApprovalHistory.vue b/dashboard/src/skills-display/components/skill/ApprovalHistory.vue
@@ -0,0 +1,88 @@
+/*
+Copyright 2024 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+<script setup>
+import { useTimeUtils } from '@/common-components/utilities/UseTimeUtils.js'
+import ApprovalEventMessage from '@/skills-display/components/skill/ApprovalEventMessage.vue';
+
+const props = defineProps({
+  events: {
+    type: Array,
+    required: true,
+  },
+})
+
+const timeUtils = useTimeUtils()
+
+const REQUESTED = 'Approval Requested'
+// const PENDING = 'Pending Approval'
+const APPROVED = 'Approved'
+const REJECTED = 'Rejected'
+const AWAITING_GRADING = "Awaiting Grading"
+const PASSED = "Passed"
+const FAILED = "Failed"
+const COMPLETED = "Completed"
+
+const getIconClass = (item) => {
+  const prefix = 'fas fa-'
+  if (item.eventStatus === REQUESTED || item.eventStatus === AWAITING_GRADING) {
+    return `${prefix}clock`;
+  } else if (item.eventStatus === APPROVED || item.eventStatus === PASSED || item.eventStatus === COMPLETED) {
+    return `${prefix}check`;
+  } else if (item.eventStatus === REJECTED || item.eventStatus === FAILED) {
+    return `${prefix}times`;
+  }
+  return 'fas fa-question'
+}
+
+const getIconBackground = (item) => {
+  const prefix = 'bg-'
+  if (item.eventStatus === REQUESTED || item.eventStatus === AWAITING_GRADING) {
+    return `${prefix}yellow-500`;
+  } else if (item.eventStatus === APPROVED || item.eventStatus === PASSED || item.eventStatus === COMPLETED) {
+    return `${prefix}green-500`;
+  } else if (item.eventStatus === REJECTED || item.eventStatus === FAILED) {
+    return `${prefix}red-500`;
+  }
+  return 'bg-gray-500'
+}
+</script>
+
+<template>
+  <div class="pt-2">
+    <Timeline :pt="{ opposite: { class: 'p-0 flex-none' } }" :value="props.events" align="left" data-cy="approvalHistoryTimeline">
+      <template #marker="slotProps">
+        <span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :class="getIconBackground(slotProps.item)">
+            <i :class="getIconClass(slotProps.item)"></i>
+        </span>
+      </template>
+      <template #content="slotProps">
+        <div class="py-2">
+          <span class="font-bold">{{ slotProps.item.eventStatus }}</span>
+          <i class="fas fa-circle px-2 text-400" style="font-size: .5rem;"></i>
+          <small class="text-muted py-2" :title="`${timeUtils.formatDate(slotProps.item.eventTime)}`">{{timeUtils.relativeTime(slotProps.item.eventTime)}}</small>
+        </div>
+        <div>
+          <span class="text-muted text-sm">{{ timeUtils.formatDate(slotProps.item.eventTime) }}</span>
+        </div>
+        <ApprovalEventMessage class="py-2" v-if="slotProps.item.description" :message="slotProps.item.description" :messageId="slotProps.item.id" />
+      </template>
+    </Timeline>
+  </div>
+</template>
+
+<style>
+
+</style>
diff --git a/dashboard/src/skills-display/components/skill/SkillOverviewFooter.vue b/dashboard/src/skills-display/components/skill/SkillOverviewFooter.vue
@@ -24,6 +24,8 @@ import JustificationInput from '@/skills-display/components/skill/JustificationI
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
 import { useLog } from '@/components/utils/misc/useLog.js'
 import QuizFooter from "@/skills-display/components/skill/QuizFooter.vue";
+import ApprovalHistory from '@/skills-display/components/skill/ApprovalHistory.vue';
+import QuizType from '@/skills-display/components/quiz/QuizType.js';
 
 const props = defineProps({
   skill: Object
@@ -48,10 +50,17 @@ const isCompleted = computed(() => skillInternal.value.points === skillInternal.
 const selfReportDisabled = computed(() => (isCompleted.value && !isMotivationalSkill.value) || isPendingApproval())
 const isHonorSystem = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.type === 'HonorSystem')
 const isApprovalRequired = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.type === 'Approval')
+const isQuizSkill = computed(() => skillInternal.value.selfReporting && QuizType.isQuiz(skillInternal.value.selfReporting.type))
 const isVideo = computed(() => skillInternal.value.selfReporting.type === 'Video')
 const isJustificationRequired = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.justificationRequired)
 const isRejected = computed(() => skillInternal.value.selfReporting && skillInternal.value.selfReporting.rejectedOn !== null && skillInternal.value.selfReporting.rejectedOn !== undefined)
 const isMotivationalSkill = computed(() => skillInternal.value && skillInternal.value.isMotivationalSkill)
+const showTimeline = computed(() => {
+  if (skillInternal.value.approvalHistory && skillInternal.value.approvalHistory.length > 0) {
+    return isApprovalRequired.value || (isQuizSkill.value && skillInternal.value.approvalHistory.length > 1)
+  }
+  return false
+})
 
 const showApprovalJustification = ref(false)
 const requestApprovalLoading = ref(false)
@@ -123,7 +132,16 @@ const reportSkill = (approvalRequestedMsg) => {
         selfReport.value.msgHidden = false
         selfReport.value.res = res
         if (!isAlreadyPerformed() && isApprovalRequired.value) {
-          skillInternal.value.selfReporting.requestedOn = new Date()
+          const requestedOn = new Date()
+          skillInternal.value.selfReporting.requestedOn = requestedOn
+          if (skillInternal.value.approvalHistory) {
+            skillInternal.value.approvalHistory.unshift({
+              id: '-1',
+              eventTime : requestedOn.getTime(),
+              eventStatus: 'Approval Requested',
+              description: approvalRequestedMsg
+            })
+          }
         }
         updateEarnedPoints(res)
         if (res.explanation.includes('Skill Achievement retained')) {
@@ -312,10 +330,11 @@ defineExpose({
         </div>
       </template>
     </Message>
+
     <Message :closable="false"
              icon="far fa-clock"
              severity="warn"
-             v-if="isPendingApproval() && selfReport.msgHidden" class="mb-2 alert alert-info font-italic"
+             v-if="isPendingApproval() && !showTimeline && selfReport.msgHidden" class="mb-2 alert alert-info font-italic"
              data-cy="pendingApprovalStatus">
       This skill is <span class="font-size-1 normal-font">pending approval</span>.
       Submitted {{ timeUtils.relativeTime(skillInternal.selfReporting.requestedOn) }}
@@ -391,6 +410,8 @@ defineExpose({
       </div>
     </div>
 
+    <ApprovalHistory v-if="showTimeline" :events="skillInternal.approvalHistory" />
+
     <div class=" pt-2">
         <div class="btn-group" role="group" aria-label="Skills Buttons">
           <a v-if="skillInternal.description && skillInternal.description.href" :href="skillInternal.description.href"

diff --git a/e2e-tests/cypress/e2e/client-display/client-display-self_report_skills_spec.js b/e2e-tests/cypress/e2e/client-display/client-display-self_report_skills_spec.js
@@ -298,7 +298,10 @@ describe('Client Display Self Report Skills Tests', () => {
             .should('not.exist');
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('0');
-        cy.get('[data-cy="pendingApprovalStatus"]').contains('pending approval')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approval Requested')
 
         // approve and then visit page again
         cy.approveRequest();
@@ -308,8 +311,14 @@ describe('Client Display Self Report Skills Tests', () => {
 
         cy.get('[data-cy="requestApprovalBtn"]')
             .should('be.enabled');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .should('not.exist');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approved')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(1)
+            .should('contain.text', 'Approval Requested')
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('50');
         cy.get('[data-cy="pointsAchievedTodayCard"] [data-cy="mediaInfoCardTitle"]')
@@ -355,12 +364,13 @@ describe('Client Display Self Report Skills Tests', () => {
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('0');
 
-        cy.get('[data-cy="pendingApprovalStatus"]').should('not.exist')
+        // cy.get('[data-cy="approvalHistoryTimeline"]').should('not.exist')
         cy.get('[data-cy="selfReportAlert"] [data-pc-section="closebutton"]').click()
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('pending approval');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('Submitted a few seconds ago');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approval Requested')
+            .should('contain.text', 'a few seconds ago');
         cy.get('[data-cy="selfReportAlert"]').should('not.exist')
 
         // refresh the page and validate that submit button is disabled and approval status is still displayed
@@ -371,10 +381,11 @@ describe('Client Display Self Report Skills Tests', () => {
             .should('not.exist');
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('0');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('ending approval');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('Submitted a few seconds ago');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approval Requested')
+            .should('contain.text', 'a few seconds ago');
 
         // approve and then visit page again
         cy.approveRequest();
@@ -384,8 +395,15 @@ describe('Client Display Self Report Skills Tests', () => {
 
         cy.get('[data-cy="requestApprovalBtn"]')
             .should('be.enabled');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .should('not.exist');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approved')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(1)
+            .should('contain.text', 'Approval Requested')
+
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('50');
         cy.get('[data-cy="pointsAchievedTodayCard"] [data-cy="mediaInfoCardTitle"]')
@@ -408,10 +426,11 @@ describe('Client Display Self Report Skills Tests', () => {
             .should('not.exist');
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('0');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('pending approval');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('Submitted 5 days ago');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approval Requested')
+            .should('contain.text', '5 days ago');
     });
 
     it('self report - skill was submitted for approval - on subject page', () => {
@@ -562,10 +581,19 @@ describe('Client Display Self Report Skills Tests', () => {
             .should('not.exist');
         cy.get('[data-cy="overallPointsEarnedCard"] [data-cy="mediaInfoCardTitle"]')
             .contains('0');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('pending approval');
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('Submitted a few seconds ago');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approval Requested')
+            .should('contain.text', 'a few seconds ago');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(1)
+            .should('contain.text', 'Rejected')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(2)
+            .should('contain.text', 'Approval Requested')
     });
 
     it('self report - resubmit rejected skill - on subject page', () => {

diff --git a/e2e-tests/cypress/e2e/client-display/client-display_catalog_skills_spec.js b/e2e-tests/cypress/e2e/client-display/client-display_catalog_skills_spec.js
@@ -284,8 +284,10 @@ describe('Client Display Skills Imported from Catalog Tests', () => {
             .should('be.enabled');
 
         cy.cdClickSkill(0);
-        cy.get('[data-cy="pendingApprovalStatus"]')
-            .contains('pending approval');
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Approval Requested')
         cy.get('[data-cy="requestApprovalBtn"]')
             .should('not.exist');
     });

diff --git a/e2e-tests/cypress/e2e/quiz/client-display_run_quiz_spec.js b/e2e-tests/cypress/e2e/quiz/client-display_run_quiz_spec.js
@@ -404,6 +404,16 @@ describe('Client Display Quiz Tests', () => {
         cy.get('[data-cy="numAttemptsInfoCard"] [data-cy="subTitle"]').contains('Used 2 out of 3 attempts')
 
         cy.get('[data-cy="quizRunQuestions"]').should('not.exist')
+
+        cy.get('[data-cy="quizCompletion"] [data-cy="closeQuizBtn"]').click()
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Failed')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(1)
+            .should('contain.text', 'Failed')
     });
 
     it('passed quiz cannot be attempted again', () => {
@@ -751,6 +761,20 @@ describe('Client Display Quiz Tests', () => {
         cy.get('[data-cy="question_1"] [data-cy="answer_1"]').click()
         cy.get('[data-cy="completeQuizBtn"]').click()
         cy.get('[data-cy="quizCompletion"]').contains('Congrats!! You just earned 150 points for Very Great Skill 1 skill by passing the quiz.')
+
+        cy.get('[data-cy="quizCompletion"] [data-cy="closeQuizBtn"]').click()
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(0)
+            .should('contain.text', 'Passed')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(1)
+            .should('contain.text', 'Passed')
+        cy.get('[data-cy="approvalHistoryTimeline"]')
+            .children('.p-timeline-event')
+            .eq(2)
+            .should('contain.text', 'Failed')
     });
 
     it('quiz attached to skill expiring in a day can be retaken', () => {