merge changes

Feature #13765

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@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 13498f331776a43bf99d8b290f14255b5684fd05..b29e19027fb7a6bcaff3fe517f092a98683d426f 100644 (file)
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -15,13 +15,13 @@ import Grid from '@material-ui/core/Grid';
 import * as classnames from "classnames";
 import { connect, Dispatch } from 'react-redux';
 import EmptyState from '../../components/empty-state/empty-state';
-import IconBase from '../../components/icon/icon';
 import { RootState } from '../../store/store';
 import actions from "../../store/details-panel/details-panel-action";
 import { Resource } from '../../common/api/common-resource-service';
 import { ResourceKind } from '../../models/kinds';
 import { ProjectResource } from '../../models/project';
 import { CollectionResource } from '../../models/collection';
+import IconBase, { IconTypes } from '../../components/icon/icon';
 
 export interface DetailsPanelDataProps {
     onCloseDrawer: () => void;
@@ -57,7 +57,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
                         <Grid container alignItems='center' justify='space-around'>
                             {header}
                             <IconButton color="inherit" onClick={onCloseDrawer}>
-                                <IconBase icon='close' />
+                                <IconBase icon={IconTypes.CLOSE} />
                             </IconButton>
                         </Grid>
                     </Typography>
@@ -68,12 +68,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' />
@@ -83,7 +83,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>
@@ -126,7 +126,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 const renderCollectionHeader = (collection: CollectionResource) =>
     <>
-        <IconBase icon="collection" />
+        <IconBase icon={IconTypes.COLLECTION} />
         <Typography variant="title">
             {collection.name}
         </Typography>
@@ -134,7 +134,7 @@ const renderCollectionHeader = (collection: CollectionResource) =>
 
 const renderProjectHeader = (project: ProjectResource) =>
     <>
-        <IconBase icon="project" />
+        <IconBase icon={IconTypes.FOLDER} />
         <Typography variant="title">
             {project.name}
         </Typography>