@skyhook-io/radar-app 1.4.1 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/components/audit/AuditSettingsDialog.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react'
-import { X, Plus, Trash2 } from 'lucide-react'
+import { X, Plus, Trash2, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
-import { useAuditSettings, useUpdateAuditSettings, useAudit } from '../../api/client'
+import { useAuditSettings, useUpdateAuditSettings, useAudit, useCloudRole } from '../../api/client'
 import type { CheckMeta } from '@skyhook-io/k8s-ui'
 import { validateRFC1123Label, type ValidationResult } from '@skyhook-io/k8s-ui/utils/validators'
 
@@ -14,6 +14,11 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
   const { data: settings } = useAuditSettings()
   const { data: auditData } = useAudit(namespaces)
   const updateSettings = useUpdateAuditSettings()
+  // Audit policy is cluster-shared, so writes are owner-gated (enforced
+  // server-side too). Non-owners get a read-only view. Non-Cloud callers
+  // have no role and pass.
+  const { canAtLeast } = useCloudRole()
+  const canEdit = canAtLeast('owner')
   const [ignoredNs, setIgnoredNs] = useState<string[]>([])
   const [disabledChecks, setDisabledChecks] = useState<string[]>([])
   const [newNs, setNewNs] = useState('')
@@ -75,6 +80,15 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
         </div>
 
         <div className="px-5 py-4 overflow-y-auto flex-1">
+          {!canEdit && (
+            <div className="mb-4 rounded-lg border border-theme-border bg-theme-elevated/50 p-3 flex items-start gap-2.5">
+              <Lock className="w-3.5 h-3.5 mt-0.5 shrink-0 text-theme-text-tertiary" />
+              <p className="text-xs text-theme-text-tertiary">
+                Audit policy is shared across everyone using this Radar instance, so editing
+                is limited to owners. You can review the current settings here.
+              </p>
+            </div>
+          )}
           {/* Ignored Namespaces */}
           <div className="mb-6">
             <label className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider">
@@ -90,7 +104,8 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                   <span className="text-sm text-theme-text-primary">{ns}</span>
                   <button
                     onClick={() => setIgnoredNs(ignoredNs.filter(n => n !== ns))}
-                    className="p-1 rounded hover:bg-theme-hover text-theme-text-tertiary hover:text-red-400 transition-colors"
+                    disabled={!canEdit}
+                    className="p-1 rounded hover:bg-theme-hover text-theme-text-tertiary hover:text-red-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:text-theme-text-tertiary"
                   >
                     <Trash2 className="w-3.5 h-3.5" />
                   </button>
@@ -108,6 +123,7 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                 onChange={e => setNewNs(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') addNamespace() }}
                 placeholder="Add namespace..."
+                disabled={!canEdit}
                 aria-invalid={newNsError ? true : undefined}
                 aria-describedby="new-ns-help"
                 className={clsx(
@@ -119,7 +135,7 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
               />
               <button
                 onClick={addNamespace}
-                disabled={!canAddNamespace}
+                disabled={!canEdit || !canAddNamespace}
                 className="px-3 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <Plus className="w-4 h-4" />
@@ -155,7 +171,8 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
                       type="checkbox"
                       checked={!disabled}
                       onChange={() => toggleCheck(check.id)}
-                      className="w-4 h-4 rounded border-theme-border text-skyhook-500 focus:ring-skyhook-500"
+                      disabled={!canEdit}
+                      className="w-4 h-4 rounded border-theme-border text-skyhook-500 focus:ring-skyhook-500 disabled:opacity-40 disabled:cursor-not-allowed"
                     />
                     <div className="flex-1 min-w-0">
                       <span className="text-sm text-theme-text-primary">{check.title}</span>
@@ -181,14 +198,16 @@ export function AuditSettingsDialog({ namespaces, onClose }: AuditSettingsDialog
             // text — otherwise the user clicks Save expecting their
             // entry to be included and it's silently dropped.
             disabled={
-              updateSettings.isPending || newNsError !== null || newNsDuplicate
+              !canEdit || updateSettings.isPending || newNsError !== null || newNsDuplicate
             }
             title={
-              newNsError
-                ? 'Fix or clear the pending namespace input before saving'
-                : newNsDuplicate
-                  ? 'Clear the duplicate pending input before saving'
-                  : undefined
+              !canEdit
+                ? 'Audit settings can only be changed by owners'
+                : newNsError
+                  ? 'Fix or clear the pending namespace input before saving'
+                  : newNsDuplicate
+                    ? 'Clear the duplicate pending input before saving'
+                    : undefined
             }
             className="px-4 py-1.5 text-sm btn-brand rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
           >

package/src/components/audit/AuditView.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import { useAudit, useAuditSettings, useUpdateAuditSettings } from '../../api/client'
+import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
 import { ChecksView, PaneLoader, type CheckResourceRef } from '@skyhook-io/k8s-ui'
 import { ArrowLeft, ClipboardCheck, Settings } from 'lucide-react'
@@ -21,6 +21,11 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
   const { data, isLoading, error } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
+  // Audit policy is owner-gated (enforced server-side). Withhold the inline
+  // hide affordances from non-owners so they don't click into a 403 — the
+  // hide menus render only when these callbacks are passed.
+  const { canAtLeast } = useCloudRole()
+  const canEdit = canAtLeast('owner')
   const [showSettings, setShowSettings] = useState(false)
 
   const ignoredCount = auditSettings?.ignoredNamespaces?.length ?? 0
@@ -105,8 +110,8 @@ export function AuditView({ namespaces, onBack, onNavigateToResource }: AuditVie
         catalog={data.checks ?? {}}
         anyData
         onResourceClick={onResourceClick}
-        onHideCheck={hideCheck}
-        onHideCategory={hideCategory}
+        onHideCheck={canEdit ? hideCheck : undefined}
+        onHideCategory={canEdit ? hideCategory : undefined}
       />
 
       {showSettings && <AuditSettingsDialog namespaces={namespaces} onClose={() => setShowSettings(false)} />}

package/src/components/settings/SettingsDialog.tsx

@@ -1,10 +1,11 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
+import { useState, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { Settings, X, RotateCcw, Loader2, Copy, Check, Pin, Shield } from 'lucide-react'
+import { Settings, X, RotateCcw, Loader2, Copy, Check, Pin, Shield, Lock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
 import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
 import { apiUrl, getAuthHeaders, getCredentialsMode } from '../../api/config'
+import { useCloudRole } from '../../api/client'
 
 interface Config {
   kubeconfig?: string
@@ -34,6 +35,13 @@ interface SettingsDialogProps {
 export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsDialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
   const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  // Radar configuration (kubeconfig, port, integrations…) is host-level and
+  // affects every user of this instance, so it's gated to owners. Personal
+  // sections (My permissions) stay visible to everyone. Non-Cloud callers
+  // (OSS, OIDC, kubectl plugin) have no role and pass — single-user laptops
+  // are never locked out of their own config. Backend enforces this too.
+  const { canAtLeast } = useCloudRole()
+  const canEditConfig = canAtLeast('owner')
   const [configData, setConfigData] = useState<ConfigResponse | null>(null)
   const [editedConfig, setEditedConfig] = useState<Config>({})
   const [saving, setSaving] = useState(false)
@@ -169,33 +177,55 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
             </div>
           )}
           {onShowMyPermissions && (
-            <div className="mb-4 rounded-md border border-theme-border bg-theme-elevated/50 p-3">
-              <div className="flex items-center justify-between gap-3">
-                <div className="min-w-0">
-                  <h3 className="text-sm font-medium text-theme-text-primary">My permissions</h3>
-                  <p className="mt-0.5 text-xs text-theme-text-tertiary">
-                    View what your current identity can do in this cluster.
-                  </p>
+            <div className="mb-5">
+              <SectionLabel>Personal</SectionLabel>
+              <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-3">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <h3 className="text-sm font-medium text-theme-text-primary">My permissions</h3>
+                    <p className="mt-0.5 text-xs text-theme-text-tertiary">
+                      View what your current identity can do in this cluster.
+                    </p>
+                  </div>
+                  <button
+                    onClick={onShowMyPermissions}
+                    className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover rounded-md transition-colors"
+                  >
+                    <Shield className="w-3.5 h-3.5" />
+                    Open
+                  </button>
                 </div>
-                <button
-                  onClick={onShowMyPermissions}
-                  className="shrink-0 flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-hover rounded-md transition-colors"
-                >
-                  <Shield className="w-3.5 h-3.5" />
-                  Open
-                </button>
               </div>
             </div>
           )}
-          <StartupConfigTab
-            config={editedConfig}
-            effectiveConfig={configData?.effective}
-            isDesktop={isDesktop}
-            onChange={updateConfigField}
-          />
+
+          <SectionLabel>Radar configuration</SectionLabel>
+          {canEditConfig ? (
+            <StartupConfigTab
+              config={editedConfig}
+              effectiveConfig={configData?.effective}
+              isDesktop={isDesktop}
+              onChange={updateConfigField}
+            />
+          ) : (
+            <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-4 flex items-start gap-3">
+              <Lock className="w-4 h-4 mt-0.5 shrink-0 text-theme-text-tertiary" />
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-theme-text-primary">Owner access required</p>
+                <p className="mt-0.5 text-xs text-theme-text-tertiary">
+                  These settings (kubeconfig, server port, timeline, integrations) affect
+                  every user of this Radar instance, so they're limited to owners. Ask an
+                  owner if you need a change here.
+                </p>
+              </div>
+            </div>
+          )}
         </div>
 
-        {/* Footer */}
+        {/* Footer — only the owner-gated config section is editable, so hide
+            the save controls entirely for non-owners (personal sections save
+            themselves). */}
+        {canEditConfig && (
         <div className="flex items-center justify-between gap-3 p-4 border-t border-theme-border shrink-0">
             <div className="flex items-center gap-2">
               <button
@@ -225,12 +255,23 @@ export function SettingsDialog({ open, onClose, onShowMyPermissions }: SettingsD
               Save
             </button>
           </div>
+        )}
       </div>
     </div>,
     document.body
   )
 }
 
+// -- Section label ------------------------------------------------------------
+
+function SectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <h3 className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-2">
+      {children}
+    </h3>
+  )
+}
+
 // -- Startup Configuration Tab ------------------------------------------------
 
 function StartupConfigTab({