Customize the version info popover
Clicking on the i icon in the status bar on the bottom right opens the VersionInfoPopover. This popover displays the SDK version number, Editor build date, and SDK build date. There is also a button called "License info" to open a modal which shows the (open source) licenses of all 3rd party dependencies the Fonto SDK uses.

You can customize this popover by creating your own Popover and registering it with the uiManager under the "VersionInfoPopover" name:
install.js
JavaScript
import uiManager from 'fontoxml-modular-ui/src/uiManager.js';
import RecipePopover from './ui/MyCustomVersionInfoPopover.jsx';
export default function install() {
uiManager.registerReactComponent('VersionInfoPopover', MyCustomVersionInfoPopover);
}
Here is the definition of the default version info popover that is used if you do not register your own component.
Note the prop/@param descriptions. Make sure your own popover implements these props correctly.
DefaultVersionInfoPopover.jsx
JavaScript
import React, { useCallback } from 'react';
import {
Button,
Flex,
Label,
Popover,
PopoverBody,
PopoverFooter,
PopoverHeader
} from 'fds/components';
import t from 'fontoxml-localization/src/t.js';
/**
* @param {function():void} openLicenseInfoModal A callback that opens the license info modal.
* Note: You must implement a TextLink or Button
* somewhere in your popover that onClick
* executes this callback.
* @param {function():void} togglePopover A callback to close the popover.
* @param {object} versionInfo The version info data to display.
* @param {string} versionInfo.sdkVersion
* @param {Date} versionInfo.appBuildDate
* @param {Date} versionInfo.sdkBuildDate
*
* @return {React.ReactElement}
**/
export default function DefaultVersionInfoPopover({ openLicenseInfoModal, togglePopover, versionInfo }) {
const handleLicenseInfoButtonClick = useCallback(() => {
togglePopover();
openLicenseInfoModal();
}, [openLicenseInfoModal, togglePopover]);
return (
<Popover>
<PopoverHeader
icon="fonto-logo-icon"
title={t('SDK: {SDK_VERSION}', { SDK_VERSION: versionInfo.sdkVersion })}
/>
<PopoverBody>
<Flex flex="none" flexDirection="column" spaceSize="s" alignItems="flex-start">
<Label flex="none">
{t('Editor built on: {DATE, fonto_date}, {DATE, time, short}', {
DATE: versionInfo.appBuildDate
})}
</Label>
<Label flex="none">
{t('SDK built on: {DATE, fonto_date}, {DATE, time, short}', {
DATE: versionInfo.sdkBuildDate
})}
</Label>
</Flex>
</PopoverBody>
<PopoverFooter>
<Button
label={t('License info')}
type="default"
icon="list-alt"
onClick={handleLicenseInfoButtonClick}
/>
</PopoverFooter>
</Popover>
);
}