1.7.0 hot fixes (#583)

* fix(ui): prevent icons from overflowing timeline (#579)

* fix(ui): prevent icons from overflowing timeline

* fix(ui): rm log

* fix(ui): fix widget bug (#581)

* fix(ui): fix weird popup bug? (#582)

Co-authored-by: Delirium <sylenien@gmail.com>

frontend/app/components/Dashboard/Widgets/Performance/Performance.js

@@ -101,7 +101,7 @@ export default class Performance extends React.PureComponent {
 
   compare = () => this.setState({ comparing: true })
 
-  legendPopup = (component, trigger) => <Popup size="mini" trigger={ trigger } content={ component } />
+  legendPopup = (component, trigger) => <Popup size="mini" content={ component }>{trigger}</Popup>
 
   legendFormatter = (value, entry, index) => {
     const { opacity } = this.state;

frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx

@@ -15,13 +15,14 @@ function WidgetName(props: Props) {
   const [name, setName] = useState(props.name)
   const ref = useRef<any>(null)
 
-  const write = ({ target: { value, name } }) => {
+  const write = ({ target: { value } }) => {
     setName(value)
   }
 
-  const onBlur = () => {
+  const onBlur = (nameInput?: string) => {
     setEditing(false)
-    props.onUpdate(name.trim() === '' ? 'New Widget' : name)
+    const toUpdate = nameInput || name
+    props.onUpdate(toUpdate.trim() === '' ? 'New Widget' : toUpdate)
   }
 
   useEffect(() => {
@@ -37,7 +38,7 @@ function WidgetName(props: Props) {
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Enter') {
-        onBlur()
+        onBlur(name)
       }
       if (e.key === 'Escape' || e.key === 'Esc') {
         setEditing(false)
@@ -48,7 +49,7 @@ function WidgetName(props: Props) {
     return () => {
       document.removeEventListener('keydown', handler, false)
     }
-  }, [])
+  }, [name])
 
   return (
     <div className="flex items-center">
@@ -59,7 +60,7 @@ function WidgetName(props: Props) {
           className="rounded fluid border-0 -mx-2 px-2 h-8"
           value={name}
           onChange={write}
-          onBlur={onBlur}
+          onBlur={() => onBlur()}
           onFocus={() => setEditing(true)}
         />
       ) : (

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -14,6 +14,12 @@ import { Tooltip } from 'react-tippy';
 
 const BOUNDRY = 15
 
+function getTimelinePosition(value, scale) {
+  const pos = value * scale;
+
+  return pos > 100 ? 100 : pos;
+}
+
 const getPointerIcon = (type) => {
   // exception,
   switch(type) {
@@ -166,7 +172,7 @@ export default class Timeline extends React.PureComponent {
                 key={ interval.start }
                 className={ stl.skipInterval }
                 style={ {
-                  left: `${ interval.start * scale }%`,
+                  left: `${getTimelinePosition(interval.start, scale)}%`,
                   width: `${ (interval.end - interval.start) * scale }%`,
                 } }
               />))
@@ -176,7 +182,7 @@ export default class Timeline extends React.PureComponent {
               <div
                 key={ e.key }
                 className={ stl.event }
-                style={ { left: `${ e.time * scale }%` } }
+                style={ { left: `${ getTimelinePosition(e.time,scale)}%` } }
               />
               ))
             }
@@ -184,7 +190,7 @@ export default class Timeline extends React.PureComponent {
               issues.map(iss => (
                 <div
                   style={ {
-                    left: `${ iss.time * scale }%`,
+                    left: `${ getTimelinePosition(iss.time, scale) }%`,
                     top: '0px',
                     zIndex: 11, width: 16, height: 16
                   } }
@@ -201,7 +207,7 @@ export default class Timeline extends React.PureComponent {
                       </div>
                     }
                   >
-                    <Icon className=" rounded-full bg-white" name={iss.icon} size="16" />
+                    <Icon className="rounded-full bg-white" name={iss.icon} size="16" />
                   </Tooltip>
                 </div>
               ))
@@ -209,7 +215,7 @@ export default class Timeline extends React.PureComponent {
             { events.filter(e => e.type === TYPES.CLICKRAGE).map(e => (
               <div
                 style={ {
-                  left: `${ e.time * scale }%`,
+                  left: `${ getTimelinePosition(e.time, scale) }%`,
                   top: '0px',
                   zIndex: 11, width: 16, height: 16
                 } }
@@ -233,7 +239,7 @@ export default class Timeline extends React.PureComponent {
             {typeof clickRageTime === 'number' &&
               <div
                 style={{
-                  left: `${ clickRageTime * scale }%`,
+                  left: `${ getTimelinePosition(clickRageTime, scale) }%`,
                   top: '-0px',
                   zIndex: 11, width: 16, height: 16
                 }}
@@ -257,7 +263,7 @@ export default class Timeline extends React.PureComponent {
                 <div
                   key={ e.key }
                   className={ cn(stl.markup, stl.error) }
-                  style={ { left: `${ e.time * scale }%`, top: '0px', zIndex: 10, width: 16, height: 16 } }
+                  style={ { left: `${ getTimelinePosition(e.time, scale) }%`, top: '0px', zIndex: 10, width: 16, height: 16 } }
                   onClick={ this.createEventClickHandler(e) }
                 >
                   <Tooltip
@@ -285,7 +291,7 @@ export default class Timeline extends React.PureComponent {
                     [ stl.error ]: r.isRed(),
                     [ stl.warning ]: r.isYellow(),
                   }) }
-                  style={ { left: `${ r.time * scale }%`, top: '0px', zIndex: 10, width: 16, height: 16 } }
+                  style={ { left: `${ getTimelinePosition(r.time, scale) }%`, top: '0px', zIndex: 10, width: 16, height: 16 } }
                   onClick={ this.createEventClickHandler(r) }
                 >
                   <Tooltip
@@ -310,7 +316,7 @@ export default class Timeline extends React.PureComponent {
                 <div
                   key={ e.key }
                   className={ cn(stl.markup, stl.error) }
-                  style={ { left: `${ e.time * scale }%`, top: '0px' } }
+                  style={ { left: `${ getTimelinePosition(e.time, scale) }%`, top: '0px' } }
                   onClick={ this.createEventClickHandler(e) }
                 >
                   <Tooltip
@@ -335,7 +341,7 @@ export default class Timeline extends React.PureComponent {
                 <div
                   key={ e.key }
                   className={ cn(stl.markup, stl.error) }
-                  style={ { left: `${ e.time * scale }%`, top: '0px' } }
+                  style={ { left: `${ getTimelinePosition(e.time, scale) }%`, top: '0px' } }
                   onClick={ this.createEventClickHandler(e) }
                 >
                   <Tooltip

frontend/app/components/ui/PopMenu/PopMenu.js

@@ -34,25 +34,23 @@ export default React.memo(function PopMenu({ items }) {
         </div>
       }
       <Popup
-        trigger={
-          <button
-            onClick={ () => setOpen(o => !o) }
-            className={ cn("bg-teal flex items-center justify-center", cls.addStepButton, {[cls.openMenuBtn] : open }) }
-          >
-            <Icon 
-              name="plus"
-              size="18"
-              className={ cls.plusIcon }
-              color="white"
-            />
-          </button>
-        }
         content={ `Add Step` }
         size="tiny"
         inverted
         position="top center"
-      />      
+      > 
+        <button
+          onClick={ () => setOpen(o => !o) }
+          className={ cn("bg-teal flex items-center justify-center", cls.addStepButton, {[cls.openMenuBtn] : open }) }
+        >
+          <Icon 
+            name="plus"
+            size="18"
+            className={ cls.plusIcon }
+            color="white"
+          />
+        </button>
+      </Popup>      
     </OutsideClickDetectingDiv>
   );
 });
-