@elyx-code/editor-ui 0.0.2

package/src/components/notifications/NotificationsIconButton.tsx

@@ -0,0 +1,124 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import '../toolbar/toolbar.css';
+import './notifications.css';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import notifications, { Notification } from '../../services/notifications';
+import Badge from '../../lib/badge/Badge';
+import { useParams } from 'react-router-dom';
+
+export interface INotificationsIconButtonProps {
+	onClick: (e: any) => void;
+}
+
+const NotificationsIconButton: React.FC<INotificationsIconButtonProps> = ({
+	onClick
+}) => {
+	const { id: projectId } = useParams<{ id: string }>();
+	const channel = notifications.getChannel('project--' + projectId);
+
+	const resolveBadges = () => {
+		return {
+			errors: channel.getUnseenErrorsCount(),
+			warnings: channel.getUnseenWarningsCount(),
+			infos: channel.getUnseenInfosCount(),
+			success: channel.getUnseenSuccessCount()
+		};
+	};
+
+	const [badges, setBadges] = useState(resolveBadges);
+
+	const handleNotificationsUpdate = useCallback(
+		(_: Notification) => {
+			setBadges(resolveBadges());
+		},
+		[projectId]
+	);
+
+	useEffect(() => {
+		channel.on('new', handleNotificationsUpdate);
+		channel.on('clear', handleNotificationsUpdate);
+		channel.on('remove', handleNotificationsUpdate);
+		return () => {
+			channel.off('new', handleNotificationsUpdate);
+			channel.off('clear', handleNotificationsUpdate);
+			channel.off('remove', handleNotificationsUpdate);
+		};
+	}, [projectId]);
+
+	const unseenCount = channel.getUnseenCount();
+
+	const badgesList = [];
+	if (badges.errors > 0)
+		badgesList.push({
+			type: 'error',
+			value: badges.errors,
+			color: 'error'
+		});
+	if (badges.warnings > 0)
+		badgesList.push({
+			type: 'warning',
+			value: badges.warnings,
+			color: 'warning'
+		});
+	if (badges.infos > 0)
+		badgesList.push({
+			type: 'info',
+			value: badges.infos,
+			color: 'primary'
+		});
+	if (badges.success > 0)
+		badgesList.push({
+			type: 'success',
+			value: badges.success,
+			color: 'success'
+		});
+
+	return (
+		<span>
+			<button
+				className="toolbar__button"
+				id="notifications-toolbar-button"
+				onClick={onClick}
+			>
+				<i className="fa-solid fa-bell" />
+				<div
+					style={{
+						position: 'absolute',
+						top: -2,
+						right: 6,
+						display: 'flex',
+						flexDirection: 'row'
+					}}
+				>
+					{badgesList.map((b, i) => (
+						<Badge
+							key={b.type}
+							color={b.color as any}
+							style={{
+								// @ts-ignore
+								marginLeft: i > 0 ? -4 : 0,
+								boxShadow:
+									i > 0
+										? '-1px 0px 2px rgba(0,0,0,0.1)'
+										: 'none'
+							}}
+						>
+							{b.value > 100 ? '+100' : b.value}
+						</Badge>
+					))}
+				</div>
+				<p>Inbox</p>
+			</button>
+			<Tooltip
+				anchorQuerySelector="#notifications-toolbar-button"
+				placement="left"
+			>
+				{unseenCount > 0
+					? `${unseenCount} new notifications that require your attention`
+					: `Here you can see all new and past notifications that require your attention`}
+			</Tooltip>
+		</span>
+	);
+};
+
+export default NotificationsIconButton;

package/src/components/notifications/NotificationsPanel.tsx

@@ -0,0 +1,385 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Popup from '../../lib/popup/Popup';
+import TextField from '../../lib/text-field/TextField';
+import './notifications.css';
+import notifications, {
+	NotificationSeverity,
+	Notification,
+} from '../../services/notifications';
+import { readableTimeFromNow } from '../../utils/date';
+import { IComponentLifecycleProps } from '../../utils/react';
+import { useParams } from 'react-router-dom';
+import { EditorService } from '../../services/editor';
+import dayjs from 'dayjs';
+
+export interface INotificationsPanelProps extends IComponentLifecycleProps {
+	project: EditorService;
+	isOpen: boolean;
+}
+
+export function resolveSeverityIcon(severity: NotificationSeverity) {
+	switch (severity) {
+		case NotificationSeverity.Error:
+			return 'fa-circle-exclamation';
+		case NotificationSeverity.Warning:
+			return 'fa-triangle-exclamation';
+		case NotificationSeverity.Info:
+			return 'fa-circle-info';
+		case NotificationSeverity.Success:
+			return 'fa-circle-check';
+		default:
+			return 'fa-circle-info';
+	}
+}
+
+export default function NotificationsPanel(props: INotificationsPanelProps) {
+	const [searchValue, setSearchValue] = useState<string>('');
+	const [filters, setFilters] = useState<NotificationSeverity[]>([]);
+	const [showPreviouslySeen, setShowPreviouslySeen] = useState<boolean>(false);
+	const [results, setResults] = useState<Notification[]>([]);
+	const inputElementRef = useRef(null);
+	const { id: projectId } = useParams<{ id: string }>();
+
+	const toggleSeenFilter = () => {
+		setShowPreviouslySeen(!showPreviouslySeen);
+	};
+
+	const getResults = async (searchQuery: string = '') => {
+		const searchableNotifications: Notification[] = [];
+
+		const existingFilters = [...filters];
+
+		// Include entity types on search array only if they are selected, or if no filters are selected
+		if (
+			existingFilters.includes(NotificationSeverity.Error) ||
+			!existingFilters.length
+		) {
+			searchableNotifications.push(
+				...(showPreviouslySeen
+					? notifications.getChannel('project--' + projectId).getErrors()
+					: notifications.getChannel('project--' + projectId).getUnseenErrors())
+			);
+		}
+
+		if (
+			existingFilters.includes(NotificationSeverity.Warning) ||
+			!existingFilters.length
+		) {
+			searchableNotifications.push(
+				...(showPreviouslySeen
+					? notifications.getChannel('project--' + projectId).getWarnings()
+					: notifications
+							.getChannel('project--' + projectId)
+							.getUnseenWarnings())
+			);
+		}
+
+		if (
+			existingFilters.includes(NotificationSeverity.Success) ||
+			!existingFilters.length
+		) {
+			searchableNotifications.push(
+				...(showPreviouslySeen
+					? notifications.getChannel('project--' + projectId).getSuccess()
+					: notifications
+							.getChannel('project--' + projectId)
+							.getUnseenSuccess())
+			);
+		}
+
+		if (
+			existingFilters.includes(NotificationSeverity.Info) ||
+			!existingFilters.length
+		) {
+			searchableNotifications.push(
+				...(showPreviouslySeen
+					? notifications.getChannel('project--' + projectId).getInfos()
+					: notifications.getChannel('project--' + projectId).getUnseenInfos())
+			);
+		}
+
+		// Sort alphabetically
+		const timeSorted = searchableNotifications.sort((a, b) => {
+			const aName = a.createdAt;
+			const bName = b.createdAt;
+
+			if (aName < bName) {
+				return -1;
+			}
+
+			if (aName > bName) {
+				return 1;
+			}
+
+			return 0;
+		});
+
+		if (!searchQuery) {
+			return timeSorted;
+		}
+
+		const filteredNotifications = timeSorted.filter((notification) => {
+			return notification.title
+				.toLowerCase()
+				.includes(searchQuery.toLowerCase());
+		});
+
+		// Sort by title matching query
+		const sortedNotifications = filteredNotifications.sort((a, b) => {
+			const aName = a.title.toLowerCase();
+			const bName = b.title.toLowerCase();
+
+			if (aName.includes(searchQuery.toLowerCase())) {
+				return -1;
+			}
+
+			if (bName.includes(searchQuery.toLowerCase())) {
+				return 1;
+			}
+
+			return 0;
+		});
+
+		return sortedNotifications;
+	};
+
+	const toggleEntityFilter = async (
+		NotificationSeverity: NotificationSeverity
+	) => {
+		const existingFilters = [...filters];
+
+		// If the entity is not already in the array, we add it
+		if (!existingFilters.includes(NotificationSeverity)) {
+			setFilters([...existingFilters, NotificationSeverity]);
+
+			// If the entity is already in the array, we remove it
+		} else {
+			setFilters(
+				existingFilters.filter(
+					(type: NotificationSeverity) => type !== NotificationSeverity
+				)
+			);
+		}
+	};
+
+	const loadResults = async () => {
+		const sortedNotifications = await getResults(searchValue);
+		setResults(sortedNotifications);
+	};
+
+	const onResultClick = (notification: Notification) => {
+		notification.executeAction();
+	};
+
+	useEffect(() => {
+		const update = () => {
+			if (!props.project?.logic) {
+				return;
+			}
+			loadResults();
+		};
+
+		notifications.getChannel('project--' + projectId).on('new', update);
+
+		notifications.getChannel('project--' + projectId).on('remove', update);
+
+		loadResults();
+
+		return () => {
+			notifications.getChannel('project--' + projectId).off('new', update);
+			notifications.getChannel('project--' + projectId).off('remove', update);
+		};
+	}, [props.project?.logic]);
+
+	useEffect(() => {
+		if (props.isOpen && props.project?.canvas) {
+			props.project.canvas.ignoreNextClick = true;
+			const input = inputElementRef.current;
+
+			if (input && document.activeElement !== input) {
+				// Adding a slight delay to ensure the element is available
+				setTimeout(() => {
+					input.focus();
+				}, 0);
+			}
+		}
+	}, [props.isOpen]);
+
+	useEffect(() => {
+		loadResults();
+	}, [searchValue, filters, showPreviouslySeen]);
+
+	const { isOpen } = props;
+
+	return (
+		<Popup
+			anchorQuerySelector='#notifications-toolbar-button'
+			placement='left-start'
+			open={isOpen}
+			arrowClasses={['dropdown-menu-card-arrow']}
+			containerClasses={['popup__notifications']}
+			onClick={(e: any) => {
+				e.stopPropagation();
+			}}
+		>
+			<div className='notifications-panel__container'>
+				<TextField
+					ref={inputElementRef}
+					variant='filled'
+					label='Search notifications'
+					iconEnd='fa-solid fa-magnifying-glass'
+					value={searchValue}
+					onChange={(value: any) => {
+						setSearchValue(value);
+					}}
+					// onDebouncedInput={(value: any) => {
+					// 	onSearch(value);
+					// }}
+				/>
+
+				{/* Entity types' filters */}
+				<span className='notifications-panel__filters'>
+					<p className='notifications-panel__filters__label'>Filters</p>
+					<div className='notifications-panel__filters__buttons'>
+						<button
+							style={
+								filters.includes(NotificationSeverity.Error) || !filters.length
+									? { color: 'var(--color-main-error)' }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => {
+								toggleEntityFilter(NotificationSeverity.Error);
+							}}
+						>
+							<i className='fa-solid fa-circle-exclamation' />
+							<p>Errors</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(NotificationSeverity.Warning) ||
+								!filters.length
+									? { color: 'var(--color-main-warning)' }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => {
+								toggleEntityFilter(NotificationSeverity.Warning);
+							}}
+						>
+							<i className='fa-solid fa-triangle-exclamation' />
+							<p>Warnings</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(NotificationSeverity.Info) || !filters.length
+									? { color: 'var(--color-main-primary)' }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => {
+								toggleEntityFilter(NotificationSeverity.Info);
+							}}
+						>
+							<i className='fa-solid fa-circle-info' />
+							<p>Info</p>
+						</button>
+
+						<button
+							style={
+								filters.includes(NotificationSeverity.Success) ||
+								!filters.length
+									? { color: 'var(--color-main-success)' }
+									: undefined
+							}
+							className='toolbar__button'
+							onClick={() => {
+								toggleEntityFilter(NotificationSeverity.Success);
+							}}
+						>
+							<i className='fa-solid fa-circle-check' />
+							<p>Done</p>
+						</button>
+
+						<button
+							style={showPreviouslySeen ? { color: 'black' } : undefined}
+							className='toolbar__button'
+							onClick={() => {
+								toggleSeenFilter();
+							}}
+						>
+							<i className='fa-solid fa-box-archive' />
+							<p>Seen</p>
+						</button>
+					</div>
+				</span>
+
+				<ul
+					className='notifications-panel__results'
+					onScroll={(e: any) => {
+						e.stopPropagation();
+						document.body.style.overflow = 'hidden';
+					}}
+				>
+					{results.length ? (
+						results
+							.sort((a, b) => {
+								const aDate = a.createdAt;
+								const bDate = b.createdAt;
+
+								if (dayjs(aDate).isAfter(dayjs(bDate))) {
+									return -1;
+								}
+
+								if (dayjs(aDate).isBefore(dayjs(bDate))) {
+									return 1;
+								}
+
+								return 0;
+							})
+							.map((notification: Notification) => (
+								<li
+									key={notification.uuid}
+									className='notifications-panel__results__item'
+								>
+									<button
+										className='notifications-panel__results__item-button'
+										onClick={() => {
+											onResultClick(notification);
+										}}
+									>
+										<i
+											className={`fa-solid ${resolveSeverityIcon(
+												notification.severity
+											)}`}
+										/>
+										<span className='notifications-panel__results__item__body'>
+											<span className='notifications-panel__results__item__header-line'>
+												<p className='notifications-panel__results__item__title'>
+													{notification.title}
+												</p>
+												<p className='notifications-panel__results__item__time'>
+													{readableTimeFromNow(
+														new Date(notification.createdAt)
+													)}
+												</p>
+											</span>
+											<p className='notifications-panel__results__item__description'>
+												{notification.message}
+											</p>
+										</span>
+									</button>
+								</li>
+							))
+					) : (
+						<p className='notifications-panel__results__item__empty'>
+							No new notifications
+						</p>
+					)}
+				</ul>
+			</div>
+		</Popup>
+	);
+}

package/src/components/notifications/notifications.css

@@ -0,0 +1,189 @@
+.notifications-panel__container {
+	padding: 5px;
+	background-color: #111;
+	top: 70px;
+	left: 0;
+	width: 100%;
+	border-radius: 4px;
+	display: block;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
+	min-width: 200px;
+	background-color: #fff;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.15);
+
+	width: 350px;
+	overflow-y: hidden;
+}
+
+.notifications-panel__filters {
+	display: flex;
+	margin-top: 10px;
+	margin-bottom: 6px;
+	flex-direction: column;
+}
+
+.notifications-panel__filters__label {
+	font-size: 12px;
+	font-weight: 600;
+	color: #666;
+	margin: 0px;
+	margin-left: 6px;
+}
+
+.notifications-panel__filters__buttons {
+	display: flex;
+	gap: 6px;
+}
+
+.notifications-panel__filters__buttons button {
+	color: var(--color-light-grey);
+}
+
+.notifications-panel__results {
+	overflow-y: scroll;
+	max-height: 300px;
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.notifications-panel__results .notifications-panel__results__item__empty {
+	text-align: center;
+	padding: 10px;
+	font-size: 12px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.notifications-panel__results .notifications-panel__results__item {
+	border-bottom: 1px solid #eee;
+}
+
+/* Removes all styling of the bottom so it acts as a container but doesn't change anything from the parent */
+.notifications-panel__results .notifications-panel__results__item-button {
+	padding: 10px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+  text-align: left;
+
+	/* Resets */
+	width: 100%;
+	height: 100%;
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: 0;
+  margin: 0;
+}
+
+.notifications-panel__results .notifications-panel__results__item:last-child {
+	border-bottom: none;
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	i.fa-circle-exclamation {
+	color: var(--color-main-error);
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	i.fa-triangle-exclamation {
+	color: var(--color-main-warning);
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	i.fa-circle-info {
+	color: var(--color-main-primary);
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	i.fa-circle-check {
+	color: var(--color-main-success);
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	.notifications-panel__results__item__body {
+	width: 100%;
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	.notifications-panel__results__item__header-line {
+	display: flex;
+	justify-content: space-between;
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	.notifications-panel__results__item__title {
+	font-size: 14px;
+	font-weight: 600;
+	margin: 0;
+	margin-bottom: 4px;
+
+	/* break into second line even if it is one word */
+	word-break: break-all;
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	.notifications-panel__results__item__time {
+	font-size: 10px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item
+	.notifications-panel__results__item__description {
+	font-size: 12px;
+	font-weight: 400;
+	margin: 0;
+	margin-bottom: 4px;
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.notifications-panel__results .notifications-panel__results__item:hover {
+	background-color: var(--color-main-primary);
+	color: var(--color-contrast-primary);
+	transform: scale(1.01);
+	/* Smoth transition */
+	transition: all 0.2s ease-in-out;
+	border-radius: 8px;
+	/* No border bottom */
+	border-bottom: none;
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item:hover
+	.notifications-panel__results__item__time {
+	color: var(--color-contrast-primary);
+}
+
+.notifications-panel__results
+	.notifications-panel__results__item:hover
+	.notifications-panel__results__item__description {
+	color: var(--color-contrast-primary);
+}
+
+/* Hide helper text section on search input */
+.notifications-panel__container .omrs-input-helper {
+	display: none;
+}
+
+/* Little counter on an icon button */
+.toolbar__button-badge {
+	position: absolute;
+	top: 3px;
+	right: 4px;
+}