@truedat/qx 7.5.7 → 7.5.10

package/src/components/scores/QualityBar.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import { Popup } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import Moment from "react-moment";
@@ -7,7 +7,7 @@ import qualityByControlMode from "../qualityControls/qualityByControlMode";
 import ScoreContext from "./ScoreContext";
 
 export default function QualityBar() {
-  const { score } = useContext(ScoreContext);
+  const { score } = use(ScoreContext);
   const { formatMessage } = useIntl();
   const quality = qualityByControlMode(score);
 
@@ -17,28 +17,28 @@ export default function QualityBar() {
         text: formatMessage({ id: "score.status.failed" }),
       }
     : quality.isEmpty
-    ? {
-        color: "notExecutedDataset",
-        text: formatMessage({ id: "quality.result.no.data" }),
-      }
-    : score.score_content.total_count == 0
-    ? {
-        color: "empyDataset",
-        text: formatMessage(
-          {
-            id: "score.empty_dataset_date",
-          },
-          {
-            date: (
-              <Moment
-                date={score.execution_timestamp}
-                format="YYYY-MM-DD HH:mm"
-              />
+      ? {
+          color: "notExecutedDataset",
+          text: formatMessage({ id: "quality.result.no.data" }),
+        }
+      : score.score_content.total_count == 0
+        ? {
+            color: "empyDataset",
+            text: formatMessage(
+              {
+                id: "score.empty_dataset_date",
+              },
+              {
+                date: (
+                  <Moment
+                    date={score.execution_timestamp}
+                    format="YYYY-MM-DD HH:mm"
+                  />
+                ),
+              }
             ),
           }
-        ),
-      }
-    : quality;
+        : quality;
 
   const propsByColor = {
     red: {
@@ -70,7 +70,9 @@ export default function QualityBar() {
       tooltip: "failed",
     },
   };
+
   const summaryProps = propsByColor[color];
+
   return (
     <div className="quality-bar-wrapper">
       <div className="quality-bar">

package/src/components/scores/Score.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
-import React from "react";
-import { useParams } from "react-router-dom";
+import { useParams, Outlet } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { Segment, Header, Icon } from "semantic-ui-react";
 import { useScoreShow } from "../../hooks/useScores";
@@ -14,7 +13,7 @@ export default function Score({ children }) {
   const { data: score } = useScoreShow(id);
 
   return score ? (
-    <ScoreContext.Provider value={{ score }}>
+    <ScoreContext value={{ score }}>
       <ScoreCrumbs />
       <Segment>
         <Header as="h2">
@@ -25,8 +24,8 @@ export default function Score({ children }) {
           </Header.Content>
         </Header>
         <ScoreTabs />
-        {children}
+        {children ? children : <Outlet />}
       </Segment>
-    </ScoreContext.Provider>
+    </ScoreContext>
   ) : null;
 }

package/src/components/scores/ScoreCrumbs.js

@@ -1,14 +1,14 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { QUALITY_CONTROLS, linkTo } from "@truedat/core/routes";
 import { DateDecorator } from "@truedat/core/services/columnDecorators";
 import ScoreContext from "./ScoreContext";
 
 export default function ScoreCrumbs() {
-  const { score } = useContext(ScoreContext);
+  const { score } = use(ScoreContext);
   const qualityControl = _.prop("quality_control")(score);
   const executionTimestamp = _.prop("execution_timestamp")(score);
 
@@ -17,9 +17,7 @@ export default function ScoreCrumbs() {
       <Breadcrumb.Section as={Link} to={QUALITY_CONTROLS} active={false}>
         <FormattedMessage id="quality_controls.header" />
       </Breadcrumb.Section>
-
       <Breadcrumb.Divider icon="right angle" />
-
       <Breadcrumb.Section
         as={Link}
         to={linkTo.QUALITY_CONTROL_SCORES({

package/src/components/scores/ScoreDetails.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import { FormattedMessage } from "react-intl";
 import { Header, Icon, List, Segment } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
@@ -7,7 +7,7 @@ import columns from "../qualityControls/qualityControlScoresColumns";
 import ScoreContext from "./ScoreContext";
 
 export default function ScoreDetails() {
-  const { score } = useContext(ScoreContext);
+  const { score } = use(ScoreContext);
   const details = _.prop("details")(score);
 
   return (

package/src/components/scores/ScoreEvents.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import React, { useContext } from "react";
+import { use } from "react";
 import { useIntl, FormattedMessage } from "react-intl";
 import { Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
@@ -24,7 +24,7 @@ const columns = [
   },
 ];
 export default function ScoreEvents() {
-  const { score } = useContext(ScoreContext);
+  const { score } = use(ScoreContext);
   const { formatMessage } = useIntl();
 
   const events = _.prop("events")(score);

package/src/components/scores/ScoreGroup.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
-import React from "react";
+import { lazy } from "react";
 import { useIntl } from "react-intl";
-import { useParams, Link } from "react-router-dom";
+import { Link } from "react-router";
+import { useParams } from "react-router";
 import { Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
@@ -10,8 +11,8 @@ import ScoreGroupMessage from "./ScoreGroupMessage";
 import ScoreStatusDecorator from "./ScoreStatusDecorator";
 import ScoreGroupBreadcrumbs from "./ScoreGroupBreadcrumbs";
 
-const DynamicFormViewer = React.lazy(() =>
-  import("@truedat/df/components/DynamicFormViewer")
+const DynamicFormViewer = lazy(
+  () => import("@truedat/df/components/DynamicFormViewer")
 );
 
 const QualityControlLink = ({ id, name, version }) => (

package/src/components/scores/ScoreGroupBreadcrumbs.js

@@ -1,7 +1,6 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { DateTime } from "@truedat/core/components";
 import { MY_SCORE_GROUPS } from "@truedat/core/routes";

package/src/components/scores/ScoreGroupForm.js

@@ -1,14 +1,12 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import { lazy, useState } from "react";
 import { Button, Form, Header } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { TemplateSelector } from "@truedat/core/components";
 import { validateContent } from "@truedat/df/utils";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
-);
+const DynamicForm = lazy(() => import("@truedat/df/components/DynamicForm"));
 
 export default function ScoreGroupForm({ count, onSubmit, onCancel }) {
   const { formatMessage } = useIntl();

package/src/components/scores/ScoreGroupLink.js

@@ -1,6 +1,5 @@
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { DateTime } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/scores/ScoreGroupMessage.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Message } from "semantic-ui-react";

package/src/components/scores/ScoreGroupPopup.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Button, Popup } from "semantic-ui-react";

package/src/components/scores/ScoreGroupsRoutes.js

@@ -0,0 +1,19 @@
+import { Route, Routes } from "react-router";
+import {
+  MY_SCORE_GROUPS,
+  SCORE_GROUP,
+  SCORE,
+  SCORE_EVENTS,
+} from "@truedat/core/routes";
+
+import { MyScoreGroups, ScoreGroup } from ".";
+import "../../styles/scores.less";
+
+export default function ScoreGroupsRoutes() {
+  return (
+    <Routes>
+      <Route index element={<MyScoreGroups />} />
+      <Route path=":id" element={<ScoreGroup />} />
+    </Routes>
+  );
+}

package/src/components/scores/ScoreGroupsTable.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Table, Header, Icon, Label } from "semantic-ui-react";
@@ -11,13 +10,9 @@ import Pagination from "@truedat/core/search/Pagination";
 import ScoreGroupLink from "./ScoreGroupLink";
 
 export const HeaderRow = ({ columns }) => (
-  <Table.Row>
-    {columns.map(({ name: id, textAlign }, i) => (
-      <Table.HeaderCell key={i} textAlign={textAlign}>
-        <FormattedMessage id={id} defaultMessage={id} />
-      </Table.HeaderCell>
-    ))}
-  </Table.Row>
+  <Table.Row>{columns.map(({ name: id, textAlign }, i) => (
+      <Table.HeaderCell key={i} textAlign={textAlign}><FormattedMessage id={id} defaultMessage={id} /></Table.HeaderCell>
+    ))}</Table.Row>
 );
 
 HeaderRow.propTypes = {
@@ -25,15 +20,13 @@ HeaderRow.propTypes = {
 };
 
 export const ScoreGroupRow = ({ columns, ...props }) => (
-  <Table.Row>
-    {columns.map((col, i) => (
+  <Table.Row>{columns.map((col, i) => (
       <Table.Cell
         key={i}
         textAlign={col.textAlign}
         content={columnDecorator(col)(props)}
       />
-    ))}
-  </Table.Row>
+    ))}</Table.Row>
 );
 
 ScoreGroupRow.propTypes = {
@@ -58,9 +51,7 @@ export default function ScoreGroupsTable() {
             TIMEOUT: "red",
           }[color]
         }
-      >
-        {field}
-      </Label>
+      >{field}</Label>
     ) : null;
   };
 
@@ -82,37 +73,13 @@ export default function ScoreGroupsTable() {
     ...statusColumns,
   ];
 
-  return (
-    <>
-      {loading ? <Loading /> : null}
-
-      <>
-        {!_.isEmpty(scoreGroups) ? (
-          <>
-            <Table collapsing striped celled>
-              <Table.Header>
-                <HeaderRow columns={columns} />
-              </Table.Header>
-              <Table.Body>
-                {scoreGroups
-                  ? scoreGroups.map((props, key) => (
-                      <ScoreGroupRow key={key} columns={columns} {...props} />
-                    ))
-                  : null}
-              </Table.Body>
-            </Table>
-            <Pagination />
-          </>
-        ) : null}
-        {_.isEmpty(scoreGroups) ? (
-          <Header as="h4">
-            <Icon name="search" />
-            <Header.Content>
-              <FormattedMessage id="score_groups.search.results.empty" />
-            </Header.Content>
-          </Header>
-        ) : null}
-      </>
-    </>
-  );
+  return (<>{loading ? <Loading /> : null}<>{!_.isEmpty(scoreGroups) ? (
+        <><Table collapsing striped celled><Table.Header><HeaderRow columns={columns} /></Table.Header><Table.Body>{scoreGroups
+                ? scoreGroups.map((props, key) => (
+                    <ScoreGroupRow key={key} columns={columns} {...props} />
+                  ))
+                : null}</Table.Body></Table><Pagination /></>
+      ) : null}{_.isEmpty(scoreGroups) ? (
+        <Header as="h4"><Icon name="search" /><Header.Content><FormattedMessage id="score_groups.search.results.empty" /></Header.Content></Header>
+      ) : null}</></>);
 }

package/src/components/scores/ScoreRoutes.js

@@ -1,31 +1,16 @@
-import React from "react";
-import { Route, Switch } from "react-router-dom";
-import {
-  MY_SCORE_GROUPS,
-  SCORE_GROUP,
-  SCORE,
-  SCORE_EVENTS,
-} from "@truedat/core/routes";
+import { Route, Routes } from "react-router";
+import { SCORE, SCORE_EVENTS } from "@truedat/core/routes";
 
-import { MyScoreGroups, ScoreGroup, Score, ScoreDetails, ScoreEvents } from ".";
+import { Score, ScoreDetails, ScoreEvents } from ".";
 import "../../styles/scores.less";
 
 export default function ScoreRoutes() {
   return (
-    <Switch>
-      <Route exact path={MY_SCORE_GROUPS} render={() => <MyScoreGroups />} />
-      <Route exact path={SCORE_GROUP} render={() => <ScoreGroup />} />
-      <Route
-        path={SCORE}
-        render={() => (
-          <Score>
-            <Switch>
-              <Route exact path={SCORE} render={() => <ScoreDetails />} />
-              <Route exact path={SCORE_EVENTS} render={() => <ScoreEvents />} />
-            </Switch>
-          </Score>
-        )}
-      />
-    </Switch>
+    <Routes>
+      <Route path=":id" element={<Score />}>
+        <Route index element={<ScoreDetails />} />
+        <Route path="events" element={<ScoreEvents />} />
+      </Route>
+    </Routes>
   );
 }

package/src/components/scores/ScoreStatusDecorator.js

@@ -1,8 +1,7 @@
 import _ from "lodash/fp";
 import { FormattedMessage } from "react-intl";
-import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { Icon } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/scores/ScoreTabs.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
-import React from "react";
 import { Menu } from "semantic-ui-react";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation } from "react-router";
+import { useParams } from "react-router";
 import { FormattedMessage } from "react-intl";
 import { linkTo } from "@truedat/core/routes";
 

package/src/components/scores/__tests__/MyScoreGroups.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
 import { useAuthorized } from "@truedat/core/hooks";
@@ -51,7 +50,7 @@ describe("<MyScoreGroups />", () => {
     const { container } = render(<MyScoreGroups />, renderOpts);
 
     await waitFor(() => {
-      expect(container.querySelector(".loading")).toBeNull();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
     });
 
     expect(container).toMatchSnapshot();
@@ -63,7 +62,7 @@ describe("<MyScoreGroups />", () => {
     const { container, queryByText } = render(<MyScoreGroups />, renderOpts);
 
     await waitFor(() => {
-      expect(container.querySelector(".loading")).toBeNull();
+      expect(container.querySelector(".loading")).not.toBeInTheDocument();
     });
 
     expect(queryByText("Filters")).not.toBeInTheDocument();

package/src/components/scores/__tests__/QualityBar.spec.js

@@ -1,55 +1,48 @@
-import React from "react";
-import { render } from "@truedat/test/render";
-import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
+import { render, waitForLoad } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import ScoreContext from "../ScoreContext";
 import QualityBar from "../QualityBar";
 
-const renderOpts = { messages };
-
 describe("<QualityBar />", () => {
-  it("matches the latest snapshot", () => {
+  it("matches the latest snapshot", async () => {
     const context = {
       score: scoreData(),
     };
 
-    const { container } = render(
-      <ScoreContext.Provider value={context}>
+    const rendered = render(
+      <ScoreContext value={context}>
         <QualityBar />
-      </ScoreContext.Provider>,
-      renderOpts
+      </ScoreContext>
     );
-
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("when score is failed", () => {
+  it("when score is failed", async () => {
     const context = {
       score: scoreData({ status: "FAILED" }),
     };
 
-    const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+    const rendered = render(
+      <ScoreContext value={context}>
         <QualityBar />
-      </ScoreContext.Provider>,
-      renderOpts
+      </ScoreContext>
     );
-
-    expect(queryByText(/Failed/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/failed/i)).toBeInTheDocument();
   });
 
-  it("when score is empty", () => {
+  it("when score is empty", async () => {
     const context = {
       score: scoreData({ score_content: undefined }),
     };
 
-    const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+    const rendered = render(
+      <ScoreContext value={context}>
         <QualityBar />
-      </ScoreContext.Provider>,
-      renderOpts
+      </ScoreContext>
     );
-
-    expect(queryByText(/quality.result.no.data/i)).toBeInTheDocument();
+    await waitForLoad(rendered);
+    expect(rendered.queryByText(/quality.result.no.data/i)).toBeInTheDocument();
   });
 });

package/src/components/scores/__tests__/Score.spec.js

@@ -1,12 +1,11 @@
 import _ from "lodash/fp";
-import React, { version } from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import { useScoreShow } from "@truedat/qx/hooks/useScores";
 import Score from "../Score";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useParams: () => ({ id: "8", version: "1" }),
 }));
 

package/src/components/scores/__tests__/ScoreCrumbs.spec.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { render } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
@@ -14,9 +13,9 @@ describe("<ScoreCrumbs />", () => {
       score: scoreData(),
     };
     const { container } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreCrumbs />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 
@@ -28,9 +27,9 @@ describe("<ScoreCrumbs />", () => {
       score: scoreData({ execution_timestamp: undefined }),
     };
     const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreCrumbs />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 

package/src/components/scores/__tests__/ScoreDetails.spec.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import { render } from "@truedat/test/render";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
 import ScoreContext from "../ScoreContext";
@@ -14,9 +13,9 @@ describe("<ScoreDetails />", () => {
       score: scoreData(),
     };
     const { container } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreDetails />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
 
@@ -28,9 +27,9 @@ describe("<ScoreDetails />", () => {
       score: scoreData({ details: undefined }),
     };
     const { queryByText } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreDetails />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );
     expect(queryByText(/Details/i)).not.toBeInTheDocument();

package/src/components/scores/__tests__/ScoreEvents.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { scoreData } from "@truedat/qx/components/scores/__tests__/__fixtures__/scoreHelper";
 import { messages } from "@truedat/qx/components/__tests__/__fixtures__/helper";
@@ -13,9 +12,9 @@ describe("<ScoreEvents />", () => {
       score: scoreData(),
     };
     const { container } = render(
-      <ScoreContext.Provider value={context}>
+      <ScoreContext value={context}>
         <ScoreEvents />
-      </ScoreContext.Provider>,
+      </ScoreContext>,
       renderOpts
     );