echo_protomap.proto

enum EnvironmentMode { 
    UNKNOWN_MODE = 1; 

    DEMO = 2; 

    LIVE = 3; 

}

EnvLabel.tsx

import React, { useState } from "react";

import { enumToString } from "helpers/enum";
import { EnvironmentMode } from "protobuf/generated/com/mahifx/model/echo_protomap_pb";

type OwnProps = {
    name?: string;
    mode?: EnvironmentMode;
    version?: string;
    build?: string;
    className?: string;
}

const EnvLabel: React.FC<OwnProps> = props => {
    const {name, mode, version, build} = props;

    const hasBuild: boolean = !!build;
    const [showBuild, setShowBuild] = useState(false);

    const modeName: string = enumToString(mode, EnvironmentMode);

    const onClick = () => {
        setShowBuild(!showBuild);
    };

    return <span
        className={props.className}
        onClick={onClick}
    >
        <b>{name} {mode !== EnvironmentMode.LIVE ? modeName : ""}</b>
        {" "}
        v{version}
        {hasBuild && showBuild && `-${build}`}
    </span>;
};