Merge branch 'master' of git.curoverse.com:arvados-workbench2 into 14149-change-app...

refs #2
14149

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index f9c18219852fdfce3a5cf0f60a4d874cf56c06f1..b037fcf41b6df2a28183c8b1d3c802765ba26715 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
 import { TreeItem, TreeItemStatus } from '../tree/tree';
 import { FileTreeData } from '../file-tree/file-tree-data';
 import { FileTree } from '../file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
 import { CustomizeTableIcon } from '../icon/icon';
 
 export interface CollectionPanelFilesProps {
@@ -54,7 +54,9 @@ export const CollectionPanelFiles =
                     className={classes.cardSubheader}
                     action={
                         <IconButton onClick={onOptionsMenuOpen}>
-                            <CustomizeTableIcon />
+                            <Tooltip title="More options">
+                                <CustomizeTableIcon />
+                            </Tooltip>
                         </IconButton>
                     } />
                 <Grid container justify="space-between">

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 52ffd2e774fdc5aea5744150121074da7214d69b..58507fb07415c81b06189b93aa4ca714f1947122 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton } from '@material-ui/core';
+import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip } from '@material-ui/core';
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import { ColumnSelector } from "../column-selector/column-selector";
 import { DataTable, DataColumns } from "../data-table/data-table";
@@ -115,7 +115,9 @@ export const DataExplorer = withStyles(styles)(
         renderContextMenuTrigger = (item: T) =>
             <Grid container justify="flex-end">
                 <IconButton onClick={event => this.props.onContextMenu(event, item)}>
-                    <MoreVertIcon />
+                    <Tooltip title="More options">
+                        <MoreVertIcon />
+                    </Tooltip>
                 </IconButton>
             </Grid>
 

diff --git a/src/components/data-table/data-table.tsx b/src/components/data-table/data-table.tsx
index 0b3819ac8072698058185a8c67c82264921eda96..65531a5b5543d1e95a0fb49f22514b96d53f49d8 100644 (file)
--- a/src/components/data-table/data-table.tsx
+++ b/src/components/data-table/data-table.tsx
@@ -31,6 +31,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     },
     content: {
         display: 'inline-block',
+        width: '100%'
     },
     tableBody: {
         background: theme.palette.background.paper

diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index e2d6b26cb4117e913c396e5cb105bbb8dbc7a3e8..9b248e0c8b5f488bae4dca288501df8d724bc2e0 100644 (file)
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -5,7 +5,7 @@
 import * as React from "react";
 import { TreeItem } from "../tree/tree";
 import { ProjectIcon, MoreOptionsIcon, DefaultIcon, CollectionIcon } from "../icon/icon";
-import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles } from "@material-ui/core";
+import { Typography, IconButton, StyleRulesCallback, withStyles, WithStyles, Tooltip } from '@material-ui/core';
 import { formatFileSize } from "~/common/formatters";
 import { ListItemTextIcon } from "../list-item-text-icon/list-item-text-icon";
 import { FileTreeData } from "./file-tree-data";
@@ -50,7 +50,9 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
                 <IconButton
                     className={classes.button}
                     onClick={this.handleClick}>
-                    <MoreOptionsIcon />
+                    <Tooltip title="More options">
+                        <MoreOptionsIcon />
+                    </Tooltip>
                 </IconButton>
             </div >;
         }
@@ -61,7 +63,7 @@ export const FileTreeItem = withStyles(fileTreeItemStyle)(
     });
 
 const getIcon = (item: TreeItem<FileTreeData>) => {
-    switch(item.data.type){
+    switch (item.data.type) {
         case 'directory':
             return ProjectIcon;
         case 'file':

diff --git a/src/components/form-dialog/form-dialog.tsx b/src/components/form-dialog/form-dialog.tsx
index 150dc4b66519da12c402f851934e4df36876b7fb..dd0281322621b5be275a69cccac44644eb6b6983 100644 (file)
--- a/src/components/form-dialog/form-dialog.tsx
+++ b/src/components/form-dialog/form-dialog.tsx
@@ -31,18 +31,20 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
         minWidth: "20px",
     },
     dialogActions: {
-        marginBottom: "24px"
+        marginBottom: theme.spacing.unit * 3
     }
 });
 
-interface DialogProjectProps {
+interface DialogProjectDataProps {
     cancelLabel?: string;
     dialogTitle: string;
     formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
     submitLabel?: string;
 }
 
-export const FormDialog = withStyles(styles)((props: DialogProjectProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>) =>
+type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
+
+export const FormDialog = withStyles(styles)((props: DialogProjectProps) =>
     <Dialog
         open={props.open}
         onClose={props.closeDialog}

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 90861bfed6aca96b1a4fc9e49db749f628e543c0..afc0fed1adbc6c6aba4d4b8096d794d3f7e154fa 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -11,6 +11,7 @@ import Cached from '@material-ui/icons/Cached';
 import CloudUpload from '@material-ui/icons/CloudUpload';
 import Code from '@material-ui/icons/Code';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ImportContacts from '@material-ui/icons/ImportContacts';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import Close from '@material-ui/icons/Close';
 import ContentCopy from '@material-ui/icons/FileCopyOutlined';
@@ -24,9 +25,13 @@ import Help from '@material-ui/icons/Help';
 import Inbox from '@material-ui/icons/Inbox';
 import Info from '@material-ui/icons/Info';
 import Input from '@material-ui/icons/Input';
+import InsertDriveFile from '@material-ui/icons/InsertDriveFile';
+import LastPage from '@material-ui/icons/LastPage';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import Menu from '@material-ui/icons/Menu';
 import MoreVert from '@material-ui/icons/MoreVert';
+import Mail from '@material-ui/icons/Mail';
+import MoveToInbox from '@material-ui/icons/MoveToInbox';
 import Notifications from '@material-ui/icons/Notifications';
 import People from '@material-ui/icons/People';
 import Person from '@material-ui/icons/Person';
@@ -36,8 +41,10 @@ import RateReview from '@material-ui/icons/RateReview';
 import RestoreFromTrash from '@material-ui/icons/History';
 import Search from '@material-ui/icons/Search';
 import SettingsApplications from '@material-ui/icons/SettingsApplications';
+import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
+import HelpOutline from '@material-ui/icons/HelpOutline';
 
 export type IconType = React.SFC<{ className?: string }>;
 
@@ -45,6 +52,7 @@ export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
 export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
 export const BackIcon: IconType = (props) => <ArrowBack {...props} />;
 export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
+export const CommandIcon: IconType = (props) => <LastPage {...props} />;
 export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
 export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
 export const CloseIcon: IconType = (props) => <Close {...props} />;
@@ -54,11 +62,13 @@ 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 InputIcon: IconType = (props) => <InsertDriveFile {...props} />;
+export const LogIcon: IconType = (props) => <SettingsEthernet {...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 OutputIcon: IconType = (props) => <MoveToInbox {...props} />;
 export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
 export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
 export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
@@ -80,3 +90,6 @@ 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} />;
+export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
+export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
+export const MailIcon: IconType = (props) => <Mail {...props} />;

diff --git a/src/views-components/context-menu/action-sets/process-action-set.ts b/src/views-components/context-menu/action-sets/process-action-set.ts
index cc4f8e8fd8732eeb7884b12acccf240dcd387499..2897455bc4f2b2479e55f52c91729ab13cd5b995 100644 (file)
--- a/src/views-components/context-menu/action-sets/process-action-set.ts
+++ b/src/views-components/context-menu/action-sets/process-action-set.ts
@@ -7,7 +7,7 @@ import { ToggleFavoriteAction } from "../actions/favorite-action";
 import { toggleFavorite } from "~/store/favorites/favorites-actions";
 import {
     RenameIcon, ShareIcon, MoveToIcon, CopyIcon, DetailsIcon, ProvenanceGraphIcon,
-    AdvancedIcon, RemoveIcon, ReRunProcessIcon, LogIcon
+    AdvancedIcon, RemoveIcon, ReRunProcessIcon, LogIcon, InputIcon, CommandIcon, OutputIcon
 } from "~/components/icon/icon";
 import { favoritePanelActions } from "~/store/favorite-panel/favorite-panel-action";
 import { navigateToProcessLogs } from '~/store/navigation/navigation-action';
@@ -57,18 +57,21 @@ export const processActionSet: ContextMenuActionSet = [[
         }
     },
     {
+        icon: InputIcon,
         name: "Inputs",
         execute: (dispatch, resource) => {
             // add code
         }
     },
     {
+        icon: OutputIcon,
         name: "Outputs",
         execute: (dispatch, resource) => {
             // add code
         }
     },
     {
+        icon: CommandIcon,
         name: "Command",
         execute: (dispatch, resource) => {
             // add code

diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
new file mode 100644 (file)
index 0000000..de3ed3b
--- /dev/null
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -0,0 +1,75 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { MenuItem, Typography } from "@material-ui/core";
+import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
+import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
+import { ArvadosTheme } from '~/common/custom-theme';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+
+type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    link: {
+        textDecoration: 'none',
+        color: 'inherit',
+        width: '100%',
+        display: 'flex'
+    },
+    icon: {
+        width: '16px',
+        height: '16px'
+    },
+    title: {
+        paddingBottom: theme.spacing.unit * 0.5,
+        paddingLeft: theme.spacing.unit * 2,
+        paddingTop: theme.spacing.unit * 0.5,
+        outline: 'none',
+    },
+    linkTitle: {
+        marginLeft: theme.spacing.unit
+    },
+});
+
+const links = [
+    {
+        title: "Public Pipelines and Data sets",
+        link: "https://dev.arvados.org/projects/arvados/wiki/Public_Pipelines_and_Datasets",
+    },
+    {
+        title: "Tutorials and User guide",
+        link: "http://doc.arvados.org/user/",
+    },
+    {
+        title: "API Reference",
+        link: "http://doc.arvados.org/api/",
+    },
+    {
+        title: "SDK Reference",
+        link: "http://doc.arvados.org/sdk/"
+    },
+];
+
+export const HelpMenu = withStyles(styles)(
+    ({ classes }: WithStyles<CssRules>) =>
+        <DropdownMenu
+            icon={<HelpIcon />}
+            id="help-menu"
+            title="Help">
+            <li className={classes.title}>
+                <Typography variant="body1">Help</Typography>
+            </li>
+            {
+                links.map(link =>
+                    <MenuItem key={link.title}>
+                        <a href={link.link} target="_blank" className={classes.link}>
+                                <ImportContactsIcon className={classes.icon} />
+                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                        </a>
+                    </MenuItem>
+                )
+            }
+        </DropdownMenu>
+);

diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 748151c6c366d30f3ef650eca3d90738d0369b7a..9672f30628de1b3930968588a643a9d844cda57c 100644 (file)
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -81,7 +81,9 @@ export const CollectionPanel = withStyles(styles)(
                                 <IconButton
                                     aria-label="More options"
                                     onClick={this.handleContextMenu}>
-                                    <MoreOptionsIcon />
+                                    <Tooltip title="More options">
+                                        <MoreOptionsIcon />
+                                    </Tooltip>
                                 </IconButton>
                             }
                             title={item && item.name}

diff --git a/src/views/process-log-panel/process-log-main-card.tsx b/src/views/process-log-panel/process-log-main-card.tsx
index 29fd4ae27a24e588c00a2c501b2f02cf2fc3c9b5..66811f47b89209191c7de02d329efa4d2259da49 100644 (file)
--- a/src/views/process-log-panel/process-log-main-card.tsx
+++ b/src/views/process-log-panel/process-log-main-card.tsx
@@ -67,7 +67,9 @@ export const ProcessLogMainCard = withStyles(styles)(
                     action={
                         <div>
                             <IconButton aria-label="More options">
-                                <MoreOptionsIcon />
+                                <Tooltip title="More options">
+                                    <MoreOptionsIcon />
+                                </Tooltip>
                             </IconButton>
                         </div>
                     }

diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index efabe22b01750b5ada922227a38aba649a6dec34..fea94b904341958f2b3edb0a07754a823a97a349 100644 (file)
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -89,7 +89,9 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                         <IconButton
                             aria-label="More options"
                             onClick={event => onContextMenu(event)}>
-                            <MoreOptionsIcon />
+                            <Tooltip title="More options">
+                                <MoreOptionsIcon />
+                            </Tooltip>
                         </IconButton>
                     </div>
                 }

diff --git a/src/views/process-panel/process-subprocesses-card.tsx b/src/views/process-panel/process-subprocesses-card.tsx
index 8f6ccbc2b6259a104610e7732426bfbec87a2c3e..4226fefc8cb9bca9fe1e153cddb3a43194dc793b 100644 (file)
--- a/src/views/process-panel/process-subprocesses-card.tsx
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@ -14,7 +14,7 @@ import { Process, getProcessStatus, getProcessRuntime } from '~/store/processes/
 import { formatTime } from '~/common/formatters';
 import { getProcessStatusColor } from '~/store/processes/process';
 
-export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'| 'header';
+export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader' | 'header';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     label: {
@@ -87,7 +87,9 @@ export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
                             className={classes.options}
                             aria-label="More options"
                             onClick={onContextMenu}>
-                            <MoreOptionsIcon />
+                            <Tooltip title="More options">
+                                <MoreOptionsIcon />
+                            </Tooltip>
                         </IconButton>
                     </div>
                 }

diff --git a/src/views/trash-panel/trash-panel.tsx b/src/views/trash-panel/trash-panel.tsx
index 23927aed2997870a53ba3faccd030359112b25b1..4a1e197d540dc059a8cfe15c6d642c218a308a0d 100644 (file)
--- a/src/views/trash-panel/trash-panel.tsx
+++ b/src/views/trash-panel/trash-panel.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { IconButton, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { IconButton, StyleRulesCallback, WithStyles, withStyles, Tooltip } from '@material-ui/core';
 import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
 import { connect, DispatchProp } from 'react-redux';
 import { DataColumns } from '~/components/data-table/data-table';
@@ -73,7 +73,9 @@ export const ResourceRestore =
                 ));
             }
         }}>
-            <RestoreFromTrashIcon />
+            <Tooltip title="Restore">
+                <RestoreFromTrashIcon />
+            </Tooltip>
         </IconButton>
     );
 
@@ -84,7 +86,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: true,
         sortDirection: SortDirection.ASC,
         filters: [],
-        render: uuid => <ResourceName uuid={uuid}/>
+        render: uuid => <ResourceName uuid={uuid} />
     },
     {
         name: TrashPanelColumnNames.TYPE,
@@ -108,7 +110,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
                 type: ResourceKind.PROJECT
             }
         ],
-        render: uuid => <ResourceType uuid={uuid}/>,
+        render: uuid => <ResourceType uuid={uuid} />,
     },
     {
         name: TrashPanelColumnNames.FILE_SIZE,
@@ -140,7 +142,7 @@ export const trashPanelColumns: DataColumns<string, TrashPanelFilter> = [
         configurable: false,
         sortDirection: SortDirection.NONE,
         filters: [],
-        render: uuid => <ResourceRestore uuid={uuid}/>
+        render: uuid => <ResourceRestore uuid={uuid} />
     }
 ];
 
@@ -165,7 +167,7 @@ export const TrashPanel = withStyles(styles)(
                         onRowDoubleClick={this.handleRowDoubleClick}
                         onContextMenu={this.handleContextMenu}
                         contextMenuColumn={false}
-                        dataTableDefaultView={<DataTableDefaultView icon={TrashIcon}/>} />
+                        dataTableDefaultView={<DataTableDefaultView icon={TrashIcon} />} />
                     : <PanelDefaultView
                         icon={TrashIcon}
                         messages={['Your trash list is empty.']} />;