Skip to content

Commit

Permalink
Updates to select
Browse files Browse the repository at this point in the history
  • Loading branch information
smith committed Feb 2, 2021
1 parent cdac20c commit 77bfde8
Showing 1 changed file with 24 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,47 @@

import { EuiSelect } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { FormEvent } from 'react';
import React, { FormEvent, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
import { useUrlParams } from '../../context/url_params_context/use_url_params';
import { fromQuery, toQuery } from './Links/url_helpers';

// The default transaction type (for non-RUM services) is "request". Set the
// min-width on here to the width when "request" is loaded so it doesn't start
// out collapsed and change its width when the list of transaction types is loaded.
const EuiSelectWithWidth = styled(EuiSelect)`
min-width: 157px;
`;

export function TransactionTypeSelect() {
const { transactionTypes } = useApmServiceContext();
const history = useHistory();
const {
urlParams: { transactionType },
} = useUrlParams();

function handleChange(event: FormEvent<HTMLSelectElement>) {
const selectedTransactionType = event.currentTarget.value;
const newLocation = {
...history.location,
search: fromQuery({
...toQuery(history.location.search),
transactionType: selectedTransactionType,
}),
};
history.push(newLocation);
}
const handleChange = useCallback(
(event: FormEvent<HTMLSelectElement>) => {
const selectedTransactionType = event.currentTarget.value;
const newLocation = {
...history.location,
search: fromQuery({
...toQuery(history.location.search),
transactionType: selectedTransactionType,
}),
};
history.push(newLocation);
},
[history]
);

const options = transactionTypes.map((t) => ({ text: t, value: t }));

return (
<>
<EuiSelect
<EuiSelectWithWidth
onChange={handleChange}
options={options}
prepend={i18n.translate('xpack.apm.transactionTypeSelectLabel', {
Expand Down

0 comments on commit 77bfde8

Please sign in to comment.