feat: remove status column from uploads table (#1761)

web3-storage · Aug 17, 2022 · 4db3acc · 4db3acc
1 parent 3e29e92
commit 4db3acc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 60 deletions.
diff --git a/packages/website/components/account/filesManager/fileRowItem.js b/packages/website/components/account/filesManager/fileRowItem.js
@@ -1,7 +1,6 @@
 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';
@@ -10,20 +9,12 @@ 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]
  * @property {string} date
  * @property {string} name
  * @property {string} cid
- * @property {string} status
  * @property {string} size
  * @property {string} linkPrefix
  * @property {string | import('react').ReactNode[] | null} storageProviders
@@ -50,12 +41,10 @@ const FileRowItem = props => {
     date,
     name,
     cid,
-    status,
     storageProviders,
     size,
     linkPrefix,
     onSelect,
-    numberOfPins,
     isHeader = false,
     isSelected,
     onDelete,
@@ -75,20 +64,9 @@ 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
@@ -158,18 +136,6 @@ 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}
-        {isHeader ? (
-          <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
@@ -3,10 +3,9 @@
 $base-row-width: 75.125rem;
 $file-select: calculateWidthPercentage(3.5rem, $base-row-width);
 $file-name: calculateWidthPercentage(23rem, $base-row-width);
-$file-cid: calculateWidthPercentage(16rem, $base-row-width);
+$file-cid: calculateWidthPercentage(20rem, $base-row-width);
 $file-availability: calculateWidthPercentage(0rem, $base-row-width);
-$file-pin-status: calculateWidthPercentage(8rem, $base-row-width);
-$file-storage-providers: calculateWidthPercentage(10rem, $base-row-width);
+$file-storage-providers: calculateWidthPercentage(14rem, $base-row-width);
 $file-size: calculateWidthPercentage(8rem, $base-row-width);
 $file-date: auto;
 
@@ -17,10 +16,10 @@ $file-date: auto;
   letter-spacing: 0;
   display: grid;
   position: relative;
-  grid-template-columns: $file-select $file-name $file-cid $file-pin-status $file-storage-providers $file-size $file-date ;
+  grid-template-columns: $file-select $file-name $file-cid $file-storage-providers $file-size $file-date;
   align-items: flex-start;
-  padding: .75rem 2rem;
-  transition: all .2s ease-in-out;
+  padding: 0.75rem 2rem;
+  transition: all 0.2s ease-in-out;
   border-bottom: 0.078125rem solid rgba(white, 0.05);
 
   &:nth-child(even) {
@@ -53,7 +52,7 @@ $file-date: auto;
     word-break: break-word;
     @include fontWeight_Regular;
     @include medium {
-      padding: .5rem .75rem .5rem 1.5rem;
+      padding: 0.5rem 0.75rem 0.5rem 1.5rem;
       justify-content: flex-start;
       border-bottom: 0.078125rem solid rgba(white, 0.05);
       &.file-name {
@@ -179,7 +178,7 @@ $file-date: auto;
       }
       svg.pencil-icon {
         flex-shrink: 0;
-        margin: 4px 0px 0px .5rem;
+        margin: 4px 0px 0px 0.5rem;
         @include hoverSvg;
         @include medium {
           display: none;
@@ -211,7 +210,7 @@ $file-date: auto;
     }
     &-cid {
       padding-right: 2rem;
-      margin-top: -.1rem;
+      margin-top: -0.1rem;
       justify-content: flex-start;
       align-items: center;
       .cid-truncate,
@@ -237,14 +236,6 @@ $file-date: auto;
         padding-right: 1.25rem;
       }
     }
-    &-pin-status {
-      justify-content: flex-start;
-      align-items: center;
-      gap: 0.625rem;
-      @include medium {
-        gap: 0;
-      }
-    }
     &-storage-providers {
       justify-content: flex-start;
       align-items: center;
@@ -255,7 +246,7 @@ $file-date: auto;
         gap: 0;
       }
 
-      a[href*="filfox"] {
+      a[href*='filfox'] {
         @include monospace_Text;
       }
 
@@ -317,7 +308,7 @@ $file-date: auto;
   }
 
   &.files-manager-row-active {
-    background: rgba(0,0,0,0.25);
+    background: rgba(0, 0, 0, 0.25);
   }
 
   // Header overrides

diff --git a/packages/website/components/account/filesManager/filesManager.js b/packages/website/components/account/filesManager/filesManager.js
@@ -18,7 +18,7 @@ import { useTokens } from 'components/contexts/tokensContext';
 import CheckIcon from 'assets/icons/check';
 import SearchIcon from 'assets/icons/search';
 import RefreshIcon from 'assets/icons/refresh';
-import FileRowItem, { PinStatus } from './fileRowItem';
+import FileRowItem from './fileRowItem';
 import GradientBackground from '../../gradientbackground/gradientbackground.js';
 
 const defaultQueryOrder = 'newest';
@@ -363,7 +363,6 @@ const FilesManager = ({ className, content, onFileUpload }) => {
         date={fileRowLabels.date.label}
         name={fileRowLabels.name.label}
         cid={fileRowLabels.cid.label}
-        status={fileRowLabels.status.label}
         storageProviders={currentTab === 'uploaded' ? fileRowLabels.storage_providers.label : null}
         size={fileRowLabels.size.label}
         linkPrefix={linkPrefix}
@@ -404,10 +403,6 @@ const FilesManager = ({ className, content, onFileUpload }) => {
               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
@@ -432,7 +427,6 @@ const FilesManager = ({ className, content, onFileUpload }) => {
               }
               linkPrefix={linkPrefix}
               highlight={{ target: 'name', text: keyword?.toString() || '' }}
-              numberOfPins={item.pins.length}
               isSelected={!!selectedFiles.find(fileSelected => fileSelected === item)}
               onDelete={() => onDeleteSingle(item.cid)}
               isEditingName={item.cid === nameEditingId}