11import React from "react" ;
22
3- import { ValidIconName } from "../../components/Icon/canonicalIconNames" ;
4- import { IconProps } from "../../components/Icon/Icon" ;
5- import { TestIconProps } from "../../components/Icon/TestIcon" ;
6- import { TestableComponent } from "../../components/interfaces" ;
7- import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar" ;
8- import { SpinnerProps } from "../../components/Spinner/Spinner" ;
9- import { CLASSPREFIX as eccgui } from "../../configuration/constants" ;
3+ import { ValidIconName } from "../../components/Icon/canonicalIconNames" ;
4+ import { IconProps } from "../../components/Icon/Icon" ;
5+ import { TestIconProps } from "../../components/Icon/TestIcon" ;
6+ import { TestableComponent } from "../../components/interfaces" ;
7+ import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar" ;
8+ import { SpinnerProps } from "../../components/Spinner/Spinner" ;
9+ import { CLASSPREFIX as eccgui } from "../../configuration/constants" ;
1010import {
1111 Card ,
1212 ContextMenu ,
13+ DecoupledOverlay ,
1314 IconButton ,
1415 MenuItem ,
16+ Notification ,
17+ NotificationProps ,
1518 OverflowText ,
1619 OverviewItem ,
1720 OverviewItemActions ,
@@ -97,14 +100,24 @@ interface IActivityContextMenu extends TestableComponent {
97100export interface ActivityControlWidgetAction extends TestableComponent {
98101 // The action that should be triggered
99102 action : ( ) => void ;
100- // The tooltip that should be shown over the action icon
103+ // The tooltip that should be shown over the action icon on hover
101104 tooltip ?: string ;
102105 // The icon of the action button
103106 icon : ValidIconName | React . ReactElement < TestIconProps > ;
104107 // Action is currently disabled (but shown)
105108 disabled ?: boolean ;
106109 // Warning state
107110 hasStateWarning ?: boolean ;
111+ // Active state
112+ active ?: boolean
113+ /** A notification that is shown in an overlay pointing at the activity action button. */
114+ notification ?: {
115+ message : string
116+ onClose : ( ) => void
117+ intent ?: NotificationProps [ "intent" ]
118+ // Timeout in ms before notification is closed. Default: none
119+ timeout ?: number
120+ }
108121}
109122
110123interface IActivityMenuAction extends ActivityControlWidgetAction {
@@ -209,28 +222,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
209222 data-test-id = { dataTestIdLegacy ? `${ dataTestIdLegacy } : undefined }
210223 >
211224 { activityActions &&
212- activityActions . map ( ( action , idx ) => {
213- return (
214- < IconButton
215- key = {
216- typeof action . icon === "string"
217- ? action . icon
218- : action [ "data-test-id" ] ?? action [ "data-testid" ] ?? idx
219- }
220- data-test-id = { action [ "data-test-id" ] }
221- data-testid = { action [ "data-testid" ] }
222- name = { action . icon }
223- text = { action . tooltip }
224- onClick = { action . action }
225- disabled = { action . disabled }
226- intent = { action . hasStateWarning ? "warning" : undefined }
227- tooltipProps = { {
228- hoverOpenDelay : 200 ,
229- placement : "bottom" ,
230- } }
231- />
232- ) ;
233- } ) }
225+ activityActions . map ( ( action , idx ) => < ActivityActionButton
226+ key = { idx }
227+ action = { action }
228+ />
229+ ) }
234230 { additionalActions }
235231 { activityContextMenu && activityContextMenu . menuItems . length > 0 && (
236232 < ContextMenu
@@ -241,11 +237,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
241237 return (
242238 < MenuItem
243239 icon = { menuAction . icon }
244- key = {
245- typeof menuAction . icon === "string"
246- ? menuAction . icon
247- : menuAction [ "data-test-id" ] ?? idx
248- }
240+ key = { idx }
249241 onClick = { menuAction . action }
250242 text = { menuAction . tooltip }
251243 />
@@ -267,3 +259,44 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
267259 < div className = { classname } > { widget } </ div >
268260 ) ;
269261}
262+
263+ interface ActivityActionButtonProps {
264+ action : ActivityControlWidgetAction
265+ }
266+
267+ const ActivityActionButton = ( { action} : ActivityActionButtonProps ) => {
268+ const actionButtonRef = React . useRef ( null ) ;
269+ const ActionButton = ( ) => (
270+ < IconButton
271+ data-test-id = { action [ "data-test-id" ] }
272+ data-testid = { action [ "data-testid" ] }
273+ name = { action . icon }
274+ text = { action . tooltip }
275+ onClick = { action . action }
276+ disabled = { action . disabled }
277+ intent = { action . hasStateWarning ? "warning" : undefined }
278+ tooltipProps = { {
279+ hoverOpenDelay : 200 ,
280+ placement : "bottom"
281+ } }
282+ active = { action . active }
283+ />
284+ )
285+ return action . notification ?
286+ < >
287+ < span ref = { actionButtonRef } >
288+ < ActionButton />
289+ </ span >
290+ { actionButtonRef . current && (
291+ < DecoupledOverlay targetSelectorOrElement = { actionButtonRef . current } paddingSize = { "small" } >
292+ < Notification
293+ message = { action . notification . message }
294+ intent = { action . notification . intent ?? "neutral" }
295+ onDismiss = { action . notification . onClose }
296+ timeout = { action . notification . timeout }
297+ />
298+ </ DecoupledOverlay >
299+ ) }
300+ </ > :
301+ < ActionButton />
302+ }
0 commit comments