Fix storage config loading state not updated

webui/src/lib/hooks/storageConfig.tsx

@@ -7,6 +7,7 @@ import React, {
 } from "react";
 
 import { config } from "../api";
+import useUser from "./user";
 
 type StorageConfigContextType = {
   error: Error | null;
@@ -54,17 +55,21 @@ export const useStorageConfig = () => {
 export const StorageConfigProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
+  const { user } = useUser();
   const [storageConfig, setStorageConfig] = useState<StorageConfigContextType>(
     storageConfigInitialState
   );
 
   useEffect(() => {
     const fetchStorageConfigAndSetState = async () => {
       const storageConfig = await fetchStorageConfig();
-      setStorageConfig(storageConfig);
+      setStorageConfig({
+        ...storageConfig,
+        loading: false,
+      });
     };
     fetchStorageConfigAndSetState();
-  }, []);
+  }, [user]);
 
   return (
     <StorageConfigContext.Provider value={storageConfig}>

webui/test/e2e/common/setup.spec.ts

@@ -3,6 +3,7 @@ import { SetupPage } from "../poms/setupPage";
 import { LoginPage } from "../poms/loginPage";
 import { RepositoriesPage } from "../poms/repositoriesPage";
 import { COMMON_STORAGE_STATE_PATH } from "../consts";
+import {writeCredentials} from "../credentialsFile";
 
 const LAKECTL_CONFIGURATION_FILE_NAME = "lakectl.yaml";
 
@@ -61,6 +62,8 @@ test.describe("Setup Page", () => {
 
         // save local storage state
         await loginTab.context().storageState({ path: COMMON_STORAGE_STATE_PATH });
+        // dump raw credentials to a file
+        await writeCredentials(credentials);
     });
 
     test("after successful setup, navigating to the base URL should redirect to /login", async ({ page }) => {

webui/test/e2e/common/viewParquetObject.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from "@playwright/test";
+import { RepositoriesPage } from "../poms/repositoriesPage";
+import { RepositoryPage } from "../poms/repositoryPage";
+import { LoginPage } from "../poms/loginPage";
+import { getCredentials } from "../credentialsFile";
+
+const TEST_REPO_NAME = "test-repo";
+const PARQUET_OBJECT_NAME = "lakes.parquet";
+
+test.describe("Object Viewer - Parquet File", () => {
+    test.describe.configure({ mode: "serial" });
+    test("create repo w/ sample data", async ({page}) => {
+        const repositoriesPage = new RepositoriesPage(page);
+        await repositoriesPage.goto();
+        await repositoriesPage.createRepository(TEST_REPO_NAME, true);
+    });
+
+    test("view parquet object", async ({page}) => {
+        const repositoriesPage = new RepositoriesPage(page);
+        await repositoriesPage.goto();
+        await repositoriesPage.goToRepository(TEST_REPO_NAME);
+
+        const repositoryPage = new RepositoryPage(page);
+        await repositoryPage.clickObject(PARQUET_OBJECT_NAME);
+        await expect(page.getByText("Loading...")).not.toBeVisible();
+    });
+
+    test("view parquet object w/ logout and login", async ({page}) => {
+        const repositoriesPage = new RepositoriesPage(page);
+        await repositoriesPage.goto();
+        await page.getByRole('button', { name: "admin" }).click();
+        await page.getByRole("button", { name: "Logout" }).click();
+
+        const loginPage = new LoginPage(page);
+        const credentials = await getCredentials();
+        if (!credentials) {
+            test.fail();
+            return;
+        }
+        await loginPage.doLogin(credentials.accessKeyId, credentials.secretAccessKey);
+        await repositoriesPage.goto();
+        await repositoriesPage.goToRepository(TEST_REPO_NAME);
+        const repositoryPage = new RepositoryPage(page);
+        await repositoryPage.clickObject(PARQUET_OBJECT_NAME);
+        await expect(page.getByText("Loading...")).not.toBeVisible();
+    });
+})
+

webui/test/e2e/consts.ts

@@ -1,3 +1,4 @@
 import path from "path";
 
 export const COMMON_STORAGE_STATE_PATH = path.join(__dirname, "../playwright/.auth/common-storage-state.json");
+export const RAW_CREDENTIALS_FILE_PATH = path.join(__dirname, "../playwright/.auth/credentials.json");

webui/test/e2e/credentialsFile.ts

@@ -0,0 +1,23 @@
+import fs from "fs/promises";
+import {RAW_CREDENTIALS_FILE_PATH} from "./consts";
+
+interface Credentials {
+    accessKeyId: string;
+    secretAccessKey: string;
+}
+
+export const getCredentials = async (): Promise<Credentials|null> => {
+    try {
+        return JSON.parse(await fs.readFile(RAW_CREDENTIALS_FILE_PATH, "utf-8"));
+    } catch (e) {
+        if (e.code === "ENOENT") {
+            return null;
+        }
+        throw e;
+    }
+}
+
+export const writeCredentials = async (credentials: Credentials): Promise<void> => {
+    const jsonCredentials = JSON.stringify(credentials);
+    await fs.writeFile(RAW_CREDENTIALS_FILE_PATH, jsonCredentials);
+}

webui/test/e2e/poms/repositoriesPage.ts

@@ -1,4 +1,7 @@
-import { Locator, Page } from "@playwright/test";
+import { Locator, Page, expect } from "@playwright/test";
+
+const SAMPLE_REPO_README_TITLE = "Welcome to the Lake!";
+const REGULAR_REPO_README_TITLE = "To get started with this repository:";
 
 export class RepositoriesPage {
     private page: Page;
@@ -23,6 +26,25 @@ export class RepositoriesPage {
     }
 
     async goToRepository(repoName: string): Promise<void> {
-        await this.page.click(`text=${repoName}`);
+        await this.page.getByRole("link", { name: repoName, exact: true }).click();
+    }
+
+    async createSampleRepository(): Promise<void> {
+        await this.page.getByRole("button", { name: "Create Sample Repository" }).click();
+        expect(this.page.getByRole("heading", { name: SAMPLE_REPO_README_TITLE })).toBeVisible();
+    }
+
+    async createRepository(repoName: string, includeSampleData: boolean): Promise<void> {
+        await this.createRepositoryButtonLocator.click();
+        await this.page.getByLabel("Repository ID").fill(repoName);
+        if (includeSampleData) {
+            await this.page.getByLabel("Add sample data, hooks, and configuration").check();
+        }
+        await this.page.getByRole("dialog").getByRole("button", { name: "Create Repository", exact: true }).click();
+        if (includeSampleData) {
+            await expect(this.page.getByRole("heading", { name: SAMPLE_REPO_README_TITLE })).toBeVisible();
+            return;
+        }
+        expect(this.page.getByRole("heading", { name: REGULAR_REPO_README_TITLE })).toBeVisible();
     }
 }

webui/test/e2e/poms/repositoryPage.ts

@@ -1,4 +1,4 @@
-import {Locator, Page } from "@playwright/test";
+import {Locator, Page} from "@playwright/test";
 
 export class RepositoryPage {
     private page: Page;
@@ -13,4 +13,8 @@ export class RepositoryPage {
     async goto(repoName: string): Promise<void> {
         await this.page.goto(`/repositories/${repoName}`);
     }
+
+    async clickObject(objectName: string): Promise<void> {
+        await this.page.getByRole('cell', { name: objectName }).getByRole('link').click();
+    }
 }