Adjust Tabs usage (#5388)

* Adjust Tabs usage

* text

packages/apps/src/Content/index.tsx

@@ -8,7 +8,7 @@ import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import createRoutes from '@polkadot/apps-routing';
-import { ErrorBoundary, SectionContext, Spinner, StatusContext } from '@polkadot/react-components';
+import { ErrorBoundary, Spinner, StatusContext, TabsContext } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import { findMissingApis } from '../endpoint';
@@ -61,7 +61,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
           <>
             <Suspense fallback='...'>
               <ErrorBoundary trigger={name}>
-                <SectionContext.Provider value={{ icon, text }}>
+                <TabsContext.Provider value={{ icon, text }}>
                   {missingApis.length
                     ? (
                       <NotFound
@@ -79,7 +79,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
                       />
                     )
                   }
-                </SectionContext.Provider>
+                </TabsContext.Provider>
               </ErrorBoundary>
             </Suspense>
             <Status />

packages/page-rpc/src/index.tsx

@@ -6,7 +6,7 @@ import type { AppProps as Props } from '@polkadot/react-components/types';
 import React, { useRef } from 'react';
 import { Route, Switch } from 'react-router';
 
-import Tabs from '@polkadot/react-components/Tabs';
+import { Tabs } from '@polkadot/react-components';
 
 import Rpc from './Rpc';
 import { useTranslation } from './translate';
@@ -18,7 +18,7 @@ function RpcApp ({ basePath }: Props): React.ReactElement<Props> {
     {
       isRoot: true,
       name: 'rpc',
-      text: t<string>('RPC calls')
+      text: t<string>('Submission')
     }
   ]);
 

packages/page-signing/src/index.tsx

@@ -6,7 +6,7 @@ import type { AppProps as Props } from '@polkadot/react-components/types';
 import React, { useRef } from 'react';
 import { Route, Switch } from 'react-router';
 
-import Tabs from '@polkadot/react-components/Tabs';
+import { Tabs } from '@polkadot/react-components';
 
 import Hash from './Hash';
 import Sign from './Sign';

packages/page-staking/src/index.tsx

@@ -10,8 +10,7 @@ import { Route, Switch } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { HelpOverlay } from '@polkadot/react-components';
-import Tabs from '@polkadot/react-components/Tabs';
+import { HelpOverlay, Tabs } from '@polkadot/react-components';
 import { useAccounts, useApi, useAvailableSlashes, useCall, useCallMulti, useFavorites, useOwnStashInfos } from '@polkadot/react-hooks';
 import { isFunction } from '@polkadot/util';
 

packages/react-components/src/Tabs/index.tsx

@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { Location } from 'history';
 import type { SectionType, TabItem } from './types';
 
 import React, { useEffect } from 'react';
@@ -9,37 +10,42 @@ import styled from 'styled-components';
 
 import CurrentSection from './CurrentSection';
 import Tab from './Tab';
-import TabsSectionDelimiter from './TabsSectionDelimiter';
+import Delimiter from './TabsSectionDelimiter';
 
-export const SectionContext = React.createContext<SectionType>({});
+export const TabsContext = React.createContext<SectionType>({});
 
 interface Props {
   className?: string;
   basePath: string;
-  hidden?: (string | boolean | undefined)[];
+  hidden?: string[] | null | false;
   items: TabItem[];
 }
 
+// redirect on invalid tabs
+function redirect (basePath: string, location: Location, items: TabItem[], hidden?: string[] | null | false): void {
+  if (location.pathname !== basePath) {
+    // Has the form /staking/query/<something>
+    const [,, section] = location.pathname.split('/');
+    const alias = items.find(({ alias }) => alias === section);
+
+    if (alias) {
+      window.location.hash = alias.isRoot
+        ? basePath
+        : `${basePath}/${alias.name}`;
+    } else if (hidden && (hidden.includes(section) || !items.some(({ isRoot, name }) => !isRoot && name === section))) {
+      window.location.hash = basePath;
+    }
+  }
+}
+
 function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactElement<Props> {
   const location = useLocation();
-  const { icon, text } = React.useContext(SectionContext);
+  const { icon, text } = React.useContext(TabsContext);
 
-  // redirect on invalid tabs
-  useEffect((): void => {
-    if (location.pathname !== basePath) {
-      // Has the form /staking/query/<something>
-      const [,, section] = location.pathname.split('/');
-      const alias = items.find(({ alias }) => alias === section);
-
-      if (alias) {
-        window.location.hash = alias.isRoot
-          ? basePath
-          : `${basePath}/${alias.name}`;
-      } else if (hidden && (hidden.includes(section) || !items.some(({ isRoot, name }) => !isRoot && name === section))) {
-        window.location.hash = basePath;
-      }
-    }
-  }, [basePath, hidden, items, location]);
+  useEffect(
+    () => redirect(basePath, location, items, hidden),
+    [basePath, hidden, items, location]
+  );
 
   const filtered = hidden
     ? items.filter(({ name }) => !hidden.includes(name))
@@ -54,7 +60,7 @@ function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactE
             text={text}
           />
         )}
-        <TabsSectionDelimiter />
+        <Delimiter />
         <ul className='ui--TabsList'>
           {filtered.map((tab, index) => (
             <li key={index}>

packages/react-components/src/index.tsx

@@ -86,7 +86,7 @@ export { default as Static } from './Static';
 export { default as Status, StatusContext } from './Status';
 export { default as SummaryBox } from './SummaryBox';
 export { default as Table } from './Table';
-export { default as Tabs, SectionContext } from './Tabs';
+export { default as Tabs, TabsContext } from './Tabs';
 export { default as Tag } from './Tag';
 export { default as Tags } from './Tags';
 export { default as Toggle } from './Toggle';