Merge pull request #2639 from NationalSecurityAgency/t#2490/cards_sec…

…tions_and_more T#2490/cards sections and more
NationalSecurityAgency · Jul 9, 2024 · feabfe9 · feabfe9
2 parents 8aebf63 + 0745e43
commit feabfe9
Show file tree

Hide file tree

Showing 189 changed files with 323 additions and 478 deletions.
diff --git a/dashboard-prime/pom.xml b/dashboard-prime/pom.xml
@@ -168,6 +168,8 @@
                         <exclude>dist/**</exclude>
                         <exclude>node_modules/**</exclude>
                         <exclude>.eslintrc.cjs</exclude>
+                        <exclude>**/theme-overrides.scss</exclude>
+                        <exclude>**/theme.css</exclude>
                     </excludes>
                 </configuration>
                 <executions>

diff --git a/dashboard-prime/public/themes/skills-light-green/theme.css b/dashboard-prime/public/themes/skills-light-green/theme.css
diff --git a/dashboard-prime/src/App.vue b/dashboard-prime/src/App.vue
@@ -135,7 +135,12 @@ const isDashboardFooter = computed(() => notSkillsClient.value && !isLoadingApp.
 </script>
 
 <template>
-  <div role="presentation" class="m-0 surface-ground">
+  <div role="presentation"
+       :class="{
+          'skills-dark-theme': themeHelper.isDarkTheme,
+          'skills-light-theme': !themeHelper.isDarkTheme
+       }"
+       class="m-0 surface-ground skills-light-theme">
     <VueAnnouncer class="sr-only" />
 
     <customizable-header v-if="isCustomizableHeader" role="region" aria-label="dynamic customizable header"></customizable-header>
@@ -169,4 +174,31 @@ const isDashboardFooter = computed(() => notSkillsClient.value && !isLoadingApp.
 .overall-container {
   min-height: calc(100vh - 100px);
 }
+
+</style>
+
+<style>
+body a, a:link, a:visited {
+  text-decoration: none !important;
+}
+
+body .skills-light-theme a, a:link {
+  color: #2f64bd !important;
+}
+
+body .skills-light-theme a:visited {
+  color: #784f9f !important;
+}
+
+body .skills-dark-theme a, a:link {
+  color: #99befb !important;
+}
+
+body .skills-dark-theme a:visited {
+  color: #d5aafb !important;
+}
+
+body a:hover, body a:focus {
+  text-decoration: underline !important;
+}
 </style>
diff --git a/dashboard-prime/src/components/badges/Badge.vue b/dashboard-prime/src/components/badges/Badge.vue
@@ -75,8 +75,6 @@ const cardOptions = computed(() => {
       type: props.global ? 'Global Badge' : 'Badge',
       name: props.badge.name,
       id: props.badge.badgeId,
-      deleteDisabledText: '',
-      isDeleteDisabled: false,
       isFirst: props.badge.isFirst,
       isLast: props.badge.isLast,
     },

diff --git a/dashboard-prime/src/components/header/SkillsBreadcrumbItem.vue b/dashboard-prime/src/components/header/SkillsBreadcrumbItem.vue
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 <script setup>
-defineProps({
+import { computed } from 'vue'
+
+const props = defineProps({
   label: String,
   icon: String,
   value: {
@@ -30,16 +32,20 @@ defineProps({
     default: false
   },
 })
+
+const maxWidth = computed(() => props.label ? 'max-width:13rem' : '')
 </script>
 
 <template>
-  <div  class="sd-theme-breadcrumb-item" data-cy="breadcrumb-item">
+  <div  class="sd-theme-breadcrumb-item flex" data-cy="breadcrumb-item">
     <i v-if="showSeparator"
        class="fas fa-angle-right ml-1 mr-1"
        aria-hidden="true"/>
-    <span v-if="icon" :class="[icon, 'text-color']" aria-hidden="true" class="mr-2"/>
-    <span v-if="label" class="text-color-secondary mr-1" data-cy="breadcrumbItemLabel">{{ label }}:</span>
-    <span class="font-semibold" :class="valueCss" data-cy="breadcrumbItemValue">{{ value }}</span>
+    <div v-if="icon" :class="[icon, 'text-color']" aria-hidden="true" class="mr-2"/>
+    <div v-if="label" class="text-color-secondary mr-1" data-cy="breadcrumbItemLabel">{{ label }}:</div>
+    <div class="font-semibold white-space-nowrap overflow-hidden text-overflow-ellipsis" :style="`${maxWidth}`"
+          :class="valueCss"
+          data-cy="breadcrumbItemValue">{{ value }}</div>
   </div>
 </template>
 

diff --git a/dashboard-prime/src/components/levels/Levels.vue b/dashboard-prime/src/components/levels/Levels.vue
@@ -283,11 +283,9 @@ const isFlex = computed(() => responsive.sm.value)
               icon="fas fa-trash-alt" label="Remove Highest">
             </SkillsButton>
           </span>
-<!--          <b-tooltip target="add-button" title="Reached maximum limit of levels." :disabled="!reachedMaxLevels"></b-tooltip>-->
           <span id="add-button">
             <SkillsButton @click="editLevel()" ref="addLevel" :disabled="reachedMaxLevels" :track-for-focus="true" id="addLevel"
                       size="small" data-cy="addLevel" icon="fas fa-plus-circle" label="Add Next">
-<!--              <span class="d-none d-sm-inline">Add</span> Next <i class="fas fa-plus-circle" aria-hidden="true"/>-->
             </SkillsButton>
           </span>
         </div>
@@ -300,12 +298,12 @@ const isFlex = computed(() => responsive.sm.value)
                    data-cy="levelsTable" striped-rows>
           <Column field="level" header="Level" :class="{'flex': isFlex }">
             <template #body="slotProps">
+              <div>
               {{ slotProps.data.level }}
-              <span v-if="slotProps.data.achievable === false" class="icon-warning text-sm">
-                <i class="fa fa-exclamation-circle text-warning"
-                   aria-label="Level is unachievable. Insufficient available points in project."
-                   v-tooltip="'Level is unachievable. Insufficient available points in project.'"/> Level is unachievable. Insufficient available points in project.
-              </span>
+              </div>
+              <InlineMessage v-if="slotProps.data.achievable === false" class="text-sm" severity="warn">
+                Level is unachievable. Insufficient available points in project.
+              </InlineMessage>
             </template>
           </Column>
           <Column field="percent" header="Percent" :class="{'flex': isFlex }">
@@ -318,9 +316,9 @@ const isFlex = computed(() => responsive.sm.value)
                   <span v-if="slotProps.data.pointsTo">{{ slotProps.data.pointsTo }}</span>
                   <span v-else><i class="fas fa-infinity"/></span>
                 </span>
-              <span v-else aria-label="Points cannot be calculated. Please create more skills first.">N/A
-                  <span class="text-500 text-sm"><i class="fa fa-exclamation-circle"/> Please create more skills first</span>
-                </span>
+              <div v-else aria-label="Points cannot be calculated. Please create more skills first." class="flex align-items-center">N/A
+                  <InlineMessage severity="warn" class="ml-1"> Please create more skills first</InlineMessage>
+              </div>
             </template>
           </Column>
           <Column field="edit" header="Edit" :class="{'flex': isFlex }">

diff --git a/dashboard-prime/src/components/metrics/common/LevelBreakdownMetric.vue b/dashboard-prime/src/components/metrics/common/LevelBreakdownMetric.vue
@@ -145,7 +145,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card data-cy="levelsChart" :pt="{ body: { class: 'p-0 pt-2 pr-2' }, content: { class: 'p-0' } }">
+  <Card data-cy="levelsChart" :pt="{ body: { class: 'p-0 pt-2' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader :title="title"></SkillsCardHeader>
     </template>

diff --git a/dashboard-prime/src/components/metrics/projectNav/MetricNavCard.vue b/dashboard-prime/src/components/metrics/projectNav/MetricNavCard.vue
@@ -14,19 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 <script setup>
+import CardWithVericalSections from '@/components/utils/cards/CardWithVericalSections.vue'
+
 defineProps(['title', 'subtitle', 'description', 'icon', 'pathName']);
 </script>
 
 <template>
-  <Card>
+  <CardWithVericalSections>
     <template #content>
-      <div>
+      <div class="p-5">
         <div class="flex">
           <div class="flex d-inline-block mt-1 mr-3 border rounded p-2">
             <i class="fa-3x" :class="icon"/>
           </div>
           <div class="flex flex-1 flex-column">
-            <div class="h4 mb-2">{{ title }}</div>
+            <div class="h4 mb-2 font-semibold">{{ title }}</div>
             <div class="font-light text-sm">
               <slot name="subtitle">
                 {{ subtitle }}
@@ -41,13 +43,13 @@ defineProps(['title', 'subtitle', 'description', 'icon', 'pathName']);
 
     </template>
     <template #footer>
-      <div class="text-center">
+      <div class="text-center pb-3 px-5">
         <router-link :to="{ name: pathName }" :data-cy="`metricsNav-${title}`">
           <SkillsButton size="small" :label="`${title}`" icon="fas fa-arrow-right" />
         </router-link>
       </div>
     </template>
-  </Card>
+  </CardWithVericalSections>
 </template>
 
 <style scoped>

diff --git a/dashboard-prime/src/components/metrics/projectNav/ProjectMetricsNavCards.vue b/dashboard-prime/src/components/metrics/projectNav/ProjectMetricsNavCards.vue
@@ -20,7 +20,7 @@ defineProps(['navCards'])
 </script>
 
 <template>
-  <div class="flex gap-3 flex-column lg:flex-row mt-4">
+  <div class="flex flex-wrap gap-3 flex-column lg:flex-row mt-4">
       <metric-nav-card v-for="(navItem) in navCards" :key="navItem.title" class="flex-1"
                        :title="navItem.title" :subtitle="navItem.subtitle" :description="navItem.description"
                        :path-name="navItem.pathName" :icon="navItem.icon" />

diff --git a/dashboard-prime/src/components/metrics/userTags/UserTagMetrics.vue b/dashboard-prime/src/components/metrics/userTags/UserTagMetrics.vue
@@ -55,9 +55,7 @@ const buildTagCharts = () => {
 <template>
   <div>
     <div class="flex mb-3">
-      <div class="">
-        <level-breakdown-metric :title="`Overall Levels for ${metricTitle}`" />
-      </div>
+      <level-breakdown-metric :title="`Overall Levels for ${metricTitle}`" class="flex-1"/>
     </div>
     <users-table-metric :title="`Users for ${metricTitle}`" />
   </div>

diff --git a/dashboard-prime/src/components/metrics/userTags/UsersTableMetric.vue b/dashboard-prime/src/components/metrics/userTags/UsersTableMetric.vue
@@ -27,7 +27,7 @@ defineProps({
 </script>
 
 <template>
-  <Card :no-padding="true" data-cy="usersTableMetric" >
+  <Card :no-padding="true" data-cy="usersTableMetric" :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader :title="title"></SkillsCardHeader>
     </template>

diff --git a/dashboard-prime/src/components/projects/MyProject.vue b/dashboard-prime/src/components/projects/MyProject.vue
@@ -15,7 +15,6 @@ limitations under the License.
 */
 <script setup>
 import { computed, inject, onMounted, ref } from 'vue'
-import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
 import Badge from 'primevue/badge'
 import Avatar from 'primevue/avatar'
 import Card from 'primevue/card'
@@ -26,7 +25,6 @@ import ProjectCardControls from '@/components/projects/ProjectCardControls.vue'
 import UserRolesUtil from '@/components/utils/UserRolesUtil'
 import EditProject from '@/components/projects/EditProject.vue'
 import RemovalValidation from '@/components/utils/modal/RemovalValidation.vue'
-import { useAccessState } from '@/stores/UseAccessState.js'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import ProjectExpirationWarning from '@/components/projects/ProjectExpirationWarning.vue'
@@ -35,22 +33,16 @@ import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 
 const props = defineProps(['project', 'disableSortControl'])
 const appConfig = useAppConfig()
-const accessState = useAccessState()
 const emit = defineEmits(['project-deleted', 'copy-project', 'pin-removed', 'sort-changed-requested'])
 const numberFormat = useNumberFormat()
 const projectsState = useAdminProjectsState()
-const announcer = useSkillsAnnouncer()
 const confirm = useConfirm();
 
 // data items
 const pinned = ref(false);
 const projectInternal = computed(() => props.project );
 const stats = ref([]);
-const showEditProjectModal = ref(false);
 const showCopyProjectModal = ref(false);
-const deleteProjectDisabled = ref(false);
-const deleteProjectToolTip = ref('');
-const cancellingExpiration = ref(false);
 const showDeleteValidation = ref(false);
 let overSortControl = ref(false);
 const sortControl = ref();
@@ -65,12 +57,6 @@ onMounted(() => {
 });
 
 // computed
-const minimumPoints = computed(() => {
-  return appConfig.minimumProjectPoints;
-});
-const isRootUser = computed(() => {
-  return accessState.isRoot;
-});
 const isReadOnlyProj = computed(() => {
   return UserRolesUtil.isReadOnlyProjRole(projectInternal.value.userRole);
 });
@@ -212,9 +198,7 @@ defineExpose({
                 @copy-project="copyProject"
                 @delete-project="showDeleteValidation = true"
                 @unpin-project="unpin"
-                :read-only-project="isReadOnlyProj"
-                :is-delete-disabled="deleteProjectDisabled"
-                :delete-disabled-text="deleteProjectToolTip"/>
+                :read-only-project="isReadOnlyProj"/>
           </div>
         </div>
 
@@ -224,12 +208,6 @@ defineExpose({
               <i :class="stat.icon" aria-hidden="true" class="text-xl text-primary"/>
               <div class="uppercase">{{ stat.label }}</div>
               <div class="text-2xl mt-1 font-semibold" data-cy="statNum">{{ numberFormat.pretty(stat.count) }}</div>
-              <i v-if="stat.warn" class="fas fa-exclamation-circle text-yellow-400 ml-1"
-                 style="font-size: 1.5rem;"
-                 v-tooltip.hover="stat.warnMsg"
-                 data-cy="warning"
-                 role="alert"
-                 :aria-label="`Warning: ${stat.warnMsg}`"/>
 
               <div v-if="stat.secondaryStats">
                 <div v-for="secCount in stat.secondaryStats" :key="secCount.label">

diff --git a/dashboard-prime/src/components/projects/ProjectCardControls.vue b/dashboard-prime/src/components/projects/ProjectCardControls.vue
@@ -21,7 +21,7 @@ import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 const accessState = useAccessState()
 const projectsState = useAdminProjectsState()
 
-const props = defineProps(['project', 'isDeleteDisabled', 'deleteDisabledText', 'readOnlyProject'])
+defineProps(['project', 'readOnlyProject'])
 const emit = defineEmits(['edit-project', 'unpin-project', 'copy-project', 'delete-project'])
 
 const isRootUser = computed(() => accessState.isRoot)
@@ -100,8 +100,6 @@ const isRootUser = computed(() => accessState.isRoot)
         :track-for-focus="true"
         class="p-text-secondary"
         @click="emit('delete-project', $event.target.value)"
-        :disabled="isDeleteDisabled"
-        v-tooltip="deleteDisabledText"
         title="Delete Project"
         :aria-label="'Delete Project ' + project.name"
         role="button"

diff --git a/dashboard-prime/src/components/settings/ProjectSettings.vue b/dashboard-prime/src/components/settings/ProjectSettings.vue
@@ -575,7 +575,6 @@ const saveSettings = ((dirtyChanges) => {
                 <span class="ml-1">{{ showCustomLabelsConfigLabel }}</span>
               </div>
 
-  <!--            <b-collapse id="customLabelsCollapse" :visible="showCustomLabelsConfigToggle">-->
                 <Card class="mt-1" v-if="shouldShowCustomLabelsConfig">
                   <template #content>
                     <SkillsSettingTextInput name="projectDisplayName"
@@ -598,10 +597,8 @@ const saveSettings = ((dirtyChanges) => {
                                             label="Level Display Text"
                                             @input="updateSettingsField"
                                             help-message='The word "Level" may be overloaded to some organizations.  You can change the value displayed to users in Skills Display here.'/>
-<!--                    projectDisplayNameChanged-->
                   </template>
                 </Card>
-  <!--            </b-collapse>-->
             </div>
           </div>
 
@@ -623,7 +620,7 @@ const saveSettings = ((dirtyChanges) => {
 
           <hr/>
 
-          <p v-if="errMsg" class="text-center text-danger" role="alert">***{{ errMsg }}***</p>
+          <Message v-if="errMsg" severity="error" :closable="false">{{ errMsg }}</Message>
 
           <div class="flex flex-row">
             <div class="col">

diff --git a/dashboard-prime/src/components/settings/SkillsSettingTextInput.vue b/dashboard-prime/src/components/settings/SkillsSettingTextInput.vue
@@ -15,8 +15,7 @@ limitations under the License.
 */
 <script setup>
 import { useField } from 'vee-validate'
-import InlineHelp from "@/components/utils/InlineHelp.vue";
-import { computed } from "vue";
+import { computed } from 'vue'
 
 const props = defineProps({
   name: {