Add validation to check if packages are installed

Author: agustinbusso

resources/js/admin/logs/components/Logs/Sidebar/Sidebar.vue

@@ -5,8 +5,11 @@
         Logs
       </div>
       <nav class="tw-mt-1">
-        <!-- Email Category -->
-        <div class="tw-mt-3">
+        <!-- Email Category - Only show if email package is installed -->
+        <div
+          v-if="hasEmailPackage"
+          class="tw-mt-3"
+        >
           <button
             v-b-toggle.collapse-email
             class="
@@ -54,15 +57,18 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="isEmailActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+              :class="emailLinkClasses"
             >
               <span class="tw-inline-flex tw-items-center tw-gap-2">Email Start Event</span>
             </RouterLink>
           </b-collapse>
         </div>
 
-        <!-- Agents Category -->
-        <div class="tw-mt-3">
+        <!-- Agents Category - Only show if AI package is installed -->
+        <div
+          v-if="hasAiPackage"
+          class="tw-mt-3"
+        >
           <button
             v-b-toggle.collapse-agents
             class="
@@ -110,7 +116,7 @@
                 tw-text-base
                 tw-cursor-pointer
               "
-              :class="isAgentsActive ? 'tw-bg-blue-50 tw-font-semibold tw-text-blue-500' : 'tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50'"
+              :class="agentsLinkClasses"
             >
               <span class="tw-inline-flex tw-items-center tw-gap-2">FlowGenie Agents logs</span>
             </RouterLink>
@@ -122,52 +128,69 @@
 </template>
 
 <script>
+import { hasEmailPackage, hasAiPackage } from "../routes";
+
 export default {
-  name: 'LogsSidebar',
+  name: "LogsSidebar",
   data() {
     return {
       collapseStates: {
-        email: this.$route.path.startsWith('/email'),
-        agents: this.$route.path.startsWith('/agents'),
+        email: this.$route.path.startsWith("/email"),
+        agents: this.$route.path.startsWith("/agents"),
       },
     };
   },
   computed: {
+    hasEmailPackage() {
+      return hasEmailPackage();
+    },
+    hasAiPackage() {
+      return hasAiPackage();
+    },
     isEmailActive() {
-      return this.$route.path.startsWith('/email');
+      return this.$route.path.startsWith("/email");
     },
     isAgentsActive() {
-      return this.$route.path.startsWith('/agents');
+      return this.$route.path.startsWith("/agents");
+    },
+    emailLinkClasses() {
+      return this.isEmailActive
+        ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
+        : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
+    },
+    agentsLinkClasses() {
+      return this.isAgentsActive
+        ? "tw-bg-blue-50 tw-font-semibold tw-text-blue-500"
+        : "tw-font-medium tw-text-zinc-700 hover:tw-bg-zinc-50";
     },
   },
   watch: {
     // Auto-expand the category when navigating to it
-    '$route.path': {
+    "$route.path": {
       handler(path) {
-        if (path.startsWith('/agents') && !this.collapseStates.agents) {
-          this.$root.$emit('bv::toggle::collapse', 'collapse-agents');
+        if (path.startsWith("/agents") && !this.collapseStates.agents) {
+          this.$root.$emit("bv::toggle::collapse", "collapse-agents");
         }
-        if (path.startsWith('/email') && !this.collapseStates.email) {
-          this.$root.$emit('bv::toggle::collapse', 'collapse-email');
+        if (path.startsWith("/email") && !this.collapseStates.email) {
+          this.$root.$emit("bv::toggle::collapse", "collapse-email");
         }
       },
       immediate: true,
     },
   },
   mounted() {
     // Listen for collapse events to update icon rotation
-    this.$root.$on('bv::collapse::state', (id, state) => {
-      if (id === 'collapse-email') {
+    this.$root.$on("bv::collapse::state", (id, state) => {
+      if (id === "collapse-email") {
         this.collapseStates.email = state;
-      } else if (id === 'collapse-agents') {
+      } else if (id === "collapse-agents") {
         this.collapseStates.agents = state;
       }
     });
   },
   beforeDestroy() {
     // Clean up event listener
-    this.$root.$off('bv::collapse::state');
+    this.$root.$off("bv::collapse::state");
   },
 };
 </script>
-

resources/js/admin/logs/components/Logs/routes.js

@@ -1,41 +1,92 @@
-import { LogTable } from './LogTable';
+import { LogTable } from "./LogTable";
 
 export default {};
 
+/**
+ * Check if a package is installed
+ * @param {string} packageName - The package name to check
+ * @returns {boolean}
+ */
+const isPackageInstalled = (packageName) => window.ProcessMaker?.packages?.includes(packageName);
+
+/**
+ * Check if email start event package is installed
+ * @returns {boolean}
+ */
+export const hasEmailPackage = () => isPackageInstalled("package-email-start-event");
+
+/**
+ * Check if AI package is installed
+ * @returns {boolean}
+ */
+export const hasAiPackage = () => isPackageInstalled("package-ai");
+
+/**
+ * Determine the default redirect path based on installed packages
+ * @returns {string}
+ */
+const getDefaultRedirectPath = () => {
+  if (hasEmailPackage()) {
+    return "/email/errors";
+  }
+  if (hasAiPackage()) {
+    return "/agents/design";
+  }
+  // Fallback - shouldn't happen if menu visibility is correct
+  return "/email/errors";
+};
+
 export const routes = [
   {
-    name: 'logs.index',
-    path: '/',
-    redirect: '/email/errors',
+    name: "logs.index",
+    path: "/",
+    beforeEnter: (to, from, next) => {
+      next(getDefaultRedirectPath());
+    },
   },
   // Email logs routes
   {
-    name: 'logs.email',
-    path: '/email/:logType',
+    name: "logs.email",
+    path: "/email/:logType",
     component: LogTable,
     props(route) {
       return {
-        category: 'email',
+        category: "email",
         logType: route.params.logType,
       };
     },
+    beforeEnter: (to, from, next) => {
+      if (!hasEmailPackage()) {
+        // Redirect to agents if email package not installed
+        next(hasAiPackage() ? "/agents/design" : "/");
+      } else {
+        next();
+      }
+    },
   },
   // FlowGenie Agents logs routes
   {
-    name: 'logs.agents.redirect',
-    path: '/agents',
-    redirect: '/agents/design',
+    name: "logs.agents.redirect",
+    path: "/agents",
+    redirect: "/agents/design",
   },
   {
-    name: 'logs.agents',
-    path: '/agents/:logType',
+    name: "logs.agents",
+    path: "/agents/:logType",
     component: LogTable,
     props(route) {
       return {
-        category: 'agents',
+        category: "agents",
         logType: route.params.logType,
       };
     },
+    beforeEnter: (to, from, next) => {
+      if (!hasAiPackage()) {
+        // Redirect to email if AI package not installed
+        next(hasEmailPackage() ? "/email/errors" : "/");
+      } else {
+        next();
+      }
+    },
   },
 ];
-