Add triage statuses

Author: ksy36

server/frontend/src/components/Buckets/HideBucketBtn.vue

@@ -293,7 +293,7 @@ export default {
       pageSize: 100,
       queryError: "",
       queryStr: JSON.stringify(
-        { op: "AND", bug__isnull: true, hide_until__isnull: true },
+        { op: "AND", bug__isnull: true, triage_status__isnull: true },
         null,
         2,
       ),
@@ -325,7 +325,7 @@ export default {
       return !this.queryStr.includes('"bug__isnull": true');
     },
     showHidden() {
-      return !this.queryStr.includes('"hide_until__isnull": true');
+      return !this.queryStr.includes('"triage_status__isnull": true');
     },
   },
   created() {
@@ -385,15 +385,15 @@ export default {
       if (this.showHidden) {
         this.queryStr = JSON.stringify(
           Object.assign(
-            { hide_until__isnull: true },
+            { triage_status__isnull: true },
             JSON.parse(this.queryStr),
           ),
           null,
           2,
         );
       } else {
         const query = JSON.parse(this.queryStr);
-        delete query["hide_until__isnull"];
+        delete query["triage_status__isnull"];
         this.queryStr = JSON.stringify(query, null, 2);
       }
       this.fetch();

server/frontend/src/components/Buckets/HideBucketBtnForm.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="triage-bucket-dropdown">
+    <a class="btn btn-default" @click="showPanel">
+      {{ currentStatus ? "Change triage status" : "Mark triaged" }}
+    </a>
+
+    <div v-if="isPanelVisible" class="triage-panel">
+      <div class="panel-header">Select triage status:</div>
+      <div class="panel-options">
+        <a
+          v-for="choice in choices"
+          :key="choice.value"
+          class="panel-option"
+          :class="{ 'panel-option-selected': choice.value === currentStatus }"
+          @click="choice.value !== currentStatus && selectStatus(choice.value)"
+        >
+          <span v-if="choice.value === currentStatus">✓ </span
+          >{{ choice.label }}
+        </a>
+        <a
+          v-if="currentStatus"
+          class="panel-option panel-option-unmark"
+          @click="selectStatus(null)"
+          >Unmark triaged</a
+        >
+      </div>
+      <div class="panel-footer">
+        <a class="btn btn-sm btn-default" @click="hidePanel">Cancel</a>
+      </div>
+    </div>
+
+    <div v-if="isPanelVisible" class="panel-backdrop" @click="hidePanel"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TriageBucketDropdown",
+  props: {
+    bucketId: {
+      type: Number,
+      required: true,
+    },
+    currentStatus: {
+      type: String,
+      default: null,
+    },
+    choices: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: ["update"],
+  data() {
+    return {
+      isPanelVisible: false,
+    };
+  },
+  methods: {
+    showPanel() {
+      this.isPanelVisible = true;
+    },
+    hidePanel() {
+      this.isPanelVisible = false;
+    },
+    selectStatus(status) {
+      this.isPanelVisible = false;
+      this.$emit("update", status);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.triage-bucket-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.triage-panel {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 5px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  min-width: 200px;
+}
+
+.panel-header {
+  padding: 10px 15px;
+  border-bottom: 1px solid #eee;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.panel-options {
+  padding: 5px 0;
+}
+
+.panel-option {
+  display: block;
+  padding: 8px 15px;
+  cursor: pointer;
+  color: #333;
+  text-decoration: none;
+}
+
+.panel-option:hover {
+  background-color: #f5f5f5;
+}
+
+.panel-option-selected {
+  background-color: #e6f3ff;
+  color: #0066cc;
+  cursor: default;
+  pointer-events: none;
+}
+
+.panel-option-unmark {
+  border-top: 1px solid #eee;
+  margin-top: 5px;
+  color: #d9534f;
+}
+
+.panel-footer {
+  padding: 8px 15px;
+  border-top: 1px solid #eee;
+  text-align: right;
+}
+
+.panel-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+</style>

server/frontend/src/components/Buckets/List.vue

@@ -32,19 +32,18 @@
             </td>
             <td v-else>
               No bug associated.
-              <span v-if="bucket.hide_until"
-                >Marked triaged until {{ formatDate(bucket.hide_until) }}.</span
+              <span v-if="bucket.triage_status"
+                >Marked triaged as: {{ bucket.triage_status_display }}.</span
               >
               <br v-if="canEdit" /><br v-if="canEdit" />
               <div v-if="canEdit" class="btn-group">
                 <assignbutton :bucket="bucket.id" :providers="providers" />
-                <hidebucketbutton
-                  v-if="!bucket.hide_until"
-                  :bucket="bucket.id"
+                <TriageBucketDropdown
+                  :bucket-id="bucket.id"
+                  :current-status="bucket.triage_status"
+                  :choices="bucket.triage_status_choices || []"
+                  @update="handleTriageStatusUpdate"
                 />
-                <a v-else class="btn btn-default" @click="unhide"
-                  >Unmark triaged</a
-                >
               </div>
               <br v-if="canEdit" /><br v-if="canEdit" />
               <div v-if="canEdit" class="btn-group">
@@ -226,9 +225,9 @@ import {
   assignExternalBug,
   date,
   errorParser,
-  hideBucketUntil,
   jsonPretty,
   parseHash,
+  updateBucketTriageStatus,
 } from "../../helpers";
 import {
   etpStrictReportDescription,
@@ -240,7 +239,7 @@ import * as api from "../../api";
 import PageNav from "../PageNav.vue";
 import ActivityGraph from "../ActivityGraph.vue";
 import AssignBtn from "./AssignBtn.vue";
-import HideBucketBtn from "./HideBucketBtn.vue";
+import TriageBucketDropdown from "./TriageBucketDropdown.vue";
 import ReportPreviewRow from "./ReportPreviewRow.vue";
 
 const pageSize = 50;
@@ -250,7 +249,7 @@ export default {
     activitygraph: ActivityGraph,
     assignbutton: AssignBtn,
     ClipLoader: LoadingSpinner,
-    hidebucketbutton: HideBucketBtn,
+    TriageBucketDropdown,
     PageNav: PageNav,
     ReportPreviewRow: ReportPreviewRow,
   },
@@ -400,15 +399,6 @@ export default {
     submitWatchForm() {
       this.$refs.bucketWatchForm.submit();
     },
-    unhide() {
-      hideBucketUntil(this.bucket.id, null)
-        .then((data) => {
-          window.location.href = data.url;
-        })
-        .catch((err) => {
-          swal("Oops", errorParser(err), "error");
-        });
-    },
     unlink() {
       swal({
         title: "Unlink bug",
@@ -531,6 +521,14 @@ export default {
       searchParams.append("dependson", "tp-breakage");
       openPrefilledBugzillaBug(searchParams);
     },
+    async handleTriageStatusUpdate(newStatus) {
+      try {
+        const data = await updateBucketTriageStatus(this.bucket.id, newStatus);
+        window.location.href = data.url;
+      } catch (err) {
+        swal("Oops", errorParser(err), "error");
+      }
+    },
   },
   watch: {
     currentPage() {

server/frontend/src/components/Buckets/TriageBucketDropdown.vue

@@ -89,9 +89,9 @@ export const assignExternalBug = (bucketId, bugId, providerId) => {
   }
 };
 
-export const hideBucketUntil = (bucketId, dateObj) => {
+export const updateBucketTriageStatus = (bucketId, triageStatus) => {
   const payload = {
-    hide_until: dateObj ? dateObj.toISOString() : null,
+    triage_status: triageStatus,
   };
 
   try {

server/frontend/src/components/Buckets/View.vue

@@ -16,7 +16,7 @@ afterEach(jest.resetAllMocks);
 const defaultQueryStr = `{
   "op": "AND",
   "bug__isnull": true,
-  "hide_until__isnull": true
+  "triage_status__isnull": true
 }`;
 
 test("bucket list has no buckets", async () => {