[MS] Show modal hidden workspace (#11711)

* [MS] Show modal to confirm hiding workspace and unmount it

---------

Co-authored-by: Maxime Grandcolas <[email protected]>
Co-authored-by: fabienSvstr <[email protected]>

Author: 3 people

client/src/components/sidebar/SidebarWorkspaceItem.vue

@@ -10,6 +10,11 @@
     @contextmenu="onContextMenu"
   >
     <div class="sidebar-item-workspace">
+      <ion-icon
+        v-if="isHidden"
+        :icon="eyeOff"
+        class="sidebar-item-workspace__hide"
+      />
       <ion-text
         class="sidebar-item-workspace__label"
         :title="workspace.currentName"
@@ -30,10 +35,11 @@
 import { WorkspaceInfo } from '@/parsec';
 import { currentRouteIsWorkspaceRoute } from '@/router';
 import { IonIcon, IonItem, IonText } from '@ionic/vue';
-import { ellipsisHorizontal } from 'ionicons/icons';
+import { ellipsisHorizontal, eyeOff } from 'ionicons/icons';
 
 defineProps<{
   workspace: WorkspaceInfo;
+  isHidden: boolean;
 }>();
 
 const emits = defineEmits<{
@@ -69,6 +75,13 @@ async function onContextMenu(event: Event): Promise<void> {
     justify-content: space-between;
     width: 100%;
 
+    &__hide {
+      margin-right: 0.5rem;
+      font-size: 1rem;
+      color: var(--parsec-color-light-primary-30);
+      flex-shrink: 0;
+    }
+
     &__label {
       text-overflow: ellipsis;
       white-space: nowrap;

client/src/components/workspaces/WorkspaceCard.vue

@@ -40,7 +40,6 @@
             :icon="workspace.availableOffline ? cloudDone : cloudOffline"
           />
         </ion-text>
-
         <ion-text
           class="workspace-card-content__size body-sm"
           v-if="false"

client/src/components/workspaces/WorkspaceListItem.vue

@@ -204,6 +204,21 @@ async function onOptionsClick(event: Event): Promise<void> {
   }
 }
 
+.workspace-list-item--hidden {
+  border: 1px solid var(--parsec-color-light-secondary-medium);
+
+  .workspace-list-item-content {
+    opacity: 0.8;
+    filter: brightness(0.8);
+  }
+
+  &:hover {
+    .workspace-list-item-content {
+      background: var(--parsec-color-light-secondary-premiere);
+    }
+  }
+}
+
 .workspace-favorite-icon {
   display: flex;
   align-items: center;

client/src/components/workspaces/utils.ts

@@ -3,30 +3,34 @@
 import { workspaceNameValidator } from '@/common/validators';
 import {
   ClientRenameWorkspaceErrorTag,
+  StartedWorkspaceInfo,
   UserProfile,
   WorkspaceID,
   WorkspaceInfo,
   WorkspaceName,
   WorkspaceRole,
   getClientProfile,
   getSystemPath,
+  getWorkspaceInfo,
   isDesktop,
   mountWorkspace,
   getPathLink as parsecGetPathLink,
   renameWorkspace as parsecRenameWorkspace,
   unmountWorkspace,
 } from '@/parsec';
 import { Routes, navigateTo } from '@/router';
-import { EventDistributor } from '@/services/eventDistributor';
+import { EventDistributor, Events } from '@/services/eventDistributor';
 import { Information, InformationLevel, InformationManager, PresentationMode } from '@/services/informationManager';
 import { recentDocumentManager } from '@/services/recentDocuments';
+import { StorageManager } from '@/services/storageManager';
 import { WorkspaceAttributes } from '@/services/workspaceAttributes';
 import SmallDisplayWorkspaceContextMenu from '@/views/workspaces/SmallDisplayWorkspaceContextMenu.vue';
 import { WorkspaceAction } from '@/views/workspaces/types';
 import WorkspaceContextMenu from '@/views/workspaces/WorkspaceContextMenu.vue';
+import WorkspaceHiddenModal from '@/views/workspaces/WorkspaceHiddenModal.vue';
 import WorkspaceSharingModal from '@/views/workspaces/WorkspaceSharingModal.vue';
 import { modalController, popoverController } from '@ionic/vue';
-import { Clipboard, DisplayState, Translatable, getTextFromUser } from 'megashark-lib';
+import { Answer, Clipboard, DisplayState, MsModalResult, Translatable, askQuestion, getTextFromUser } from 'megashark-lib';
 
 export const WORKSPACES_PAGE_DATA_KEY = 'WorkspacesPage';
 
@@ -121,6 +125,7 @@ export async function openWorkspaceContextMenu(
   workspaceAttributes: WorkspaceAttributes,
   eventDistributor: EventDistributor,
   informationManager: InformationManager,
+  storageManager: StorageManager,
   fromSidebar = false,
   isLargeDisplay = true,
 ): Promise<void> {
@@ -177,7 +182,7 @@ export async function openWorkspaceContextMenu(
         await copyLinkToClipboard(workspace, informationManager);
         break;
       case WorkspaceAction.OpenInExplorer:
-        await openWorkspace(workspace, informationManager);
+        await seeInExplorer(workspace, informationManager, workspaceAttributes, eventDistributor);
         break;
       case WorkspaceAction.Rename:
         await openRenameWorkspaceModal(workspace, informationManager, isLargeDisplay);
@@ -190,10 +195,23 @@ export async function openWorkspaceContextMenu(
         await navigateTo(Routes.History, { query: { documentPath: '/', workspaceHandle: workspace.handle } });
         break;
       case WorkspaceAction.Mount:
-        await showWorkspace(workspace, workspaceAttributes, informationManager);
+        await showWorkspace(workspace, workspaceAttributes, informationManager, eventDistributor);
         break;
       case WorkspaceAction.UnMount:
-        await hideWorkspace(workspace, workspaceAttributes, informationManager);
+        if (isDesktop()) {
+          const refreshWorkspaces = await getWorkspaceInfo(workspace.handle);
+          if (refreshWorkspaces.ok) {
+            await unmountWorkspaceConfirmation(
+              workspaceAttributes,
+              refreshWorkspaces.value,
+              informationManager,
+              eventDistributor,
+              storageManager,
+            );
+          }
+        } else {
+          await hideWorkspace(workspace, workspaceAttributes, informationManager, eventDistributor);
+        }
         break;
       default:
         console.warn('No WorkspaceAction match found');
@@ -202,10 +220,11 @@ export async function openWorkspaceContextMenu(
 }
 
 export async function showWorkspace(
-  workspace: WorkspaceInfo,
+  workspace: WorkspaceInfo | StartedWorkspaceInfo,
   workspaceAttributes: WorkspaceAttributes,
   informationManager: InformationManager,
-): Promise<void> {
+  eventDistributor: EventDistributor,
+): Promise<boolean> {
   let ok = true;
   if (isDesktop()) {
     const result = await mountWorkspace(workspace.handle);
@@ -214,6 +233,8 @@ export async function showWorkspace(
 
   if (ok) {
     workspaceAttributes.removeHidden(workspace.id);
+    await workspaceAttributes.save();
+
     informationManager.present(
       new Information({
         message: {
@@ -224,6 +245,10 @@ export async function showWorkspace(
       }),
       PresentationMode.Toast,
     );
+    await eventDistributor.dispatchEvent(Events.WorkspaceMountpointsSync, {
+      workspaceId: workspace.id,
+      isMounted: true,
+    });
   } else {
     informationManager.present(
       new Information({
@@ -236,12 +261,15 @@ export async function showWorkspace(
       PresentationMode.Toast,
     );
   }
+
+  return ok;
 }
 
 export async function hideWorkspace(
-  workspace: WorkspaceInfo,
+  workspace: WorkspaceInfo | StartedWorkspaceInfo,
   workspaceAttributes: WorkspaceAttributes,
   informationManager: InformationManager,
+  eventDistributor: EventDistributor,
 ): Promise<void> {
   let ok = true;
   if (isDesktop()) {
@@ -251,6 +279,8 @@ export async function hideWorkspace(
 
   if (ok) {
     workspaceAttributes.addHidden(workspace.id);
+    await workspaceAttributes.save();
+
     informationManager.present(
       new Information({
         message: {
@@ -261,6 +291,10 @@ export async function hideWorkspace(
       }),
       PresentationMode.Toast,
     );
+    await eventDistributor.dispatchEvent(Events.WorkspaceMountpointsSync, {
+      workspaceId: workspace.id,
+      isMounted: false,
+    });
   } else {
     informationManager.present(
       new Information({
@@ -275,16 +309,35 @@ export async function hideWorkspace(
   }
 }
 
-async function openWorkspace(workspace: WorkspaceInfo, informationManager: InformationManager): Promise<void> {
-  const result = await getSystemPath(workspace.handle, '/');
+async function seeInExplorer(
+  workspace: WorkspaceInfo,
+  informationManager: InformationManager,
+  workspaceAttributes: WorkspaceAttributes,
+  eventDistributor: EventDistributor,
+): Promise<void> {
+  if (workspaceAttributes.isHidden(workspace.id)) {
+    const answer = await askQuestion(
+      'WorkspacesPage.openInExplorerModal.workspace.title',
+      'WorkspacesPage.openInExplorerModal.workspace.description',
+      {
+        yesText: 'WorkspacesPage.openInExplorerModal.actionConfirm',
+        noText: 'WorkspacesPage.openInExplorerModal.actionCancel',
+      },
+    );
+
+    if (answer === Answer.Yes) {
+      await showWorkspace(workspace, workspaceAttributes, informationManager, eventDistributor);
+    }
+  }
 
+  const result = await getSystemPath(workspace.handle, '/');
   if (!result.ok) {
     await informationManager.present(
       new Information({
         message: { key: 'FoldersPage.open.folderFailed', data: { name: workspace.currentName } },
         level: InformationLevel.Error,
       }),
-      PresentationMode.Modal,
+      PresentationMode.Toast,
     );
   } else {
     window.electronAPI.openFile(result.value);
@@ -329,6 +382,42 @@ async function renameWorkspace(workspace: WorkspaceInfo, newName: WorkspaceName,
   }
 }
 
+async function unmountWorkspaceConfirmation(
+  workspaceAttributes: WorkspaceAttributes,
+  workspace: WorkspaceInfo | StartedWorkspaceInfo,
+  informationManager: InformationManager,
+  eventDistributor: EventDistributor,
+  storageManager: StorageManager,
+): Promise<void> {
+  const config = await storageManager.retrieveConfig();
+
+  if (config.skipWorkspaceHiddenWarning === true) {
+    await hideWorkspace(workspace as WorkspaceInfo, workspaceAttributes, informationManager, eventDistributor);
+    return;
+  }
+
+  const modal = await modalController.create({
+    component: WorkspaceHiddenModal,
+    cssClass: 'workspace-hidden-modal',
+    componentProps: {
+      workspaceName: workspace.currentName,
+    },
+  });
+
+  await modal.present();
+  const { data, role } = await modal.onWillDismiss();
+  await modal.dismiss();
+
+  if (role === MsModalResult.Confirm) {
+    if (data?.skipWorkspaceHiddenWarning === true) {
+      config.skipWorkspaceHiddenWarning = true;
+      await storageManager.storeConfig(config);
+    }
+
+    await hideWorkspace(workspace as WorkspaceInfo, workspaceAttributes, informationManager, eventDistributor);
+  }
+}
+
 async function openRenameWorkspaceModal(
   workspace: WorkspaceInfo,
   informationManager: InformationManager,

client/src/locales/en-US.json

@@ -710,6 +710,34 @@
             "successDesktopShown": "The workspace is now visible in Parsec and your explorer.",
             "successWebShown": "The workspace is now visible in Parsec.",
             "failedShown": "Failed to show the workspace. Please try again."
+        },
+        "workspaceHiddenModal": {
+            "title": "Hide a workspace",
+            "affectedWorkspaces": "You are about to hide the workspace {workspace} and it will no longer be visible from the file explorer.",
+            "info": "You can check “Show hidden workspaces” to show it on Parsec.",
+            "actionConfirm": "Hide workspace",
+            "actionCancel": "Cancel",
+            "noReminder": "Don't remind me again",
+            "showWorkspace": {
+                "toastSuccess": "The workspace {workspace} is now visible.",
+                "toastFailure": "Failed to show the workspace {workspace}. Please try again."
+            },
+            "hideWorkspace": {
+                "toastSuccess": "The workspace {workspace} is now hidden.",
+                "toastFailure": "Failed to hide the workspace {workspace}. Please try again."
+            }
+        },
+        "openInExplorerModal": {
+            "file": {
+                "title": "Failed to open the file in your explorer",
+                "description": "You must make this workspace visible in order to view your file in your explorer."
+            },
+            "workspace": {
+                "title": "Failed to open the workspace in your explorer",
+                "description": "You must make this workspace visible in order to view it from your file explorer."
+            },
+            "actionConfirm": "Make this workspace visible",
+            "actionCancel": "Cancel"
         }
     },
     "FoldersPage": {

client/src/locales/fr-FR.json

@@ -709,6 +709,34 @@
             "successDesktopShown": "L'espace de travail est maintenant visible dans Parsec et votre explorateur.",
             "successWebShown": "L'espace de travail est maintenant visible dans Parsec.",
             "failedShown": "Impossible d'afficher l'espace de travail. Veuillez réessayer."
+        },
+        "workspaceHiddenModal": {
+            "title": "Masquer un espace de travail",
+            "affectedWorkspaces": "Vous êtes sur le point de masquer l'espace de travail {workspace}. Cet espace de travail ne sera plus visible depuis l'explorateur de fichiers.",
+            "info": "Vous pouvez cocher “Afficher les espaces masqués” pour le voir sur Parsec.",
+            "actionConfirm": "Masquer l'espace de travail",
+            "actionCancel": "Annuler",
+            "noReminder": "Ne plus me rappeler",
+            "showWorkspace": {
+                "toastSuccess": "L'espace de travail {workspace} est maintenant visible.",
+                "toastFailure": "Impossible d'afficher l'espace de travail {workspace}. Veuillez réessayer."
+            },
+            "hideWorkspace": {
+                "toastSuccess": "L'espace de travail {workspace} est maintenant masqué.",
+                "toastFailure": "Impossible de masquer l'espace de travail {workspace}. Veuillez réessayer."
+            }
+        },
+        "openInExplorerModal": {
+            "file": {
+                "title": "Impossible d'ouvrir le fichier",
+                "description": "Vous devez rendre visible cet espace de travail pour pouvoir le consulter depuis votre explorateur de fichiers."
+            },
+            "workspace": {
+                "title": "Impossible d'ouvrir l'espace de travail",
+                "description": "Vous devez rendre visible cet espace de travail pour pouvoir le consulter depuis votre explorateur de fichiers."
+            },
+            "actionConfirm": "Rendre cet espace de travail visible",
+            "actionCancel": "Annuler"
         }
     },
     "FoldersPage": {

client/src/parsec/workspace.ts

@@ -249,11 +249,12 @@ export async function mountWorkspace(
   return await libparsec.workspaceMount(workspaceHandle);
 }
 
-export async function unmountWorkspace(workspace: WorkspaceInfo): Promise<Result<null, MountpointUnmountError>> {
+export async function unmountWorkspace(workspace: WorkspaceInfo | StartedWorkspaceInfo): Promise<Result<null, MountpointUnmountError>> {
   let error: MountpointUnmountError | null = null;
 
   for (let i = workspace.mountpoints.length - 1; i >= 0; i--) {
     const result = await libparsec.mountpointUnmount(workspace.mountpoints[i][0]);
+
     if (result.ok) {
       workspace.mountpoints.splice(i, 1);
     } else {