CNFT1-331: Create operator dropdown component

apps/modernization-ui/src/apps/search/patient/PatientCriteria/BasicInformation.tsx

@@ -8,12 +8,55 @@ import { validNameRule } from 'validation/entry';
 import { Input } from 'components/FormInputs/Input';
 import { DatePickerInput } from 'components/FormInputs/DatePickerInput';
 import { genders } from 'options/gender';
+// import { OperatorSelect } from 'components/FormInputs/OperatorSelect';
+// import { EntryWrapper } from 'components/Entry';
+// import { Grid } from '@trussworks/react-uswds';
 
 export const BasicInformation = () => {
     const { control } = useFormContext<PatientCriteriaEntry, Partial<PatientCriteriaEntry>>();
 
     return (
         <SearchCriteria>
+            {/* 
+
+            // WHEN READY: Uncomment this section to add the operator select for last name, the copy for first name and any others
+
+            <EntryWrapper orientation="vertical" label="Last name" htmlFor="lastName" sizing="compact">
+                <Grid col={12}>
+                    <Grid row>
+                        <Grid col={5} className="padding-right-1">
+                            <Controller
+                                control={control}
+                                name="lastNameOperator"
+                                render={({ field: { onChange, value, name } }) => (
+                                    <OperatorSelect id={name} value={value} onChange={onChange} sizing="compact" />
+                                )}
+                            />
+                        </Grid>
+                        <Grid col={7}>
+                            <Controller
+                                control={control}
+                                name="lastName"
+                                rules={validNameRule}
+                                render={({ field: { onBlur, onChange, value, name }, fieldState: { error } }) => (
+                                    <Input
+                                        onBlur={onBlur}
+                                        onChange={onChange}
+                                        type="text"
+                                        name={name}
+                                        defaultValue={value}
+                                        htmlFor={name}
+                                        id={name}
+                                        sizing="compact"
+                                        error={error?.message}
+                                    />
+                                )}
+                            />
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </EntryWrapper>
+            */}
             <Controller
                 control={control}
                 name="lastName"
@@ -122,7 +165,7 @@ export const BasicInformation = () => {
                         name={name}
                         label={'Include records that are'}
                         sizing="compact"
-                        requried
+                        required
                         options={statusOptions}
                         value={value}
                         onChange={onChange}

apps/modernization-ui/src/apps/search/patient/PatientCriteria/PatientCriteria.tsx

@@ -1,6 +1,5 @@
-import { BasicInformation } from './BasicInformation';
 import { Accordion } from 'components/Accordion';
-
+import { BasicInformation } from './BasicInformation';
 import { Address } from './Address';
 import { Contact } from './Contact';
 import { RaceEthnicity } from './RaceEthnicity';

apps/modernization-ui/src/apps/search/patient/PatientCriteria/index.ts

@@ -0,0 +1 @@
+export { PatientCriteria } from './PatientCriteria';

apps/modernization-ui/src/apps/search/patient/criteria.ts

@@ -12,7 +12,9 @@ export { statusOptions };
 
 type BasicInformation = {
     lastName?: string;
+    lastNameOperator?: Selectable;
     firstName?: string;
+    firstNameOperator?: Selectable;
     dateOfBirth?: string;
     gender?: Selectable;
     id?: string;

apps/modernization-ui/src/components/FormInputs/OperatorSelect/OperatorSelect.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { OperatorSelect, OperatorSelectProps } from './OperatorSelect';
+import { basicOperators, defaultOperator, operators } from 'options/operator';
+
+describe('OperatorSelect', () => {
+    const mockOnChange = jest.fn();
+
+    const defaultProps: OperatorSelectProps = {
+        id: 'operator-select',
+        value: null,
+        showLabel: false,
+        sizing: 'compact',
+        onChange: mockOnChange
+    };
+
+    it('renders without crashing', () => {
+        const { getByRole } = render(<OperatorSelect {...defaultProps} />);
+        const selectElement = getByRole('combobox');
+        expect(selectElement).toBeInTheDocument();
+    });
+
+    it('displays the operator label when showLabel is true', () => {
+        const { getByLabelText } = render(<OperatorSelect {...defaultProps} showLabel={true} />);
+        const labelElement = getByLabelText('Operator');
+        expect(labelElement).toBeInTheDocument();
+    });
+
+    it('does not display the label when showLabel is false', () => {
+        const { queryByLabelText } = render(<OperatorSelect {...defaultProps} showLabel={false} />);
+        const labelElement = queryByLabelText('Operator');
+        expect(labelElement).not.toBeInTheDocument();
+    });
+
+    it('calls onChange when an option is selected', () => {
+        const { getByRole } = render(<OperatorSelect {...defaultProps} />);
+        const selectElement = getByRole('combobox');
+        fireEvent.change(selectElement, { target: { value: operators[0].value } });
+        expect(mockOnChange).toHaveBeenCalledWith(operators[0]);
+    });
+
+    it('displays the EQUAL operator by default', () => {
+        const { getByRole } = render(<OperatorSelect {...defaultProps} />);
+        const selectElement = getByRole('combobox') as HTMLSelectElement;
+        expect(selectElement.value).toBe(defaultOperator.value);
+    });
+
+    it('displays the correct initial value when specified', () => {
+        const { getByRole } = render(<OperatorSelect {...defaultProps} value={operators[1]} />);
+        const selectElement = getByRole('combobox') as HTMLSelectElement;
+        expect(selectElement.value).toBe(operators[1].value);
+    });
+
+    it('renders all of the operator options when mode is not specified', () => {
+        const { getAllByRole } = render(<OperatorSelect {...defaultProps} />);
+        const options = getAllByRole('option');
+        // all options + the placeholder
+        expect(options.length).toBe(operators.length + 1);
+    });
+
+    it('renders only the basic operator options when mode is basic', () => {
+        const { getAllByRole } = render(<OperatorSelect {...defaultProps} mode="basic" />);
+        const options = getAllByRole('option');
+        // basic options + the placeholder
+        expect(options.length).toBe(basicOperators.length + 1);
+    });
+});

apps/modernization-ui/src/components/FormInputs/OperatorSelect/OperatorSelect.tsx

@@ -0,0 +1,27 @@
+import { Sizing } from 'components/Entry';
+import { SingleSelect } from 'design-system/select';
+import { Selectable } from 'options';
+import { operators, defaultOperator, basicOperators } from 'options/operator';
+
+export type OperatorSelectProps = {
+    id: string;
+    value?: Selectable | null;
+    mode?: 'basic' | 'all';
+    showLabel?: boolean;
+    sizing?: Sizing;
+    onChange: (value?: Selectable) => void;
+};
+
+export const OperatorSelect = ({ id, value, mode, showLabel = false, sizing, onChange }: OperatorSelectProps) => {
+    return (
+        <SingleSelect
+            value={value || defaultOperator}
+            onChange={onChange}
+            name={id}
+            label={showLabel ? 'Operator' : ''}
+            id={id}
+            options={mode === 'basic' ? basicOperators : operators}
+            sizing={sizing}
+        />
+    );
+};

apps/modernization-ui/src/components/FormInputs/OperatorSelect/index.ts

@@ -0,0 +1 @@
+export { OperatorSelect } from './OperatorSelect';

apps/modernization-ui/src/design-system/checkbox/CheckboxGroup.tsx

@@ -14,7 +14,7 @@ type Props = {
     options: Selectable[];
     value?: Selectable[];
     error?: string;
-    requried?: boolean;
+    required?: boolean;
     sizing?: Sizing;
     onChange?: (selected: Selectable[]) => void;
     onBlur?: (event: ReactFocusEvent<HTMLElement>) => void;
@@ -30,7 +30,7 @@ export const CheckboxGroup = ({
     disabled = false,
     className,
     error,
-    requried,
+    required,
     sizing
 }: Props) => {
     const { items, selected, select, deselect, reset } = useMultiSelection({ available: options });
@@ -56,7 +56,7 @@ export const CheckboxGroup = ({
     return (
         <fieldset
             className={classNames(styles.checkboxGroup, className, {
-                [styles.required]: requried,
+                [styles.required]: required,
                 [styles.compact]: sizing === 'compact'
             })}>
             <legend>{label}</legend>

apps/modernization-ui/src/options/operator/index.ts

@@ -0,0 +1 @@
+export * from './operators';

apps/modernization-ui/src/options/operator/operators.ts

@@ -0,0 +1,26 @@
+import { Selectable, asSelectable, findByValue } from 'options';
+
+const STARTS_WITH_OPERATOR = asSelectable('S', 'Starts with');
+const CONTAINS_OPERATOR = asSelectable('C', 'Contains');
+const EQUAL_OPERATOR = asSelectable('E', 'Equal');
+const NOT_EQUAL_OPERATOR = asSelectable('N', 'Not equal');
+const SOUNDS_LIKE_OPERATOR = asSelectable('L', 'Sounds like');
+
+const operators: Selectable[] = [
+    STARTS_WITH_OPERATOR,
+    CONTAINS_OPERATOR,
+    EQUAL_OPERATOR,
+    NOT_EQUAL_OPERATOR,
+    SOUNDS_LIKE_OPERATOR
+];
+
+/** A subset of operators: equals, not equals, contains */
+const basicOperators: Selectable[] = [EQUAL_OPERATOR, NOT_EQUAL_OPERATOR, CONTAINS_OPERATOR];
+
+/** The default operator to be used. Currently: EQUAL */
+const defaultOperator = EQUAL_OPERATOR;
+
+const asSelectableOperator = (value: string | null | undefined) =>
+    (value && findByValue(operators, EQUAL_OPERATOR)(value)) || EQUAL_OPERATOR;
+
+export { operators, basicOperators, defaultOperator, asSelectableOperator };