@rxtx4816/cockpit-plugin-base-react 1.0.6 → 1.0.8

package/eslint.config.base.js

@@ -39,6 +39,9 @@ const BASE_GLOBALS = {
   HTMLPreElement: "readonly",
   HTMLTableSectionElement: "readonly",
   requestAnimationFrame: "readonly",
+  Node: "readonly",
+  PointerEvent: "readonly",
+  MouseEvent: "readonly",
   cockpit: "readonly",
   CockpitProcess: "readonly",
   CockpitChannel: "readonly",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxtx4816/cockpit-plugin-base-react",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Shared infrastructure for Cockpit plugins: i18n, dark theme, test setup, config presets, CI/CD workflows, and QEMU VM harness",
   "type": "module",
   "author": "RXTX4816",
@@ -43,6 +43,9 @@
     "./hooks/usePollingFetch": {
       "default": "./src/hooks/usePollingFetch.ts"
     },
+    "./hooks/useAdminMode": {
+      "default": "./src/hooks/useAdminMode.ts"
+    },
     "./components": {
       "default": "./src/components/index.ts"
     },
@@ -61,6 +64,9 @@
     },
     "./vitest.config.base": {
       "default": "./vitest.config.base.js"
+    },
+    "./lib/logParser": {
+      "default": "./src/lib/logParser.tsx"
     }
   },
   "files": [
@@ -81,6 +87,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
+    "yalc": "yalc push",
     "docs": "typedoc",
     "docs:watch": "typedoc --watch"
   },
@@ -90,17 +97,19 @@
     "react-dom": ">=19",
     "react-i18next": ">=17"
   },
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.61.1",
+    "@typescript-eslint/parser": "^8.61.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1"
+  },
   "devDependencies": {
     "@patternfly/react-core": "^6.5.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.61.1",
-    "@typescript-eslint/parser": "^8.61.1",
     "eslint": "^9.39.4",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.1.1",
     "i18next": "^26.3.1",
     "jsdom": "^29.1.1",
     "react": "^19.2.7",

package/src/components/CollapsibleSearch.tsx

@@ -0,0 +1,95 @@
+import { type CSSProperties, useState, useRef, useEffect, useCallback } from "react";
+import { Button, SearchInput } from "@patternfly/react-core";
+import { SearchIcon } from "@patternfly/react-icons";
+
+interface Props {
+  value: string;
+  onChange: (value: string) => void;
+  onClear: () => void;
+  placeholder?: string;
+  "aria-label"?: string;
+  /** Width of the expanded input in pixels. Defaults to 220. */
+  expandedWidth?: number;
+}
+
+export function CollapsibleSearch({
+  value,
+  onChange,
+  onClear,
+  placeholder = "Search…",
+  "aria-label": ariaLabel = "Search",
+  expandedWidth = 220,
+}: Props) {
+  const [expanded, setExpanded] = useState(value.length > 0);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  // Stay expanded when there's an active search value
+  useEffect(() => {
+    if (value.length > 0) setExpanded(true);
+  }, [value]);
+
+  const collapse = useCallback(() => {
+    if (value.length === 0) setExpanded(false);
+  }, [value]);
+
+  // Collapse on outside click when empty
+  useEffect(() => {
+    if (!expanded) return;
+    function onPointerDown(e: PointerEvent) {
+      if (inputRef.current && !inputRef.current.contains(e.target as Node)) {
+        collapse();
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [expanded, collapse]);
+
+  function handleClear() {
+    onClear();
+    setExpanded(false);
+  }
+
+  function handleExpand() {
+    setExpanded(true);
+    // Focus the inner input after the animation frame
+    requestAnimationFrame(() => {
+      inputRef.current?.querySelector("input")?.focus();
+    });
+  }
+
+  const containerStyle: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    transition: "width 200ms ease, opacity 200ms ease",
+    width: expanded ? expandedWidth : 32,
+    opacity: expanded ? 1 : 0.6,
+  };
+
+  if (!expanded) {
+    return (
+      <Button
+        variant="plain"
+        size="sm"
+        aria-label={ariaLabel}
+        title={ariaLabel}
+        onClick={handleExpand}
+      >
+        <SearchIcon />
+      </Button>
+    );
+  }
+
+  return (
+    <div ref={inputRef} style={containerStyle}>
+      <SearchInput
+        placeholder={placeholder}
+        value={value}
+        onChange={(_e, v) => onChange(v)}
+        onClear={handleClear}
+        style={{ width: expandedWidth }}
+        aria-label={ariaLabel}
+      />
+    </div>
+  );
+}

package/src/components/LayoutSelector.css

@@ -0,0 +1,34 @@
+.ls-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.ls-trigger.pf-v6-c-button {
+  padding: 0.25rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  min-width: unset;
+  border-radius: var(--pf-t--global--border--radius--base, 4px);
+  color: var(--pf-t--global--text--color--subtle, #6a6e73);
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.ls-trigger.pf-v6-c-button:hover {
+  color: var(--pf-t--global--text--color--regular, #151515);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.ls-trigger--active.pf-v6-c-button {
+  color: var(--pf-t--global--color--brand--default, #0066cc);
+  background: rgba(0, 102, 204, 0.08);
+}
+
+.ls-toggle {
+  animation: ls-expand 0.12s ease-out;
+}
+
+@keyframes ls-expand {
+  from { opacity: 0; transform: scale(0.92); }
+  to   { opacity: 1; transform: scale(1); }
+}

package/src/components/LayoutSelector.tsx

@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import { Button, ToggleGroup, ToggleGroupItem } from "@patternfly/react-core";
+import { Tooltip } from "./Tooltip";
+import { SlidersHIcon } from "@patternfly/react-icons";
+import "./LayoutSelector.css";
+
+export interface LayoutOption<T extends string = string> {
+  key: T;
+  icon: ReactNode;
+  label: string;
+}
+
+interface Props<T extends string = string> {
+  layout: T;
+  onLayoutChange: (layout: T) => void;
+  layouts: LayoutOption<T>[];
+  ariaLabel?: string;
+}
+
+export function LayoutSelector<T extends string>({
+  layout,
+  onLayoutChange,
+  layouts,
+  ariaLabel = "Change layout",
+}: Props<T>) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as HTMLElement)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const current = layouts.find(l => l.key === layout);
+
+  return (
+    <div ref={containerRef} className={`ls-wrap${open ? " ls-wrap--open" : ""}`}>
+      <Tooltip content={`Layout: ${current?.label ?? layout}`}>
+        <Button
+          variant="plain"
+          size="sm"
+          onClick={() => setOpen(o => !o)}
+          aria-label={ariaLabel}
+          className={`ls-trigger${open ? " ls-trigger--active" : ""}`}
+        >
+          {current?.icon ?? <SlidersHIcon />}
+        </Button>
+      </Tooltip>
+      {open && (
+        <ToggleGroup aria-label="Layout" isCompact className="ls-toggle">
+          {layouts.map(({ key, icon, label }) => (
+            <Tooltip key={key} content={label}>
+              <ToggleGroupItem
+                icon={icon}
+                isSelected={layout === key}
+                onChange={() => { onLayoutChange(key); setOpen(false); }}
+                aria-label={label}
+              />
+            </Tooltip>
+          ))}
+        </ToggleGroup>
+      )}
+    </div>
+  );
+}

package/src/components/PluginFooter.tsx

@@ -0,0 +1,61 @@
+import { type ReactNode } from "react";
+import { PageSection, Label } from "@patternfly/react-core";
+
+interface FooterLink {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  /** Plugin version string (e.g. from package.json). */
+  version?: string;
+  /** Links rendered in the bottom row. */
+  links?: FooterLink[];
+  /** Extra labels or badges rendered next to the version in the top row. */
+  children?: ReactNode;
+  className?: string;
+}
+
+export function PluginFooter({ version, links, children, className }: Props) {
+  return (
+    <PageSection
+      className={className}
+      style={{
+        position: "sticky",
+        bottom: 0,
+        zIndex: 1,
+        borderTop: "1px solid var(--pf-t--global--border--color--default)",
+        padding: "0.5rem 1.5rem",
+        fontSize: 13,
+        textAlign: "center",
+        backgroundColor: "var(--pf-t--global--background--color--primary--default)",
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+        {(version !== undefined || children) && (
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center", alignItems: "center" }}>
+            {version !== undefined && (
+              <Label isCompact color="grey">v{version}</Label>
+            )}
+            {children}
+          </div>
+        )}
+        {links && links.length > 0 && (
+          <div style={{ display: "flex", flexDirection: "row", gap: 16, justifyContent: "center" }}>
+            {links.map(({ label, href }) => (
+              <a
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ color: "var(--pf-t--global--color--brand--default, #06c)", textDecoration: "none" }}
+              >
+                {label}
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </PageSection>
+  );
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,5 @@
+import { Tooltip as PFTooltip, type TooltipProps } from "@patternfly/react-core";
+
+export function Tooltip({ exitDelay = 0, ...props }: TooltipProps) {
+  return <PFTooltip exitDelay={exitDelay} {...props} />;
+}

package/src/components/index.ts

@@ -6,3 +6,8 @@ export type { StatusBadgeConfig } from "./StatusBadge";
 export { ConfirmDialog } from "./ConfirmDialog";
 export { LogViewer } from "./LogViewer";
 export { HelpPopover } from "./HelpPopover";
+export { PluginFooter } from "./PluginFooter";
+export { CollapsibleSearch } from "./CollapsibleSearch";
+export { LayoutSelector } from "./LayoutSelector";
+export type { LayoutOption } from "./LayoutSelector";
+export { Tooltip } from "./Tooltip";

package/src/hooks/useAdminMode.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Returns whether the current Cockpit session has administrative (superuser) access.
+ * - `null`  — still determining (show nothing or a neutral state)
+ * - `true`  — admin access granted
+ * - `false` — limited mode; privileged operations will fail
+ */
+export function useAdminMode(): boolean | null {
+  const [allowed, setAllowed] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const perm = cockpit.permission({ admin: true });
+    setAllowed(perm.allowed);
+    const onChange = () => setAllowed(perm.allowed);
+    perm.addEventListener("changed", onChange);
+    return () => {
+      perm.removeEventListener("changed", onChange);
+      perm.close();
+    };
+  }, []);
+
+  return allowed;
+}

package/src/hooks/useLayout.ts

@@ -0,0 +1,22 @@
+import { useState, useCallback } from "react";
+
+export function useLayout<T extends string>(
+  storageKey: string,
+  defaultLayout: T,
+  validLayouts: T[],
+): [T, (layout: T) => void] {
+  const [layout, setLayoutState] = useState<T>(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && (validLayouts as string[]).includes(stored)) return stored as T;
+    } catch { /* ignore */ }
+    return defaultLayout;
+  });
+
+  const setLayout = useCallback((next: T) => {
+    try { localStorage.setItem(storageKey, next); } catch { /* ignore */ }
+    setLayoutState(next);
+  }, [storageKey]);
+
+  return [layout, setLayout];
+}

package/src/index.ts

@@ -9,3 +9,5 @@ export { useConfirmAction } from "./hooks/useConfirmAction";
 export type { ConfirmStep, ConfirmActionState } from "./hooks/useConfirmAction";
 export { usePollingFetch } from "./hooks/usePollingFetch";
 export type { PollingFetchResult } from "./hooks/usePollingFetch";
+export { useLayout } from "./hooks/useLayout";
+export { useAdminMode } from "./hooks/useAdminMode";

package/src/systemd/ServiceControl.tsx

@@ -72,6 +72,8 @@ interface Props {
   statusBadge?: ReactNode;
   /** Override any user-visible string. See {@link ServiceControlLabels}. */
   labels?: ServiceControlLabels;
+  /** Extra content rendered at the far right of the button row (e.g. Backup / Restore buttons). */
+  extraActions?: ReactNode;
 }
 
 /**
@@ -82,7 +84,7 @@ interface Props {
  *
  * Pair with `useServiceStatus` for reactive status updates.
  */
-export function ServiceControl({ unit, status, loading = false, onRefresh, statusBadge, labels }: Props) {
+export function ServiceControl({ unit, status, loading = false, onRefresh, statusBadge, labels, extraActions }: Props) {
   const toast = useToast();
   const l = { ...DEFAULTS, ...labels };
   const [busy, setBusy] = useState(false);
@@ -194,6 +196,11 @@ export function ServiceControl({ unit, status, loading = false, onRefresh, statu
             {l.reload}
           </Button>
         </FlexItem>
+        {extraActions && (
+          <FlexItem align={{ default: "alignRight" }}>
+            {extraActions}
+          </FlexItem>
+        )}
       </Flex>
 
       <ConfirmDialog

package/src/systemd/api.ts

@@ -59,3 +59,32 @@ export async function restartService(unit: string): Promise<void> {
 export async function reloadService(unit: string): Promise<void> {
   await cockpit.spawn(["systemctl", "reload", unit], { superuser: "try" });
 }
+
+/**
+ * Reads a file from the host filesystem via Cockpit, requesting superuser escalation.
+ * @param path - Absolute path to the file.
+ */
+export async function readFile(path: string): Promise<string> {
+  return cockpit.file(path, { superuser: "try" }).read();
+}
+
+/**
+ * Writes content to a file on the host filesystem via Cockpit, requesting superuser escalation.
+ * @param path    - Absolute path to the file.
+ * @param content - UTF-8 string content to write.
+ */
+export async function writeFile(path: string, content: string): Promise<void> {
+  await cockpit.file(path, { superuser: "try" }).replace(content);
+}
+
+/**
+ * Fetches recent journal entries for a systemd unit via `journalctl`.
+ * @param unit  - The systemd unit name (e.g. `"caddy.service"`).
+ * @param lines - Number of lines to return (default 300).
+ */
+export async function fetchServiceLogs(unit: string, lines = 300): Promise<string> {
+  return cockpit.spawn(
+    ["journalctl", "-u", unit, "-n", String(lines), "--no-pager", "--output=short-iso"],
+    { superuser: "try" },
+  );
+}

package/src/systemd/index.ts

@@ -1,5 +1,5 @@
 export type { ServiceStatus } from "./types";
-export { getServiceStatus, startService, stopService, restartService, reloadService } from "./api";
+export { getServiceStatus, startService, stopService, restartService, reloadService, readFile, writeFile, fetchServiceLogs } from "./api";
 export { useServiceStatus } from "./useServiceStatus";
 export { ServiceControl } from "./ServiceControl";
 export type { ServiceControlLabels } from "./ServiceControl";