refactor(core): update tabs

packages/core/src/components/Tabs/Tab.test.tsx

@@ -17,11 +17,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
-import Tab from './Tab';
+import { StyledTab } from './Tab';
 
 describe('<Tab />', () => {
   it('renders without exploding', () => {
-    const rendered = render(wrapInTestApp(<Tab label="test" />));
+    const rendered = render(wrapInTestApp(<StyledTab label="test" />));
     expect(rendered.getByText('test')).toBeInTheDocument();
   });
 });

packages/core/src/components/Tabs/Tab.tsx

@@ -15,18 +15,15 @@
  */
 
 import React from 'react';
-import { Tab, withStyles, Theme } from '@material-ui/core';
+import { Tab, makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 
-const withStylesProps = (styles: any) => (Component: any) => (props: any) => {
-  const Comp = withStyles((theme: Theme) => styles(props, theme))(Component);
-  return <Comp {...props} />;
-};
-
 interface StyledTabProps {
-  label: string;
+  label?: string;
+  icon?: any; // TODO: define type for material-ui icons
   isFirstNav?: boolean;
   isFirstIndex?: boolean;
+  value?: any;
 }
 
 const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => {
@@ -39,14 +36,15 @@ const tabMarginLeft = (isFirstNav: boolean, isFirstIndex: boolean) => {
   return '40px';
 };
 
-const tabStyles = (props: any, theme: BackstageTheme) => ({
+const useStyles = makeStyles<BackstageTheme, StyledTabProps>(theme => ({
   root: {
     textTransform: 'none',
     height: '64px',
     fontWeight: theme.typography.fontWeightBold,
     fontSize: theme.typography.pxToRem(13),
     color: theme.palette.textSubtle,
-    marginLeft: tabMarginLeft(props.isFirstNav, props.isFirstIndex),
+    marginLeft: props =>
+      tabMarginLeft(props.isFirstNav as boolean, props.isFirstIndex as boolean),
     width: '130px',
     minWidth: '130px',
     '&:hover': {
@@ -55,11 +53,10 @@ const tabStyles = (props: any, theme: BackstageTheme) => ({
       color: theme.palette.textSubtle,
     },
   },
-});
+}));
 
-const StyledTab = withStylesProps(tabStyles)((props: StyledTabProps) => {
+export const StyledTab = (props: StyledTabProps) => {
+  const classes = useStyles(props);
   const { isFirstNav, isFirstIndex, ...rest } = props;
-  return <Tab disableRipple {...rest} />;
-});
-
-export default StyledTab;
+  return <Tab className={classes.root} disableRipple {...rest} />;
+};

packages/core/src/components/Tabs/TabBar.tsx

@@ -19,7 +19,7 @@ import { Tabs, makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 
 interface StyledTabsProps {
-  value: number;
+  value: number | boolean;
   onChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
 }
 
@@ -40,7 +40,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
 }));
 
-const StyledTabs: FC<StyledTabsProps> = props => {
+export const StyledTabs: FC<StyledTabsProps> = props => {
   const classes = useStyles(props);
   return (
     <Tabs
@@ -50,5 +50,3 @@ const StyledTabs: FC<StyledTabsProps> = props => {
     />
   );
 };
-
-export default StyledTabs;

packages/core/src/components/Tabs/TabIcon.tsx

@@ -15,24 +15,17 @@
  */
 
 import React from 'react';
-import { IconButton, withStyles, Theme } from '@material-ui/core';
-
-export const withStylesProps = (styles: any) => (Component: any) => (
-  props: any,
-) => {
-  const Comp = withStyles((theme: Theme) => styles(props, theme))(Component);
-  return <Comp {...props} />;
-};
+import { IconButton, makeStyles } from '@material-ui/core';
+import { BackstageTheme } from '@backstage/theme';
 
 interface StyledIconProps {
   ariaLabel: string;
   children: any;
-  classes: any;
   isNext?: boolean;
   onClick: any;
 }
 
-const iconStyles = (props: StyledIconProps) => ({
+const useStyles = makeStyles<BackstageTheme, StyledIconProps>(() => ({
   root: {
     color: '#6E6E6E',
     overflow: 'visible',
@@ -40,25 +33,22 @@ const iconStyles = (props: StyledIconProps) => ({
     textAlign: 'center',
     borderRadius: '50%',
     backgroundColor: '#E6E6E6',
-    marginLeft: props.isNext ? 'auto' : '0',
-    marginRight: props.isNext ? '0' : '10px',
+    marginLeft: props => (props.isNext ? 'auto' : '0'),
+    marginRight: props => (props.isNext ? '0' : '10px'),
     '&:hover': {
       backgroundColor: '#E6E6E6',
       opacity: '1',
     },
   },
-});
+}));
 
-const StyledIcon = withStylesProps(iconStyles)((props: StyledIconProps) => {
-  const {
-    classes: { root },
-    ariaLabel,
-    onClick,
-  } = props;
+export const StyledIcon = (props: StyledIconProps) => {
+  const classes = useStyles(props);
+  const { ariaLabel, onClick } = props;
   return (
     <IconButton
       onClick={onClick}
-      className={root}
+      className={classes.root}
       size="small"
       disableRipple
       disableFocusRipple
@@ -67,6 +57,4 @@ const StyledIcon = withStylesProps(iconStyles)((props: StyledIconProps) => {
       {props.children}
     </IconButton>
   );
-});
-
-export default StyledIcon;
+};

packages/core/src/components/Tabs/TabPanel.tsx

@@ -19,18 +19,17 @@ import Box from '@material-ui/core/Box';
 
 export interface TabPanelProps {
   children: any;
-  value: any;
-  index: number;
+  value?: any;
+  index?: number;
 }
 
-const TabPanel: FC<TabPanelProps> = props => {
+export const TabPanel: FC<TabPanelProps> = props => {
   const { children, value, index, ...other } = props;
 
   return (
     <div
       role="tabpanel"
       hidden={value !== index}
-      id={`scrollable-auto-tabpanel-${index}`}
       aria-labelledby={`scrollable-auto-tab-${index}`}
       {...other}
     >
@@ -38,5 +37,3 @@ const TabPanel: FC<TabPanelProps> = props => {
     </div>
   );
 };
-
-export default TabPanel;

packages/core/src/components/Tabs/Tabs.stories.tsx

@@ -15,7 +15,8 @@
  */
 
 import React from 'react';
-import Tabs from './Tabs';
+import { Tabs } from './Tabs';
+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
 
 export default {
   title: 'Tabs',
@@ -45,3 +46,26 @@ export const Expandable = () => (
     />
   </div>
 );
+
+export const Icons = () => (
+  <div style={containerStyle}>
+    <Tabs
+      tabs={[...Array(4)].map((_, index) => ({
+        icon: <AccessAlarmIcon />,
+        content: <div>Content {index}</div>,
+      }))}
+    />
+  </div>
+);
+
+export const IconsAndLabels = () => (
+  <div style={containerStyle}>
+    <Tabs
+      tabs={[...Array(4)].map((_, index) => ({
+        icon: <AccessAlarmIcon />,
+        label: `ANOTHER TAB`,
+        content: <div>Content {index}</div>,
+      }))}
+    />
+  </div>
+);

packages/core/src/components/Tabs/Tabs.tsx

@@ -14,26 +14,34 @@
  * limitations under the License.
  */
 
-import React, { FC, useRef, useEffect, MutableRefObject } from 'react';
+import React, {
+  FC,
+  useRef,
+  useEffect,
+  MutableRefObject,
+  useState,
+} from 'react';
 import { BackstageTheme } from '@backstage/theme';
 import { AppBar } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import NavigateBeforeIcon from '@material-ui/icons/NavigateBefore';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
-import { chunkArray, useWindowWidth } from './utils';
+import { chunkArray } from './utils';
+import { useWindowSize } from 'react-use';
 
 /* Import Components */
 
-import TabPanel from './TabPanel';
-import TabIcon from './TabIcon';
-import Tab from './Tab';
-import TabBar from './TabBar';
+import { TabPanel } from './TabPanel';
+import { StyledIcon } from './TabIcon';
+import { StyledTab } from './Tab';
+import { StyledTabs } from './TabBar';
 
 /* Props Types */
 
-interface TabProps {
-  label: string;
+export interface TabProps {
   content: any;
+  label?: string;
+  icon?: any; // TODO: define type for material-ui icons
 }
 
 export interface TabsProps {
@@ -46,36 +54,35 @@ const useStyles = makeStyles<BackstageTheme>((theme: BackstageTheme) => ({
     width: '100%',
   },
   styledTabs: {
-    backgroundColor: theme.palette.tabbar.background,
+    backgroundColor: theme.palette.background.paper,
   },
   appbar: {
     boxShadow: 'none',
-    backgroundColor: theme.palette.tabbar.background,
+    backgroundColor: theme.palette.background.paper,
     paddingLeft: '10px',
     paddingRight: '10px',
   },
 }));
 
-const Tabs: FC<TabsProps> = ({ tabs }) => {
+export const Tabs: FC<TabsProps> = ({ tabs }) => {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
-  const [navIndex, setNavIndex] = React.useState(0);
-  const [chunkedTabs, setChunkedTabs] = React.useState([[]] as TabProps[][]);
+  const [value, setValue] = useState([0, 0]); // [selectedChunckedNavIndex, selectedIndex]
+  const [navIndex, setNavIndex] = useState(0);
+  const [numberOfChunkedElement, setNumberOfChunkedElement] = useState(0);
+  const [chunkedTabs, setChunkedTabs] = useState<TabProps[][]>([[]]);
   const wrapper = useRef() as MutableRefObject<HTMLDivElement>;
 
-  const size = useWindowWidth();
+  const { width } = useWindowSize();
 
   const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
-    setValue(newValue);
+    setValue([navIndex, newValue]);
   };
 
   const navigateToPrevChunk = () => {
-    setValue(navIndex - 1 === 0 ? 0 : 1);
     setNavIndex(navIndex - 1);
   };
 
   const navigateToNextChunk = () => {
-    setValue(1);
     setNavIndex(navIndex + 1);
   };
 
@@ -88,58 +95,70 @@ const Tabs: FC<TabsProps> = ({ tabs }) => {
     const numberOfTabIcons = navIndex === 0 ? 1 : 2;
     const wrapperWidth =
       wrapper.current.offsetWidth - padding - numberOfTabIcons * 30;
+    const flattenIndex = value[0] * numberOfChunkedElement + value[1];
+    const newChunkedElementSize = Math.floor(wrapperWidth / 170);
 
-    const numberOfChunkedElement = Math.floor(wrapperWidth / 170);
-    setChunkedTabs(
-      chunkArray([...tabs], numberOfChunkedElement) as TabProps[][],
-    );
-  }, [size]);
+    setNumberOfChunkedElement(newChunkedElementSize);
+    setChunkedTabs(chunkArray([...tabs], newChunkedElementSize));
+    setValue([
+      Math.floor(flattenIndex / newChunkedElementSize),
+      flattenIndex % newChunkedElementSize,
+    ]);
+  }, [width]);
+
+  const currentIndex = navIndex === value[0] ? value[1] : false;
 
   return (
     <div className={classes.root}>
       <AppBar ref={wrapper} className={classes.appbar} position="static">
-        <div className={classes.root2}>
-          <TabBar value={value} onChange={handleChange}>
+        <div>
+          <StyledTabs value={currentIndex} onChange={handleChange}>
             {navIndex !== 0 && (
-              <TabIcon
+              <StyledIcon
                 onClick={navigateToPrevChunk}
                 ariaLabel="navigate-before"
               >
                 <NavigateBeforeIcon />
-              </TabIcon>
+              </StyledIcon>
             )}
             {chunkedTabs[navIndex].map((tab, index) => (
-              <Tab
+              <StyledTab
+                value={index}
                 isFirstIndex={index === 0}
                 isFirstNav={navIndex === 0}
                 key={index}
-                label={tab.label}
+                icon={tab.icon || undefined}
+                label={tab.label || undefined}
               />
             ))}
             {hasNextNavIndex() && (
-              <TabIcon
+              <StyledIcon
                 isNext
                 onClick={navigateToNextChunk}
                 ariaLabel="navigate-next"
               >
                 <NavigateNextIcon />
-              </TabIcon>
+              </StyledIcon>
             )}
-          </TabBar>
+          </StyledTabs>
         </div>
       </AppBar>
-      {chunkedTabs[navIndex].map((tab, index) => (
+      {currentIndex !== false ? (
+        chunkedTabs[navIndex].map((tab, index) => (
+          <TabPanel key={index} value={index} index={currentIndex}>
+            {tab.content}
+          </TabPanel>
+        ))
+      ) : (
+        // Render if the selected tab index is outside the current rendered chunked array
         <TabPanel
-          key={index}
-          // Used to prevent issues with TabIcon inside the TabBar
-          value={navIndex === 0 ? value : value - 1}
-          index={index}
+          key="panel_outside_chunked_array"
+          value={value[1]}
+          index={value[1]}
         >
-          {tab.content}
+          {chunkedTabs[value[0]][value[1]].content}
         </TabPanel>
-      ))}
+      )}
     </div>
   );
 };
-
-export default Tabs;

packages/core/src/components/Tabs/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { default } from './Tabs';
+export { Tabs as default } from './Tabs';

packages/core/src/components/Tabs/utils.ts

@@ -13,30 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState, useEffect } from 'react';
+import { TabProps } from './Tabs';
 
-export const chunkArray = (myArray: any[], chunkSize: number) => {
+export const chunkArray = (
+  myArray: TabProps[],
+  chunkSize: number,
+): TabProps[][] => {
   const results = [];
   while (myArray.length) {
     results.push(myArray.splice(0, chunkSize));
   }
   return results;
 };
-
-export const useWindowWidth = () => {
-  const isClient = typeof window === 'object';
-  const getWidth = () => (isClient ? window.innerWidth : undefined);
-  const [windowWidth, setWindowWidth] = useState(getWidth);
-
-  useEffect((): any => {
-    if (!isClient) {
-      return false;
-    }
-
-    const handleResize = () => setWindowWidth(getWidth());
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return windowWidth;
-};

packages/theme/src/themes.ts

@@ -62,7 +62,6 @@ export const lightTheme = createTheme({
     },
     tabbar: {
       indicator: '#9BF0E1',
-      background: '#FFFFFF',
     },
   },
 });
@@ -112,7 +111,6 @@ export const darkTheme = createTheme({
     },
     tabbar: {
       indicator: '#9BF0E1',
-      background: '#424242',
     },
   },
 });

packages/theme/src/types.ts

@@ -46,7 +46,6 @@ type PaletteAdditions = {
   sidebar: string;
   tabbar: {
     indicator: string;
-    background: string;
   };
   bursts: {
     fontColor: string;