fix ui: remove dead code
This commit is contained in:
nick-delirium
parent
18e694d6e4
commit
1434e937ab
9 changed files with 5 additions and 405 deletions
3
frontend/.unimportedrc.json
Normal file
3
frontend/.unimportedrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"entry": ["./app/initialize.tsx"]
|
||||
}
|
||||
|
|
@ -10,9 +10,6 @@ import AuditView from './Audit/AuditView';
|
|||
import Sites from './Sites';
|
||||
import CustomFields from './CustomFields';
|
||||
import Webhooks from './Webhooks';
|
||||
import styles from './client.module.css';
|
||||
import cn from 'classnames';
|
||||
import PreferencesMenu from './PreferencesMenu';
|
||||
import Notifications from './Notifications';
|
||||
import Roles from './Roles';
|
||||
import SessionsListingSettings from 'Components/Client/SessionsListingSettings';
|
||||
|
|
|
|||
|
|
@ -1,180 +0,0 @@
|
|||
import { error as errorRoute } from 'App/routes';
|
||||
import JsonViewer from 'Components/Session_/StackEvents/UserEvent/JsonViewer';
|
||||
import Sentry from 'Components/Session_/StackEvents/UserEvent/Sentry';
|
||||
import { hideHint } from 'Duck/components/player';
|
||||
import withEnumToggle from 'HOCs/withEnumToggle';
|
||||
import { connectPlayer, jump } from 'Player';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import StackEventRow from 'Shared/DevTools/StackEventRow';
|
||||
import { DATADOG, SENTRY, STACKDRIVER, typeList } from 'Types/session/stackEvent';
|
||||
import { NoContent, SlideModal, Tabs, Link } from 'UI';
|
||||
import Autoscroll from '../Autoscroll';
|
||||
import BottomBlock from '../BottomBlock';
|
||||
|
||||
const ALL = 'ALL';
|
||||
|
||||
const TABS = [ALL, ...typeList].map((tab) => ({ text: tab, key: tab }));
|
||||
|
||||
@withEnumToggle('activeTab', 'setActiveTab', ALL)
|
||||
@connectPlayer((state) => ({
|
||||
stackEvents: state.stackList,
|
||||
// stackEventsNow: state.stackListNow,
|
||||
}))
|
||||
@connect(
|
||||
(state) => ({
|
||||
hintIsHidden:
|
||||
state.getIn(['components', 'player', 'hiddenHints', 'stack']) ||
|
||||
!state.getIn(['site', 'list']).some((s) => s.stackIntegrations),
|
||||
}),
|
||||
{
|
||||
hideHint,
|
||||
}
|
||||
)
|
||||
export default class StackEvents extends React.PureComponent {
|
||||
// onFilterChange = (e, { value }) => this.setState({ filter: value })
|
||||
|
||||
state = {
|
||||
currentEvent: null,
|
||||
};
|
||||
|
||||
onDetailsClick(userEvent) {
|
||||
this.setState({ currentEvent: userEvent });
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.setState({ currentEvent: undefined });
|
||||
}
|
||||
|
||||
renderPopupContent(userEvent) {
|
||||
const { source, payload, name } = userEvent;
|
||||
switch (source) {
|
||||
case SENTRY:
|
||||
return <Sentry event={payload} />;
|
||||
case DATADOG:
|
||||
return <JsonViewer title={name} data={payload} icon="integrations/datadog" />;
|
||||
case STACKDRIVER:
|
||||
return <JsonViewer title={name} data={payload} icon="integrations/stackdriver" />;
|
||||
default:
|
||||
return <JsonViewer title={name} data={payload} icon={`integrations/${source}`} />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { stackEvents, activeTab, setActiveTab, hintIsHidden } = this.props;
|
||||
//const filterRE = new RegExp(filter, 'i');
|
||||
const { currentEvent } = this.state;
|
||||
|
||||
const tabs = TABS.filter(
|
||||
({ key }) => key === ALL || stackEvents.some(({ source }) => key === source)
|
||||
);
|
||||
|
||||
const filteredStackEvents = stackEvents.filter(
|
||||
({ source }) => activeTab === ALL || activeTab === source
|
||||
);
|
||||
|
||||
// let lastIndex = -1;
|
||||
// // TODO: Need to do filtering in store, or preferably in a selector
|
||||
// filteredStackEvents.forEach((item, index) => {
|
||||
// if (
|
||||
// this.props.stackEventsNow.length > 0 &&
|
||||
// item.time <= this.props.stackEventsNow[this.props.stackEventsNow.length - 1].time
|
||||
// ) {
|
||||
// lastIndex = index;
|
||||
// }
|
||||
// });
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlideModal
|
||||
title={
|
||||
currentEvent && (
|
||||
<div className="mb-4">
|
||||
<div className="text-xl mb-2">
|
||||
<Link to={errorRoute(currentEvent.errorId)}>
|
||||
<span className="font-bold">{currentEvent.name}</span>
|
||||
</Link>
|
||||
<span className="ml-2 text-sm color-gray-medium">{currentEvent.function}</span>
|
||||
</div>
|
||||
<div>{currentEvent.message}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
isDisplayed={currentEvent != null}
|
||||
content={
|
||||
currentEvent && <div className="px-4">{this.renderPopupContent(currentEvent)}</div>
|
||||
}
|
||||
onClose={this.closeModal.bind(this)}
|
||||
/>
|
||||
<BottomBlock>
|
||||
<BottomBlock.Header>
|
||||
<div className="flex items-center">
|
||||
<span className="font-semibold color-gray-medium mr-4">Events</span>
|
||||
<Tabs
|
||||
className="uppercase"
|
||||
tabs={tabs}
|
||||
active={activeTab}
|
||||
onClick={setActiveTab}
|
||||
border={false}
|
||||
/>
|
||||
</div>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent
|
||||
title="Nothing to display yet"
|
||||
subtext={
|
||||
!hintIsHidden ? (
|
||||
<>
|
||||
<a
|
||||
className="underline color-teal"
|
||||
href="https://docs.openreplay.com/integrations"
|
||||
target="_blank"
|
||||
>
|
||||
Integrations
|
||||
</a>
|
||||
{' and '}
|
||||
<a
|
||||
className="underline color-teal"
|
||||
href="https://docs.openreplay.com/installation/custom-events"
|
||||
target="_blank"
|
||||
>
|
||||
Events
|
||||
</a>
|
||||
{
|
||||
' make debugging easier. Sync your backend logs and custom events with session replay.'
|
||||
}
|
||||
<br />
|
||||
<br />
|
||||
<button className="color-teal" onClick={() => this.props.hideHint('stack')}>
|
||||
Got It!
|
||||
</button>
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
size="small"
|
||||
show={filteredStackEvents.length === 0}
|
||||
>
|
||||
<Autoscroll>
|
||||
{filteredStackEvents.map((userEvent, index) => (
|
||||
<StackEventRow
|
||||
key={userEvent.key}
|
||||
event={userEvent}
|
||||
onJump={() => jump(userEvent.time)}
|
||||
/>
|
||||
// <UserEvent
|
||||
// key={userEvent.key}
|
||||
// onDetailsClick={this.onDetailsClick.bind(this)}
|
||||
// // inactive={index > lastIndex}
|
||||
// // selected={lastIndex === index}
|
||||
// userEvent={userEvent}
|
||||
// onJump={() => jump(userEvent.time)}
|
||||
// />
|
||||
))}
|
||||
</Autoscroll>
|
||||
</NoContent>
|
||||
</BottomBlock.Content>
|
||||
</BottomBlock>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import { DragSource, DropTarget, DndContext } from 'react-dnd';
|
||||
|
||||
const cardSource = {
|
||||
beginDrag(props) {
|
||||
return {
|
||||
id: props.key,
|
||||
index: props.index,
|
||||
prevIndex: props.index,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
const cardTarget = {
|
||||
// eslint-disable-next-line complexity
|
||||
hover(props, monitor, component) {
|
||||
const dragIndex = monitor.getItem().index;
|
||||
const hoverIndex = props.index;
|
||||
|
||||
if (dragIndex === hoverIndex) {
|
||||
return;
|
||||
}
|
||||
/* eslint-disable react/no-find-dom-node */
|
||||
const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
|
||||
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
|
||||
const clientOffset = monitor.getClientOffset();
|
||||
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
|
||||
|
||||
// Dragging downwards
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Dragging upwards
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return;
|
||||
}
|
||||
|
||||
props.onDNDMove(dragIndex, hoverIndex);
|
||||
monitor.getItem().index = hoverIndex;
|
||||
},
|
||||
|
||||
drop(props, monitor) {
|
||||
const dragIndex = monitor.getItem().prevIndex;
|
||||
const dropIndex = props.index;
|
||||
if (props.onDNDDrop) {
|
||||
props.onDNDDrop(dragIndex, dropIndex);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const DNDContext = DndContext(HTML5Backend);
|
||||
|
||||
export const DNDSource = name => DragSource(name, cardSource, (connect, monitor) => ({
|
||||
connectDragSource: connect.dragSource(),
|
||||
isDragging: monitor.isDragging(),
|
||||
}));
|
||||
|
||||
export const DNDTarget = name => DropTarget(name, cardTarget, connect => ({
|
||||
connectDropTarget: connect.dropTarget(),
|
||||
}));
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Drawer, DrawerProps } from 'antd';
|
||||
|
||||
|
||||
interface ExtendedDrawerProps extends DrawerProps {
|
||||
visible: boolean;
|
||||
onClose: any;
|
||||
}
|
||||
|
||||
const DrawerComponent: React.FC<ExtendedDrawerProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
title,
|
||||
placement,
|
||||
children
|
||||
}) => {
|
||||
return (
|
||||
<Drawer
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
destroyOnClose
|
||||
width={400}
|
||||
maskClosable={false}
|
||||
title={title}
|
||||
placement={placement}
|
||||
>
|
||||
{children}
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
const useDrawer = () => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [content, setContent] = useState<React.ReactNode>(null);
|
||||
const [drawerProps, setDrawerProps] = useState<DrawerProps>({
|
||||
title: '',
|
||||
children: null,
|
||||
placement: 'right'
|
||||
});
|
||||
|
||||
const showDrawer = (component: React.ReactNode, props: DrawerProps) => {
|
||||
setContent(component);
|
||||
setDrawerProps(props);
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
|
||||
const DrawerWrapper: React.FC = () => {
|
||||
return (
|
||||
<DrawerComponent
|
||||
visible={visible}
|
||||
onClose={() => setVisible(false)}
|
||||
{...drawerProps}
|
||||
>
|
||||
{content}
|
||||
</DrawerComponent>
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
showDrawer,
|
||||
// hideDrawer,
|
||||
DrawerWrapper
|
||||
};
|
||||
};
|
||||
|
||||
export default useDrawer;
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
import React from 'react';
|
||||
export default (propNames) => BaseComponent => class extends React.PureComponent {
|
||||
state = {
|
||||
obj: this.getObjFromProps(),
|
||||
changed: false,
|
||||
}
|
||||
|
||||
getObjFromProps() {
|
||||
const obj = {}
|
||||
propNames.forEach(propName => {
|
||||
obj[ propName ] = this.props[ propName ] || null;
|
||||
});
|
||||
return obj;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (propNames.some(propName => prevProps[ propName ] !== this.props[ propName ])){
|
||||
this.setState({
|
||||
obj: this.getObjFromProps(),
|
||||
changed: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
_onChange = ({ name, value, type, checked }) => {
|
||||
if ([ 'radio', 'checkbox' ].includes(type)) {
|
||||
this.edit(name, checked);
|
||||
} else {
|
||||
this.edit(name, value);
|
||||
}
|
||||
}
|
||||
|
||||
onChange = ({ target }) => this._onChange(target)
|
||||
|
||||
onChangeSemantic = (e, target) => this._onChange(target)
|
||||
|
||||
edit = (name, value) => {
|
||||
this.setState({
|
||||
obj: {
|
||||
...this.state.obj,
|
||||
[ name ]: value,
|
||||
},
|
||||
changed: true,
|
||||
});
|
||||
}
|
||||
|
||||
update = (name, updateFunction = a => a) => {
|
||||
this.setState({
|
||||
obj: {
|
||||
...this.state.obj,
|
||||
[ name ]: updateFunction(this.state.obj[ name ]),
|
||||
},
|
||||
changed: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<BaseComponent
|
||||
{ ...this.props }
|
||||
onChange={ this.onChange }
|
||||
onChangeSemantic={ this.onChangeSemantic }
|
||||
edit={ this.edit }
|
||||
update={ this.update }
|
||||
changed={ this.state.changed }
|
||||
{ ...this.state.obj }
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import React from 'react';
|
||||
const withEnumToggle = (stateName = 'active', handlerName = 'setActive', initial) => BaseComponent =>
|
||||
class extends React.Component {
|
||||
state = {
|
||||
active: initial,
|
||||
};
|
||||
|
||||
setActive = state => this.setState({
|
||||
active: state,
|
||||
})
|
||||
|
||||
render() {
|
||||
const newProps = {
|
||||
[ handlerName ]: this.setActive,
|
||||
[ stateName ]: this.state.active,
|
||||
};
|
||||
return <BaseComponent { ...newProps } { ...this.props } />;
|
||||
}
|
||||
};
|
||||
|
||||
export default withEnumToggle;
|
||||
|
|
@ -21,7 +21,8 @@
|
|||
"cy:open": "cypress open",
|
||||
"cy:test": "cypress install && cypress run --browser chrome",
|
||||
"cy:test-firefox": "cypress install && cypress run --browser firefox",
|
||||
"cy:test-edge": "cypress install && cypress run --browser edge"
|
||||
"cy:test-edge": "cypress install && cypress run --browser edge",
|
||||
"check-unimported": "npx unimported"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.2.5",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue