21386: added case for initial project view before loading Arvados-DCO-1.1-Signed...

[arvados.git] / services / workbench2 / src / views / project-panel / project-panel.tsx

diff --git a/services/workbench2/src/views/project-panel/project-panel.tsx b/services/workbench2/src/views/project-panel/project-panel.tsx
index 83b6c8ba47472b2fa230ebf6afe8d5e8af1b61a5..148a477bf30696b5675359af9197b0b21b664c20 100644 (file)
--- a/services/workbench2/src/views/project-panel/project-panel.tsx
+++ b/services/workbench2/src/views/project-panel/project-panel.tsx
@@ -51,10 +51,9 @@ import { GroupClass, GroupResource } from 'models/group';
 import { CollectionResource } from 'models/collection';
 import { resourceIsFrozen } from 'common/frozen-resources';
 import { ProjectResource } from 'models/project';
-import { NotFoundView } from 'views/not-found-panel/not-found-panel';
 import { deselectAllOthers, toggleOne } from 'store/multiselect/multiselect-actions';
 
-type CssRules = 'root' | 'button';
+type CssRules = 'root' | 'button' | 'loader' | 'notFoundView';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
@@ -63,6 +62,18 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     button: {
         marginLeft: theme.spacing.unit,
     },
+    loader: {
+        top: "25%",
+        left: "46.5%",
+        marginLeft: "-84px",
+        position: "absolute",
+    },
+    notFoundView: {
+        top: "30%",
+        left: "50%",
+        marginLeft: "-84px",
+        position: "absolute",
+    },
 });
 
 export enum ProjectPanelColumnNames {
@@ -244,6 +255,8 @@ interface ProjectPanelDataProps {
     isAdmin: boolean;
     userUuid: string;
     dataExplorerItems: any;
+    working: boolean;
+    isNotFound: boolean;
 }
 
 type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles<CssRules> & RouteComponentProps<{ id: string }>;
@@ -251,9 +264,11 @@ type ProjectPanelProps = ProjectPanelDataProps & DispatchProp & WithStyles<CssRu
 const mapStateToProps = (state: RootState) => {
     const currentItemId = getProperty<string>(PROJECT_PANEL_CURRENT_UUID)(state.properties);
     const project = getResource<GroupResource>(currentItemId || "")(state.resources);
+    const isNotFound = state.dataExplorer[PROJECT_PANEL_ID] ? state.dataExplorer[PROJECT_PANEL_ID].isNotFound : false;
     return {
         currentItemId,
         project,
+        isNotFound,
         resources: state.resources,
         userUuid: state.auth.user!.uuid,
     };
@@ -262,26 +277,21 @@ const mapStateToProps = (state: RootState) => {
 export const ProjectPanel = withStyles(styles)(
     connect(mapStateToProps)(
         class extends React.Component<ProjectPanelProps> {
+
             render() {
                 const { classes } = this.props;
-
-                return this.props.project ?
-                    <div data-cy='project-panel' className={classes.root}>
-                        <DataExplorer
-                            id={PROJECT_PANEL_ID}
-                            onRowClick={this.handleRowClick}
-                            onRowDoubleClick={this.handleRowDoubleClick}
-                            onContextMenu={this.handleContextMenu}
-                            contextMenuColumn={true}
-                            defaultViewIcon={ProjectIcon}
-                            defaultViewMessages={DEFAULT_VIEW_MESSAGES}
-                        />
-                    </div>
-                    :
-                    <NotFoundView
-                        icon={ProjectIcon}
-                        messages={["Project not found"]}
+                return <div data-cy='project-panel' className={classes.root}>
+                    <DataExplorer
+                        id={PROJECT_PANEL_ID}
+                        onRowClick={this.handleRowClick}
+                        onRowDoubleClick={this.handleRowDoubleClick}
+                        onContextMenu={this.handleContextMenu}
+                        contextMenuColumn={true}
+                        defaultViewIcon={ProjectIcon}
+                        defaultViewMessages={DEFAULT_VIEW_MESSAGES}
+                        isNotFound={this.props.isNotFound}
                     />
+                </div>
             }
 
             isCurrentItemChild = (resource: Resource) => {