diff --git a/frontend/src/metabase/collections/components/CollectionHeader/CollectionHeader.tsx b/frontend/src/metabase/collections/components/CollectionHeader/CollectionHeader.tsx index bc86a67a8744d8e7cc244440429a28682df4ce6a..4a514926c5e11415692918e187133109e7241d49 100644 --- a/frontend/src/metabase/collections/components/CollectionHeader/CollectionHeader.tsx +++ b/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} diff --git a/frontend/src/metabase/collections/components/CollectionHeader/CollectionUpload.tsx b/frontend/src/metabase/collections/components/CollectionHeader/CollectionUpload.tsx index b37c7a710a66bd2548037c6b709fcc79117fe901..a59783de14652ada01f4a7fa1deee6bbabb94d63 100644 --- a/frontend/src/metabase/collections/components/CollectionHeader/CollectionUpload.tsx +++ b/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> diff --git a/frontend/src/metabase/core/components/Tooltip/Tooltip.styled.tsx b/frontend/src/metabase/core/components/Tooltip/Tooltip.styled.tsx new file mode 100644 index 0000000000000000000000000000000000000000..90fb8e73c734ed6bdf379466c44c41c8ee8a49d4 --- /dev/null +++ b/frontend/src/metabase/core/components/Tooltip/Tooltip.styled.tsx @@ -0,0 +1,15 @@ +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")}; +`; diff --git a/frontend/src/metabase/core/components/Tooltip/index.ts b/frontend/src/metabase/core/components/Tooltip/index.ts index d6006235128b09eda4b66534592be5e9b1a6f1ac..c64b10c49126356d1055f87c4d6f7ae6c3a5eae8 100644 --- a/frontend/src/metabase/core/components/Tooltip/index.ts +++ b/frontend/src/metabase/core/components/Tooltip/index.ts @@ -1 +1,2 @@ export { default } from "./Tooltip"; +export * from "./Tooltip.styled"; diff --git a/frontend/src/metabase/redux/uploads.ts b/frontend/src/metabase/redux/uploads.ts index ad7b36dbf7d8be2ea17c6706e7261293f4c69054..338ad76016ae0f1d0eb2397db3ace60b49ef173c 100644 --- a/frontend/src/metabase/redux/uploads.ts +++ b/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; diff --git a/frontend/src/metabase/redux/uploads.unit.spec.js b/frontend/src/metabase/redux/uploads.unit.spec.js index aaee2922d45e4b69b250b7009c429c6655852e21..a93dbf049573647da6105a30d6bb8043c6361936 100644 --- a/frontend/src/metabase/redux/uploads.unit.spec.js +++ b/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}`, }, });