Merge pull request #16266 from guerler/add_it_activity

Add interactive tools activity

client/src/components/ActivityBar/ActivityBar.vue

@@ -14,6 +14,7 @@ import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import WorkflowBox from "@/components/Panels/WorkflowBox.vue";
 import ActivityItem from "./ActivityItem.vue";
 import ActivitySettings from "./ActivitySettings.vue";
+import InteractiveItem from "./Items/InteractiveItem.vue";
 import UploadItem from "./Items/UploadItem.vue";
 import NotificationItem from "./Items/NotificationItem.vue";
 
@@ -146,14 +147,24 @@ function toggleContextMenu(evt: MouseEvent) {
                     @end="isDragging = false">
                     <div v-for="(activity, activityIndex) in activities" :key="activityIndex">
                         <div v-if="activity.visible">
-                            <upload-item
+                            <UploadItem
                                 v-if="activity.id === 'upload'"
                                 :id="`activity-${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
                                 @click="onToggleSidebar()" />
+                            <InteractiveItem
+                                v-else-if="activity.id === 'interactivetools'"
+                                :id="`activity-${activity.id}`"
+                                :key="activity.id"
+                                :icon="activity.icon"
+                                :is-active="isActiveRoute(activity.to)"
+                                :title="activity.title"
+                                :tooltip="activity.tooltip"
+                                :to="activity.to"
+                                @click="onToggleSidebar()" />
                             <ActivityItem
                                 v-else-if="['tools', 'workflows'].includes(activity.id)"
                                 :id="`activity-${activity.id}`"

client/src/components/ActivityBar/ActivityItem.test.js

@@ -12,6 +12,7 @@ describe("ActivityItem", () => {
             propsData: {
                 id: "activity-test-id",
                 icon: "activity-test-icon",
+                indicator: 0,
                 progressPercentage: 0,
                 progressStatus: null,
                 title: "activity-test-title",
@@ -41,4 +42,18 @@ describe("ActivityItem", () => {
         expect(reference.find(".bg-success").exists()).toBeFalsy();
         expect(reference.find(".bg-danger").exists()).toBeTruthy();
     });
+
+    it("rendering indicator", async () => {
+        const reference = wrapper.find("[id='activity-test-id']");
+        const indicatorSelector = "[data-description='activity indicator']";
+        const noindicator = reference.find(indicatorSelector);
+        expect(noindicator.exists()).toBeFalsy();
+        await wrapper.setProps({ indicator: 1 });
+        const indicator = reference.find(indicatorSelector);
+        expect(indicator.exists()).toBeTruthy();
+        expect(indicator.text()).toBe("1");
+        await wrapper.setProps({ indicator: 1000 });
+        const maxindicator = reference.find(indicatorSelector);
+        expect(maxindicator.text()).toBe("99");
+    });
 });

client/src/components/ActivityBar/ActivityItem.vue

@@ -15,7 +15,7 @@ export interface Props {
     id: string;
     title?: string;
     icon?: string | object;
-    indicator?: boolean;
+    indicator?: number;
     isActive?: boolean;
     tooltip?: string;
     tooltipPlacement?: string;
@@ -28,7 +28,7 @@ export interface Props {
 const props = withDefaults(defineProps<Props>(), {
     title: undefined,
     icon: "question",
-    indicator: false,
+    indicator: 0,
     isActive: false,
     options: undefined,
     progressPercentage: 0,
@@ -71,15 +71,17 @@ function onClick(evt: MouseEvent): void {
                     </span>
                     <span class="position-relative">
                         <div class="nav-icon">
-                            <span v-if="indicator" class="nav-indicator" />
+                            <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
+                                {{ Math.min(indicator, 99) }}
+                            </span>
                             <FontAwesomeIcon :icon="icon" />
                         </div>
                         <TextShort v-if="title" :text="title" class="nav-title" />
                     </span>
                 </b-nav-item>
             </div>
         </template>
-        <div class="px-2 py-1">
+        <div class="text-center px-2 py-1">
             <small v-if="tooltip">{{ tooltip | l }}</small>
             <small v-else>No tooltip available for this item</small>
             <div v-if="options" class="nav-options p-1">
@@ -102,13 +104,18 @@ function onClick(evt: MouseEvent): void {
 }
 
 .nav-indicator {
-    position: absolute;
-    top: 0px;
-    left: 2.2rem;
-    width: 0.6rem;
-    height: 0.6rem;
-    border-radius: 50%;
+    align-items: center;
     background: $brand-danger;
+    border-radius: 50%;
+    color: $brand-light;
+    display: flex;
+    font-size: 0.7rem;
+    justify-content: center;
+    left: 2.2rem;
+    height: 1.2rem;
+    position: absolute;
+    top: -0.3rem;
+    width: 1.2rem;
 }
 
 .nav-item {

client/src/components/ActivityBar/Items/InteractiveItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useEntryPointStore } from "@/stores/entryPointStore";
+import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+
+const { entryPoints } = storeToRefs(useEntryPointStore());
+
+const totalCount = computed(() => entryPoints.value.length);
+
+export interface Props {
+    id: string;
+    title: string;
+    icon: string;
+    isActive: boolean;
+    to: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "click"): void;
+}>();
+
+const tooltip = computed(() =>
+    totalCount.value === 1
+        ? `You currently have 1 active interactive tool`
+        : `You currently have ${totalCount.value} active interactive tools`
+);
+</script>
+
+<template>
+    <ActivityItem
+        v-if="totalCount > 0"
+        :id="id"
+        :icon="icon"
+        :indicator="totalCount"
+        :is-active="isActive"
+        :title="title"
+        :tooltip="tooltip"
+        :to="to"
+        @click="emit('click')" />
+</template>

client/src/components/ActivityBar/Items/NotificationItem.vue

@@ -31,7 +31,7 @@ const tooltip = computed(() =>
     <ActivityItem
         :id="id"
         :icon="icon"
-        :indicator="!!totalUnreadCount"
+        :indicator="totalUnreadCount"
         :is-active="isActive"
         :title="title"
         :tooltip="tooltip"

client/src/components/plugins/icons.js

@@ -28,6 +28,7 @@ import {
     faCog,
     faHdd,
     faInfoCircle,
+    faLaptop,
     faList,
     faLink,
     faLock,
@@ -42,6 +43,7 @@ import {
     faSitemap,
     faStream,
     faTags,
+    faTools,
     faTrash,
     faTrashRestore,
     faExclamationTriangle,
@@ -78,6 +80,7 @@ library.add(
     faCog,
     faHdd,
     faInfoCircle,
+    faLaptop,
     faLink,
     faList,
     faLock,
@@ -92,6 +95,7 @@ library.add(
     faSitemap,
     faStream,
     faTags,
+    faTools,
     faTrash,
     faTrashRestore,
     faExclamationTriangle,

client/src/stores/activitySetup.ts

@@ -5,6 +5,17 @@ import { type Activity } from "@/stores/activityStore";
 import { type EventData } from "@/stores/eventStore";
 
 export const Activities = [
+    {
+        description: "Displays currently active interactive tools (ITs), if these are enabled by the administrator.",
+        icon: "fa-laptop",
+        id: "interactivetools",
+        mutable: false,
+        optional: true,
+        title: "Interactive Tools",
+        tooltip: "Show active interactive tools",
+        to: "/interactivetool_entry_points/list",
+        visible: true,
+    },
     {
         description: "Opens a data dialog, allowing uploads from URL, pasted content or disk.",
         icon: "upload",