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 152d03697040687d9cee7afe3a715a542a6d3d61..eff4992311135dbad8d3fb04d8c767e6524a7f7a 100644 (file)
--- 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 d797b897645d5d6f708d88c540c03e7e3fe526b5..9013f948bfd3910b46f6542ac649cc96cfc2d7bd 100644 (file)
--- 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}