@truedat/df 5.17.2 → 5.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "5.17.2",
+  "version": "5.18.0",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -87,8 +87,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.17.2",
-    "@truedat/core": "5.17.2",
+    "@truedat/auth": "5.18.0",
+    "@truedat/core": "5.18.0",
     "decode-uri-component": "^0.2.2",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -109,5 +109,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "1120a6efa4dfec423696957c5e72d752c9db284f"
+  "gitHead": "2cd5914eafeae16400d4ccccfabc00cd2c84c80f"
 }

package/src/components/DynamicFormViewer.js

@@ -1,7 +1,10 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Message } from "semantic-ui-react";
+import { Message, Segment } from "semantic-ui-react";
+import { useTemplate } from "@truedat/core/hooks";
+import Loading from "@truedat/core/components/Loading";
 import { parseGroups } from "../utils";
 import FieldGroupDetail from "./FieldGroupDetail";
 
@@ -50,4 +53,38 @@ DynamicFormViewer.propTypes = {
   editFunctions: PropTypes.func,
 };
 
-export default DynamicFormViewer;
+const DynamicFormViewerWithHook = (props) => {
+  const { data, loading } = useTemplate({
+    name: props.template,
+    domainIds: props.domainIds,
+  });
+  const newProps = {
+    ...props,
+    template: data?.template,
+  };
+  return loading ? (
+    <Segment>
+      <Loading />
+    </Segment>
+  ) : (
+    <DynamicFormViewer {...newProps} />
+  );
+};
+
+DynamicFormViewerWithHook.propTypes = {
+  template: PropTypes.string,
+  domainIds: PropTypes.arrayOf(PropTypes.number),
+};
+
+const DynamicFormViewerFetcher = (props) =>
+  _.isString(props?.template) ? (
+    <DynamicFormViewerWithHook {...props} />
+  ) : (
+    <DynamicFormViewer {...props} />
+  );
+
+DynamicFormViewerFetcher.propTypes = {
+  template: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+};
+
+export default DynamicFormViewerFetcher;

package/src/messages/en.js

@@ -162,6 +162,7 @@ export default {
   "template.scope.qe": "Quality Executions",
   "template.scope.remediation": "Remediation plan",
   "template.scope.ri": "Quality Implementation",
+  "template.scope.quality_control": "Quality Control",
   "template.widget.copy.char.separator.format": "Char separation format",
   "template.widget.copy.fixed.column": "Fixed width column format",
   "template.widget.copy.without.fixed.column": "Format without char separation",

package/src/messages/es.js

@@ -163,6 +163,7 @@ export default {
   "template.scope.qe": "Ejecuciones de calidad",
   "template.scope.remediation": "Plan de remediación",
   "template.scope.ri": "Implementación de calidad",
+  "template.scope.quality_control": "Control de calidad",
   "template.widget.copy.char.separator.format":
     "Formato de separación por caracter",
   "template.widget.copy.fixed.column": "Formato de columna de ancho fijo",

package/src/templates/components/Template.js

@@ -1,30 +1,72 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Header, Icon, Segment } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import {
+  Button,
+  Header,
+  Icon,
+  Segment,
+  Grid,
+  Container,
+} from "semantic-ui-react";
 import { connect } from "react-redux";
+import { ConfirmModal } from "@truedat/core/components";
 import { deleteTemplate, updateTemplate } from "../routines";
 import TemplateCrumbs from "./TemplateCrumbs";
 import TemplateForm from "./templateForm/TemplateForm";
 
-export const Template = ({ template, updateTemplate, deleteTemplate }) =>
+export const Template = ({
+  template,
+  updateTemplate,
+  deleteTemplate,
+  templateDeleting,
+  templateSaving,
+}) =>
   _.isUndefined(template.id) ? null : (
     <>
       <TemplateCrumbs name={template?.label} />
       <Segment>
-        <Header as="h2">
-          <Icon name="file code outline" circular />
-          <Header.Content>
-            {template?.label}
-            <Header.Subheader>{template?.name}</Header.Subheader>
-          </Header.Content>
-        </Header>
-        <TemplateForm
-          template={template}
-          onDelete={deleteTemplate}
-          onSubmit={updateTemplate}
-          editMode
-        />
+        <Grid>
+          <Grid.Column width={8}>
+            <Header as="h2">
+              <Icon name="file code outline" circular />
+              <Header.Content>
+                {template?.label}
+                <Header.Subheader>{template?.name}</Header.Subheader>
+              </Header.Content>
+            </Header>
+          </Grid.Column>
+          <Grid.Column width={8}>
+            <Container textAlign="right">
+              {template.id && (
+                <ConfirmModal
+                  icon="trash"
+                  trigger={
+                    <Button
+                      negative
+                      icon="trash"
+                      loading={templateDeleting}
+                      disabled={templateSaving || templateDeleting}
+                    />
+                  }
+                  header={
+                    <FormattedMessage id="template.actions.delete.confirmation.header" />
+                  }
+                  content={
+                    <FormattedMessage
+                      id="template.actions.delete.confirmation.content"
+                      values={{ name: <i>{template.name}</i> }}
+                    />
+                  }
+                  onConfirm={() => deleteTemplate(template)}
+                />
+              )}
+            </Container>
+          </Grid.Column>
+        </Grid>
+
+        <TemplateForm template={template} onSubmit={updateTemplate} editMode />
       </Segment>
     </>
   );
@@ -33,9 +75,15 @@ Template.propTypes = {
   deleteTemplate: PropTypes.func,
   template: PropTypes.object,
   updateTemplate: PropTypes.func,
+  templateDeleting: PropTypes.bool,
+  templateSaving: PropTypes.bool,
 };
 
-const mapStateToProps = ({ template }) => ({ template });
+const mapStateToProps = ({ template, templateDeleting, templateSaving }) => ({
+  template,
+  templateDeleting,
+  templateSaving,
+});
 
 export default connect(mapStateToProps, { updateTemplate, deleteTemplate })(
   Template

package/src/templates/components/TemplateFilters.js

@@ -0,0 +1,56 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Input, Dropdown } from "semantic-ui-react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import { useTemplatesContext } from "./TemplatesContext";
+
+export default function TemplateFilters() {
+  const { formatMessage } = useIntl();
+  const { query, setQuery, scope, scopes, setScope } = useTemplatesContext();
+  return (
+    <Input
+      value={query}
+      onChange={(_e, data) => setQuery(lowerDeburrTrim(data.value))}
+      icon={{ name: "search", link: true }}
+      iconPosition="left"
+      action={
+        <Dropdown
+          button
+          className="icon"
+          floating
+          icon="filter"
+          labeled
+          scrolling
+          text={formatMessage({
+            id: scope ? `template.scope.${scope}` : "templates.all_scopes",
+          })}
+          upward={false}
+        >
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => setScope()}>
+              <em>
+                <FormattedMessage id="templates.all_scopes" />
+              </em>
+            </Dropdown.Item>
+            {_.flow(
+              _.defaultTo([]),
+              _.map((scope) => (
+                <Dropdown.Item
+                  key={scope}
+                  text={formatMessage({
+                    id: `template.scope.${scope}`,
+                  })}
+                  onClick={() => setScope(scope)}
+                />
+              ))
+            )(scopes)}
+          </Dropdown.Menu>
+        </Dropdown>
+      }
+      placeholder={formatMessage({
+        id: "templates.search.placeholder",
+      })}
+    />
+  );
+}

package/src/templates/components/TemplateRoutes.js

@@ -2,17 +2,13 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import {
-  TEMPLATE,
-  TEMPLATES,
-  TEMPLATES_NEW,
-  TEMPLATE_SCOPE,
-} from "@truedat/core/routes";
+import { TEMPLATE, TEMPLATES, TEMPLATES_NEW } from "@truedat/core/routes";
 import NewTemplate from "./NewTemplate";
 import Templates from "./Templates";
 import Template from "./Template";
 import TemplatesLoader from "./TemplatesLoader";
 import TemplateLoader from "./TemplateLoader";
+import TemplatesContextProvider from "./TemplatesContext";
 
 export const TemplateRoutes = () => {
   const authorized = useAuthorized();
@@ -21,11 +17,21 @@ export const TemplateRoutes = () => {
       path={TEMPLATES}
       render={() =>
         authorized ? (
-          <>
-            <Route path={TEMPLATES} component={TemplatesLoader} exact />
-            <Route path={TEMPLATES} component={Templates} exact />
-            <Route path={TEMPLATE_SCOPE} component={Templates} exact />
+          <TemplatesContextProvider
+            initialSortColumn="updated_at"
+            initialSortDirection="descending"
+          >
             <Switch>
+              <Route
+                path={TEMPLATES}
+                render={() => (
+                  <>
+                    <TemplatesLoader />
+                    <Templates />
+                  </>
+                )}
+                exact
+              />
               <Route
                 path={TEMPLATES_NEW}
                 render={() => <NewTemplate />}
@@ -41,7 +47,7 @@ export const TemplateRoutes = () => {
                 )}
               />
             </Switch>
-          </>
+          </TemplatesContextProvider>
         ) : (
           <Unauthorized />
         )

package/src/templates/components/Templates.js

@@ -1,25 +1,49 @@
 import React from "react";
-import { Header, Icon, Segment } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
-import TemplateTabs from "./TemplateTabs";
-import TemplateCards from "./TemplateCards";
+import {
+  Header,
+  Icon,
+  Segment,
+  Grid,
+  Container,
+  Button,
+} from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { TEMPLATES_NEW } from "@truedat/core/routes";
+import TemplateFilters from "./TemplateFilters";
+import TemplatesTable from "./TemplatesTable";
 
-const Templates = () => (
-  <Segment>
-    <Header as="h2">
-      <Icon name="file code outline" circular />
-      <Header.Content>
-        <FormattedMessage id="templates.header" />
-        <Header.Subheader>
-          <FormattedMessage id="templates.subheader" />
-        </Header.Subheader>
-      </Header.Content>
-    </Header>
-    <TemplateTabs />
-    <Segment attached="bottom">
-      <TemplateCards />
-    </Segment>
-  </Segment>
-);
+export default function Templates() {
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon name="file code outline" circular />
+        <Header.Content>
+          <FormattedMessage id="templates.header" />
+          <Header.Subheader>
+            <FormattedMessage id="templates.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+
+      <Grid>
+        <Grid.Column width={8}>
+          <TemplateFilters />
+        </Grid.Column>
 
-export default Templates;
+        <Grid.Column width={8}>
+          <Container textAlign="right">
+            <Button
+              primary
+              as={Link}
+              to={TEMPLATES_NEW}
+              content={<FormattedMessage id="templates.actions.create" />}
+            />
+          </Container>
+        </Grid.Column>
+      </Grid>
+
+      <TemplatesTable />
+    </Segment>
+  );
+}

package/src/templates/components/TemplatesContext.js

@@ -0,0 +1,66 @@
+import _ from "lodash/fp";
+import React, { useState, useContext, createContext } from "react";
+import { useSelector } from "react-redux";
+import { matchSorter } from "match-sorter";
+
+export const TemplatesContext = createContext();
+export const useTemplatesContext = () => useContext(TemplatesContext);
+
+const HIDDEN_SCOPES = ["cx", "ca"];
+const isHiddenScope = (scope) => _.includes(scope)(HIDDEN_SCOPES);
+
+export default function TemplatesContextProvider(props) {
+  const children = _.prop("children")(props);
+  const initialSortColumn = _.prop("initialSortColumn")(props);
+  const initialSortDirection = _.prop("initialSortDirection")(props);
+
+  const { templates, templatesLoading: loading } = useSelector(
+    _.pick(["templates", "templatesLoading"])
+  );
+
+  const [query, setQuery] = useState("");
+  const [scope, setScope] = useState();
+
+  const [sortColumn, setSortColumn] = useState(initialSortColumn);
+  const [sortDirection, setSortDirection] = useState(initialSortDirection);
+
+  const parsedTemplates = _.flow(
+    _.reject(({ scope }) => isHiddenScope(scope)),
+    _.filter((template) => !scope || scope == template.scope),
+    (items) =>
+      matchSorter(items, query, {
+        keys: ["name", "label"],
+        threshold: matchSorter.rankings.CONTAINS,
+      }),
+    _.orderBy([sortColumn], [sortDirection == "ascending" ? "asc" : "desc"])
+  )(templates);
+
+  const scopes = _.flow(
+    _.map("scope"),
+    _.uniq,
+    _.reject(isHiddenScope)
+  )(templates);
+
+  const context = {
+    loading,
+    templates: parsedTemplates,
+
+    query,
+    setQuery,
+
+    scope,
+    setScope,
+    scopes,
+
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+  };
+
+  return (
+    <TemplatesContext.Provider value={context}>
+      {children}
+    </TemplatesContext.Provider>
+  );
+}

package/src/templates/components/TemplatesTable.js

@@ -0,0 +1,113 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import { sortColumn as sortHandler } from "@truedat/core/services/sort";
+import { columnDecorator } from "@truedat/core/services";
+import {
+  TranslateDecorator,
+  DateDecorator,
+} from "@truedat/core/services/columnDecorators";
+
+import { useTemplatesContext } from "./TemplatesContext";
+
+export default function TemplatesTable() {
+  const {
+    templates,
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+  } = useTemplatesContext();
+
+  const columns = [
+    {
+      name: "name",
+      sort: { name: "name" },
+      fieldSelector: _.pick(["id", "name"]),
+      fieldDecorator: ({ id, name }) => (
+        <Link to={linkTo.TEMPLATE({ templateId: id })}>{name}</Link>
+      ),
+    },
+    {
+      name: "label",
+      sort: { name: "label" },
+    },
+    {
+      name: "scope",
+      sort: { name: "scope" },
+      fieldSelector: ({ scope }) => ({ id: `template.scope.${scope}` }),
+      fieldDecorator: TranslateDecorator,
+      width: 2,
+    },
+    {
+      name: "updated_at",
+      sort: { name: "updated_at" },
+      fieldSelector: ({ updated_at }) => ({
+        date: updated_at,
+      }),
+      width: 2,
+      fieldDecorator: DateDecorator,
+      textAlign: "center",
+    },
+  ];
+
+  return _.isEmpty(templates) ? (
+    <Header as="h4">
+      <Icon name="search" />
+      <Header.Content>
+        <FormattedMessage id="templates.search.results.empty" />
+      </Header.Content>
+    </Header>
+  ) : (
+    <Table sortable>
+      <Table.Header>
+        <Table.Row>
+          {columns.map((column, key) => (
+            <Table.HeaderCell
+              key={key}
+              width={column.width}
+              content={
+                <FormattedMessage
+                  id={`template.form.${column.header || column.name}`}
+                  defaultMessage={column.name}
+                />
+              }
+              sorted={
+                _.path("sort.name")(column) === sortColumn
+                  ? sortDirection
+                  : null
+              }
+              className={_.path("sort.name")(column) ? "" : "disabled"}
+              onClick={() =>
+                sortHandler(
+                  column,
+                  () => {},
+                  setSortDirection,
+                  setSortColumn,
+                  sortDirection,
+                  sortColumn
+                )
+              }
+            />
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {templates.map((t, i) => (
+          <Table.Row key={i}>
+            {columns.map((column, i) => (
+              <Table.Cell
+                key={i}
+                textAlign={column.textAlign}
+                content={columnDecorator(column)(t)}
+              />
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+}

package/src/templates/components/__tests__/TemplatesTable.spec.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { shallowWithIntl } from "@truedat/test/intl-stub";
+import TemplatesTable from "../TemplatesTable";
+import { TemplatesContext } from "../TemplatesContext";
+
+describe("<TemplatesTable />", () => {
+  const templates = [
+    {
+      scope: "bg",
+      name: "testbg",
+      label: "testbg",
+    },
+    {
+      scope: "dq",
+      name: "testdq",
+      label: "testdq",
+    },
+  ];
+  const context = { templates };
+
+  it("matches the latest snapshot", () => {
+    const wrapper = shallowWithIntl(
+      <TemplatesContext.Provider values={context}>
+        <TemplatesTable />
+      </TemplatesContext.Provider>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});