Add functionality to delete and download updated data files (#236)

* Add helpers to download/delete/infer MIMEs

* Add icons to top right corner in file tiles

* Update download arrow, none of them look good

* Add a test to see if close and download buttons are there

* Add tests for clicking the close/download buttons

* Update Playwright Snapshots

* Remove some lint

* Use `closeIcon` and `downloadIcon`

Suggested-by: Michał Krassowski <[email protected]>

* Center SVGs inside the file tile actions boxes

* Fix overlay of actions icons over SVG below

* Colour the SVG icons in JE slate blue

* Update Playwright Snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: agriyakhetarpal

src/pages/files.tsx

@@ -8,7 +8,7 @@ import { PageTitle } from '../ui-components/PageTitle';
 import { EverywhereIcons } from '../icons';
 import { FilesWarningBanner } from '../ui-components/FilesWarningBanner';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { LabIcon } from '@jupyterlab/ui-components';
+import { LabIcon, closeIcon, downloadIcon } from '@jupyterlab/ui-components';
 
 /**
  * File type icons mapping function. We currently implement four common file types:
@@ -175,6 +175,86 @@ function FilesApp(props: IFilesAppProps) {
     void refreshListing();
   }, [refreshListing]);
 
+  const downloadFile = React.useCallback(
+    async (model: Contents.IModel) => {
+      try {
+        const fetched = await props.contentsManager.get(model.path, { content: true });
+        if (fetched.type !== 'file') {
+          return;
+        }
+
+        const fmt = (fetched.format ?? 'text') as 'text' | 'base64';
+        const mime = fetched.mimetype ?? inferMimeFromName(model.name);
+
+        let blob: Blob;
+        if (fmt === 'base64') {
+          const b64 = String(fetched.content ?? '');
+          const bytes = atob(b64);
+          const buf = new Uint8Array(bytes.length);
+          for (let i = 0; i < bytes.length; i++) {
+            buf[i] = bytes.charCodeAt(i);
+          }
+          blob = new Blob([buf], { type: mime });
+        } else {
+          blob = new Blob([String(fetched.content ?? '')], { type: mime || 'text/plain' });
+        }
+
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = model.name;
+        document.body.appendChild(a);
+        a.click();
+        requestAnimationFrame(() => {
+          URL.revokeObjectURL(a.href);
+          a.remove();
+        });
+      } catch (err) {
+        await showErrorMessage(
+          'Download failed',
+          `Could not download ${model.name}: ${err instanceof Error ? err.message : String(err)}`
+        );
+      }
+    },
+    [props.contentsManager]
+  );
+
+  const deleteFile = React.useCallback(
+    async (model: Contents.IModel) => {
+      try {
+        await props.contentsManager.delete(model.path);
+        await refreshListing();
+      } catch (err) {
+        await showErrorMessage(
+          'Delete failed',
+          `Could not delete ${model.name}: ${err instanceof Error ? err.message : String(err)}`
+        );
+      }
+    },
+    [props.contentsManager, refreshListing]
+  );
+
+  /**
+   * Infer the MIME type from a file name.
+   * @param name - file name
+   * @returns the MIME type inferred from the file extension, or an empty string if unknown.
+   */
+  function inferMimeFromName(name: string): string {
+    const ext = name.split('.').pop()?.toLowerCase() ?? '';
+    if (ext === 'png') {
+      return 'image/png';
+    }
+    if (ext === 'jpg' || ext === 'jpeg') {
+      return 'image/jpeg';
+    }
+    if (ext === 'csv') {
+      return 'text/csv';
+    }
+    if (ext === 'tsv') {
+      return 'text/tab-separated-values';
+    }
+    return '';
+  }
+
   return (
     <div className="je-FilesApp">
       <FileUploader
@@ -229,7 +309,34 @@ function FilesApp(props: IFilesAppProps) {
                 const fileIcon = getFileIcon(f.name, f.mimetype ?? '');
                 return (
                   <div className="je-FileTile" key={f.path}>
-                    <div className="je-FileTile-box">
+                    <div className="je-FileTile-box je-FileTile-box-hasActions">
+                      <div className="je-FileTile-actions">
+                        {/* Delete (X) button */}
+                        <button
+                          className="je-FileTile-action je-FileTile-action--close"
+                          aria-label={`Delete ${f.name}`}
+                          title="Delete"
+                          onClick={e => {
+                            e.stopPropagation();
+                            void deleteFile(f);
+                          }}
+                        >
+                          <closeIcon.react tag="span" />
+                        </button>
+
+                        {/* Download (↓) button */}
+                        <button
+                          className="je-FileTile-action je-FileTile-action--download"
+                          aria-label={`Download ${f.name}`}
+                          title="Download"
+                          onClick={e => {
+                            e.stopPropagation();
+                            void downloadFile(f);
+                          }}
+                        >
+                          <downloadIcon.react tag="span" />
+                        </button>
+                      </div>
                       <fileIcon.react />
                     </div>
                     <div className="je-FileTile-label">{f.name}</div>

style/base.css

@@ -20,6 +20,7 @@
   --je-scale: 0.85;
   --je-slate-blue: #412c88;
   --je-round-corners: 12px;
+  --je-round-corners-filetiles: 6px;
   --je-font-family: 'Inter', sans-serif;
   --je-dialog-round-corners: 12px;
   --je-cell-height: 40px;

style/files-widget.css

@@ -71,6 +71,12 @@
   height: 48px;
 }
 
+.je-FileTile-actions svg {
+  width: 16px;
+  height: 16px;
+  display: block; /* there is a baseline offset inside the button which I am not sure of */
+}
+
 .je-FileTile-label {
   font-size: calc(var(--je-scale) * 20px);
   font-weight: 500;
@@ -108,3 +114,72 @@
   font-size: calc(var(--je-scale) * 20px);
   line-height: 1.5;
 }
+
+/* Styling for the action buttons on each file tile. */
+
+.je-FileTile-box-hasActions {
+  position: relative;
+  isolation: isolate;
+}
+
+.je-FileTile-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  z-index: 2;
+}
+
+.je-FileTile-box-hasActions:hover .je-FileTile-actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.je-FileTile-action {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--je-slate-blue);
+  border-radius: var(--je-round-corners-filetiles) !important;
+  background: white;
+  color: var(--je-slate-blue);
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  transition:
+    background 120ms ease,
+    transform 60ms ease;
+
+  /* center inline SVG, there is a baseline offset inside the button which I am not sure of */
+  line-height: 0;
+  box-sizing: border-box;
+}
+
+.je-FileTile-action:hover {
+  background: rgb(65 44 136 / 8%); /* a slightly faint tint */
+}
+
+.je-FileTile-action:active {
+  transform: translateY(1px);
+}
+
+.je-FileTile-action > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.je-FileTile-actions svg > path {
+  --jp-inverse-layout-color3: var(--je-slate-blue) !important;
+}

ui-tests/tests/jupytereverywhere.spec.ts

@@ -345,6 +345,63 @@ test.describe('Files', () => {
     await expect(page.locator('.je-FileTile-label', { hasText: 'a-image.jpg' })).toBeVisible();
     await expect(page.locator('.je-FileTile-label', { hasText: 'b-dataset.csv' })).toBeVisible();
   });
+
+  test('Hovering a file tile shows close and download actions', async ({ page }) => {
+    await page.locator('.jp-SideBar').getByTitle('Files').click();
+
+    await page.locator('.je-FileTile').first().click();
+    const jpgPath = path.resolve(__dirname, '../test-files/a-image.jpg');
+    await page.setInputFiles('input[type="file"]', jpgPath);
+
+    const tile = page.locator('.je-FileTile', {
+      has: page.locator('.je-FileTile-label', { hasText: 'a-image.jpg' })
+    });
+    await tile.waitFor();
+
+    // Hover to reveal the actions
+    await tile.hover();
+    await expect(tile.locator('.je-FileTile-action--close')).toBeVisible();
+    await expect(tile.locator('.je-FileTile-action--download')).toBeVisible();
+
+    expect(await tile.screenshot()).toMatchSnapshot('file-tile-actions-visible.png');
+  });
+
+  test('Clicking the X (close) action deletes the file tile', async ({ page }) => {
+    await page.locator('.jp-SideBar').getByTitle('Files').click();
+
+    await page.locator('.je-FileTile').first().click();
+    const jpgPath = path.resolve(__dirname, '../test-files/a-image.jpg');
+    await page.setInputFiles('input[type="file"]', jpgPath);
+
+    const label = page.locator('.je-FileTile-label', { hasText: 'a-image.jpg' });
+    await label.waitFor({ state: 'visible' });
+
+    const tile = page.locator('.je-FileTile', { has: label });
+    await tile.hover();
+    await tile.locator('.je-FileTile-action--close').click();
+
+    await expect(label).toHaveCount(0);
+  });
+
+  test('Clicking the ⭳ (download) action downloads the file', async ({ page }) => {
+    await page.locator('.jp-SideBar').getByTitle('Files').click();
+
+    await page.locator('.je-FileTile').first().click();
+    const csvPath = path.resolve(__dirname, '../test-files/b-dataset.csv');
+    await page.setInputFiles('input[type="file"]', csvPath);
+
+    const label = page.locator('.je-FileTile-label', { hasText: 'b-dataset.csv' });
+    await label.waitFor({ state: 'visible' });
+
+    const tile = page.locator('.je-FileTile', { has: label });
+    await tile.hover();
+    const downloadPromise = page.waitForEvent('download');
+    await tile.locator('.je-FileTile-action--download').click();
+    const download = await downloadPromise;
+
+    const filePath = await download.path();
+    expect(filePath).not.toBeNull();
+  });
 });
 
 test('Should remove View Only banner when the Create Copy button is clicked', async ({ page }) => {