feat: add Nautilus availability check and corresponding UI banner

Author: egalvis27

src/apps/main/interface.d.ts

@@ -157,6 +157,7 @@ export interface IElectronAPI {
   onBackupProgress(func: (value: number) => void): () => void;
   startRemoteSync(): Promise<void>;
   getUpdateStatus(): Promise<{ version: string } | null>;
+  getNautilusAvailability(): Promise<boolean>;
   onUpdateAvailable(callback: (info: { version: string }) => void): () => void;
   getRemoteSyncStatus(): Promise<import('./remote-sync/helpers').RemoteSyncStatus>;
   onRemoteSyncStatusChange(callback: (status: import('./remote-sync/helpers').RemoteSyncStatus) => void): () => void;

src/apps/main/preload.d.ts

@@ -218,6 +218,7 @@ declare interface Window {
       getDiskSpace: () => Promise<number>;
     };
     getUpdateStatus(): Promise<{ version: string } | null>;
+    getNautilusAvailability(): Promise<boolean>;
     onUpdateAvailable(callback: (info: { version: string }) => void): () => void;
   };
 }

src/apps/main/preload.js

@@ -409,6 +409,9 @@ contextBridge.exposeInMainWorld('electron', {
   getUpdateStatus() {
     return ipcRenderer.invoke('get-update-status');
   },
+  getNautilusAvailability() {
+    return ipcRenderer.invoke('get-nautilus-availability');
+  },
   onUpdateAvailable(callback) {
     const eventName = 'update-available';
     const callbackWrapper = (_, info) => callback(info);

src/apps/renderer/localize/locales/en.json

@@ -108,6 +108,10 @@
       "message": "We are having issues mounting your Internxt Drive, try unmounting it manually and starting the app again"
     },
     "banners": {
+      "nautilus-unavailable": {
+        "body": "File explorer not supported. Some features may not work properly.",
+        "action": "Learn more"
+      },
       "update-available": {
         "body": "A new version is available.",
         "action": "Download update"
@@ -434,4 +438,4 @@
     "ctaUpgrade": "Upgrade plan",
     "plan": "{{planName}} -> up to {{planMaxFileSize}}"
   }
-}
+}

src/apps/renderer/localize/locales/es.json

@@ -108,6 +108,10 @@
       "message": "Estamos teniendo problemas al montar tu unidad Internxt. Intenta desmontarla manualmente y luego reiniciar la aplicación."
     },
     "banners": {
+      "nautilus-unavailable": {
+        "body": "Explorador de archivos no compatible. Algunas funciones pueden no funcionar correctamente.",
+        "action": "Más información"
+      },
       "update-available": {
         "body": "Hay una nueva versión disponible.",
         "action": "Descargar actualización"
@@ -434,4 +438,4 @@
     "ctaUpgrade": "Mejorar plan",
     "plan": "{{planName}} -> hasta {{planMaxFileSize}}"
   }
-}
+}

src/apps/renderer/localize/locales/fr.json

@@ -108,6 +108,10 @@
       "message": "Nous rencontrons des problèmes pour monter votre disque Internxt. Essayez de le démonter manuellement et de relancer l'application. "
     },
     "banners": {
+      "nautilus-unavailable": {
+        "body": "Explorateur de fichiers non pris en charge. Certaines fonctionnalités peuvent ne pas fonctionner correctement.",
+        "action": "En savoir plus"
+      },
       "update-available": {
         "body": "Une nouvelle version est disponible.",
         "action": "Télécharger la mise à jour"
@@ -434,4 +438,4 @@
     "ctaUpgrade": "Mettre à jour le plan",
     "plan": "{{planName}} -> jusqu'à {{planMaxFileSize}}"
   }
-}
+}

src/apps/renderer/pages/Widget/InfoBanners/Banners/NautilusUnavailable.test.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { NautilusUnavailable } from './NautilusUnavailable';
+
+describe('NautilusUnavailable', () => {
+  beforeEach(() => {
+    vi.mocked(window.electron.getNautilusAvailability).mockResolvedValue(true);
+  });
+
+  it('renders nothing when Nautilus is available', async () => {
+    const { container } = render(<NautilusUnavailable />);
+
+    await waitFor(() => {
+      expect(window.electron.getNautilusAvailability).toHaveBeenCalledTimes(1);
+    });
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders the warning banner when Nautilus is not available', async () => {
+    vi.mocked(window.electron.getNautilusAvailability).mockResolvedValue(false);
+
+    render(<NautilusUnavailable />);
+
+    await waitFor(() => {
+      expect(screen.getByText('widget.banners.nautilus-unavailable.body')).toBeInTheDocument();
+    });
+  });
+
+  it('dismisses the warning banner when the X button is clicked', async () => {
+    vi.mocked(window.electron.getNautilusAvailability).mockResolvedValue(false);
+
+    render(<NautilusUnavailable />);
+
+    await waitFor(() => {
+      expect(screen.getByText('widget.banners.nautilus-unavailable.body')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByLabelText('Dismiss'));
+
+    expect(screen.queryByText('widget.banners.nautilus-unavailable.body')).not.toBeInTheDocument();
+  });
+});

src/apps/renderer/pages/Widget/InfoBanners/Banners/NautilusUnavailable.tsx

@@ -0,0 +1,39 @@
+import { Warning, X } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
+import { useTranslationContext } from '../../../../context/LocalContext';
+
+export function NautilusUnavailable() {
+  const [isNautilusAvailable, setIsNautilusAvailable] = useState(true);
+  const [dismissed, setDismissed] = useState(false);
+  const { translate } = useTranslationContext();
+
+  useEffect(() => {
+    window.electron
+      .getNautilusAvailability()
+      .then((isAvailable) => {
+        setIsNautilusAvailable(isAvailable);
+      })
+      .catch(() => {
+        setIsNautilusAvailable(true);
+      });
+  }, []);
+
+  if (isNautilusAvailable || dismissed) {
+    return <></>;
+  }
+
+  return (
+    <div className="mx-1 mt-3 flex items-center gap-2.5 rounded-xl border-2 border-[#FFF4CC] bg-[#FFF9E5] px-4 py-2 dark:border-[#7F6B19] dark:bg-[#4C400F]">
+      <Warning size={22} weight="fill" className="shrink-0 text-yellow-dark" />
+      <div className="flex flex-1 flex-col">
+        <p className="text-xs text-gray-80">{translate('widget.banners.nautilus-unavailable.body')}</p>
+      </div>
+      <button
+        onClick={() => setDismissed(true)}
+        className="ml-2 shrink-0 rounded-md p-1 text-gray-50 transition-colors hover:bg-black/5 hover:text-gray-80"
+        aria-label="Dismiss">
+        <X size={18} />
+      </button>
+    </div>
+  );
+}

src/apps/renderer/pages/Widget/InfoBanners/InfoBanners.tsx

@@ -1,9 +1,11 @@
 import { DiscoverBackups } from './Banners/DiscoverBackups';
+import { NautilusUnavailable } from './Banners/NautilusUnavailable';
 import { UpdateAvailable } from './Banners/UpdateAvailable';
 
 export function InfoBanners() {
   return (
     <>
+      <NautilusUnavailable />
       <UpdateAvailable />
       <DiscoverBackups />
     </>

src/backend/features/nautilus-extension/install.ts

@@ -1,5 +1,11 @@
 import { logger } from '@internxt/drive-desktop-core/build/backend';
-import { copyNautilusExtensionFile, deleteNautilusExtensionFile, isInstalled, reloadNautilus } from './service';
+import {
+  copyNautilusExtensionFile,
+  deleteNautilusExtensionFile,
+  isInstalled,
+  reloadNautilus,
+} from './service';
+import { isNautilusAvailable } from './is-nautilus-available';
 
 import configStore from '../../../apps/main/config';
 import { LATEST_NAUTILUS_EXTENSION_VERSION } from './version';
@@ -26,6 +32,10 @@ async function install(): Promise<void> {
 
 export async function installNautilusExtension() {
   try {
+    const canInstall = await isNautilusAvailable();
+
+    if (!canInstall) return;
+
     const installed = await isInstalled();
     const hasLatestsVersion = isUpToDate();