From e3493974f91d07723008cdb8c7466a5ff8407cb5 Mon Sep 17 00:00:00 2001
From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Wed, 11 Jul 2018 15:15:49 +0200
Subject: [PATCH 1/1] change code after CR

Feature #13764

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---
 .../items/abstract-item.tsx                   |  1 +
 .../items/collection-item.tsx                 |  6 +-
 .../items/empty-item.tsx                      |  6 +-
 .../items/process-item.tsx                    |  6 +-
 .../items/project-item.tsx                    |  6 +-
 src/components/empty-state/empty-state.tsx    |  7 +-
 src/components/icon/icon.tsx                  | 74 ++++++++++---------
 src/components/side-panel/side-panel.tsx      |  8 +-
 .../details-panel/details-panel.tsx           |  2 +-
 .../main-app-bar/main-app-bar.tsx             |  8 +-
 10 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/src/components/details-panel-factory/items/abstract-item.tsx b/src/components/details-panel-factory/items/abstract-item.tsx
index d5e46a26..d4038703 100644
--- a/src/components/details-panel-factory/items/abstract-item.tsx
+++ b/src/components/details-panel-factory/items/abstract-item.tsx
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import { DetailsPanelResource } from '../../../views-components/details-panel/details-panel';
+import { IconType } from '../../icon/icon';
 
 export default abstract class AbstractItem<T extends DetailsPanelResource = DetailsPanelResource> {
 
diff --git a/src/components/details-panel-factory/items/collection-item.tsx b/src/components/details-panel-factory/items/collection-item.tsx
index 1c8bd00f..dab8101a 100644
--- a/src/components/details-panel-factory/items/collection-item.tsx
+++ b/src/components/details-panel-factory/items/collection-item.tsx
@@ -13,11 +13,11 @@ import { ResourceKind } from '../../../models/resource';
 
 export default class CollectionItem extends AbstractItem<CollectionResource> {
 
-    getIcon(className?: string): React.ReactElement<any> {
-        return CollectionIcon(className);
+    getIcon(className?: string) {
+        return <CollectionIcon className={className} />;
     }
 
-    buildDetails(): React.ReactElement<any> {
+    buildDetails() {
         return <div>
             <Attribute label='Type' value={resourceLabel(ResourceKind.Collection)} />
             <Attribute label='Size' value='---' />
diff --git a/src/components/details-panel-factory/items/empty-item.tsx b/src/components/details-panel-factory/items/empty-item.tsx
index 356ccc2c..0edfe84f 100644
--- a/src/components/details-panel-factory/items/empty-item.tsx
+++ b/src/components/details-panel-factory/items/empty-item.tsx
@@ -10,11 +10,11 @@ import { EmptyResource } from '../../../models/empty';
 
 export default class EmptyItem extends AbstractItem<EmptyResource> {
     
-    getIcon(className?: string): React.ReactElement<any> {
-        return ProjectsIcon(className);
+    getIcon(className?: string) {
+        return <ProjectsIcon className={className} />;
     }
 
-    buildDetails(): React.ReactElement<any> {
+    buildDetails() {
         return <EmptyState icon={DefaultIcon}
             message='Select a file or folder to view its details.' />;
     }
diff --git a/src/components/details-panel-factory/items/process-item.tsx b/src/components/details-panel-factory/items/process-item.tsx
index 66a6071b..215c5312 100644
--- a/src/components/details-panel-factory/items/process-item.tsx
+++ b/src/components/details-panel-factory/items/process-item.tsx
@@ -13,11 +13,11 @@ import { resourceLabel } from '../../../common/labels';
 
 export default class ProcessItem extends AbstractItem<ProcessResource> {
 
-    getIcon(className?: string): React.ReactElement<any> {
-        return ProcessIcon(className);
+    getIcon(className?: string){
+        return <ProcessIcon className={className} />;
     }
 
-    buildDetails(): React.ReactElement<any> {
+    buildDetails() {
         return <div>
             <Attribute label='Type' value={resourceLabel(ResourceKind.Process)} />
             <Attribute label='Size' value='---' />
diff --git a/src/components/details-panel-factory/items/project-item.tsx b/src/components/details-panel-factory/items/project-item.tsx
index 6d8ad04e..ae694e5c 100644
--- a/src/components/details-panel-factory/items/project-item.tsx
+++ b/src/components/details-panel-factory/items/project-item.tsx
@@ -13,11 +13,11 @@ import { resourceLabel } from '../../../common/labels';
 
 export default class ProjectItem extends AbstractItem<ProjectResource> {
 
-    getIcon(className?: string): React.ReactElement<any> {
-        return ProjectIcon(className);
+    getIcon(className?: string) {
+        return <ProjectIcon className={className} />;
     }
 
-    buildDetails(): React.ReactElement<any> {
+    buildDetails() {
         return <div>
             <Attribute label='Type' value={resourceLabel(ResourceKind.Project)} />
             {/* Missing attr */}
diff --git a/src/components/empty-state/empty-state.tsx b/src/components/empty-state/empty-state.tsx
index 3c21eca3..8a36213e 100644
--- a/src/components/empty-state/empty-state.tsx
+++ b/src/components/empty-state/empty-state.tsx
@@ -6,10 +6,11 @@ import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
 import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles';
 import { ArvadosTheme } from 'src/common/custom-theme';
+import { IconType } from '../icon/icon';
 
 export interface EmptyStateDataProps {
     message: string;
-    icon: (className?: string) => React.ReactElement<any>;
+    icon: IconType;
     details?: string;
 }
 
@@ -18,10 +19,10 @@ type EmptyStateProps = EmptyStateDataProps & WithStyles<CssRules>;
 class EmptyState extends React.Component<EmptyStateProps, {}> {
 
     render() {
-        const { classes, message, details, icon, children } = this.props;
+        const { classes, message, details, icon: Icon, children } = this.props;
         return (
             <Typography className={classes.container} component="div">
-                {icon(classes.icon)}
+                <Icon className={classes.icon} />
                 <Typography variant="body1" gutterBottom>{message}</Typography>
                 { details && <Typography gutterBottom>{details}</Typography> }
                 { children && <Typography gutterBottom>{children}</Typography> }
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 9c0faac0..e80fee8e 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -33,39 +33,41 @@ import Search from '@material-ui/icons/Search';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 
-export const AddFavoriteIcon = (className?: string) => <StarBorder className={className} />;
-export const AdvancedIcon = (className?: string) => <Folder className={className} />;
-export const CustomizeTableIcon = (className?: string) => <Menu className={className} />;
-export const CopyIcon = (className?: string) => <ContentCopy className={className} />;
-export const CollectionIcon = (className?: string) => <Folder className={className} />;
-export const CloseIcon = (className?: string) => <Close className={className} />;
-export const DefaultIcon = (className?: string) => <RateReview className={className} />;
-export const DetailsIcon = (className?: string) => <Info className={className} />;
-export const DownloadIcon = (className?: string) => <GetApp className={className} />;
-export const FavoriteIcon = (className?: string) => <Star className={className} />;
-export const HelpIcon = (className?: string) => <Help className={className} />;
-export const LogIcon = (className?: string) => <Folder className={className} />;
-export const MoreOptionsIcon = (className?: string) => <MoreVert className={className} />;
-export const MoveToIcon = (className?: string) => <Input className={className} />;
-export const NewProjectIcon = (className?: string) => <CreateNewFolder className={className} />;
-export const NotificationIcon = (className?: string) => <Notifications className={className} />;
-export const PaginationDownIcon = (className?: string) => <ArrowDropDown className={className} />;
-export const PaginationLeftArrowIcon = (className?: string) => <ChevronLeft className={className} />;
-export const PaginationRightArrowIcon = (className?: string) => <ChevronRight className={className} />;
-export const ProcessIcon = (className?: string) => <BubbleChart className={className} />;
-export const ProjectIcon = (className?: string) => <Folder className={className} />;
-export const ProjectsIcon = (className?: string) => <Inbox className={className} />;
-export const ProvenanceGraphIcon = (className?: string) => <Folder className={className} />;
-export const RecentIcon = (className?: string) => <AccessTime className={className} />;
-export const RemoveIcon = (className?: string) => <Delete className={className} />;
-export const RemoveFavoriteIcon = (className?: string) => <Star className={className} />;
-export const RenameIcon = (className?: string) => <Edit className={className} />;
-export const ReRunProcessIcon = (className?: string) => <Cached className={className} />;
-export const SearchIcon = (className?: string) => <Search className={className} />;
-export const ShareIcon = (className?: string) => <PersonAdd className={className} />;
-export const ShareMeIcon = (className?: string) => <People className={className} />;
-export const SidePanelRightArrowIcon = (className?: string) => <PlayArrow className={className} />;
-export const TrashIcon = (className?: string) => <Delete className={className} />;
-export const UserPanelIcon = (className?: string) => <Person className={className} />;
-export const UsedByIcon = (className?: string) => <Folder className={className} />;
-export const WorkflowIcon = (className?: string) => <Code className={className} />;
\ No newline at end of file
+export type IconType = React.SFC<{ className?: string }>;
+
+export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
+export const AdvancedIcon: IconType = (props) => <Folder {...props} />;
+export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
+export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
+export const CollectionIcon: IconType = (props) => <Folder {...props} />;
+export const CloseIcon: IconType = (props) => <Close {...props} />;
+export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
+export const DetailsIcon: IconType = (props) => <Info {...props} />;
+export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
+export const FavoriteIcon: IconType = (props) => <Star {...props} />;
+export const HelpIcon: IconType = (props) => <Help {...props} />;
+export const LogIcon: IconType = (props) => <Folder {...props} />;
+export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
+export const MoveToIcon: IconType = (props) => <Input {...props} />;
+export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
+export const NotificationIcon: IconType = (props) => <Notifications {...props} />;
+export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
+export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
+export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
+export const ProcessIcon: IconType = (props) => <BubbleChart {...props} />;
+export const ProjectIcon: IconType = (props) => <Folder {...props} />;
+export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
+export const ProvenanceGraphIcon: IconType = (props) => <Folder {...props} />;
+export const RecentIcon: IconType = (props) => <AccessTime {...props} />;
+export const RemoveIcon: IconType = (props) => <Delete {...props} />;
+export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
+export const RenameIcon: IconType = (props) => <Edit {...props} />;
+export const ReRunProcessIcon: IconType = (props) => <Cached {...props} />;
+export const SearchIcon: IconType = (props) => <Search {...props} />;
+export const ShareIcon: IconType = (props) => <PersonAdd {...props} />;
+export const ShareMeIcon: IconType = (props) => <People {...props} />;
+export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props} />;
+export const TrashIcon: IconType = (props) => <Delete {...props} />;
+export const UserPanelIcon: IconType = (props) => <Person {...props} />;
+export const UsedByIcon: IconType = (props) => <Folder {...props} />;
+export const WorkflowIcon: IconType = (props) => <Code {...props} />;
\ No newline at end of file
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 361d127a..eedc499f 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -7,13 +7,13 @@ import { ReactElement } from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 import { ArvadosTheme } from '../../common/custom-theme';
 import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
-import { SidePanelRightArrowIcon } from '../icon/icon';
+import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
 import * as classnames from "classnames";
 
 export interface SidePanelItem {
     id: string;
     name: string;
-    icon: (className?: string) => React.ReactElement<any>;
+    icon: IconType;
     active?: boolean;
     open?: boolean;
     margin?: boolean;
@@ -40,11 +40,11 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
                                 <span className={row}>
                                     {it.openAble ? (
                                         <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
-                                            {SidePanelRightArrowIcon(this.getIconClassNames(it.open, it.active))}
+                                            <SidePanelRightArrowIcon className={this.getIconClassNames(it.open, it.active)} />
                                         </i>
                                     ) : null}
                                     <ListItemIcon className={it.active ? active : ''}>
-                                        {it.icon(`${icon} ${it.margin ? projectIconMargin : ''}`)}
+                                        {<it.icon className={`${icon} ${it.margin ? projectIconMargin : ''}`} />}
                                     </ListItemIcon>
                                     <ListItemText className={listItemText} 
                                         primary={renderListItemText(it.name, active, it.active)} />
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 7fa6d34c..f2212fc5 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -58,7 +58,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
                             </Grid>
                             <Grid item>
                                 <IconButton color="inherit" onClick={onCloseDrawer}>
-                                    {CloseIcon()}
+                                    {<CloseIcon />}
                                 </IconButton>
                             </Grid>
                         </Grid>
diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index ce9ddb7b..30eee0d2 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -74,7 +74,7 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
                     onContextMenu={props.onContextMenu} />
             }
             <IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
-                { DetailsIcon() }
+                { <DetailsIcon /> }
             </IconButton>
         </Toolbar>
     </AppBar>;
@@ -86,16 +86,16 @@ const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps
         <>
             <IconButton color="inherit">
                 <Badge badgeContent={3} color="primary">
-                    {NotificationIcon()}
+                    {<NotificationIcon />}
                 </Badge>
             </IconButton>
-            <DropdownMenu icon={UserPanelIcon()} id="account-menu">
+            <DropdownMenu icon={<UserPanelIcon />} id="account-menu">
                 <MenuItem>
                     {getUserFullname(user)}
                 </MenuItem>
                 {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
             </DropdownMenu>
-            <DropdownMenu icon={HelpIcon()} id="help-menu">
+            <DropdownMenu icon={<HelpIcon />} id="help-menu">
                 {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
             </DropdownMenu>
         </>
-- 
2.30.2