chore: remove unused js functions

Signed-off-by: Keshav Priyadarshi <git@keshav.space>

Author: keshav-space

vulnerabilities/pipelines/v2_improvers/compute_advisory_todo.py

@@ -518,7 +518,7 @@ def get_disagreement_message(fixed_disagreement, affected_disagreement):
 
         messages.append(f"Advisories do not agree whether {noun} {fixed} {verb} the fix.")
 
-    return " ".join(messages)
+    return "\n".join(messages)
 
 
 def get_grouped_curation_advisories_for_dashboard_ui(purl, adv_map, conflict_detail, advisories):

vulnerabilities/templates/package_curation.html

@@ -11,19 +11,19 @@
     <div class="container is-fluid">
         <div class="columns is-vcentered mb-5">
             <div class="column">
-                <h1 class="title is-3">Curation Dashboard</h1>
+                <h1 class="title is-3">Advisory Curation</h1>
                 <h2 class="subtitle is-5 has-text-grey">{{ vulnerability_id }}</h2>
             </div>
 
             <div class="column is-narrow">
                 <div class="box p-4 has-background-white shadow-soft" style="min-width: 260px; border-radius: 5px;">
                     <div class="is-flex is-justify-content-space-between is-align-items-center mb-2">
-                        <span class="is-size-7 has-text-grey-dark uppercase has-text-weight-bold mr-2 mt-1">
+                        <span class="is-size-6 has-text-grey-dark uppercase has-text-weight-bold mr-2">
                             Progress
                         </span>
                         <span class="tag is-info is-light has-text-weight-bold" id="progress-text">0 / 0</span>
                     </div>
-                    <progress class="progress is-info is-small mb-0" id="main-progress" value="0" max="100"></progress>
+                    <progress class="progress is-info is-small mb-0" id="progress" value="0" max="100"></progress>
                 </div>
             </div>
 
@@ -36,7 +36,7 @@ <h3 class="title is-5">Advisory Summaries</h3>
                     {% for avid, text in advisory_summaries.items %}
                         <div class="notification is-info is-light p-3 mb-3">
                             <p><strong>{{ avid }}</strong></p>
-                            <div class="summary-text">{{ text|normalize_links|urlize }}</div>
+                            <div class="text summary-text is-2">{{ text|normalize_links|urlize }}</div>
                         </div>
                     {% empty %}
                         <div class="notification is-light p-3 mb-3 has-text-grey">
@@ -50,7 +50,7 @@ <h3 class="title is-5">Advisory Summaries</h3>
                 <div class="box">
                     <div class="mb-4">
                         <h4 class="title is-4 mb-1" id="current-purl"></h4>
-                        <p class="help" id="conflict-reason"></p>
+                        <p class="text is-5" id="conflict-reason"></p>
                     </div>
 
                     <div class="table-container" style="max-height: 800px; overflow-y: auto; border: 1px solid #dbdbdb; border-radius: 6px;">
@@ -80,7 +80,7 @@ <h4 class="title is-4 mb-1" id="current-purl"></h4>
                             </button>
                             <button class="button is-info is-hidden" id="finish-btn" disabled>
                                 <span class="icon"><i class="fa fa-check"></i></span>
-                                <span>Validate</span>
+                                <span>Submit</span>
                             </button>
                         </div>
                     </div>
@@ -98,4 +98,4 @@ <h4 class="title is-4 mb-1" id="current-purl"></h4>
     const curationItems = {{ curation_items|safe }};
 </script>
 <script src="{% static 'js/package_curation.min.js' %}"></script>
-{% endblock %}
+{% endblock %}

vulnerablecode/static/css/package_curation.css

@@ -45,16 +45,6 @@
         width: 100px !important;
     }
 
-
-    .curation-cell,
-    .advisory-cell,
-    #curation-body td,
-    .folded-row-marker,
-    .range-data-cell,
-    .help-instructions {
-        font-size: 0.8rem !important;
-    }
-
     .curation-cell {
         cursor: pointer;
         text-align: center !important;
@@ -74,12 +64,6 @@
         cursor: not-allowed;
     }
 
-    .advisory-cell {
-        text-align: center !important;
-        vertical-align: middle !important;
-        border: 1px solid #dbdbdb !important;
-    }
-
     .folded-row-marker,
     .range-row-marker {
         cursor: pointer;
@@ -89,30 +73,10 @@
         background-color: #f5f5f5;
     }
 
-    .folded-row-marker {
-        height: 30px;
-    }
-
-    .folded-row-marker:hover,
-    .range-row-marker:hover {
-        background-color: #ededed;
-        color: #0a0a0a;
-    }
-
-    .folded-row-marker .icon {
-        transition: transform 0.2s ease;
-    }
-
     .folded-row-marker.is-expanded .icon {
         transform: rotate(180deg);
     }
 
-    .range-row-marker {
-        font-size: 0.8rem;
-        padding: 6px 0;
-        border: 1px solid #dbdbdb !important;
-    }
-
     .range-data-cell {
         background-color: #fafafa;
         padding: 6px !important;
@@ -133,7 +97,6 @@
     }
 
     .summary-text {
-        font-size: 0.85rem;
         line-height: 1.4;
         white-space: pre-wrap;
         word-break: break-word;
@@ -167,8 +130,3 @@
     white-space: normal;
     flex-wrap: wrap;
 }
-
-.advisory-link .icon {
-    font-size: 0.75rem;
-    flex-shrink: 0;
-}

vulnerablecode/static/js/package_curation.js

@@ -20,7 +20,7 @@ const app = {
 
         const total = curationItems.length;
         const progPercentage = ((this.currentIndex + 1) / total) * 100;
-        document.getElementById('main-progress').value = progPercentage;
+        document.getElementById('progress').value = progPercentage;
         document.getElementById('progress-text').innerText = `${this.currentIndex + 1} / ${total}`;
         document.getElementById('current-purl').innerText = item.purl;
         document.getElementById('conflict-reason').innerText = item.conflict_reason;
@@ -37,109 +37,6 @@ const app = {
         this.updateNavButtons();
     },
 
-    renderHeader(item) {
-        const header = document.getElementById('table-header');
-        header.innerHTML = `
-            <th class="has-text-weight-bold pt-4">Version</th>
-            <th style="width: 140px;" class="has-text-centered">
-                <div>
-                    <div>
-                        <div class="has-text-weight-bold">Curation</div>
-                    </div>
-                    <button class="button is-small is-outlined is-info mt-auto" onclick="app.resetCurrentCuration()">Reset</button>
-                </div>
-            </th>`;
-        item.advisories.forEach((adv, idx) => {
-            const th = document.createElement('th');
-            th.className = "has-text-centered";
-            const targetUrl = baseAdvisoryUrl.replace('0', adv.advisory_uid);
-            th.innerHTML = `
-                <div>
-                    <div class="mb-3 advisory-wrapper">
-                        <a href="${targetUrl}" target="_blank" rel="noopener noreferrer" class="has-text-link has-text-weight-bold advisory-link">
-                            <span>${adv.advisory_uid}</span>
-                            <span class="icon is-small" style="font-size: 0.75rem;"><i class="fa fa-external-link"></i></span>
-                        </a>
-                    </div>
-                    <button class="button is-small is-info mt-auto" onclick="app.pickAdvisory(${idx})">Pick This</button>
-                </div>
-            `;
-            header.appendChild(th);
-        });
-    },
-
-    renderBody(item, versions) {
-        const body = document.getElementById('curation-body');
-        body.innerHTML = '';
-        const totalColumns = item.advisories.length + 2;
-        const rangeToggleRow = document.createElement('tr');
-        rangeToggleRow.innerHTML = `
-            <td colspan="${totalColumns}" class="range-row-marker" onclick="app.toggleRanges()">
-                <span class="icon is-small"><i class="fa ${this.showRanges ? 'fa-chevron-up' : 'fa-chevron-down'}"></i></span>
-                ${this.showRanges ? 'Hide' : 'Show'} Version Ranges
-            </td>`;
-        body.appendChild(rangeToggleRow);
-        if (this.showRanges) {
-            const rangeDataRow = document.createElement('tr');
-            let rowHtml = `<td></td><td></td>`;
-            item.advisories.forEach(adv => {
-                const rangeHtml = adv.vers_ranges.map(r => {
-                    let htmlLines = [];
-                    if (r.affected_vers && r.affected_vers.trim() !== "") {
-                        htmlLines.push(`<div><span class="has-text-weight-semibold">Affected:</span> ${r.affected_vers}</div>`);
-                    }
-                    if (r.fixing_vers && r.fixing_vers.trim() !== "") {
-                        htmlLines.push(`<div><span class="has-text-weight-semibold">Fixing:</span> ${r.fixing_vers}</div>`);
-                    }
-                    return htmlLines.length > 0 ? htmlLines.join('') : '<div>No range specified</div>';
-                }).join('<hr class="my-1" style="background-color: #dbdbdb; height: 1px;">');
-                rowHtml += `<td class="range-data-cell">${rangeHtml}</td>`;
-            });
-            rangeDataRow.innerHTML = rowHtml;
-            body.appendChild(rangeDataRow);
-        }
-        const foldable = this.getFoldableRanges(item, versions);
-        for (let i = 0; i < versions.length; i++) {
-            const range = foldable.find(r => i >= r.start && i <= r.end);
-            if (range) {
-                const foldKey = `${this.currentIndex}-${range.start}`;
-                let isExpanded = this.expandedFolds.has(foldKey);
-                if (!this.foldAgreementBlocks) {
-                    isExpanded = !this.expandedFolds.has(`${this.currentIndex}-${range.start}-collapsed`);
-                }
-                if (i === range.start) {
-                    const marker = document.createElement('tr');
-                    marker.innerHTML = `<td colspan="${item.advisories.length + 2}" class="folded-row-marker ${isExpanded ? 'is-expanded' : ''}" onclick="app.toggleFold(${range.start})">
-                        <span class="icon is-small"><i class="fa fa-chevron-down"></i></span>
-                        ${isExpanded ? 'Hide' : 'Show'} Consensus Range (${range.end - range.start + 1} versions)
-                    </td>`;
-                    body.appendChild(marker);
-                }
-                if (!isExpanded) {
-                    if (i === range.end) continue;
-                    i = range.end;
-                    continue;
-                }
-            }
-            body.appendChild(this.createRow(versions[i], item));
-        }
-    },
-
-    resetCurrentCuration() {
-        const item = curationItems[this.currentIndex];
-        const versions = item.all_versions || item.all_version;
-        versions.forEach(v => {
-            if (item.partial_curation.affected.includes(v)) {
-                this.userStates[this.currentIndex][v] = 'affected';
-            } else if (item.partial_curation.fixing.includes(v)) {
-                this.userStates[this.currentIndex][v] = 'fixed';
-            } else {
-                this.userStates[this.currentIndex][v] = '?';
-            }
-        });
-        this.renderBody(item, versions);
-    },
-
     renderHeader(item) {
         const header = document.getElementById('table-header');
         header.innerHTML = `
@@ -168,7 +65,7 @@ const app = {
                 <div class="mb-3 advisory-wrapper">
                     <a href="${primaryUrl}" target="_blank" rel="noopener noreferrer" class="has-text-link has-text-weight-bold advisory-link">
                         <span>${advGroup.primary.advisory_uid}</span>
-                        <span class="icon is-small" style="font-size: 0.75rem;"><i class="fa fa-external-link"></i></span>
+                        <span class="icon is-small"><i class="fa fa-external-link"></i></span>
                     </a>
                 </div>
             `;
@@ -207,7 +104,7 @@ const app = {
                                 <span class="tag is-light is-size-7 mb-1">Similar</span>
                                 <a href="${secUrl}" target="_blank" rel="noopener noreferrer" class="has-text-grey-dark has-text-weight-bold advisory-link">
                                     <span>${sec.advisory_uid}</span>
-                                    <span class="icon is-small" style="font-size: 0.75rem;"><i class="fa fa-external-link"></i></span>
+                                    <span class="icon is-small" ><i class="fa fa-external-link"></i></span>
                                 </a>
                             </div>
                             <button class="button is-small is-info is-light mt-auto" onclick="app.pickAdvisory(${groupIdx}, 'secondary', ${secIdx})">Pick This</button>
@@ -299,10 +196,25 @@ const app = {
         }
     },
 
+    resetCurrentCuration() {
+        const item = curationItems[this.currentIndex];
+        const versions = item.all_versions || item.all_version;
+        versions.forEach(v => {
+            if (item.partial_curation.affected.includes(v)) {
+                this.userStates[this.currentIndex][v] = 'affected';
+            } else if (item.partial_curation.fixing.includes(v)) {
+                this.userStates[this.currentIndex][v] = 'fixed';
+            } else {
+                this.userStates[this.currentIndex][v] = '?';
+            }
+        });
+        this.renderBody(item, versions);
+    },
+
     createRow(v, item) {
         const tr = document.createElement('tr');
         const state = this.userStates[this.currentIndex][v];
-        tr.innerHTML = `<td class="has-text-weight-bold ">${v}</td>`;
+        tr.innerHTML = `<td class="has-text-weight-bold">${v}</td>`;
         const userTd = document.createElement('td');
         userTd.className = `curation-cell state-${state} `;
         userTd.innerText = state.toUpperCase();
@@ -315,7 +227,7 @@ const app = {
 
             const primaryState = advGroup.affected.includes(v) ? 'affected' : (advGroup.fixing.includes(v) ? 'fixed' : 'unaffected');
             const td = document.createElement('td');
-            td.className = `advisory-cell state-${primaryState}`;
+            td.className = `state-${primaryState} has-text-centered`;
             td.innerText = primaryState.toUpperCase();
             tr.appendChild(td);
 
@@ -326,7 +238,7 @@ const app = {
 
                     const secState = secAffected.includes(v) ? 'affected' : (secFixing.includes(v) ? 'fixed' : 'unaffected'); 
                     const secTd = document.createElement('td');
-                    secTd.className = `advisory-cell state-${secState}`;
+                    secTd.className = `state-${secState} has-text-centered`;
                     secTd.style.borderLeft = "1px dashed #dbdbdb";
                     secTd.innerText = secState.toUpperCase();
                     tr.appendChild(secTd);