[#943] Make hash/number query available globally to explorer (#1111)

Updated with comments from @jacogr

packages/app-explorer/src/BlockInfo/index.tsx

@@ -11,7 +11,6 @@ import { BlockNumber } from '@polkadot/types';
 
 import BlockByHash from './ByHash';
 import BlockByNumber from './ByNumber';
-import Query from './Query';
 
 type Props = BareProps & {
   chain_bestNumber?: BlockNumber,
@@ -50,17 +49,6 @@ class Entry extends React.Component<Props, State> {
   render () {
     const { value } = this.state;
 
-    return (
-      <>
-        <Query value={value} />
-        {this.renderBlock()}
-      </>
-    );
-  }
-
-  private renderBlock () {
-    const { value } = this.state;
-
     if (!value) {
       return null;
     }

packages/app-explorer/src/NodeInfo/index.tsx

@@ -12,7 +12,7 @@ import { Health, PeerInfo, PendingExtrinsics } from '@polkadot/types';
 
 import './index.css';
 
-import Extrinsics from '../BlockQuery/Extrinsics';
+import Extrinsics from '../BlockInfo/Extrinsics';
 import Peers from './Peers';
 import Summary from './Summary';
 import translate from './translate';

packages/app-explorer/src/index.css

@@ -93,3 +93,7 @@
     padding: 0 1em 1em;
   }
 }
+
+.explorer--query {
+  width: 20em;
+}

packages/app-explorer/src/index.tsx

@@ -11,7 +11,7 @@ import { Route, Switch } from 'react-router';
 import Tabs, { TabItem } from '@polkadot/ui-app/Tabs';
 import translate from './translate';
 
-import BlockQuery from './BlockQuery';
+import BlockInfo from './BlockInfo';
 import Main from './Main';
 import NodeInfo from './NodeInfo';
 
@@ -56,11 +56,12 @@ class ExplorerApp extends React.Component<Props, State> {
           <Tabs
             basePath={basePath}
             items={items}
+            query={[undefined, 'query']}
           />
         </header>
         <Switch>
-          <Route path={`${basePath}/query/:value`} component={BlockQuery} />
-          <Route path={`${basePath}/query`} component={BlockQuery} />
+          <Route path={`${basePath}/query/:value`} component={BlockInfo} />
+          <Route path={`${basePath}/query`} component={BlockInfo} />
           <Route path={`${basePath}/node`} component={NodeInfo} />
           <Route component={Main} />
         </Switch>

packages/ui-app/src/Query.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { Button, Input } from '@polkadot/ui-app';
 import { isHex } from '@polkadot/util';
 
-import translate from '../translate';
+import translate from './translate';
 
 type Props = I18nProps & {
   value?: string
@@ -34,7 +34,7 @@ class Query extends React.PureComponent<Props, State> {
     const { value, isValid } = this.state;
 
     return (
-      <summary>
+      <summary className='explorer--query'>
         <div className='ui--row'>
           <div className='storage--actionrow head'>
             <Input

packages/ui-app/src/Tabs.tsx

@@ -8,6 +8,8 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 import { classes } from './util';
+import Query from './Query';
+import { FilterOverlay } from '@polkadot/ui-app';
 
 export type TabItem = {
   hasParams?: boolean,
@@ -18,13 +20,13 @@ export type TabItem = {
 type Props = BareProps & {
   basePath: string,
   hidden?: Array<string>,
-  items: Array<TabItem>
+  items: Array<TabItem>,
+  query?: Array<string | undefined>
 };
 
 export default class Tabs extends React.PureComponent<Props> {
   render () {
-    const { className, hidden = [], items, style } = this.props;
-
+    const { className, hidden = [], items, query, style } = this.props;
     return (
       <div
         className={classes('ui--Menu ui menu tabular', className)}
@@ -35,6 +37,11 @@ export default class Tabs extends React.PureComponent<Props> {
             .filter(({ name }) => !hidden.includes(name))
             .map(this.renderItem)
         }
+        <FilterOverlay>
+          {query && query.includes(window.location.hash.split('/')[2]) && (
+            <Query/>
+          )}
+        </FilterOverlay>
       </div>
     );
   }