@checkstack/announcement-frontend 0.3.3 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @checkstack/announcement-frontend
 
+## 0.3.5
+
+### Patch Changes
+
+- f23f3c9: Gate decorative motion and blur effects behind
+  `usePerformance().isLowPower` on a focused set of high-traffic plugin
+  pages (Dashboard, Dependency map, System node, Notification bell,
+  Announcement banner / cards, Anomaly field overrides editor, SLO
+  attribution chart, Catalog droppable group). Hover scales, backdrop
+  blurs, `animate-pulse`/`animate-ping` accents, and entry transitions
+  now drop to static states on low-power devices; functional UX
+  transitions (Drawer/Dialog open-close, colour transitions) are left
+  alone.
+
+  Standardise the post-mutation error-toast voice on plugin pages by
+  migrating multi-clause `toast.error(extractErrorMessage(error, "Failed
+to X"))` call sites onto the `toastError(toast, "Failed to X", error)`
+  helper from `@checkstack/ui`. The helper applies the canonical
+  `"action: message"` prefix and 100-character truncation in one place,
+  and the now-orphaned `extractErrorMessage` imports are dropped from
+  the affected files. No business logic or component APIs changed.
+
+- f23f3c9: Standardise the empty / loading / error story on key list pages using
+  the shared `ListEmptyState`, `QueryErrorState`, and `Skeleton`
+  primitives from `@checkstack/ui`. Each affected page now branches
+  through the same `isLoading -> isError -> empty -> data` ladder, so
+  failed queries surface a retry-able inline error instead of silently
+  rendering an empty table, and loading states match the final layout
+  rather than flashing a generic spinner. No layout, business logic, or
+  query input shapes changed.
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/auth-frontend@0.6.5
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/ui@1.10.0
+  - @checkstack/announcement-common@0.4.1
+  - @checkstack/tips-frontend@0.2.5
+  - @checkstack/signal-frontend@0.1.4
+
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies [a06b899]
+  - @checkstack/ui@1.9.0
+  - @checkstack/auth-frontend@0.6.4
+  - @checkstack/tips-frontend@0.2.4
+
 ## 0.3.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/announcement-frontend",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@checkstack/announcement-common": "0.4.0",
-    "@checkstack/auth-frontend": "0.6.2",
+    "@checkstack/auth-frontend": "0.6.4",
     "@checkstack/common": "0.10.0",
     "@checkstack/frontend-api": "0.5.1",
     "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/tips-frontend": "0.2.2",
-    "@checkstack/ui": "1.8.2",
+    "@checkstack/tips-frontend": "0.2.4",
+    "@checkstack/ui": "1.9.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",

package/src/components/AnnouncementBanner.tsx

@@ -4,7 +4,7 @@ import {
   AnnouncementApi,
   type Announcement,
 } from "@checkstack/announcement-common";
-import { MarkdownBlock } from "@checkstack/ui";
+import { MarkdownBlock, cn, usePerformance } from "@checkstack/ui";
 import {
   Info,
   AlertTriangle,
@@ -106,6 +106,7 @@ function BannerItem({
   announcement: Announcement;
   onDismiss: (id: string) => void;
 }) {
+  const { isLowPower } = usePerformance();
   const [expanded, setExpanded] = useState(false);
   const styles = getSeverityStyles(announcement.severity);
 
@@ -114,7 +115,12 @@ function BannerItem({
 
   return (
     <div
-      className={`${styles.bg} ${styles.border} border-b px-4 py-2 transition-all duration-200`}
+      className={cn(
+        styles.bg,
+        styles.border,
+        "border-b px-4 py-2",
+        !isLowPower && "transition-all duration-200",
+      )}
     >
       <div className="flex items-center gap-3 max-w-7xl mx-auto">
         <SeverityIcon severity={announcement.severity} />

package/src/components/DashboardAnnouncements.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { usePluginClient } from "@checkstack/frontend-api";
 import { AnnouncementApi, type Announcement } from "@checkstack/announcement-common";
-import { MarkdownBlock } from "@checkstack/ui";
+import { MarkdownBlock, cn, usePerformance } from "@checkstack/ui";
 import {
   Info,
   AlertTriangle,
@@ -55,13 +55,18 @@ function getSeverityColor(severity: Announcement["severity"]): string {
  * A single compact announcement card with expand/collapse.
  */
 function AnnouncementCard({ announcement }: { announcement: Announcement }) {
+  const { isLowPower } = usePerformance();
   const [expanded, setExpanded] = useState(false);
   const severityColor = getSeverityColor(announcement.severity);
   const [borderClass, textClass] = severityColor.split(" ");
 
   return (
     <div
-      className={`bg-card border border-border rounded-lg border-l-4 ${borderClass} transition-all duration-200`}
+      className={cn(
+        "bg-card border border-border rounded-lg border-l-4",
+        borderClass,
+        !isLowPower && "transition-all duration-200",
+      )}
     >
       <button
         type="button"
@@ -83,7 +88,12 @@ function AnnouncementCard({ announcement }: { announcement: Announcement }) {
       </button>
 
       {expanded && (
-        <div className="px-4 pb-3 pl-11 animate-in slide-in-from-top-1 duration-200">
+        <div
+          className={cn(
+            "px-4 pb-3 pl-11",
+            !isLowPower && "animate-in slide-in-from-top-1 duration-200",
+          )}
+        >
           <div className="text-sm text-muted-foreground">
             <MarkdownBlock size="sm">{announcement.message}</MarkdownBlock>
           </div>
@@ -99,6 +109,7 @@ function AnnouncementCard({ announcement }: { announcement: Announcement }) {
  * Only shows when there are active dashboard-mode announcements.
  */
 export const DashboardAnnouncements: React.FC = () => {
+  const { isLowPower } = usePerformance();
   const announcementClient = usePluginClient(AnnouncementApi);
 
   // Always refetch on mount so the dashboard shows fresh data when navigated to.
@@ -121,7 +132,9 @@ export const DashboardAnnouncements: React.FC = () => {
   }
 
   return (
-    <section className="animate-in fade-in duration-300">
+    <section
+      className={cn(!isLowPower && "animate-in fade-in duration-300")}
+    >
       <div className="flex items-center gap-2 mb-3">
         <Megaphone className="w-4 h-4 text-muted-foreground" />
         <h3 className="text-sm font-medium text-muted-foreground">

package/src/pages/AnnouncementManagePage.tsx

@@ -25,6 +25,7 @@ import {
   Badge,
   LoadingSpinner,
   EmptyState,
+  QueryErrorState,
   Table,
   TableHeader,
   TableRow,
@@ -47,6 +48,7 @@ import {
   Input,
   Label,
   Textarea,
+  toastError,
 } from "@checkstack/ui";
 import {
   Plus,
@@ -61,7 +63,6 @@ import {
   Columns,
 } from "lucide-react";
 import { formatDistanceToNow, format } from "date-fns";
-import { extractErrorMessage } from "@checkstack/common";
 
 // ---------------------------------------------------------------------------
 // Editor Dialog
@@ -136,7 +137,7 @@ const AnnouncementEditor: React.FC<AnnouncementEditorProps> = ({
       onSave();
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to create"));
+      toastError(toast, "Failed to create announcement", error);
     },
   });
 
@@ -147,7 +148,7 @@ const AnnouncementEditor: React.FC<AnnouncementEditorProps> = ({
       onSave();
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to update"));
+      toastError(toast, "Failed to update announcement", error);
     },
   });
 
@@ -457,11 +458,8 @@ const AnnouncementManageContent: React.FC = () => {
   >();
   const [deleteId, setDeleteId] = useState<string | undefined>();
 
-  const {
-    data: announcementsData,
-    isLoading,
-    refetch,
-  } = announcementClient.listAllAnnouncements.useQuery();
+  const announcementsQuery = announcementClient.listAllAnnouncements.useQuery();
+  const { data: announcementsData, isLoading, refetch } = announcementsQuery;
 
   const deleteMutation = announcementClient.deleteAnnouncement.useMutation({
     onSuccess: () => {
@@ -470,7 +468,7 @@ const AnnouncementManageContent: React.FC = () => {
       setDeleteId(undefined);
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to delete"));
+      toastError(toast, "Failed to delete announcement", error);
     },
   });
 
@@ -530,6 +528,14 @@ const AnnouncementManageContent: React.FC = () => {
             <div className="p-12 flex justify-center">
               <LoadingSpinner />
             </div>
+          ) : announcementsQuery.isError ? (
+            <div className="p-4">
+              <QueryErrorState
+                error={announcementsQuery.error}
+                onRetry={() => void announcementsQuery.refetch()}
+                resource="announcements"
+              />
+            </div>
           ) : announcements.length === 0 ? (
             <EmptyState
               icon={<Megaphone className="size-10" />}