Skip to content

Commit fdd96ad

Browse files
macintusharRafaelOAiSquared
macintushar
authored and
RafaelOAiSquared
committed
refactor(CE): changed Sync Records UX
1 parent 13c17f9 commit fdd96ad

File tree

5 files changed

+52
-47
lines changed

5 files changed

+52
-47
lines changed

‎ui/src/assets/icons/FiBug.svg

Lines changed: 3 additions & 0 deletions
Loading

‎ui/src/services/syncs.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,14 @@ export const getSyncRecords = (
5959
syncId: string,
6060
runId: string,
6161
page: string = '1',
62+
isFiltered: boolean = false,
63+
status: string = 'success',
6264
): Promise<ApiResponse<Array<SyncRecordResponse>>> =>
6365
multiwovenFetch<null, ApiResponse<Array<SyncRecordResponse>>>({
6466
method: 'get',
65-
url: `/syncs/${syncId}/sync_runs/${runId}/sync_records?page=${page}&per_page=10`,
67+
url: isFiltered
68+
? `/syncs/${syncId}/sync_runs/${runId}/sync_records?page=${page}&per_page=10&status=${status}`
69+
: `/syncs/${syncId}/sync_runs/${runId}/sync_records?page=${page}&per_page=10`,
6670
});
6771

6872
export const editSync = (

‎ui/src/views/Activate/Syncs/SyncRecords/ErrorLogsModal.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@ import {
1212
useDisclosure,
1313
Image,
1414
ModalHeader,
15-
Icon,
1615
} from '@chakra-ui/react';
1716
import { FiCopy, FiArrowRight, FiAlertTriangle } from 'react-icons/fi';
18-
import { FaBug } from 'react-icons/fa';
17+
import FiBug from '@/assets/icons/FiBug.svg';
1918

2019
import { useSyncStore } from '@/stores/useSyncStore';
2120
import { SyncRecordStatus } from '../types';
@@ -59,7 +58,7 @@ const ErrorLogsModal = ({
5958
cursor='pointer'
6059
data-testid='logs-button'
6160
>
62-
<Icon as={FaBug} boxSize='4' />
61+
<Image src={FiBug} alt='bug icon' boxSize='4' />
6362
</Box>
6463

6564
<Modal isOpen={isOpen} onClose={onClose} isCentered size='xl'>

‎ui/src/views/Activate/Syncs/SyncRecords/FilterTabs.tsx

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,16 @@
1-
import { ApiResponse } from '@/services/common';
2-
import { SyncRecordResponse, SyncRecordStatus } from '../types';
1+
import { SyncRecordStatus } from '../types';
32
import { TabList } from '@chakra-ui/react';
43
import TabItem from '@/components/TabItem';
54

65
type FilterTabsType = {
76
setFilter: (filterValue: SyncRecordStatus) => void;
8-
syncRunRecords: ApiResponse<SyncRecordResponse[]> | undefined;
97
};
108

11-
export const FilterTabs = ({ setFilter, syncRunRecords }: FilterTabsType) => {
9+
export const FilterTabs = ({ setFilter }: FilterTabsType) => {
1210
return (
1311
<TabList gap='8px'>
14-
<TabItem
15-
text='Successful'
16-
action={() => setFilter(SyncRecordStatus.success)}
17-
isBadgeVisible
18-
badgeText={syncRunRecords?.data
19-
?.filter((record) => record.attributes.status === SyncRecordStatus.success)
20-
.length.toString()}
21-
/>
22-
<TabItem
23-
text='Rejected'
24-
action={() => setFilter(SyncRecordStatus.failed)}
25-
isBadgeVisible
26-
badgeText={syncRunRecords?.data
27-
?.filter((record) => record.attributes.status === SyncRecordStatus.failed)
28-
.length.toString()}
29-
/>
12+
<TabItem text='Successful' action={() => setFilter(SyncRecordStatus.success)} />
13+
<TabItem text='Rejected' action={() => setFilter(SyncRecordStatus.failed)} />
3014
</TabList>
3115
);
3216
};

‎ui/src/views/Activate/Syncs/SyncRecords/SyncRecords.tsx

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,27 +28,35 @@ const SyncRecords = (): JSX.Element => {
2828
const toast = useCustomToast();
2929

3030
const pageId = searchParams.get('page');
31-
const [currentPage, setCurrentPage] = useState(Number(pageId) || 1);
31+
const statusTab = searchParams.get('status');
3232

33-
const [currentFilter, setCurrentFilter] = useState<SyncRecordStatus>(SyncRecordStatus.success);
33+
const [currentPage, setCurrentPage] = useState(Number(pageId) || 1);
34+
const [currentStatusTab, setCurrentStatusTab] = useState<SyncRecordStatus>(
35+
statusTab === SyncRecordStatus.failed ? SyncRecordStatus.failed : SyncRecordStatus.success,
36+
);
3437

3538
const {
36-
data: syncRunRecords,
37-
isLoading: isSyncRecordsLoading,
38-
isError: isSyncRecordsError,
39+
data: filteredSyncRunRecords,
40+
isLoading: isFilteredSyncRecordsLoading,
41+
isError: isFilteredSyncRecordsError,
42+
refetch: refetchFilteredSyncRecords,
3943
} = useQueryWrapper<ApiResponse<Array<SyncRecordResponse>>, Error>(
40-
['activate', 'sync-records', syncRunId, currentPage],
41-
() => getSyncRecords(syncId as string, syncRunId as string, currentPage.toString()),
44+
['activate', 'sync-records', syncRunId, currentPage, statusTab],
45+
() =>
46+
getSyncRecords(
47+
syncId as string,
48+
syncRunId as string,
49+
currentPage.toString(),
50+
true,
51+
statusTab || 'success',
52+
),
4253
{
43-
refetchOnMount: true,
54+
refetchOnMount: false,
4455
refetchOnWindowFocus: false,
4556
},
4657
);
4758

48-
const data = useMemo(
49-
() => syncRunRecords?.data?.filter?.((record) => record.attributes.status === currentFilter),
50-
[syncRunRecords, currentFilter],
51-
);
59+
const data = filteredSyncRunRecords?.data;
5260

5361
const dynamicSyncColumns = useDynamicSyncColumns(data ? data : []);
5462
const allColumns = useMemo(
@@ -57,11 +65,11 @@ const SyncRecords = (): JSX.Element => {
5765
);
5866

5967
useEffect(() => {
60-
setSearchParams({ page: currentPage.toString() });
61-
}, [currentPage, setSearchParams]);
68+
setSearchParams({ page: currentPage.toString(), status: currentStatusTab });
69+
}, [currentPage, currentStatusTab, setSearchParams]);
6270

6371
useEffect(() => {
64-
if (isSyncRecordsError) {
72+
if (isFilteredSyncRecordsError) {
6573
toast({
6674
title: 'Error',
6775
description: 'There was an issue fetching the sync records.',
@@ -71,29 +79,36 @@ const SyncRecords = (): JSX.Element => {
7179
position: 'bottom-right',
7280
});
7381
}
74-
}, [isSyncRecordsError, toast]);
82+
}, [isFilteredSyncRecordsError, toast]);
7583

7684
const handleNextPage = () => {
77-
if (syncRunRecords?.links?.next) {
85+
if (filteredSyncRunRecords?.links?.next) {
7886
setCurrentPage((prevPage) => prevPage + 1);
7987
}
8088
};
8189

8290
const handlePrevPage = () => {
83-
if (syncRunRecords?.links?.prev) {
91+
if (filteredSyncRunRecords?.links?.prev) {
8492
setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
8593
}
8694
};
8795

96+
const handleStatusTabChange = (status: SyncRecordStatus) => {
97+
setCurrentPage(1);
98+
setCurrentStatusTab(status);
99+
refetchFilteredSyncRecords;
100+
};
101+
88102
return (
89103
<ContentContainer>
90104
{syncId && syncRunId ? <SyncRecordsTopBar syncId={syncId} syncRunId={syncRunId} /> : <></>}
91105
<Tabs
92106
size='md'
93107
variant='indicator'
94108
onChange={(index) =>
95-
setCurrentFilter(index === 0 ? SyncRecordStatus.success : SyncRecordStatus.failed)
109+
handleStatusTabChange(index === 0 ? SyncRecordStatus.success : SyncRecordStatus.failed)
96110
}
111+
index={currentStatusTab === SyncRecordStatus.success ? 0 : 1}
97112
background='gray.300'
98113
padding='4px'
99114
borderRadius='8px'
@@ -103,9 +118,9 @@ const SyncRecords = (): JSX.Element => {
103118
width='fit-content'
104119
height='fit'
105120
>
106-
<FilterTabs setFilter={setCurrentFilter} syncRunRecords={syncRunRecords} />
121+
<FilterTabs setFilter={handleStatusTabChange} />
107122
</Tabs>
108-
{isSyncRecordsLoading ? (
123+
{isFilteredSyncRecordsLoading ? (
109124
<Loader />
110125
) : (
111126
<Box width='100%' pt={'20px'}>
@@ -131,8 +146,8 @@ const SyncRecords = (): JSX.Element => {
131146
<Box display='flex' flexDirection='row-reverse' pt='10px'>
132147
<Pagination
133148
currentPage={currentPage}
134-
isPrevPageEnabled={syncRunRecords?.links?.prev != null}
135-
isNextPageEnabled={syncRunRecords?.links?.next != null}
149+
isPrevPageEnabled={filteredSyncRunRecords?.links?.prev != null}
150+
isNextPageEnabled={filteredSyncRunRecords?.links?.next != null}
136151
handleNextPage={handleNextPage}
137152
handlePrevPage={handlePrevPage}
138153
/>

0 commit comments

Comments
 (0)