openreplay/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx
2023-03-31 14:38:44 +02:00

45 lines
1.4 KiB
TypeScript

import React from 'react';
import { Button } from 'UI';
import SessionSearchField from 'Shared/SessionSearchField';
// import { fetchFilterSearch } from 'Duck/search';
import { connect } from 'react-redux';
import { edit as editFilter, addFilterByKeyAndValue, clearSearch, fetchFilterSearch } from 'Duck/liveSearch';
// import { clearSearch } from 'Duck/search';
interface Props {
appliedFilter: any;
fetchFilterSearch: any;
addFilterByKeyAndValue: any;
clearSearch: any;
}
function AssistSearchField(props: Props) {
const hasEvents = props.appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
const hasFilters = props.appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
return (
<div className="flex items-center w-full">
<div style={{ width: '60%', marginRight: '10px' }}>
<SessionSearchField />
</div>
<Button
variant="text-primary"
className="ml-auto font-medium"
disabled={!hasFilters && !hasEvents}
onClick={() => props.clearSearch()}
>
Clear Search
</Button>
</div>
);
}
export default connect(
(state: any) => ({
appliedFilter: state.getIn(['liveSearch', 'instance']),
}),
{
fetchFilterSearch,
editFilter,
addFilterByKeyAndValue,
clearSearch,
}
)(AssistSearchField);