Support for dynamic pagination

dashboard/src/actions/datasetListActions.js

@@ -38,7 +38,10 @@ export const fetchPublicDatasets = (page) => async (dispatch, getState) => {
     if (response.status === 200 && response.data) {
       const startIdx = (page - 1) * perPage;
 
-      if (publicData.length === 0) {
+      if (
+        publicData.length === 0 ||
+        publicData.length !== response.data.total
+      ) {
         publicData = new Array(response.data.total);
       }
       publicData.splice(

dashboard/src/assets/constants/browsingPageConstants.js

@@ -7,3 +7,4 @@ export const PER_PAGE_OPTIONS = [
   { title: "20", value: 20 },
   { title: "50", value: 50 },
 ];
+export const START_OFFSET = 0;

dashboard/src/modules/components/DatePickerComponent/index.jsx

@@ -8,50 +8,57 @@ import {
   Split,
   SplitItem,
   isValidDate,
-  yyyyMMddFormat,
 } from "@patternfly/react-core";
 import React, { useState } from "react";
 import { applyFilter, setFilterKeys } from "actions/datasetListActions";
+import { useDispatch, useSelector } from "react-redux";
 
 import { getTodayMidnightUTCDate } from "utils/dateFunctions";
-import { useDispatch } from "react-redux";
 
 const DatePickerWidget = (props) => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState(getTodayMidnightUTCDate());
   const dispatch = useDispatch();
+  const { filter } = useSelector((state) => state.datasetlist);
 
-  const toValidator = (date) =>
-    isValidDate(from) && date >= from
-      ? ""
-      : 'The "to" date must be after the "from" date';
+  const [isEndDateError, setIsEndDateError] = useState(false);
 
   const fromValidator = (date) =>
     date <= getTodayMidnightUTCDate()
       ? ""
       : "The Uploaded date cannot be in the future!";
 
+  const toValidator = (date) =>
+    isValidDate(filter.startDate) && date >= filter.startDate
+      ? ""
+      : 'The "to" date must be after the "from" date';
+
   const onFromChange = (_str, date) => {
-    setFrom(new Date(date));
+    dispatch(setFilterKeys(new Date(date), filter.endDate));
+    if (filter.endDate) {
+      checkEndDate(date, filter.endDate);
+    }
   };
 
   const onToChange = (_str, date) => {
-    if (isValidDate(date)) {
-      setTo(yyyyMMddFormat(date));
+    if (isValidDate(new Date(date))) {
+      dispatch(setFilterKeys(filter.startDate, new Date(date)));
     }
+    checkEndDate(filter.startDate, date);
+  };
+  const checkEndDate = (fromDate, toDate) => {
+    new Date(fromDate) >= new Date(toDate)
+      ? setIsEndDateError(true)
+      : setIsEndDateError(false);
   };
-
   const filterByDate = () => {
-    if (from) {
-      dispatch(setFilterKeys(from, new Date(to)));
+    if (filter.startDate) {
       dispatch(applyFilter());
       props.setPage(CONSTANTS.START_PAGE_NUMBER);
     }
   };
 
   return (
     <>
-      <Split>
+      <Split className="browsing-page-date-picker">
         <SplitItem style={{ padding: "6px 12px 0 12px" }}>
           Filter by date
         </SplitItem>
@@ -66,16 +73,23 @@ const DatePickerWidget = (props) => {
         <SplitItem style={{ padding: "6px 12px 0 12px" }}>to</SplitItem>
         <SplitItem>
           <DatePicker
-            value={yyyyMMddFormat(to)}
             onChange={onToChange}
-            isDisabled={!isValidDate(from)}
-            rangeStart={from}
+            isDisabled={!isValidDate(filter.startDate)}
+            rangeStart={filter.startDate}
             validators={[toValidator]}
             aria-label="End date"
             placeholder="YYYY-MM-DD"
+            helperText={
+              isEndDateError && `The "to" date must be after the "from" date`
+            }
           />
         </SplitItem>
-        <Button variant="control" onClick={filterByDate}>
+        <Button
+          variant="control"
+          onClick={filterByDate}
+          className="filter-btn"
+          isDisabled={isEndDateError}
+        >
           Update
         </Button>
       </Split>

dashboard/src/modules/components/DatePickerComponent/index.less

@@ -1,3 +1,8 @@
 .filterInputGroup {
   margin-left: 10px;
 }
+.browsing-page-date-picker {
+  .pf-c-date-picker__helper-text {
+    color: #c9190b;
+  }
+}

dashboard/src/modules/components/PaginationComponent/index.jsx

@@ -30,9 +30,8 @@ const TablePagination = ({ page, setPage }) => {
   };
   const fetchData = (_event, newPage, newPerPage = perPage) => {
     const startIdx = (newPage - 1) * newPerPage;
-    const endIdx = newPage * newPerPage;
     let left = startIdx;
-    let right = endIdx;
+    let right = startIdx + newPerPage - 1;
     while (left < right) {
       if (publicData[left]) {
         left++;

dashboard/src/modules/components/TableComponent/common-components.jsx

@@ -93,7 +93,12 @@ export const SearchBox = (props) => {
         onKeyPress={(e) => handleKeyPress(e)}
         onChange={(value) => setSearchKey(value)}
       />
-      <Button variant="control" onClick={search} aria-label="searchButton">
+      <Button
+        variant="control"
+        onClick={search}
+        aria-label="searchButton"
+        className="filter-btn"
+      >
         <SearchIcon />
       </Button>
     </InputGroup>

dashboard/src/modules/components/TableComponent/index.less

@@ -39,3 +39,6 @@ table th {
 .searchInputGroup {
   width: 25vw !important;
 }
+.filter-btn {
+  height: 36px;
+}

dashboard/src/reducers/datasetListReducer.js

@@ -5,7 +5,7 @@ const initialState = {
   publicData: [],
   favoriteRepoNames: [],
   tableData: [],
-  offset: CONSTANTS.START_PAGE_NUMBER - 1,
+  offset: CONSTANTS.START_OFFSET,
   limit: CONSTANTS.INITIAL_PAGE_LIMIT,
   perPage: CONSTANTS.DEFAULT_PER_PAGE,
   searchKey: "",