useApplication

useApplication is a helper hook that will return your application context from Dashboard which contain:

Name	Description
id	Your Application uniq-id.
confirm	confirm object with function keys: add/remove to handle Application confirms.
config	Your Application config from Applications Settings.
store	Your plugin redux-store, regarding if it's a shared one or not.
applicationRef	Your Application Node ref object.
status	Dashboard status payload, if your plugin have any requirements
confirmOnLeave	Function to indicate that your Application can't be un-mounted atm, so Dashboard will display a confirm dialog for the user before leaving your Application, more info at the bottom

How to use

import { Plugin } from '@root'

const MyCustomComponent = () => {
    const {
        id,
        confirm,
        confirmOnLeave,
        config,
        store,
        applicationRef,
        status,
    } = Plugin.useApplication()
}

export default MyCustomComponent

Application Confirm

Add

You can display you application confirm in two ways:

Callback object

name	type	default	description
headline	String	'Confirm'	Your confirm box headline
message	String	null	Your confirm box message
buttonTexts	Array	['Cancel', 'Confirm']	Your confirm box button labels
onConfirm	Function	null	Callback when user click on Confirm button
onCancel	Function	null	Callback when user click on Cancel button

import { Plugin } from '@root'

const App = props => {
    const { confirm } = Plugin.useApplication()
    
    const handleOnDelete () => {
        const confirmPayload = {
            onCancel: () => {},
            onConfirm: () => {},
            message: `Do you want to save your cahnges before you close?`
            headline: 'Confirm',
            buttonTexts: ['Discard', 'save']

        }
        
        confirm.add(confirmPayload)
    }
    
    return (
        <button onClick={handleOnDelete}>
            {'Delete'}
        </button>
    )
}

Dashboard will close the confirm automatically when user click on Cancel button if there is noonCancel callback

Custom-Component object

name	type	default	Description
component	React Component	null	Your custom confirm component

const MyCustomConfirm = props  => {
    const {
        onConfirm,
        headline,
        message,
        cancelLabel,
        confirmLabel,
        applicationId,
        closeConfirm
    } = props
    
    return (
        <Wrapper>
            <Headline text={headline}/>
            <Message text={message}/>
            <ButtonsWrapper>
                <Button text={cancelLabel} onClick={closeConfirm}/>
                <Button text={confirmLabel} onClick={() => {
                    onConfirm()
                    closeConfirm()
                }}/>
            </ButtonsWrapper>
        </Wrapper>
    )
}

const MyCustomComponent = () => {
    const { confirm } = Plugin.useApplication()
    
    const handleConfirm = () => {
        const confirmPayload = {
        	component: (
            	<MyCustomConfirm
                    cancelLabel={'Cancel'}
                    confirmLabel={'Delete'}
                    onConfirm={() => {}}
                    closeConfirm={confirm.close}
                    message={'This action will efect....'}
                    headline={'Are you sure you want to delete ....?'}
            	/>
            )
        }
    
        confirm.add(confirmPayload)
    }
    
    return (
        <div>
            <button onClick={handleConfirm}>Confirm</button>
        </div>
    )
}

As long as you are using a custom component to display your confirm message Dashboard does not know when to unmount the confirm box so you should close the confirm manually

Remove

simply by calling confirm.remove() from Plugin.useApplication() hook

Confirm on leave

Before Dashboard 4.1, applications where using the scoped method seeksAttentionOnWorkspaceLeave()

And this method was limited only by extending the Application component in the main component

With the new confirmOnLeave method, it can be accessible from any where in your React tree, from useApplication() context

Call confirmOnLeave() to prompt the user when the user tries to change workspace/profile if your plugin needs the user attention or it's doing some processing that should not be canceled

The user always have the ability to ignore the prompt!

To tell Dashboard that your application does need attention, call confirmOnLeave() with passing true as an argument

confirmOnLeave(true)

import {
    useState,
    useEffect
} from 'react'

import { Plugin } from '@root'

const MyApplication = () => {
    const [loading, setLoading] = useState(true)
    
    const { confirmOnLeave } = useApplication()
    
    useEffect(() => {
        confirmOnLeave(loading)
        
        return () => confirmOnLeave(false)
    }, [loading])
}

The prompt dialog will cover the Dashboard intairly, and the message will be the same all the time without the ability to change it or change the buttons label

confirmOnLeave() should only be called when the application needs to prompt the user. Therefore call it and pass false when the application do not need to prompt the user anymore.

confirmOnLeave(false)

An application that always seeks attention can be seen as annoying by the user.