openreplay/frontend/app/components/Assist/AssistSearchField/AssistSearchField.tsx
Sudheer Salavadi f35456b3f8 UI Improvements
2024-07-01 20:03:49 +05:30

74 lines
2.2 KiB
TypeScript

import React from 'react';
import { connect } from 'react-redux';
import {
addFilterByKeyAndValue,
clearSearch,
edit as editFilter,
fetchFilterSearch,
} from 'Duck/liveSearch';
import { Button } from 'antd';
import { useModal } from 'App/components/Modal';
import SessionSearchField from 'Shared/SessionSearchField';
import { MODULES } from 'Components/Client/Modules';
import AssistStats from '../../AssistStats';
import Recordings from '../RecordingsList/Recordings'
interface Props {
appliedFilter: any;
fetchFilterSearch: any;
addFilterByKeyAndValue: any;
clearSearch: any;
isEnterprise: boolean;
modules: string[]
}
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;
const { showModal, hideModal } = useModal();
const showStats = () => {
showModal(<AssistStats />, { right: true, width: 960 })
}
const showRecords = () => {
showModal(<Recordings />, { right: true, width: 960 })
}
return (
<div className="flex items-center w-full gap-2">
<div style={{ width: '60%' }}>
<SessionSearchField />
</div>
{props.isEnterprise && props.modules.includes(MODULES.OFFLINE_RECORDINGS)
? <Button type="primary" ghost onClick={showRecords}>Training Videos</Button> : null
}
<Button type="primary" ghost onClick={showStats} disabled={!props.modules.includes(MODULES.ASSIST_STATS) || !props.modules.includes(MODULES.ASSIST)}>Co-Browsing Reports</Button>
<Button
type="link"
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']),
modules: state.getIn(['user', 'account', 'settings', 'modules']) || [],
isEnterprise:
state.getIn(['user', 'account', 'edition']) === 'ee' ||
state.getIn(['user', 'authDetails', 'edition']) === 'ee'
}),
{
fetchFilterSearch,
editFilter,
addFilterByKeyAndValue,
clearSearch,
}
)(AssistSearchField);