Interactive Client tools implemented client-side. Refactoring of ToolForm into several components

client/src/components/Common/ButtonSpinner.vue

@@ -1,30 +1,25 @@
 <template>
-    <b-button
-        v-if="wait"
-        v-b-tooltip.hover.bottom
-        disabled
-        variant="info"
-        title="Please Wait..."
-        class="d-flex flex-nowrap align-items-center text-nowrap">
+    <b-button v-if="wait" disabled variant="info" class="d-flex flex-nowrap align-items-center text-nowrap">
         <FontAwesomeIcon icon="spinner" class="mr-2" spin />{{ title }}
     </b-button>
     <b-button
         v-else
-        v-b-tooltip.hover.bottom
+        v-b-tooltip.hover.bottom="wait ? '' : tooltip"
+        :disabled="disabled"
         variant="primary"
         class="d-flex flex-nowrap align-items-center text-nowrap"
-        :title="tooltip"
         @click="$emit('onClick')">
-        <FontAwesomeIcon icon="play" class="mr-2" />{{ title }}
+        <FontAwesomeIcon :icon="icon" class="mr-2" />{{ title }}
     </b-button>
 </template>
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { faPlay, faSpinner, faStop } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 library.add(faSpinner);
 library.add(faPlay);
+library.add(faStop);
 
 export default {
     components: {
@@ -39,6 +34,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        icon: {
+            type: String,
+            default: "play",
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
         tooltip: {
             type: String,
             default: null,

client/src/components/Panels/FlexPanel.vue

@@ -156,8 +156,8 @@ watch(position, () => {
     right: 0;
 }
 .interaction-area {
-    margin: -1.5rem;
-    padding: 1.5rem;
+    margin: -1.5rem -1.5rem 0;
+    padding: 1.5rem 1.5rem 0;
     position: absolute;
     z-index: 2;
 }

client/src/components/Panels/ToolBox.vue

@@ -194,7 +194,7 @@ function onToolClick(tool: Tool, evt: Event) {
         if (tool.id === "upload1") {
             evt.preventDefault();
             openGlobalUploadModal();
-        } else if (tool.form_style === "regular") {
+        } else if (tool.form_style === "regular" || tool.model_class === "InteractiveClientTool") {
             evt.preventDefault();
             // encode spaces in tool.id
             const toolId = tool.id;
@@ -333,9 +333,3 @@ function setButtonText() {
         </div>
     </div>
 </template>
-
-<style scoped>
-.toolTitle {
-    overflow-wrap: anywhere;
-}
-</style>

client/src/components/Tool/Buttons/ToolFavoriteButton.vue

@@ -50,7 +50,9 @@ async function onAddFavorite() {
         emit("onSetError", null);
         ariaAlert("added to favorites");
     } catch {
-        emit("onSetError", `Failed to add '${props.id}' to favorites.`);
+        emit("onSetError", {
+            message: `Failed to add '${props.id}' to favorites.`,
+        });
         ariaAlert("failed to add to favorites");
     }
 }
@@ -61,7 +63,9 @@ async function onRemoveFavorite() {
         emit("onSetError", null);
         ariaAlert("removed from favorites");
     } catch {
-        emit("onSetError", `Failed to remove '${props.id}' from favorites.`);
+        emit("onSetError", {
+            message: `Failed to remove '${props.id}' from favorites.`,
+        });
         ariaAlert("failed to remove from favorites");
     }
 }

client/src/components/Tool/Buttons/ToolOptionsButton.vue

@@ -104,6 +104,8 @@ function onLink() {
             <FontAwesomeIcon icon="fa-external-link-alt" /><span v-localize>See in Tool Shed</span>
         </b-dropdown-item>
 
+        <slot name="extra-tool-options-items" />
+
         <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick">
             <span :class="w.icon" />{{ l(w.title) }}
         </b-dropdown-item>

client/src/components/Tool/ToolCard.vue

@@ -1,11 +1,10 @@
 <script setup>
 import Heading from "components/Common/Heading";
-import FormMessage from "components/Form/FormMessage";
 import ToolFooter from "components/Tool/ToolFooter";
 import ToolHelp from "components/Tool/ToolHelp";
 import { getAppRoot } from "onload/loadConfig";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 
@@ -40,14 +39,6 @@ const props = defineProps({
         type: Object,
         required: true,
     },
-    messageText: {
-        type: String,
-        required: true,
-    },
-    messageVariant: {
-        type: String,
-        default: "info",
-    },
     disabled: {
         type: Boolean,
         default: false,
@@ -62,23 +53,14 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(["onChangeVersion", "updatePreferredObjectStoreId"]);
+const emit = defineEmits(["onChangeVersion", "onSetError", "updatePreferredObjectStoreId"]);
 
-function onChangeVersion(v) {
-    emit("onChangeVersion", v);
+function onChangeVersion(newVersion) {
+    emit("onChangeVersion", newVersion);
 }
 
-const errorText = ref(null);
-
-watch(
-    () => props.id,
-    () => {
-        errorText.value = null;
-    }
-);
-
-function onSetError(e) {
-    errorText.value = e;
+function onSetError(errorObj) {
+    emit("onSetError", errorObj);
 }
 
 const { currentUser, isAnonymous } = storeToRefs(useUserStore());
@@ -102,7 +84,7 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
 </script>
 
 <template>
-    <div class="position-relative">
+    <div class="position-relative" itemscope="itemscope" itemtype="https://schema.org/CreativeWork">
         <div class="underlay sticky-top" />
         <div class="tool-header sticky-top bg-secondary px-2 py-1 rounded">
             <div class="d-flex justify-content-between">
@@ -125,7 +107,11 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
                         <ToolOptionsButton
                             :id="props.id"
                             :sharable-url="props.options.sharable_url"
-                            :options="props.options" />
+                            :options="props.options">
+                            <template v-slot:extra-tool-options-items>
+                                <slot name="extra-tool-options-items" />
+                            </template>
+                        </ToolOptionsButton>
                         <b-button
                             v-if="allowObjectStoreSelection"
                             id="tool-storage"
@@ -160,8 +146,6 @@ function onUpdatePreferredObjectStoreId(selectedToolPreferredObjectStoreId) {
         </div>
 
         <div id="tool-card-body">
-            <FormMessage variant="danger" :message="errorText" :persistent="true" />
-            <FormMessage :variant="props.messageVariant" :message="props.messageText" />
             <slot name="body" />
             <div v-if="props.disabled" class="portlet-backdrop" />
         </div>