From 5078594f17e0d5dce0c2c233da7ce116c5dc3ae5 Mon Sep 17 00:00:00 2001
From: Ryan Laurie <30528226+iethree@users.noreply.github.com>
Date: Mon, 19 Feb 2024 11:51:22 -0700
Subject: [PATCH] Appends follow-up UI fixes (#38837)
---
frontend/src/metabase-types/api/collection.ts | 9 +++
.../components/ModelUploadModal.tsx | 15 ++++
.../metabase/collections/components/utils.ts | 20 ++++++
.../FileUploadStatus/FileUploadStatus.tsx | 5 +-
.../FileUploadStatus.unit.spec.tsx | 69 +++++++++++++++++--
5 files changed, 111 insertions(+), 7 deletions(-)
create mode 100644 frontend/src/metabase/collections/components/utils.ts
diff --git a/frontend/src/metabase-types/api/collection.ts b/frontend/src/metabase-types/api/collection.ts
index 5a98ab35daa..64d370557e0 100644
--- a/frontend/src/metabase-types/api/collection.ts
+++ b/frontend/src/metabase-types/api/collection.ts
@@ -15,6 +15,14 @@ export type CollectionAuthorityLevel = "official" | null;
export type CollectionType = "instance-analytics" | null;
+export type LastEditInfo = {
+ email: string;
+ first_name: string;
+ last_name: string;
+ id: UserId;
+ timestamp: string;
+};
+
export type CollectionAuthorityLevelConfig = {
type: CollectionAuthorityLevel;
name: string;
@@ -86,6 +94,7 @@ export interface CollectionItem {
moderated_status?: string;
type?: string;
can_write?: boolean;
+ "last-edit-info"?: LastEditInfo;
getIcon: () => { name: IconName };
getUrl: (opts?: Record<string, unknown>) => string;
setArchived?: (isArchived: boolean) => void;
diff --git a/frontend/src/metabase/collections/components/ModelUploadModal.tsx b/frontend/src/metabase/collections/components/ModelUploadModal.tsx
index af75f10dcde..3eeca4344f0 100644
--- a/frontend/src/metabase/collections/components/ModelUploadModal.tsx
+++ b/frontend/src/metabase/collections/components/ModelUploadModal.tsx
@@ -13,6 +13,8 @@ import {
import { useSearchListQuery } from "metabase/common/hooks";
import type { CollectionId, TableId, CardId } from "metabase-types/api";
+import { findLastEditedCollectionItem } from "./utils";
+
enum UploadMode {
append = "append",
create = "create",
@@ -47,6 +49,18 @@ export function ModelUploadModal({
[models.data],
);
+ useEffect(
+ function setDefaultTableId() {
+ if (!uploadableModels?.length) {
+ return;
+ }
+
+ const latestModel = findLastEditedCollectionItem(uploadableModels);
+ setTableId(Number(latestModel.based_on_upload));
+ },
+ [uploadableModels],
+ );
+
const handleUpload = () => {
if (uploadMode === "append" && tableId) {
const modelForTableId = uploadableModels.find(
@@ -93,6 +107,7 @@ export function ModelUploadModal({
<Radio.Group
value={uploadMode}
onChange={(val: UploadMode) => setUploadMode(val)}
+ pl="1px"
>
<Radio label={t`Create a new model`} value={UploadMode.create} />
<Radio
diff --git a/frontend/src/metabase/collections/components/utils.ts b/frontend/src/metabase/collections/components/utils.ts
new file mode 100644
index 00000000000..d66eab92b06
--- /dev/null
+++ b/frontend/src/metabase/collections/components/utils.ts
@@ -0,0 +1,20 @@
+import type { CollectionItem } from "metabase-types/api";
+
+export const findLastEditedCollectionItem = (
+ collectionItems: CollectionItem[],
+) => {
+ return collectionItems.reduce((latest, item) => {
+ if (!latest) {
+ return item;
+ }
+
+ const latestTimestamp = latest?.["last-edit-info"]?.timestamp;
+ const itemTimestamp = item?.["last-edit-info"]?.timestamp;
+
+ if (latestTimestamp && itemTimestamp) {
+ return latestTimestamp > itemTimestamp ? latest : item;
+ }
+
+ return latest;
+ });
+};
diff --git a/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.tsx b/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.tsx
index 125054e3a80..9748b4eff33 100644
--- a/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.tsx
+++ b/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.tsx
@@ -79,7 +79,10 @@ const FileUploadStatusContent = ({
{ id: collectionId, enabled: !isEmpty(collectionId) },
);
- if (!isVisible || tableLoading || collectionLoading) {
+ const isLoading = !!(tableLoading || collectionLoading);
+ const hasData = !!(table || collection);
+
+ if (!isVisible || (isLoading && !hasData)) {
return null;
}
diff --git a/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.unit.spec.tsx b/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.unit.spec.tsx
index 8fb7739549f..5a0695e5b62 100644
--- a/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.unit.spec.tsx
+++ b/frontend/src/metabase/status/components/FileUploadStatus/FileUploadStatus.unit.spec.tsx
@@ -37,6 +37,11 @@ const secondCollection = createMockCollection({
name: "Second Collection",
});
+const thirdCollection = createMockCollection({
+ id: 3,
+ name: "Second Collection",
+});
+
const uploadedModel = createMockCollectionItem({
id: 3,
name: "my uploaded model",
@@ -45,6 +50,14 @@ const uploadedModel = createMockCollectionItem({
based_on_upload: 123,
});
+const uploadedModel2 = createMockCollectionItem({
+ id: 4,
+ name: "my second uploaded model",
+ collection: secondCollection,
+ model: "dataset",
+ based_on_upload: 123,
+});
+
async function setupCollectionContent(overrides = {}) {
setupDatabasesEndpoints([createMockDatabase({ can_upload: true })]);
setupSearchEndpoints([]);
@@ -86,18 +99,22 @@ async function setupCollectionContent(overrides = {}) {
describe("FileUploadStatus", () => {
beforeEach(() => {
setupCollectionByIdEndpoint({
- collections: [firstCollection, secondCollection],
+ collections: [firstCollection, secondCollection, thirdCollection],
});
setupCollectionsEndpoints({
- collections: [firstCollection, secondCollection],
+ collections: [firstCollection, secondCollection, thirdCollection],
+ });
+ setupCollectionItemsEndpoint({
+ collection: firstCollection,
+ collectionItems: [],
});
setupCollectionItemsEndpoint({
collection: secondCollection,
collectionItems: [uploadedModel],
});
setupCollectionItemsEndpoint({
- collection: firstCollection,
- collectionItems: [],
+ collection: thirdCollection,
+ collectionItems: [uploadedModel, uploadedModel2],
});
fetchMock.get(
"path:/api/table/123",
@@ -239,7 +256,7 @@ describe("FileUploadStatus", () => {
).toHaveAttribute("href", "/model/3");
});
- it("Should allow appends from collections when an appendable model exists", async () => {
+ it("Should default to appending to a single selectable model", async () => {
jest.useFakeTimers({ advanceTimers: true });
fetchMock.post("path:/api/table/123/append-csv", "3", { delay: 1000 });
@@ -256,7 +273,47 @@ describe("FileUploadStatus", () => {
userEvent.click(screen.getByText("Append to a model"));
const submitButton = await screen.findByRole("button", { name: "Append" });
- expect(submitButton).toBeDisabled(); // should be disabled until a model is selected
+
+ // only appendable model should be pre-selected
+ await screen.findByText("my uploaded model");
+
+ await waitFor(() => expect(submitButton).toBeEnabled());
+ userEvent.click(submitButton);
+
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(
+ await screen.findByText(/Uploading data to Fancy Table/i),
+ ).toBeInTheDocument();
+
+ act(() => {
+ jest.advanceTimersByTime(1000);
+ });
+
+ expect(
+ await screen.findByRole("link", { name: "Start exploring" }),
+ ).toHaveAttribute("href", "/model/3");
+ });
+
+ it("Should allow selecting from appendable models", async () => {
+ jest.useFakeTimers({ advanceTimers: true });
+ fetchMock.post("path:/api/table/123/append-csv", "3", { delay: 1000 });
+
+ await setupCollectionContent({ collectionId: thirdCollection.id });
+
+ userEvent.upload(
+ screen.getByTestId("upload-input"),
+ new File(["foo, bar"], "test.csv", { type: "text/csv" }),
+ );
+
+ expect(
+ await screen.findByText("Select upload destination"),
+ ).toBeInTheDocument();
+
+ userEvent.click(screen.getByText("Append to a model"));
+ const submitButton = await screen.findByRole("button", { name: "Append" });
userEvent.click(await screen.findByPlaceholderText("Select a model"));
userEvent.click(
--
GitLab