From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Fri, 6 Jul 2018 10:11:31 +0000 (+0200)
Subject: add enum for icons types
X-Git-Url: https://git.arvados.org/arvados.git/commitdiff_plain/0b1b9f181db6c43a8bbc9b2b2d6ab48a51003b2d

add enum for icons types

Feature #13765

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---

diff --git a/src/components/empty-state/empty-state.tsx b/src/components/empty-state/empty-state.tsx
index b048e32785..205053b5ce 100644
--- a/src/components/empty-state/empty-state.tsx
+++ b/src/components/empty-state/empty-state.tsx
@@ -6,11 +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 IconBase from '../icon/icon';
+import IconBase, { IconTypes } from '../icon/icon';
 
 export interface EmptyStateDataProps {
     message: string;
-    icon: string;
+    icon: IconTypes;
     details?: string;
 }
 
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 3682b77520..c420a19c8d 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -8,15 +8,24 @@ import CloseAnnouncement from '@material-ui/icons/Announcement';
 import CloseIcon from '@material-ui/icons/Close';
 import FolderIcon from '@material-ui/icons/Folder';
 
+export enum IconTypes {
+    ANNOUNCEMENT = 'announcement',
+    FOLDER = 'folder',
+    CLOSE = 'close',
+    PROJECT  = 'project',
+    COLLECTION = 'collection',
+    PROCESS = 'process'
+}
+
 interface IconBaseDataProps {
-    icon: string;
+    icon: IconTypes;
     className?: string;
 }
 
 type IconBaseProps = IconBaseDataProps;
 
 interface IconBaseState {
-    icon: string;
+    icon: IconTypes;
 }
 
 const getSpecificIcon = (props: any) => ({
@@ -30,7 +39,7 @@ const getSpecificIcon = (props: any) => ({
 
 class IconBase extends React.Component<IconBaseProps, IconBaseState> {
     state = {
-        icon: '',
+        icon: IconTypes.FOLDER,
     };
 
     render() {
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index f47dfa0650..6bf04c4f32 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -14,7 +14,7 @@ import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import * as classnames from "classnames";
 import EmptyState from '../../components/empty-state/empty-state';
-import IconBase from '../../components/icon/icon';
+import IconBase, { IconTypes } from '../../components/icon/icon';
 
 export interface DetailsPanelDataProps {
     onCloseDrawer: () => void;
@@ -50,13 +50,13 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
 						<Grid container alignItems='center' justify='space-around'>
                             {renderHeader}
                             {/* TODO: renderHeader */}
-                            <IconBase icon='process' />
+                            <IconBase icon={IconTypes.PROCESS} />
 							<Typography variant="title">
 								Tutorial pipeline
 							</Typography>
                             {/* End */}
                             <IconButton color="inherit" onClick={onCloseDrawer}>
-                                <IconBase icon='close' />
+                                <IconBase icon={IconTypes.CLOSE} />
 							</IconButton>
 						</Grid>
 					</Typography>
@@ -67,12 +67,12 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
                     {tabsValue === 0 && this.renderTabContainer(
                         <Grid container direction="column">
                             {renderDetails}
-                            <EmptyState icon='announcement' 
+                            <EmptyState icon={IconTypes.ANNOUNCEMENT}
                                 message='Select a file or folder to view its details.' />
                             <Attribute label='Type' value='Process' />
                             <Attribute label='Size' value='---' />
                             <Attribute label="Location">
-                                <IconBase icon='folder' />
+                                <IconBase icon={IconTypes.FOLDER} />
                                 Projects
                             </Attribute>
                             <Attribute label='Outputs' link='http://www.google.pl' value='New output as link' />
@@ -82,7 +82,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
                     {tabsValue === 1 && this.renderTabContainer(
                         <Grid container direction="column">
                             {renderActivity}
-                            <EmptyState icon='announcement' message='Select a file or folder to view its details.' />
+                            <EmptyState icon={IconTypes.ANNOUNCEMENT} message='Select a file or folder to view its details.' />
                         </Grid>
 					)}
                 </Drawer>