Browse Source

feat(discover): Add beta feature badge to limit (#29050)

- This adds the beta feature badge to the limit dropdown for the
  modified display options that allow variable limits to top events
William Mak 3 years ago
parent
commit
230ac27c99

+ 12 - 2
static/app/components/charts/optionSelector.tsx

@@ -7,11 +7,13 @@ import DropdownBubble from 'app/components/dropdownBubble';
 import DropdownButton from 'app/components/dropdownButton';
 import {DropdownItem} from 'app/components/dropdownControl';
 import DropdownMenu from 'app/components/dropdownMenu';
+import FeatureBadge from 'app/components/featureBadge';
 import Tooltip from 'app/components/tooltip';
 import Truncate from 'app/components/truncate';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
 import {SelectValue} from 'app/types';
+import {defined} from 'app/utils';
 
 const defaultProps = {
   menuWidth: 'auto',
@@ -22,6 +24,7 @@ type Props = {
   selected: string;
   onChange: (value: string) => void;
   title: string;
+  featureType?: 'alpha' | 'beta' | 'new';
 } & typeof defaultProps;
 
 type State = {
@@ -58,12 +61,15 @@ class OptionSelector extends Component<Props, State> {
 
   render() {
     const {menuContainerWidth} = this.state;
-    const {options, onChange, selected, title, menuWidth} = this.props;
+    const {options, onChange, selected, title, menuWidth, featureType} = this.props;
     const selectedOption = options.find(opt => selected === opt.value) || options[0];
 
     return (
       <InlineContainer>
-        <SectionHeading>{title}</SectionHeading>
+        <SectionHeading>
+          {title}
+          {defined(featureType) ? <StyledFeatureBadge type={featureType} /> : null}
+        </SectionHeading>
         <MenuContainer ref={this.menuContainerRef}>
           <DropdownMenu alwaysRenderMenu={false}>
             {({isOpen, getMenuProps, getActorProps}) => (
@@ -154,4 +160,8 @@ const StyledDropdownItem = styled(DropdownItem)`
   white-space: nowrap;
 `;
 
+const StyledFeatureBadge = styled(FeatureBadge)`
+  margin-left: 0px;
+`;
+
 export default OptionSelector;

+ 1 - 0
static/app/views/eventsV2/chartFooter.tsx

@@ -76,6 +76,7 @@ export default function ChartFooter({
                   options={topEventOptions}
                   onChange={onTopEventsChange}
                   menuWidth="60px"
+                  featureType="beta"
                 />
               );
             } else {