From 6cb874052bae7509d683999a9133da1375f4f451 Mon Sep 17 00:00:00 2001 From: github-automation-metabase <166700802+github-automation-metabase@users.noreply.github.com> Date: Wed, 14 Aug 2024 12:13:18 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20backported=20"Show=20loading=20s?= =?UTF-8?q?tate=20while=20fetching=20data=20in=20a=20new=20model=20page"?= =?UTF-8?q?=20(#46746)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Show loading state while fetching data in a new model page (#46694) * Show new model loading state while fetching * Show new model loading state while fetching * Add unit test * Use `DelayedLoadingSpinner` instead * Update the test Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com> * Prettier --------- Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com> * Fix the test --------- Co-authored-by: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com> Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com> --- .../NewModelOptions/NewModelOptions.tsx | 7 +++++- .../tests/common.unit.spec.tsx | 22 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx b/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx index c23ed0be4c7..bf9b6cdb5e0 100644 --- a/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx +++ b/frontend/src/metabase/models/containers/NewModelOptions/NewModelOptions.tsx @@ -4,6 +4,7 @@ import { t } from "ttag"; import _ from "underscore"; import { useListDatabasesQuery } from "metabase/api"; +import { DelayedLoadingSpinner } from "metabase/common/components/EntityPicker/components/LoadingSpinner"; import { Grid } from "metabase/components/Grid"; import CS from "metabase/css/core/index.css"; import Databases from "metabase/entities/databases"; @@ -29,7 +30,7 @@ interface NewModelOptionsProps { } const NewModelOptions = ({ location }: NewModelOptionsProps) => { - const { data } = useListDatabasesQuery(); + const { data, isFetching } = useListDatabasesQuery(); const databases = data?.data ?? []; const hasDataAccess = getHasDataAccess(databases); const hasNativeWrite = getHasNativeWrite(databases); @@ -44,6 +45,10 @@ const NewModelOptions = ({ location }: NewModelOptionsProps) => { const showMetabaseLinks = useSelector(getShowMetabaseLinks); + if (isFetching) { + return <DelayedLoadingSpinner />; + } + if (!hasDataAccess && !hasNativeWrite) { return ( <div diff --git a/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx b/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx index 35ab0754a89..64ba105dfe1 100644 --- a/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx +++ b/frontend/src/metabase/models/containers/NewModelOptions/tests/common.unit.spec.tsx @@ -1,4 +1,7 @@ +import fetchMock from "fetch-mock"; + import { screen } from "__support__/ui"; +import { delay } from "metabase/lib/promise"; import { createMockDatabase } from "metabase-types/api/mocks"; import { setup } from "./setup"; @@ -13,6 +16,25 @@ describe("NewModelOptions (OSS)", () => { }); describe("has data access", () => { + it("should render loading indicator when fetching databases (metabase#44813)", async () => { + // Mocking the response needs to happen before the setup + // because setup already instantiates the component - it contains `renderWithProviders`. + fetchMock.get( + "path:/api/database", + delay(2000).then(() => { + return [createMockDatabase()]; + }), + { overwriteRoutes: true }, + ); + + setup({ databases: [createMockDatabase()] }); + + expect(await screen.findByTestId("loading-spinner")).toBeInTheDocument(); + expect( + screen.queryByText("Metabase is no fun without any data"), + ).not.toBeInTheDocument(); + }); + it("should render options for creating a model", async () => { setup({ databases: [createMockDatabase()] }); -- GitLab