Skip to content

Commit

Permalink
Merge pull request #63 from ChetanKarwa/TribesPage/fix-tags-dropdown
Browse files Browse the repository at this point in the history
Tribes page - Fix tags dropdown in tribes page
  • Loading branch information
kevkevinpal authored Feb 1, 2024
2 parents f6a24e8 + 5a3b7f1 commit 763c408
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 44 deletions.
104 changes: 60 additions & 44 deletions src/pages/tribes/Body.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,12 @@ const Column = styled.div`
width: 100%;
`;

const StyledTagPopupWrapper = styled.div`
.euiFormControlLayout {
border: 10px solid red;
}
`;

function BodyComponent() {
const { main, ui } = useStores();
const [selected, setSelected] = useState('');
Expand Down Expand Up @@ -152,52 +158,62 @@ function BodyComponent() {
}}
>
<div style={{ display: 'flex', alignItems: 'baseline' }}>
<EuiPopover
panelPaddingSize="none"
button={button}
isOpen={tagsPop}
closePopover={() => setTagsPop(false)}
>
<EuiSelectable
searchable
options={tagOptions}
renderOption={(option: any, searchValue: any) => (
<div
style={{
display: 'flex',
alignItems: 'center',
opacity: loadingList ? 0.5 : 1
}}
>
<Tag type={option.label} iconOnly />
<EuiHighlight
search={searchValue}
<StyledTagPopupWrapper>
<EuiPopover
panelPaddingSize="none"
button={button}
isOpen={tagsPop}
closePopover={() => setTagsPop(false)}
>
<EuiSelectable
searchable
searchProps={{
style: {
background: '#fff',
color: '#000',
borderBottom: '1px solid #000',
borderRadius: 0
}
}}
options={tagOptions}
renderOption={(option: any, searchValue: any) => (
<div
style={{
fontSize: 11,
marginLeft: 5,
color: tags[option.label].color
display: 'flex',
alignItems: 'center',
opacity: loadingList ? 0.5 : 1
}}
>
{option.label}
</EuiHighlight>
</div>
)}
listProps={{ rowHeight: 30 }} // showIcons:false
onChange={(opts: any) => {
if (!loadingList) {
setTagOptions(opts);
ui.setTags(opts);
}
}}
>
{(list: any, search: any) => (
<div style={{ width: 220 }}>
{search}
{list}
</div>
)}
</EuiSelectable>
</EuiPopover>
<Tag type={option.label} iconOnly />
<EuiHighlight
search={searchValue}
style={{
fontSize: 11,
marginLeft: 5,
color: tags[option.label].color
}}
>
{option.label}
</EuiHighlight>
</div>
)}
listProps={{ rowHeight: 30 }} // showIcons:false
onChange={(opts: any) => {
if (!loadingList) {
setTagOptions(opts);
ui.setTags(opts);
}
}}
>
{(list: any, search: any) => (
<div>
{search}
{list}
</div>
)}
</EuiSelectable>
</EuiPopover>
</StyledTagPopupWrapper>

<SearchTextInput
name="search"
Expand All @@ -208,7 +224,7 @@ function BodyComponent() {
style={{
width: 204,
height: 40,
background: '#111',
background: '#fff',
color: '#fff',
border: 'none',
marginLeft: 20
Expand Down
47 changes: 47 additions & 0 deletions src/pages/tribes/__tests__/Body.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { useStores } from 'store';
import { useFuse } from 'hooks';
import Body from '../Body';

jest.mock('hooks', () => ({
...jest.requireActual('hooks'),
useIsMobile: jest.fn(),
useScreenWidth: jest.fn(),
useFuse: jest.fn()
}));

jest.mock('store', () => ({
useStores: jest.fn()
}));

describe('Tribes Body Component', () => {
beforeEach(() => {
jest.clearAllMocks();
});

test('should display No results when there are no tribes on search', async () => {
// Mock return value for the store hook
(useStores as jest.Mock).mockReturnValue({
main: {
tribes: [],
getTribes: jest.fn()
},
ui: {
peoplePageNumber: 1,
searchText: 'abc',
tags: []
}
});

(useFuse as jest.Mock).mockReturnValue([]);

// Render the component with a selected widget and empty lists
render(<Body />);

await waitFor(() => {
expect(screen.getByText(/No results/i)).toBeInTheDocument();
});
});
});

0 comments on commit 763c408

Please sign in to comment.