Merge pull request #2900 from NationalSecurityAgency/revert-2899-t#28…

…86/skills_display_iframe_in_memory_history Revert "T#2886/skills display iframe in memory history"
NationalSecurityAgency · Sep 30, 2024 · 6791b8f · 6791b8f
2 parents a6b108d + adaad13
commit 6791b8f
Show file tree

Hide file tree

Showing 59 changed files with 207 additions and 930 deletions.
diff --git a/.gitignore b/.gitignore
@@ -46,7 +46,6 @@ service/src/main/resources/public/**
 .history
 /e2e-tests/cypress/screenshots/
 /e2e-tests/cypress/snapshots/**/__diff_output__
-/e2e-tests/cypress/downloads/*
 
 /dashboard/build/
 

diff --git a/dashboard/pom.xml b/dashboard/pom.xml
@@ -5,7 +5,7 @@
     <parent>
         <artifactId>skills-service-parent</artifactId>
         <groupId>skill-tree</groupId>
-      <version>3.1.1-SNAPSHOT</version>
+      <version>3.2.0-SNAPSHOT</version>
     </parent>
     <modelVersion>4.0.0</modelVersion>
 

diff --git a/dashboard/src/App.vue b/dashboard/src/App.vue
@@ -44,6 +44,8 @@ import ScrollToTop from '@/common-components/utilities/ScrollToTop.vue'
 import IconManagerService from '@/components/utils/iconPicker/IconManagerService.js'
 import log from 'loglevel';
 
+log.setLevel('WARN')
+
 const authState = useAuthState()
 const appInfoState = useAppInfoState()
 const appConfig = useAppConfig()
@@ -74,25 +76,18 @@ const addCustomIconCSSForClientDisplay = () => {
 }
 const inceptionConfigurer = useInceptionConfigurer()
 const pageVisitService = usePageVisitService()
-const loadUserAndDisplayInfo = () => {
-  inceptionConfigurer.configure()
-  pageVisitService.reportPageVisit(route.path, route.fullPath)
-  const loadRoot = accessState.loadIsRoot()
-  const loadSupervisor = accessState.loadIsSupervisor()
-  const loadEmailEnabled = appInfoState.loadEmailEnabled()
-  const loadCustomIconCSS = addCustomIconCSSForClientDisplay()
-  const promises = [loadRoot, loadSupervisor, loadEmailEnabled, loadCustomIconCSS]
-  if (!skillsDisplayInfo.isSkillsClientPath()) {
-    const loadTheme = themeHelper.loadTheme()
-    promises.push(loadTheme)
-  }
-  return Promise.all(promises).then(() => {
-    isAppLoaded.value = true
-  })
-}
 watch(() => authState.userInfo, async (newUserInfo) => {
   if (newUserInfo) {
-    await loadUserAndDisplayInfo()
+    inceptionConfigurer.configure()
+    pageVisitService.reportPageVisit(route.path, route.fullPath)
+    const loadRoot = accessState.loadIsRoot()
+    const loadSupervisor = accessState.loadIsSupervisor()
+    const loadEmailEnabled = appInfoState.loadEmailEnabled()
+    const loadTheme = themeHelper.loadTheme()
+    const loadCustomIconCSS = addCustomIconCSSForClientDisplay()
+    Promise.all([loadRoot, loadSupervisor, loadEmailEnabled, loadTheme, loadCustomIconCSS]).then(() => {
+      isAppLoaded.value = true
+    })
   } else {
     isAppLoaded.value = true
   }
@@ -105,7 +100,6 @@ watch(() => themeHelper.currentTheme, (newTheme, oldTheme) => {
 const iframeInit = useIframeInit()
 onBeforeMount(() => {
   if (skillsDisplayInfo.isSkillsClientPath()) {
-    log.trace('App.vue: skillsDisplayInfo.isSkillsClientPath()=true, initiating iframe handshake')
     iframeInit.handleHandshake()
   }
   errorHandling.registerErrorHandling()
@@ -116,40 +110,25 @@ onBeforeMount(() => {
 onMounted(() => {
   invoke(async () => {
     if (skillsDisplayInfo.isSkillsClientPath()) {
-      log.trace('App.vue: skillsDisplayInfo.isSkillsClientPath()=true, waiting for iframe to load')
       await until(iframeInit.loadedIframe).toBe(true)
       log.debug('App.vue: skillsDisplayInfo.isSkillsClientPath()=true, loaded iframe!')
     }
     loadConfigs()
   })
 })
 
-const restoreSessionIfAvailable = () => {
-  if (skillsDisplayInfo.isSkillsClientPath()) {
-    authState.setRestoringSession(false)
-    return Promise.resolve()
-  }
-  return authState.restoreSessionIfAvailable()
-}
-
 const loadConfigs = () => {
   appConfig.loadConfigState().finally(() => {
-    restoreSessionIfAvailable().finally(() => {
+    authState.restoreSessionIfAvailable().finally(() => {
       skillsDisplayAttributes.loadConfigStateIfNeeded().then(() => {
 
         inceptionConfigurer.configure()
-        if (!skillsDisplayInfo.isSkillsClientPath()) {
-          globalNavGuards.addNavGuards()
-        }
+        globalNavGuards.addNavGuards()
         if (!authState.isAuthenticated) {
           isAppLoaded.value = true
         }
-        if (skillsDisplayInfo.isSkillsClientPath()) {
-          loadUserAndDisplayInfo()
-        } else {
-          // do not need to set isAppLoaded to true here because it will be handled
-          // by the watch of authState.userInfo
-        }
+        // do not need to set isAppLoaded to true here because it will be handled
+        // by the watch of authState.userInfo
       })
     })
   })
@@ -171,11 +150,9 @@ const isDashboardFooter = computed(() => notSkillsClient.value && !isLoadingApp.
 
     <customizable-header v-if="isCustomizableHeader" role="region" aria-label="dynamic customizable header"></customizable-header>
     <div id="skilltree-main-container">
-      <div v-if="isLoadingApp" role="main" class="flex align-content-center justify-content-center flex-wrap" style="min-height: 40rem">
-        <div class="flex align-items-center justify-content-center m-2">
-          <skills-spinner :is-loading="true" class="text-center"/>
-          <h1 class="text-sm sr-only">Loading...</h1>
-        </div>
+      <div v-if="isLoadingApp" role="main" class="text-center">
+        <skills-spinner :is-loading="true" class="mt-8 text-center"/>
+        <h1 class="text-sm sr-only">Loading...</h1>
       </div>
       <div v-if="!isLoadingApp" class="m-0">
         <pki-app-bootstrap v-if="inBootstrapMode" role="region"/>
@@ -189,12 +166,12 @@ const isDashboardFooter = computed(() => notSkillsClient.value && !isLoadingApp.
             <RouterView />
           </div>
         </div>
-        <ConfirmDialog></ConfirmDialog>
-        <dashboard-footer v-if="isDashboardFooter" role="region" />
-        <customizable-footer v-if="isDashboardFooter" role="region" aria-label="dynamic customizable footer"></customizable-footer>
-        <scroll-to-top v-if="!isScrollToTopDisabled && !inBootstrapMode" />
       </div>
     </div>
+    <ConfirmDialog></ConfirmDialog>
+    <dashboard-footer v-if="isDashboardFooter" role="region" />
+    <customizable-footer v-if="isDashboardFooter" role="region" aria-label="dynamic customizable footer"></customizable-footer>
+    <scroll-to-top v-if="!isScrollToTopDisabled && !inBootstrapMode" />
   </div>
 </template>
 

diff --git a/dashboard/src/components/metrics/common/NumUsersPerDay.vue b/dashboard/src/components/metrics/common/NumUsersPerDay.vue
@@ -22,9 +22,6 @@ import MetricsOverlay from "@/components/metrics/utils/MetricsOverlay.vue";
 import MetricsService from "@/components/metrics/MetricsService.js";
 import TimeLengthSelector from "@/components/metrics/common/TimeLengthSelector.vue";
 import NumberFormatter from '@/components/utils/NumberFormatter.js'
-import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js';
-import { useThemesHelper } from '@/components/header/UseThemesHelper.js';
-
 
 const appConfig = useAppConfig();
 const route = useRoute();
@@ -36,16 +33,6 @@ const props = defineProps({
   },
 });
 
-const themeState = useSkillsDisplayThemeState()
-const themeHelper = useThemesHelper()
-
-const chartAxisColor = () => {
-  if (themeState.theme.charts.axisLabelColor) {
-    return themeState.theme.charts.axisLabelColor
-  }
-  return themeHelper.isDarkTheme ? 'white' : undefined
-}
-
 onMounted(() => {
   if (route.params.skillId) {
     localProps.value.skillId = route.params.skillId;
@@ -109,9 +96,6 @@ const chartOptions = ref({
   },
   yaxis: {
     labels: {
-      style: {
-        colors: chartAxisColor()
-      },
       formatter(val) {
         return NumberFormatter.format(val);
       },
@@ -122,14 +106,8 @@ const chartOptions = ref({
   },
   xaxis: {
     type: 'datetime',
-    labels: {
-      style: {
-        colors: chartAxisColor()
-      }
-    }
   },
   tooltip: {
-    theme: themeHelper.isDarkTheme ? 'dark' : 'light',
     shared: false,
         y: {
       formatter(val) {

diff --git a/dashboard/src/components/metrics/common/UserTagChartConfig.js b/dashboard/src/components/metrics/common/UserTagChartConfig.js
@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 import NumberFormatter from '@/components/utils/NumberFormatter.js';
-import { useThemesHelper } from '@/components/header/UseThemesHelper.js';
 
 export function useUserTagChartConfig() {
 
-    const themeHelper = useThemesHelper()
-
     const pieChartOptions = {
         chart: {
             // height: 250,
@@ -120,7 +117,6 @@ export function useUserTagChartConfig() {
             opacity: 1,
         },
         tooltip: {
-            theme: themeHelper.isDarkTheme ? 'dark' : 'light',
             y: {
                 formatter(val) {
                     return NumberFormatter.format(val);

diff --git a/dashboard/src/components/metrics/common/UserTagsByLevelChart.vue b/dashboard/src/components/metrics/common/UserTagsByLevelChart.vue
@@ -19,73 +19,52 @@ import MetricsService from "@/components/metrics/MetricsService.js";
 import { useRoute } from 'vue-router';
 import MetricsOverlay from "@/components/metrics/utils/MetricsOverlay.vue";
 import NumberFormatter from '@/components/utils/NumberFormatter.js';
-import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js';
-import { useThemesHelper } from '@/components/header/UseThemesHelper.js';
 
 const props = defineProps(['tag']);
 const route = useRoute();
 
-const themeState = useSkillsDisplayThemeState()
-const themeHelper = useThemesHelper()
-
-const chartAxisColor = () => {
-  if (themeState.theme.charts.axisLabelColor) {
-    return themeState.theme.charts.axisLabelColor
-  }
-  return themeHelper.isDarkTheme ? 'white' : undefined
-}
 const series = ref([]);
 const loading = ref(true);
 const chartOptions = ref({
   chart: {
     width: 250,
-    type: 'bar',
-    toolbar: {
+        type: 'bar',
+        toolbar: {
       show: true,
-      offsetX: 0,
-      offsetY: 0,
+          offsetX: 0,
+          offsetY: 0,
     },
   },
   plotOptions: {
     bar: {
       horizontal: true,
-      dataLabels: {
+          dataLabels: {
         position: 'bottom',
       },
     },
   },
   stroke: {
     show: true,
-    width: 2,
-    colors: ['transparent'],
+        width: 2,
+        colors: ['transparent'],
   },
   xaxis: {
     title: {
-      style: {
-        color: chartAxisColor()
-      },
       text: '# of Users',
     },
     labels: {
       style: {
         fontSize: '13px',
-        fontWeight: 600,
-        colors: chartAxisColor(),
+            fontWeight: 600,
       },
     },
   },
   yaxis: {
     title: {
       text: props.tag.label,
     },
-    labels: {
-      style: {
-        colors: chartAxisColor()
-      }
-    }
   },
   tooltip: {
-    theme: themeHelper.isDarkTheme ? 'dark' : 'light',
     y: {
       formatter(val) {
         return NumberFormatter.format(val);

diff --git a/dashboard/src/components/metrics/multipleProjects/TrainingProfileComparisonChart.vue b/dashboard/src/components/metrics/multipleProjects/TrainingProfileComparisonChart.vue
@@ -17,8 +17,6 @@ limitations under the License.
 import { ref, onMounted, watch } from 'vue';
 import NumberFormatter from "@/components/utils/NumberFormatter.js";
 import MetricsOverlay from "@/components/metrics/utils/MetricsOverlay.vue";
-import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js';
-import { useThemesHelper } from '@/components/header/UseThemesHelper.js';
 
 const props = defineProps({
   title: {
@@ -43,15 +41,6 @@ const props = defineProps({
   },
 });
 
-const themeState = useSkillsDisplayThemeState()
-const themeHelper = useThemesHelper()
-
-const chartAxisColor = () => {
-  if (themeState.theme.charts.axisLabelColor) {
-    return themeState.theme.charts.axisLabelColor
-  }
-  return themeHelper.isDarkTheme ? 'white' : undefined
-}
 
 const chartId = ref(props.title.replace(/\s+/g, ''));
 const chartRef = ref();
@@ -61,8 +50,8 @@ const seriesInternal = ref([]);
 const options = {
   chart: {
     type: 'bar',
-    height: 350,
-    toolbar: {
+        height: 350,
+        toolbar: {
       show: false,
     },
   },
@@ -82,26 +71,15 @@ const options = {
   },
   xaxis: {
     categories: props.labels,
-    labels: {
-      style: {
-        colors: chartAxisColor()
-      }
-    }
   },
   yaxis: {
     min: 0,
     labels: {
-      style: {
-        colors: chartAxisColor()
-      },
       formatter(val) {
         return typeof val === 'number' ? NumberFormatter.format(val) : val;
       },
     },
   },
-  tooltip: {
-    theme: themeHelper.isDarkTheme ? 'dark' : 'light',
-  }
 };
 
 onMounted(() => {