@checkstack/dashboard-frontend 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @checkstack/dashboard-frontend
 
+## 0.7.0
+
+### Minor Changes
+
+- 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
+
+- Updated dependencies [42abfff]
+- 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/anomaly-common@1.1.0
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/catalog-frontend@0.10.0
+  - @checkstack/incident-common@1.1.0
+  - @checkstack/maintenance-common@1.1.0
+  - @checkstack/catalog-common@2.1.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/queue-frontend@0.4.0
+  - @checkstack/notification-frontend@0.4.0
+  - @checkstack/tips-frontend@0.2.0
+  - @checkstack/auth-frontend@0.6.0
+  - @checkstack/command-common@0.2.11
+  - @checkstack/command-frontend@0.2.35
+  - @checkstack/healthcheck-common@1.0.2
+  - @checkstack/notification-common@1.0.2
+  - @checkstack/signal-frontend@0.1.2
+
 ## 0.6.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/dashboard-frontend",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -14,22 +14,23 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.0.0",
-    "@checkstack/auth-frontend": "0.5.32",
-    "@checkstack/catalog-common": "2.0.0",
-    "@checkstack/catalog-frontend": "0.9.0",
-    "@checkstack/command-common": "0.2.9",
-    "@checkstack/command-frontend": "0.2.33",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/healthcheck-common": "1.0.0",
-    "@checkstack/incident-common": "1.0.0",
-    "@checkstack/maintenance-common": "1.0.0",
-    "@checkstack/notification-common": "1.0.0",
-    "@checkstack/notification-frontend": "0.3.0",
-    "@checkstack/queue-frontend": "0.3.2",
-    "@checkstack/signal-frontend": "0.1.0",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/anomaly-common": "1.0.1",
+    "@checkstack/auth-frontend": "0.5.33",
+    "@checkstack/catalog-common": "2.0.1",
+    "@checkstack/catalog-frontend": "0.9.1",
+    "@checkstack/command-common": "0.2.10",
+    "@checkstack/command-frontend": "0.2.34",
+    "@checkstack/common": "0.8.0",
+    "@checkstack/frontend-api": "0.4.2",
+    "@checkstack/healthcheck-common": "1.0.1",
+    "@checkstack/incident-common": "1.0.1",
+    "@checkstack/maintenance-common": "1.0.1",
+    "@checkstack/notification-common": "1.0.1",
+    "@checkstack/notification-frontend": "0.3.1",
+    "@checkstack/queue-frontend": "0.3.3",
+    "@checkstack/signal-frontend": "0.1.1",
+    "@checkstack/tips-frontend": "0.1.0",
+    "@checkstack/ui": "1.7.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
@@ -38,7 +39,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/Dashboard.tsx

@@ -14,6 +14,8 @@ import {
   catalogGroupTarget,
 } from "@checkstack/catalog-common";
 import { resolveRoute } from "@checkstack/common";
+import { TipBanner } from "@checkstack/tips-frontend";
+import { pluginMetadata as dashboardTipMetadata } from "./pluginMetadata";
 import { NotificationSubscriptionsManager } from "@checkstack/notification-frontend";
 import { IncidentApi } from "@checkstack/incident-common";
 import { MaintenanceApi } from "@checkstack/maintenance-common";
@@ -28,6 +30,7 @@ import {
   SectionHeader,
   StatusCard,
   EmptyState,
+  Button,
   LoadingSpinner,
   AnimatedCounter,
   TerminalFeed,
@@ -44,6 +47,7 @@ import {
   Wrench,
   Terminal,
   ActivitySquare,
+  Lightbulb,
 } from "lucide-react";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 import { QueueLagAlert } from "@checkstack/queue-frontend";
@@ -215,9 +219,20 @@ export const Dashboard: React.FC = () => {
     if (groupsWithSystems.length === 0) {
       return (
         <EmptyState
-          title="No system groups found"
-          description="Visit the Catalog to create your first group."
           icon={<Server className="w-12 h-12" />}
+          title="Nothing to show on the dashboard yet"
+          description="Once you have systems organised into groups, this is where you'll see their rolled-up health, on a per-team or per-product basis."
+          steps={[
+            "Open the Catalog and add the systems you want to monitor.",
+            "Group related systems together (e.g. one group per team).",
+            "Attach health checks to each system so the dashboard turns green when things are working — and red when they aren't.",
+          ]}
+          actions={
+            <Button onClick={() => navigate(resolveRoute(catalogRoutes.routes.config))}>
+              <LayoutGrid className="w-4 h-4 mr-2" />
+              Open Catalog
+            </Button>
+          }
         />
       );
     }
@@ -307,6 +322,35 @@ export const Dashboard: React.FC = () => {
         {/* Queue Lag Warning */}
         <QueueLagAlert />
 
+        {/* First-run welcome */}
+        <TipBanner
+          plugin={dashboardTipMetadata}
+          id="welcome"
+          title="Welcome to Checkstack"
+          description={
+            <>
+              This is your dashboard — overall health, recent activity, and
+              ongoing maintenances at a glance. To bring it to life, start
+              by adding a system in the <strong>Catalog</strong>, then
+              attach a health check to it.
+            </>
+          }
+          action={{
+            label: "Open Catalog",
+            onClick: () => navigate(resolveRoute(catalogRoutes.routes.config)),
+          }}
+          actionHint={
+            <span className="inline-flex items-center gap-1.5">
+              <Lightbulb
+                className="size-3.5 shrink-0 text-amber-500"
+                aria-hidden="true"
+              />
+              See a small lightbulb next to a button or control? Click it
+              for a short explanation of what that feature does.
+            </span>
+          }
+        />
+
         {/* Overview Section */}
         <section>
           <SectionHeader

package/src/index.tsx

@@ -1,10 +1,6 @@
 import { FrontendPlugin, DashboardSlot } from "@checkstack/frontend-api";
-import { definePluginMetadata } from "@checkstack/common";
 import { Dashboard } from "./Dashboard";
-
-const pluginMetadata = definePluginMetadata({
-  pluginId: "dashboard",
-});
+import { pluginMetadata } from "./pluginMetadata";
 
 export const dashboardPlugin: FrontendPlugin = {
   metadata: pluginMetadata,

package/src/pluginMetadata.ts

@@ -0,0 +1,5 @@
+import { definePluginMetadata } from "@checkstack/common";
+
+export const pluginMetadata = definePluginMetadata({
+  pluginId: "dashboard",
+});

package/tsconfig.json

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