fix: add 'Complete' column to uploads table (#1958)

Closes #1787
web3-storage · Oct 5, 2022 · 0d463fb · 0d463fb
1 parent 2d58763
commit 0d463fb
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 8 deletions.
diff --git a/packages/website/components/account/filesManager/fileRowItem.js b/packages/website/components/account/filesManager/fileRowItem.js
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { useMemo, useRef } from 'react';
 import { renderToString } from 'react-dom/server';
+import { BsFillInfoCircleFill } from 'react-icons/bs';
 
 import CheckIcon from '../../../assets/icons/check';
 import CopyIcon from '../../../assets/icons/copy';
@@ -9,6 +10,13 @@ import { addTextToClipboard, formatTimestamp, formatTimestampFull, truncateStrin
 import Tooltip from '../../../modules/zero/components/tooltip/tooltip';
 import AppData from '../../../content/pages/app/account.json';
 
+export const PinStatus = {
+  PINNED: 'Pinned',
+  PINNING: 'Pinning',
+  PIN_QUEUED: 'PinQueued',
+  QUEUING: 'Queuing...',
+};
+
 /**
  * @typedef {Object} FileRowItemProps
  * @property {string} [className]
@@ -21,6 +29,7 @@ import AppData from '../../../content/pages/app/account.json';
  * @property {(e: any)=>void} onSelect
  * @property {(e: any)=>void} onSelect
  * @property {number} [numberOfPins]
+ * @property {string} [status]
  * @property {boolean} [isHeader]
  * @property {boolean} [isSelected]
  * @property {{text: string, target: "name" | "cid"}} [highlight]
@@ -41,10 +50,12 @@ const FileRowItem = props => {
     date,
     name,
     cid,
+    status,
     storageProviders,
     size,
     linkPrefix,
     onSelect,
+    numberOfPins,
     isHeader = false,
     isSelected,
     onDelete,
@@ -64,9 +75,20 @@ const FileRowItem = props => {
   }, [props]);
 
   const fileRowLabels = AppData.page_content.file_manager.table.file_row_labels;
+  const statusMessages = fileRowLabels.status.tooltip;
   /** @type {import('react').RefObject<HTMLTextAreaElement>} */
   const editingNameRef = useRef(null);
   const truncatedCID = useMemo(() => truncateString(cid, 5, '...', 'double'), [cid]);
+  const statusTooltip = useMemo(
+    () =>
+      ({
+        [PinStatus.QUEUING]: statusMessages.queuing,
+        [PinStatus.PIN_QUEUED]: statusMessages.pin_queued,
+        [PinStatus.PINNING]: statusMessages.pinning,
+        [PinStatus.PINNED]: statusMessages.pinned.replace('*numberOfPins*', `${numberOfPins}`),
+      }[status]),
+    [numberOfPins, status, statusMessages]
+  );
 
   return (
     <div
@@ -136,6 +158,21 @@ const FileRowItem = props => {
         <span className="file-row-label medium-down-only">{fileRowLabels.available.label}</span>
         {isHeader ? 'Availability' : 'Available'}
       </span> */}
+      <span className="file-pin-status">
+        <span className="file-row-label medium-down-only">
+          {fileRowLabels.status.label}
+          <Tooltip content={statusMessages.header} />
+        </span>
+        {status && status === PinStatus.PINNED ? 'Complete' : null}
+        {isHeader ? (
+          <>
+            {fileRowLabels.status.label}
+            <Tooltip content={statusMessages.header} />
+          </>
+        ) : (
+          statusTooltip && <Tooltip icon={<BsFillInfoCircleFill />} content={statusTooltip} />
+        )}
+      </span>
       {storageProviders && (
         <span className="file-storage-providers">
           <span className="file-row-label medium-down-only">

diff --git a/packages/website/components/account/filesManager/fileRowItem.scss b/packages/website/components/account/filesManager/fileRowItem.scss
@@ -2,11 +2,12 @@
 
 $base-row-width: 75.125rem;
 $file-select: calculateWidthPercentage(3.5rem, $base-row-width);
-$file-name: calculateWidthPercentage(23rem, $base-row-width);
+$file-name: calculateWidthPercentage(20rem, $base-row-width);
 $file-requestid: calculateWidthPercentage(16rem, $base-row-width);
-$file-cid: calculateWidthPercentage(20rem, $base-row-width);
+$file-cid: calculateWidthPercentage(16rem, $base-row-width);
 $file-availability: calculateWidthPercentage(0rem, $base-row-width);
-$file-storage-providers: calculateWidthPercentage(14rem, $base-row-width);
+$file-pin-status: calculateWidthPercentage(10rem, $base-row-width);
+$file-storage-providers: calculateWidthPercentage(15rem, $base-row-width);
 $file-size: calculateWidthPercentage(8rem, $base-row-width);
 $file-date: auto;
 
@@ -17,7 +18,7 @@ $file-date: auto;
   letter-spacing: 0;
   display: grid;
   position: relative;
-  grid-template-columns: $file-select $file-name $file-cid $file-storage-providers $file-size $file-date;
+  grid-template-columns: $file-select $file-name $file-cid $file-pin-status $file-storage-providers $file-size $file-date;
   align-items: flex-start;
   padding: 0.75rem 2rem;
   transition: all 0.2s ease-in-out;
@@ -65,7 +66,7 @@ $file-date: auto;
 
       .file-row-label {
         @include fontWeight_Semibold;
-        width: 7.5rem;
+        width: 9rem;
         flex-shrink: 0;
         &.delete {
           width: auto;
@@ -234,6 +235,14 @@ $file-date: auto;
         }
       }
     }
+    &-pin-status {
+      justify-content: flex-start;
+      align-items: center;
+      gap: 0.625rem;
+      @include medium {
+        gap: 0;
+      }
+    }
     &-availability {
       padding-right: 2rem;
       @include medium {

diff --git a/packages/website/components/account/filesManager/uploadsTable.js b/packages/website/components/account/filesManager/uploadsTable.js
@@ -15,7 +15,7 @@ import { useUploads } from 'components/contexts/uploadsContext';
 import { useUser } from 'components/contexts/userContext';
 // import SearchIcon from 'assets/icons/search';
 import RefreshIcon from 'assets/icons/refresh';
-import FileRowItem from './fileRowItem';
+import FileRowItem, { PinStatus } from './fileRowItem';
 import GradientBackground from '../../gradientbackground/gradientbackground.js';
 
 const defaultSortBy = 'Date';
@@ -309,6 +309,10 @@ const UploadsTable = ({ content, hidden, onFileUpload, onUpdatingChange, showChe
               date={item.created}
               name={item.name}
               cid={item.cid}
+              status={
+                Object.values(PinStatus).find(status => item.pins.some(pin => status === pin.status)) ||
+                PinStatus.QUEUING
+              }
               storageProviders={
                 Array.isArray(item.deals)
                   ? item.deals

diff --git a/packages/website/content/pages/app/account.json b/packages/website/content/pages/app/account.json
@@ -125,9 +125,9 @@
             "tooltip": "The identifier for this pin request. <a href='https://ipfs.github.io/pinning-services-api-spec/#requestid' target='_blank' rel='noreferrer'>Learn more</a>"
           },
           "status": {
-            "label": "Status",
+            "label": "Complete file",
             "tooltip": {
-              "header": "Reports the status of a file or piece of data stored on the IPFS Cluster. Status might not be fully up-to-date. Data is still available even when in Queued state.",
+              "header": "Indicates whether web3.storage received a complete graph of data (e.g., a full file). \"Complete\" indicates that web3.storage has successfully received your entire upload. If you intentionally uploaded an incomplete graph, ignore this column.",
               "queuing": "",
               "pin_queued": "The upload has been received and is in the queue to be pinned.",
               "pinning": "The upload is being replicated to multiple IPFS nodes.",