FIX: Checked allowed tag when editing Reviewables (#16713)

While editing a reviewable's tags, the tag chooser did not show the tags
restricted to a specific category. This happened because the tag-chooser
did not pass the categoryId to the server while it was requesting the
list of tags the user can use.

app/assets/javascripts/discourse/app/components/reviewable-item.js

@@ -115,6 +115,11 @@ export default Component.extend({
     return _components[type];
   },
 
+  @discourseComputed("_updates.category_id", "reviewable.category.id")
+  tagCategoryId(updatedCategoryId, categoryId) {
+    return updatedCategoryId || categoryId;
+  },
+
   @bind
   _performConfirmed(action) {
     let reviewable = this.reviewable;
@@ -208,7 +213,7 @@ export default Component.extend({
 
     edit() {
       this.set("editing", true);
-      this._updates = { payload: {} };
+      this.set("_updates", { payload: {} });
     },
 
     cancelEdit() {
@@ -241,7 +246,7 @@ export default Component.extend({
         category = Category.findUncategorized();
       }
 
-      this._updates.category_id = category.id;
+      set(this._updates, "category_id", category.id);
     },
 
     valueChanged(fieldId, event) {

app/assets/javascripts/discourse/app/templates/components/reviewable-field-tags.hbs

@@ -1,4 +1,7 @@
 {{mini-tag-chooser
   value=value
   onChange=(action "onChange")
+  options=(hash
+    categoryId=tagCategoryId
+  )
 }}

app/assets/javascripts/discourse/app/templates/components/reviewable-item.hbs

@@ -30,7 +30,7 @@
             {{component (concat "reviewable-field-" f.type)
               tagName=""
               value=(editable-value reviewable f.id)
-              tagCategoryId=reviewable.category.id
+              tagCategoryId=tagCategoryId
               valueChanged=(action "valueChanged" f.id)
               categoryChanged=(action "categoryChanged")
             }}

app/assets/javascripts/discourse/tests/acceptance/review-test.js

@@ -14,6 +14,21 @@ import { test } from "qunit";
 acceptance("Review", function (needs) {
   needs.user();
 
+  let requests = [];
+
+  needs.pretender((server, helper) => {
+    server.get("/tags/filter/search", (request) => {
+      requests.push(request);
+      return helper.response({
+        results: [
+          { id: "monkey", name: "monkey", count: 1 },
+          { id: "not-monkey", name: "not-monkey", count: 1 },
+          { id: "happy-monkey", name: "happy-monkey", count: 1 },
+        ],
+      });
+    });
+  });
+
   const user = '.reviewable-item[data-reviewable-id="1234"]';
 
   test("It returns a list of reviewable items", async function (assert) {
@@ -160,7 +175,10 @@ acceptance("Review", function (needs) {
     await category.selectRowByValue("6");
 
     let tags = selectKit(`${topic} .payload-tags .mini-tag-chooser`);
+    requests = [];
     await tags.expand();
+    assert.equal(requests.length, 1);
+    assert.equal(requests[0].queryParams.categoryId, "6");
     await tags.fillInFilter("monkey");
     await tags.selectRowByValue("monkey");