@checkstack/catalog-frontend 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # @checkstack/catalog-frontend
 
+## 0.10.0
+
+### Minor Changes
+
+- 1ef2e79: feat: hotlinks on incidents/maintenances and additional links on systems
+
+  Users with `manage` access on an incident, maintenance, or system can now
+  attach free-form URL "hotlinks" — Jira tickets, runbooks, dashboards, ticket
+  tools, etc. — alongside the existing fields.
+
+  - **Incidents** & **maintenances**: links live on the entity itself and are
+    surfaced both in the editor dialog and on the public detail page. Two new
+    RPC procedures per plugin (`addLink`, `removeLink`) gated behind the
+    existing `manage` access rule. Links are returned as part of
+    `getIncident` / `getMaintenance` and cache-invalidated on every link
+    mutation.
+  - **Systems**: a parallel `system_links` table with `getSystemLinks`,
+    `addSystemLink`, `removeSystemLink` procedures. Surfaced inside the
+    system editor (next to contacts) and on the read-only system detail
+    sidebar. Cache-scoped per-system so list endpoints remain hot.
+  - **Shared UI**: a `LinksEditor` component in `@checkstack/ui` does the
+    presentation; the three plugins each own their own RPC wiring.
+
+  Database changes ship as additive migrations (new `incident_links`,
+  `maintenance_links`, `system_links` tables, all FK-cascaded on parent
+  delete). No existing columns or rows are touched.
+
+  The system incident and maintenance history pages now sort by relevance:
+  active entries (non-`resolved` incidents, `scheduled` or `in_progress`
+  maintenances) appear at the top, with creation date descending as the
+  tiebreaker.
+
+- 3547670: Wire the new tips infrastructure across the frontends:
+
+  **Empty-state coaching.** Replace generic "no items" copy with onboarding
+  guidance — short description, three numbered steps and a primary CTA — on
+  every EmptyState that has a meaningful next action. Affects: catalog
+  (systems + groups), dashboard, health-check page, integrations (subscriptions
+
+  - provider connections), GitOps providers + secrets, GitOps provenance,
+    SLO config + overview, maintenance config, satellites, plugin manager,
+    incident config, announcements. Read-only EmptyStates (incident history,
+    maintenance history, plugin events) get clearer descriptions explaining
+    what would populate them.
+
+  **First-run anchored tips.** Add `<Tip>` popovers to the most important
+  "Create" affordances so first-time users see a one-line explanation of
+  what they're about to make and why it matters: catalog “Add System” /
+  “Add Group”, healthcheck “Create Check”, integrations “New Subscription”,
+  GitOps “Add Provider”, SLO “Create SLO”, maintenance “Create Maintenance”,
+  satellite “Create Satellite”, plugin-manager “Install plugin”, incident
+  “Report Incident”, announcement “New Announcement”. Each tip is dismissed
+  per user (server-backed when signed in, localStorage otherwise) and
+  namespaced through `qualifyTipId(plugin, …)` so it cannot escape the
+  plugin's own namespace.
+
+  **Welcome banner on the dashboard.** A `<TipBanner>` at the top of the
+  dashboard introduces Checkstack's main flow ("add a system, then a health
+  check") with a one-click jump into the catalog.
+
+### Patch Changes
+
+- f6f9a5c: Surface the source repository for GitOps-managed entities and gate the
+  system→group remove button on the system's lock state.
+
+  - `provenanceSchema` now carries a `sourceUrl` field, derived on the
+    backend from the provider type, baseUrl, repository and filePath. URLs
+    are constructed for github.com / gitlab.com and self-hosted
+    GitHub/GitLab where the API base ends in `/api/v3` or `/api/v4`. Other
+    baseUrls fall back to `null` so the UI keeps showing the raw path.
+  - New `useProvenanceLocks` hook (bulk variant of `useProvenanceLock`)
+    for views that render many entities and need to look up locks
+    client-side.
+  - New `<GitOpsSourceBadge>` popover component that replaces the bare
+    GitBranch icon on system and group catalog cards. The popover
+    surfaces the repository, file path, and a "View in source provider"
+    deep link.
+  - `<GitOpsLockBanner>` repo line is now a real link when a sourceUrl is
+    available.
+  - The system→group remove button in the catalog now disables itself
+    when the system is GitOps-managed, matching the backend lock that was
+    already in place.
+
+- 950d6ec: Fix mobile UserMenu items rendering at zero height, group menu items by
+  section, and unstack cramped card headers on small viewports.
+
+  - **UserMenu mobile bug**: On mobile, the user-menu Sheet rendered every
+    menu item as a grid row, which combined with `flex-shrink: 1` on each
+    item collapsed the buttons whose internal layout uses `display: flex`
+    (the items registered with `useNavigate` rather than `<Link>`) to zero
+    content height. Switched the mobile container to a flex column with
+    `[&>*]:shrink-0` and added `min-h-0` so the sheet scrolls correctly
+    when the list overflows.
+
+  - **UserMenu grouping**: Slot extensions now accept an optional `group`
+    field. The user menu buckets `UserMenuItemsSlot` extensions by `group`
+    and renders each group under a labeled header (`Workspace`,
+    `Reliability`, `Configuration`, `Documentation`, `Account`). Existing
+    core plugins are tagged with the appropriate group; third-party plugins
+    can pick any of these or supply their own label. Untagged extensions
+    render last with no header. `UserMenuItemsBottomSlot` is unaffected.
+
+  - **Card header responsiveness**: `CardHeaderRow` (the primitive shared by
+    Incident, Maintenance, Auth, Catalog, GitOps and other config cards) now
+    stacks vertically on narrow viewports and only switches to a single row
+    at the `sm` breakpoint, so titles and adjacent filter controls (e.g.
+    status `Select`, "Show resolved" checkbox) no longer cram together on
+    mobile. Refactored the Incident and Maintenance config pages to use the
+    primitive instead of a hand-rolled `flex items-center justify-between`
+    row, and made their `Select` triggers full-width on mobile.
+
+- Updated dependencies [42abfff]
+- Updated dependencies [3547670]
+- Updated dependencies [f6f9a5c]
+- Updated dependencies [1ef2e79]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [3547670]
+- Updated dependencies [3547670]
+- Updated dependencies [950d6ec]
+- Updated dependencies [3547670]
+- Updated dependencies [3547670]
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/gitops-frontend@0.4.0
+  - @checkstack/catalog-common@2.1.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/notification-frontend@0.4.0
+  - @checkstack/tips-frontend@0.2.0
+  - @checkstack/auth-frontend@0.6.0
+  - @checkstack/auth-common@0.6.6
+  - @checkstack/notification-common@1.0.2
+
 ## 0.9.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/catalog-frontend",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,15 +13,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-common": "0.6.4",
-    "@checkstack/auth-frontend": "0.5.32",
-    "@checkstack/catalog-common": "2.0.0",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/gitops-frontend": "0.3.7",
-    "@checkstack/notification-common": "1.0.0",
-    "@checkstack/notification-frontend": "0.3.0",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/auth-common": "0.6.5",
+    "@checkstack/auth-frontend": "0.5.33",
+    "@checkstack/catalog-common": "2.0.1",
+    "@checkstack/common": "0.8.0",
+    "@checkstack/frontend-api": "0.4.2",
+    "@checkstack/gitops-frontend": "0.3.8",
+    "@checkstack/notification-common": "1.0.1",
+    "@checkstack/notification-frontend": "0.3.1",
+    "@checkstack/tips-frontend": "0.1.0",
+    "@checkstack/ui": "1.7.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
     "lucide-react": "^0.344.0",
@@ -31,7 +32,7 @@
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
-    "@checkstack/tsconfig": "0.0.6",
-    "@checkstack/scripts": "0.1.2"
+    "@checkstack/tsconfig": "0.0.7",
+    "@checkstack/scripts": "0.3.0"
   }
 }

package/src/components/CatalogConfigPage.tsx

@@ -17,7 +17,11 @@ import {
   usePluginClient,
 } from "@checkstack/frontend-api";
 import { System, CatalogApi } from "../api";
-import { catalogAccess } from "@checkstack/catalog-common";
+import {
+  catalogAccess,
+  pluginMetadata as catalogPluginMetadata,
+} from "@checkstack/catalog-common";
+import { Tip } from "@checkstack/tips-frontend";
 import {
   PageLayout,
   Card,
@@ -337,10 +341,19 @@ export const CatalogConfigPage = () => {
                   <Server className="w-5 h-5 text-muted-foreground" />
                   Systems
                 </CardTitle>
-                <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
-                  <Plus className="w-4 h-4 mr-2" />
-                  Add System
-                </Button>
+                <Tip
+                  plugin={catalogPluginMetadata}
+                  id="systems.create"
+                  title="Start here: add a system"
+                  description="A system is anything you want Checkstack to keep an eye on — a service, a host, a job, a database. Almost everything else (health checks, SLOs, incidents, notifications) hangs off systems."
+                  side="bottom"
+                  align="end"
+                >
+                  <Button size="sm" onClick={() => setIsSystemEditorOpen(true)}>
+                    <Plus className="w-4 h-4 mr-2" />
+                    Add System
+                  </Button>
+                </Tip>
               </CardHeaderRow>
               {systems.length > 0 && groups.length > 0 && (
                 <p className="text-xs text-muted-foreground mt-1">
@@ -351,7 +364,22 @@ export const CatalogConfigPage = () => {
             </CardHeader>
             <CardContent className="space-y-4">
               {systems.length === 0 ? (
-                <EmptyState title="No systems created yet." />
+                <EmptyState
+                  icon={<Server className="size-10" />}
+                  title="No systems yet"
+                  description="Systems are the things you monitor. Once you add one, you can attach health checks, SLOs, maintenance windows and incident history to it."
+                  steps={[
+                    "Click “Add System” to register your first service, host or job.",
+                    "Group related systems so dashboards and on-call rotations stay tidy.",
+                    "Wire health checks to a system so its health status reflects reality and subscribers get notified on changes.",
+                  ]}
+                  actions={
+                    <Button onClick={() => setIsSystemEditorOpen(true)}>
+                      <Plus className="w-4 h-4 mr-2" />
+                      Add your first system
+                    </Button>
+                  }
+                />
               ) : (
                 <div className="space-y-2">
                   {systems.map((system) => (
@@ -381,10 +409,19 @@ export const CatalogConfigPage = () => {
                   <LayoutGrid className="w-5 h-5 text-muted-foreground" />
                   Groups
                 </CardTitle>
-                <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
-                  <Plus className="w-4 h-4 mr-2" />
-                  Add Group
-                </Button>
+                <Tip
+                  plugin={catalogPluginMetadata}
+                  id="groups.create"
+                  title="Group systems that belong together"
+                  description="Groups are how Checkstack rolls up status: a group is healthy when all of its systems are healthy. Use them per team, per product area, or per environment."
+                  side="bottom"
+                  align="end"
+                >
+                  <Button size="sm" onClick={() => setIsGroupEditorOpen(true)}>
+                    <Plus className="w-4 h-4 mr-2" />
+                    Add Group
+                  </Button>
+                </Tip>
               </CardHeaderRow>
               {groups.length > 0 && systems.length > 0 && (
                 <p className="text-xs text-muted-foreground mt-1">
@@ -394,7 +431,22 @@ export const CatalogConfigPage = () => {
             </CardHeader>
             <CardContent className="space-y-4">
               {groups.length === 0 ? (
-                <EmptyState title="No groups created yet." />
+                <EmptyState
+                  icon={<LayoutGrid className="size-10" />}
+                  title="No groups yet"
+                  description="Groups roll up the health of multiple systems into a single status — useful for teams, products or environments."
+                  steps={[
+                    "Click “Add Group” and give it a meaningful name.",
+                    "Drag systems from the left panel into the group, or use the assign button on each system.",
+                    "Subscribe to the group from the status page to alert your team on any rolled-up incident.",
+                  ]}
+                  actions={
+                    <Button onClick={() => setIsGroupEditorOpen(true)}>
+                      <Plus className="w-4 h-4 mr-2" />
+                      Add your first group
+                    </Button>
+                  }
+                />
               ) : (
                 <div className="space-y-2">
                   {groups.map((group) => (

package/src/components/DraggableSystem.tsx

@@ -1,10 +1,13 @@
 import { useState } from "react";
 import { useDraggable } from "@dnd-kit/core";
-import { GripVertical, Edit, Trash2, FolderPlus, GitBranch } from "lucide-react";
+import { GripVertical, Edit, Trash2, FolderPlus } from "lucide-react";
 import { Button } from "@checkstack/ui";
 import { ExtensionSlot } from "@checkstack/frontend-api";
 import { CatalogSystemActionsSlot } from "@checkstack/catalog-common";
-import { useProvenanceLock } from "@checkstack/gitops-frontend";
+import {
+  useProvenanceLock,
+  GitOpsSourceBadge,
+} from "@checkstack/gitops-frontend";
 import type { Group, System } from "../api";
 
 interface DraggableSystemProps {
@@ -39,7 +42,7 @@ export const DraggableSystem = ({
 }: DraggableSystemProps) => {
   const [isPickerOpen, setIsPickerOpen] = useState(false);
 
-  const { isLocked } = useProvenanceLock({
+  const { isLocked, provenance } = useProvenanceLock({
     kind: "System",
     entityId: system.id,
   });
@@ -58,23 +61,23 @@ export const DraggableSystem = ({
     >
       {/* Main row: grip + name/description */}
       <div className="flex items-start gap-2 p-3 pb-2">
-        {/* Grip handle — only this element triggers the drag */}
-        <div
-          {...listeners}
-          {...attributes}
-          className={`flex-shrink-0 mt-0.5 text-muted-foreground/40 touch-none ${
-            isLocked
-              ? "cursor-not-allowed opacity-30"
-              : "cursor-grab active:cursor-grabbing hover:text-muted-foreground"
-          }`}
-          aria-label={isLocked ? `${system.name} is managed by GitOps` : `Drag ${system.name}`}
-        >
-          {isLocked ? (
-            <GitBranch className="w-4 h-4 text-primary" />
-          ) : (
+        {/* Grip handle — only this element triggers the drag.
+            When GitOps-locked, swap in the source badge so users can click
+            through to the file that owns this system. */}
+        {isLocked && provenance ? (
+          <div className="flex-shrink-0 mt-0.5">
+            <GitOpsSourceBadge provenance={provenance} />
+          </div>
+        ) : (
+          <div
+            {...listeners}
+            {...attributes}
+            className="flex-shrink-0 mt-0.5 text-muted-foreground/40 touch-none cursor-grab active:cursor-grabbing hover:text-muted-foreground"
+            aria-label={`Drag ${system.name}`}
+          >
             <GripVertical className="w-4 h-4" />
-          )}
-        </div>
+          </div>
+        )}
 
         {/* Name + description — gets all remaining width, never truncated */}
         <div className="flex-1 min-w-0">

package/src/components/DroppableGroup.tsx

@@ -1,7 +1,11 @@
 import { useDroppable } from "@dnd-kit/core";
 import { EditableText, Button } from "@checkstack/ui";
-import { Trash2, GitBranch } from "lucide-react";
-import { useProvenanceLock } from "@checkstack/gitops-frontend";
+import { Trash2 } from "lucide-react";
+import {
+  useProvenanceLock,
+  useProvenanceLocks,
+  GitOpsSourceBadge,
+} from "@checkstack/gitops-frontend";
 import type { Group, System } from "../api";
 
 interface DroppableGroupProps {
@@ -36,11 +40,13 @@ export const DroppableGroup = ({
 }: DroppableGroupProps) => {
   const { setNodeRef } = useDroppable({ id: group.id });
 
-  const { isLocked } = useProvenanceLock({
+  const { isLocked, provenance } = useProvenanceLock({
     kind: "Group",
     entityId: group.id,
   });
 
+  const { getLock } = useProvenanceLocks();
+
   const groupSystems = (group.systemIds ?? [])
     .map((sysId) => systems.find((s) => s.id === sysId))
     .filter((sys): sys is System => !!sys);
@@ -63,10 +69,8 @@ export const DroppableGroup = ({
       {/* Group header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2 flex-1">
-          {isLocked && (
-            <span title="Managed by GitOps">
-              <GitBranch className="w-4 h-4 text-primary shrink-0" />
-            </span>
+          {isLocked && provenance && (
+            <GitOpsSourceBadge provenance={provenance} />
           )}
           <div className="flex-1">
             <EditableText
@@ -110,6 +114,8 @@ export const DroppableGroup = ({
         <div className="pl-2 space-y-1">
           {groupSystems.map((sys) => {
             const isNew = newlyAddedSystemId === sys.id;
+            const systemLock = getLock({ kind: "System", entityId: sys.id });
+            const systemLocked = systemLock.isLocked;
             return (
               <div
                 key={sys.id}
@@ -119,11 +125,25 @@ export const DroppableGroup = ({
                     : "border-border shadow-none"
                 }`}
               >
-                <span className="text-foreground truncate">{sys.name}</span>
+                <span className="text-foreground truncate flex items-center gap-1.5">
+                  {systemLocked && systemLock.provenance ? (
+                    <GitOpsSourceBadge
+                      provenance={systemLock.provenance}
+                      iconClassName="w-3 h-3 text-primary"
+                    />
+                  ) : null}
+                  {sys.name}
+                </span>
                 <Button
                   variant="ghost"
                   className="text-destructive/60 hover:text-destructive h-6 w-6 p-0 flex-shrink-0"
                   onClick={() => onRemoveSystem(group.id, sys.id)}
+                  disabled={systemLocked}
+                  title={
+                    systemLocked
+                      ? "Managed by GitOps"
+                      : `Remove ${sys.name} from ${group.name}`
+                  }
                   aria-label={`Remove ${sys.name} from ${group.name}`}
                 >
                   <Trash2 className="w-3 h-3" />

package/src/components/SystemDetailPage.tsx

@@ -24,7 +24,7 @@ import {
 } from "@checkstack/ui";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 
-import { Activity, Calendar, Mail, User } from "lucide-react";
+import { Activity, Calendar, ExternalLink, Mail, User } from "lucide-react";
 
 export const SystemDetailPage: React.FC = () => {
   const { systemId } = useParams<{ systemId: string }>();
@@ -49,6 +49,12 @@ export const SystemDetailPage: React.FC = () => {
     { enabled: !!systemId },
   );
 
+  // Fetch additional links for this system
+  const { data: linksData } = catalogClient.getSystemLinks.useQuery(
+    { systemId: systemId ?? "" },
+    { enabled: !!systemId },
+  );
+
   // Find the system from the fetched data
   const system = systemsData?.systems.find((s) => s.id === systemId);
   const loading = systemsLoading || groupsLoading;
@@ -206,6 +212,37 @@ export const SystemDetailPage: React.FC = () => {
 
             <div className="h-px bg-border" />
 
+            {/* Additional Links */}
+            <div className="space-y-2">
+              <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                Additional Links
+              </h3>
+              {!linksData || linksData.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No links</p>
+              ) : (
+                <div className="space-y-1.5">
+                  {linksData.map((link) => (
+                    <div
+                      key={link.id}
+                      className="flex items-center gap-2 text-sm"
+                    >
+                      <ExternalLink className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                      <a
+                        href={link.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline truncate"
+                      >
+                        {link.label ?? link.url}
+                      </a>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className="h-px bg-border" />
+
             {/* Groups */}
             <div className="space-y-2">
               <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">

package/src/components/SystemEditor.tsx

@@ -13,6 +13,7 @@ import {
 } from "@checkstack/ui";
 import { TeamAccessEditor } from "@checkstack/auth-frontend";
 import { ContactsEditor } from "./ContactsEditor";
+import { SystemLinksEditor } from "./SystemLinksEditor";
 import { ExtensionSlot } from "@checkstack/frontend-api";
 import { SystemEditorSlot } from "@checkstack/catalog-common";
 import { extractErrorMessage } from "@checkstack/common";
@@ -107,6 +108,9 @@ export const SystemEditor: React.FC<SystemEditorProps> = ({
             {/* Contacts Editor - only shown for existing systems */}
             {initialData?.id && <ContactsEditor systemId={initialData.id} />}
 
+            {/* Additional Links - only shown for existing systems */}
+            {initialData?.id && <SystemLinksEditor systemId={initialData.id} />}
+
             {/* Team Access Editor - only shown for existing systems */}
             {initialData?.id && (
               <TeamAccessEditor

package/src/components/SystemLinksEditor.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { LinksEditor, useToast } from "@checkstack/ui";
+import {
+  usePluginClient,
+  useApi,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { CatalogApi, catalogAccess } from "@checkstack/catalog-common";
+import { extractErrorMessage } from "@checkstack/common";
+
+interface Props {
+  systemId: string;
+}
+
+/**
+ * Catalog-specific wrapper around the shared {@link LinksEditor}. Owns the
+ * RPC + cache wiring so callers (system editor dialog, detail page sidebar,
+ * etc.) just drop in the systemId.
+ */
+export const SystemLinksEditor: React.FC<Props> = ({ systemId }) => {
+  const catalogClient = usePluginClient(CatalogApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
+
+  const { allowed: canManage } = accessApi.useAccess(catalogAccess.system.manage);
+
+  const { data: links = [], refetch } =
+    catalogClient.getSystemLinks.useQuery({ systemId });
+
+  const addMutation = catalogClient.addSystemLink.useMutation({
+    onSuccess: () => {
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to add link"));
+    },
+  });
+
+  const removeMutation = catalogClient.removeSystemLink.useMutation({
+    onSuccess: () => {
+      void refetch();
+    },
+    onError: (error) => {
+      toast.error(extractErrorMessage(error, "Failed to remove link"));
+    },
+  });
+
+  return (
+    <LinksEditor
+      title="Additional Links"
+      description="Jira boards, ticket tools, dashboards, or any URL related to this system."
+      links={links}
+      canManage={canManage}
+      busy={addMutation.isPending || removeMutation.isPending}
+      onAdd={async ({ label, url }) => {
+        await addMutation.mutateAsync({ systemId, label, url });
+      }}
+      onRemove={async (link) => {
+        await removeMutation.mutateAsync(link.id);
+      }}
+    />
+  );
+};

package/src/index.tsx

@@ -52,6 +52,7 @@ export const catalogPlugin = createFrontendPlugin({
     createSlotExtension(UserMenuItemsSlot, {
       id: "catalog.user-menu.items",
       component: CatalogUserMenuItems,
+      metadata: { group: "Workspace" },
     }),
   ],
 });

package/tsconfig.json

@@ -28,6 +28,9 @@
     {
       "path": "../notification-frontend"
     },
+    {
+      "path": "../tips-frontend"
+    },
     {
       "path": "../ui"
     }