adding filters to UI

ui/src/components/ButtonWithIcon/index.js

@@ -1,12 +1,13 @@
 
 import React from 'react';
+import classnames from 'classnames';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 
 import './button-with-icon.scss';
 
-const ButtonWithIcon = ({onClick, iconName, disabled, children}) => (
-    <Button onClick={onClick} className="button-with-icon" disabled={disabled}>
+const ButtonWithIcon = ({onClick, iconName, disabled, className, children}) => (
+    <Button onClick={onClick} className={classnames("button-with-icon", className)} disabled={disabled}>
         <Icon name={iconName} size={20} />
         <span>{children}</span>
     </Button>

ui/src/components/Filter/FilterButton/filter-button.scss

@@ -0,0 +1,25 @@
+@import 'utils/scss_variables.module.scss';
+
+.filter-button {
+    border: 1px solid $color-blue;
+    color: $color-main-dark;
+    background-color: $color-blue;
+    font-weight: 400;
+    font-size: 14px;
+    border-radius: 100px;
+    box-sizing: border-box;
+    height: 28px;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &.pressed {
+        border: 1px solid $color-findings-3;
+        color: $color-findings-3;
+        background-color: white;
+    }
+    .icon {
+        margin-right: 5px;
+    }
+}

ui/src/components/Filter/FilterButton/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import Icon, { ICON_NAMES } from 'components/Icon';
+
+import './filter-button.scss';
+
+const FilterButton = ({onClick, pressed, children}) => (
+    <button type="button" onClick={onClick} className={classnames("filter-button", {pressed})}>
+        <Icon name={ICON_NAMES.FILTER} size={16} />
+        <span>{children}</span>
+    </button>
+);
+
+export default FilterButton;

ui/src/components/Filter/filter.scss

@@ -0,0 +1,61 @@
+@import 'utils/scss_variables.module.scss';
+
+.general-filter-wrapper {
+    .show-filters-button {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+
+        &.pressed {
+            background-color: $color-grey-lighter;
+        }
+        .icon {
+            height: 16px;
+            width: 16px;
+            margin-right: 5px;
+        }
+    }
+    .filter-form-wrapper {
+        margin-top: 14px;
+
+        .filter-form {
+            display: flex;
+            align-items: center;
+
+            .form-field-wrapper {
+                margin-right: 10px;
+                margin-bottom: 0;
+                min-width: 150px;
+            }
+            .add-filter-button {
+                height: 30px;
+                padding: 7px;
+                border-radius: 2px;
+            }
+        }
+    }
+    .filters-display-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+
+        &:not(.is-empty) {
+            margin-top: 14px;
+        }
+        .filter-display-item {
+            color: $color-grey-black;
+            background-color: $color-blue-light;
+            border: 1px solid $color-blue;
+            box-sizing: border-box;
+            font-size: 10px;
+            padding: 5px 10px;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+            margin-right: 10px;
+
+            .icon {
+                margin-left: 10px;
+            }
+        }
+    }
+}

ui/src/components/Filter/index.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import { isUndefined, isEmpty, isEqual } from 'lodash';
+import { Formik, Form, useFormikContext } from 'formik';
+import classnames from 'classnames';
+import Icon, { ICON_NAMES } from 'components/Icon';
+import Button from 'components/Button';
+import { SelectField, MultiselectField, TextField, DateField } from 'components/Form';
+import { OPERATORS, formatFiltersToOdataItems, getValueLabel } from './utils';
+import FilterButton from './FilterButton';
+
+import './filter.scss';
+
+export {
+    OPERATORS,
+    formatFiltersToOdataItems
+}
+
+const getScopeConfig = (filtersConfig, scope) => filtersConfig.find(item => item.value === scope) || {};
+
+const DateTimeField = props => <DateField {...props} displayFormat="y-MM-dd HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
+
+const FormFields = ({onAdd, filtersConfig}) => {
+    const {values: formValues, setFieldValue, resetForm} = useFormikContext();
+    const {scope, operator, value} = formValues;
+
+    const selectedScopeData = getScopeConfig(filtersConfig, scope);
+    const {isNumber, isDate, customOdataFormat} = selectedScopeData;
+    const operatorByScopeItems = selectedScopeData.operators || [];
+    const selectedOperatorData = operatorByScopeItems.find(item => item.value === operator);
+    const {valueItems, creatable, isSingleSelect} = selectedOperatorData || {};
+
+    const ValueField = isDate ? DateTimeField : (isUndefined(valueItems) ? TextField : (isSingleSelect ? SelectField : MultiselectField));
+    const valuePlaceholder = isUndefined(valueItems) ? "Enter value..." : "Select value...";
+    const disableButton = isEmpty(value);
+
+    useEffect(() => {
+        setFieldValue("operator", "");
+        setFieldValue("value", "");
+    }, [scope, setFieldValue]);
+
+    useEffect(() => {
+        setFieldValue("value", "");
+    }, [operator, setFieldValue]);
+
+    return (
+        <React.Fragment>
+            <SelectField
+                name="scope"
+                items={filtersConfig}
+                placeholder="Select property..."
+            />
+            <SelectField
+                name="operator"
+                items={operatorByScopeItems}
+                placeholder="Select operator..."
+                disabled={!scope}
+            />
+            <ValueField
+                className="filter-field-value"
+                name="value"
+                items={valueItems}
+                placeholder={valuePlaceholder}
+                creatable={creatable}
+                disabled={!operator}
+            />
+            <Button className="add-filter-button" disabled={disableButton} onClick={() => {
+                if (disableButton) {
+                    return;
+                }
+
+                onAdd({...formValues, isNumber, isDate, customOdataFormat});
+                resetForm();
+            }}>OK</Button>
+        </React.Fragment>
+    )
+}
+
+const Filter = ({filters, onFilterUpdate, filtersConfig}) => {
+    const [showFiltersForm, setShowFiltersForm] = useState(false);
+
+    return (
+        <div className="general-filter-wrapper">
+            <FilterButton onClick={() => setShowFiltersForm(!showFiltersForm)} pressed={showFiltersForm}>Filters</FilterButton>
+            {showFiltersForm &&
+                <div className="filter-form-wrapper">
+                    <Formik
+                        initialValues={{
+                            scope: "",
+                            operator: "",
+                            value: ""
+                        }}
+                    >
+                        <Form className="filter-form">
+                            <FormFields
+                                onAdd={filterData => onFilterUpdate([...filters, filterData])}
+                                filtersConfig={filtersConfig}
+                            />
+                        </Form>
+                    </Formik>
+                </div>
+            }
+            <div className={classnames("filters-display-wrapper", {"is-empty": isEmpty(filters)})}>
+                {
+                    filters.map(({scope, operator, value}, index) => {
+                        const {label: scopeLabel, operators: configOperators} = getScopeConfig(filtersConfig, scope);
+
+                        const operatorLabel = OPERATORS[operator].label;
+                        const valueItems = configOperators.find(configOperator => configOperator.value === operator)?.valueItems || [];
+                        const formattedValue = Array.isArray(value) ?
+                            value.map(valueItem => getValueLabel(valueItems, valueItem)).join(" or ") : getValueLabel(valueItems, value);
+
+                        return (
+                            <div className="filter-display-item" key={index}>
+                                <span>{`${scopeLabel} ${operatorLabel} `}<span style={{fontWeight: "bold"}}>{formattedValue}</span></span>
+                                <Icon
+                                    name={ICON_NAMES.X_MARK}
+                                    onClick={() => {
+                                        const newFilters = filters.filter(filterItem => !(filterItem.scope === scope && filterItem.operator === operator && isEqual(filterItem.value, value)));
+
+                                        onFilterUpdate(newFilters); 
+                                    }}
+                                    size={10}
+                                />
+                            </div>
+                        )
+                    })
+                }
+                {!isEmpty(filters) && <Button tertiary onClick={() => onFilterUpdate([])} >Delete all filters</Button>}
+            </div>
+        </div>
+    );
+}
+
+export default Filter;

ui/src/components/Filter/utils.js

@@ -0,0 +1,45 @@
+export const OPERATORS = {
+    eq: {value: "eq", label: "is"},
+    ne: {value: "ne", label: "is not"},
+    startswith: {value: "startswith", label: "starts with"},
+    endswith: {value: "endswith", label: "ends with"},
+    contains: {value: "contains", label: "contains"},
+    notcontains: {value: "notcontains", label: "don't contain"},
+    gt: {value: "gt", label: "greater than"},
+    ge: {value: "ge", label: "greater than or equal to"},
+    lt: {value: "lt", label: "less than"},
+    le: {value: "le", label: "less than or equal to"}
+}
+
+const SPECIAL_CASE_OPERATORS = [
+    OPERATORS.contains.value,
+    OPERATORS.startswith.value,
+    OPERATORS.endswith.value
+];
+
+export const formatFiltersToOdataItems = (filters) => {
+    return filters.reduce((acc, curr) => {
+        const {scope, operator, value, isNumber, isDate, customOdataFormat} = curr;
+        const valuesList = Array.isArray(value) ? value : [value];
+
+        const formatValueItem = valueItem => isNumber ? valueItem : `'${isDate ? (new Date(valueItem)).toISOString() : valueItem}'`;
+        const formatItem = valueItem => {
+            if (SPECIAL_CASE_OPERATORS.includes(operator)) {
+                return `${operator}(${scope},${formatValueItem(valueItem)})`;
+            }
+
+            return `${scope} ${operator} ${formatValueItem(valueItem)}`;
+        }
+
+        return [
+            ...acc,
+            !!customOdataFormat ? customOdataFormat(valuesList, operator, scope) :`(${valuesList.map(valueItem => formatItem(valueItem)).join(` or `)})`
+        ];
+    }, []);
+};
+
+export const getValueLabel = (valueItems=[], value) => {
+    const valueItem = valueItems.find(valueItem => valueItem.value === value);
+
+    return !!valueItem ? valueItem.label : value;
+};

ui/src/components/Form/form-fields/DateField/date-field.scss

@@ -5,18 +5,27 @@ $calendar-backgroud-color: white;
 
 .form-field-wrapper.date-field-wrapper {
     .react-datetime-picker.date-field-select {
-        height: 32px;
+        height: 36px;
+        background-color: white;
 
         .react-datetime-picker__wrapper {
             border: 1px solid $color-grey-light;
             border-radius: 2px;
 
-            .react-datetime-picker__inputGroup__input {
-                color: $color-grey-black;
-                font-size: 14px;
-
-                &:focus-visible {
-                    outline: none;
+            .react-datetime-picker__inputGroup {
+                padding: 0 8px;
+
+                .react-datetime-picker__inputGroup__input,
+                .react-datetime-picker__inputGroup__leadingZero {
+                    color: $color-grey-black;
+                    font-size: 14px;
+
+                    &:invalid {
+                        background-color: white;
+                    }
+                    &:focus-visible {
+                        outline: none;
+                    }
                 }
             }
         }

ui/src/components/Form/form-fields/DateField/index.js

@@ -10,21 +10,19 @@ import FieldLabel from 'components/Form/FieldLabel';
 
 import './date-field.scss';
 
-const DATE_FORMAT = 'YYYY-MM-DD';
-
 const DateField = (props) => {
-    const {label, className, tooltipText, displayFormat="MMM dd"} = props;
+    const {label, className, tooltipText, displayFormat="MMM dd", valueFormat="YYYY-MM-DD", disabled, minDate} = props;
     const [field, meta, helpers] = useField(props);
     const {name, value} = field; 
     const {setValue, setTouched} = helpers;
-
+    
     const formattedValue = !!value ? new Date(value) : null;
 
     return (
         <div className={classnames("form-field-wrapper", "date-field-wrapper", {[className]: className})} onBlur={() => setTouched(true, true)}>
             {!isEmpty(label) && <FieldLabel tooltipId={name} tooltipText={tooltipText}>{label}</FieldLabel>}
             <DateTimePicker
-                onChange={date => setValue(isNull(date) ? "" : formatDateBy(date, DATE_FORMAT))}
+                onChange={date => setValue(isNull(date) ? "" : formatDateBy(date, valueFormat))}
                 value={formattedValue}
                 className="date-field-select"
                 calendarClassName="date-field-select-calendar"
@@ -34,13 +32,20 @@ const DateField = (props) => {
                 format={displayFormat}
                 name={name}
                 openWidgetsOnFocus={true}
-                minDate={new Date()}
+                minDate={minDate}
                 prevLabel={<Arrow name="left" />}
                 nextLabel={<Arrow name="right" />}
                 prev2Label={null}
                 next2Label={null}
                 minDetail="month"
                 calendarType="US"
+                disabled={disabled}
+                yearPlaceholder="____"
+                dayPlaceholder="__"
+                hourPlaceholder="__"
+                minutePlaceholder="__"
+                monthPlaceholder="__"
+                secondPlaceholder="__"
             />
             {meta.touched && meta.error && <FieldError>{meta.error}</FieldError>}
         </div>