fix: omit Connect actions in UPC when plugin is not installed (#1417)

Removes Connect branding in dropdown when connect plugin is not installed.

Preview of dropdown:
<img width="453" alt="image"
src="https://github.com/user-attachments/assets/b3ba3954-f2d3-4760-a1e2-91556eb43903"
/>

## Summary by CodeRabbit

- **New Features**
- The Notifications Sidebar is now always visible in the user profile,
regardless of plugin installation status.

- **Refactor**
  - Improved detection logic for the connect plugin to enhance accuracy.
- Centralized and standardized the "Settings" link in the user profile
dropdown for consistent user experience.
- The account status section in Connect Settings now only appears when
the connect plugin is installed.
- Updated the Connect page title from "Unraid Connect" to "Unraid API"
for clarity.

- **Chores**
- Extended linting to include Vue files for better code quality
enforcement.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

package.json

@@ -52,7 +52,7 @@
     "pre-commit": "pnpm lint-staged"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
+    "*.{js,jsx,ts,tsx,vue}": [
       "pnpm lint:fix"
     ]
   },

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/Connect.page

@@ -1,5 +1,5 @@
 Menu="ManagementAccess:100"
-Title="Unraid Connect"
+Title="Unraid API"
 Icon="icon-u-globe"
 Tag="globe"
 ---

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/state.php

@@ -146,10 +146,23 @@ class ServerState
 
     private function setConnectValues()
     {
-        if (file_exists('/usr/local/bin/unraid-api')) {
-            $this->connectPluginInstalled = 'dynamix.unraid.net.plg';
+        $apiConfigPath = '/boot/config/plugins/dynamix.my.servers/configs/api.json';
+        if (!file_exists($apiConfigPath)) {
+            return; // plugin is not installed; exit early
         }
-        
+
+        $apiConfig = @json_decode(file_get_contents($apiConfigPath), true);
+        $pluginName = 'unraid-api-plugin-connect'; // name of connect plugin's npm package
+        if ($apiConfig && is_array($apiConfig['plugins'])) {
+            foreach ($apiConfig['plugins'] as $plugin) {
+                // recognize npm version identifiers inside $apiConfig['plugins']
+                if ($plugin === $pluginName || strpos($plugin, $pluginName . '@') === 0) {
+                    $this->connectPluginInstalled = 'dynamix.unraid.net.plg';
+                    break;
+                }
+            }
+        }
+
         // exit early if the plugin is not installed
         if (!$this->connectPluginInstalled) {
             return;
@@ -181,7 +194,7 @@ class ServerState
         $this->myServersFlashCfg = file_exists($flashCfgPath) ? @parse_ini_file($flashCfgPath, true) : [];
         $connectJsonPath = '/boot/config/plugins/dynamix.my.servers/configs/connect.json';
         $connectConfig = file_exists($connectJsonPath) ? @json_decode(file_get_contents($connectJsonPath), true) : [];
-        
+
         // ensure some vars are defined here so we don't have to test them later
         if (empty($connectConfig['apikey'])) {
             $connectConfig['apikey'] = "";

web/__test__/components/UserProfile.test.ts

@@ -294,13 +294,13 @@ describe('UserProfile.ce.vue', () => {
     expect(heading.html()).toContain(initialServerData.description);
   });
 
-  it('conditionally renders notifications sidebar based on connectPluginInstalled', async () => {
+  it('always renders notifications sidebar, regardless of connectPluginInstalled', async () => {
     expect(wrapper.find('[data-testid="notifications-sidebar"]').exists()).toBe(true);
 
     serverStore.connectPluginInstalled = '';
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.find('[data-testid="notifications-sidebar"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="notifications-sidebar"]').exists()).toBe(true);
   });
 
   it('conditionally renders banner based on theme store', async () => {

web/components/ConnectSettings/ConnectSettings.ce.vue

@@ -8,11 +8,14 @@ import { useMutation, useQuery } from '@vue/apollo-composable';
 import { BrandButton, jsonFormsRenderers, Label } from '@unraid/ui';
 import { JsonForms } from '@jsonforms/vue';
 
+import { useServerStore } from '~/store/server';
 // unified settings values are returned as JSON, so use a generic record type
 // import type { ConnectSettingsValues } from '~/composables/gql/graphql';
 
 import { getConnectSettingsForm, updateConnectSettings } from './graphql/settings.query';
 
+const { connectPluginInstalled } = storeToRefs(useServerStore());
+
 /**--------------------------------------------
  *     Settings State & Form definition
  *---------------------------------------------**/
@@ -99,8 +102,10 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
   <div
     class="grid grid-cols-settings items-baseline pl-3 gap-y-6 [&>*:nth-child(odd)]:text-end [&>*:nth-child(even)]:ml-10"
   >
-    <Label>Account Status:</Label>
-    <div v-html="'<unraid-i18n-host><unraid-auth></unraid-auth></unraid-i18n-host>'"></div>
+    <template v-if="connectPluginInstalled">
+      <Label>Account Status:</Label>
+      <div v-html="'<unraid-i18n-host><unraid-auth></unraid-auth></unraid-i18n-host>'"></div>
+    </template>
     <Label>Download Unraid API Logs:</Label>
     <div
       v-html="

web/components/UserProfile.ce.vue

@@ -23,7 +23,7 @@ const callbackStore = useCallbackActionsStore();
 const serverStore = useServerStore();
 
 const { callbackData } = storeToRefs(callbackStore);
-const { name, description, guid, keyfile, lanIp, connectPluginInstalled } = storeToRefs(serverStore);
+const { name, description, guid, keyfile, lanIp } = storeToRefs(serverStore);
 const { bannerGradient, theme } = storeToRefs(useThemeStore());
 
 /**
@@ -134,10 +134,7 @@ onMounted(() => {
 
       <div class="block w-2px h-24px bg-header-text-secondary" />
 
-      <template v-if="connectPluginInstalled">
-        <!-- Keep the sidebar out of staging/prod builds, but easily accessible for development -->
-        <NotificationsSidebar />
-      </template>
+      <NotificationsSidebar />
 
       <UpcDropdownMenu :t="t">
         <template #trigger>

web/components/UserProfile/DropdownContent.vue

@@ -150,15 +150,15 @@ const links = computed((): UserProfileLink[] => {
             title: props.t('Opens Connect in new tab'),
           },
           ...[manageUnraidNetAccount.value],
-          {
-            href: WEBGUI_CONNECT_SETTINGS.toString(),
-            icon: CogIcon,
-            text: props.t('Settings'),
-            title: props.t('Go to Connect plugin settings'),
-          },
           ...signOutAction.value,
         ]
       : [...[manageUnraidNetAccount.value]]),
+    {
+      href: WEBGUI_CONNECT_SETTINGS.toString(),
+      icon: CogIcon,
+      text: props.t('Settings'),
+      title: props.t('Go to API Settings'),
+    },
   ];
 });