From e10a0c50e7a14fae983aa14e1c6b2ea9a54d097f Mon Sep 17 00:00:00 2001
From: Carlos Feria <carlosthe19916@gmail.com>
Date: Mon, 29 Jun 2026 19:12:12 +0200
Subject: [PATCH] fix: read-only banner, avoid rendering it while isLoading
 (#1114)

(cherry picked from commit 99bd439f7c375038082370a54ff4e7de97fcd943)
---
 client/src/app/components/ReadOnlyButton.tsx  | 17 ++----
 .../ReadOnlyContext/ReadOnlyContext.test.tsx  | 30 ++++++-----
 .../ReadOnlyContext/ReadOnlyContext.tsx       |  4 +-
 .../ReadOnlyContext/ReadOnlyProvider.tsx      |  7 +--
 .../app/components/ReadOnlyContext/index.ts   |  1 -
 .../app/components/ReadOnlyContext/utils.ts   | 11 ----
 client/src/app/layout/default-layout.test.tsx | 26 ++++++---
 client/src/app/layout/default-layout.tsx      | 54 +++++++++++--------
 .../pages/advisory-list/advisory-table.tsx    | 11 ++--
 .../app/pages/importer-list/importer-list.tsx | 13 +++--
 .../pages/sbom-groups/sbom-groups-table.tsx   | 12 ++---
 client/src/app/pages/sbom-list/sbom-table.tsx |  6 +--
 .../src/app/pages/sbom-list/sbom-toolbar.tsx  | 22 +++-----
 client/src/app/queries/trustifyInfo.ts        |  7 +--
 14 files changed, 105 insertions(+), 116 deletions(-)
 delete mode 100644 client/src/app/components/ReadOnlyContext/utils.ts

diff --git a/client/src/app/components/ReadOnlyButton.tsx b/client/src/app/components/ReadOnlyButton.tsx
index 9c085a06d..59e9dbd47 100644
--- a/client/src/app/components/ReadOnlyButton.tsx
+++ b/client/src/app/components/ReadOnlyButton.tsx
@@ -1,20 +1,11 @@
 import React from "react";
 
-import { Button, type ButtonProps, Tooltip } from "@patternfly/react-core";
+import { Button, type ButtonProps } from "@patternfly/react-core";
 
-import { READ_ONLY_TOOLTIP, ReadOnlyContext } from "./ReadOnlyContext";
+import { ReadOnlyContext } from "./ReadOnlyContext";
 
-/** Button that is automatically aria-disabled with a tooltip when the instance is in read-only mode. */
 export const ReadOnlyButton: React.FC<ButtonProps> = (props) => {
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { areMutationsDisabled } = React.useContext(ReadOnlyContext);
 
-  if (isReadOnly) {
-    return (
-      <Tooltip content={READ_ONLY_TOOLTIP}>
-        <Button {...props} isAriaDisabled />
-      </Tooltip>
-    );
-  }
-
-  return <Button {...props} />;
+  return <Button {...props} isDisabled={areMutationsDisabled} />;
 };
diff --git a/client/src/app/components/ReadOnlyContext/ReadOnlyContext.test.tsx b/client/src/app/components/ReadOnlyContext/ReadOnlyContext.test.tsx
index 0bfd2a236..0ef63174f 100644
--- a/client/src/app/components/ReadOnlyContext/ReadOnlyContext.test.tsx
+++ b/client/src/app/components/ReadOnlyContext/ReadOnlyContext.test.tsx
@@ -17,11 +17,13 @@ const mockedUseFetchTrustifyInfo =
   >;
 
 const ReadOnlyConsumer: React.FC = () => {
-  const { isReadOnly, isLoading } = React.useContext(ReadOnlyContext);
+  const { isLoading, areMutationsDisabled } = React.useContext(ReadOnlyContext);
   return (
     <div>
-      <span data-testid="read-only">{String(isReadOnly)}</span>
       <span data-testid="loading">{String(isLoading)}</span>
+      <span data-testid="mutations-disabled">
+        {String(areMutationsDisabled)}
+      </span>
     </div>
   );
 };
@@ -38,53 +40,53 @@ const renderWithProvider = () => {
 };
 
 describe("ReadOnlyContext", () => {
-  it("provides isReadOnly=true when the endpoint returns readOnly: true", () => {
+  it("disables mutations when the endpoint returns readOnly: true", () => {
     mockedUseFetchTrustifyInfo.mockReturnValue({
-      trustifyInfo: { version: "0.5.0", readOnly: true },
+      data: { version: "0.5.0", readOnly: true },
       isLoading: false,
       error: null,
     });
 
     renderWithProvider();
 
-    expect(screen.getByTestId("read-only")).toHaveTextContent("true");
     expect(screen.getByTestId("loading")).toHaveTextContent("false");
+    expect(screen.getByTestId("mutations-disabled")).toHaveTextContent("true");
   });
 
-  it("provides isReadOnly=false when the endpoint returns readOnly: false", () => {
+  it("allows mutations when the endpoint returns readOnly: false", () => {
     mockedUseFetchTrustifyInfo.mockReturnValue({
-      trustifyInfo: { version: "0.5.0", readOnly: false },
+      data: { version: "0.5.0", readOnly: false },
       isLoading: false,
       error: null,
     });
 
     renderWithProvider();
 
-    expect(screen.getByTestId("read-only")).toHaveTextContent("false");
+    expect(screen.getByTestId("mutations-disabled")).toHaveTextContent("false");
   });
 
-  it("treats isReadOnly as true while loading", () => {
+  it("disables mutations while loading", () => {
     mockedUseFetchTrustifyInfo.mockReturnValue({
-      trustifyInfo: undefined,
+      data: undefined,
       isLoading: true,
       error: null,
     });
 
     renderWithProvider();
 
-    expect(screen.getByTestId("read-only")).toHaveTextContent("true");
     expect(screen.getByTestId("loading")).toHaveTextContent("true");
+    expect(screen.getByTestId("mutations-disabled")).toHaveTextContent("true");
   });
 
-  it("defaults to isReadOnly=false when the fetch errors", () => {
+  it("allows mutations when the fetch errors", () => {
     mockedUseFetchTrustifyInfo.mockReturnValue({
-      trustifyInfo: undefined,
+      data: undefined,
       isLoading: false,
       error: new Error("network error"),
     });
 
     renderWithProvider();
 
-    expect(screen.getByTestId("read-only")).toHaveTextContent("false");
+    expect(screen.getByTestId("mutations-disabled")).toHaveTextContent("false");
   });
 });
diff --git a/client/src/app/components/ReadOnlyContext/ReadOnlyContext.tsx b/client/src/app/components/ReadOnlyContext/ReadOnlyContext.tsx
index 2002ee43a..727b8ee31 100644
--- a/client/src/app/components/ReadOnlyContext/ReadOnlyContext.tsx
+++ b/client/src/app/components/ReadOnlyContext/ReadOnlyContext.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 
 interface IReadOnlyContext {
-  isReadOnly: boolean;
   isLoading: boolean;
+  areMutationsDisabled: boolean;
 }
 
 export const ReadOnlyContext = React.createContext<IReadOnlyContext>({
-  isReadOnly: false,
   isLoading: true,
+  areMutationsDisabled: true,
 });
diff --git a/client/src/app/components/ReadOnlyContext/ReadOnlyProvider.tsx b/client/src/app/components/ReadOnlyContext/ReadOnlyProvider.tsx
index a85c510af..223cf8963 100644
--- a/client/src/app/components/ReadOnlyContext/ReadOnlyProvider.tsx
+++ b/client/src/app/components/ReadOnlyContext/ReadOnlyProvider.tsx
@@ -12,11 +12,12 @@ interface IReadOnlyProvider {
 export const ReadOnlyProvider: React.FunctionComponent<IReadOnlyProvider> = ({
   children,
 }) => {
-  const { trustifyInfo, isLoading } = useFetchTrustifyInfo();
-  const isReadOnly = isLoading || (trustifyInfo?.readOnly ?? false);
+  const { data: trustifyInfo, isLoading } = useFetchTrustifyInfo();
+  const isReadOnly = trustifyInfo?.readOnly ?? false;
+  const areMutationsDisabled = isLoading || isReadOnly;
 
   return (
-    <ReadOnlyContext.Provider value={{ isReadOnly, isLoading }}>
+    <ReadOnlyContext.Provider value={{ isLoading, areMutationsDisabled }}>
       {children}
     </ReadOnlyContext.Provider>
   );
diff --git a/client/src/app/components/ReadOnlyContext/index.ts b/client/src/app/components/ReadOnlyContext/index.ts
index 22aa283cc..28cbcbe5f 100644
--- a/client/src/app/components/ReadOnlyContext/index.ts
+++ b/client/src/app/components/ReadOnlyContext/index.ts
@@ -1,3 +1,2 @@
 export * from "./ReadOnlyContext";
 export * from "./ReadOnlyProvider";
-export * from "./utils";
diff --git a/client/src/app/components/ReadOnlyContext/utils.ts b/client/src/app/components/ReadOnlyContext/utils.ts
deleted file mode 100644
index 9e06bbe78..000000000
--- a/client/src/app/components/ReadOnlyContext/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const READ_ONLY_TOOLTIP = "Not available in read-only mode";
-
-/** Returns props that disable an ActionsColumn item when read-only, including a click guard. */
-export const readOnlyActionProps = (isReadOnly: boolean) =>
-  isReadOnly
-    ? {
-        isAriaDisabled: true,
-        tooltipProps: { content: READ_ONLY_TOOLTIP },
-        onClick: () => {},
-      }
-    : {};
diff --git a/client/src/app/layout/default-layout.test.tsx b/client/src/app/layout/default-layout.test.tsx
index 0153b3d9b..84fa618ba 100644
--- a/client/src/app/layout/default-layout.test.tsx
+++ b/client/src/app/layout/default-layout.test.tsx
@@ -33,9 +33,15 @@ vi.mock("@patternfly/react-core", async () => {
   };
 });
 
-const renderLayout = (isReadOnly: boolean) => {
+const renderLayout = ({
+  isLoading = false,
+  areMutationsDisabled = false,
+}: {
+  isLoading?: boolean;
+  areMutationsDisabled?: boolean;
+}) => {
   return render(
-    <ReadOnlyContext.Provider value={{ isReadOnly, isLoading: false }}>
+    <ReadOnlyContext.Provider value={{ isLoading, areMutationsDisabled }}>
       <DefaultLayout>
         <div data-testid="page-content">Page content</div>
       </DefaultLayout>
@@ -44,19 +50,27 @@ const renderLayout = (isReadOnly: boolean) => {
 };
 
 describe("DefaultLayout", () => {
-  it("shows a read-only banner when isReadOnly is true", () => {
-    renderLayout(true);
+  it("shows a read-only banner when mutations are disabled", () => {
+    renderLayout({ areMutationsDisabled: true });
 
     expect(screen.getByText(/running in read-only mode/i)).toBeInTheDocument();
     expect(screen.getByTestId("page-content")).toBeInTheDocument();
   });
 
-  it("does not show a banner when isReadOnly is false", () => {
-    renderLayout(false);
+  it("does not show a banner when mutations are allowed", () => {
+    renderLayout({ areMutationsDisabled: false });
 
     expect(
       screen.queryByText(/running in read-only mode/i),
     ).not.toBeInTheDocument();
     expect(screen.getByTestId("page-content")).toBeInTheDocument();
   });
+
+  it("does not show a banner while trustify info is loading", () => {
+    renderLayout({ isLoading: true, areMutationsDisabled: true });
+
+    expect(
+      screen.queryByText(/running in read-only mode/i),
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/client/src/app/layout/default-layout.tsx b/client/src/app/layout/default-layout.tsx
index 237cef05c..b84d44150 100644
--- a/client/src/app/layout/default-layout.tsx
+++ b/client/src/app/layout/default-layout.tsx
@@ -15,13 +15,15 @@ import { ReadOnlyContext } from "@app/components/ReadOnlyContext";
 
 import { HeaderApp } from "./header";
 import { SidebarApp } from "./sidebar";
+import { LoadingWrapper } from "@app/components/LoadingWrapper";
+import { getAxiosErrorMessage } from "@app/utils/utils";
 
 interface DefaultLayoutProps {
   children?: React.ReactNode;
 }
 
 export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { isLoading, areMutationsDisabled } = React.useContext(ReadOnlyContext);
   const pageId = "main-content-page-layout-horizontal-nav";
   const PageSkipToContent = (
     <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>
@@ -35,27 +37,37 @@ export const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      {isReadOnly && (
-        <Banner
-          isSticky
-          status="info"
-          screenReaderText="Info banner: application is in read-only mode"
-        >
-          <Flex
-            justifyContent={{ default: "justifyContentCenter" }}
-            alignItems={{ default: "alignItemsCenter" }}
-            gap={{ default: "gapSm" }}
+      <LoadingWrapper
+        isFetching={isLoading}
+        isFetchingState={<></>}
+        fetchErrorState={(error) => (
+          <Banner isSticky status="danger">
+            {getAxiosErrorMessage(error)}
+          </Banner>
+        )}
+      >
+        {areMutationsDisabled && (
+          <Banner
+            isSticky
+            status="info"
+            screenReaderText="Info banner: application is in read-only mode"
           >
-            <FlexItem>
-              <InfoCircleIcon />
-            </FlexItem>
-            <FlexItem>
-              This instance is running in read-only mode. Uploads, imports, and
-              other modifications are disabled.
-            </FlexItem>
-          </Flex>
-        </Banner>
-      )}
+            <Flex
+              justifyContent={{ default: "justifyContentCenter" }}
+              alignItems={{ default: "alignItemsCenter" }}
+              gap={{ default: "gapSm" }}
+            >
+              <FlexItem>
+                <InfoCircleIcon />
+              </FlexItem>
+              <FlexItem>
+                This instance is running in read-only mode. Uploads, imports,
+                and other modifications are disabled.
+              </FlexItem>
+            </Flex>
+          </Banner>
+        )}
+      </LoadingWrapper>
       <PageContentWithDrawerProvider>
         {children}
         <Notifications />
diff --git a/client/src/app/pages/advisory-list/advisory-table.tsx b/client/src/app/pages/advisory-list/advisory-table.tsx
index a1ac59647..a06f69629 100644
--- a/client/src/app/pages/advisory-list/advisory-table.tsx
+++ b/client/src/app/pages/advisory-list/advisory-table.tsx
@@ -28,10 +28,7 @@ import type { AdvisorySummary } from "@app/client";
 import { ConfirmDialog } from "@app/components/ConfirmDialog.tsx";
 import { LabelsAsList } from "@app/components/LabelsAsList.tsx";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import {
-  readOnlyActionProps,
-  ReadOnlyContext,
-} from "@app/components/ReadOnlyContext";
+import { ReadOnlyContext } from "@app/components/ReadOnlyContext";
 import { SimplePagination } from "@app/components/SimplePagination";
 import {
   ConditionalTableBody,
@@ -50,7 +47,7 @@ import { advisoryDeleteDialogProps } from "@app/Constants";
 
 export const AdvisoryTable: React.FC = () => {
   const { pushNotification } = React.useContext(NotificationsContext);
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { areMutationsDisabled } = React.useContext(ReadOnlyContext);
 
   const { isFetching, fetchError, tableControls } = React.useContext(
     AdvisorySearchContext,
@@ -224,7 +221,7 @@ export const AdvisoryTable: React.FC = () => {
                             onClick: () => {
                               setEditLabelsModalState(item);
                             },
-                            ...readOnlyActionProps(isReadOnly),
+                            isDisabled: areMutationsDisabled,
                           },
                           {
                             title: "Download",
@@ -241,7 +238,7 @@ export const AdvisoryTable: React.FC = () => {
                             onClick: () => {
                               setAdvisoryToDelete(item);
                             },
-                            ...readOnlyActionProps(isReadOnly),
+                            isDisabled: areMutationsDisabled,
                           },
                         ]}
                       />
diff --git a/client/src/app/pages/importer-list/importer-list.tsx b/client/src/app/pages/importer-list/importer-list.tsx
index 188cce113..ddfa4db1a 100644
--- a/client/src/app/pages/importer-list/importer-list.tsx
+++ b/client/src/app/pages/importer-list/importer-list.tsx
@@ -87,7 +87,7 @@ const getImporterStatus = (importer: Importer): ImporterStatus => {
 
 export const ImporterList: React.FC = () => {
   const { pushNotification } = React.useContext(NotificationsContext);
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { areMutationsDisabled } = React.useContext(ReadOnlyContext);
 
   // Actions that each row can trigger
   type RowAction = "enable" | "disable" | "run";
@@ -397,7 +397,7 @@ export const ImporterList: React.FC = () => {
                                       onClick: () => {
                                         prepareActionOnRow("enable", item);
                                       },
-                                      ...readOnlyActionProps(isReadOnly),
+                                      isDisabled: areMutationsDisabled,
                                     },
                                   ]
                                 : [
@@ -406,17 +406,16 @@ export const ImporterList: React.FC = () => {
                                       onClick: () => {
                                         prepareActionOnRow("run", item);
                                       },
-                                      isAriaDisabled:
-                                        isReadOnly ||
-                                        importerStatus === "running",
-                                      ...readOnlyActionProps(isReadOnly),
+                                      isDisabled:
+                                        importerStatus === "running" ||
+                                        areMutationsDisabled,
                                     },
                                     {
                                       title: "Disable",
                                       onClick: () => {
                                         prepareActionOnRow("disable", item);
                                       },
-                                      ...readOnlyActionProps(isReadOnly),
+                                      isDisabled: areMutationsDisabled,
                                     },
                                   ]),
                             ]}
diff --git a/client/src/app/pages/sbom-groups/sbom-groups-table.tsx b/client/src/app/pages/sbom-groups/sbom-groups-table.tsx
index f9435a4bf..a7d858699 100644
--- a/client/src/app/pages/sbom-groups/sbom-groups-table.tsx
+++ b/client/src/app/pages/sbom-groups/sbom-groups-table.tsx
@@ -17,10 +17,7 @@ import type { Group } from "@app/client";
 import { ConfirmDialog } from "@app/components/ConfirmDialog.tsx";
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
 import { NotificationsContext } from "@app/components/NotificationsContext";
-import {
-  readOnlyActionProps,
-  ReadOnlyContext,
-} from "@app/components/ReadOnlyContext";
+import { ReadOnlyContext } from "@app/components/ReadOnlyContext";
 import { SimplePagination } from "@app/components/SimplePagination";
 import { TableCellError } from "@app/components/TableCellError";
 import { ConditionalTableBody } from "@app/components/TableControls";
@@ -155,19 +152,18 @@ const SbomGroupRow: React.FC<{
     isExpanded || hasBeenExpanded.current,
   );
 
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { areMutationsDisabled } = React.useContext(ReadOnlyContext);
 
   const actions: IAction[] = [
     {
       title: "Edit",
       onClick: () => onEdit(node),
-      ...readOnlyActionProps(isReadOnly),
+      isDisabled: areMutationsDisabled,
     },
     {
       title: "Delete",
       onClick: () => onDelete(node),
-      isDisabled: !isReadOnly && !!node.number_of_groups,
-      ...readOnlyActionProps(isReadOnly),
+      isDisabled: areMutationsDisabled || !!node.number_of_groups,
     },
   ];
 
diff --git a/client/src/app/pages/sbom-list/sbom-table.tsx b/client/src/app/pages/sbom-list/sbom-table.tsx
index 1cf9fb154..7e241e65c 100644
--- a/client/src/app/pages/sbom-list/sbom-table.tsx
+++ b/client/src/app/pages/sbom-list/sbom-table.tsx
@@ -46,7 +46,7 @@ import { SbomSearchContext } from "./sbom-context";
 
 export const SbomTable: React.FC = () => {
   const { pushNotification } = React.useContext(NotificationsContext);
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { areMutationsDisabled } = React.useContext(ReadOnlyContext);
 
   const {
     isFetching,
@@ -229,7 +229,7 @@ export const SbomTable: React.FC = () => {
                             onClick: () => {
                               setEditLabelsModalState(item);
                             },
-                            ...readOnlyActionProps(isReadOnly),
+                            isDisabled: areMutationsDisabled,
                           },
                           {
                             isSeparator: true,
@@ -254,7 +254,7 @@ export const SbomTable: React.FC = () => {
                             onClick: () => {
                               setSbomToDelete(item);
                             },
-                            ...readOnlyActionProps(isReadOnly),
+                            isDisabled: areMutationsDisabled,
                           },
                         ]}
                       />
diff --git a/client/src/app/pages/sbom-list/sbom-toolbar.tsx b/client/src/app/pages/sbom-list/sbom-toolbar.tsx
index d7861379f..b706c6643 100644
--- a/client/src/app/pages/sbom-list/sbom-toolbar.tsx
+++ b/client/src/app/pages/sbom-list/sbom-toolbar.tsx
@@ -35,7 +35,7 @@ export const SbomToolbar: React.FC<SbomToolbarProps> = ({
   showActions,
 }) => {
   const navigate = useNavigate();
-  const { isReadOnly } = React.useContext(ReadOnlyContext);
+  const { areMutationsDisabled } = React.useContext(ReadOnlyContext);
 
   // Create Form Modal
   const [saveGroupModalState, setSaveGroupModalState] = React.useState<
@@ -104,20 +104,14 @@ export const SbomToolbar: React.FC<SbomToolbarProps> = ({
                 <KebabDropdown
                   ariaLabel="SBOM actions"
                   dropdownItems={[
-                    <Tooltip
-                      key="upload-sbom-tooltip"
-                      content={READ_ONLY_TOOLTIP}
-                      trigger={isReadOnly ? "mouseenter focus" : "manual"}
+                    <DropdownItem
+                      key="upload-sbom"
+                      component="button"
+                      isDisabled={areMutationsDisabled}
+                      onClick={() => navigate(Paths.sbomUpload)}
                     >
-                      <DropdownItem
-                        key="upload-sbom"
-                        component="button"
-                        isAriaDisabled={isReadOnly}
-                        onClick={() => navigate(Paths.sbomUpload)}
-                      >
-                        Upload SBOM
-                      </DropdownItem>
-                    </Tooltip>,
+                      Upload SBOM
+                    </DropdownItem>,
                     <DropdownItem
                       key="scan-sbom"
                       component="button"
diff --git a/client/src/app/queries/trustifyInfo.ts b/client/src/app/queries/trustifyInfo.ts
index 1d50c4800..dab96982b 100644
--- a/client/src/app/queries/trustifyInfo.ts
+++ b/client/src/app/queries/trustifyInfo.ts
@@ -10,15 +10,10 @@ export const useFetchTrustifyInfo = () => {
   const { data, isLoading, error } = useQuery({
     queryKey: [TrustifyInfoQueryKey],
     queryFn: () => info({ client }),
-    staleTime: Number.POSITIVE_INFINITY,
-    gcTime: Number.POSITIVE_INFINITY,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    retry: 3,
   });
 
   return {
-    trustifyInfo: data?.data,
+    data: data?.data,
     isLoading,
     error,
   };