Use collapsible.

cypress-io · Jul 6, 2020 · 6007e7b · 6007e7b
1 parent a790e17
commit 6007e7b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/reporter/src/collapsible/collapsible.tsx b/packages/reporter/src/collapsible/collapsible.tsx
@@ -1,13 +1,19 @@
+import _ from 'lodash'
 import cs from 'classnames'
 import React, { Component, CSSProperties, MouseEvent, ReactNode, RefObject } from 'react'
 
 import { onEnterOrSpace } from '../lib/util'
 
+interface HeaderText {
+  collapsed: ReactNode
+  expanded: ReactNode
+}
+
 interface Props {
   isOpen?: boolean
   headerClass?: string
   headerStyle?: CSSProperties
-  header?: ReactNode
+  header?: ReactNode | HeaderText
   headerExtras?: ReactNode
   containerRef?: RefObject<HTMLDivElement>
   contentClass?: string
@@ -39,6 +45,8 @@ class Collapsible extends Component<Props, State> {
   }
 
   render () {
+    const { header } = this.props
+
     return (
       <div className={cs('collapsible', { 'is-open': this.state.isOpen })} ref={this.props.containerRef}>
         <div className={cs('collapsible-header-wrapper', this.props.headerClass)}>
@@ -54,7 +62,13 @@ class Collapsible extends Component<Props, State> {
             <div className='collapsible-header-inner' tabIndex={-1}>
               <i className='collapsible-indicator fa-fw fas' />
               <span className='collapsible-header-text'>
-                {this.props.header}
+                {
+                  (header as HeaderText).expanded && (header as HeaderText).collapsed
+                    ? this.state.isOpen
+                      ? (this.props.header as HeaderText).expanded
+                      : (this.props.header as HeaderText).collapsed
+                    : this.props.header
+                }
               </span>
             </div>
           </div>

diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
@@ -312,6 +312,10 @@
       line-height: 1.2;
       margin: 4px 8px 4px 0;
     }
+
+    .option-item {
+      margin-left: 16px;
+    }
   }
 
   .command-wrapper .fa-circle {

diff --git a/packages/reporter/src/commands/object-viewer.tsx b/packages/reporter/src/commands/object-viewer.tsx
@@ -1,19 +1,27 @@
 import React from 'react'
 import _ from 'lodash'
+import Collapsible from '../collapsible/collapsible'
 
 interface ObjectViewerProps {
   obj: Record<any, any>
 }
 
 export const ObjectViewer = ({ obj }: ObjectViewerProps) => {
-  return Object.keys(obj).length === 1
+  return Object.keys(obj).length === 1 && !_.isObject(obj)
     ? (
       <div className="object-viewer">
         {`{ ${Object.keys(obj).map((key) => `${key}: ${encode(obj[key])}`).join('')} }`}
       </div>
     )
     : (
-      <div>Show options</div>
+      <Collapsible
+        header={{
+          collapsed: 'Show options',
+          expanded: 'Hide options',
+        }}
+      >
+        <pre>{JSON.stringify(obj, null, 4)}</pre>
+      </Collapsible>
     )
 }