Merge pull request #163 from blackjackkent/development

Production deployment v1.4.1

Author: blackjackkent

src/display/shared/columns/threads/LastPoster.js

@@ -2,6 +2,8 @@
 import React from 'react';
 import columns from '../../../../infrastructure/constants/columns';
 
+const stopPropagation = (e) => e.stopPropagation();
+
 export default (lastPosters, includeFilter) => ({
 	Header: columns.LAST_POSTER.name,
 	accessor: columns.LAST_POSTER.key,
@@ -12,6 +14,7 @@ export default (lastPosters, includeFilter) => ({
 					target="_blank"
 					rel="noopener noreferrer"
 					href={row.original.status && row.original.status.lastPostUrl}
+					onClick={stopPropagation}
 				>
 					{row.value} <i className="fas fa-external-link-alt" />
 				</a>

src/display/views/help/components/AboutTrackerPane.js

@@ -75,7 +75,6 @@ const AboutTrackerPane = () => (
 							<strong>Megabyte Tier ($10 a month)</strong>
 						</p>
 						<ul>
-							<li>Carla Page</li>
 							<li>Insolitus-Academy</li>
 							<li>girl-next-door-writes</li>
 							<li>Jess</li>

src/display/views/help/components/__tests__/__snapshots__/AboutTrackerPane.spec.js.snap

@@ -166,9 +166,6 @@ exports[`rendering snapshots should render valid snapshot 1`] = `
             </strong>
           </p>
           <ul>
-            <li>
-              Carla Page
-            </li>
             <li>
               Insolitus-Academy
             </li>

src/display/views/threads/components/CheckboxTable.js

@@ -29,6 +29,7 @@ class CheckboxTable extends React.Component {
 		};
 		this.toggleSelection = this.toggleSelection.bind(this);
 		this.getTrProps = this.getTrProps.bind(this);
+		this.getTdProps = this.getTdProps.bind(this);
 		this.toggleAll = this.toggleAll.bind(this);
 		this.isSelected = this.isSelected.bind(this);
 		this.clearSelection = this.clearSelection.bind(this);
@@ -54,6 +55,17 @@ class CheckboxTable extends React.Component {
 		return {};
 	}
 
+	getTdProps(state, rowInfo, column, instance) {
+		const { getTdProps } = this.props;
+		return getTdProps(state, rowInfo, column, instance, () => {
+			if (rowInfo) {
+				const row = rowInfo.original;
+				// eslint-disable-next-line no-underscore-dangle
+				this.toggleSelection(`select-${row._id}`, false, row);
+			}
+		});
+	}
+
 	toggleSelection(key, shift, row) {
 		let { selection } = this.state;
 		const { data, onSelectionChanged } = this.props;
@@ -115,7 +127,6 @@ class CheckboxTable extends React.Component {
 			noDataText,
 			defaultFilterMethod,
 			SubComponent,
-			getTdProps,
 			defaultSorted,
 			defaultPageSize,
 			onPageSizeChange
@@ -141,8 +152,8 @@ class CheckboxTable extends React.Component {
 					defaultPageSize={defaultPageSize}
 					onPageSizeChange={onPageSizeChange}
 					columns={columns}
-					getTdProps={getTdProps}
 					getTrProps={this.getTrProps}
+					getTdProps={this.getTdProps}
 					defaultSorted={defaultSorted}
 					defaultFilterMethod={defaultFilterMethod}
 					showPaginationTop

src/display/views/threads/components/__tests__/CheckboxTable.spec.js

@@ -81,7 +81,7 @@ describe('behavior', () => {
 				}
 			]);
 		});
-		it('should trigger onSelectionChanged when item is added', () => {
+		it('should trigger onSelectionChanged when item is removed', () => {
 			const onSelectionChanged = jest.fn();
 			const props = createTestProps({
 				onSelectionChanged
@@ -130,6 +130,44 @@ describe('behavior', () => {
 			element.update();
 			expect(element.find('RTSelectTable').props().selectAll).toBe(true);
 		});
+		it('should support toggling selection from td props, to allow clicking empty space on the row to select it', () => {
+			const onSelectionChanged = jest.fn();
+			const props = createTestProps({
+				onSelectionChanged,
+				getTdProps: jest.fn(() => ({}))
+			});
+			const state = {};
+			const rowInfo = { original: props.data[0] };
+			const column = {};
+			const instance = {};
+			const jsx = <CheckboxTable {...props} />;
+			const element = shallow(jsx);
+			element.instance().getTdProps(state, rowInfo, column, instance);
+			expect(props.getTdProps).toBeCalledWith(
+				state,
+				rowInfo,
+				column,
+				instance,
+				expect.any(Function)
+			);
+			const toggleSelectionCallback = props.getTdProps.mock.calls[0][4];
+			toggleSelectionCallback();
+			expect(onSelectionChanged).toHaveBeenCalledTimes(1);
+			expect(onSelectionChanged).toHaveBeenLastCalledWith([{ _id: 1, testProp: 'test1' }]);
+		});
+		it('should color selected rows', () => {
+			const props = createTestProps({
+				getTdProps: jest.fn(() => ({}))
+			});
+			const rowInfo = { original: props.data[0] };
+			const jsx = <CheckboxTable {...props} />;
+			const element = shallow(jsx);
+			element.instance().getTdProps({}, rowInfo, {}, {});
+			const toggleSelectionCallback = props.getTdProps.mock.calls[0][4];
+			toggleSelectionCallback();
+			const trProps = element.instance().getTrProps({}, rowInfo);
+			expect(typeof trProps.style.backgroundColor).toBe('string');
+		});
 		it('should set select-all checkbox checked when selected items length equals row length', () => {});
 	});
 	describe('toggleAll', () => {
@@ -186,7 +224,7 @@ describe('behavior', () => {
 			const isSelected = element.instance().isSelected(1);
 			expect(isSelected).toBe(true);
 		});
-		it('should return true if item is not selected', () => {
+		it('should return false if item is not selected', () => {
 			const props = createTestProps();
 			const jsx = <CheckboxTable {...props} />;
 			const element = mount(jsx);

src/display/views/threads/components/__tests__/_getTdProps.spec.js

@@ -91,6 +91,32 @@ describe('behavior', () => {
 			});
 		});
 	});
+	describe('row selection', () => {
+		it('should not toggle row selection if onClick handled the action', () => {
+			const clickedColumn = { id: 'editButton' };
+			const toggleSelection = jest.fn();
+			const propsCreator = _getTdProps(jest.fn(), jest.fn(), jest.fn(), jest.fn());
+			const props = propsCreator({}, { original: {} }, clickedColumn, {}, toggleSelection);
+			props.onClick({}, jest.fn());
+			expect(toggleSelection).not.toBeCalled();
+		});
+		it('should toggle row selection if onClick did not handle the action', () => {
+			const clickedColumn = { id: 'unrecognized' };
+			const toggleSelection = jest.fn();
+			const propsCreator = _getTdProps(jest.fn(), jest.fn(), jest.fn(), jest.fn());
+			const props = propsCreator({}, { original: {} }, clickedColumn, {}, toggleSelection);
+			props.onClick({}, jest.fn());
+			expect(toggleSelection).toBeCalled();
+		});
+		it('should not toggle row selection if onClick did not handle the action and the column is an Expander', () => {
+			const clickedColumn = { id: 'unrecognized', Expander: jest.fn() };
+			const toggleSelection = jest.fn();
+			const propsCreator = _getTdProps(jest.fn(), jest.fn(), jest.fn(), jest.fn());
+			const props = propsCreator({}, { original: {} }, clickedColumn, {}, toggleSelection);
+			props.onClick({}, jest.fn());
+			expect(toggleSelection).not.toBeCalled();
+		});
+	});
 	describe('handleOriginal', () => {
 		it('should fall back to handleOriginal in other cases', () => {
 			const clickedColumn = {
@@ -105,7 +131,7 @@ describe('behavior', () => {
 			};
 			const handleOriginal = jest.fn();
 			const propsCreator = _getTdProps(jest.fn(), jest.fn(), jest.fn(), jest.fn());
-			const props = propsCreator({}, clickedRow, clickedColumn);
+			const props = propsCreator({}, clickedRow, clickedColumn, {}, jest.fn());
 			props.onClick({}, handleOriginal);
 			expect(handleOriginal).toHaveBeenCalledTimes(1);
 		});
@@ -121,7 +147,7 @@ describe('behavior', () => {
 				}
 			};
 			const propsCreator = _getTdProps(jest.fn(), jest.fn(), jest.fn(), jest.fn());
-			const props = propsCreator({}, clickedRow, clickedColumn);
+			const props = propsCreator({}, clickedRow, clickedColumn, {}, jest.fn());
 			props.onClick({}, null);
 			expect(true).toBe(true);
 		});

src/display/views/threads/components/_getTdProps.js

@@ -1,7 +1,7 @@
 import columns from '../../../../infrastructure/constants/columns';
 
 const getTdProps = (onDeleteTrigger, onEditTrigger, onArchiveTrigger, onQueueTrigger) => {
-	const generateTdProps = (state, row, column) => ({
+	const generateTdProps = (state, row, column, _instance, toggleSelection) => ({
 		onClick: (e, handleOriginal) => {
 			if (column.id === columns.DELETE_BUTTON.key) {
 				onDeleteTrigger(row.original.thread);
@@ -19,6 +19,15 @@ const getTdProps = (onDeleteTrigger, onEditTrigger, onArchiveTrigger, onQueueTri
 				onQueueTrigger(row.original.thread);
 				return;
 			}
+
+			// there's a bug in react-table where triggering selection state change
+			// undoes expansion. this manifests as the expand button not doing anything
+			// when clicked. we can workaround because we don't selection to happen
+			// on expansion anyway
+			if (!column.Expander) {
+				toggleSelection();
+			}
+
 			if (handleOriginal) {
 				handleOriginal();
 			}