[MS] Added an explanation tooltip for sync status in FileDetailsModal

client/src/locales/en-US.json

@@ -602,7 +602,11 @@
             "path": "Path",
             "linkCopied": "Copied",
             "failedToCopy": "Failed to copy"
-        }
+        },
+        "fileSyncOk": "This file is synced with the server.",
+        "fileSyncKo": "This file is not synced with the server.",
+        "folderSyncOk": "This folder is synced with the server.",
+        "folderSyncKo": "This folder is not synced with the server."
     },
     "OrganizationPage": {
         "infoPage": {

client/src/locales/fr-FR.json

@@ -602,7 +602,11 @@
             "path": "Emplacement",
             "linkCopied": "Copié",
             "failedToCopy": "Impossible de copier"
-        }
+        },
+        "fileSyncOk": "Ce fichier est synchronisé avec le serveur.",
+        "fileSyncKo": "Ce fichier n'est pas synchronisé avec le serveur.",
+        "folderSyncOk": "Ce dossier est synchronisé avec le serveur.",
+        "folderSyncKo": "Ce dossier n'est pas synchronisé avec le serveur."
     },
     "OrganizationPage": {
         "infoPage": {

client/src/views/files/FileDetailsModal.vue

@@ -17,6 +17,7 @@
             class="cloud-overlay"
             :class="entry.needSync ? 'cloud-overlay-ko' : 'cloud-overlay-ok'"
             :icon="entry.needSync ? cloudOffline : cloudDone"
+            @click="openTooltip($event, getSyncString())"
           />
           <div class="file-info-basic">
             <ion-text class="file-info-basic__name title-h4">
@@ -103,7 +104,7 @@
 
 <script setup lang="ts">
 import { formatFileSize, getFileIcon, shortenFileName } from '@/common/file';
-import { Clipboard, Folder, MsImage, MsModal, I18n } from 'megashark-lib';
+import { Clipboard, Folder, MsImage, MsModal, openTooltip, I18n } from 'megashark-lib';
 import { EntryStat, EntryStatFile, getSystemPath, WorkspaceHandle } from '@/parsec';
 import { IonButton, IonIcon, IonLabel, IonPage, IonText } from '@ionic/vue';
 import { cloudDone, cloudOffline, copy } from 'ionicons/icons';
@@ -122,6 +123,14 @@ const props = defineProps<{
 
 const copyStatus = ref(CopyStatus.NotCopied);
 
+function getSyncString(): string {
+  if (props.entry.isFile()) {
+    return props.entry.needSync ? 'FileDetails.fileSyncKo' : 'FileDetails.fileSyncOk';
+  } else {
+    return props.entry.needSync ? 'FileDetails.folderSyncKo' : 'FileDetails.folderSyncOk';
+  }
+}
+
 async function copyPath(): Promise<void> {
   const fullPathResult = await getSystemPath(props.workspaceHandle, props.entry.path);
 
@@ -159,6 +168,7 @@ async function copyPath(): Promise<void> {
   position: relative;
 
   .cloud-overlay {
+    cursor: pointer;
     position: absolute;
     font-size: 1rem;
     background: var(--parsec-color-light-secondary-background);

client/tests/pw/e2e/file_details.spec.ts

@@ -46,13 +46,6 @@ for (const testData of TEST_DATA) {
     await expect(modal.locator('.ms-modal-header__title ')).toHaveText(new RegExp(`^Details on ${nameMatcher}$`));
     await expect(modal.locator('.file-info-basic__edit')).toHaveText(/^Updated: [A-Za-z]{3} \d{1,2}, 20[0-9]{2}$/);
 
-    const icon = modal.locator('.cloud-overlay');
-    if (isSynced) {
-      await expect(icon).toHaveTheClass('cloud-overlay-ok');
-    } else {
-      await expect(icon).toHaveTheClass('cloud-overlay-ko');
-    }
-
     const details = modal.locator('.file-info-details-item');
     await expect(details).toHaveCount(testData.isFile ? 3 : 2);
     await expect(details.nth(0).locator('.file-info-details-item__title')).toHaveText('Created');
@@ -94,6 +87,22 @@ for (const testData of TEST_DATA) {
 
     const filePath = await connected.evaluate(() => navigator.clipboard.readText());
     expect(filePath).toMatch(new RegExp(`^/home/${nameMatcher}$`));
+
+    const icon = modal.locator('.cloud-overlay');
+    const syncPopover = connected.locator('.tooltip-popover');
+    await icon.click();
+    await expect(syncPopover).toBeVisible();
+    if (isSynced) {
+      await expect(icon).toHaveTheClass('cloud-overlay-ok');
+      await expect(syncPopover).toHaveText(
+        testData.isFile ? 'This file is synced with the server.' : 'This folder is synced with the server.',
+      );
+    } else {
+      await expect(icon).toHaveTheClass('cloud-overlay-ko');
+      await expect(syncPopover).toHaveText(
+        testData.isFile ? 'This file is not synced with the server.' : 'This folder is not synced with the server.',
+      );
+    }
   });
 }
 

newsfragments/8725.misc.rst

@@ -0,0 +1 @@
+Added an explanation tooltip for the server synchronization status in the file details