From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Mon, 25 Jun 2018 14:10:11 +0000 (+0200)
Subject: Reuse DataColumns type
X-Git-Tag: 1.2.0~63^2~10
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/616395646c46f90c46ad97bd9a335ab326e5a040

Reuse DataColumns type

Feature #13678

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

diff --git a/src/components/column-selector/column-selector.test.tsx b/src/components/column-selector/column-selector.test.tsx
index b6c544fb..c2835ad7 100644
--- a/src/components/column-selector/column-selector.test.tsx
+++ b/src/components/column-selector/column-selector.test.tsx
@@ -6,14 +6,14 @@ import * as React from "react";
 import { mount, configure } from "enzyme";
 import * as Adapter from "enzyme-adapter-react-16";
 import ColumnSelector, { ColumnSelectorProps, ColumnSelectorTrigger } from "./column-selector";
-import { DataColumn } from "../data-table/data-column";
 import { ListItem, Checkbox } from "@material-ui/core";
+import { DataColumns } from "../data-table/data-table";
 
 configure({ adapter: new Adapter() });
 
 describe("<ColumnSelector />", () => {
     it("shows only configurable columns", () => {
-        const columns: Array<DataColumn<void>> = [
+        const columns: DataColumns<void> = [
             {
                 name: "Column 1",
                 render: () => <span />,
@@ -38,7 +38,7 @@ describe("<ColumnSelector />", () => {
     });
 
     it("renders checked checkboxes next to selected columns", () => {
-        const columns: Array<DataColumn<void>> = [
+        const columns: DataColumns<void> = [
             {
                 name: "Column 1",
                 render: () => <span />,
@@ -63,7 +63,7 @@ describe("<ColumnSelector />", () => {
     });
 
     it("calls onColumnToggle with clicked column", () => {
-        const columns: Array<DataColumn<void>> = [
+        const columns: DataColumns<void> = [
             {
                 name: "Column 1",
                 render: () => <span />,
diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index e2286b00..b5dd43b8 100644
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -8,9 +8,10 @@ import MenuIcon from "@material-ui/icons/Menu";
 import { DataColumn, isColumnConfigurable } from '../data-table/data-column';
 import Popover from "../popover/popover";
 import { IconButtonProps } from '@material-ui/core/IconButton';
+import { DataColumns } from '../data-table/data-table';
 
 export interface ColumnSelectorProps {
-    columns: Array<DataColumn<any>>;
+    columns: DataColumns<any>;
     onColumnToggle: (column: DataColumn<any>) => void;
 }
 
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 6a3103b1..7ae66358 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -7,15 +7,15 @@ import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, Theme, WithStyles
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import ContextMenu, { ContextMenuActionGroup, ContextMenuAction } from "../../components/context-menu/context-menu";
 import ColumnSelector from "../../components/column-selector/column-selector";
-import DataTable from "../../components/data-table/data-table";
+import DataTable, { DataColumns } from "../../components/data-table/data-table";
 import { mockAnchorFromMouseEvent } from "../../components/popover/helpers";
-import { DataColumn, toggleSortDirection } from "../../components/data-table/data-column";
+import { DataColumn } from "../../components/data-table/data-column";
 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
 import SearchInput from '../search-input/search-input';
 
 interface DataExplorerProps<T> {
     items: T[];
-    columns: Array<DataColumn<T>>;
+    columns: DataColumns<T>;
     contextActions: ContextMenuActionGroup[];
     searchValue: string;
     rowsPerPage: number;
diff --git a/src/components/data-table/data-table.test.tsx b/src/components/data-table/data-table.test.tsx
index 439e6c27..77979af6 100644
--- a/src/components/data-table/data-table.test.tsx
+++ b/src/components/data-table/data-table.test.tsx
@@ -6,15 +6,14 @@ import * as React from "react";
 import { mount, configure } from "enzyme";
 import { TableHead, TableCell, Typography, TableBody, Button, TableSortLabel } from "@material-ui/core";
 import * as Adapter from "enzyme-adapter-react-16";
-import DataTable from "./data-table";
-import { DataColumn } from "./data-column";
+import DataTable, { DataColumns } from "./data-table";
 import DataTableFilters from "../data-table-filters/data-table-filters";
 
 configure({ adapter: new Adapter() });
 
 describe("<DataTable />", () => {
     it("shows only selected columns", () => {
-        const columns: Array<DataColumn<string>> = [
+        const columns: DataColumns<string> = [
             {
                 name: "Column 1",
                 render: () => <span />,
@@ -42,7 +41,7 @@ describe("<DataTable />", () => {
     });
 
     it("renders column name", () => {
-        const columns: Array<DataColumn<string>> = [
+        const columns: DataColumns<string> = [
             {
                 name: "Column 1",
                 render: () => <span />,
@@ -60,7 +59,7 @@ describe("<DataTable />", () => {
     });
 
     it("uses renderHeader instead of name prop", () => {
-        const columns: Array<DataColumn<string>> = [
+        const columns: DataColumns<string> = [
             {
                 name: "Column 1",
                 renderHeader: () => <span>Column Header</span>,
@@ -79,7 +78,7 @@ describe("<DataTable />", () => {
     });
 
     it("passes column key prop to corresponding cells", () => {
-        const columns: Array<DataColumn<string>> = [
+        const columns: DataColumns<string> = [
             {
                 name: "Column 1",
                 key: "column-1-key",
@@ -99,7 +98,7 @@ describe("<DataTable />", () => {
     });
 
     it("shows information that items array is empty", () => {
-        const columns: Array<DataColumn<string>> = [
+        const columns: DataColumns<string> = [
             {
                 name: "Column 1",
                 render: () => <span />,
@@ -117,7 +116,7 @@ describe("<DataTable />", () => {
     });
 
     it("renders items", () => {
-        const columns: Array<DataColumn<string>> = [
+        const columns: DataColumns<string> = [
             {
                 name: "Column 1",
                 render: (item) => <Typography>{item}</Typography>,
@@ -141,7 +140,7 @@ describe("<DataTable />", () => {
     });
 
     it("passes sorting props to <TableSortLabel />", () => {
-        const columns: Array<DataColumn<string>> = [{
+        const columns: DataColumns<string> = [{
             name: "Column 1",
             sortDirection: "asc",
             selected: true,
@@ -161,7 +160,7 @@ describe("<DataTable />", () => {
     });
 
     it("passes filter props to <DataTableFilter />", () => {
-        const columns: Array<DataColumn<string>> = [{
+        const columns: DataColumns<string> = [{
             name: "Column 1",
             sortDirection: "asc",
             selected: true,
diff --git a/src/store/data-explorer/data-explorer-action.ts b/src/store/data-explorer/data-explorer-action.ts
index 70359991..c4ff6145 100644
--- a/src/store/data-explorer/data-explorer-action.ts
+++ b/src/store/data-explorer/data-explorer-action.ts
@@ -5,11 +5,12 @@
 import { default as unionize, ofType, UnionOf } from "unionize";
 import { SortDirection, DataColumn } from "../../components/data-table/data-column";
 import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters";
+import { DataColumns } from "../../components/data-table/data-table";
 
 type WithId<T> = T & { id: string };
 
 const actions = unionize({
-    SET_COLUMNS: ofType<WithId<{ columns: Array<DataColumn<any>> }>>(),
+    SET_COLUMNS: ofType<WithId<{ columns: DataColumns<any> }>>(),
     SET_FILTERS: ofType<WithId<{columnName: string, filters: DataTableFilterItem[]}>>(),
     SET_ITEMS: ofType<WithId<{items: any[]}>>(),
     SET_PAGE: ofType<WithId<{page: number}>>(),
diff --git a/src/store/data-explorer/data-explorer-reducer.test.tsx b/src/store/data-explorer/data-explorer-reducer.test.tsx
index 2a9e56ce..0eb3c321 100644
--- a/src/store/data-explorer/data-explorer-reducer.test.tsx
+++ b/src/store/data-explorer/data-explorer-reducer.test.tsx
@@ -4,12 +4,12 @@
 
 import dataExplorerReducer, { initialDataExplorer } from "./data-explorer-reducer";
 import actions from "./data-explorer-action";
-import { DataColumn } from "../../components/data-table/data-column";
 import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters";
+import { DataColumns } from "../../components/data-table/data-table";
 
 describe('data-explorer-reducer', () => {
     it('should set columns', () => {
-        const columns: Array<DataColumn<any>> = [{
+        const columns: DataColumns<any> = [{
             name: "Column 1",
             render: jest.fn(),
             selected: true
@@ -20,7 +20,7 @@ describe('data-explorer-reducer', () => {
     });
 
     it('should toggle sorting', () => {
-        const columns: Array<DataColumn<any>> = [{
+        const columns: DataColumns<any> = [{
             name: "Column 1",
             render: jest.fn(),
             selected: true,
@@ -38,7 +38,7 @@ describe('data-explorer-reducer', () => {
     });
 
     it('should set filters', () => {
-        const columns: Array<DataColumn<any>> = [{
+        const columns: DataColumns<any> = [{
             name: "Column 1",
             render: jest.fn(),
             selected: true,
diff --git a/src/store/data-explorer/data-explorer-reducer.ts b/src/store/data-explorer/data-explorer-reducer.ts
index 1b1c36b7..0069085b 100644
--- a/src/store/data-explorer/data-explorer-reducer.ts
+++ b/src/store/data-explorer/data-explorer-reducer.ts
@@ -5,9 +5,10 @@
 import { DataColumn, toggleSortDirection, resetSortDirection } from "../../components/data-table/data-column";
 import actions, { DataExplorerAction } from "./data-explorer-action";
 import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters";
+import { DataColumns } from "../../components/data-table/data-table";
 
 interface DataExplorer {
-    columns: Array<DataColumn<any>>;
+    columns: DataColumns<any>;
     items: any[];
     page: number;
     rowsPerPage: number;
@@ -58,7 +59,7 @@ export const getDataExplorer = (state: DataExplorerState, id: string) =>
 const update = (state: DataExplorerState, id: string, updateFn: (dataExplorer: DataExplorer) => DataExplorer) =>
     ({ ...state, [id]: updateFn(getDataExplorer(state, id)) });
 
-const setColumns = (columns: Array<DataColumn<any>>) =>
+const setColumns = (columns: DataColumns<any>) =>
     (dataExplorer: DataExplorer) =>
         ({ ...dataExplorer, columns });
 
diff --git a/src/views-components/project-explorer/project-explorer.tsx b/src/views-components/project-explorer/project-explorer.tsx
index 7fff08a3..c4d40e8a 100644
--- a/src/views-components/project-explorer/project-explorer.tsx
+++ b/src/views-components/project-explorer/project-explorer.tsx
@@ -7,11 +7,12 @@ import { ProjectExplorerItem } from './project-explorer-item';
 import { Grid, Typography } from '@material-ui/core';
 import { formatDate, formatFileSize } from '../../common/formatters';
 import DataExplorer from '../data-explorer/data-explorer';
-import { DataColumn, toggleSortDirection, resetSortDirection } from '../../components/data-table/data-column';
+import { DataColumn } from '../../components/data-table/data-column';
 import { DataTableFilterItem } from '../../components/data-table-filters/data-table-filters';
 import { ContextMenuAction } from '../../components/context-menu/context-menu';
 import { DispatchProp, connect } from 'react-redux';
 import actions from "../../store/data-explorer/data-explorer-action";
+import { DataColumns } from '../../components/data-table/data-table';
 
 export const PROJECT_EXPLORER_ID = "projectExplorer";
 class ProjectExplorer extends React.Component<DispatchProp> {
@@ -139,7 +140,7 @@ const renderStatus = (item: ProjectExplorerItem) =>
         {item.status || "-"}
     </Typography>;
 
-const columns: Array<DataColumn<ProjectExplorerItem>> = [{
+const columns: DataColumns<ProjectExplorerItem> = [{
     name: "Name",
     selected: true,
     sortDirection: "asc",