@finsemble/finsemble-ui 7.2.0 → 7.3.0

package/react/components/notifications/components/views/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/ListView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport { format, differenceInMilliseconds, parseISO, addSeconds } from \"date-fns\";\n\n// types\nimport { NotificationListViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport IconButton from \"../shared/IconButton\";\nimport NoNotifications from \"../NoNotifications\";\nimport OverflowMenu, { OverflowMenuActions, renderOverflowMenuAction } from \"../shared/OverflowMenu\";\nimport { CheckButton } from \"../shared/CheckButton\";\n\n// Utils\nimport {\n\tgetActiveFilter,\n\tgetMostRecentAction,\n\tisNewNotification,\n\tisReNotification,\n\tsearchNotifications,\n} from \"../../utils\";\n\nimport { NotificationCardHeaderLogo } from \"../shared/notificationCard/NotificationCardHeaderLogo\";\n\n// Constants\nimport { SelectionMode } from \"../../constants\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst ListHeaderComponent = () => (\n\t<div className=\"list-header__container\">\n\t\t<div className=\"list-header_cell\">Received</div>\n\t\t<div className=\"list-header_cell\">App</div>\n\t\t<div className=\"list-header_cell\">Content</div>\n\t\t<div className=\"list-header_cell\">{\"\"}</div>\n\t</div>\n);\n\nexport type NotificationListRowPropType = {\n\tnotification: INotification;\n\tnewNotificationHaloPeriodSeconds: number;\n};\n\nexport const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType> = ({\n\tnotification,\n\tnewNotificationHaloPeriodSeconds,\n\tchildren,\n}: any) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;\n\tconst [overflowMenuOpen, setOverflowMenuOpen] = useState(false);\n\tconst toggleOverflowMenu = () => {\n\t\tsetOverflowMenuOpen(!overflowMenuOpen);\n\t};\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\t// effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component\n\t// and sometimes at the first render, this value is still 0\n\tuseEffect(() => {\n\t\tsetIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\t}, [newNotificationHaloPeriodSeconds]);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tconst { datePerformed } = mostRecentAction;\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\n\tconst overFlowActions = Object.assign({}, OverflowMenuActions);\n\toverFlowActions.DETAILS.action = (detailNotification: INotification) => {\n\t\tsetSelectedNotification(detailNotification);\n\t};\n\n\tdelete overFlowActions.DISMISS;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\tconst menuActions = Object.values(overFlowActions).map((value) =>\n\t\trenderOverflowMenuAction(notification, value, isMuteFilterApplied)\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`list-row__container notification-item ${notification.isRead ? \"is-read\" : \"\"} ${\n\t\t\t\tisNew || wokeFromSnooze ? \"new\" : \"\"\n\t\t\t}\n\t\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"list-row__cell\">{format(Date.parse(notification.issuedAt), \"dd-MM-yyyy HH:mm\")}</div>\n\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"list-row__cell\">{`${notification.title} - ${notification.details}`}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t<span>\n\t\t\t\t\t<IconButton iconName=\"ff-dots-vert\" tooltip=\"Options\" clickHandler={toggleOverflowMenu}>\n\t\t\t\t\t\t{overflowMenuOpen ? <OverflowMenu closeSelf={setOverflowMenuOpen}>{menuActions}</OverflowMenu> : null}\n\t\t\t\t\t</IconButton>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst ListView: React.FunctionComponent<NotificationListViewProps> = ({\n\tnotificationHeaderRow,\n\tnotificationListRow,\n\tnotifications,\n}) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\t// The context will be used to filter the notifications\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst NotificationHeaderRow = notificationHeaderRow || ListHeaderComponent;\n\tconst NotificationListRow = notificationListRow || NotificationListRowShell;\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (searchString === \"\") {\n\t\t\tsetFilteredNotifications(notifications);\n\t\t} else {\n\t\t\tsetFilteredNotifications(searchNotifications(notifications, searchString));\n\t\t}\n\t}, [searchString, notifications]);\n\n\tlet controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\tcontrolFilteredNotifications.sort(\n\t\t(a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt)\n\t);\n\n\tcontrolFilteredNotifications = controlFilteredNotifications.filter((notification: INotification) =>\n\t\tactiveFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed\n\t);\n\n\treturn controlFilteredNotifications.length === 0 ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>\n\t\t\t<NotificationHeaderRow />\n\t\t\t{controlFilteredNotifications.map((notification: INotification, index: number) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t<NotificationListRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\tnewNotificationHaloPeriodSeconds={newNotificationHaloPeriodSeconds}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default ListView;\n"]}
+{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../../../src/components/notifications/components/views/ListView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useState, useEffect } from \"react\";\nimport { format, differenceInMilliseconds, parseISO, addSeconds } from \"date-fns\";\n\n// types\nimport { NotificationListViewProps } from \"../../types\";\n\n// Context\nimport { NotificationsContext } from \"../../notificationsContext\";\n\n// Components\nimport NoNotifications from \"../NoNotifications\";\nimport ContextMenuToggle from \"../../../common/ContextMenu\";\nimport { ContextMenuActions } from \"../../../notifications/components/shared/notificationCard/NotificationCardHeaderControls\";\nimport { CheckButton } from \"../shared/CheckButton\";\n\n// Utils\nimport {\n\tgetActiveFilter,\n\tgetMostRecentAction,\n\tisNewNotification,\n\tisReNotification,\n\tsearchNotifications,\n} from \"../../utils\";\n\nimport { NotificationCardHeaderLogo } from \"../shared/notificationCard/NotificationCardHeaderLogo\";\n\n// Constants\nimport { SelectionMode } from \"../../constants\";\nimport { services } from \"@finsemble/finsemble-api\";\nimport { ErrorBoundary } from \"../../../common/ErrorBoundary\";\n\ntype INotification = services.notification.types.INotification;\ntype IPerformedAction = services.notification.types.IPerformedAction;\n\nconst ListHeaderComponent = () => (\n\t<div className=\"list-header__container\">\n\t\t<div className=\"list-header_cell\">Received</div>\n\t\t<div className=\"list-header_cell\">App</div>\n\t\t<div className=\"list-header_cell\">Content</div>\n\t\t<div className=\"list-header_cell\">{\"\"}</div>\n\t</div>\n);\n\nexport type NotificationListRowPropType = {\n\tnotification: INotification;\n\tnewNotificationHaloPeriodSeconds: number;\n};\n\nexport const NotificationListRowShell: React.FunctionComponent<NotificationListRowPropType> = ({\n\tnotification,\n\tnewNotificationHaloPeriodSeconds,\n\tchildren,\n}: any) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\tconst { setSelectedNotification, muteFilters, selectionMode } = notificationsContext;\n\n\tconst [isNew, setIsNew] = useState(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\tconst [wokeFromSnooze, setWokeFromSnooze] = useState(\n\t\tisReNotification(notification, newNotificationHaloPeriodSeconds)\n\t);\n\tconst [isMuteFilterApplied, setIsMuteFilterApplied] = useState(\n\t\tmuteFilters\n\t\t\t? muteFilters.some((filter) => filter.source === notification.source && filter.type === notification.type)\n\t\t\t: false\n\t);\n\n\t// effect needed as the newNotificationHaloPeriodSeconds is fecthed asynchronously in the parent component\n\t// and sometimes at the first render, this value is still 0\n\tuseEffect(() => {\n\t\tsetIsNew(isNewNotification(notification, newNotificationHaloPeriodSeconds));\n\t}, [newNotificationHaloPeriodSeconds]);\n\n\tuseEffect(() => {\n\t\tlet isNewTimerId: any;\n\t\tif (isNew) {\n\t\t\tif (notification.isRead) {\n\t\t\t\tsetIsNew(false);\n\t\t\t\tclearTimeout(isNewTimerId);\n\t\t\t} else {\n\t\t\t\tisNewTimerId = setTimeout(() => {\n\t\t\t\t\tsetIsNew(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(notification.issuedAt), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isNewTimerId);\n\t\t};\n\t}, [isNew, notification]);\n\n\tuseEffect(() => {\n\t\tlet isRenotificationTimerId: any;\n\t\tif (isReNotification(notification, newNotificationHaloPeriodSeconds)) {\n\t\t\tconst mostRecentAction: IPerformedAction | null = getMostRecentAction(notification);\n\t\t\tif (mostRecentAction) {\n\t\t\t\tconst { datePerformed } = mostRecentAction;\n\t\t\t\tsetWokeFromSnooze(true);\n\t\t\t\tisRenotificationTimerId = setTimeout(() => {\n\t\t\t\t\tsetWokeFromSnooze(false);\n\t\t\t\t}, differenceInMilliseconds(addSeconds(parseISO(datePerformed), newNotificationHaloPeriodSeconds), Date.now()));\n\t\t\t}\n\t\t} else {\n\t\t\tsetWokeFromSnooze(false);\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t}\n\t\treturn () => {\n\t\t\tclearTimeout(isRenotificationTimerId);\n\t\t};\n\t}, [newNotificationHaloPeriodSeconds, notification]);\n\n\tconst overFlowActions = Object.assign({}, ContextMenuActions);\n\toverFlowActions.DETAILS.action = (detailNotification: INotification) => {\n\t\tsetSelectedNotification(detailNotification);\n\t};\n\n\tdelete overFlowActions.DISMISS;\n\n\tuseEffect(() => {\n\t\tfunction listenMuteStateChanged(error: any, response: any) {\n\t\t\tif (error) {\n\t\t\t\tconsole.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t\tFSBL.Clients.Logger.system.error(\"FinsembleNotificationsMuteStateChannel: \", error);\n\t\t\t} else {\n\t\t\t\tconst { data } = response;\n\t\t\t\tif (notification.source === data.source && notification.type === data.type) {\n\t\t\t\t\tsetIsMuteFilterApplied(data.isMuted);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tFSBL.Clients.RouterClient.addListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\treturn () => {\n\t\t\tFSBL.Clients.RouterClient.removeListener(\"FinsembleNotificationsMuteStateChannel\", listenMuteStateChanged);\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`list-row__container notification-item ${notification.isRead ? \"is-read\" : \"\"} ${\n\t\t\t\tisNew || wokeFromSnooze ? \"new\" : \"\"\n\t\t\t}\n\t\t\t\t${notification.cssClassName ? notification.cssClassName : \"\"}`}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<>\n\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"list-row__cell\">{format(Date.parse(notification.issuedAt), \"dd-MM-yyyy HH:mm\")}</div>\n\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t{selectionMode === SelectionMode.SELECTION ? (\n\t\t\t\t\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t\t\t\t\t<CheckButton notification={notification} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<NotificationCardHeaderLogo headerLogo={notification.headerLogo} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"list-row__cell\">{`${notification.title} - ${notification.details}`}</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t\t<div className=\"list-row__cell\">\n\t\t\t\t<span>\n\t\t\t\t\t<ContextMenuToggle menuActions={overFlowActions} message={notification} isMuteFilterApplied={false} />\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst ListView: React.FunctionComponent<NotificationListViewProps> = ({\n\tnotificationHeaderRow,\n\tnotificationListRow,\n\tnotifications,\n}) => {\n\tconst notificationsContext = useContext(NotificationsContext);\n\t// The context will be used to filter the notifications\n\tconst { drawerControlProps, searchString, filteredNotifications, setFilteredNotifications } = notificationsContext;\n\n\tconst activeFilter = getActiveFilter(drawerControlProps);\n\n\tconst [newNotificationHaloPeriodSeconds, setNotificationHaloPeriodSeconds] = useState(0);\n\n\tconst NotificationHeaderRow = notificationHeaderRow || ListHeaderComponent;\n\tconst NotificationListRow = notificationListRow || NotificationListRowShell;\n\n\t// Sets the current default preference\n\tuseEffect(() => {\n\t\tasync function getNotificationsPreferences() {\n\t\t\treturn await FSBL.Clients.NotificationClient.getPreferences();\n\t\t}\n\n\t\tgetNotificationsPreferences().then((preferences: any) => {\n\t\t\tsetNotificationHaloPeriodSeconds(preferences.newNotificationHaloPeriodSeconds);\n\t\t});\n\t}, []);\n\n\tuseEffect(() => {\n\t\tif (searchString === \"\") {\n\t\t\tsetFilteredNotifications(notifications);\n\t\t} else {\n\t\t\tsetFilteredNotifications(searchNotifications(notifications, searchString));\n\t\t}\n\t}, [searchString, notifications]);\n\n\tlet controlFilteredNotifications = activeFilter ? activeFilter.run?.(filteredNotifications) : [];\n\tcontrolFilteredNotifications.sort(\n\t\t(a: INotification, b: INotification) => Date.parse(b.issuedAt) - Date.parse(a.issuedAt)\n\t);\n\n\tcontrolFilteredNotifications = controlFilteredNotifications.filter((notification: INotification) =>\n\t\tactiveFilter.action === \"snoozed\" ? notification.isSnoozed : !notification.isSnoozed\n\t);\n\n\treturn controlFilteredNotifications.length === 0 ? (\n\t\t<NoNotifications />\n\t) : (\n\t\t<>\n\t\t\t<NotificationHeaderRow />\n\t\t\t{controlFilteredNotifications.map((notification: INotification, index: number) => {\n\t\t\t\tconst key = `${index}_${notification.id ? notification.id : notification.issuedAt}`;\n\t\t\t\treturn (\n\t\t\t\t\t<ErrorBoundary key={key}>\n\t\t\t\t\t\t<NotificationListRow\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tnotification={notification}\n\t\t\t\t\t\t\tnewNotificationHaloPeriodSeconds={newNotificationHaloPeriodSeconds}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ErrorBoundary>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default ListView;\n"]}

package/react/components/notifications/css/notification-card.css

@@ -0,0 +1,165 @@
+/* Notification card and views */
+.notification-card {
+	background-color: var(--core-primary);
+	box-shadow: 0 0 8px 0 rgb(0 0 0 / 50%);
+	display: flex;
+	flex-direction: column;
+	font-family: var(--notification-font-family);
+	min-height: 120px;
+	padding: 8px 10px;
+	margin: 0 5px;
+}
+
+.notification-card.new {
+	box-shadow: 0 0 9px 0 var(--notification-highlight-border-color);
+}
+
+.notification-card.read {
+	background-color: var(--core-primary-opacity);
+	color: var(--font-shadow-light);
+}
+
+.notification-day {
+	color: var(--font-shadow-light);
+	font-size: var(--font-size);
+	font-weight: bold;
+	margin: 10px auto;
+	padding: 0 0 0 5px;
+}
+
+.notification-card__header {
+	display: grid;
+	grid-template-columns: 25px auto minmax(80px, auto);
+	grid-template-rows: 30px;
+	align-items: center;
+}
+
+.notification-card__title {
+	display: block;
+	font-size: var(--font-size-large);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-right: auto;
+	width: 100%;
+}
+
+.notification-card__more-options__no-toggle,
+.notification-card__more-options__toggle {
+	cursor: pointer;
+	white-space: nowrap;
+	display: grid;
+	grid-template-rows: 30px;
+	align-items: center;
+	grid-template-columns: minmax(80px, auto);
+	justify-items: end;
+	margin-left: 2px;
+}
+
+.js-toasts .notification-card__more-options__no-toggle,
+.js-toasts .notification-card__more-options__toggle {
+	grid-template-columns: 25px 20px;
+}
+
+.notification-card__more-options__toggle .notification-card_context_menu,
+.notification-card__more-options__toggle:hover .notification-card_timestamp {
+	display: none;
+}
+
+.notification-card__more-options__no-toggle .notification-card_context_menu,
+.notification-card__more-options__toggle:hover .notification-card_context_menu {
+	display: flex;
+}
+
+.notification-card__dismiss.finsemble-icon__btn i {
+	font-size: var(--titleBar-icon-font-size);
+}
+
+.notification-card__more-options__no-toggle .notification-card__dismiss:hover {
+	color: var(--titleBar-button-hover-negative-color);
+}
+
+.notification-card__body {
+	gap: 10px;
+	display: flex;
+	flex-direction: row;
+	font-size: var(--font-size-large);
+	margin-top: 8px;
+}
+
+.notification-card__body_text {
+	display: -webkit-box; /* stylelint-disable-line */
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 4;
+	color: var(--core-primary-5);
+	overflow: hidden;
+}
+
+.notification-card__body_img_container {
+	width: 50px;
+	height: 50px;
+	padding-bottom: 5px;
+}
+
+.notification-card__body_img_container img {
+	width: inherit;
+	height: inherit;
+}
+
+.notification-card.read .notification-card__body_text {
+	color: var(--font-color-1-shadow);
+}
+
+.actions-panel {
+	max-width: 120px;
+	align-items: flex-end;
+	display: flex;
+	flex-direction: column;
+	margin-left: auto;
+}
+
+.actions-panel__btn:hover {
+	opacity: 0.75;
+}
+
+.notification-card .overflow-menu__container,
+.notification-card.read .overflow-menu__container {
+	color: var(--font-color);
+}
+
+.notification-card__header img {
+	object-fit: contain;
+	margin-right: 8px;
+	max-width: 18px;
+	max-height: 18px;
+	width: auto;
+	height: auto;
+}
+
+.js-toasts .notification-card__header {
+	grid-template-columns: 25px auto 45px;
+}
+
+.finsemble-icon__btn {
+	align-items: center;
+	color: var(--core-primary-5);
+	cursor: pointer;
+	display: flex;
+	height: 24px;
+	justify-content: center;
+	position: relative;
+	width: 24px;
+}
+
+.finsemble-icon__btn.active {
+	color: var(--accent-primary);
+}
+
+.finsemble-icon__btn:hover:not(.no-hover) {
+	background: var(--menu-actions-hover-color);
+	border-radius: 50%;
+}
+
+.finsemble-icon__btn i {
+	font-size: var(--font-size-large);
+}

package/react/components/notifications/stories/NotificationCardShell.stories.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import { NotificationCardPropType } from "../components/shared/NotificationCardShell";
+declare const _default: {
+    title: string;
+    component: React.FunctionComponent<NotificationCardPropType>;
+};
+export default _default;
+export declare const AllFields: Story<NotificationCardPropType>;
+export declare const AllFieldsToasts: Story<NotificationCardPropType>;
+export declare const NoLogos: Story<NotificationCardPropType>;
+export declare const NoActionsNoLogos: Story<NotificationCardPropType>;
+export declare const VeryLongActionName: Story<NotificationCardPropType>;
+export declare const ALotOfDetailsText: Story<NotificationCardPropType>;

package/react/components/notifications/stories/NotificationCardShell.stories.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { initFSBL } from "../../common/helpers";
+import { NotificationCardShell } from "../components/shared/NotificationCardShell";
+export default {
+    title: "Notifications/NotificationCard",
+    component: NotificationCardShell,
+};
+const Template = (args) => {
+    initFSBL(window);
+    return (React.createElement("div", { style: { maxWidth: "408px", background: "#171a20", padding: "20px" } },
+        React.createElement(NotificationCardShell, Object.assign({}, args))));
+};
+const notification = {
+    headerLogo: "https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png",
+    type: "type",
+    timeout: 5000,
+    source: "source-name",
+    headerText: "I am header text",
+    cssClassName: "css-class-name",
+    contentLogo: "https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png",
+    isRead: false,
+    issuedAt: new Date().toISOString(),
+    title: "Title",
+    details: "A reasonable amount of text. One or two lines.",
+    isMuted: false,
+    isSnoozed: false,
+    isDeleted: false,
+    stateHistory: [],
+    actions: [
+        [
+            {
+                type: "SNOOZE",
+                buttonText: "Default Snooze",
+            },
+            {
+                type: "SNOOZE",
+                buttonText: "Snooze With Longer Text",
+            },
+            {
+                type: "SNOOZE",
+                buttonText: "Small Snooze",
+            },
+        ],
+        {
+            type: "SNOOZE",
+            buttonText: "Longer text",
+        },
+        {
+            type: "SNOOZE",
+            buttonText: "Much longer text",
+        },
+    ],
+};
+export const AllFields = Template.bind({});
+AllFields.args = {
+    notification: notification,
+    uiContext: "center",
+};
+export const AllFieldsToasts = Template.bind({});
+AllFieldsToasts.args = {
+    notification: notification,
+    uiContext: "toasts",
+};
+const noLogoNotification = Object.assign({}, notification);
+delete noLogoNotification.headerLogo;
+delete noLogoNotification.contentLogo;
+noLogoNotification.contentLogo;
+export const NoLogos = Template.bind({});
+NoLogos.args = {
+    notification: noLogoNotification,
+};
+const noActionsNoLogosNotification = Object.assign({}, notification);
+delete noActionsNoLogosNotification.headerLogo;
+delete noActionsNoLogosNotification.contentLogo;
+delete noActionsNoLogosNotification.actions;
+export const NoActionsNoLogos = Template.bind({});
+NoActionsNoLogos.args = {
+    notification: noActionsNoLogosNotification,
+};
+const veryLongActionNameNotification = Object.assign({}, notification);
+veryLongActionNameNotification.actions = [
+    {
+        buttonText: "This is a very long action name. How long can we go?",
+        type: "DISMISS",
+    },
+    [
+        {
+            buttonText: "This is a very long action name. How long can we go?",
+            type: "DISMISS",
+        },
+        {
+            buttonText: "This is a very long action name. How long can we go?",
+            type: "DISMISS",
+        },
+    ],
+];
+export const VeryLongActionName = Template.bind({});
+VeryLongActionName.args = {
+    notification: veryLongActionNameNotification,
+};
+const aLotOfDetailsTextNotification = Object.assign({}, notification);
+aLotOfDetailsTextNotification.details =
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took . galley of type and scrambled it to make . type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.";
+export const ALotOfDetailsText = Template.bind({});
+ALotOfDetailsText.args = {
+    notification: aLotOfDetailsTextNotification,
+};
+//# sourceMappingURL=NotificationCardShell.stories.js.map

package/react/components/notifications/stories/NotificationCardShell.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardShell.stories.js","sourceRoot":"","sources":["../../../../src/components/notifications/stories/NotificationCardShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { initFSBL } from \"../../common/helpers\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { NotificationCardShell, NotificationCardPropType } from \"../components/shared/NotificationCardShell\";\nimport { services } from \"@finsemble/finsemble-api\";\ntype INotification = services.notification.types.INotification;\n\nexport default {\n\ttitle: \"Notifications/NotificationCard\",\n\tcomponent: NotificationCardShell,\n};\n\nconst Template: Story<NotificationCardPropType> = (args: NotificationCardPropType) => {\n\tinitFSBL(window);\n\treturn (\n\t\t<div style={{ maxWidth: \"408px\", background: \"#171a20\", padding: \"20px\" }}>\n\t\t\t<NotificationCardShell {...args} />\n\t\t</div>\n\t);\n};\n\nconst notification: INotification = {\n\theaderLogo: \"https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png\",\n\ttype: \"type\",\n\ttimeout: 5000,\n\tsource: \"source-name\",\n\theaderText: \"I am header text\",\n\tcssClassName: \"css-class-name\",\n\tcontentLogo: \"https://assets.finsemble.com/sales-demo-assets/appD/IQ-icon.png\",\n\tisRead: false,\n\tissuedAt: new Date().toISOString(),\n\ttitle: \"Title\",\n\tdetails: \"A reasonable amount of text. One or two lines.\",\n\tisMuted: false,\n\tisSnoozed: false,\n\tisDeleted: false,\n\tstateHistory: [],\n\tactions: [\n\t\t[\n\t\t\t{\n\t\t\t\ttype: \"SNOOZE\",\n\t\t\t\tbuttonText: \"Default Snooze\",\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: \"SNOOZE\",\n\t\t\t\tbuttonText: \"Snooze With Longer Text\",\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: \"SNOOZE\",\n\t\t\t\tbuttonText: \"Small Snooze\",\n\t\t\t},\n\t\t],\n\t\t{\n\t\t\ttype: \"SNOOZE\",\n\t\t\tbuttonText: \"Longer text\",\n\t\t},\n\t\t{\n\t\t\ttype: \"SNOOZE\",\n\t\t\tbuttonText: \"Much longer text\",\n\t\t},\n\t],\n};\n\nexport const AllFields = Template.bind({});\nAllFields.args = {\n\tnotification: notification,\n\tuiContext: \"center\",\n};\nexport const AllFieldsToasts = Template.bind({});\nAllFieldsToasts.args = {\n\tnotification: notification,\n\tuiContext: \"toasts\",\n};\n\nconst noLogoNotification = Object.assign({}, notification);\n\ndelete noLogoNotification.headerLogo;\ndelete noLogoNotification.contentLogo;\nnoLogoNotification.contentLogo;\n\nexport const NoLogos = Template.bind({});\nNoLogos.args = {\n\tnotification: noLogoNotification,\n};\n\nconst noActionsNoLogosNotification = Object.assign({}, notification);\ndelete noActionsNoLogosNotification.headerLogo;\ndelete noActionsNoLogosNotification.contentLogo;\ndelete noActionsNoLogosNotification.actions;\n\nexport const NoActionsNoLogos = Template.bind({});\nNoActionsNoLogos.args = {\n\tnotification: noActionsNoLogosNotification,\n};\n\nconst veryLongActionNameNotification = Object.assign({}, notification);\nveryLongActionNameNotification.actions = [\n\t{\n\t\tbuttonText: \"This is a very long action name. How long can we go?\",\n\t\ttype: \"DISMISS\",\n\t},\n\t[\n\t\t{\n\t\t\tbuttonText: \"This is a very long action name. How long can we go?\",\n\t\t\ttype: \"DISMISS\",\n\t\t},\n\t\t{\n\t\t\tbuttonText: \"This is a very long action name. How long can we go?\",\n\t\t\ttype: \"DISMISS\",\n\t\t},\n\t],\n];\n\nexport const VeryLongActionName = Template.bind({});\nVeryLongActionName.args = {\n\tnotification: veryLongActionNameNotification,\n};\n\nconst aLotOfDetailsTextNotification = Object.assign({}, notification);\naLotOfDetailsTextNotification.details =\n\t\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took . galley of type and scrambled it to make . type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.\";\n\nexport const ALotOfDetailsText = Template.bind({});\nALotOfDetailsText.args = {\n\tnotification: aLotOfDetailsTextNotification,\n};\n"]}

package/react/components/notifications/tests/NotificationCardShell.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/react/components/notifications/tests/NotificationCardShell.spec.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { afterEach, describe, it } from "mocha";
+import { expect } from "chai";
+import { NoActionsNoLogos, NoLogos, AllFields, AllFieldsToasts } from "../stories/NotificationCardShell.stories";
+import { accessibilityAssessor } from "../../sdd/tests/a11y_helper";
+import { waitTime } from "../../sdd/sdd_helpers";
+import sinon from "sinon";
+describe("<NotificationCardShell />", () => {
+    afterEach(() => {
+        sinon.restore();
+    });
+    it("should pass accessibility scans when in the notification center", async () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    }).timeout(10e3);
+    it("should pass accessibility scans when in the notification toasts", async () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args, { uiContext: "toasts" })));
+        expect(await accessibilityAssessor(wrapper)).to.be.true;
+    }).timeout(10e3);
+    const testHalo = (args, expected) => async () => {
+        const { notification } = args;
+        // Refresh the issued at date as this tests behaviour based on the passage of time
+        notification.issuedAt = new Date().toISOString();
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, args, { notification: notification })));
+        await waitTime(0);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists()).to.equal(expected);
+        expect(wrapper.find(".notification-card.read").exists(), "card should not be marked as read").to.equal(false);
+    };
+    it("should show a halo when the notification is new", testHalo(Object.assign(Object.assign({}, AllFields.args), { uiContext: "center" }), true)).timeout(10e3);
+    it("should not show a halo when a toast", testHalo(Object.assign(Object.assign({}, AllFields.args), { uiContext: "toasts" }), false)).timeout(10e3);
+    // Skipped because it fails when running the whole suite. Passes when run on its own.
+    // Also couldn't get sinon.useFakeTimers() to work
+    it("should hide the new halo after 3 seconds of time (3s comes from preferences)", async () => {
+        const { notification } = AllFields.args;
+        notification.issuedAt = new Date().toISOString();
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args, { notification: notification })));
+        await waitTime(0);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists(), "Card is new").to.be.true;
+        await waitTime(2000);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists(), "Card is still new").to.be.true;
+        await waitTime(1500);
+        wrapper.update();
+        expect(wrapper.find(".notification-card.new").exists(), "Card is no longer new").to.be.false;
+    }).timeout(10e3);
+    it("should be read", () => {
+        const { notification } = AllFields.args;
+        notification.isRead = true;
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args, { notification: notification })));
+        expect(wrapper.find(".notification-card.read").exists(), "card should be marked as read").to.equal(true);
+    });
+    it("should have a close button when a toast", () => {
+        const wrapper = mount(React.createElement(AllFieldsToasts, Object.assign({}, AllFieldsToasts.args, { uiContext: "toasts" })));
+        expect(wrapper.find(".notification-card__dismiss").exists(), "Toasts should have a dismiss button (x top right corner)").to.equal(true);
+    });
+    it("SHOULD have icons", () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        const imageExists = wrapper.find(".notification-card__header img").exists();
+        const defaultImageExists = wrapper.find(".notification-card__header .default-img").exists();
+        expect(imageExists && !defaultImageExists, "Title icon exists and default icon does not").to.equal(true);
+        expect(wrapper.find(".notification-card__body_img_container img").exists(), "Content icon exists").to.equal(true);
+    });
+    it("SHOULD NOT have icons", () => {
+        const wrapper = mount(React.createElement(NoLogos, Object.assign({}, NoLogos.args)));
+        const defaultImageExists = wrapper.find(".notification-card__header .default-img").exists();
+        expect(defaultImageExists, "Default title icon exists").to.equal(true);
+        expect(wrapper.find(".notification-card__body_img_container img").exists(), "Content icon exists").to.equal(true);
+    });
+    it("should have cssClass value as css class", () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        expect(wrapper.find(".notification-card.css-class-name").exists()).to.be.true;
+    });
+    it("SHOULD have actions", () => {
+        const wrapper = mount(React.createElement(AllFields, Object.assign({}, AllFields.args)));
+        expect(wrapper.find(".finsemble-dropdown-action__btn-container").exists(), "One grouped action should exist").to.be
+            .true;
+        const actions = wrapper.find(".actions-panel .finsemble__btn");
+        expect(actions.length, "Two single actions should exist").to.equal(2);
+        const spy = sinon.spy(FSBL.Clients.NotificationClient, "performAction");
+        actions.at(0).simulate("click");
+        expect(spy.calledOnce, "action is performed").to.be.true;
+    });
+    it("SHOULD NOT have actions", () => {
+        const wrapper = mount(React.createElement(NoActionsNoLogos, Object.assign({}, NoActionsNoLogos.args)));
+        expect(wrapper.find(".actions-panel").exists()).to.be.false;
+    });
+});
+//# sourceMappingURL=NotificationCardShell.spec.js.map

package/react/components/notifications/tests/NotificationCardShell.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCardShell.spec.js","sourceRoot":"","sources":["../../../../src/components/notifications/tests/NotificationCardShell.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { afterEach, describe, it } from \"mocha\";\nimport { expect } from \"chai\";\nimport { NoActionsNoLogos, NoLogos, AllFields, AllFieldsToasts } from \"../stories/NotificationCardShell.stories\";\nimport { NotificationCardPropType } from \"../components/shared/NotificationCardShell\";\nimport { accessibilityAssessor } from \"../../sdd/tests/a11y_helper\";\nimport { waitTime } from \"../../sdd/sdd_helpers\";\nimport sinon from \"sinon\";\n\ndescribe(\"<NotificationCardShell />\", () => {\n\tafterEach(() => {\n\t\tsinon.restore();\n\t});\n\n\tit(\"should pass accessibility scans when in the notification center\", async () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t}).timeout(10e3);\n\n\tit(\"should pass accessibility scans when in the notification toasts\", async () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} uiContext=\"toasts\" />);\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t}).timeout(10e3);\n\n\tconst testHalo = (args: NotificationCardPropType, expected: any) => async () => {\n\t\tconst { notification } = args;\n\t\t// Refresh the issued at date as this tests behaviour based on the passage of time\n\t\tnotification.issuedAt = new Date().toISOString();\n\t\tconst wrapper = mount(<AllFields {...(args as NotificationCardPropType)} notification={notification} />);\n\t\tawait waitTime(0);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists()).to.equal(expected);\n\t\texpect(wrapper.find(\".notification-card.read\").exists(), \"card should not be marked as read\").to.equal(false);\n\t};\n\n\tit(\n\t\t\"should show a halo when the notification is new\",\n\t\ttestHalo({ ...AllFields.args, uiContext: \"center\" } as NotificationCardPropType, true)\n\t).timeout(10e3);\n\n\tit(\n\t\t\"should not show a halo when a toast\",\n\t\ttestHalo({ ...AllFields.args, uiContext: \"toasts\" } as NotificationCardPropType, false)\n\t).timeout(10e3);\n\n\t// Skipped because it fails when running the whole suite. Passes when run on its own.\n\t// Also couldn't get sinon.useFakeTimers() to work\n\tit(\"should hide the new halo after 3 seconds of time (3s comes from preferences)\", async () => {\n\t\tconst { notification } = AllFields.args as NotificationCardPropType;\n\t\tnotification.issuedAt = new Date().toISOString();\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} notification={notification} />);\n\t\tawait waitTime(0);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists(), \"Card is new\").to.be.true;\n\t\tawait waitTime(2000);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists(), \"Card is still new\").to.be.true;\n\t\tawait waitTime(1500);\n\t\twrapper.update();\n\t\texpect(wrapper.find(\".notification-card.new\").exists(), \"Card is no longer new\").to.be.false;\n\t}).timeout(10e3);\n\n\tit(\"should be read\", () => {\n\t\tconst { notification } = AllFields.args as NotificationCardPropType;\n\t\tnotification.isRead = true;\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} notification={notification} />);\n\t\texpect(wrapper.find(\".notification-card.read\").exists(), \"card should be marked as read\").to.equal(true);\n\t});\n\n\tit(\"should have a close button when a toast\", () => {\n\t\tconst wrapper = mount(\n\t\t\t<AllFieldsToasts {...(AllFieldsToasts.args as NotificationCardPropType)} uiContext=\"toasts\" />\n\t\t);\n\t\texpect(\n\t\t\twrapper.find(\".notification-card__dismiss\").exists(),\n\t\t\t\"Toasts should have a dismiss button (x top right corner)\"\n\t\t).to.equal(true);\n\t});\n\n\tit(\"SHOULD have icons\", () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\tconst imageExists = wrapper.find(\".notification-card__header img\").exists();\n\t\tconst defaultImageExists = wrapper.find(\".notification-card__header .default-img\").exists();\n\t\texpect(imageExists && !defaultImageExists, \"Title icon exists and default icon does not\").to.equal(true);\n\n\t\texpect(wrapper.find(\".notification-card__body_img_container img\").exists(), \"Content icon exists\").to.equal(true);\n\t});\n\n\tit(\"SHOULD NOT have icons\", () => {\n\t\tconst wrapper = mount(<NoLogos {...(NoLogos.args as NotificationCardPropType)} />);\n\t\tconst defaultImageExists = wrapper.find(\".notification-card__header .default-img\").exists();\n\t\texpect(defaultImageExists, \"Default title icon exists\").to.equal(true);\n\t\texpect(wrapper.find(\".notification-card__body_img_container img\").exists(), \"Content icon exists\").to.equal(true);\n\t});\n\n\tit(\"should have cssClass value as css class\", () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\texpect(wrapper.find(\".notification-card.css-class-name\").exists()).to.be.true;\n\t});\n\n\tit(\"SHOULD have actions\", () => {\n\t\tconst wrapper = mount(<AllFields {...(AllFields.args as NotificationCardPropType)} />);\n\t\texpect(wrapper.find(\".finsemble-dropdown-action__btn-container\").exists(), \"One grouped action should exist\").to.be\n\t\t\t.true;\n\t\tconst actions = wrapper.find(\".actions-panel .finsemble__btn\");\n\t\texpect(actions.length, \"Two single actions should exist\").to.equal(2);\n\t\tconst spy = sinon.spy(FSBL.Clients.NotificationClient, \"performAction\");\n\t\tactions.at(0).simulate(\"click\");\n\t\texpect(spy.calledOnce, \"action is performed\").to.be.true;\n\t});\n\n\tit(\"SHOULD NOT have actions\", () => {\n\t\tconst wrapper = mount(<NoActionsNoLogos {...(NoActionsNoLogos.args as NotificationCardPropType)} />);\n\t\texpect(wrapper.find(\".actions-panel\").exists()).to.be.false;\n\t});\n});\n"]}

package/react/components/notifications/types.d.ts

@@ -82,10 +82,12 @@ export interface NotificationsConfig {
 export interface WindowConfig {
     window: SpawnParams & NotificationsConfig;
 }
-export declare type OverFlowMenuAction = {
+export declare type ContextMenuAction = {
+    id?: string;
     name: string;
     icon: React.ReactElement;
-    action: (notification: INotification) => void;
+    action?: (name: any) => void;
     label: string;
+    display: boolean;
 };
 export {};

package/react/components/notifications/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notifications/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Notification types\n */\nimport React from \"react\";\nimport { ViewMode, SelectionMode } from \"./constants\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype INotificationHistoryOptions = services.notification.types.INotificationHistoryOptions;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IFilter = services.notification.types.IFilter;\ntype SpawnParams = services.window.types.SpawnParams;\n\nexport interface Control {\n\taction: string;\n\tlabel: string;\n\trun?: Function;\n}\n\nexport interface NotificationCenterControlsProps {\n\tcontrols: Array<Control>;\n\tactive?: Control[\"action\"];\n}\n\nexport interface INotificationCenterProps {\n\tcontrols?: NotificationCenterControlsProps;\n\tnotificationCard?: React.ComponentType<any>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n\tnotificationListRow?: React.ComponentType<any>;\n}\n\nexport interface INotificationToastsProps {\n\tnotificationCard?: React.ComponentType<any>;\n}\n\nexport interface INotificationDetailProps {\n\tnotification: INotification;\n}\n\nexport type NotificationListViewProps = {\n\tnotifications: INotification[];\n\tnotificationListRow?: React.ComponentType<INotificationDetailProps>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n};\n\nexport type NotificationCardViewProps = {\n\tnotifications: INotification[];\n\tnotificationCard?: React.ComponentType<any>; // A custom component used to render a notification\n};\n\nexport type NotificationsContextType = {\n\tviewMode: ViewMode;\n\tsetViewMode: React.Dispatch<React.SetStateAction<ViewMode>>;\n\tselectionMode: SelectionMode;\n\tsetSelectionMode: React.Dispatch<React.SetStateAction<SelectionMode>>;\n\tisSelectAll: boolean;\n\tsetSelectAll: React.Dispatch<React.SetStateAction<boolean>>;\n\tdrawerControlProps: NotificationCenterControlsProps;\n\tsetDrawerControlProps: React.Dispatch<React.SetStateAction<NotificationCenterControlsProps>>;\n\tselectedNotification: INotification | null;\n\tsetSelectedNotification: React.Dispatch<React.SetStateAction<INotification | null>>;\n\tsearchString: string;\n\tsetSearchString: React.Dispatch<React.SetStateAction<string>>;\n\tfilteredNotifications: INotification[];\n\tcheckedNotifications: INotification[];\n\tsetCheckedNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tsetFilteredNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tmuteFilters: IMuteFilter[];\n\tsetMuteFilters: React.Dispatch<React.SetStateAction<IMuteFilter[]>>;\n};\n\nexport interface NotificationsConfig {\n\tfilter?: {\n\t\tinclude?: [];\n\t\texclude?: [];\n\t};\n\tposition?: {};\n\tanimation?: {\n\t\tdisplayDuration: number;\n\t\tanimateIn: string;\n\t\tanimateOut: string;\n\t};\n\tisTransparent?: boolean;\n\tnotificationsHistory?: { since?: string; filter?: IFilter; options?: INotificationHistoryOptions } | boolean;\n\tapplyMuteFilters?: boolean;\n\twindowName: string;\n}\n\nexport interface WindowConfig {\n\twindow: SpawnParams & NotificationsConfig;\n}\n\nexport type OverFlowMenuAction = {\n\tname: string;\n\ticon: React.ReactElement;\n\taction: (notification: INotification) => void;\n\tlabel: string;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notifications/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Notification types\n */\nimport React from \"react\";\nimport { ViewMode, SelectionMode } from \"./constants\";\nimport { services } from \"@finsemble/finsemble-api\";\n\ntype INotification = services.notification.types.INotification;\ntype INotificationHistoryOptions = services.notification.types.INotificationHistoryOptions;\ntype IMuteFilter = services.notification.types.IMuteFilter;\ntype IFilter = services.notification.types.IFilter;\ntype SpawnParams = services.window.types.SpawnParams;\n\nexport interface Control {\n\taction: string;\n\tlabel: string;\n\trun?: Function;\n}\n\nexport interface NotificationCenterControlsProps {\n\tcontrols: Array<Control>;\n\tactive?: Control[\"action\"];\n}\n\nexport interface INotificationCenterProps {\n\tcontrols?: NotificationCenterControlsProps;\n\tnotificationCard?: React.ComponentType<any>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n\tnotificationListRow?: React.ComponentType<any>;\n}\n\nexport interface INotificationToastsProps {\n\tnotificationCard?: React.ComponentType<any>;\n}\n\nexport interface INotificationDetailProps {\n\tnotification: INotification;\n}\n\nexport type NotificationListViewProps = {\n\tnotifications: INotification[];\n\tnotificationListRow?: React.ComponentType<INotificationDetailProps>;\n\tnotificationHeaderRow?: React.ComponentType<any>;\n};\n\nexport type NotificationCardViewProps = {\n\tnotifications: INotification[];\n\tnotificationCard?: React.ComponentType<any>; // A custom component used to render a notification\n};\n\nexport type NotificationsContextType = {\n\tviewMode: ViewMode;\n\tsetViewMode: React.Dispatch<React.SetStateAction<ViewMode>>;\n\tselectionMode: SelectionMode;\n\tsetSelectionMode: React.Dispatch<React.SetStateAction<SelectionMode>>;\n\tisSelectAll: boolean;\n\tsetSelectAll: React.Dispatch<React.SetStateAction<boolean>>;\n\tdrawerControlProps: NotificationCenterControlsProps;\n\tsetDrawerControlProps: React.Dispatch<React.SetStateAction<NotificationCenterControlsProps>>;\n\tselectedNotification: INotification | null;\n\tsetSelectedNotification: React.Dispatch<React.SetStateAction<INotification | null>>;\n\tsearchString: string;\n\tsetSearchString: React.Dispatch<React.SetStateAction<string>>;\n\tfilteredNotifications: INotification[];\n\tcheckedNotifications: INotification[];\n\tsetCheckedNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tsetFilteredNotifications: React.Dispatch<React.SetStateAction<INotification[]>>;\n\tmuteFilters: IMuteFilter[];\n\tsetMuteFilters: React.Dispatch<React.SetStateAction<IMuteFilter[]>>;\n};\n\nexport interface NotificationsConfig {\n\tfilter?: {\n\t\tinclude?: [];\n\t\texclude?: [];\n\t};\n\tposition?: {};\n\tanimation?: {\n\t\tdisplayDuration: number;\n\t\tanimateIn: string;\n\t\tanimateOut: string;\n\t};\n\tisTransparent?: boolean;\n\tnotificationsHistory?: { since?: string; filter?: IFilter; options?: INotificationHistoryOptions } | boolean;\n\tapplyMuteFilters?: boolean;\n\twindowName: string;\n}\n\nexport interface WindowConfig {\n\twindow: SpawnParams & NotificationsConfig;\n}\n\nexport type ContextMenuAction = {\n\tid?: string;\n\tname: string;\n\ticon: React.ReactElement;\n\taction?: (name: any) => void;\n\tlabel: string;\n\tdisplay: boolean;\n};\n"]}

package/react/components/sdd/AddApp.d.ts

@@ -6,11 +6,11 @@
 import "./css/addApp.css";
 export declare type AddAppProps = {
     checkValidURL: (url: string) => boolean;
-    addAppByUrl: (url: string, name: string) => void;
-    addAppByPath: (path: string, name: string, apiAccess: boolean) => void;
+    addAppByUrl: (url: string, name: string, appId?: string) => void;
+    addAppByPath: (path: string, name: string, apiAccess: boolean, appId?: string) => void;
     close: () => void;
     show: boolean;
-    addAppCitrix?: (alias: string, name: string) => void;
+    addAppCitrix?: (alias: string, name: string, appId?: string) => void;
     includeCitrix?: boolean;
     idKey?: string;
 };