From 0e79a44222f848b7ac64103a344621ea4f004bb3 Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Fri, 29 Oct 2021 18:05:04 +0200
Subject: [PATCH] refactor bookmark fix
 https://github.com/galaxyproject/galaxy/issues/12769

---
 .../src/components/Workflow/WorkflowList.vue  | 46 +++++++++++--------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowList.vue b/client/src/components/Workflow/WorkflowList.vue
index 01b0e3f6e3f..f4adeb7fc14 100644
--- a/client/src/components/Workflow/WorkflowList.vue
+++ b/client/src/components/Workflow/WorkflowList.vue
@@ -59,10 +59,12 @@
                         <font-awesome-icon v-if="row.item.shared" v-b-tooltip.hover title="Shared" icon="share-alt" />
                     </template>
                     <template v-slot:cell(show_in_tool_panel)="row">
-                        <b-form-checkbox
-                            :checked="row.item.show_in_tool_panel"
-                            @change="(checked) => bookmarkWorkflow(row.item, checked)"
-                        />
+                        <b-link @click="bookmarkWorkflow(row.item, true)" v-if="row.item.show_in_tool_panel">
+                            <font-awesome-icon :icon="['fas', 'star']" />
+                        </b-link>
+                        <b-link @click="bookmarkWorkflow(row.item, false)" v-else>
+                            <font-awesome-icon :icon="['far', 'star']" />
+                        </b-link>
                     </template>
                     <template v-slot:cell(update_time)="data">
                         <UtcDate :date="data.value" mode="elapsed" />
@@ -89,23 +91,17 @@
 import _l from "utils/localization";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import { faGlobe } from "@fortawesome/free-solid-svg-icons";
-import { faShareAlt } from "@fortawesome/free-solid-svg-icons";
-
+import { faPlus, faShareAlt, faGlobe, faUpload, faSpinner, faStar } from "@fortawesome/free-solid-svg-icons";
+import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
 import { getAppRoot } from "onload/loadConfig";
 import { Services } from "./services";
 import Tags from "components/Common/Tags";
 import WorkflowDropdown from "./WorkflowDropdown";
 import UtcDate from "components/UtcDate";
+import { getGalaxyInstance } from "app";
+
+library.add(faPlus, faUpload, faSpinner, faGlobe, faShareAlt, farStar, faStar);
 
-library.add(faPlus);
-library.add(faUpload);
-library.add(faSpinner);
-library.add(faGlobe);
-library.add(faShareAlt);
 export default {
     components: {
         FontAwesomeIcon,
@@ -203,8 +199,6 @@ export default {
             window.location = `${this.root}workflows/run?id=${workflow.id}`;
         },
         bookmarkWorkflow: function (workflow, checked) {
-            // This reloads the whole page, so that the workflow appears in the tool panel.
-            // Ideally we would notify only the tool panel of a change
             const id = workflow.id;
             const tags = workflow.tags;
             const data = {
@@ -213,8 +207,22 @@ export default {
             };
             this.services
                 .updateWorkflow(id, data)
-                .then(() => {
-                    window.location = `${getAppRoot()}workflows/list`;
+                .then(({ id, name }) => {
+                    if (checked) {
+                        const indexToRemove = getGalaxyInstance().config.stored_workflow_menu_entries.findIndex(
+                            (workflow) => workflow.id === id
+                        );
+                        getGalaxyInstance().config.stored_workflow_menu_entries.splice(indexToRemove, 1);
+                    } else {
+                        getGalaxyInstance().config.stored_workflow_menu_entries.push({ id: id, name: name });
+                    }
+
+                    this.workflows.find((workflow) => {
+                        if (workflow.id === id) {
+                            workflow.show_in_tool_panel = !checked;
+                            return true;
+                        }
+                    });
                 })
                 .catch((error) => {
                     this.onError(error);