PMM-15360: Gate OpenManager's nav and page on the switch

Adds the settings flag as a second gate alongside the MongoDB-monitored
check for OpenManager's nav entry, reusing the existing pattern for
hiding MongoDB-only nav entries rather than inventing a second
mechanism.

OmPage now fails closed on the settings flag too, not just isPMMAdmin:
a saved or shared link has to answer "switched off" rather than the
API's raw FailedPrecondition or the unauthorized card, which would
misreport a disabled feature as a permissions problem to an admin who
has every right to be here. Also adds the technical-preview banner
(dismissible per browser via localStorage, not a setting), with an
explicit color override on its close button -- @percona/peak-ui's
MuiAlert theme colors the icon/message slots via
theme.palette[severity].contrastText but not .MuiAlert-action, so the
default close button was rendering almost invisibly against the
warning background.

Stacks on PMM-15326-om-ui-nav (needs OmPage/navigation.provider.tsx)
and this ticket's own settings-flag PR, merged in here since neither is
available on a single common upstream branch yet.

Signed-off-by: Pawel Lebioda <pawel.lebioda@percona.com>

Author: plebioda

ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx

@@ -32,6 +32,7 @@ import { useFolders } from 'hooks/api/useFolders';
 import { useUpdates } from 'contexts/updates';
 import { useLocalStorage } from 'hooks/utils/useLocalStorage';
 import { useHaInfo } from 'hooks/api/useHA';
+import { ServiceType } from 'types/services.types';
 
 export const NavigationProvider: FC<PropsWithChildren> = ({ children }) => {
   const { user } = useUser();
@@ -95,8 +96,15 @@ export const NavigationProvider: FC<PropsWithChildren> = ({ children }) => {
         // is established; role/flag gating comes with real auth (Option B).
         items.push(...addSepApps());
 
-        // Served by pmm-managed, so it is not gated with the SEP group.
-        items.push(...addOm());
+        // Served by pmm-managed, so it is not gated with the SEP group -- gated on the
+        // settings flag instead, and on a MongoDB service being monitored (OM has
+        // nothing to show otherwise).
+        if (
+          settings.omEnabled &&
+          currentServiceTypes.includes(ServiceType.mongodb)
+        ) {
+          items.push(...addOm());
+        }
 
         if (settings.backupManagementEnabled) {
           items.push(NAV_BACKUPS);

ui/apps/pmm/src/om/OmPage.tsx

@@ -16,11 +16,26 @@
  */
 
 import { FC, PropsWithChildren } from 'react';
+import Alert from '@mui/material/Alert';
+import Card from '@mui/material/Card';
 import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 import { Page } from 'components/page';
 import { useUser } from 'contexts/user';
+import { useReadonlySettings } from 'hooks/api/useSettings';
+import { useLocalStorage } from 'hooks/utils/useLocalStorage';
 import { OrgRole } from 'types/user.types';
 
+const TECHNICAL_PREVIEW_DISMISSED_KEY = 'pmm-ui.om.technicalPreviewDismissed';
+
+const Messages = {
+  switchedOff:
+    'OpenManager is switched off. A PMM admin can turn it on in Configuration → Settings → Advanced Settings.',
+  technicalPreview: 'Technical preview',
+  technicalPreviewBody:
+    'OpenManager is a technical preview. It is still under development and may change.',
+};
+
 /**
  * Host chrome for the OM page.
  *
@@ -37,17 +52,66 @@ import { OrgRole } from 'types/user.types';
  * `isGrafanaAdmin || orgRole === Admin`, and `roles` (org-role only) cannot express the
  * Grafana-admin half on its own, so it gates the remaining case and `Page` renders its
  * standard unauthorized card.
+ *
+ * The settings gate is enforced here for the same reason: a saved or shared link to
+ * this page has to answer "switched off", not the API's raw FailedPrecondition, and
+ * not the unauthorized card above, which would misreport a disabled feature as a
+ * permissions problem to an admin who has every right to be here (PMM-15360 AC1/AC2/AC7).
+ *
+ * The technical-preview banner is dismissible, and remembered per browser rather than
+ * per PMM account or installation -- it is a "you've seen this" acknowledgement, not a
+ * setting with a right answer for every viewer, so localStorage is enough and needs no
+ * round trip to pmm-managed.
+ *
+ * The close button's `sx` override exists because `@percona/peak-ui`'s MuiAlert theme
+ * (`styleOverrides.icon`/`.message`) sets `color: theme.palette[severity].contrastText`
+ * on the icon and message slots, but not on `.MuiAlert-action` -- so the close button
+ * MUI renders for `onClose` falls back to the alert root's own `color`, which this
+ * theme leaves close to the warning background itself. Nothing else in this app uses a
+ * dismissible Alert, which is presumably why that gap was never hit before.
  */
 export const OmPage: FC<PropsWithChildren> = ({ children }) => {
   const { user } = useUser();
+  const { data: settings } = useReadonlySettings();
+  const [previewDismissed, setPreviewDismissed] = useLocalStorage<boolean>(
+    TECHNICAL_PREVIEW_DISMISSED_KEY,
+    false
+  );
 
   return (
     <Page
       maxWidth="full"
       roles={user?.isPMMAdmin ? undefined : [OrgRole.Admin]}
     >
       <Stack gap={3} sx={{ flex: 1 }}>
-        <div>{children}</div>
+        {settings && !settings.omEnabled ? (
+          <Card variant="outlined" sx={{ p: 2 }}>
+            <Alert severity="info" data-testid="om-switched-off">
+              {Messages.switchedOff}
+            </Alert>
+          </Card>
+        ) : (
+          <>
+            {!previewDismissed && (
+              <Alert
+                severity="warning"
+                onClose={() => setPreviewDismissed(true)}
+                data-testid="om-technical-preview"
+                sx={{
+                  '& .MuiAlert-action': {
+                    color: (theme) => theme.palette.warning.contrastText,
+                  },
+                }}
+              >
+                <Typography variant="body2">
+                  <strong>{Messages.technicalPreview}</strong>{' '}
+                  {Messages.technicalPreviewBody}
+                </Typography>
+              </Alert>
+            )}
+            <div>{children}</div>
+          </>
+        )}
       </Stack>
     </Page>
   );