Collapse empty panels and display no data available message

pull/5370/head
ioedeveloper 4 years ago
parent 7c697c8979
commit c58cedda30
  1. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/calldata-panel.tsx
  2. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/callstack-panel.tsx
  3. 18
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
  4. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/full-storages-changes.tsx
  5. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/function-panel.tsx
  6. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
  7. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-locals.tsx
  8. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/solidity-state.tsx
  9. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
  10. 2
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/step-detail.tsx
  11. 4
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/storage-panel.tsx
  12. 6
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger-head.tsx
  13. 12
      libs/remix-ui/debugger-ui/src/lib/vm-debugger/vm-debugger.tsx

@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
export const CalldataPanel = ({ calldata }) => { export const CalldataPanel = ({ calldata }) => {
return ( return (
<div id='calldatapanel'> <div id='calldatapanel'>
<DropdownPanel dropdownName='Call Data' calldata={calldata} /> <DropdownPanel dropdownName='Call Data' calldata={calldata || {}} />
</div> </div>
) )
} }

@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
export const CallstackPanel = ({ calldata }) => { export const CallstackPanel = ({ calldata }) => {
return ( return (
<div id='callstackpanel'> <div id='callstackpanel'>
<DropdownPanel dropdownName='Call Stack' calldata={calldata} /> <DropdownPanel dropdownName='Call Stack' calldata={calldata || {}} />
</div> </div>
) )
} }

@ -12,10 +12,10 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
const data = useExtractData(calldata, extractFunc) const data = useExtractData(calldata, extractFunc)
const [state, setState] = useState({ const [state, setState] = useState({
header: '', header: '',
toggleDropdown: true, toggleDropdown: false,
message: { message: {
innerText: '', innerText: 'No data available.',
display: 'none' display: 'block'
}, },
dropdownContent: { dropdownContent: {
innerText: '', innerText: '',
@ -83,6 +83,11 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
} }
const update = function (calldata) { const update = function (calldata) {
let isEmpty = !calldata ? true : false
if(calldata && Array.isArray(calldata) && calldata.length === 0) isEmpty = true
else if(calldata && Object.keys(calldata).length === 0 && calldata.constructor === Object) isEmpty = true
setState(prevState => { setState(prevState => {
return { return {
...prevState, ...prevState,
@ -91,7 +96,12 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
display: 'block' display: 'block'
}, },
copiableContent: JSON.stringify(calldata, null, '\t'), copiableContent: JSON.stringify(calldata, null, '\t'),
updating: false message: {
innerText: isEmpty ? 'No data available' : '',
display: isEmpty ? 'block' : 'none'
},
updating: false,
toggleDropdown: !isEmpty
} }
}) })
} }

@ -4,7 +4,7 @@ import { DropdownPanel } from './dropdown-panel'
export const FullStoragesChanges = ({ calldata }) => { export const FullStoragesChanges = ({ calldata }) => {
return ( return (
<div id='fullstorageschangespanel'> <div id='fullstorageschangespanel'>
<DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata } /> <DropdownPanel dropdownName='Full Storages Changes' calldata={ calldata || {}} />
</div> </div>
) )
} }

@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
export const FunctionPanel = ({ calldata }) => { export const FunctionPanel = ({ calldata }) => {
return ( return (
<div id="FunctionPanel"> <div id="FunctionPanel">
<DropdownPanel dropdownName='Function Stack' calldata={calldata} /> <DropdownPanel dropdownName='Function Stack' calldata={calldata || {}} />
</div> </div>
) )
} }

@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel'
export const MemoryPanel = ({ calldata }) => { export const MemoryPanel = ({ calldata }) => {
return ( return (
<DropdownPanel dropdownName='Memory' calldata={calldata} /> <DropdownPanel dropdownName='Memory' calldata={calldata || {}} />
) )
} }

@ -36,7 +36,7 @@ export const SolidityLocals = ({ calldata, message }) => {
return ( return (
<div id='soliditylocals' data-id="solidityLocals"> <div id='soliditylocals' data-id="solidityLocals">
<DropdownPanel dropdownName='Solidity Locals' dropdownMessage={message} calldata={calldata} extractFunc={extractData} formatSelfFunc={formatSelf} /> <DropdownPanel dropdownName='Solidity Locals' calldata={calldata || {}} extractFunc={extractData} formatSelfFunc={formatSelf} />
</div> </div>
) )
} }

@ -36,7 +36,7 @@ export const SolidityState = ({ calldata, message }) => {
return ( return (
<div id='soliditylocals' data-id='solidityLocals'> <div id='soliditylocals' data-id='solidityLocals'>
{ {
<DropdownPanel dropdownName='Solidity State' dropdownMessage={message} calldata={calldata} formatSelfFunc={formatSelf} extractFunc={extractData} /> <DropdownPanel dropdownName='Solidity State' calldata={calldata || {}} formatSelfFunc={formatSelf} extractFunc={extractData} />
} }
</div> </div>
) )

@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel'
export const StackPanel = ({ calldata }) => { export const StackPanel = ({ calldata }) => {
return ( return (
<div id="stackpanel"> <div id="stackpanel">
<DropdownPanel dropdownName='Stack' calldata={calldata} /> <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
</div> </div>
) )
} }

@ -50,7 +50,7 @@ export const StepDetail = (props: StepDetailProps) => {
return ( return (
<div id='stepdetail' data-id="stepdetail"> <div id='stepdetail' data-id="stepdetail">
<DropdownPanel dropdownName='Step details' calldata={ detail } /> <DropdownPanel dropdownName='Step details' calldata={detail || {}} />
</div> </div>
) )
} }

@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
import DropdownPanel from './dropdown-panel' import DropdownPanel from './dropdown-panel'
export const StoragePanel = ({ storage, header }) => { export const StoragePanel = ({ calldata, header }) => {
return ( return (
<div id='storagepanel'> <div id='storagepanel'>
<DropdownPanel dropdownName='Storage' calldata={storage} header={header} /> <DropdownPanel dropdownName='Storage' calldata={calldata || {}} header={header} />
</div> </div>
) )
} }

@ -89,9 +89,9 @@ export const VmDebuggerHead = ({ vmDebuggerLogic, ready }) => {
<div id="vmheadView" className="mt-1 px-0"> <div id="vmheadView" className="mt-1 px-0">
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<div className="w-100"> <div className="w-100">
<FunctionPanel calldata={functionPanel || {}} /> <FunctionPanel calldata={functionPanel} />
<SolidityLocals calldata={solidityLocals.calldata || {}} message={solidityLocals.message} /> <SolidityLocals calldata={solidityLocals.calldata} message={solidityLocals.message} />
<SolidityState calldata={solidityState.calldata || {}} message={solidityState.message} /> <SolidityState calldata={solidityState.calldata} message={solidityState.message} />
</div> </div>
<div className="w-100"><CodeListView asm={asm} /></div> <div className="w-100"><CodeListView asm={asm} /></div>
<div className="w-100"><StepDetail stepDetail={stepDetail} /></div> <div className="w-100"><StepDetail stepDetail={stepDetail} /></div>

@ -52,13 +52,13 @@ export const VmDebugger = ({ vmDebuggerLogic, ready }) => {
return ( return (
<div id="vmdebugger" className="px-2"> <div id="vmdebugger" className="px-2">
<div> <div>
<StackPanel calldata={stackPanel || {}} /> <StackPanel calldata={stackPanel} />
<MemoryPanel calldata={memoryPanel || {}} /> <MemoryPanel calldata={memoryPanel} />
<StoragePanel storage={storagePanel.calldata || {}} header={storagePanel.header} /> <StoragePanel calldata={storagePanel.calldata} header={storagePanel.header} />
<CallstackPanel calldata={callStackPanel || {}} /> <CallstackPanel calldata={callStackPanel} />
<CalldataPanel calldata={calldataPanel || {}} /> <CalldataPanel calldata={calldataPanel} />
<ReturnValuesPanel dropdownName="Return Value" calldata={returnValuesPanel || {}} /> <ReturnValuesPanel dropdownName="Return Value" calldata={returnValuesPanel || {}} />
<FullStoragesChangesPanel calldata={fullStoragesChangesPanel || {}} /> <FullStoragesChangesPanel calldata={fullStoragesChangesPanel} />
</div> </div>
</div> </div>
) )

Loading…
Cancel
Save