Update upload button tooltip (#30606)

* update upload button tooltip

* add upload tooltip subtitle

* update test

frontend/src/metabase/collections/components/CollectionHeader/CollectionHeader.tsx

@@ -44,6 +44,9 @@ const CollectionHeader = ({
         onUpdateCollection={onUpdateCollection}
       />
       <HeaderActions data-testid="collection-menu">
+        {canUpload && (
+          <CollectionUpload collection={collection} onUpload={onUpload} />
+        )}
         <CollectionTimeline collection={collection} />
         <CollectionBookmark
           collection={collection}
@@ -51,9 +54,6 @@ const CollectionHeader = ({
           onCreateBookmark={onCreateBookmark}
           onDeleteBookmark={onDeleteBookmark}
         />
-        {canUpload && (
-          <CollectionUpload collection={collection} onUpload={onUpload} />
-        )}
         <CollectionMenu
           collection={collection}
           isAdmin={isAdmin}

frontend/src/metabase/collections/components/CollectionHeader/CollectionUpload.tsx

@@ -3,10 +3,19 @@ import { t } from "ttag";
 
 import type { Collection, CollectionId } from "metabase-types/api";
 
-import Tooltip from "metabase/core/components/Tooltip";
+import Tooltip, {
+  TooltipContainer,
+  TooltipTitle,
+  TooltipSubtitle,
+} from "metabase/core/components/Tooltip";
+
+import { MAX_UPLOAD_STRING } from "metabase/redux/uploads";
+
 import { CollectionHeaderButton } from "./CollectionHeader.styled";
 import { UploadInput } from "./CollectionUpload.styled";
 
+const UPLOAD_FILE_TYPES = [".csv"];
+
 export default function ColllectionUpload({
   collection,
   onUpload,
@@ -22,7 +31,16 @@ export default function ColllectionUpload({
   };
 
   return (
-    <Tooltip tooltip={t`Upload data`}>
+    <Tooltip
+      tooltip={
+        <TooltipContainer>
+          <TooltipTitle>{t`Upload data to ${collection.name}`}</TooltipTitle>
+          <TooltipSubtitle>{t`${UPLOAD_FILE_TYPES.join(
+            ",",
+          )} (${MAX_UPLOAD_STRING} max)`}</TooltipSubtitle>
+        </TooltipContainer>
+      }
+    >
       <label htmlFor="upload-csv">
         <CollectionHeaderButton as="span" to="" icon="arrow_up" />
       </label>

frontend/src/metabase/core/components/Tooltip/Tooltip.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+
+export const TooltipContainer = styled.div`
+  text-align: center;
+`;
+
+export const TooltipTitle = styled.div`
+  font-weight: bold;
+`;
+
+export const TooltipSubtitle = styled.div`
+  font-weight: normal;
+  color: ${color("text-light")};
+`;

frontend/src/metabase/core/components/Tooltip/index.ts

 export { default } from "./Tooltip";
+export * from "./Tooltip.styled";

frontend/src/metabase/redux/uploads.ts

@@ -25,7 +25,7 @@ export const UPLOAD_FILE_TO_COLLECTION_CLEAR =
   "metabase/collection/UPLOAD_FILE_CLEAR";
 
 const MAX_UPLOAD_SIZE = 200 * 1024 * 1024; // 200MB
-const MAX_UPLOAD_STRING = "200MB";
+export const MAX_UPLOAD_STRING = "200mb";
 
 const CLEAR_AFTER_MS = 8000;
 

frontend/src/metabase/redux/uploads.unit.spec.js

@@ -6,6 +6,7 @@ import {
   UPLOAD_FILE_TO_COLLECTION_END,
   UPLOAD_FILE_TO_COLLECTION_ERROR,
   UPLOAD_FILE_TO_COLLECTION_START,
+  MAX_UPLOAD_STRING,
 } from "./uploads";
 
 const now = Date.now();
@@ -124,7 +125,7 @@ describe("csv uploads", () => {
         type: UPLOAD_FILE_TO_COLLECTION_ERROR,
         payload: {
           id: now,
-          message: "You cannot upload files larger than 200MB",
+          message: `You cannot upload files larger than ${MAX_UPLOAD_STRING}`,
         },
       });