From d7658852b0fc590e2862b0db6f5c0358ac28c43b Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 24 Jan 2022 22:27:55 +0100
Subject: [PATCH] Reveal media file

---
 CHANGELOG.md                                  |  1 +
 src/dashboardWebView/DashboardMessage.ts      |  1 +
 .../components/Media/Item.tsx                 | 33 ++++++++++++-------
 src/listeners/MediaListener.ts                | 16 ++++++++-
 4 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index de070b24..afee4c46 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 
 - Added default field value for content type fields
 - HMR support for panel webview development
+- Added reveal media file action
 - [#187](https://github.com/estruyf/vscode-front-matter/issues/187): Svelte support with the [#227](https://github.com/estruyf/vscode-front-matter/issues/227) features has been added.
 - [#198](https://github.com/estruyf/vscode-front-matter/issues/198): Additional media sort options (alt, caption, and size).
 - [#230](https://github.com/estruyf/vscode-front-matter/issues/230): JSON front matter support added.
diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts
index bc064e91..f7e4cab3 100644
--- a/src/dashboardWebView/DashboardMessage.ts
+++ b/src/dashboardWebView/DashboardMessage.ts
@@ -15,6 +15,7 @@ export enum DashboardMessage {
   refreshMedia = 'refreshMedia',
   uploadMedia = 'uploadMedia',
   deleteMedia = 'deleteMedia',
+  revealMedia = 'revealMedia',
   insertPreviewImage = 'insertPreviewImage',
   updateMediaMetadata = 'updateMediaMetadata',
   createMediaFolder = 'createMediaFolder',
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 22dc9d76..35d5c6e8 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -1,6 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { ClipboardIcon, CodeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
+import { ClipboardIcon, CodeIcon, EyeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useEffect } from 'react';
@@ -108,6 +108,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     setShowAlert(true);
   };
 
+  const revealMedia = () => {
+    Messenger.send(DashboardMessage.revealMedia, {
+      file: media.fsPath,
+      folder: selectedFolder
+    });
+  };
+
   const confirmDeletion = () => {
     Messenger.send(DashboardMessage.deleteMedia, {
       file: media.fsPath,
@@ -243,15 +250,15 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                         onClick={copyToClipboard}>
                         <ClipboardIcon className={`h-5 w-5`} aria-hidden="true" />
                       </QuickAction>
-
-                      <QuickAction 
-                        title='Delete media file'
-                        onClick={deleteMedia}>
-                        <TrashIcon className={`h-5 w-5`} aria-hidden="true" />
-                      </QuickAction>
                     </>
                   )
                 }
+
+                <QuickAction 
+                  title='Delete media file'
+                  onClick={deleteMedia}>
+                  <TrashIcon className={`h-5 w-5`} aria-hidden="true" />
+                </QuickAction>
               </div>
 
               <Menu as="div" className="relative z-10 inline-block text-left  h-5">
@@ -287,13 +294,17 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                           onClick={copyToClipboard} />
 
                         { customScriptActions() }
-
-                        <MenuItem 
-                          title={`Delete`}
-                          onClick={deleteMedia} />
                       </>
                     )
                   }
+
+                  <MenuItem 
+                    title={`Reveal media`}
+                    onClick={revealMedia} />
+
+                  <MenuItem 
+                    title={`Delete`}
+                    onClick={deleteMedia} />
                 </MenuItems>
               </Menu>
             </div>
diff --git a/src/listeners/MediaListener.ts b/src/listeners/MediaListener.ts
index 1640dbec..f85dcaa8 100644
--- a/src/listeners/MediaListener.ts
+++ b/src/listeners/MediaListener.ts
@@ -3,8 +3,9 @@ import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { SortingOption } from '../dashboardWebView/models';
-import { commands } from 'vscode';
+import { commands, env, Uri } from 'vscode';
 import { COMMAND_NAME } from '../constants';
+import * as os from 'os';
 
 
 export class MediaListener extends BaseListener {
@@ -28,6 +29,9 @@ export class MediaListener extends BaseListener {
       case DashboardMessage.deleteMedia:
         this.delete(msg?.data);
         break;
+      case DashboardMessage.revealMedia:
+        this.openFileInFinder(msg?.data?.file);
+        break;
       case DashboardMessage.insertPreviewImage:
         MediaHelpers.insertMediaToMarkdown(msg?.data);
         break;
@@ -51,6 +55,16 @@ export class MediaListener extends BaseListener {
     this.sendMsg(DashboardCommand.media, files);
   }
 
+  private static openFileInFinder(file: string) {
+    if (file) {
+      if (os.type() === "Linux" && env.remoteName?.toLowerCase() === "wsl") {
+        commands.executeCommand('remote-wsl.revealInExplorer', Uri.parse(file));
+      } else {
+        commands.executeCommand('revealFileInOS', Uri.parse(file));
+      }
+    }
+  }
+
   /**
    * Store the file and send a message after multiple uploads
    * @param data