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

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.7",
   "description": "Shared infrastructure for Cockpit plugins: i18n, dark theme, test setup, config presets, CI/CD workflows, and QEMU VM harness",
   "type": "module",
   "author": "RXTX4816",
@@ -81,6 +81,7 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
+    "yalc": "yalc push",
     "docs": "typedoc",
     "docs:watch": "typedoc --watch"
   },

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,70 @@
+import { useState, useRef, useEffect, type ReactNode } from "react";
+import { Button, Tooltip, ToggleGroup, ToggleGroupItem } from "@patternfly/react-core";
+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/index.ts

@@ -6,3 +6,7 @@ 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";

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,4 @@ 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";

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