Query Node Editor higher-order component (#71)

* Rename QueryNodeModal -> QueryNodeEditor, refactor interface as HOC * Adapt tests * Clean up
ingef · Mar 8, 2018 · d33f48e · d33f48e
1 parent 4f1e395
commit d33f48e
Show file tree

Hide file tree

Showing 33 changed files with 422 additions and 600 deletions.
diff --git a/frontend/lib/js/app/reducers.js b/frontend/lib/js/app/reducers.js
@@ -39,7 +39,7 @@ import { buildExternalFormsReducer }           from '../external-forms';
 import { reducer as uploadConceptListModal }   from '../upload-concept-list-modal';
 
 import { createQueryRunnerReducer }            from '../query-runner';
-import { createQueryNodeModalReducer }         from '../query-node-modal';
+import { createQueryNodeEditorReducer }        from '../query-node-editor';
 
 export type StateType = {
   categoryTrees: CategoryTreesStateType,
@@ -55,7 +55,7 @@ const buildAppReducer = (availableForms) => combineReducers({
   uploadConceptListModal,
   standardQueryRunner: createQueryRunnerReducer('standard'),
   timebasedQueryRunner: createQueryRunnerReducer('timebased'),
-  queryNodeModal: createQueryNodeModalReducer('standard'),
+  queryNodeEditor: createQueryNodeEditorReducer('standard'),
   queryGroupModal,
   datasets,
   tooltip,

diff --git a/frontend/lib/js/external-forms/common/FormConceptNode.js b/frontend/lib/js/external-forms/common/FormConceptNode.js
diff --git a/frontend/lib/js/external-forms/common/FormQueryNodeModal.js b/frontend/lib/js/external-forms/common/FormQueryNodeModal.js
diff --git a/frontend/lib/js/form-components/InputMultiSelect.js b/frontend/lib/js/form-components/InputMultiSelect.js
@@ -24,7 +24,8 @@ type PropsType = FieldPropsType & {
 const InputMultiSelect = (props: PropsType) => (
   <label className={classnames(
     'input', {
-      'input--value-changed': !isEmpty(props.input.value)
+      'input--value-changed':
+        !isEmpty(props.input.value) && props.input.value !== props.input.defaultValue
     }
   )}>
     <p className={classnames(

diff --git a/frontend/lib/js/form-components/InputSelect.js b/frontend/lib/js/form-components/InputSelect.js
@@ -22,7 +22,8 @@ const InputSelect = (props: PropsType) => {
   return (
     <label className={classnames(
       'input', {
-        'input--value-changed': !isEmpty(props.input.value)
+        'input--value-changed':
+          !isEmpty(props.input.value) && props.input.value !== props.input.defaultValue
       }
     )}>
       <p className={classnames(

diff --git a/frontend/lib/js/form-components/InputWithLabel.js b/frontend/lib/js/form-components/InputWithLabel.js
@@ -24,7 +24,8 @@ const InputWithLabel = (props: PropsType) => {
       props.className,
       'input',
       {
-        'input--value-changed': !isEmpty(props.input.value),
+        'input--value-changed':
+          !isEmpty(props.input.value) && props.input.value !== props.input.defaultValue,
         'input--full-width': !!props.fullWidth,
       }
     )}>

diff --git a/frontend/lib/js/model/node.js b/frontend/lib/js/model/node.js
@@ -0,0 +1,20 @@
+// @flow
+
+import type { ElementType }       from '../standard-query-editor/types';
+
+import { tablesHaveActiveFilter } from './table';
+
+export const nodeHasActiveFilters = (node, tables = node.tables) =>
+  node.excludeTimestamps ||
+    nodeHasActiveTableFilters(node, tables) ||
+    nodeHasExludedTable(node, tables);
+
+export const nodeHasActiveTableFilters = (node: ElementType, tables = node.tables) => {
+  if (!tables) return false;
+  return tablesHaveActiveFilter(tables);
+};
+
+export const nodeHasExludedTable = (node: ElementType, tables = node.tables) => {
+  if (!tables) return false;
+  return tables.some(table => table.exclude);
+}
diff --git a/frontend/lib/js/model/table.js b/frontend/lib/js/model/table.js
@@ -0,0 +1,32 @@
+// @flow
+
+import type { TableType } from '../standard-query-editor/types';
+
+import { isEmpty }        from '../common/helpers';
+
+export const tablesHaveActiveFilter = (tables: TableType[]) =>
+  tables.some(table => tableHasActiveFilters(table));
+
+export const tableHasActiveFilters = (table: TableType) =>
+    table.filters &&
+    table.filters.some(filter => !isEmpty(filter.value) && filter.value !== filter.defaultValue);
+
+export const resetAllFiltersInTables = (tables: TableType[]) => {
+  return (tables || []).map(table => {
+    const filters = table.filters
+      // It's actually a FilterType, but flow can't decide which one
+      // of the intersections it is
+      // $FlowFixMe
+      ? table.filters.map((filter) => ({
+          ...filter,
+          value: filter.defaultValue
+        }))
+      : null;
+
+    return {
+      ...table,
+      filters,
+      exclude: false,
+    };
+  });
+}
diff --git a/frontend/lib/js/query-group-modal/QueryGroupModal.js b/frontend/lib/js/query-group-modal/QueryGroupModal.js
@@ -68,15 +68,15 @@ const QueryGroupModal = (props) => {
             ]))
           }
         </h3>
-        <p className="query-node-modal__explanation">
+        <p className="query-node-editor__explanation">
           { T.translate('queryGroupModal.explanation') }
           {
             hasActiveDate &&
             <span
-              className="query-node-modal__reset-all"
+              className="query-node-editor__reset-all"
               onClick={props.onResetAllDates}
             >
-              <i className="fa fa-undo" /> {T.translate('queryNodeModal.resetAll')}
+              <i className="fa fa-undo" /> {T.translate('queryNodeEditor.resetAll')}
             </span>
           }
         </p>

diff --git a/...lib/js/query-node-modal/ParameterTable.js → ...ib/js/query-node-editor/ParameterTable.js b/...lib/js/query-node-modal/ParameterTable.js → ...ib/js/query-node-editor/ParameterTable.js
@@ -4,17 +4,18 @@ import React      from 'react';
 import classnames from 'classnames';
 
 import {
-  isEmpty,
   includes,
 } from '../common/helpers';
 
 import {
   SUPPORTED_FILTERS,
 } from '../form-components';
 
-import type { TableType } from '../standard-query-editor/types';
+import { tableHasActiveFilters } from '../model/table';
 
-import ParameterTableFilters from './ParameterTableFilters';
+import type { TableType }        from '../standard-query-editor/types';
+
+import ParameterTableFilters     from './ParameterTableFilters';
 
 
 type PropsType = {
@@ -30,10 +31,7 @@ type PropsType = {
 const ParameterTable = (props: PropsType) => {
   const tableClass = "parameter-table";
   const isExcluded = !!props.table.exclude;
-  const hasFilterValues = (
-    props.table.filters &&
-    props.table.filters.some(f => !isEmpty(f.value))
-  );
+  const hasFilterValues = tableHasActiveFilters(props.table);
 
   const hasFilters = props.table.filters &&
                      props.table.filters.some(

diff --git a/...query-node-modal/ParameterTableFilters.js → ...uery-node-editor/ParameterTableFilters.js b/...query-node-modal/ParameterTableFilters.js → ...uery-node-editor/ParameterTableFilters.js
@@ -48,6 +48,7 @@ const ParameterTableFilters = (props: PropsType) => (
                   <InputSelect
                     input={{
                       clearable: filter.value !== filter.defaultValue,
+                      defaultValue: filter.defaultValue,
                       value: filter.value,
                       onChange: (value) => props.onSetFilterValue(filterIdx, value),
                     }}
@@ -62,6 +63,7 @@ const ParameterTableFilters = (props: PropsType) => (
                   <InputMultiSelect
                     input={{
                       onChange: (value) => props.onSetFilterValue(filterIdx, value),
+                      defaultValue: filter.defaultValue,
                       value: filter.value
                     }}
                     label={filter.label}
@@ -75,6 +77,7 @@ const ParameterTableFilters = (props: PropsType) => (
                   <AsyncInputMultiSelect
                     input={{
                       value: filter.value,
+                      defaultValue: filter.defaultValue,
                       onChange: (value) => props.onSetFilterValue(filterIdx, value),
                     }}
                     label={filter.label}
@@ -98,6 +101,7 @@ const ParameterTableFilters = (props: PropsType) => (
                     inputType="number"
                     input={{
                       value: filter.value,
+                      defaultValue: filter.defaultValue,
                       onChange: (value) => props.onSetFilterValue(filterIdx, value),
                     }}
                     limits={{ min: filter.min, max: filter.max }}
@@ -116,6 +120,7 @@ const ParameterTableFilters = (props: PropsType) => (
                     inputType="number"
                     input={{
                       value: filter.value,
+                      defaultValue: filter.defaultValue,
                       onChange: (value) => props.onSetFilterValue(filterIdx, value),
                     }}
                     limits={{ min: filter.min, max: filter.max }}
@@ -135,6 +140,7 @@ const ParameterTableFilters = (props: PropsType) => (
                     inputType="text"
                     input={{
                       value: filter.value || "",
+                      defaultValue: filter.defaultValue,
                       onChange: (value) => props.onSetFilterValue(filterIdx, value)
                     }}
                     placeholder="-"