feat(Upload): remove upload metrics from ApplicationHeader

components/core/ApplicationHeader.js

@@ -209,7 +209,6 @@ export default function ApplicationHeader({ viewer, page, data, onAction }) {
                   <Actions
                     uploadAction={
                       <Upload.Trigger
-                        enableMetrics
                         viewer={viewer}
                         aria-label="Upload"
                         css={STYLES_UPLOAD_BUTTON}

components/core/Upload/index.js

@@ -1,32 +1,26 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
-import * as System from "~/components/system";
-import * as Constants from "~/common/constants";
 import * as Events from "~/common/custom-events";
 
-import { useUploadContext } from "~/components/core/Upload/Provider";
-import { Show } from "~/components/utility/Show";
 import { ModalPortal } from "../ModalPortal";
-import { motion } from "framer-motion";
 import { Provider } from "~/components/core/Upload/Provider";
+import { Popup } from "~/components/core/Upload/popup";
+import { UploadJumper as Jumper } from "~/components/core/Upload/Jumper";
 
-import UploadModal from "~/components/core/Upload/Modal";
-import Popup from "~/components/core/Upload/Popup";
-import DataMeter from "~/components/core/DataMeter";
+import DropIndicator from "~/components/core/Upload/DropIndicator";
 
 /* -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-const Root = ({ onAction, viewer, children }) => {
-  const [{ isUploadModalVisible }] = useUploadContext();
+const Root = ({ children }) => {
   return (
     <>
       {children}
-      <Show when={isUploadModalVisible}>
-        <ModalPortal>
-          <UploadModal viewer={viewer} onAction={onAction} />
-        </ModalPortal>
-      </Show>
+      <ModalPortal>
+        <Jumper />
+        <Popup />
+        <DropIndicator />
+      </ModalPortal>
     </>
   );
 };
@@ -35,20 +29,17 @@ const Root = ({ onAction, viewer, children }) => {
  * Trigger
  * -----------------------------------------------------------------------------------------------*/
 
-const Trigger = ({ enableMetrics = false, viewer, css, children, ...props }) => {
+const Trigger = ({ viewer, css, children, ...props }) => {
   const showUploadModal = () => {
     if (!viewer) {
       Events.dispatchCustomEvent({ name: "slate-global-open-cta", detail: {} });
       return;
     }
-    Events.dispatchCustomEvent({ name: "upload-modal-open" });
+    Events.dispatchCustomEvent({ name: "open-upload-jumper" });
   };
 
   return (
     <div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
-      <Show when={enableMetrics}>
-        <UploadMetrics />
-      </Show>
       <button css={[Styles.BUTTON_RESET, css]} onClick={showUploadModal} {...props}>
         {children}
       </button>
@@ -56,34 +47,4 @@ const Trigger = ({ enableMetrics = false, viewer, css, children, ...props }) =>
   );
 };
 
-const UploadMetrics = () => {
-  const [{ isUploading, totalBytesUploaded, totalBytes }, { showUploadModal }] = useUploadContext();
-  const uploadProgress = Math.floor((totalBytesUploaded / totalBytes) * 100);
-
-  return (
-    isUploading && (
-      <motion.button
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ y: 10, opacity: 0 }}
-        css={Styles.BUTTON_RESET}
-        style={{ marginRight: 14 }}
-        aria-label="Upload"
-        onClick={showUploadModal}
-      >
-        <System.P3 color="textBlack">{uploadProgress}%</System.P3>
-        <DataMeter
-          bytes={totalBytesUploaded}
-          maximumBytes={totalBytes}
-          style={{
-            width: 28,
-            marginTop: 4,
-            backgroundColor: Constants.semantic.bgGrayLight,
-          }}
-        />
-      </motion.button>
-    )
-  );
-};
-
-export { Provider, Root, Popup, Trigger };
+export { Provider, Root, Trigger };