feat(ui): change eventgroup sidebar

frontend/app/components/Session_/EventsBlock/Event.js

@@ -78,7 +78,7 @@ export default class Event extends React.PureComponent {
               <div className="flex items-center w-full" style={{ minWidth: '0'}}>
                 <span className={cls.title}>{ title }</span>
                 {/* { body && !isLocation && <div className={ cls.data }>{ body }</div> } */}
-                { body && !isLocation && 
+                { body && !isLocation &&
                   <TextEllipsis maxWidth="60%" className="w-full ml-2 text-sm color-gray-medium" text={body} />
                 }
               </div>
@@ -96,7 +96,7 @@ export default class Event extends React.PureComponent {
         </div>
         { isLocation &&
           <div className="mt-1">
-              <span className="text-sm font-normal color-gray-medium">{ body }</span> 
+              <span className="text-sm font-normal color-gray-medium">{ body }</span>
           </div>
         }
       </div>
@@ -105,18 +105,20 @@ export default class Event extends React.PureComponent {
 
   render() {
     const {
-      event, 
-      selected, 
-      isCurrent, 
-      onClick, 
-      showSelection, 
-      onCheckboxClick, 
+      event,
+      selected,
+      isCurrent,
+      onClick,
+      showSelection,
+      onCheckboxClick,
       showLoadInfo,
       toggleLoadInfo,
       isRed,
       extended,
       highlight = false,
-      presentInSearch=false
+      presentInSearch = false,
+      isLastInGroup,
+      whiteBg,
     } = this.props;
     const { menuOpen } = this.state;
     return (
@@ -125,7 +127,7 @@ export default class Event extends React.PureComponent {
         onMouseLeave={ this.onMouseLeave }
         data-openreplay-label="Event"
         data-type={event.type}
-        className={ cn(cls.event, { 
+        className={ cn(cls.event, {
           [ cls.menuClosed ]: !menuOpen,
           [ cls.highlighted ]: showSelection ? selected : isCurrent,
           [ cls.selected ]: selected,
@@ -134,11 +136,12 @@ export default class Event extends React.PureComponent {
           [ cls.clickType ]: event.type === TYPES.CLICK,
           [ cls.inputType ]: event.type === TYPES.INPUT,
           [ cls.clickrageType ]: event.type === TYPES.CLICKRAGE,
-          [cls.highlight] : presentInSearch
+          [ cls.highlight ] : presentInSearch,
+          [ cls.lastInGroup ]: whiteBg,
         }) }
         onClick={ onClick }
       >
-        { menuOpen && 
+        { menuOpen &&
           <button onClick={ this.copyHandler } className={ cls.contextMenu }>
             { event.target ? 'Copy CSS' : 'Copy URL' }
           </button>

frontend/app/components/Session_/EventsBlock/EventGroupWrapper.js

@@ -26,7 +26,7 @@ class EventGroupWrapper extends React.PureComponent {
     this.props.mesureHeight();
   }
 
-  onEventClick = (e) => this.props.onEventClick(e, this.props.event); 
+  onEventClick = (e) => this.props.onEventClick(e, this.props.event);
 
   onCheckboxClick = e => this.props.onCheckboxClick(e, this.props.event);
 
@@ -41,18 +41,19 @@ class EventGroupWrapper extends React.PureComponent {
       showSelection,
       showLoadInfo,
       isFirst,
-      presentInSearch
+      presentInSearch,
     } = this.props;
-    const isLocation = event.type === TYPES.LOCATION;    
+    const isLocation = event.type === TYPES.LOCATION;
 
-    return ( 
-      <div 
-        className={ 
-          cn(stl.container, {
+    const whiteBg = isLastInGroup && event.type !== TYPES.LOCATION || (!isLastEvent && event.type !== TYPES.LOCATION)
+    return (
+      <div
+        className={
+          cn(stl.container, "py-1", {
             [stl.last]: isLastInGroup,
             [stl.first]: event.type === TYPES.LOCATION,
             [stl.dashAfter]: isLastInGroup && !isLastEvent,
-          })
+          }, isLastInGroup && 'pb-2', event.type === TYPES.LOCATION && "pt-2 pb-2")
         }
       >
         { isFirst && isLocation && event.referrer &&
@@ -74,6 +75,8 @@ class EventGroupWrapper extends React.PureComponent {
               toggleLoadInfo={ this.toggleLoadInfo }
               isCurrent={ isCurrent }
               presentInSearch={presentInSearch}
+              isLastInGroup={isLastInGroup}
+              whiteBg={whiteBg}
             />
           : <Event
               key={ event.key }
@@ -83,8 +86,10 @@ class EventGroupWrapper extends React.PureComponent {
               selected={ isSelected }
               isCurrent={ isCurrent }
               showSelection={ showSelection }
-              overlayed={ isEditing }              
+              overlayed={ isEditing }
               presentInSearch={presentInSearch}
+              isLastInGroup={isLastInGroup}
+              whiteBg={whiteBg}
             />
         }
       </div>

frontend/app/components/Session_/EventsBlock/EventSearch/EventSearch.js

@@ -32,7 +32,7 @@ export default function EventSearch(props) {
             <Input
               autoFocus
               type="text"
-              placeholder="Filter Events"
+              placeholder="Filter Events by value, URL or type"
               className="inset-0 w-full"
               name="query"
               value={value}

frontend/app/components/Session_/EventsBlock/EventsBlock.js

@@ -141,6 +141,8 @@ export default class EventsBlock extends React.PureComponent {
     const isSelected = selectedEvents.includes(event);
     const isCurrent = index === currentTimeEventIndex;
     const isEditing = this.state.editingEvent === event;
+
+    const heightBug = index === 0 && event.type === TYPES.LOCATION && event.referrer ? { top: 2 } : {}
     return (
       <CellMeasurer
         key={key}
@@ -149,7 +151,7 @@ export default class EventsBlock extends React.PureComponent {
         rowIndex={index}
       >
         {({measure, registerChild}) => (
-          <div style={style} ref={registerChild}>
+          <div style={{ ...style, ...heightBug }} ref={registerChild}>
             <EventGroupWrapper
               query={query}
               presentInSearch={eventsIndex.includes(index)}

frontend/app/components/Session_/EventsBlock/event.module.css

@@ -14,11 +14,10 @@
 
 .event {
   position: relative;
-  background: #fff;
+  background: #f6f6f6;
   border-radius: 3px;
   user-select: none;
   /* box-shadow: 0px 1px 3px 0 $gray-light; */
-  border: 1px solid #EEE;
   transition: all 0.2s;
   cursor: pointer;
   &:hover {
@@ -66,12 +65,11 @@
       }
     }
   }
-  
+
    &.highlighted {
-    background-color: $active-blue;
     transition: all 0.2s;
     box-shadow: 0px 2px 10px 0 $gray-light;
-    border-color: $active-blue-border;
+    border: 1px solid $active-blue-border;
   }
 
   &.red {
@@ -157,4 +155,9 @@
 
 .highlight {
   border: solid thin red;
-}
+}
+
+.lastInGroup {
+  background: white;
+  box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 18%);
+}

frontend/app/components/Session_/EventsBlock/eventGroupWrapper.module.css

@@ -1,45 +1,26 @@
-
-
 .container {
-  padding: 5px 7px; /*0.35rem 0.5rem */
-  border-right: solid thin #E0E0E0;
-  border-left: solid thin #E0E0E0;
-  /* border: solid thin #E0E0E0; */
-  /* background-color: rgba(255, 255, 255, 0.5); */
-  background-color: white;
+  padding: 0px 7px; /*0.35rem 0.5rem */
+  background-color: #f6f6f6;
 }
 
 .first {
   padding-top: 7px;
-  border-top: solid thin #E0E0E0;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 }
 
 .last {
   padding-bottom: 7px;
-  border-bottom: solid thin #E0E0E0;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
 .dashAfter {
-  position: relative;
   margin-bottom: 0.8rem;
-  &:after {
-    height: 0.9rem;
-    width: 2px;
-    background-color: #E0E0E0;
-    content: '';
-    position: absolute;
-    left: 30px;
-    top: 100%;
-  }
 }
 
 .referrer {
   font-size: 14px;
-  margin-bottom: 10px;
   color: $gray-dark;
   font-weight: 500 !important;
   display: flex;
@@ -52,4 +33,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-}
+}

frontend/app/components/Session_/PageInsightsPanel/PageInsightsPanel.tsx

@@ -21,7 +21,7 @@ interface Props {
   host: string
 }
 
-function PageInsightsPanel({ 
+function PageInsightsPanel({
   filters, fetchInsights, events = [], insights, urlOptions, host, loading = true
 }: Props) {
   const [insightsFilters, setInsightsFilters] = useState(filters)
@@ -32,13 +32,13 @@ function PageInsightsPanel({
     end: insightsFilters.endDate,
     rangeName: insightsFilters.rangeValue
   });
-  
+
   const onDateChange = (e) => {
     const { startDate, endDate, rangeValue } = e.toJSON();
     setInsightsFilters({ ...insightsFilters, startDate, endDate, rangeValue })
   }
 
-  useEffect(() => {     
+  useEffect(() => {
     markTargets(insights.toJS());
     return () => {
       markTargets(null)
@@ -53,15 +53,15 @@ function PageInsightsPanel({
     }
   }, [insightsFilters])
 
-  const onPageSelect = ({ value }: any) => {
-    const event = events.find(item => item.url === value)    
+  const onPageSelect = (e, { name, value }) => {
+    const event = events.find(item => item.url === value)
     Player.jump(event.time + JUMP_OFFSET)
     setInsightsFilters({ ...insightsFilters, url: host + value })
     markTargets([])
   };
 
   return (
-    <div className="px-4 bg-gray-lightest">
+    <div className="px-4 bg-white" style={{ width: 270 }}>
       <div className="my-3 flex -ml-2">
         {/* <DateRange
           rangeValue={insightsFilters.rangeValue}
@@ -89,7 +89,7 @@ function PageInsightsPanel({
       </div>
       <Loader loading={ loading }>
         <SelectorsList />
-      </Loader>            
+      </Loader>
     </div>
   )
 }
@@ -104,4 +104,4 @@ export default connect(state => {
     urlOptions: events.map(({ url, host }: any) => ({ label: url, value: url, host })),
     loading: state.getIn([ 'sessions', 'fetchInsightsRequest', 'loading' ]),
   }
-}, { fetchInsights })(PageInsightsPanel);
+}, { fetchInsights })(PageInsightsPanel);