customize data-explorer, add attrs and modify favorite panel

Feature #13894

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

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 4bd4a2374bd6fb70c25abb0c7203c4a69fe9f610..028cc39d01687f0b800a6cd5a3cb64fc1b19a285 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -12,7 +12,7 @@ import { DataTableFilterItem } from '../data-table-filters/data-table-filters';
 import { SearchInput } from '../search-input/search-input';
 import { ArvadosTheme } from "../../common/custom-theme";
 import { DefaultView } from '../default-view/default-view';
-import { ProjectIcon } from '../icon/icon';
+import { ProjectIcon, IconType } from '../icon/icon';
 
 type CssRules = 'searchBox' | "toolbar" | 'defaultRoot' | 'defaultMessage' | 'defaultIcon';
 
@@ -25,9 +25,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
     defaultRoot: {
         position: 'absolute',
-        width: '100%',
+        width: '80%',
+        left: '50%',
         top: '50%',
-        transform: 'translate(0%, -50%)'
+        transform: 'translate(-50%, -50%)'
     },
     defaultMessage: {
         fontSize: '1.75rem',
@@ -45,6 +46,8 @@ interface DataExplorerDataProps<T> {
     rowsPerPage: number;
     rowsPerPageOptions: number[];
     page: number;
+    defaultIcon: IconType;
+    defaultMessages: string[];
 }
 
 interface DataExplorerActionProps<T> {
@@ -68,7 +71,7 @@ export const DataExplorer = withStyles(styles)(
             const { 
                 columns, onContextMenu, onFiltersChange, onSortToggle, extractKey, 
                 rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch, 
-                items, itemsAvailable, onRowClick, onRowDoubleClick, classes 
+                items, itemsAvailable, onRowClick, onRowDoubleClick, defaultIcon, defaultMessages, classes 
             } = this.props;
             return <div>
                 { items.length > 0 ? (
@@ -110,9 +113,9 @@ export const DataExplorer = withStyles(styles)(
                 ) : (
                     <DefaultView 
                         classRoot={classes.defaultRoot}
-                        icon={ProjectIcon}
+                        icon={defaultIcon}
                         classIcon={classes.defaultIcon}
-                        messages={['Your project is empty. Please create a project', 'or create a collection and upload a data.']}
+                        messages={defaultMessages}
                         classMessage={classes.defaultMessage} />
                 )}
             </div>;

diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx
index f99afecb4cde7823d015d67ee278c14dab870b5b..a48395d4b2d03f83557f4ce46631580c96930689 100644 (file)
--- a/src/views/favorite-panel/favorite-panel.tsx
+++ b/src/views/favorite-panel/favorite-panel.tsx
@@ -18,6 +18,7 @@ import { resourceLabel } from '../../common/labels';
 import { ArvadosTheme } from '../../common/custom-theme';
 import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers';
 import { FAVORITE_PANEL_ID } from "../../store/favorite-panel/favorite-panel-action";
+import { FavoriteIcon } from '../../components/icon/icon';
 
 type CssRules = "toolbar" | "button";
 
@@ -150,7 +151,9 @@ export const FavoritePanel = withStyles(styles)(
                     onRowClick={this.props.onItemClick}
                     onRowDoubleClick={this.props.onItemDoubleClick}
                     onContextMenu={this.props.onContextMenu}
-                    extractKey={(item: FavoritePanelItem) => item.uuid} />
+                    extractKey={(item: FavoritePanelItem) => item.uuid} 
+                    defaultIcon={FavoriteIcon}
+                    defaultMessages={['Your favorites list is empty.']}/>
                 ;
             }
 

diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 991335dd7d08202598f820a88d6c1f4307bbf9e2..9c3ba1b1d2b09b68064cf7c0c5d7c1ecaa16341c 100644 (file)
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -18,7 +18,7 @@ import { resourceLabel } from '../../common/labels';
 import { ArvadosTheme } from '../../common/custom-theme';
 import { renderName, renderStatus, renderType, renderOwner, renderFileSize, renderDate } from '../../views-components/data-explorer/renderers';
 import { restoreBranch } from '../../store/navigation/navigation-action';
-import { relative } from 'path';
+import { ProjectIcon } from '../../components/icon/icon';
 
 type CssRules = 'root' | "toolbar" | "button";
 
@@ -172,7 +172,9 @@ export const ProjectPanel = withStyles(styles)(
                         onRowClick={this.props.onItemClick}
                         onRowDoubleClick={this.props.onItemDoubleClick}
                         onContextMenu={this.props.onContextMenu}
-                        extractKey={(item: ProjectPanelItem) => item.uuid} />
+                        extractKey={(item: ProjectPanelItem) => item.uuid}
+                        defaultIcon={ProjectIcon}
+                        defaultMessages={['Your project is empty. Please create a project', 'or create a collection and upload a data.']} />
                 </div>;
             }
 

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 8377744c1c0a6d0d28f4e9ffaeae24fb41f832d5..92fe9f6732434e5310cb596e9148866df15828c6 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -83,7 +83,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     content: {
         padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
         overflowY: "auto",
-        flexGrow: 1
+        flexGrow: 1,
+        position: 'relative'
     },
     toolbar: theme.mixins.toolbar
 });