Skip to content

Commit

Permalink
feat: Change request advanced search and filter (#4544)
Browse files Browse the repository at this point in the history
  • Loading branch information
kwasniew committed Aug 23, 2023
1 parent ed2c2ec commit 0e16236
Show file tree
Hide file tree
Showing 7 changed files with 151 additions and 21 deletions.
@@ -1,5 +1,7 @@
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { styled, Typography } from '@mui/material';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Highlighter } from 'component/common/Highlighter/Highlighter';

const StyledContainer = styled('div')(({ theme }) => ({
display: 'flex',
Expand All @@ -9,12 +11,15 @@ const StyledContainer = styled('div')(({ theme }) => ({
}));

export const AvatarCell = ({ value }: any) => {
const { searchQuery } = useSearchHighlightContext();
return (
<TextCell>
<StyledContainer>
<Typography component={'span'} variant={'body2'}>
{' '}
{value?.username}
<Highlighter search={searchQuery}>
{value?.username}
</Highlighter>
</Typography>
</StyledContainer>
</TextCell>
Expand Down
Expand Up @@ -2,6 +2,8 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { Link, styled, Typography } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Highlighter } from 'component/common/Highlighter/Highlighter';

interface IChangeRequestTitleCellProps {
value?: any;
Expand All @@ -18,6 +20,7 @@ export const ChangeRequestTitleCell = ({
value,
row: { original },
}: IChangeRequestTitleCellProps) => {
const { searchQuery } = useSearchHighlightContext();
const projectId = useRequiredPathParam('projectId');
const {
id,
Expand Down Expand Up @@ -49,7 +52,7 @@ export const ChangeRequestTitleCell = ({
},
})}
>
{title}
<Highlighter search={searchQuery}>{title}</Highlighter>
</Link>
</Typography>
</StyledLink>
Expand Down
Expand Up @@ -3,31 +3,32 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader';
import {
SortableTableHeader,
Table,
TableBody,
TableCell,
TablePlaceholder,
TableRow,
} from 'component/common/Table';
import { SortingRule, useSortBy, useTable } from 'react-table';
import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { styled, Tab, Tabs, Box, useMediaQuery } from '@mui/material';
import { Link } from 'react-router-dom';
import { Box, styled, Tab, Tabs, useMediaQuery } from '@mui/material';
import { Link, useSearchParams } from 'react-router-dom';
import { sortTypes } from 'utils/sortTypes';
import { useEffect, useMemo, useState } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Search } from 'component/common/Search/Search';
import { featuresPlaceholder } from 'component/feature/FeatureToggleList/FeatureToggleListTable';
import theme from 'themes/theme';
import { useSearch } from 'hooks/useSearch';
import { useSearchParams } from 'react-router-dom';
import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import { ChangeRequestStatusCell } from './ChangeRequestStatusCell';
import { AvatarCell } from './AvatarCell';
import { ChangeRequestTitleCell } from './ChangeRequestTitleCell';
import { TableBody, TableRow } from 'component/common/Table';
import { createLocalStorage } from 'utils/createLocalStorage';
import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
import { useStyles } from './ChangeRequestsTabs.styles';
import { FeaturesCell } from './FeaturesCell';
import { HighlightCell } from '../../../common/Table/cells/HighlightCell/HighlightCell';

export interface IChangeRequestTableProps {
changeRequests: any[];
Expand Down Expand Up @@ -121,6 +122,21 @@ export const ChangeRequestsTabs = ({
Header: 'Updated feature toggles',
canSort: false,
accessor: 'features',
searchable: true,
filterName: 'feature',
filterParsing: (values: Array<{ name: string }>) => {
return values?.map(({ name }) => name).join('\n') || '';
},
filterBy: (
row: { features: Array<{ name: string }> },
values: Array<string>
) => {
return row.features.find(feature =>
values
.map(value => value.toLowerCase())
.includes(feature.name.toLowerCase())
);
},
Cell: ({
value,
row: {
Expand All @@ -141,11 +157,14 @@ export const ChangeRequestsTabs = ({
canSort: false,
Cell: AvatarCell,
align: 'left',
searchable: true,
filterName: 'by',
filterParsing: (value: { username?: string }) =>
value?.username || '',
},
{
Header: 'Submitted',
accessor: 'createdAt',
searchable: true,
maxWidth: 100,
Cell: TimeAgoCell,
sortType: 'alphanumeric',
Expand All @@ -155,14 +174,16 @@ export const ChangeRequestsTabs = ({
accessor: 'environment',
searchable: true,
maxWidth: 100,
Cell: TextCell,
Cell: HighlightCell,
filterName: 'environment',
},
{
Header: 'Status',
accessor: 'state',
searchable: true,
maxWidth: '170px',
Cell: ChangeRequestStatusCell,
filterName: 'status',
},
],
//eslint-disable-next-line
Expand Down
@@ -1,8 +1,10 @@
import { Box, styled } from '@mui/material';
import { Link } from 'react-router-dom';
import { VFC } from 'react';
import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
import { TooltipLink } from '../../../common/TooltipLink/TooltipLink';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
import { useSearchHighlightContext } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
import { Highlighter } from 'component/common/Highlighter/Highlighter';

const StyledBox = styled(Box)(({ theme }) => ({
display: 'flex',
Expand Down Expand Up @@ -42,6 +44,7 @@ interface FeaturesCellProps {
}

export const FeaturesCell: VFC<FeaturesCellProps> = ({ value, project }) => {
const { searchQuery } = useSearchHighlightContext();
const featureNames = value?.map((feature: any) => feature.name);
return (
<StyledBox>
Expand All @@ -52,7 +55,9 @@ export const FeaturesCell: VFC<FeaturesCellProps> = ({ value, project }) => {
title={featureName}
to={`/projects/${project}/features/${featureName}`}
>
{featureName}
<Highlighter search={searchQuery}>
{featureName}
</Highlighter>
</StyledLink>
))}
elseShow={
Expand All @@ -65,7 +70,9 @@ export const FeaturesCell: VFC<FeaturesCellProps> = ({ value, project }) => {
title={featureName}
to={`/projects/${project}/features/${featureName}`}
>
{featureName}
<Highlighter search={searchQuery}>
{featureName}
</Highlighter>
</StyledTooltipLink>
))}
</StyledTooltipContainer>
Expand Down
Expand Up @@ -61,7 +61,7 @@ export const SearchDescription: VFC<ISearchDescriptionProps> = ({
{filter.values.join(',')}
</StyledCode>{' '}
in {filter.header}. Options:{' '}
{filter.options.join(', ')}
{filter.options.slice(0, 10).join(', ')}
</p>
))}
</>
Expand Down
@@ -0,0 +1,89 @@
import { screen } from '@testing-library/react';
import { render } from 'utils/testRenderer';
import { SearchSuggestions } from './SearchSuggestions';

const searchContext = {
data: [
{
title: 'Title A',
environment: 'prod',
},
{
title: 'Title B',
environment: 'dev env',
},
{
title: 'Title C',
environment: 'stage\npre-prod',
},
],
searchValue: '',
columns: [
{
Header: 'Title',
searchable: true,
accessor: 'title',
},
{
Header: 'Environment',
accessor: 'environment',
searchable: false,
filterName: 'environment',
},
],
};

test('displays search and filter instructions when no search value is provided', () => {
render(<SearchSuggestions getSearchContext={() => searchContext} />);

expect(
screen.getByText(/Filter your search with operators like:/i)
).toBeInTheDocument();

expect(screen.getByText(/Filter by Environment:/i)).toBeInTheDocument();

expect(
screen.getByText(/environment:"dev env",pre-prod/i)
).toBeInTheDocument();

expect(
screen.getByText(/Combine filters and search./i)
).toBeInTheDocument();
});

test('displays search and filter instructions when search value is provided', () => {
render(
<SearchSuggestions
getSearchContext={() => ({
...searchContext,
searchValue: 'Title',
})}
/>
);

expect(screen.getByText(/Searching for:/i)).toBeInTheDocument();
expect(screen.getByText(/in Title/i)).toBeInTheDocument();
expect(
screen.getByText(/Combine filters and search./i)
).toBeInTheDocument();
});

test('displays search and filter instructions when filter value is provided', () => {
render(
<SearchSuggestions
getSearchContext={() => ({
...searchContext,
searchValue: 'environment:prod',
})}
/>
);

expect(screen.getByText(/Filtering by:/i)).toBeInTheDocument();
expect(screen.getByText(/in Environment/i)).toBeInTheDocument();
expect(
screen.getByText(/Options: "dev env", pre-prod, prod, stage/i)
).toBeInTheDocument();
expect(
screen.getByText(/Combine filters and search./i)
).toBeInTheDocument();
});
Expand Up @@ -11,8 +11,6 @@ import { useMemo, VFC } from 'react';
import { SearchDescription } from './SearchDescription/SearchDescription';
import { SearchInstructions } from './SearchInstructions/SearchInstructions';

const randomIndex = (arr: any[]) => Math.floor(Math.random() * arr.length);

const StyledPaper = styled(Paper)(({ theme }) => ({
position: 'absolute',
width: '100%',
Expand Down Expand Up @@ -53,6 +51,10 @@ interface SearchSuggestionsProps {
getSearchContext: () => IGetSearchContextOutput;
}

const quote = (item: string) => (item.includes(' ') ? `"${item}"` : item);

const randomIndex = (arr: any[]) => Math.floor(Math.random() * arr.length);

export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
getSearchContext,
}) => {
Expand All @@ -69,16 +71,19 @@ export const SearchSuggestions: VFC<SearchSuggestionsProps> = ({
getColumnValues(column, row)
);

const options = [...new Set(filterOptions)]
.filter(Boolean)
.flatMap(item => item.split('\n'))
.filter(item => !item.includes('"') && !item.includes("'"))
.map(quote)
.sort((a, b) => a.localeCompare(b));

return {
name: column.filterName,
header: column.Header ?? column.filterName,
options: [...new Set(filterOptions)]
.filter(Boolean)
.flatMap(item => item.split('\n'))
.map(item => (item.includes(' ') ? `"${item}"` : item))
.sort((a, b) => a.localeCompare(b)),
options,
suggestedOption:
filterOptions[randomRow] ?? `example-${column.filterName}`,
options[randomRow] ?? `example-${column.filterName}`,
values: getFilterValues(
column.filterName,
searchContext.searchValue
Expand Down

0 comments on commit 0e16236

Please sign in to comment.