Bug Logs panel doesn't scrolled to the top on the panel's button click.
MODIFY
FrontEnd/Sailfish-JS-report/package-lock.json
FrontEnd/Sailfish-JS-report/package-lock.json
}
},
"@babel/runtime": {
- "version": "7.7.2",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.2.tgz",
- "integrity": "sha512-JONRbXbTXc9WQE2mAZd1p0Z3DZ/6vaQIkgYMSTP3KjRCyd7rCZCcfhCyX+YjwcKxcZ82UrxbRD358bpExNgrjw==",
+ "version": "7.8.7",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.7.tgz",
+ "integrity": "sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==",
"requires": {
- "regenerator-runtime": "^0.13.2"
+ "regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
}
},
"@types/react-redux": {
- "version": "7.1.2",
- "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.2.tgz",
- "integrity": "sha512-Iim6UCtD0mZX9U3jBuT6ZObBZ8UlakoOgefiRgi5wakfbNnXd3TUwwUMgi3Ijc0fxsPLZ5ULoz0oDy15YIaLmQ==",
+ "version": "7.1.7",
+ "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.7.tgz",
+ "integrity": "sha512-U+WrzeFfI83+evZE2dkZ/oF/1vjIYgqrb5dGgedkqVV8HEfDFujNgWCwHL89TDuWKb47U0nTBT6PLGq4IIogWg==",
"dev": true,
"requires": {
"@types/hoist-non-react-statics": "^3.3.0",
}
},
"hoist-non-react-statics": {
- "version": "3.3.0",
- "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
- "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
"integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
},
"react-redux": {
- "version": "7.1.3",
- "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
- "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
+ "integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
"requires": {
"@babel/runtime": "^7.5.5",
"hoist-non-react-statics": "^3.3.0",
- "invariant": "^2.2.4",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^16.9.0"
"dev": true
},
"regenerator-runtime": {
- "version": "0.13.3",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
- "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
+ "version": "0.13.4",
+ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz",
+ "integrity": "sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g=="
},
"regex-not": {
"version": "1.0.2",

MODIFY
FrontEnd/Sailfish-JS-report/package.json
FrontEnd/Sailfish-JS-report/package.json
},
"author": "vladislav.kotelnikov",
"dependencies": {
+ "core-js": "3.6.4",
"react": "^16.11.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^16.11.0",
"react-input-autosize": "^2.2.2",
- "react-redux": "^7.1.3",
+ "react-redux": "^7.2.0",
"react-virtuoso": "^0.12.3",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
- "setimmediate": "^1.0.5",
- "core-js": "3.6.4",
- "resize-observer-polyfill": "^1.5.1"
+ "resize-observer-polyfill": "^1.5.1",
+ "setimmediate": "^1.0.5"
},
"devDependencies": {
"@types/enzyme": "^3.10.3",
"@types/react-custom-scrollbars": "^4.0.6",
"@types/react-dom": "^16.9.4",
"@types/react-input-autosize": "^2.0.1",
- "@types/react-redux": "^7.1.2",
+ "@types/react-redux": "^7.1.7",
"@types/redux-mock-store": "^1.0.1",
"awesome-typescript-loader": "^5.2.1",
"cross-env": "^6.0.3",

MODIFY
FrontEnd/Sailfish-JS-report/src/components/RightPanel.tsx
FrontEnd/Sailfish-JS-report/src/components/RightPanel.tsx
@@ -21,7 +21,7 @@ import Panel from '../util/Panel';
import Message from '../models/Message';
import { ToggleButton } from './ToggleButton';
import { MessagesCardList, MessagesCardListBase } from './message/MessagesCardList';
-import LogsList from './log/LogsList';
+import LogsList, { LogListActions } from './log/LogsList';
import AppState from '../state/models/AppState';
import { isAdmin, isRejected } from '../helpers/messageType';
import {
@@ -72,6 +72,7 @@ interface State {
class RightPanelBase extends React.Component<Props, State> {
private messagesPanel = React.createRef<MessagesCardListBase>();
+ private logsPanel = React.createRef<LogListActions>();
private root = React.createRef<HTMLDivElement>();
private rootResizeObserver = new ResizeObserver(elements => {
@@ -97,6 +98,10 @@ class RightPanelBase extends React.Component<Props, State> {
this.messagesPanel.current?.scrollToTop();
break;
}
+ case (Panel.LOGS): {
+ this.logsPanel.current?.scrollToTop();
+ break;
+ }
default: {
return;
@@ -242,6 +247,7 @@ class RightPanelBase extends React.Component<Props, State> {
</div>
<div className={logsRootClass}>
<LogsList
+ ref={this.logsPanel}
isActive={this.props.panel === Panel.LOGS} />
</div>
<div className={knownBugsRootClass}>

MODIFY
FrontEnd/Sailfish-JS-report/src/components/action/ActionsList.tsx
FrontEnd/Sailfish-JS-report/src/components/action/ActionsList.tsx
@@ -45,6 +45,10 @@ interface State {
scrolledIndex: Number;
}
+interface OwnProps {
+ ref?: React.MutableRefObject<ActionsListBase>
+}
+
export class ActionsListBase extends React.PureComponent<Props, State> {
private list = React.createRef<VirtualizedList>();
@@ -125,7 +129,7 @@ export class ActionsListBase extends React.PureComponent<Props, State> {
};
}
-export const ActionsList = connect(
+export const ActionsList = connect<Props, {}, OwnProps, Props & OwnProps>(
(state: AppState): Props => ({
actions: getIsFilterApplied(state) && !state.filter.isTransparent ?
getFilteredActions(state) :

MODIFY
FrontEnd/Sailfish-JS-report/src/components/log/LogsList.tsx
FrontEnd/Sailfish-JS-report/src/components/log/LogsList.tsx
@@ -23,7 +23,7 @@ import { loadLogs } from '../../thunks/loadTestCase';
import { ThunkDispatch } from 'redux-thunk';
import StateAction from '../../actions/stateActions';
import SkeletonedLogsListItem from './SkeletonedLogsListItem';
-import '../../styles/log.scss'
+import '../../styles/log.scss';
interface StateProps {
logsCount: number;
@@ -34,18 +34,25 @@ interface DispatchProps {
loadLogs: () => void;
}
-interface Props extends StateProps, DispatchProps {
+interface OwnProps {
isActive: boolean;
}
-function LogsListBase({
+interface Props extends OwnProps, StateProps, DispatchProps {
+}
+
+export interface LogListActions {
+ scrollToTop(): void
+}
+
+const LogsListBase = React.forwardRef<LogListActions, Props>(({
logsCount,
isActive,
loadLogs,
scrolledIndex
-}: Props) {
+}: Props, ref: React.MutableRefObject<LogListActions>) => {
const [loadingLogs, setLoadingLogs] = React.useState(false);
- const virtuoso = React.useRef<Virtuoso>();
+ const virtuosoRef = React.createRef<Virtuoso>();
React.useEffect(() => {
if (isActive && !loadingLogs) {
@@ -56,7 +63,7 @@ function LogsListBase({
React.useEffect(() => {
if (scrolledIndex != null) {
- virtuoso.current?.scrollToIndex(scrolledIndex.valueOf());
+ virtuosoRef.current?.scrollToIndex(scrolledIndex.valueOf());
}
}, [scrolledIndex]);
@@ -64,11 +71,20 @@ function LogsListBase({
return <SkeletonedLogsListItem index={idx} />
};
+ ref.current = {
+ scrollToTop() {
+ if (virtuosoRef.current) {
+ virtuosoRef.current.scrollToIndex(0);
+ }
+ }
+ }
+
+
return (
<div className="logs">
<div className="logs__list">
<Virtuoso
- ref={virtuoso}
+ ref={virtuosoRef}
totalCount={logsCount}
item={renderLog}
overscan={3}
@@ -78,7 +94,7 @@ function LogsListBase({
</div>
</div>
)
-}
+})
const LogsList = connect(
(state: AppState): StateProps => ({
@@ -89,6 +105,9 @@ const LogsList = connect(
loadLogs: () => dispatch(loadLogs()),
}),
(stateProps, dispatchProps, ownProps) => ({ ...stateProps, ...dispatchProps, ...ownProps }),
-)(LogsListBase);
+ {
+ forwardRef: true
+ }
+)(LogsListBase)
export default LogsList;

MODIFY
FrontEnd/Sailfish-JS-report/src/components/message/MessagesCardList.tsx
FrontEnd/Sailfish-JS-report/src/components/message/MessagesCardList.tsx
@@ -48,6 +48,10 @@ interface State {
scrolledIndex: Number;
}
+interface OwnProps {
+ ref?: React.MutableRefObject<MessagesCardListBase>
+}
+
export class MessagesCardListBase extends React.PureComponent<Props, State> {
constructor(props: Props) {
@@ -123,8 +127,8 @@ export class MessagesCardListBase extends React.PureComponent<Props, State> {
};
}
-export const MessagesCardList = connect(
- (state: AppState): StateProps => ({
+export const MessagesCardList = connect<StateProps, {}, OwnProps, StateProps & OwnProps>(
+ (state: AppState) => ({
messages: getIsFilterApplied(state) && !state.filter.isTransparent ?
getFilteredMessages(state) :
state.selected.testCase.messages,

Bug #63459. Logs panel doesn't scrolled to the top on the panel's button click.

Change-Id: Ib2347ec8b811d636e6f07789a40071a2d22bd60f