Allow actions to be passed to ItemTableAppBar

[campb303]

Currently, the ItemTableAppBar accepts four props: title, setDarkMode, darkMode and theme. The title and theme props work as expected. The setDarkMode and darkMode props are passed for toggling dark mode. While this works for a single action, it is not a scalable solution for more actions to be added later.

Within ItemTableAppBar, it would be relatively simple to add more actions. This is what the current dark mode toggle looks like:

<Tooltip title={"Turn " + (props.darkMode ? "off" : "on") + " dark mode"} 
	arrow 
	onClick={toggleDarkMode} 
	TransitionComponent={Zoom}
>
	<IconButton color="inherit">
		{props.darkMode ? <DarkModeIcon /> : <LightModeIcon />}
	</IconButton>
</Tooltip>

This could could be made into a component with the following props:

• tooltipTitle: a string to show in the tooltip on hover
• onClick: a function to execute when the button is clicked
• icon: the image/vector to display when clicked

The component could be used with those components like this:

<ItemTableAppBarAction
    tooltipTitle={"Hello World"}
    onClick={onClickHandler}
    icon={clicked ? <InactiveIcon/> : <ActiveIcon/>}
/>

The ItemTableAppBar could then be used without the darkMode and setDarkMode props but with the actions prop like this:

itemViewAppBarActions = [
    <ItemTableAppBarAction
        tooltipTitle={"Turn " + (props.darkMode ? "off" : "on") + " dark mode"} 
        onClick={setDarkMode}
        icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
    />
];

<ItemTableAppBar
    title="webqueue2"
    theme={theme}
    actions={itemViewAppBarActions}
/>

[campb303]

This should also apply to ItemViewAppbar.

[campb303]

The ItemTableAppBar and ItemViewAppBar could likely be consolidated into a single component for simplicity as the two seems to serve very similar purposes and it would be cleaner to consolidate logic into one place.

Also, this needs to be done before the ItemTable can be made responsive.

[wrigh393]

Working on this.

[campb303]

Disregard the need to consolidate the *AppBar components.

[wrigh393]

The actions for toolbars have been consolidated into a separate component to make the process of implementing more actions easier in the future. Here is how that component looks:

    <Toolbar variant="dense">
            <Tooltip title={tooltipTitle}
                          arrow
                          onClick={onClick}
                          TransitionComponent={Zoom}
             >
                  <IconButton color="inherit">
                        {icon}
                  </IconButton>
            </Tooltip> 
    </Toolbar>

Here is a list of the props for the component:

• tooltipTitle string - this is the tip that is displayed when a user hovers over the icon/action
• onClick function- The function that runs when the icon button is clicked
• icon component - The icon that is displayed in the toolbar

[wrigh393]

This issue is waiting for #215 to be reviewed. Can be closed once this PR is merged.

[campb303]

Working on this. Tried to complete this with Tyler yesterday but react-storybook has broken. Currently attempting to fix an esoteric build issue. The issue seems to stem from eslint-loader being depricated and replacted by eslint-webpack-loader.

[campb303]

This has been resolved.

Passing actions to ItemTableAppBar
A new ItemTableAppBarAction component has been created. It wraps a provided MUI Icon in a React Tooltip and MUI IconButton and applies a given onClick function to toggle a given setting.

Example:

<ItemTableAppBarAction
  title="Logout"
  icon={<LogoutIcon />}
  onClick={logout()}
/>

An actions prop has been added to the ItemTableAppBar to allow for arbitrary actions to be passed. This prop expects a list of ItemTableAppBarAction components and renders the actions from left to right in the order they're declared.

Example:

<ItemTableAppBar
  title="webqueue2"
  actions={[
    <ItemTableAppBarAction
      title="Action 1"
      icon={<Action1Icon />}
      onClick={action1callback()}
    />,
    <ItemTableAppBarAction
      title="Action 2"
      icon={<Action2Icon />}
      onClick={action2callback()}
    />
  ]}
/>

Fixing Storybook build isues
In the latest version of Storybook there seems to be an issue with the webpack loader for eslint. Previously eslint-loader was used but has been deprecated by esline-webpack-loader but the dependencies of Storybook have not been updated to use the new eslint-webpack-loader and the older eslint-loader is broken.

To address this issue, the following packages were version locked to before this breaking change occured (v6.1.20):

• @storybook/addon-actions
• @storybook/addon-docs
• @storybook/addon-essentials
• @storybook/addon-links
• @storybook/node-logger
• @storybook/react