Feat : Added options for task search

__tests__/Unit/Components/Tasks/Option.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Option from '@/components/tasks/TaskSearch/Suggestion/Option';
+
+describe('Option component', () => {
+    const mockOnClickHandler = jest.fn();
+    const mockSuggestion = { title: 'this is a long title' };
+
+    it('should render correctly', () => {
+        const { getByTestId } = render(
+            <Option
+                idx={0}
+                onClickHandler={mockOnClickHandler}
+                suggestion={mockSuggestion}
+                activeSuggestionIndex={0}
+            />
+        );
+
+        const optionElement = getByTestId('option');
+        expect(optionElement).toBeInTheDocument();
+        expect(optionElement).toHaveTextContent('title: this is a long title');
+    });
+
+    it('should call onClickHandler when clicked', () => {
+        const { getByTestId } = render(
+            <Option
+                idx={0}
+                onClickHandler={mockOnClickHandler}
+                suggestion={mockSuggestion}
+                activeSuggestionIndex={0}
+            />
+        );
+
+        const optionElement = getByTestId('option');
+        fireEvent.click(optionElement);
+        expect(mockOnClickHandler).toHaveBeenCalledTimes(1);
+        expect(mockOnClickHandler).toHaveBeenCalledWith(0);
+    });
+
+    it('should be selected if active', () => {
+        const { getByTestId } = render(
+            <Option
+                idx={0}
+                onClickHandler={mockOnClickHandler}
+                suggestion={mockSuggestion}
+                activeSuggestionIndex={0}
+            />
+        );
+
+        const optionElement = getByTestId('option');
+        expect(optionElement).toHaveClass('selected-suggestion');
+    });
+});

__tests__/Unit/Components/Tasks/Options.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Options from '@/components/tasks/TaskSearch/Suggestion/Options';
+import { TaskSearchOption } from '@/interfaces/searchOptions.type';
+
+describe('Option component', () => {
+    const onSuggestionSelected = jest.fn();
+    const activeSuggestionIndex = 0;
+
+    test('renders suggestions when suggestions array has elements', () => {
+        const suggestions: Array<TaskSearchOption> = [
+            { title: 'This is a title' },
+            { assignee: 'joy-gupta' },
+            { status: 'in-progress' },
+        ];
+
+        const { getByText } = render(
+            <Options
+                suggestions={suggestions}
+                activeSuggestionIndex={activeSuggestionIndex}
+                onSuggestionSelected={onSuggestionSelected}
+            />
+        );
+
+        suggestions.forEach((suggestion) => {
+            const key = Object.keys(suggestion)[0];
+            const value = suggestion[key];
+            expect(getByText(`${key}: ${value}`)).toBeInTheDocument();
+        });
+    });
+
+    test('renders "No suggestion found" when suggestions array is empty', () => {
+        const suggestions: Array<TaskSearchOption> = [];
+
+        const { getByText } = render(
+            <Options
+                suggestions={suggestions}
+                activeSuggestionIndex={activeSuggestionIndex}
+                onSuggestionSelected={onSuggestionSelected}
+            />
+        );
+
+        expect(getByText('No suggestion found')).toBeInTheDocument();
+    });
+
+    test('calls onSuggestionSelected with correct suggestion when option is clicked', () => {
+        const suggestions: Array<TaskSearchOption> = [
+            { title: 'This is a title' },
+            { assignee: 'joy-gupta' },
+            { status: 'in-progress' },
+        ];
+
+        const { getByText } = render(
+            <Options
+                suggestions={suggestions}
+                activeSuggestionIndex={activeSuggestionIndex}
+                onSuggestionSelected={onSuggestionSelected}
+            />
+        );
+
+        fireEvent.click(getByText('title: This is a title'));
+        expect(onSuggestionSelected).toHaveBeenCalledWith(0);
+    });
+});

src/components/tasks/TaskSearch/Suggestion/Option.tsx

@@ -0,0 +1,30 @@
+import className from './option.module.scss';
+
+interface OptionProps {
+    idx: number;
+    onClickHandler: (pillIndex: number) => void;
+    suggestion: { [key: string]: string };
+    activeSuggestionIndex: number;
+}
+export default function Option({
+    idx,
+    onClickHandler,
+    suggestion,
+    activeSuggestionIndex,
+}: OptionProps) {
+    const [key] = Object.keys(suggestion);
+
+    return (
+        <div
+            data-testid="option"
+            onClick={() => onClickHandler(idx)}
+            className={`${className['suggestion-div']} ${
+                idx === activeSuggestionIndex
+                    ? className['selected-suggestion']
+                    : ''
+            }`}
+        >
+            {JSON.stringify(`${[key]}: ${suggestion[key]}`).replaceAll('"', '')}
+        </div>
+    );
+}

src/components/tasks/TaskSearch/Suggestion/Options.tsx

@@ -0,0 +1,37 @@
+import { TaskSearchOption } from '@/interfaces/searchOptions.type';
+import className from './option.module.scss';
+import Option from './Option';
+interface OptionsProp {
+    suggestions: Array<TaskSearchOption>;
+    activeSuggestionIndex: number;
+    onSuggestionSelected: (idx: number) => void;
+}
+export default function Options({
+    suggestions,
+    activeSuggestionIndex,
+    onSuggestionSelected,
+}: OptionsProp) {
+    return (
+        <div className={className['suggestion-box']}>
+            {suggestions.length > 0 ? (
+                <div className="suggestion-box">
+                    {suggestions.map((data, key) => (
+                        <Option
+                            idx={key}
+                            activeSuggestionIndex={activeSuggestionIndex}
+                            onClickHandler={onSuggestionSelected}
+                            suggestion={data}
+                            key={key}
+                        />
+                    ))}
+                </div>
+            ) : (
+                <div
+                    className={`${className['suggestion-box']} ${className['empty-box']}`}
+                >
+                    No suggestion found
+                </div>
+            )}
+        </div>
+    );
+}

src/components/tasks/TaskSearch/Suggestion/option.module.scss

@@ -0,0 +1,40 @@
+$black-color: #000;
+$gray-color: #808080;
+$light-gray: #d0d7de;
+$filter-button-hover: #f6f8fa;
+.suggestion-div {
+    border: 1px solid $light-gray;
+    padding: 5.2px;
+    padding-left: 2.05rem;
+    word-wrap: break-word;
+    font-size: 13px;
+    &:hover {
+        background-color: $filter-button-hover;
+        border: 1px solid $gray-color;
+        cursor: pointer;
+        color: $black-color;
+    }
+}
+
+.selected-suggestion {
+    background-color: $filter-button-hover;
+    border: 1px solid $gray-color;
+    cursor: pointer;
+    color: $black-color;
+}
+
+.suggestion-box {
+    width: 100%;
+    top: 102%;
+    z-index: 5;
+    position: absolute;
+    text-align: left;
+    background-color: white;
+    left: 0;
+}
+.empty-box {
+    padding: 5.3px;
+    text-align: center;
+    border: 1px solid $light-gray;
+    border-top: none;
+}