From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 22 Jun 2018 12:14:22 +0000 (+0200)
Subject: Hide search input and column selector when there is no items
X-Git-Tag: 1.2.0~69^2~2
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/cc9505ee86539329d5ae0c4809aa293c54c2a25c

Hide search input and column selector when there is no items

Feature #13633

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

diff --git a/src/components/data-explorer/data-explorer.test.tsx b/src/components/data-explorer/data-explorer.test.tsx
index 152d0369..eff49923 100644
--- a/src/components/data-explorer/data-explorer.test.tsx
+++ b/src/components/data-explorer/data-explorer.test.tsx
@@ -37,6 +37,7 @@ describe("<DataExplorer />", () => {
         const onSearch = jest.fn();
         const dataExplorer = mount(<DataExplorer
             {...mockDataExplorerProps()}
+            items={["item 1"]}
             searchValue="search value"
             onSearch={onSearch} />);
         expect(dataExplorer.find(SearchInput).prop("value")).toEqual("search value");
@@ -81,14 +82,14 @@ describe("<DataExplorer />", () => {
         expect(onRowClick).toHaveBeenCalledWith("rowClick");
     });
 
-    it("renders <TablePagination/> if items list is not empty", () => {
-        const onChangePage = jest.fn();
-        const onChangeRowsPerPage = jest.fn();
+    it("does not render <SearchInput/>, <ColumnSelector/> and <TablePagination/> if there is no items", () => {
         const dataExplorer = mount(<DataExplorer
             {...mockDataExplorerProps()}
-            items={["Item 1"]}
+            items={[]}
         />);
-        expect(dataExplorer.find(TablePagination)).toHaveLength(1);
+        expect(dataExplorer.find(SearchInput)).toHaveLength(0);
+        expect(dataExplorer.find(ColumnSelector)).toHaveLength(0);
+        expect(dataExplorer.find(TablePagination)).toHaveLength(0);
     });
 
     it("communicates with <TablePagination/>", () => {
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index d797b897..9013f948 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -49,16 +49,18 @@ class DataExplorer<T> extends React.Component<DataExplorerProps<T> & WithStyles<
                 onActionClick={this.callAction}
                 onClose={this.closeContextMenu} />
             <Toolbar className={this.props.classes.toolbar}>
-                <Grid container justify="space-between" wrap="nowrap" alignItems="center">
-                    <div className={this.props.classes.searchBox}>
-                        <SearchInput
-                            value={this.props.searchValue}
-                            onSearch={this.props.onSearch} />
-                    </div>
-                    <ColumnSelector
-                        columns={this.props.columns}
-                        onColumnToggle={this.props.onColumnToggle} />
-                </Grid>
+                {this.props.items.length > 0 &&
+                    <Grid container justify="space-between" wrap="nowrap" alignItems="center">
+                        <div className={this.props.classes.searchBox}>
+                            <SearchInput
+                                value={this.props.searchValue}
+                                onSearch={this.props.onSearch} />
+                        </div>
+                        <ColumnSelector
+                            columns={this.props.columns}
+                            onColumnToggle={this.props.onColumnToggle} />
+                    </Grid>}
+
             </Toolbar>
             <DataTable
                 columns={this.props.columns}