diff --git a/frontend/src/components/datasources/__tests__/install-package-button.test.tsx b/frontend/src/components/datasources/__tests__/install-package-button.test.tsx
index 7264850bba9..6fab4f253bb 100644
--- a/frontend/src/components/datasources/__tests__/install-package-button.test.tsx
+++ b/frontend/src/components/datasources/__tests__/install-package-button.test.tsx
@@ -5,6 +5,7 @@ import { Provider } from "jotai";
import React from "react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
import { requestClientAtom } from "@/core/network/requests";
import { store } from "@/core/state/jotai";
import { InstallPackageButton } from "../install-package-button";
@@ -48,6 +49,7 @@ describe("InstallPackageButton", () => {
beforeEach(() => {
vi.clearAllMocks();
store.set(requestClientAtom, MockRequestClient.create());
+ store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
});
it("should not render when packages is undefined", () => {
@@ -82,4 +84,13 @@ describe("InstallPackageButton", () => {
);
expect(screen.getByText("Install altair")).toBeInTheDocument();
});
+
+ it("should not render in read mode, where installs are not allowed", () => {
+ store.set(viewStateAtom, { mode: "read", cellAnchor: null });
+ const { container } = render(
+ ,
+ { wrapper },
+ );
+ expect(container.firstChild).toBeNull();
+ });
});
diff --git a/frontend/src/components/datasources/install-package-button.tsx b/frontend/src/components/datasources/install-package-button.tsx
index 2fc0d9bfa0f..0d9199a6de2 100644
--- a/frontend/src/components/datasources/install-package-button.tsx
+++ b/frontend/src/components/datasources/install-package-button.tsx
@@ -2,6 +2,7 @@
import React from "react";
import { Button } from "@/components/ui/button";
+import { useInstallAllowed } from "@/core/mode";
import { useInstallPackages } from "@/core/packages/useInstallPackage";
import { cn } from "@/utils/cn";
@@ -23,8 +24,9 @@ export const InstallPackageButton: React.FC = ({
onInstall,
}) => {
const { handleInstallPackages } = useInstallPackages();
+ const installAllowed = useInstallAllowed();
- if (!packages || packages.length === 0) {
+ if (!packages || packages.length === 0 || !installAllowed) {
return null;
}