@checkstack/integration-frontend 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # @checkstack/integration-frontend
 
+## 0.4.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
+
+- 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 [1ef2e79]
+- Updated dependencies [aa89bc5]
+- Updated dependencies [3547670]
+- Updated dependencies [950d6ec]
+- Updated dependencies [3547670]
+  - @checkstack/common@0.9.0
+  - @checkstack/ui@1.8.0
+  - @checkstack/frontend-api@0.5.0
+  - @checkstack/tips-frontend@0.2.0
+  - @checkstack/integration-common@0.3.2
+  - @checkstack/signal-frontend@0.1.2
+
 ## 0.3.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/integration-frontend",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,19 +13,20 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/integration-common": "0.3.0",
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/signal-frontend": "0.1.0",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/common": "0.8.0",
+    "@checkstack/frontend-api": "0.4.2",
+    "@checkstack/integration-common": "0.3.1",
+    "@checkstack/signal-frontend": "0.1.1",
+    "@checkstack/tips-frontend": "0.1.0",
+    "@checkstack/ui": "1.7.1",
+    "lucide-react": "^0.344.0",
     "react": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "lucide-react": "^0.344.0"
+    "react-router-dom": "^6.22.0"
   },
   "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/index.tsx

@@ -41,6 +41,7 @@ export const integrationPlugin = createFrontendPlugin({
     createSlotExtension(UserMenuItemsSlot, {
       id: "integration.user-menu.link",
       component: IntegrationMenuItem,
+      metadata: { group: "Configuration" },
     }),
   ],
 });

package/src/pages/IntegrationsPage.tsx

@@ -30,9 +30,11 @@ import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
+  pluginMetadata as integrationPluginMetadata,
   type WebhookSubscription,
   type IntegrationProviderInfo,
 } from "@checkstack/integration-common";
+import { Tip } from "@checkstack/tips-frontend";
 import { SubscriptionDialog } from "../components/CreateSubscriptionDialog";
 
 export const IntegrationsPage = () => {
@@ -119,10 +121,19 @@ export const IntegrationsPage = () => {
       icon={LinkIcon}
       loading={loading}
       actions={
-        <Button onClick={openCreateDialog}>
-          <Plus className="h-4 w-4 mr-2" />
-          New Subscription
-        </Button>
+        <Tip
+          plugin={integrationPluginMetadata}
+          id="subscriptions.create"
+          title="Send Checkstack events anywhere"
+          description="A subscription forwards events (incidents, status changes, deployments) to an external system. Pick a connected provider — webhook, Jira, Teams, Slack — and choose which event types it cares about. Failed deliveries retry automatically and show up in the delivery logs."
+          side="bottom"
+          align="end"
+        >
+          <Button onClick={openCreateDialog}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Subscription
+          </Button>
+        </Tip>
       }
     >
       <div className="space-y-8">
@@ -194,8 +205,19 @@ export const IntegrationsPage = () => {
           {subscriptions.length === 0 ? (
             <EmptyState
               icon={<Webhook className="h-12 w-12" />}
-              title="No webhook subscriptions"
-              description="Create a subscription to start routing events to external systems"
+              title="No webhook subscriptions yet"
+              description="A subscription forwards events from Checkstack (incidents, status changes, deployments) to external systems — Jira, ServiceNow, your own webhook receiver, anything that speaks HTTP."
+              steps={[
+                "Connect at least one provider on the Provider Connections page (Jira, Webhook, Teams, …).",
+                "Create a subscription that picks one or more event types to forward.",
+                "Watch the Delivery Logs to confirm payloads are reaching their destination.",
+              ]}
+              actions={
+                <Button onClick={openCreateDialog}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  New subscription
+                </Button>
+              }
             />
           ) : (
             <Card>

package/src/pages/ProviderConnectionsPage.tsx

@@ -276,13 +276,19 @@ export const ProviderConnectionsPage = () => {
             />
           }
           title="No connections configured"
-          description="Create a connection to start using this provider"
-        >
-          <Button onClick={openCreateDialog} className="mt-4">
-            <Plus className="h-4 w-4 mr-2" />
-            Create Connection
-          </Button>
-        </EmptyState>
+          description={`A connection holds the credentials and base configuration that ${provider?.displayName ?? "this provider"} needs in order to deliver events from Checkstack. Once a connection exists you can subscribe to events from the Integrations page.`}
+          steps={[
+            "Click “Create Connection” and fill in the credentials this provider needs.",
+            "Give the connection a name that says where it points (e.g. “Prod Jira” vs. “Sandbox Jira”).",
+            "Head back to Integrations and create a webhook subscription that uses this connection.",
+          ]}
+          actions={
+            <Button onClick={openCreateDialog}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create connection
+            </Button>
+          }
+        />
       ) : (
         <Card>
           <CardHeader>

package/tsconfig.json

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