Proposal/pagination (#2559)

* Update dataset pagination rendering to remove pagination in case of no content Signed-off-by: Nisarg-Chokshi <nisarg4000@gmail.com> * Update event pagination rendering to remove pagination in case of no content Signed-off-by: Nisarg-Chokshi <nisarg4000@gmail.com> * Resolved comment on the PR Signed-off-by: Nisarg-Chokshi <nisarg4000@gmail.com> --------- Signed-off-by: Nisarg-Chokshi <nisarg4000@gmail.com>
MarquezProject · Aug 1, 2023 · aabcec4 · aabcec4
1 parent e14cf9b
commit aabcec4
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 64 deletions.
diff --git a/web/src/routes/datasets/Datasets.tsx b/web/src/routes/datasets/Datasets.tsx
@@ -136,7 +136,7 @@ class Datasets extends React.Component<DatasetsProps, DatasetsState> {
                 <MqEmpty title={i18next.t('datasets_route.empty_title')}>
                   <MqText subdued>{i18next.t('datasets_route.empty_body')}</MqText>
                 </MqEmpty>
-              </Box>       
+              </Box>
             ) : (
               <>
                 <Box p={2} display={'flex'} justifyContent={'space-between'}>
@@ -227,29 +227,29 @@ class Datasets extends React.Component<DatasetsProps, DatasetsState> {
                       })}
                   </TableBody>
                 </Table>
+                <Box display={'flex'} justifyContent={'flex-end'} mb={2}>
+                  <Tooltip title={i18next.t('events_route.previous_page')}>
+                    <IconButton
+                      className={classes.ml2}
+                      color='primary'
+                      disabled={page === 1}
+                      onClick={() => this.handleClickPage('prev')}
+                    >
+                      <ChevronLeftRounded />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={i18next.t('events_route.next_page')}>
+                    <IconButton
+                      color='primary'
+                      disabled={pageIsLast}
+                      onClick={() => this.handleClickPage('next')}
+                    >
+                      <ChevronRightRounded />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
               </>
             )}
-            <Box display={'flex'} justifyContent={'flex-end'} mb={2}>
-              <Tooltip title={i18next.t('events_route.previous_page')}>
-                <IconButton
-                  className={classes.ml2}
-                  color='primary'
-                  disabled={page === 1}
-                  onClick={() => this.handleClickPage('prev')}
-                >
-                  <ChevronLeftRounded />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title={i18next.t('events_route.next_page')}>
-                <IconButton
-                  color='primary'
-                  disabled={pageIsLast}
-                  onClick={() => this.handleClickPage('next')}
-                >
-                  <ChevronRightRounded />
-                </IconButton>
-              </Tooltip>
-            </Box>
           </>
         </MqScreenLoad>
       </Container>

diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx
@@ -186,27 +186,29 @@ class Events extends React.Component<EventsProps, EventsState> {
                 <MqText heading>{i18next.t('events_route.title')}</MqText>
                 Page: {this.pageNavigation()}
               </Box>
-              <Box>
-                <Tooltip title={i18next.t('events_route.previous_page')}>
-                  <IconButton
-                    className={classes.ml2}
-                    color='primary'
-                    disabled={page === 1}
-                    onClick={() => this.handleClickPage('prev')}
-                  >
-                    <ChevronLeftRounded />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title={i18next.t('events_route.next_page')}>
-                  <IconButton
-                    color='primary'
-                    disabled={pageIsLast}
-                    onClick={() => this.handleClickPage('next')}
-                  >
-                    <ChevronRightRounded />
-                  </IconButton>
-                </Tooltip>
-              </Box>
+              {events.length === 0 && (
+                <Box>
+                  <Tooltip title={i18next.t('events_route.previous_page')}>
+                    <IconButton
+                      className={classes.ml2}
+                      color='primary'
+                      disabled={page === 1}
+                      onClick={() => this.handleClickPage('prev')}
+                    >
+                      <ChevronLeftRounded />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={i18next.t('events_route.next_page')}>
+                    <IconButton
+                      color='primary'
+                      disabled={pageIsLast}
+                      onClick={() => this.handleClickPage('next')}
+                    >
+                      <ChevronRightRounded />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              )}
             </Box>
             <Box p={2} className={classes.nav}>
               <MqDatePicker
@@ -311,29 +313,29 @@ class Events extends React.Component<EventsProps, EventsState> {
                     })}
                   </TableBody>
                 </Table>
+                <Box display={'flex'} justifyContent={'flex-end'} mb={2}>
+                  <Tooltip title={i18next.t('events_route.previous_page')}>
+                    <IconButton
+                      className={classes.ml2}
+                      color='primary'
+                      disabled={page === 1}
+                      onClick={() => this.handleClickPage('prev')}
+                    >
+                      <ChevronLeftRounded />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title={i18next.t('events_route.next_page')}>
+                    <IconButton
+                      color='primary'
+                      disabled={pageIsLast}
+                      onClick={() => this.handleClickPage('next')}
+                    >
+                      <ChevronRightRounded />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
               </>
             )}
-            <Box display={'flex'} justifyContent={'flex-end'} mb={2}>
-              <Tooltip title={i18next.t('events_route.previous_page')}>
-                <IconButton
-                  className={classes.ml2}
-                  color='primary'
-                  disabled={page === 1}
-                  onClick={() => this.handleClickPage('prev')}
-                >
-                  <ChevronLeftRounded />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title={i18next.t('events_route.next_page')}>
-                <IconButton
-                  color='primary'
-                  disabled={pageIsLast}
-                  onClick={() => this.handleClickPage('next')}
-                >
-                  <ChevronRightRounded />
-                </IconButton>
-              </Tooltip>
-            </Box>
           </>
         </MqScreenLoad>
       </Container>