[FIX] web: display "Remove Cover Image" button

Before this commit, when a kanban card has cover image set and the user
would like to remove it, he does not have the "Remove Cover Image"
button displayed when he goes to KanbanCoverImageDialog. The reason
is because the condition on `t-if` set on that button is always
falsy because `coverId` is undefined in the component.

This commit defines getter called `hasCoverImage` to return true
if the record displayed in the kanban card has cover image set.

task-3623759

closes odoo/odoo#150033

X-original-commit: c5d1894804c590dec208755e93d21f249714721d
Signed-off-by: Xavier Bol (xbo) <xbo@odoo.com>

addons/web/static/src/views/kanban/kanban_cover_image_dialog.js

@@ -33,6 +33,10 @@ export class KanbanCoverImageDialog extends Component {
         });
     }
 
+    get hasCoverImage() {
+        return Boolean(this.props.record.data[this.props.fieldName]);
+    }
+
     onUpload([attachment]) {
         if (!attachment) {
             return;

addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml

@@ -31,7 +31,7 @@
                             Upload and Set
                         </button>
                 </FileInput>
-                <button t-if="coverId" class="btn btn-secondary" t-on-click="removeCover">
+                <button t-if="hasCoverImage" class="btn btn-secondary" t-on-click="removeCover">
                     Remove Cover Image
                 </button>
                 <button class="btn btn-secondary" t-on-click="dialog.close">

addons/web/static/tests/views/kanban/kanban_view_tests.js

@@ -11055,7 +11055,7 @@ QUnit.module("Views", (hooks) => {
     );
 
     QUnit.test("set cover image", async (assert) => {
-        assert.expect(10);
+        assert.expect(11);
 
         serviceRegistry.add("dialog", dialogService, { force: true });
         serviceRegistry.add("http", {
@@ -11123,6 +11123,7 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(document.body, ".modal .o_kanban_cover_image");
         assert.containsOnce(document.body, ".modal .btn:contains(Select)");
         assert.containsOnce(document.body, ".modal .btn:contains(Discard)");
+        assert.containsNone(document.body, ".modal .btn:contains(Remove Cover Image)");
 
         await triggerEvent(
             document.body,
@@ -11139,6 +11140,74 @@ QUnit.module("Views", (hooks) => {
         assert.verifySteps(["1", "2"], "should writes on both kanban records");
     });
 
+    QUnit.test("unset cover image", async (assert) => {
+        serverData.models.partner.records[0].displayed_image_id = 1;
+        serverData.models.partner.records[1].displayed_image_id = 2;
+        serviceRegistry.add("dialog", dialogService, { force: true });
+        serviceRegistry.add("http", {
+            start: () => ({}),
+        });
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                `<kanban>
+                    <templates>
+                        <t t-name="kanban-menu">
+                            <a type="set_cover" data-field="displayed_image_id" class="dropdown-item">Set Cover Image</a>
+                        </t>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="name"/>
+                                <div>
+                                    <field name="displayed_image_id" widget="attachment_image"/>
+                                </div>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            async mockRPC(_route, { model, method, args }) {
+                if (model === "partner" && method === "web_save") {
+                    assert.step(String(args[0][0]));
+                    assert.strictEqual(args[1].displayed_image_id, false);
+                }
+            },
+        });
+
+        await toggleRecordDropdown(target, 0);
+        await click(getCard(target, 0), ".oe_kanban_action");
+
+        assert.containsOnce(getCard(target, 0), 'img[data-src*="/web/image/1"]');
+        assert.containsOnce(getCard(target, 1), 'img[data-src*="/web/image/2"]');
+
+        assert.containsOnce(document.body, ".modal .o_kanban_cover_image");
+        assert.containsOnce(document.body, ".modal .btn:contains(Select)");
+        assert.containsOnce(document.body, ".modal .btn:contains(Discard)");
+        assert.containsOnce(document.body, ".modal .btn:contains(Remove Cover Image)");
+
+        await click(document.querySelector(".modal .modal-footer .btn-secondary")); // click on "Remove Cover Image" button
+
+        assert.containsNone(getCard(target, 0), "img", "The cover image should be removed.");
+
+        await toggleRecordDropdown(target, 1);
+        const coverButton = getCard(target, 1).querySelector("a");
+        assert.strictEqual(coverButton.innerText.trim(), "Set Cover Image");
+        await click(coverButton);
+
+        await triggerEvent(
+            document.body,
+            ".modal .o_kanban_cover_image img",
+            "dblclick",
+            { bubbles: true },
+            { skipVisibilityCheck: true }
+        );
+
+        assert.containsNone(getCard(target, 1), "img", "The cover image should be removed.");
+
+        assert.verifySteps(["1", "2"], "should writes on both kanban records");
+    });
+
     QUnit.test("ungrouped kanban with handle field", async (assert) => {
         assert.expect(3);