Files
flipper/desktop/plugins/hermesdebuggerrn/Banner.tsx
Rick Hanlon e3202dfb35 Add survey banner for Hermes Debugger
Summary:
As requested by the Hermes team, this adds an internal-only banner linking to a survey for the debugger (controlled by a GK).

Gatekeeper: https://our.intern.facebook.com/intern/gatekeeper/projects/flipper_plugin_hermes_debugger_survey/

Reviewed By: mweststrate

Differential Revision: D21556848

fbshipit-source-id: df34f49f504d11bba622709df86c8475be2433eb
2020-05-15 05:19:01 -07:00

81 lines
1.7 KiB
TypeScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import React from 'react';
import {shell} from 'electron';
import {styled, colors, FlexRow, Text, GK} from 'flipper';
const BannerContainer = styled(FlexRow)({
height: '30px',
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#2bb673', // Hermes green.
});
const BannerText = styled(Text)({
color: colors.white,
fontSize: 14,
lineHeight: '20px',
});
const BannerLink = styled(CustomLink)({
color: colors.white,
textDecoration: 'underline',
'&:hover': {
cursor: 'pointer',
color: '#303846',
},
});
const StyledLink = styled.span({
'&:hover': {
cursor: 'pointer',
},
});
StyledLink.displayName = 'CustomLink:StyledLink';
function CustomLink(props: {
href: string;
className?: string;
children?: React.ReactNode;
style?: React.CSSProperties;
}) {
return (
<StyledLink
className={props.className}
onClick={() => shell.openExternal(props.href)}
style={props.style}>
{props.children || props.href}
</StyledLink>
);
}
export const isBannerEnabled: () => boolean = function () {
return GK.get('flipper_plugin_hermes_debugger_survey');
};
export default function Banner() {
if (!GK.get('flipper_plugin_hermes_debugger_survey')) {
return null;
}
return (
<BannerContainer>
<BannerText>
Help us improve your debugging experience with this{' '}
<BannerLink href="https://fburl.com/hermessurvey">
single page survey
</BannerLink>
!
</BannerText>
</BannerContainer>
);
}