@checkstack/notification-frontend 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @checkstack/notification-frontend
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [9016526]
+  - @checkstack/common@0.10.0
+  - @checkstack/notification-common@1.1.0
+  - @checkstack/auth-frontend@0.6.1
+  - @checkstack/frontend-api@0.5.1
+  - @checkstack/tips-frontend@0.2.1
+  - @checkstack/ui@1.8.1
+  - @checkstack/signal-frontend@0.1.3
+
+## 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
+
+- 3547670: Add a `<Tip>` next to the title in the notification-subscriptions modal
+  that explains the two things that confuse first-time users: (1) the
+  difference between subscribing to an individual system vs. subscribing
+  to a whole group (groups auto-include systems added later), and (2) the
+  difference between "Subscribe to all" and toggling specific rows for
+  just the event types they care about. Tip id:
+  `notification.subscriptions.intro`.
+- 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/auth-frontend@0.6.0
+  - @checkstack/notification-common@1.0.2
+  - @checkstack/signal-frontend@0.1.2
+
 ## 0.3.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,20 +13,21 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/notification-common": "1.0.0",
-    "@checkstack/frontend-api": "0.4.1",
-    "@checkstack/auth-frontend": "0.5.32",
-    "@checkstack/signal-frontend": "0.1.0",
-    "@checkstack/common": "0.7.0",
-    "@checkstack/ui": "1.7.0",
+    "@checkstack/auth-frontend": "0.6.0",
+    "@checkstack/common": "0.9.0",
+    "@checkstack/frontend-api": "0.5.0",
+    "@checkstack/notification-common": "1.0.2",
+    "@checkstack/signal-frontend": "0.1.2",
+    "@checkstack/tips-frontend": "0.2.0",
+    "@checkstack/ui": "1.8.0",
+    "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.1"
   }
 }

package/src/components/NotificationSubscriptionsManager.tsx

@@ -15,9 +15,11 @@ import { usePluginClient } from "@checkstack/frontend-api";
 import {
   NotificationApi,
   subscriptionGroupId,
+  pluginMetadata as notificationPluginMetadata,
   type NotificationTarget,
 } from "@checkstack/notification-common";
 import { extractErrorMessage } from "@checkstack/common";
+import { Tip } from "@checkstack/tips-frontend";
 import { SubscriptionRow } from "./SubscriptionRow";
 
 export interface NotificationSubscriptionsManagerProps<TResource> {
@@ -111,14 +113,10 @@ export function NotificationSubscriptionsManager<TResource>({
           .filter((id) => statusMap[id])
           .map((groupId) => unsubscribeMutation.mutateAsync({ groupId })),
       );
-      toast.success(
-        `Unsubscribed from all notifications for ${resourceLabel}`,
-      );
+      toast.success(`Unsubscribed from all notifications for ${resourceLabel}`);
       void refetchStatus();
     } catch (error) {
-      toast.error(
-        extractErrorMessage(error, "Failed to unsubscribe from all"),
-      );
+      toast.error(extractErrorMessage(error, "Failed to unsubscribe from all"));
     }
   };
 
@@ -148,25 +146,58 @@ export function NotificationSubscriptionsManager<TResource>({
         <DialogContent size="lg">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              <Bell className="h-4 w-4" />
+              <Bell className="w-4 h-4" />
               Notifications for {resourceLabel}
+              <Tip
+                plugin={notificationPluginMetadata}
+                id="subscriptions.intro"
+                title="How notification subscriptions work"
+                description={
+                  <div className="space-y-2">
+                    <p>
+                      <strong>System vs. group.</strong> Subscribing to a system
+                      means you'll only hear about that one thing. Subscribing
+                      to a group means you'll hear about every system inside
+                      that group — useful if a teammate adds new systems later,
+                      since the group covers them automatically.
+                    </p>
+                    <p>
+                      <strong>All vs. specific types.</strong> Each row below is
+                      a different kind of event (incidents, anomalies, …). Use
+                      “Subscribe to all” at the top to opt in to everything, or
+                      toggle rows individually if you only care about, say,
+                      critical incidents.
+                    </p>
+                    <p>
+                      Where things actually reach you (Slack, email, Telegram,
+                      …) is configured once in <em>Notification Settings</em>{" "}
+                      and applies to every subscription.
+                    </p>
+                  </div>
+                }
+                side="bottom"
+                align="start"
+                contentClassName="w-96"
+              >
+                <span className="sr-only">Subscription help</span>
+              </Tip>
             </DialogTitle>
             <DialogDescription>
-              Choose which notification types you want to receive for
-              this {target.resourceKind}.
+              Choose which notification types you want to receive for this{" "}
+              {target.resourceKind}.
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-3">
             {totalCount === 0 ? (
-              <div className="rounded-md border border-border bg-muted/20 p-4 text-sm text-muted-foreground">
+              <div className="p-4 text-sm border rounded-md border-border bg-muted/20 text-muted-foreground">
                 No notification types are available for this{" "}
                 {target.resourceKind} yet.
               </div>
             ) : (
               <>
-                <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-muted/20 p-3">
-                  <div className="text-sm min-w-0">
+                <div className="flex items-center justify-between gap-3 p-3 border rounded-md border-border bg-muted/20">
+                  <div className="min-w-0 text-sm">
                     <div className="font-medium">
                       {subscribedCount} of {totalCount} subscribed
                     </div>
@@ -183,7 +214,7 @@ export function NotificationSubscriptionsManager<TResource>({
                         disabled={isPending}
                         onClick={handleUnsubscribeAll}
                       >
-                        <BellOff className="mr-1 h-3 w-3" />
+                        <BellOff className="w-3 h-3 mr-1" />
                         Unsubscribe from all
                       </Button>
                     ) : (
@@ -194,13 +225,13 @@ export function NotificationSubscriptionsManager<TResource>({
                         disabled={isPending}
                         onClick={handleSubscribeAll}
                       >
-                        <BellRing className="mr-1 h-3 w-3" />
+                        <BellRing className="w-3 h-3 mr-1" />
                         Subscribe to all
                       </Button>
                     )}
                   </div>
                 </div>
-                <div className="overflow-hidden rounded-md border border-border">
+                <div className="overflow-hidden border rounded-md border-border">
                   {specs.map((spec) => {
                     const groupId = subscriptionGroupId(spec, resourceKey);
                     return (

package/src/index.tsx

@@ -57,6 +57,7 @@ export const notificationPlugin = createFrontendPlugin({
     createSlotExtension(UserMenuItemsSlot, {
       id: "notification.user.setting",
       component: NotificationUserMenuItems,
+      metadata: { group: "Configuration" },
     }),
   ],
 });

package/src/pages/NotificationSettingsPage.tsx

@@ -17,7 +17,9 @@ import type { EnrichedSubscription } from "@checkstack/notification-common";
 import {
   NotificationApi,
   notificationAccess,
+  pluginMetadata as notificationPluginMetadata,
 } from "@checkstack/notification-common";
+import { TipBanner } from "@checkstack/tips-frontend";
 import {
   StrategyCard,
   type DeliveryStrategy,
@@ -246,6 +248,13 @@ export const NotificationSettingsPage = () => {
   return (
     <PageLayout title="Notification Settings" icon={Bell} loading={subsLoading}>
       <div className="space-y-8">
+        <TipBanner
+          plugin={notificationPluginMetadata}
+          id="settings.intro"
+          title="Two pieces fit together: channels and subscriptions"
+          description="A channel is how you'd like to be reached (Slack DM, email, Telegram, etc.). A subscription is what you want to be reached about (a system group, a specific incident severity). Connect at least one channel here, then subscribe from the dashboard or the system detail pages."
+        />
+
         {/* Your Notification Channels - All users */}
         <section>
           <SectionHeader

package/tsconfig.json

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