make accessing query result records in ascii view type safe

src/browser/modules/D3Visualization/components/Explorer.tsx

@@ -26,6 +26,7 @@ import neoGraphStyle from '../graphStyle'
 import { InspectorComponent } from './Inspector'
 import { LegendComponent } from './Legend'
 import { StyledFullSizeContainer } from './styled'
+import { GlobalState } from 'shared/globalState'
 import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
 import { connect } from 'react-redux'
 
@@ -247,6 +248,6 @@ export class ExplorerComponent extends Component<any, ExplorerComponentState> {
     )
   }
 }
-export const Explorer = connect(state => ({
+export const Explorer = connect((state: GlobalState) => ({
   maxFieldItems: getMaxFieldItems(state)
 }))(ExplorerComponent)

src/browser/modules/Frame/FrameTemplate.tsx

@@ -35,7 +35,7 @@ type FrameTemplateProps = {
   contents: JSX.Element | null | string
   header?: Frame
   className?: string
-  onResize?: (fullscreen: boolean, collapsed: boolean, height?: number) => void
+  onResize?: (fullscreen: boolean, collapsed: boolean, height: number) => void
   numRecords?: number
   getRecords?: () => any
   visElement?: any

src/browser/modules/Frame/FrameTitlebar.tsx

@@ -33,7 +33,7 @@ import * as editor from 'shared/modules/editor/editorDuck'
 import {
   cancel as cancelRequest,
   getRequest,
-  Request,
+  BrowserRequest,
   REQUEST_STATUS_PENDING
 } from 'shared/modules/requests/requestsDuck'
 import {
@@ -109,15 +109,15 @@ type FrameTitleBarBaseProps = {
 }
 
 type FrameTitleBarProps = FrameTitleBarBaseProps & {
-  request: Request | null
+  request: BrowserRequest | null
   isRelateAvailable: boolean
   newFavorite: (cmd: string) => void
   newProjectFile: (cmd: string) => void
   cancelQuery: (requestId: string) => void
   onCloseClick: (
     frameId: string,
     requestId: string,
-    request: Request | null
+    request: BrowserRequest | null
   ) => void
   onRunClick: () => void
   reRun: (obj: Frame, cmd: string) => void
@@ -467,7 +467,7 @@ const mapDispatchToProps = (
     onCloseClick: async (
       id: string,
       requestId: string,
-      request: Request | null
+      request: BrowserRequest | null
     ) => {
       if (request && request.status === REQUEST_STATUS_PENDING) {
         dispatch(cancelRequest(requestId))

src/browser/modules/Stream/CypherFrame/AsciiView.test.tsx

@@ -32,7 +32,7 @@ describe('AsciiViews', () => {
     test('displays bodyMessage if no rows', () => {
       // Given
       const sps = jest.fn()
-      const result = {
+      const result: any = {
         records: [],
         summary: {
           resultAvailableAfter: neo4j.int(5),
@@ -42,7 +42,12 @@ describe('AsciiViews', () => {
 
       // When
       const { container } = render(
-        <AsciiView setParentState={sps} result={result} maxRows={5} />
+        <AsciiView
+          setAsciiMaxColWidth={sps}
+          result={result}
+          maxRows={5}
+          maxFieldItems={5}
+        />
       )
 
       // Then
@@ -51,7 +56,7 @@ describe('AsciiViews', () => {
     test('does not display bodyMessage if rows', () => {
       // Given
       const sps = jest.fn()
-      const result = {
+      const result: any = {
         records: [{ keys: ['x'], _fields: ['y'], get: () => 'y' }],
         summary: {
           resultAvailableAfter: neo4j.int(5),
@@ -61,7 +66,12 @@ describe('AsciiViews', () => {
 
       // When
       const { container } = render(
-        <AsciiView setParentState={sps} result={result} />
+        <AsciiView
+          setAsciiMaxColWidth={sps}
+          result={result}
+          maxRows={5}
+          maxFieldItems={5}
+        />
       )
 
       // Then
@@ -72,7 +82,7 @@ describe('AsciiViews', () => {
     test('displays statusBarMessage if no rows', () => {
       // Given
       const sps = jest.fn()
-      const result = {
+      const result: any = {
         records: [],
         summary: {
           resultAvailableAfter: neo4j.int(5),
@@ -82,7 +92,12 @@ describe('AsciiViews', () => {
 
       // When
       const { container } = render(
-        <AsciiStatusbar setParentState={sps} result={result} />
+        <AsciiStatusbar
+          setAsciiSetColWidth={sps}
+          result={result}
+          maxRows={5}
+          maxFieldItems={5}
+        />
       )
 
       // Then
@@ -91,21 +106,21 @@ describe('AsciiViews', () => {
     test('displays statusBarMessage if no rows', () => {
       // Given
       const sps = jest.fn()
-      const result = {
+      const result: any = {
         records: [{ keys: ['x'], _fields: ['y'], get: () => 'y' }],
         summary: {
           resultAvailableAfter: neo4j.int(5),
           resultConsumedAfter: neo4j.int(5)
         }
       }
-      const serializedRows = [['x'], ['y']]
 
       // When
       const { container } = render(
         <AsciiStatusbar
-          setParentState={sps}
+          setAsciiSetColWidth={sps}
           result={result}
-          _asciiSerializedRows={serializedRows}
+          maxRows={5}
+          maxFieldItems={5}
         />
       )
 

src/browser/modules/Stream/CypherFrame/AsciiView.tsx

@@ -43,29 +43,44 @@ import { stringModifier } from 'services/bolt/cypherTypesFormatting'
 import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
 import { connect } from 'react-redux'
 import { Icon } from 'semantic-ui-react'
+import { GlobalState } from 'shared/globalState'
+import { BrowserRequestResult } from 'shared/modules/requests/requestsDuck'
 
-type AsciiViewComponentState = any
+interface BaseAsciiViewComponentProps {
+  result: BrowserRequestResult
+  updated?: number
+  maxRows: unknown
+  _asciiSetColWidth?: string
+  setAsciiMaxColWidth: { (asciiMaxColWidth: number): void }
+}
+interface AsciiViewComponentProps extends BaseAsciiViewComponentProps {
+  maxFieldItems: number
+}
+interface AsciiViewComponentState {
+  serializedRows: string[]
+  bodyMessage: string | null
+}
 
 export class AsciiViewComponent extends Component<
-  any,
+  AsciiViewComponentProps,
   AsciiViewComponentState
 > {
-  state = {
-    serializedRows: [] as any[],
+  state: AsciiViewComponentState = {
+    serializedRows: [],
     bodyMessage: ''
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.makeState(this.props)
   }
 
-  componentDidUpdate(prevProps: {}) {
+  componentDidUpdate(prevProps: AsciiViewComponentProps): void {
     if (!this.equalProps(prevProps)) {
       this.makeState(this.props)
     }
   }
 
-  equalProps(props: any) {
+  equalProps(props: AsciiViewComponentProps): boolean {
     if (
       this.props !== undefined &&
       this.props.result !== undefined &&
@@ -78,16 +93,22 @@ export class AsciiViewComponent extends Component<
     return false
   }
 
-  shouldComponentUpdate(props: {}, state: AsciiViewComponentState) {
+  shouldComponentUpdate(
+    props: AsciiViewComponentProps,
+    state: AsciiViewComponentState
+  ): boolean {
     return !this.equalProps(props) || !shallowEquals(state, this.state)
   }
 
-  makeState(props: any) {
+  makeState(props: AsciiViewComponentProps): void {
     const { result, maxRows, maxFieldItems } = props
     const { bodyMessage = null } =
       getBodyAndStatusBarMessages(result, maxRows) || {}
     this.setState({ bodyMessage })
-    if (!result || !result.records || !result.records.length) return
+
+    const hasRecords = result && 'records' in result && result.records.length
+    if (!hasRecords) return
+
     const records = getRecordsToDisplayInTable(props.result, props.maxRows)
     const serializedRows =
       stringifyResultArray(
@@ -98,11 +119,10 @@ export class AsciiViewComponent extends Component<
     this.setState({ serializedRows })
     const maxColWidth = asciitable.maxColumnWidth(serializedRows)
 
-    this.props.setParentState &&
-      this.props.setParentState({ _asciiMaxColWidth: maxColWidth })
+    this.props.setAsciiMaxColWidth(maxColWidth)
   }
 
-  render() {
+  render(): JSX.Element {
     const { _asciiSetColWidth: maxColWidth = 70 } = this.props
     const { serializedRows, bodyMessage } = this.state
     let contents = <StyledBodyMessage>{bodyMessage}</StyledBodyMessage>
@@ -121,29 +141,48 @@ export class AsciiViewComponent extends Component<
   }
 }
 
-export const AsciiView = connect(state => ({
+export const AsciiView = connect((state: GlobalState) => ({
   maxFieldItems: getMaxFieldItems(state)
 }))(AsciiViewComponent)
 
-type AsciiStatusbarComponentState = any
+interface BaseAsciiStatusbarComponentProps {
+  _asciiMaxColWidth?: number
+  _asciiSetColWidth?: string
+  maxRows: number
+  result: BrowserRequestResult
+  setAsciiSetColWidth: { (asciiSetColWidth: string): void }
+  updated?: number
+}
+
+interface AsciiStatusbarComponentProps
+  extends BaseAsciiStatusbarComponentProps {
+  maxFieldItems: number
+}
+interface AsciiStatusbarComponentState {
+  maxSliderWidth: number
+  minSliderWidth: number
+  maxColWidth: number | string
+  statusBarMessage: string | null
+  hasTruncatedFields: boolean
+}
 
 export class AsciiStatusbarComponent extends Component<
-  any,
+  AsciiStatusbarComponentProps,
   AsciiStatusbarComponentState
 > {
-  state = {
+  state: AsciiStatusbarComponentState = {
     maxSliderWidth: 140,
     minSliderWidth: 3,
     maxColWidth: 70,
     statusBarMessage: '',
     hasTruncatedFields: false
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(): void {
     this.makeState(this.props)
   }
 
-  makeState(props: any) {
+  makeState(props: AsciiStatusbarComponentProps): void {
     this.setMaxSliderWidth(props._asciiMaxColWidth)
     const { statusBarMessage = null } =
       getBodyAndStatusBarMessages(props.result, props.maxRows) || {}
@@ -154,7 +193,10 @@ export class AsciiStatusbarComponent extends Component<
     this.setState({ statusBarMessage, hasTruncatedFields })
   }
 
-  shouldComponentUpdate(props: any, state: AsciiStatusbarComponentState) {
+  shouldComponentUpdate(
+    props: AsciiStatusbarComponentProps,
+    state: AsciiStatusbarComponentState
+  ): boolean {
     return (
       state.maxColWidth !== this.state.maxColWidth ||
       state.maxSliderWidth !== this.state.maxSliderWidth ||
@@ -164,23 +206,23 @@ export class AsciiStatusbarComponent extends Component<
     )
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.makeState(this.props)
   }
 
-  setColWidthChanged = (w: any) => {
+  setColWidthChanged = (w: React.ChangeEvent<HTMLInputElement>): void => {
     const value = w.target.value
     this.setState({ maxColWidth: value })
-    this.props.setParentState({ _asciiSetColWidth: value })
+    this.props.setAsciiSetColWidth(value)
   }
 
-  setMaxSliderWidth(w: any) {
+  setMaxSliderWidth(w?: number): void {
     this.setState({ maxSliderWidth: w || this.state.minSliderWidth })
   }
 
-  render() {
-    const hasRecords =
-      this.props.result.records && this.props.result.records.length
+  render(): JSX.Element {
+    const { result } = this.props
+    const hasRecords = result && 'records' in result && result.records.length
     const { maxColWidth, maxSliderWidth, hasTruncatedFields } = this.state
     return (
       <StyledStatsBar>
@@ -212,6 +254,6 @@ export class AsciiStatusbarComponent extends Component<
   }
 }
 
-export const AsciiStatusbar = connect(state => ({
+export const AsciiStatusbar = connect((state: GlobalState) => ({
   maxFieldItems: getMaxFieldItems(state)
 }))(AsciiStatusbarComponent)

src/browser/modules/Stream/CypherFrame/CancelView.tsx

@@ -23,13 +23,13 @@ import Centered from 'browser-components/Centered'
 import { SpinnerContainer, StyledBodyMessage } from '../styled'
 import { Spinner } from 'browser-components/icons/Icons'
 import {
-  RequestStatus,
+  Status,
   REQUEST_STATUS_CANCELED,
   REQUEST_STATUS_CANCELING
 } from 'shared/modules/requests/requestsDuck'
 
 interface CancelViewProps {
-  requestStatus: RequestStatus
+  requestStatus: Status
 }
 
 export const CancelView = ({ requestStatus }: CancelViewProps): JSX.Element => (

src/browser/modules/Stream/CypherFrame/CodeView.tsx

@@ -36,6 +36,7 @@ import {
 import { getMaxFieldItems } from 'shared/modules/settings/settingsDuck'
 import { connect } from 'react-redux'
 import { map, take } from 'lodash-es'
+import { GlobalState } from 'shared/globalState'
 
 type ExpandableContentState = any
 
@@ -122,7 +123,7 @@ export class CodeViewComponent extends Component<any> {
   }
 }
 
-export const CodeView = connect(state => ({
+export const CodeView = connect((state: GlobalState) => ({
   maxFieldItems: getMaxFieldItems(state)
 }))(CodeViewComponent)
 

src/browser/modules/Stream/CypherFrame/WarningsView.tsx

@@ -89,7 +89,7 @@ export class WarningsView extends Component<any> {
   }
 }
 
-export class WarningsStatusbar extends Component {
+export class WarningsStatusbar extends Component<any> {
   shouldComponentUpdate() {
     return false
   }