Client side search for tables no longer debounce (#2807)

Relates to #2793.

Removed debounce from client-side search for tables because it conflicted with react-table's search mechanism.

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -43,7 +43,7 @@ interface IDataTableProps {
   onPrimarySelectActionClick: any; // figure out type
   secondarySelectActions?: IActionButtonProps[];
   onSelectSingleRow?: (value: Row) => void;
-  clientSidePagination?: boolean;
+  isClientSidePagination?: boolean;
 }
 
 const CLIENT_SIDE_DEFAULT_PAGE_SIZE = 20;
@@ -70,7 +70,7 @@ const DataTable = ({
   primarySelectActionButtonText,
   secondarySelectActions,
   onSelectSingleRow,
-  clientSidePagination,
+  isClientSidePagination,
 }: IDataTableProps): JSX.Element => {
   const { resetSelectedRows } = useContext(TableContext);
 
@@ -288,7 +288,7 @@ const DataTable = ({
     showMarkAllPages &&
     !isAllPagesSelected;
 
-  const pageOrRows = clientSidePagination ? page : rows;
+  const pageOrRows = isClientSidePagination ? page : rows;
 
   useEffect(() => {
     setPageSize(CLIENT_SIDE_DEFAULT_PAGE_SIZE);
@@ -396,7 +396,7 @@ const DataTable = ({
           </tbody>
         </table>
       </div>
-      {clientSidePagination && (
+      {isClientSidePagination && (
         <div className={`${baseClass}__pagination`}>
           <Button
             variant="unstyled"

frontend/components/TableContainer/TableContainer.tsx

@@ -61,7 +61,8 @@ interface ITableContainerProps {
   onSelectSingleRow?: (value: Row) => void;
   filteredCount?: number;
   searchToolTipText?: string;
-  clientSidePagination?: boolean;
+  isClientSidePagination?: boolean;
+  isClientSideSearch?: boolean;
 }
 
 const baseClass = "table-container";
@@ -107,7 +108,8 @@ const TableContainer = ({
   onSelectSingleRow,
   filteredCount,
   searchToolTipText,
-  clientSidePagination,
+  isClientSidePagination,
+  isClientSideSearch,
 }: ITableContainerProps): JSX.Element => {
   const [searchQuery, setSearchQuery] = useState("");
   const [sortHeader, setSortHeader] = useState(defaultSortHeader || "");
@@ -170,7 +172,7 @@ const TableContainer = ({
 
     // Something besides the pageIndex has changed; we want to set it back to 0.
     if (onQueryChange) {
-      if (!hasPageIndexChangedRef.current) {
+      if (!hasPageIndexChangedRef.current && !isClientSideSearch) {
         const updateQueryData = {
           ...queryData,
           pageIndex: 0,
@@ -321,9 +323,9 @@ const TableContainer = ({
               onPrimarySelectActionClick={onPrimarySelectActionClick}
               secondarySelectActions={secondarySelectActions}
               onSelectSingleRow={onSelectSingleRow}
-              clientSidePagination={clientSidePagination}
+              isClientSidePagination={isClientSidePagination}
             />
-            {!disablePagination && !clientSidePagination && (
+            {!disablePagination && !isClientSidePagination && (
               <Pagination
                 resultsOnCurrentPage={data.length}
                 currentPage={pageIndex}

frontend/components/forms/Form.jsx

@@ -31,8 +31,6 @@ export default (WrappedComponent, { fields, validate = defaultValidate }) => {
         errors: {},
         formData,
       };
-
-      return false;
     }
 
     componentWillMount() {

frontend/components/queries/PackQueriesListWrapper/PackQueriesListWrapper.tsx

@@ -136,6 +136,7 @@ const PackQueriesListWrapper = ({
           searchable
           disablePagination
           isAllPagesSelected={false}
+          isClientSideSearch
         />
       )}
     </div>

frontend/pages/Homepage/cards/Software/Software.tsx

@@ -98,6 +98,7 @@ const Software = ({
               isAllPagesSelected={false}
               searchable
               disableActionButton
+              isClientSideSearch
             />
           </>
         </Modal>

frontend/pages/RegistrationPage/RegistrationPage.jsx

@@ -29,8 +29,6 @@ export class RegistrationPage extends Component {
       page: 1,
       pageProgress: 1,
     };
-
-    return false;
   }
 
   componentWillMount() {

frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx

@@ -432,6 +432,7 @@ const MembersPage = ({
           showMarkAllPages={false}
           isAllPagesSelected={false}
           searchable={memberIds.length > 0 || searchString !== ""}
+          isClientSideSearch
         />
       )}
       {showAddMemberModal ? (

frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx

@@ -239,6 +239,7 @@ const TeamManagementPage = (): JSX.Element => {
           showMarkAllPages={false}
           isAllPagesSelected={false}
           searchable={teams.length > 0 && searchString !== ""}
+          isClientSideSearch
         />
       )}
       {showCreateTeamModal ? (

frontend/pages/admin/UserManagementPage/UserManagementPage.jsx

@@ -630,6 +630,7 @@ export class UserManagementPage extends Component {
             resultsTitle={"users"}
             emptyComponent={EmptyUsers}
             searchable
+            isClientSideSearch
           />
         )}
         {renderCreateUserModal()}

frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx

@@ -678,7 +678,8 @@ const HostDetailsPage = ({
               searchable
               wideSearch
               filteredCount={usersState.length}
-              clientSidePagination
+              isClientSidePagination
+              isClientSideSearch
             />
           )}
         </div>
@@ -724,7 +725,8 @@ const HostDetailsPage = ({
                 searchable
                 wideSearch
                 filteredCount={softwareState.length}
-                clientSidePagination
+                isClientSidePagination
+                isClientSideSearch
               />
             )}
           </>

frontend/pages/packs/ManagePacksPage/components/PacksListWrapper/PacksListWrapper.tsx

@@ -144,6 +144,7 @@ const PacksListWrapper = ({
         primarySelectActionButtonText={"Delete"}
         secondarySelectActions={secondarySelectActions}
         emptyComponent={NoPacksComponent}
+        isClientSideSearch
       />
     </div>
   );

frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx

@@ -106,6 +106,7 @@ const QueriesListWrapper = ({
         primarySelectActionButtonText={"Delete"}
         emptyComponent={NoQueriesComponent}
         customControl={customControl}
+        isClientSideSearch
       />
     </div>
   ) : null;

frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesTableConfig.tsx

@@ -127,7 +127,7 @@ const generateTableHeaders = (currentUser: IUser): IDataColumn[] => {
       ),
       accessor: "updated_at",
       Cell: (cellProps: ICellProps): JSX.Element => (
-        <TextCell value={format(new Date(cellProps.cell.value), "MM/DD/YY")} />
+        <TextCell value={format(new Date(cellProps.cell.value), "MM/dd/yy")} />
       ),
     },
   ];

go.sum

@@ -212,6 +212,7 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/denis-tingajkin/go-header v0.4.2 h1:jEeSF4sdv8/3cT/WY8AgDHUoItNSoEZ7qg9dX7pc218=
 github.com/denis-tingajkin/go-header v0.4.2/go.mod h1:eLRHAVXzE5atsKAnNRDB90WHCFFnBUn4RN0nRcs1LJA=
+github.com/denisenkom/go-mssqldb v0.10.0 h1:QykgLZBorFE95+gO3u9esLd0BmbvpWp0/waNNZfHBM8=
 github.com/denisenkom/go-mssqldb v0.10.0/go.mod h1:xbL0rPBG9cCiLr28tMa8zpbdarY27NDyej4t/EjAShU=
 github.com/dgraph-io/badger/v2 v2.2007.2 h1:EjjK0KqwaFMlPin1ajhP943VPENHJdEz1KLIegjaI3k=
 github.com/dgraph-io/badger/v2 v2.2007.2/go.mod h1:26P/7fbL4kUZVEVKLAKXkBXKOydDmM2p1e+NhhnBCAE=
@@ -345,6 +346,7 @@ github.com/gogo/protobuf v1.3.2 h1:Ov1cvc58UF3b5XjBnZv7+opcTcQFZebYjWzi34vdm4Q=
 github.com/gogo/protobuf v1.3.2/go.mod h1:P1XiOD3dCwIKUDQYPy72D8LYyHL2YPYrpS2s69NZV8Q=
 github.com/golang-jwt/jwt/v4 v4.0.0 h1:RAqyYixv1p7uEnocuy8P1nru5wprCh/MH2BIlW5z5/o=
 github.com/golang-jwt/jwt/v4 v4.0.0/go.mod h1:/xlHOz8bRuivTWchD4jCa+NbatV+wEUSzwAxVc6locg=
+github.com/golang-sql/civil v0.0.0-20190719163853-cb61b32ac6fe h1:lXe2qZdvpiX5WZkZR4hgp4KJVfY3nMkvmwbVkpv1rVY=
 github.com/golang-sql/civil v0.0.0-20190719163853-cb61b32ac6fe/go.mod h1:8vg3r2VgvsThLBIFL93Qb5yWzgyZWhEmBwUJWevAkK0=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b h1:VKtxabqXZkF25pY9ekfRL6a582T4P37/31XEstQ5p58=
 github.com/golang/glog v0.0.0-20160126235308-23def4e6c14b/go.mod h1:SBH7ygxi8pfUlaOkMMuAQtPIUF8ecWP5IEl/CR7VP2Q=
@@ -646,6 +648,7 @@ github.com/kyoh86/exportloopref v0.1.8/go.mod h1:1tUcJeiioIs7VWe5gcOObrux3lb66+s
 github.com/lib/pq v1.0.0/go.mod h1:5WUZQaWbwv1U+lTReE5YruASi9Al49XbQIvNi/34Woo=
 github.com/lib/pq v1.9.0 h1:L8nSXQQzAYByakOFMTwpjRoHsMJklur4Gi59b6VivR8=
 github.com/lib/pq v1.9.0/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
+github.com/lib/pq v1.10.1 h1:6VXZrLU0jHBYyAqrSPa+MgPfnSvTPuMgK+k0o5kVFWo=
 github.com/lib/pq v1.10.1/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
 github.com/logrusorgru/aurora v0.0.0-20181002194514-a7b3b318ed4e h1:9MlwzLdW7QSDrhDjFlsEYmxpFyIoXmYRon3dt0io31k=
 github.com/logrusorgru/aurora v0.0.0-20181002194514-a7b3b318ed4e/go.mod h1:7rIyQOR62GCctdiQpZ/zOJlFyk6y+94wXzv6RNZgaR4=

package.json

@@ -23,6 +23,7 @@
     "bourbon": "^5.0.0",
     "classnames": "2.2.5",
     "core-js": "3",
+    "date-fns": "^2.25.0",
     "es6-object-assign": "1.1.0",
     "es6-promise": "4.2.4",
     "expect": "1.20.2",
@@ -55,7 +56,7 @@
     "react-router-redux": "4.0.8",
     "react-router-transition": "0.1.1",
     "react-select": "^1",
-    "react-table": "^7.6.3",
+    "react-table": "7.7.0",
     "react-tabs": "^3.2.0",
     "react-tooltip": "^4.2.15",
     "redux": "4.0.5",
@@ -166,7 +167,7 @@
     "@types/react-router": "^3.0.0",
     "@types/react-router-redux": "^5.0.18",
     "@types/react-select": "1.3.0",
-    "@types/react-table": "^7.0.28",
+    "@types/react-table": "7.7.7",
     "@types/react-tabs": "^2.3.2",
     "@types/react-tooltip": "^4.2.4",
     "@typescript-eslint/eslint-plugin": "^4.15.2",

yarn.lock

@@ -1759,10 +1759,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-table@^7.0.28":
+"@types/react-table@7.7.7":
-  version "7.0.28"
+  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.28.tgz#763383c3e7a285892ee64f311ee97a9c254b2bb0"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.7.tgz#503be1ce2e06857c11b281629f539358d32671f9"
-  integrity sha512-crPm70S2KYGj3HJ2zCoeT0t8tdIvKDKCClMd1up3Gi/EDiTZraj3JFUsEL3+oXGSyv+n0EGGAf9a+0XsmdGpXA==
+  integrity sha512-3l2TP4detx9n5Jt44XhdH7Ku6PYwz6kB83P8W+YcBMUkIHtiw2gsCCcq9c4wyCIcdSwcTlWZ9WqH4PF7Yfbprg==
   dependencies:
     "@types/react" "*"
 
@@ -4810,6 +4810,11 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^2.25.0:
+  version "2.25.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
+  integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -11074,10 +11079,10 @@ react-select@^1:
     prop-types "^15.5.8"
     react-input-autosize "^2.1.2"
 
-react-table@^7.6.3:
+react-table@7.7.0:
-  version "7.6.3"
+  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.6.3.tgz#76434392b3f62344bdb704f5b227c2f29c1ffb14"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
-  integrity sha512-hfPF13zDLxPMpLKzIKCE8RZud9T/XrRTsaCIf8zXpWZIZ2juCl7qrGpo3AQw9eAetXV5DP7s2GDm+hht7qq5Dw==
+  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
 
 react-tabs@^3.2.0:
   version "3.2.0"