create re-usable components: attribute, empty-state and icon, prepare panel for data

[arvados-workbench2.git] / src / views / workbench / workbench.tsx

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 8cc5fc22700571a207395746390d8e778ad4e1f8..8315d5b01d74e80c6f96dc8f4f85b164a9b55303 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -101,8 +101,12 @@ interface WorkbenchState {
         anonymousMenu: NavMenuItem[]
     };
     isDetailsPanelOpened: boolean;
+    detailsPanelHeader: React.ComponentType<{}> | undefined;
+    detailsPanelDetails: React.ComponentType<{}> | undefined;
+    detailsPanelActivity: React.ComponentType<{}> | undefined;
 }
 
+
 class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
     state = {
         anchorEl: null,
@@ -132,7 +136,10 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                 }
             ]
         },
-        isDetailsPanelOpened: false
+        isDetailsPanelOpened: false,
+        detailsPanelHeader: undefined,
+        detailsPanelDetails: undefined,
+        detailsPanelActivity: undefined,
     };
 
     mainAppBarActions: MainAppBarActionProps = {
@@ -202,7 +209,10 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                             <Route path="/projects/:id" render={this.renderProjectPanel} />
                         </Switch>
                     </div>
-                    <DetailsPanel 
+                    <DetailsPanel
+                        renderHeader={this.state.detailsPanelHeader}
+                        renderDetails={this.state.detailsPanelDetails}
+                        renderActivity={this.state.detailsPanelActivity}
                         isOpened={this.state.isDetailsPanelOpened} 
                         onCloseDrawer={this.mainAppBarActions.onDetailsPanelToggle} />
                 </main>