Skip to content

Commit 8177321

Browse files
cannarockscannarocks
authored
Merge pull request #385 from AppQuality/table-empty-state
fix(table): emptystate
2 parents 6302e1f + 3f973ff commit 8177321

File tree

5 files changed

+63
-89
lines changed

5 files changed

+63
-89
lines changed

‎src/common/components/Table/EmptyState.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎src/common/components/Table/index.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { SM } from '@appquality/unguess-design-system';
1212
import { theme as appTheme } from 'src/app/theme';
1313
import { TableRow } from './TableRow';
1414
import { LoadingState } from './LoadingState';
15-
import { EmptyState } from './EmptyState';
1615

1716
interface TableData {
1817
id: string;
@@ -34,7 +33,7 @@ type TableProps<T extends TableData, K extends keyof T> = {
3433
isLoading?: boolean;
3534
loadingRowHeight?: string;
3635
loadingRowCount?: number;
37-
emptyState?: ReactNode;
36+
emptyState?: JSX.Element;
3837
};
3938

4039
const TableWrapper = styled.div<{ maxHeight?: string }>`
@@ -64,33 +63,35 @@ const Table = <T extends TableData, K extends keyof T>({
6463
loadingRowHeight,
6564
loadingRowCount,
6665
emptyState,
67-
}: TableProps<T, K>) => (
68-
<TableWrapper maxHeight={maxHeight}>
69-
<ZendeskTable>
70-
<StyledHead isSticky={isSticky}>
71-
<HeaderRow>
72-
{columns.map((column) => (
73-
<HeaderCell width={column.width}>
74-
<SM isBold color={appTheme.palette.grey[800]}>
75-
{column.header}
76-
</SM>
77-
</HeaderCell>
78-
))}
79-
</HeaderRow>
80-
</StyledHead>
81-
{isLoading ? (
82-
<LoadingState
83-
colCount={columns.length}
84-
rowCount={loadingRowCount}
85-
rowHeight={loadingRowHeight}
86-
/>
87-
) : (
88-
<Body>
89-
{!data || !data.length ? (
90-
<EmptyState colCount={columns.length}>{emptyState}</EmptyState>
91-
) : (
92-
data.map((row) => (
66+
}: TableProps<T, K>) => {
67+
if (!data || !data.length) {
68+
return emptyState || null;
69+
}
70+
return (
71+
<TableWrapper maxHeight={maxHeight}>
72+
<ZendeskTable>
73+
<StyledHead isSticky={isSticky}>
74+
<HeaderRow>
75+
{columns.map((column) => (
76+
<HeaderCell width={column.width}>
77+
<SM isBold color={appTheme.palette.grey[800]}>
78+
{column.header}
79+
</SM>
80+
</HeaderCell>
81+
))}
82+
</HeaderRow>
83+
</StyledHead>
84+
{isLoading ? (
85+
<LoadingState
86+
colCount={columns.length}
87+
rowCount={loadingRowCount}
88+
rowHeight={loadingRowHeight}
89+
/>
90+
) : (
91+
<Body>
92+
{data.map((row) => (
9393
<TableRow
94+
key={row.id}
9495
id={row.id}
9596
onClick={onRowClick}
9697
isSelected={row.id === selectedRow}
@@ -101,12 +102,12 @@ const Table = <T extends TableData, K extends keyof T>({
101102
<Cell>{row[column.key]}</Cell>
102103
))}
103104
</TableRow>
104-
))
105-
)}
106-
</Body>
107-
)}
108-
</ZendeskTable>
109-
</TableWrapper>
110-
);
105+
))}
106+
</Body>
107+
)}
108+
</ZendeskTable>
109+
</TableWrapper>
110+
);
111+
};
111112

112113
export default Table;

‎src/pages/Bugs/BugsTable/SearchEmptyState.tsx‎ renamed to ‎src/pages/Bugs/BugsTable/EmptyState.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,37 @@ import { useTranslation } from 'react-i18next';
33
import { useAppDispatch } from 'src/app/hooks';
44
import { theme } from 'src/app/theme';
55
import { resetFilters } from 'src/features/bugsPage/bugsPageSlice';
6+
import styled from 'styled-components';
7+
import Background from './assets/bg_empty_state.png';
68

7-
export const SearchEmptyState = ({ searchTerm }: { searchTerm?: string }) => {
9+
const StyledEmptyState = styled.div`
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100%;
15+
width: 100%;
16+
padding-top: ${theme.space.md};
17+
`;
18+
19+
export const EmptyState = () => {
820
const dispatch = useAppDispatch();
921
const { t } = useTranslation();
1022
return (
11-
<>
23+
<StyledEmptyState>
24+
<img
25+
src={Background}
26+
alt="table empty"
27+
style={{ marginBottom: theme.space.lg }}
28+
/>
1229
<LG
1330
isBold
1431
style={{ color: theme.palette.blue[600], marginBottom: theme.space.xs }}
1532
>
16-
{searchTerm
17-
? `${t(
18-
'__PAGE_BUG_SEARCH_EMPTY_STATE_MAIN_SEARCHTERM',
19-
"we couldn't find anything for"
20-
)} "${searchTerm}"`
21-
: t(
22-
'__PAGE_BUG_SEARCH_EMPTY_STATE_MAIN_GENERIC',
23-
"we couldn't find anything with the selected criteria"
24-
)}
33+
{t(
34+
'__PAGE_BUG_SEARCH_EMPTY_STATE_MAIN_GENERIC',
35+
"we couldn't find anything with the selected criteria"
36+
)}
2537
</LG>
2638
<MD
2739
style={{ color: theme.palette.grey[500], marginBottom: theme.space.md }}
@@ -42,6 +54,6 @@ export const SearchEmptyState = ({ searchTerm }: { searchTerm?: string }) => {
4254
>
4355
{t('__PAGE_BUG_EMPTY_STATE_CTA', 'Reset')}
4456
</Button>
45-
</>
57+
</StyledEmptyState>
4658
);
4759
};

‎src/common/components/Table/assets/bg_empty_state.png‎ renamed to ‎src/pages/Bugs/BugsTable/assets/bg_empty_state.png‎

File renamed without changes.

‎src/pages/Bugs/BugsTable/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import {
44
getSelectedBugId,
55
selectBug,
66
} from 'src/features/bugsPage/bugsPageSlice';
7-
import { SearchEmptyState } from './SearchEmptyState';
7+
import { EmptyState } from './EmptyState';
88
import { useTableData } from './useTableData';
99

1010
const BugsTable = ({ campaignId }: { campaignId: number }) => {
11-
const { columns, data, isLoading, filterBy } = useTableData(campaignId);
11+
const { columns, data, isLoading } = useTableData(campaignId);
1212
const dispatch = useAppDispatch();
1313
const currentBugId = getSelectedBugId();
1414

@@ -21,9 +21,7 @@ const BugsTable = ({ campaignId }: { campaignId: number }) => {
2121
isSticky
2222
isLoading={isLoading}
2323
loadingRowHeight="70px"
24-
emptyState={
25-
filterBy && <SearchEmptyState searchTerm={filterBy?.search} />
26-
}
24+
emptyState={<EmptyState />}
2725
/>
2826
);
2927
};

0 commit comments

Comments
 (0)