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, Fonto 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.

A screenshot of the version info popover

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>
    );
}