T#2490/primevue projects management

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

@@ -75,7 +75,7 @@ jobs:
       matrix:
         #IMPORTANT: must, must, must match the total number of containers below: runSubsetOfCypressTests.sh.sh -t <num_of_containers>
 #        container: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ]
-        container: [ 1, 2, 3, 4, 5, 6]
+        container: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 
     services:
       postgres:
@@ -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|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|configure_video_spec|configure_video_features_spec|configure_skill_video_self_report_spec|configure_video_validation_spec|handle_video_without_duration_spec|client_display_video_on_subject_page_spec|client_display_video_on_skill_page_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|my-usage_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|/manage-my-projects_spec|/accessibility|/community/|/metrics/projectMetrics|/metrics/skillMetrics_spec|/metrics/subjectMetrics_spec|/projects_invite_only_spec|/app_features_spec|/breadcrumb_spec|/contact|/cross-project_spec|/discoverable_proj_invite_spec|/login_spec|/markdown_spec/metrics/multipleProjectMetrics_empty_spec|/metrics/multipleProjectMetrics_spec|/my-progress_breadcrumb_spec|/my-progress_spec|/my-progress-badges_spec|/navigation_spec|/progress_and_ranking_disabled_spec|/project_expiration_spec|performedSkills_table_spec'
+          ../.github/scripts/runSubsetOfCypressTests.sh -t 10 -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|configure_video_spec|configure_video_features_spec|configure_skill_video_self_report_spec|configure_video_validation_spec|handle_video_without_duration_spec|client_display_video_on_subject_page_spec|client_display_video_on_skill_page_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|my-usage_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|/manage-my-projects_spec|/accessibility|/community/|/metrics/projectMetrics|/metrics/skillMetrics_spec|/metrics/subjectMetrics_spec|/projects_invite_only_spec|/app_features_spec|/breadcrumb_spec|/contact|/cross-project_spec|/discoverable_proj_invite_spec|/login_spec|/markdown_spec/metrics/multipleProjectMetrics_empty_spec|/metrics/multipleProjectMetrics_spec|/my-progress_breadcrumb_spec|/my-progress_spec|/my-progress-badges_spec|/navigation_spec|/progress_and_ranking_disabled_spec|/project_expiration_spec|performedSkills_table_spec|/projects_admin_management_spec|/projects_modal_management_spec|/projects_modal_validation_spec|/projects_spec'
           cd ..
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu'

dashboard-prime/src/components/access/AccessSettings.vue

@@ -1,12 +1,17 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import SubPageHeader from "@/components/utils/pages/SubPageHeader.vue";
 import RoleManager from "@/components/access/RoleManager.vue";
 import PrivateInviteOnlyProjManagement from '@/components/access/invite-only/PrivateInviteOnlyProjManagement.vue'
 import SettingsService from '@/components/settings/SettingsService.js'
+import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+import TrustedClientProps from '@/components/access/TrustedClientProps.vue'
 
 const route = useRoute();
+const appConfig = useAppConfig()
+
+const showTrustedClientProps = computed(() => (!appConfig.isPkiAuthenticated));
 
 const isLoading = ref(true);
 const privateProject = ref(false);
@@ -44,6 +49,8 @@ onMounted(() => {
                     :add-role-confirmation="privateProject" />
 
       <private-invite-only-proj-management v-if="privateProject"/>
+
+      <trusted-client-props v-if="showTrustedClientProps" class="my-4"/>
     </div>
   </div>
 </template>

dashboard-prime/src/components/access/RoleManager.vue

@@ -70,25 +70,25 @@ onMounted(() => {
   loadData();
 });
 
+
+const sortInfo = ref({ sortOrder: 1, sortBy: 'userId' })
+const possiblePageSizes = [ 5, 10, 15, 20]
+const pageSize = ref(5)
 let table = ref({
   options: {
     busy: true,
-    sortBy: 'userId',
-    sortDesc: 1,
     pagination: {
       hideUnnecessary: true,
       server: false,
       currentPage: 1,
       totalRows: 1,
-      pageSize: 5,
-      possiblePageSizes: [5, 10, 15, 20],
     },
     tableDescription: `${props.roleDescription} table`,
   },
 });
 
-let data = ref([]);
-let userIds = ref([]);
+const data = ref([]);
+const userIds = computed(() => data.value.map((d) => d.userId));
 const selectedUser = ref(null);
 const isSaving = ref(false);
 const errNotification = ref({
@@ -130,19 +130,18 @@ function getRoleDisplay(roleName) {
   return 'Unknown';
 }
 
-function loadData() {
+const loadData = () => {
   table.value.options.busy = true;
   const pageParams = {
     limit: 200,
-    ascending: table.value.options.sortDesc === 1,
     page: 1,
-    orderBy: table.value.options.sortBy,
+    ascending: sortInfo.value.sortOrder === 1,
+    orderBy: sortInfo.value.sortBy
   };
   AccessService.getUserRoles(props.projectId, props.roles, pageParams).then((result) => {
     table.value.options.busy = false;
     data.value = result.data;
     table.value.options.pagination.totalRows = result.totalCount;
-    // userIds.value = result.data.map((u) => [u.userId, u.userIdForDisplay]).flatten();
   });
 }
 
@@ -225,7 +224,7 @@ function deleteUserRole(row) {
   table.value.options.busy = true;
   AccessService.deleteUserRole(row.projectId, row.userId, row.roleName).then(() => {
     data.value = data.value.filter((item) => item.userId !== row.userId);
-    userIds.value = userIds.value.filter((userId) => userId !== row.userId && userId !== row.userIdForDisplay);
+    userIds.value = userIds.value.filter((userId) => userId !== row.userId);
     emit('role-deleted', { userId: row.userId, role: row.roleName });
     table.value.options.busy = false;
     table.value.options.pagination.totalRows = data.value.length;
@@ -317,13 +316,20 @@ defineExpose({
             <strong>Error!</strong> Request could not be completed! {{ errNotification.msg }}
           </Message>
         </div>
-        <DataTable :value="data" :rowsPerPageOptions="[5, 10, 15, 20]" data-cy="roleManagerTable" striped-rows
-                   v-model:sort-field="table.options.sortBy"
-                   v-model:sort-order="table.options.sortDesc"
-                   paginator :rows="5">
+        <SkillsDataTable
+          :value="data"
+          :rowsPerPageOptions="possiblePageSizes"
+          data-cy="roleManagerTable"
+          tableStoredStateId="roleManagerTableSort"
+          striped-rows
+          paginator
+          v-model:sort-field="sortInfo.sortBy"
+          v-model:sort-order="sortInfo.sortOrder"
+          :rows="pageSize">
           <Column :header="roleDescription" field="userId" sortable :class="{'flex': responsive.md.value }">
             <template #header>
-              <span class="mr-2"><i class="fas fa-user skills-color-users" :class="colors.getTextClass(0)" aria-hidden="true"></i> </span>
+              <span class="mr-2"><i class="fas fa-user skills-color-users" :class="colors.getTextClass(0)"
+                                    aria-hidden="true"></i> </span>
             </template>
             <template #body="slotProps">
               <div :data-cy="`userCell_${slotProps.data.userId}`">
@@ -333,7 +339,8 @@ defineExpose({
           </Column>
           <Column header="Role" field="roleName" sortable :class="{'flex': responsive.md.value }">
             <template #header>
-              <span class="mr-2"><i class="fas fa-id-card text-danger" :class="colors.getTextClass(1)" aria-hidden="true"></i> </span>
+              <span class="mr-2"><i class="fas fa-id-card text-danger" :class="colors.getTextClass(1)"
+                                    aria-hidden="true"></i> </span>
             </template>
             <template #body="slotProps">
               <div v-if="!slotProps.data.isEdited">{{ getRoleDisplay(slotProps.data.roleName) }}</div>
@@ -383,7 +390,7 @@ defineExpose({
           <template #empty>
             <span class="flex align-items-center justify-content-center">There are no records to show</span>
           </template>
-        </DataTable>
+        </SkillsDataTable>
       </div>
     </template>
   </Card>

dashboard-prime/src/components/access/TrustedClientProps.vue

@@ -0,0 +1,70 @@
+<script setup>
+import SkillsCardHeader from '@/components/utils/cards/SkillsCardHeader.vue'
+import { useRoute } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import AccessService from '@/components/access/AccessService.js'
+import { useDialogMessages } from '@/components/utils/modal/UseDialogMessages.js'
+
+const route = useRoute()
+const dialogMessages = useDialogMessages()
+
+const projectId = computed(() => route.params.projectId)
+
+const loadingSecret = ref(true)
+const clientSecret = ref('')
+
+onMounted(() => {
+  loadClientSecret()
+})
+
+const loadClientSecret = () => {
+  loadingSecret.value = true
+  AccessService.getClientSecret(projectId.value)
+    .then((clientSecretRes) => {
+      clientSecret.value = clientSecretRes
+    }).finally(() => {
+    loadingSecret.value = false
+  })
+}
+
+const resetClientSecret = () => {
+  const message = 'Are you sure you want reset the client secret? Your current client secret will no longer work after reset and you will need to update any application configuration using the old secret.'
+  dialogMessages.msgConfirm(message, 'Reset Secret?', () => {
+    AccessService.resetClientSecret(projectId.value)
+      .then((clientSecretRes) => {
+        clientSecret.value = clientSecretRes
+      })
+  })
+}
+</script>
+
+<template>
+  <Card data-cy="trusted-client-props-panel">
+    <template #header>
+      <SkillsCardHeader title="Trusted Client Properties"></SkillsCardHeader>
+    </template>
+    <template #content>
+      <skills-spinner v-if="loadingSecret" :is-loading="loadingSecret" class="my-5" />
+      <div v-if="!loadingSecret">
+        <div>
+          <span class="text-color-secondary">Client ID:</span>
+          <span class="ml-2">{{ projectId }}</span>
+        </div>
+        <div class="mt-2">
+          <span class="text-color-secondary">Client Secret:</span>
+          <span class="ml-2">{{ clientSecret }}</span>
+        </div>
+        <SkillsButton
+          label="Reset Client Secret"
+          icon="fas fa-sync-alt"
+          size="small"
+          @click="resetClientSecret"
+          class="mt-3" />
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style scoped>
+
+</style>

dashboard-prime/src/components/levels/NewLevel.vue

@@ -73,6 +73,10 @@ const initialLevelData = {
   points: props.level.points,
 };
 
+if (!props.isEdit) {
+  initialLevelData.percent = props.allLevels.reduce((max, level) => Math.max(max, level.percent), 0) +1;
+}
+
 const boundsValidator = (value) => {
   const gte = (value, compareTo) => value >= compareTo;
   const lte = (value, compareTo) => value <= compareTo;

dashboard-prime/src/components/projects/EditProject.vue

@@ -103,7 +103,7 @@ const schema = object({
     .max(appConfig.maxProjectNameLength)
     .nullValueNotAllowed()
     .test('uniqueName', 'Project Name already exists', (value) => checkProjNameUnique(value))
-    .customNameValidator()
+    .customNameValidator('Project Name')
     .label('Project Name'),
   'projectId': string()
     .required()

dashboard-prime/src/components/projects/MyProject.vue

@@ -28,7 +28,7 @@ const announcer = useSkillsAnnouncer()
 
 // data items
 const pinned = ref(false);
-const projectInternal = ref({ ...props.project });
+const projectInternal = computed(() => props.project );
 const stats = ref([]);
 const showEditProjectModal = ref(false);
 const showCopyProjectModal = ref(false);
@@ -247,6 +247,7 @@ defineExpose({
         <ReminderMessage
           v-if="warningMsgAboutPoints"
           :id="`projectCardWarning_${projectInternal.projectId}`"
+          data-cy="projectCardWarning"
           severity="info">{{ warningMsgAboutPoints}}</ReminderMessage>
 
         <div v-if="!disableSortControl"

dashboard-prime/src/components/projects/MyProjects.vue

@@ -118,24 +118,17 @@ const openProjectModal = (project = {}, isEdit = false) => {
 provide('createOrUpdateProject', openProjectModal)
 
 const projectAdded = (project) => {
+
   const existingIndex = projects.value.findIndex((item) => item.projectId === project.originalProjectId)
   if (existingIndex >= 0) {
+    console.log(`edit: ${existingIndex} project at this indeex`)
     projects.value.splice(existingIndex, 1, project)
+    announcer.polite(`Project ${project.name} has been updated`);
   } else {
     projects.value.push(project)
     SkillsReporter.reportSkill('CreateProject');
+    announcer.polite(`Project ${project.name} has been created`);
   }
-  announcer.polite(`Project ${project.name} has been created`);
-};
-const projectEdited = (editedProject) => {
-  // ProjectService.saveProject(editedProject).then(() => {
-    loadProjects().then(() => {
-      // this.$refs.projectsTable.focusOnEditButton(editedProject.projectId);
-      nextTick(() => {
-        announcer.polite(`Project ${editedProject.name} has been edited`);
-      });
-    });
-  // });
 };
 const enableDropAndDrop = () => {
   if (projects.value && projects.value.length > 0 && projects.value.length < appConfig.numProjectsForTableView) {
@@ -211,12 +204,9 @@ const saveProject = (values, isEdit, projectId) => {
         }
         return ProjectService.getProject(projRes.projectId)
           .then((retrievedProj) => {
-            if (!isEdit) {
-              projectAdded(retrievedProj);
-            } else {
-              projectEdited(retrievedProj);
-            }
-            return {...retrievedProj, originalProjectId: projectId}
+            const projWithOriginalId = { ...retrievedProj, originalProjectId: projectId }
+            projectAdded(projWithOriginalId)
+            return projWithOriginalId
           })
       })
 }
@@ -276,12 +266,14 @@ const hasData = computed(() => {
       <div v-for="project of projects" :key="project.projectId" class="mb-3"
            :id="project.projectId">
         <BlockUI :blocked="sortOrder.loading">
-          <div class="text-center" :data-cy="`${project.projectId}_overlayShown`">
-            <div v-if="project.projectId===sortOrder.loadingProjectId && sortOrder.loading"
-                 data-cy="updatingSortMsg">
-              <div class="text-info text-uppercase mb-1">Updating sort order!</div>
-              <SkillsSpinner :is-loading="sortOrder.loading" label="Loading..." style="width: 3rem; height: 3rem;" variant="info" />
-            </div>
+          <div v-if="sortOrder.loading"
+               class="text-center loading-indicator"
+               :data-cy="`${project.projectId}_overlayShown`">
+            <SkillsSpinner
+              v-if="project.projectId === sortOrder.loadingProjectId"
+              :is-loading="true"
+              data-cy="overlaySpinner"
+              aria-label="Updating sort order" />
           </div>
           <MyProject :id="`proj${project.projectId}`" tabindex="-1"
                      :project="project" :disable-sort-control="projects.length === 1"
@@ -319,4 +311,17 @@ const hasData = computed(() => {
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.loading-indicator {
+  position: absolute;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+</style>

e2e-tests/cypress/e2e/client-display/client-display_spec.js

@@ -217,27 +217,39 @@ describe('Client Display Tests', () => {
 
     it('clearly represent navigable components', () => {
         cy.cdVisit('?internalBackButton=true', true);
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSubj(0, 'Subject 1',true);
+        cy.get('[data-cy="pointHistoryChartWithData"]')
 
         // make sure it can navigate into each skill via title
         cy.cdClickSkill(0, false);
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSkill(1, false);
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSkill(2, false);
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSkill(3, false);
+        cy.get('[data-cy="prerequisitesCard"] [data-cy="skillLink-proj1-skill2"]')
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
 
         // make sure it can navigate into each skill via progress bar
         cy.cdClickSkill(0);
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSkill(1);
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSkill(2);
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
         cy.cdClickSkill(3);
+        cy.get('[data-cy="prerequisitesCard"] [data-cy="skillLink-proj1-skill2"]')
         cy.cdBack('Subject 1');
+        cy.get('[data-cy="pointHistoryChartWithData"]')
     });
 
     it('components should not be clickable in the summary only option', () => {