How to display Alert above the SiteInfoHeader upon user-based action in siteInfoToolsItem

[picklebrownie]

Hi All

I am developing a Local Add-on and don’t understand how to display the Local UI Component Alert above the SiteInfoHeader upon user-based action in siteInfoToolsItem. See code below for example. Thanks in advance for any assistance!

main.ts

import * as LocalMain from '@getflywheel/local/main';

export default function(context: LocalMain.AddonMainContext): void {
    const { electron } = context;
	const { ipcMain } = electron;
    

    ipcMain.on('test-alert', (event, siteId) => {
        const messageData = {
                title: 'Test Alert',
                body: 'This is a test alert',
        };
        // display an Alert ???
    });
}

renderer.tsx

import React from 'react';
import fs from 'fs-extra';
import path from 'path';
import Boilerplate from './components/Boilerplate';

export default function (context): void {
	const { hooks } = context;

	const packageJSON = fs.readJsonSync(path.join(__dirname, '../package.json'));
	const addonID = packageJSON.slug;

	hooks.addFilter('siteInfoToolsItem', (menu) => [
		...menu,
		{
			menuItem: 'Test Alert',
			path: `/${addonID}`,
			render: (props) => <Boilerplate {...props} />,
		},
	]);
}

components/Boilerplate.tsx

import React, { useState } from "react";
import { ipcRenderer } from "electron";
import { TextButton } from '@getflywheel/local-components';

const Boilerplate = (props) => {
	const [siteId] = useState(props.site?.id);

	return (
		<TextButton
			style={{paddingLeft: 0}}
			onClick={(event) => {
				console.log('test alert enter');
				ipcRenderer.send('test-alert', siteId);
			}}
		>
			Click to Test Alert
		</TextButton>
	);
};

export default Boilerplate;

[nickc]

@picklebrownie You can use the Alert inline on the frontend like this without an IPC call:

Boilerplate.jsx

import React, { useState } from "react";
import { Alert, TextButton } from "@getflywheel/local-components";

const Boilerplate = (props) => {
	const [showAlert, setShowAlert] = useState(false);

	return (
		<div style={{ flex: "1", overflowY: "auto", margin: "10px" }}>
			<Alert
				aria-label="Error"
				id="custom-error-alert"
				style={{ marginTop: 20 }}
				type="warning"
				show={showAlert}
				onDismiss={() => {
					setShowAlert(false);
				}}
				dismissable={true}
			>
				This is a test alert.
			</Alert>
			<TextButton
				style={{ paddingLeft: 0 }}
				onClick={() => {
					setShowAlert(!showAlert);
				}}
			>
				Click to Test Alert
			</TextButton>
		</div>
	);
};

export default Boilerplate;

Resulting in:

However, Local does not currently provide a content hook to place the Alert above the Site Info Header, so Alert placement is somewhat limited in add-ons.