feat(inline-edit): user should see instance field input (#1172)

* feat(inline-edit): pass in classname and update getDateValue

Author: ChenCodes

src/features/list-view/styles/ListView.scss

@@ -24,21 +24,23 @@
             cursor: pointer;
         }
 
-        .bdl-icon-sort-chevron.bdl-ListView-isSortAsc {
+        .bdl-icon-sort-chevron {
             height: 12px;
             margin-left: 2px;
             margin-top: 3px;
-            transform: rotate(180deg);
             width: 12px;
         }
+
+        .bdl-icon-sort-chevron.bdl-ListView-isSortAsc {
+            transform: rotate(180deg);
+        }
     }
 
     .bdl-ListView-columnCell {
         border-top: 1px solid $off-white;
         color: $seventy-sixers;
         display: flex;
         justify-content: flex-start;
-        padding-top: 16px;
 
         .bdl-ListView-iconRename {
             border: none;
@@ -51,4 +53,14 @@
     .ReactVirtualized__Grid {
         outline: none;
     }
+
+    .ReactVirtualized__Grid__innerScrollContainer {
+        /* Currently there is an issue where overflow is hidden for the Grid
+            which results in dropdowns getting cut off at the bottom of each row
+
+            TODO: The correct solution would be to use Portal + Tether. This approach will be attempted during
+            the Raise the Bar phase.
+        */
+        overflow: visible !important;
+    }
 }

src/features/query-bar/__tests__/ValueField-test.js

@@ -72,5 +72,32 @@ describe('features/query-bar/components/filter/ValueField', () => {
                 expect(component.prop(valuePropNames[componentName])).toEqual(expectedValue);
             });
         });
+
+        describe('should not show an error for a', () => {
+            test.each`
+                valueType        | componentName          | should
+                ${'multiSelect'} | ${'MultiSelectField'}  | ${'MultiSelectField of type multiSelect'}
+                ${'enum'}        | ${'SingleSelectField'} | ${'SingleSelectField of type enum'}
+                ${'date'}        | ${'DatePicker'}        | ${'DatePicker of type date'}
+            `('$should', ({ componentName, valueType }) => {
+                const wrapper = getWrapper({ valueType, error: null, selectedValues: [] });
+                const component = wrapper.find(componentName);
+                expect(component.prop('error')).toBe(undefined);
+            });
+        });
+
+        describe('should show an error for a TextInput of ', () => {
+            const error = <div />;
+            test.each`
+                valueType   | should
+                ${'string'} | ${'type string'}
+                ${'float'}  | ${'type float'}
+                ${'number'} | ${'type number'}
+            `('$should', ({ valueType }) => {
+                const wrapper = getWrapper({ valueType, error, selectedValues: [] });
+                const component = wrapper.find('TextInput');
+                expect(component.prop('error')).toBe(error);
+            });
+        });
     });
 });

src/features/query-bar/components/filter/ValueField.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
+import isNaN from 'lodash/isNaN';
 
 import DatePicker from '../../../../components/date-picker';
 import SingleSelectField from '../../../../components/select-field/SingleSelectField';
@@ -13,6 +14,7 @@ import type { ConditionValueType } from '../../flowTypes';
 import '../../styles/Condition.scss';
 
 type Props = {
+    error?: React.Node,
     onChange: (value: Array<ConditionValueType>) => void,
     selectedValues: Array<ConditionValueType>,
     valueOptions: Array<Object>,
@@ -25,8 +27,9 @@ const getDateValue = selectedValues => {
     }
 
     const value = selectedValues[0];
-    if (value instanceof Date) {
-        return value;
+    const date = new Date(value);
+    if (!isNaN(date.valueOf())) {
+        return date;
     }
 
     throw new Error('Expected Date');
@@ -45,7 +48,7 @@ const getStringValue = selectedValues => {
     throw new Error('Expected string');
 };
 
-const ValueField = ({ onChange, selectedValues, valueOptions, valueType }: Props) => {
+const ValueField = ({ error, onChange, selectedValues, valueOptions, valueType }: Props) => {
     const value = selectedValues.length > 0 ? selectedValues[0] : '';
     const onInputChange = e => {
         return e.target.value !== '' ? onChange([e.target.value]) : onChange([]);
@@ -58,6 +61,8 @@ const ValueField = ({ onChange, selectedValues, valueOptions, valueType }: Props
             return (
                 <div className="filter-dropdown-text-field-container">
                     <TextInput
+                        error={error}
+                        errorPosition="middle-left"
                         hideLabel
                         label="Text Input"
                         name="text"