diff --git a/src/Interfaces/IProps_NotificationContext.ts b/src/Interfaces/IProps_NotificationContext.ts index 414717c..0daffcd 100644 --- a/src/Interfaces/IProps_NotificationContext.ts +++ b/src/Interfaces/IProps_NotificationContext.ts @@ -5,6 +5,7 @@ export interface SoundSettings { export interface Props_NotificationContext { showNotification: (title: string, message: string, icon: string, config?: SoundSettings) => void; - showBannerNotification: (title: string, message: string, permanent: boolean) => void; // New method + showBannerNotification: (title: string, message: string, permanent: boolean) => void; + showPopupNotification: (title: string, description: string, buttons: { text: string; onClick: () => void; type: "primary" | "secondary" | "danger" }[]) => void; hideNotification: (id: number) => void; } \ No newline at end of file diff --git a/src/components/FeatureButtonComponent/FeatureButtonComponent.tsx b/src/components/FeatureButtonComponent/FeatureButtonComponent.tsx index 49f61a6..f584928 100644 --- a/src/components/FeatureButtonComponent/FeatureButtonComponent.tsx +++ b/src/components/FeatureButtonComponent/FeatureButtonComponent.tsx @@ -58,12 +58,13 @@ const FeatureButtonComponent: React.FC = ({ > + {/* Tooltip */} diff --git a/src/components/NotificationManager/Buttons.css b/src/components/NotificationManager/Buttons.css new file mode 100644 index 0000000..be12dcb --- /dev/null +++ b/src/components/NotificationManager/Buttons.css @@ -0,0 +1,33 @@ +.popup-btn-primary { + @apply h-[40px]; + @apply text-[15px]; + @apply font-medium; + @apply rounded-md; + @apply text-comment-color; + @apply px-5; + @apply bg-background-card; + @apply hover:bg-background-card-selected; + @apply hover:text-white; +} + +.popup-btn-secondary { + @apply h-[40px]; + @apply text-[15px]; + @apply font-medium; + @apply rounded-md; + @apply text-comment-color; + @apply px-5; + @apply hover:text-white; +} + +.popup-btn-danger { + @apply h-[40px]; + @apply text-white; + @apply font-medium; + @apply rounded-md; + @apply px-3; + @apply text-white; + @apply bg-jenkins-job-red; + @apply hover:brightness-[0.9]; + @apply active:brightness-[0.7] +} \ No newline at end of file diff --git a/src/components/NotificationManager/NotificationContext.tsx b/src/components/NotificationManager/NotificationContext.tsx index dd1b3a1..797d2a7 100644 --- a/src/components/NotificationManager/NotificationContext.tsx +++ b/src/components/NotificationManager/NotificationContext.tsx @@ -8,12 +8,14 @@ import { BannerNotificcation, Notification } from "../../Interfaces/INotificatio import { NOTIFICATION_CLOSE_TIME } from "../../config/constants"; import Logger from "../../helpers/Logger"; +import "./Buttons.css"; + // Audio import notification_info from "../../assets/sounds/notification_info.mp3"; import notification_pop from "../../assets/sounds/notification_pop.mp3"; import notification_success from "../../assets/sounds/notification_success.mp3"; import notification_error from "../../assets/sounds/notification_error.mp3"; -import { IcoCross } from "@/Icons/pack_1"; +import { IcoCross, IcoError, IcoQuestionmark, IcoSuccess } from "@/Icons/pack_1"; import { Props_NotificationContext, SoundSettings } from "@/Interfaces/IProps_NotificationContext"; @@ -24,9 +26,6 @@ const notificationSounds = { error: new Audio(notification_error), }; - - - const NotificationContext = createContext(undefined); export function playAudio(soundType: "success" | "error" | "pop" | "info") { @@ -45,7 +44,7 @@ export function useNotification() { return context; } catch (error) { Logger.error("NotificationContext.tsx", "Error using notification:", error); - return { showNotification: () => { }, showBannerNotification: () => { }, hideNotification: () => { } }; + return { showNotification: () => { }, showBannerNotification: () => { }, showPopupNotification: () => { }, hideNotification: () => { } }; } } @@ -55,11 +54,21 @@ interface Props_NotificationProvider { children: ReactNode; } +interface PopupNotification { + title: string; + description: string; + buttons: { + text: string; + onClick: () => void; + type: "primary" | "secondary" | "danger"; + }[]; +} export const NotificationProvider: React.FC = ({ children }) => { const [notifications, setNotifications] = useState([]); const [bannerNotification, setBannerNotification] = useState(null); + const [popupNotification, setPopupNotification] = useState(null); const showNotification = (title: string, message: string, icon: string, config: SoundSettings = { soundOn: true, @@ -99,12 +108,24 @@ export const NotificationProvider: React.FC = ({ chi setBannerNotification(newNotification); }; + // function using PopupNotification for props + const showPopupNotification = (title: string, description: string, buttons: { text: string; onClick: () => void; type: "primary" | "secondary" | "danger" }[]) => { + const newNotification: PopupNotification = { + title, + description, + buttons, + }; + + setPopupNotification(newNotification); + }; + + const hideNotification = (id: number) => { setNotifications((prevNotifications) => prevNotifications.filter((n) => n.id !== id)); }; return ( - +
{notifications.map((notification) => ( = ({ chi ))}
{bannerNotification && ( -

{bannerNotification.title} {String(bannerNotification.message)}

{!bannerNotification.permanent && ( - setBannerNotification(null)}> @@ -151,6 +172,58 @@ export const NotificationProvider: React.FC = ({ chi )} )} + + {popupNotification && ( + <> + setPopupNotification(null)} + > + + {/* Text Section */} +
+ {/* if buttons contain danger type, show danger icon if not show icosuccess */} + {popupNotification.buttons.some((button) => button.type === "danger") ? ( +
+ +
+ ) : ( +
+ +
+ )} +
+

{popupNotification.title}

+

{popupNotification.description}

+
+
+ {/* Button Section */} +
+ {popupNotification.buttons.map((button, index) => ( + + ))} +
+ + + + + )} {children} ); diff --git a/src/screens/Jarvis/Utils/JarivsUtils.tsx b/src/screens/Jarvis/Utils/JarivsUtils.tsx index d61eb08..1a3ddec 100644 --- a/src/screens/Jarvis/Utils/JarivsUtils.tsx +++ b/src/screens/Jarvis/Utils/JarivsUtils.tsx @@ -212,7 +212,23 @@ export class JarvisUtils { } case "stop_build": { if (!selectedBuildData) throw new Error("selectedBuildData is undefined"); - this.stopBuild(activeJobBuild); + this.notification.showPopupNotification("Stop Build", "Are you sure you want to stop this build?", + [ + { + "text": "Yes, Stop Build", + "type": "danger", + "onClick": () => { + this.stopBuild(activeJobBuild); + } + }, + { + "text": "Cancel", + "type": "secondary", + "onClick": () => { + return; + } + } + ]) return; break; } diff --git a/src/screens/Jarvis/Views/SettingsView/SettingsView.tsx b/src/screens/Jarvis/Views/SettingsView/SettingsView.tsx index feb0eaf..1344459 100644 --- a/src/screens/Jarvis/Views/SettingsView/SettingsView.tsx +++ b/src/screens/Jarvis/Views/SettingsView/SettingsView.tsx @@ -260,6 +260,46 @@ const SettingsView: React.FC = () => { Show Banner + {/* Show Popup */} +
+

Popup Notification

+

...

+
+
+ +