From f30912a30704ba1a259e81ab0b494fc40acd4a97 Mon Sep 17 00:00:00 2001 From: sylenien Date: Thu, 30 Jun 2022 11:44:03 +0200 Subject: [PATCH] fix(ui): last fixes for 1.7 --- .../BugFinder/SessionList/SessionList.js | 5 +- .../DashboardSideMenu/DashboardSideMenu.tsx | 6 +- .../WidgetWrapper/WidgetWrapper.tsx | 4 +- .../Session_/Player/Controls/Timeline.js | 12 ++-- .../SessionSearchField/SessionSearchField.tsx | 3 +- .../components/CaptureRate.tsx | 63 ++++++++++--------- .../components/ListingVisibility.tsx | 10 +-- frontend/app/components/ui/Toggler/Toggler.js | 2 +- frontend/app/dev/console.js | 2 +- frontend/app/logger/index.js | 4 +- frontend/app/mstore/settingsStore.ts | 3 +- frontend/app/mstore/types/sessionSettings.ts | 20 ++++-- frontend/app/player/Player.ts | 6 ++ frontend/app/player/singletone.js | 2 + 14 files changed, 87 insertions(+), 55 deletions(-) diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js index 3f6d0b004..e3491fe0c 100644 --- a/frontend/app/components/BugFinder/SessionList/SessionList.js +++ b/frontend/app/components/BugFinder/SessionList/SessionList.js @@ -1,5 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; +import { observer } from 'mobx-react-lite'; import { Loader, NoContent, Pagination } from 'UI'; import { applyFilter, addAttribute, addEvent } from 'Duck/filters'; import { fetchSessions, addFilterByKeyAndValue, updateCurrentPage, setScrollPosition } from 'Duck/search'; @@ -7,6 +8,7 @@ import SessionItem from 'Shared/SessionItem'; import SessionListHeader from './SessionListHeader'; import { FilterKey } from 'Types/filter/filterType'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; +import SettingsStore from 'App/mstore/settingsStore'; // const ALL = 'all'; const PER_PAGE = 10; @@ -77,14 +79,13 @@ export default class SessionList extends React.PureComponent { componentDidMount() { const { scrollY } = this.props; window.scrollTo(0, scrollY); + console.log(SettingsStore) } renderActiveTabContent(list) { const { loading, filters, - // onMenuItemClick, - // allList, activeTab, metaList, currentPage, diff --git a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx index 5c9c10a73..00b462bbd 100644 --- a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx +++ b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx @@ -74,7 +74,11 @@ function DashboardSideMenu(props: RouteComponentProps) { className="group" leading = {(
- {item.isPublic &&
} + {item.isPublic && ( + +
+ + )} {item.isPinned &&
} {!item.isPinned && ( {}} id={`widget-${widget.widgetId}`} > - {!isTemplate && isWidget && + {!isTemplate && isWidget && isPredefined &&
- {isPredefined ? 'Cannot drill down system provided metrics' : 'Click to drill down'} + {'Cannot drill down system provided metrics'}
} {/* @ts-ignore */} diff --git a/frontend/app/components/Session_/Player/Controls/Timeline.js b/frontend/app/components/Session_/Player/Controls/Timeline.js index 51efa8b8e..a323a82c1 100644 --- a/frontend/app/components/Session_/Player/Controls/Timeline.js +++ b/frontend/app/components/Session_/Player/Controls/Timeline.js @@ -1,10 +1,9 @@ import React from 'react'; import { connect } from 'react-redux'; import cn from 'classnames'; -import { connectPlayer } from 'Player'; -import { Popup, TimelinePointer, Icon } from 'UI'; +import { connectPlayer, Controls } from 'Player'; +import { TimelinePointer, Icon } from 'UI'; import TimeTracker from './TimeTracker'; -import { ReduxTime } from './Time'; import stl from './timeline.module.css'; import { TYPES } from 'Types/session/event'; import { setTimelinePointer } from 'Duck/sessions'; @@ -64,7 +63,8 @@ let deboucneJump = () => null; skipIntervals: state.skipIntervals, events: state.eventList, skip: state.skip, - skipToIssue: state.skipToIssue, + // not updating properly rn + // skipToIssue: state.skipToIssue, disabled: state.cssLoading || state.messagesLoading || state.markedTargets, endTime: state.endTime, live: state.live, @@ -100,7 +100,7 @@ export default class Timeline extends React.PureComponent { } componentDidMount() { - const { issues, skipToIssue } = this.props; + const skipToIssue = Controls.updateSkipToIssue(); const firstIssue = issues.get(0); deboucneJump = debounce(this.props.jump, 500); @@ -109,7 +109,7 @@ export default class Timeline extends React.PureComponent { } } - onDragEnd = (item, monitor) => { + onDragEnd = () => { if (this.wasPlaying) { this.props.togglePlay(); } diff --git a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx index 7f38a0fed..9796c441c 100644 --- a/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx +++ b/frontend/app/components/shared/SessionSearchField/SessionSearchField.tsx @@ -39,6 +39,7 @@ function SessionSearchField(props: Props) { id="search" type="search" autoComplete="off" + className="hover:border-gray-medium" /> { showModal && ( @@ -62,4 +63,4 @@ export default connect((state: any) => ({ filterSearchListLive: state.getIn([ 'liveSearch', 'filterSearchList' ]), filterList: state.getIn([ 'search', 'filterList' ]), filterListLive: state.getIn([ 'search', 'filterListLive' ]), -}), { })(SessionSearchField); \ No newline at end of file +}), { })(SessionSearchField); diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx index a9faad17f..630ec49da 100644 --- a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx +++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx @@ -1,32 +1,43 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Icon, Toggler, Button, Input, Loader } from 'UI'; import { useStore } from 'App/mstore'; -import { useObserver } from 'mobx-react-lite'; +import { observer } from 'mobx-react-lite'; -function CaptureRate(props) { - const [changed, setChanged] = React.useState(false); +function CaptureRate() { const { settingsStore } = useStore(); - const sessionSettings = useObserver(() => settingsStore.sessionSettings) - const loading = useObserver(() => settingsStore.loadingCaptureRate) - const [captureRate, setCaptureRate] = React.useState(sessionSettings.captureRate); - const [captureAll, setCaptureAll] = React.useState(sessionSettings.captureAll); + const [changed, setChanged] = useState(false); + const [sessionSettings] = useState(settingsStore.sessionSettings) + const [loading] = useState(settingsStore.loadingCaptureRate) + + const captureRate = sessionSettings.captureRate; + const setCaptureRate = sessionSettings.changeCaptureRate + const captureAll = sessionSettings.captureAll + const setCaptureAll = sessionSettings.changeCaptureAll useEffect(() => { - settingsStore.fetchCaptureRate().then(() => { - setCaptureRate(sessionSettings.captureRate); - setCaptureAll(sessionSettings.captureAll); - }); + settingsStore.fetchCaptureRate() }, []) - const toggleRate = () => { - if (captureAll === false) { - settingsStore.saveCaptureRate({ captureAll: true, rate: "100" }) - } - setCaptureAll(!captureAll) - setChanged(true) + const changeCaptureRate = (input: string) => { + setChanged(true); + setCaptureRate(input); } - return useObserver(() => ( + const toggleRate = () => { + const newValue = !captureAll; + setChanged(true) + if (newValue === true) { + const updateObj = { + rate:"100", + captureAll: true, + } + settingsStore.saveCaptureRate(updateObj) + } else { + setCaptureAll(newValue); + } + } + + return (

Recordings

The percentage of session you want to capture
@@ -43,16 +54,12 @@ function CaptureRate(props) {
) => changeCaptureRate(e.target.value)} + value={captureRate.toString()} style={{ height: '38px', width: '100px'}} - // htmn input event - onChange={(e) => { - setCaptureRate(e.target.value) - setChanged(true); - }} disabled={captureAll} min={0} - minValue={0} + max={100} />
@@ -70,7 +77,7 @@ function CaptureRate(props) {
)} - )); + ); } -export default CaptureRate; +export default observer(CaptureRate); diff --git a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx index 17ede9338..4f6708187 100644 --- a/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx +++ b/frontend/app/components/shared/SessionSettings/components/ListingVisibility.tsx @@ -2,8 +2,10 @@ import React from 'react'; import Select from 'Shared/Select'; import { Button, Input } from 'UI'; import { useStore } from 'App/mstore'; -import { useObserver } from 'mobx-react-lite'; +import { observer } from 'mobx-react-lite'; import { toast } from 'react-toastify'; +import { connect } from 'react-redux'; +import { fetchSessions } from 'Duck/search'; const numberOptions = [ { label: 'Less than', value: '<' }, @@ -14,10 +16,10 @@ const periodOptions = [ { label: 'Secs', value: 'sec' }, ] -function ListingVisibility(props) { +function ListingVisibility() { const [changed, setChanged] = React.useState(false); const { settingsStore } = useStore(); - const sessionSettings = useObserver(() => settingsStore.sessionSettings) + const sessionSettings = settingsStore.sessionSettings const [durationSettings, setDurationSettings] = React.useState(sessionSettings.durationFilter); const changeSettings = (changes) => { @@ -73,4 +75,4 @@ function ListingVisibility(props) { ); } -export default ListingVisibility; +export default observer(ListingVisibility); diff --git a/frontend/app/components/ui/Toggler/Toggler.js b/frontend/app/components/ui/Toggler/Toggler.js index 31799ee74..f4db7cb7a 100644 --- a/frontend/app/components/ui/Toggler/Toggler.js +++ b/frontend/app/components/ui/Toggler/Toggler.js @@ -7,7 +7,7 @@ export default ({ className = '', checked, label = '', - plain, + plain = false, }) => (