import React , { forwardRef , useState } from 'react' ; import { Theme , makeStyles } from '@material-ui/core/styles' ; import cx from 'classnames' ; import { EnvironmentType , BaseProps } from '@toptal/picasso-shared' ; import { useAppConfig } from '@toptal/picasso-provider' ; import styles from './styles' ; export type EnvironmentTypes = EnvironmentType < 'temploy' | 'test' > ; export interface Props extends BaseProps { /** Name of the current environment */ environment : EnvironmentTypes ; /** Name of the product to be rendered alongside environment (i.e. Blackfish, Talent, Portal, Billing) */ productName : string ; } const useStyles = makeStyles < Theme > ( styles , { name : 'PicassoEnvironmentBanner' } ) ; export const EnvironmentBanner = forwardRef < HTMLDivElement , Props > ( function EnvironmentBanner ( props , ref ) { const { environment : configEnvironment } = useAppConfig ( ) ; const { environment , productName } = props ; const classes = useStyles ( ) ; const [ isShown , setIsShown ] = useState ( true ) ; const resolvedEnvironment = environment || configEnvironment ; if ( resolvedEnvironment === 'production' || resolvedEnvironment === 'test' || ! isShown ) { return null ; } return ( < div ref = { ref } className = { cx ( classes . root , { [ classes . rootDevelopment ] : resolvedEnvironment === 'development' , [ classes . rootTemploy ] : resolvedEnvironment === 'temploy' , [ classes . rootStaging ] : resolvedEnvironment === 'staging' } ) } > < div onClick = { ( ) => setIsShown ( false ) } className = { cx ( classes . label , { [ classes . labelDevelopment ] : resolvedEnvironment === 'development' , [ classes . labelTemploy ] : resolvedEnvironment === 'temploy' , [ classes . labelStaging ] : resolvedEnvironment === 'staging' } ) } > { `${ productName } ${ resolvedEnvironment }` } < /div> < /div>); } ) ; EnvironmentBanner . defaultProps = { environment : 'production' } ; EnvironmentBanner . displayName = 'EnvironmentBanner' ; export default EnvironmentBanner ;