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