Refactor to move Banner and message store

Author: cptKNJO

urbackupserver/www2/src/components/Banner/Banner.tsx

@@ -0,0 +1,67 @@
+import {
+  MessageBar,
+  MessageBarBody,
+  MessageBarActions,
+  Button,
+  MessageBarTitle,
+} from "@fluentui/react-components";
+import { DismissRegular } from "@fluentui/react-icons";
+import { useEffect } from "react";
+import { useSnapshot } from "valtio";
+
+import {
+  clearMessages,
+  dismissMessage,
+  Message,
+  messageStore,
+} from "./messageStore";
+
+export function Banner() {
+  const snap = useSnapshot(messageStore);
+
+  useEffect(() => {
+    return clearMessages();
+  }, []);
+
+  if (!snap.messages.length) {
+    return null;
+  }
+
+  return snap.messages.map((message) => (
+    <SingleBanner
+      key={message.id}
+      message={message}
+      onClick={() => dismissMessage(message.id)}
+    />
+  ));
+}
+
+export function SingleBanner({
+  message,
+  onClick,
+}: {
+  message: Omit<Message, "id">;
+  onClick?: () => void;
+}) {
+  return (
+    <MessageBar
+      intent={message.intent}
+      role={message.intent === "error" ? "alert" : "status"}
+    >
+      <MessageBarBody>
+        <MessageBarTitle>{message.title}</MessageBarTitle>
+        {message.text}
+      </MessageBarBody>
+      <MessageBarActions
+        containerAction={
+          <Button
+            aria-label="dismiss"
+            appearance="transparent"
+            icon={<DismissRegular />}
+            onClick={onClick}
+          />
+        }
+      />
+    </MessageBar>
+  );
+}

urbackupserver/www2/src/features/settings/SettingsUsers/messageStore.ts renamed to urbackupserver/www2/src/components/Banner/messageStore.ts

@@ -1,24 +1,21 @@
 import { MessageBarIntent } from "@fluentui/react-components";
 import { proxy } from "valtio";
 
-interface Message {
+export interface Message {
   id: string;
-  intent: MessageBarIntent;
-  message: string;
+  text: string;
+  intent?: MessageBarIntent;
+  title?: string;
 }
 
 export const messageStore = proxy<{ messages: Message[] }>({
   messages: [],
 });
 
-export function addMessage(
-  intent: Message["intent"],
-  message: Message["message"],
-) {
-  messageStore.messages.push({
+export function addMessage(message: Omit<Message, "id">) {
+  messageStore.messages.unshift({
+    ...message,
     id: crypto.randomUUID(),
-    intent,
-    message,
   });
 }
 

urbackupserver/www2/src/features/settings/SettingsUsers/CreateUser.tsx

@@ -22,7 +22,10 @@ import {
 } from "../Fields/validation";
 import { DismissRegular } from "@fluentui/react-icons";
 import { UserAlreadyExistsError, UserRight } from "../../../api/urbackupserver";
-import { addMessage, clearMessages } from "./messageStore";
+import {
+  addMessage,
+  clearMessages,
+} from "../../../components/Banner/messageStore";
 import { useUsers, type UserInput } from "./useUsers";
 
 const ADMIN_RIGHTS: UserRight[] = [
@@ -84,14 +87,20 @@ export const CreateUser = () => {
 
   const handleSuccess = () => {
     clearMessages();
-    addMessage("success", `New user successfully added.`);
+    addMessage({
+      intent: "success",
+      text: "New user successfully added.",
+    });
 
     setOpen(false);
   };
 
   const handleFailure = () => {
     clearMessages();
-    addMessage("error", `Failed to create new user.`);
+    addMessage({
+      intent: "error",
+      text: "Failed to create new user.",
+    });
 
     setOpen(false);
   };

urbackupserver/www2/src/features/settings/SettingsUsers/SettingsUsers.tsx

@@ -1,18 +1,8 @@
-import { useEffect } from "react";
-
 import { useSettings } from "../useSettings";
 import { UsersTable } from "./UsersTable";
 import { TableWrapper } from "../../../components/TableWrapper";
-import {
-  Button,
-  MessageBar,
-  MessageBarActions,
-  MessageBarBody,
-} from "@fluentui/react-components";
 import { CreateUser } from "./CreateUser";
-import { useSnapshot } from "valtio";
-import { clearMessages, dismissMessage, messageStore } from "./messageStore";
-import { DismissRegular } from "@fluentui/react-icons";
+import { Banner } from "../../../components/Banner/Banner";
 
 export function SettingsUsers() {
   const { settings } = useSettings();
@@ -36,31 +26,3 @@ export function SettingsUsers() {
     </div>
   );
 }
-
-function Banner() {
-  const snap = useSnapshot(messageStore);
-
-  useEffect(() => {
-    return clearMessages();
-  }, []);
-
-  if (!snap.messages.length) {
-    return null;
-  }
-
-  return snap.messages.map((m) => (
-    <MessageBar key={m.id} intent={m.intent}>
-      <MessageBarBody>{m.message}</MessageBarBody>
-      <MessageBarActions
-        containerAction={
-          <Button
-            aria-label="dismiss"
-            appearance="transparent"
-            icon={<DismissRegular />}
-            onClick={() => dismissMessage(m.id)}
-          />
-        }
-      />
-    </MessageBar>
-  ));
-}

urbackupserver/www2/src/features/settings/SettingsUsers/UserTableActions.tsx

@@ -11,20 +11,29 @@ import {
 
 import { UserListItem } from "../../../api/urbackupserver";
 import { useUsers } from "./useUsers";
-import { addMessage, clearMessages } from "./messageStore";
+import {
+  addMessage,
+  clearMessages,
+} from "../../../components/Banner/messageStore";
 import { useState } from "react";
 
 export function UserTableActions(user: UserListItem) {
   const { removeUser, isRemovable } = useUsers();
 
   const handleSuccess = () => {
     clearMessages();
-    addMessage("success", "Successfully removed user.");
+    addMessage({
+      intent: "success",
+      text: "Successfully removed user.",
+    });
   };
 
   const handleFailure = () => {
     clearMessages();
-    addMessage("error", `Failed to remove user.`);
+    addMessage({
+      intent: "error",
+      text: "Failed to remove user.",
+    });
   };
 
   const handleRemove = () => {