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.
2024-11-06 08:55:24 +00:00 · 2021-11-04 21:16:42 -07:00 · 2021-11-04 21:16:42 -07:00 · f1ed172ac5
commit f1ed172ac5
parent 76c5e2944f
16 changed files with 42 additions and 26 deletions
--- a/frontend/components/TableContainer/DataTable/DataTable.tsx
+++ b/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"
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/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}
--- a/frontend/components/forms/Form.jsx
+++ b/frontend/components/forms/Form.jsx
@ -31,8 +31,6 @@ export default (WrappedComponent, { fields, validate = defaultValidate }) => {
        errors: {},
        formData,
      };
-
-      return false;
    }

    componentWillMount() {
--- a/frontend/components/queries/PackQueriesListWrapper/PackQueriesListWrapper.tsx
+++ b/frontend/components/queries/PackQueriesListWrapper/PackQueriesListWrapper.tsx
@ -136,6 +136,7 @@ const PackQueriesListWrapper = ({
          searchable
          disablePagination
          isAllPagesSelected={false}
+          isClientSideSearch
        />
      )}
    </div>
--- a/frontend/pages/Homepage/cards/Software/Software.tsx
+++ b/frontend/pages/Homepage/cards/Software/Software.tsx
@ -98,6 +98,7 @@ const Software = ({
              isAllPagesSelected={false}
              searchable
              disableActionButton
+              isClientSideSearch
            />
          </>
        </Modal>
--- a/frontend/pages/RegistrationPage/RegistrationPage.jsx
+++ b/frontend/pages/RegistrationPage/RegistrationPage.jsx
@ -29,8 +29,6 @@ export class RegistrationPage extends Component {
      page: 1,
      pageProgress: 1,
    };
-
-    return false;
  }

  componentWillMount() {
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/MembersPagePage/MembersPage.tsx
+++ b/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 ? (
--- a/frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx
+++ b/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 ? (
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
+++ b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
@ -630,6 +630,7 @@ export class UserManagementPage extends Component {
            resultsTitle={"users"}
            emptyComponent={EmptyUsers}
            searchable
+            isClientSideSearch
          />
        )}
        {renderCreateUserModal()}
--- a/frontend/pages/hosts/HostDetailsPage/HostDetailsPage.tsx
+++ b/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
              />
            )}
          </>
--- a/frontend/pages/packs/ManagePacksPage/components/PacksListWrapper/PacksListWrapper.tsx
+++ b/frontend/pages/packs/ManagePacksPage/components/PacksListWrapper/PacksListWrapper.tsx
@ -144,6 +144,7 @@ const PacksListWrapper = ({
        primarySelectActionButtonText={"Delete"}
        secondarySelectActions={secondarySelectActions}
        emptyComponent={NoPacksComponent}
+        isClientSideSearch
      />
    </div>
  );
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
@ -106,6 +106,7 @@ const QueriesListWrapper = ({
        primarySelectActionButtonText={"Delete"}
        emptyComponent={NoQueriesComponent}
        customControl={customControl}
+        isClientSideSearch
      />
    </div>
  ) : null;
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesTableConfig.tsx
+++ b/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")} />
      ),
    },
  ];
--- a/go.sum
+++ b/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=
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/yarn.lock
@ -1759,10 +1759,10 @@
  dependencies:
    "@types/react" "*"

-"@types/react-table@^7.0.28":
-  version "7.0.28"
-  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.28.tgz#763383c3e7a285892ee64f311ee97a9c254b2bb0"
-  integrity sha512-crPm70S2KYGj3HJ2zCoeT0t8tdIvKDKCClMd1up3Gi/EDiTZraj3JFUsEL3+oXGSyv+n0EGGAf9a+0XsmdGpXA==
+"@types/react-table@7.7.7":
+  version "7.7.7"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.7.tgz#503be1ce2e06857c11b281629f539358d32671f9"
+  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:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.6.3.tgz#76434392b3f62344bdb704f5b227c2f29c1ffb14"
-  integrity sha512-hfPF13zDLxPMpLKzIKCE8RZud9T/XrRTsaCIf8zXpWZIZ2juCl7qrGpo3AQw9eAetXV5DP7s2GDm+hht7qq5Dw==
+react-table@7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
+  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==

 react-tabs@^3.2.0:
  version "3.2.0"