ref(alert): Change trigger chart time selector component (WOR-873) (#25905)

Match the discover select controls

static/app/views/settings/incidentRules/triggers/chart/index.tsx

@@ -7,13 +7,13 @@ import {fetchTotalCount} from 'app/actionCreators/events';
 import {Client} from 'app/api';
 import Feature from 'app/components/acl/feature';
 import EventsRequest from 'app/components/charts/eventsRequest';
+import OptionSelector from 'app/components/charts/optionSelector';
 import {
   ChartControls,
   InlineContainer,
   SectionHeading,
   SectionValue,
 } from 'app/components/charts/styles';
-import SelectControl from 'app/components/forms/selectControl';
 import LoadingMask from 'app/components/loadingMask';
 import Placeholder from 'app/components/placeholder';
 import {t} from 'app/locale';
@@ -150,8 +150,8 @@ class TriggersChart extends React.PureComponent<Props, State> {
     }
   }
 
-  handleStatsPeriodChange = (statsPeriod: {value: TimePeriod; label: string}) => {
-    this.setState({statsPeriod: statsPeriod.value});
+  handleStatsPeriodChange = (timePeriod: string) => {
+    this.setState({statsPeriod: timePeriod as TimePeriod});
   };
 
   getStatsPeriod = () => {
@@ -282,26 +282,15 @@ class TriggersChart extends React.PureComponent<Props, State> {
                         </React.Fragment>
                       </InlineContainer>
                       <InlineContainer>
-                        <SectionHeading>{t('Display')}</SectionHeading>
-                        <PeriodSelectControl
-                          inline={false}
-                          styles={{
-                            control: provided => ({
-                              ...provided,
-                              minHeight: '32px',
-                              height: '32px',
-                            }),
-                          }}
-                          isSearchable={false}
-                          isClearable={false}
-                          disabled={loading || reloading}
-                          name="statsPeriod"
-                          value={period}
-                          choices={statsPeriodOptions.map(timePeriod => [
-                            timePeriod,
-                            TIME_PERIOD_MAP[timePeriod],
-                          ])}
+                        <OptionSelector
+                          options={statsPeriodOptions.map(timePeriod => ({
+                            label: TIME_PERIOD_MAP[timePeriod],
+                            value: timePeriod,
+                            disabled: loading || reloading,
+                          }))}
+                          selected={period}
                           onChange={this.handleStatsPeriodChange}
+                          title={t('Display')}
                         />
                       </InlineContainer>
                     </ChartControls>
@@ -331,12 +320,3 @@ const ChartPlaceholder = styled(Placeholder)`
   margin: 0 0 ${space(2)};
   height: 184px;
 `;
-
-const PeriodSelectControl = styled(SelectControl)`
-  display: inline-block;
-  width: 180px;
-  font-weight: normal;
-  text-transform: none;
-  border: 0;
-  margin-right: ${space(0.5)};
-`;