@truedat/core 4.53.8 → 4.53.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.53.10] 2022-10-17
+
+### Added
+
+- [TD-4177] `CursorPagination` component for paginating GraphQL connections
+
 ## [4.53.8] 2022-10-17
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.53.8",
+  "version": "4.53.10",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.53.8",
+    "@truedat/test": "4.53.10",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,7 +88,7 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "^3.6.4",
+    "@apollo/client": "^3.7.0",
     "axios": "^0.27.2",
     "immutable": "^4.0.0-rc.12",
     "is-hotkey": "^0.1.6",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "56190c74eddc249134cb973cc21470c36a4701d0"
+  "gitHead": "66304ff9ac3d25820b3bec2d0147f21cb0a2c579"
 }

package/src/components/CursorPagination.js

@@ -0,0 +1,70 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import queryString from "query-string";
+import { useLocation, Link } from "react-router-dom";
+import { Menu } from "semantic-ui-react";
+
+export const CursorPagination = ({ pageInfo }) => {
+  const { search, ...location } = useLocation();
+  const { endCursor, startCursor, hasPreviousPage, hasNextPage } =
+    pageInfo || {};
+
+  // eslint-disable-next-line no-unused-vars
+  const { after, before, ...rest } = queryString.parse(search);
+  const next =
+    hasNextPage && endCursor
+      ? {
+          ...location,
+          search: "?" + queryString.stringify({ ...rest, after: endCursor }),
+        }
+      : null;
+  const prev =
+    hasPreviousPage && startCursor
+      ? {
+          ...location,
+          search: "?" + queryString.stringify({ ...rest, before: startCursor }),
+        }
+      : null;
+  const latest = {
+    ...location,
+    search: _.isEmpty(rest) ? null : "?" + queryString.stringify(rest),
+  };
+  return (
+    <Menu pagination role="navigation">
+      <Menu.Item
+        as={next ? Link : null}
+        link={!!next}
+        content="«"
+        disabled={!hasNextPage}
+        to={next ? latest : null}
+        replace={next ? true : null}
+        aria-label="Latest"
+      />
+      <Menu.Item
+        as={next ? Link : null}
+        link={!!next}
+        content="⟨"
+        disabled={!hasNextPage}
+        to={next}
+        replace={next ? true : null}
+        aria-label="Later"
+      />
+      <Menu.Item
+        as={prev ? Link : null}
+        link={!!prev}
+        content="⟩"
+        disabled={!hasPreviousPage}
+        to={prev}
+        replace={prev ? true : null}
+        aria-label="Earlier"
+      />
+    </Menu>
+  );
+};
+
+CursorPagination.propTypes = {
+  pageInfo: PropTypes.object,
+};
+
+export default CursorPagination;

package/src/components/DateTime.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Moment from "react-moment";
 
-export const DateTime = ({ value, className }) =>
+export const DateTime = ({ value, className, locale }) =>
   value ? (
     <Moment className={className} date={value} format="YYYY-MM-DD HH:mm" />
   ) : null;
@@ -10,6 +10,7 @@ export const DateTime = ({ value, className }) =>
 DateTime.propTypes = {
   value: PropTypes.string,
   className: PropTypes.string,
+  locale: PropTypes.string,
 };
 
 export default DateTime;

package/src/components/__tests__/CursorPagination.spec.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import CursorPagination from "../CursorPagination";
+
+describe("<CursorPagination />", () => {
+  it("matches latest snapshot", () => {
+    const pageInfo = {
+      startCursor: "FOO",
+      endCursor: "BAR",
+      hasNextPage: true,
+      hasPreviousPage: true,
+    };
+    const { container } = render(<CursorPagination pageInfo={pageInfo} />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/__tests__/__snapshots__/CursorPagination.spec.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CursorPagination /> matches latest snapshot 1`] = `
+<div>
+  <div
+    class="ui pagination menu"
+    role="navigation"
+  >
+    <a
+      aria-label="Latest"
+      class="link item"
+      href="/"
+    >
+      «
+    </a>
+    <a
+      aria-label="Later"
+      class="link item"
+      href="/?after=BAR"
+    >
+      ⟨
+    </a>
+    <a
+      aria-label="Earlier"
+      class="link item"
+      href="/?before=FOO"
+    >
+      ⟩
+    </a>
+  </div>
+</div>
+`;

package/src/components/index.js

@@ -9,6 +9,7 @@ import CatalogMenu from "./CatalogMenu";
 import Comments from "./Comments";
 import CommentsLoader from "./CommentsLoader";
 import ConfirmModal from "./ConfirmModal";
+import CursorPagination from "./CursorPagination";
 import DashboardMenu from "./DashboardMenu";
 import Date from "./Date";
 import DateFilter from "./DateFilter";
@@ -58,6 +59,7 @@ export {
   Comments,
   CommentsLoader,
   ConfirmModal,
+  CursorPagination,
   DashboardMenu,
   Date,
   DateFilter,

package/src/routes.js

@@ -67,6 +67,8 @@ export const IMPLEMENTATION_CONCEPT_LINKS_NEW =
 export const IMPLEMENTATION_EDIT = "/implementations/:implementation_id/edit";
 export const IMPLEMENTATION_EVENTS =
   "/implementations/:implementation_id/events";
+export const IMPLEMENTATION_EXECUTIONS =
+  "/implementations/:implementation_id/executions";
 export const IMPLEMENTATION_HISTORY =
   "/implementations/:implementation_id/history";
 export const IMPLEMENTATION_MOVE = "/implementations/:implementation_id/move";
@@ -250,6 +252,7 @@ const routes = {
   IMPLEMENTATION_CONCEPT_LINKS_NEW,
   IMPLEMENTATION_EDIT,
   IMPLEMENTATION_EVENTS,
+  IMPLEMENTATION_EXECUTIONS,
   IMPLEMENTATION_HISTORY,
   IMPLEMENTATION_MOVE,
   IMPLEMENTATION_NEW,