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 b048e3278530d59e855bb85002c7850f6067ef6d..205053b5ce7f738a1ba2b1627c5d4fb7b86b1c4b 100644 (file)
--- 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 3682b7752072d0fb6703800f64494616e3967323..c420a19c8d46397caa1934908528e5127e149b32 100644 (file)
--- 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 f47dfa06501ab6aea931d31b51fa1c7872e36a6e..6bf04c4f3263681050bc91defdbcbeda2216642c 100644 (file)
--- 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>