[OSIDB-3805] Show Flaw Labels on Issue List

CHANGELOG.md

@@ -1,6 +1,9 @@
 # OSIM Changelog
 
 ## [Unreleased]
+### Added
+* Show Flaw Labels on Flaw List Component (`OSIDB-3805`)
+
 ### Fixed
 * Fix incorrect affects ordering by Impact and Resolution (`OSIDB-3480`)
 

openapi.yml

@@ -1,7 +1,7 @@
 openapi: 3.0.3
 info:
   title: OSIDB API
-  version: 4.5.6
+  version: 4.6.1
   description: REST API autogenerated docs for the OSIDB and its components
 paths:
   /auth/token:
@@ -7022,6 +7022,7 @@ components:
           readOnly: true
         ps_component:
           type: string
+          nullable: true
           maxLength: 255
         impact:
           oneOf:
@@ -7040,6 +7041,9 @@ components:
           items:
             $ref: '#/components/schemas/AffectCVSS'
           readOnly: true
+        purl:
+          type: string
+          nullable: true
         embargoed:
           type: boolean
           description: The embargoed boolean attribute is technically read-only as
@@ -7066,7 +7070,6 @@ components:
       - delegated_resolution
       - embargoed
       - flaw
-      - ps_component
       - ps_module
       - ps_product
       - trackers
@@ -7108,6 +7111,7 @@ components:
           readOnly: true
         ps_component:
           type: string
+          nullable: true
           maxLength: 255
         impact:
           oneOf:
@@ -7126,6 +7130,9 @@ components:
           items:
             $ref: '#/components/schemas/AffectCVSS'
           readOnly: true
+        purl:
+          type: string
+          nullable: true
         embargoed:
           type: boolean
           description: The embargoed boolean attribute is technically read-only as
@@ -7152,7 +7159,6 @@ components:
       - delegated_resolution
       - embargoed
       - flaw
-      - ps_component
       - ps_module
       - ps_product
       - trackers
@@ -7336,6 +7342,7 @@ components:
           readOnly: true
         ps_component:
           type: string
+          nullable: true
           maxLength: 255
         impact:
           oneOf:
@@ -7354,6 +7361,9 @@ components:
           items:
             $ref: '#/components/schemas/AffectCVSS'
           readOnly: true
+        purl:
+          type: string
+          nullable: true
         embargoed:
           type: boolean
           description: The embargoed boolean attribute is technically read-only as
@@ -7375,7 +7385,6 @@ components:
       - delegated_resolution
       - embargoed
       - flaw
-      - ps_component
       - ps_module
       - ps_product
       - trackers
@@ -7707,6 +7716,11 @@ components:
           items:
             $ref: '#/components/schemas/FlawCVSS'
           readOnly: true
+        labels:
+          type: array
+          items:
+            $ref: '#/components/schemas/FlawCollaborator'
+          nullable: true
         embargoed:
           type: boolean
           description: The embargoed boolean attribute is technically read-only as
@@ -8050,6 +8064,19 @@ components:
       - updated_dt
       - uuid
       - vector
+    FlawCollaborator:
+      type: object
+      description: FlawCollaborator serializer
+      properties:
+        label:
+          type: string
+        state:
+          $ref: '#/components/schemas/StateEnum'
+        contributor:
+          type: string
+          maxLength: 255
+      required:
+      - label
     FlawComment:
       type: object
       description: FlawComment serializer for use by flaw_comments endpoint
@@ -8339,6 +8366,11 @@ components:
           items:
             $ref: '#/components/schemas/FlawCVSS'
           readOnly: true
+        labels:
+          type: array
+          items:
+            $ref: '#/components/schemas/FlawCollaborator'
+          nullable: true
         embargoed:
           type: boolean
           description: The embargoed boolean attribute is technically read-only as
@@ -9132,6 +9164,13 @@ components:
       - XEN
       - XPDF
       type: string
+    StateEnum:
+      enum:
+      - NEW
+      - REQ
+      - SKIP
+      - DONE
+      type: string
     SupportedProducts:
       type: object
       properties:

package.json

@@ -30,7 +30,7 @@
     "@mrmarble/djangoql-completion": "^0.8.3",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-inject": "^5.0.5",
-    "@vueuse/core": "^10.4.1",
+    "@vueuse/core": "^12.3.0",
     "axios": "^1.7.4",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.3",
@@ -41,7 +41,7 @@
     "pinia": "^2.1.4",
     "ramda": "^0.29.1",
     "sanitize-html": "^2.12.1",
-    "vue": "^3.4.19",
+    "vue": "^3.5.13",
     "vue-imask": "^7.1.2",
     "vue-router": "^4.2.4",
     "zod": "^3.21.4"

src/components/IssueQueue/IssueQueue.vue

@@ -1,39 +1,43 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, onUnmounted, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import { DateTime } from 'luxon';
+import { useElementVisibility } from '@vueuse/core';
 
-import IssueQueueItem from '@/components/IssueQueueItem/IssueQueueItem.vue';
+import IssueQueueItem from '@/components/IssueQueue/IssueQueueItem.vue';
 
 import LabelCheckbox from '@/widgets/LabelCheckbox/LabelCheckbox.vue';
 import { useUserStore } from '@/stores/UserStore';
 import { FlawClassificationStateEnum } from '@/generated-client';
+import type { ZodFlawType } from '@/types';
 
 const props = defineProps<{
   isFinalPageFetched: boolean;
   isLoading: boolean;
-  issues: any[];
+  issues: ZodFlawType[];
   total: number;
 }>();
+
 const emit = defineEmits(['flaws:fetch', 'flaws:load-more']);
 const userStore = useUserStore();
 
-type FilteredIssue = {
-  issue: any;
-  selected: boolean;
-};
+export type FilteredIssue = ReturnType<typeof relevantFields>;
 
 // Temporarily hiding 'Source' column to avoid displaying incorrect information.
 // TODO: unhide it once final issue sources are defined. [OSIDB-2424]
 // type ColumnField = 'id' | 'impact' | 'source' | 'created_dt' | 'title' | 'state' | 'owner';
 type ColumnField = 'created_dt' | 'id' | 'impact' | 'owner' | 'state' | 'title';
 
-const issues = computed<any[]>(() => props.issues.map(relevantFields));
+const issues = computed<FilteredIssue[]>(() => props.issues.map(relevantFields));
 const selectedSortField = ref<ColumnField | null>('created_dt');
 const isSortedByAscending = ref(false);
 const isMyIssuesSelected = ref(false);
 const isOpenIssuesSelected = ref(false);
-const tableContainerEl = ref<HTMLElement | null>(null);
+const tableContainerEl = ref<HTMLDivElement | null>(null);
+const buttonRef = ref<HTMLButtonElement | null>(null);
+const isButtonVisible = useElementVisibility(buttonRef,
+  { rootMargin: '0px 0px 500px 0px', scrollTarget: tableContainerEl },
+);
 
 const filteredStates = computed(() => {
   const allStates = Object.values(FlawClassificationStateEnum);
@@ -80,11 +84,6 @@ const columnsFieldsMap: Record<string, ColumnField> = {
   Owner: 'owner',
 };
 
-const relevantIssues = computed<FilteredIssue[]>(() => {
-  return issues.value
-    .map(issue => reactive({ issue, selected: false }));
-});
-
 function selectSortField(field: ColumnField) {
   // Toggle between descending, ascending and no ordering
   // If selecting a new field, set to descending
@@ -100,48 +99,38 @@ function selectSortField(field: ColumnField) {
   }
 }
 
-function relevantFields(issue: any) {
+function relevantFields(issue: ZodFlawType) {
   return {
     id: issue.cve_id || issue.uuid,
     impact: issue.impact,
     // source: issue.source,
     created_dt: issue.created_dt,
     title: issue.title,
-    workflowState: issue.classification.state,
+    workflowState: issue.classification?.state,
     unembargo_dt: issue.unembargo_dt,
     embargoed: issue.embargoed,
     owner: issue.owner,
-    formattedDate: DateTime.fromISO(issue.created_dt).toUTC().toFormat('yyyy-MM-dd'),
+    formattedDate: DateTime.fromISO(issue.created_dt!).toUTC().toFormat('yyyy-MM-dd'),
+    labels: issue.labels,
   };
 }
 
+function emitLoadMore() {
+  emit('flaws:load-more', params);
+}
+
 onMounted(() => {
-  tableContainerEl.value?.addEventListener('scroll', handleScroll); // AutoScroll Option
   emit('flaws:fetch', params);
 });
 
-onUnmounted(() => {
-  tableContainerEl.value?.removeEventListener('scroll', handleScroll);
+watch(params, () => {
+  emit('flaws:fetch', params);
 });
 
-// AutoScroll Method. Maybe have this as a user configurable option in the future?
-function handleScroll() {
-  if (props.isLoading || !tableContainerEl.value) return; // Do not load more if already loading
-
-  const totalHeight = tableContainerEl.value.scrollHeight;
-  const scrollPosition = tableContainerEl.value.scrollTop + tableContainerEl.value.clientHeight;
-  // Trigger loading more content when the user has scrolled to 99% of the container's height,
-  if (scrollPosition >= totalHeight * 0.99) {
+watch(isButtonVisible, (isVisible) => {
+  if (isVisible) {
     emitLoadMore();
   }
-}
-
-function emitLoadMore() {
-  emit('flaws:load-more', params);
-}
-
-watch(params, () => {
-  emit('flaws:fetch', params);
 });
 </script>
 
@@ -189,9 +178,9 @@ watch(params, () => {
           </tr>
         </thead>
         <tbody class="table-group-divider">
-          <template v-for="(relevantIssue, index) of relevantIssues" :key="relevantIssue.id">
+          <template v-for="(relevantIssue, index) of issues" :key="relevantIssue.id">
             <IssueQueueItem
-              :issue="relevantIssue.issue"
+              :issue="relevantIssue"
               :class="{
                 'osim-shaded': index % 2 === 0,
               }"
@@ -200,7 +189,8 @@ watch(params, () => {
         </tbody>
       </table>
       <button
-        v-if="relevantIssues.length !== 0 && !isFinalPageFetched"
+        v-if="issues.length !== 0 && !isFinalPageFetched"
+        ref="buttonRef"
         class="btn btn-primary"
         type="button"
         :disabled="isLoading"
@@ -216,7 +206,7 @@ watch(params, () => {
         <span v-if="isLoading"> Loading Flaws&hellip; </span>
         <span v-else> Load More Flaws </span>
       </button>
-      <p v-if="relevantIssues.length === 0">No results.</p>
+      <p v-if="issues.length === 0">No results.</p>
       <span v-if="isFinalPageFetched" role="status">Nothing else to load.</span>
     </div>
   </div>
@@ -233,7 +223,7 @@ watch(params, () => {
   // tbody
   div.osim-incident-list {
     display: block;
-    max-height: calc(100vh - 164px);
+    max-height: calc(100vh - 245px);
     overflow-y: auto;
 
     &:hover::-webkit-scrollbar-thumb {