@truedat/df 5.17.3 → 5.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/df",
-  "version": "5.17.3",
+  "version": "5.18.1",
   "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.3",
-    "@truedat/core": "5.17.3",
+    "@truedat/auth": "5.18.1",
+    "@truedat/core": "5.18.1",
     "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": "ec07aeeabffbb6e46d2d22ade283de203dd94c88"
+  "gitHead": "95d5a42f5bd259ad53fa66d4fe8cce48be73ee03"
 }

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();
+  });
+});

package/src/templates/components/__tests__/__snapshots__/Template.spec.js.snap

@@ -24,24 +24,48 @@ exports[`<Template /> matches the latest snapshot 1`] = `
   <div
     class="ui segment"
   >
-    <h2
-      class="ui header"
+    <div
+      class="ui grid"
     >
-      <i
-        aria-hidden="true"
-        class="file code outline circular icon"
-      />
       <div
-        class="content"
+        class="eight wide column"
+      >
+        <h2
+          class="ui header"
+        >
+          <i
+            aria-hidden="true"
+            class="file code outline circular icon"
+          />
+          <div
+            class="content"
+          >
+            My Template
+            <div
+              class="sub header"
+            >
+              template1
+            </div>
+          </div>
+        </h2>
+      </div>
+      <div
+        class="eight wide column"
       >
-        My Template
         <div
-          class="sub header"
+          class="ui right aligned container"
         >
-          template1
+          <button
+            class="ui icon negative button"
+          >
+            <i
+              aria-hidden="true"
+              class="trash icon"
+            />
+          </button>
         </div>
       </div>
-    </h2>
+    </div>
     <form
       class="ui form"
     >
@@ -68,6 +92,7 @@ exports[`<Template /> matches the latest snapshot 1`] = `
           >
             <input
               name="name"
+              readonly=""
               required=""
               type="text"
               value="template1"
@@ -297,17 +322,17 @@ exports[`<Template /> matches the latest snapshot 1`] = `
         class="ui divider"
       />
       <div
-        class="actions"
+        class="ui right aligned container"
       >
         <button
-          class="ui negative button"
+          class="ui primary button"
         >
-          Delete
+          Save
         </button>
         <button
-          class="ui primary button"
+          class="ui button"
         >
-          Save
+          Cancel
         </button>
       </div>
     </form>

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TemplatesTable /> matches the latest snapshot 1`] = `<TemplatesTable />`;

package/src/templates/components/templateForm/FieldForm.js

@@ -258,6 +258,8 @@ export const FieldForm = ({
               value={boost}
               required
               onChange={onChange}
+              type="number"
+              step="0.01"
             />
           </Form.Field>
         ) : null}

package/src/templates/components/templateForm/TemplateForm.js

@@ -28,7 +28,7 @@ const scopeOptions = (formatMessage) =>
     "quality_control",
   ]);
 
-export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
+export const TemplateForm = ({ loading, template, onSubmit }) => {
   const { formatMessage } = useIntl();
   const [activeGroup, setActiveGroup] = useState(0);
   const [editedTemplate, setEditedTemplate] = useState({
@@ -94,7 +94,6 @@ export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
     )(editedTemplate);
     onSubmit({ template: { ...editedTemplate, content: formattedContent } });
   };
-  const handleDelete = () => onDelete({ id: template.id });
 
   const validatedContent = parseContentValidation(editedTemplate.content);
 
@@ -113,6 +112,7 @@ export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
           value={editedTemplate.name || ""}
           required
           onChange={handleChange}
+          readOnly={!_.isEmpty(template)}
         />
         <Form.Input
           name="label"
@@ -173,11 +173,7 @@ export const TemplateForm = ({ loading, template, onSubmit, onDelete }) => {
         </Grid.Column>
       </Grid>
       <Divider />
-      <TemplateFormActions
-        template={template}
-        onSave={handleSubmit}
-        onDelete={handleDelete}
-      />
+      <TemplateFormActions template={template} onSave={handleSubmit} />
     </Form>
   );
 };
@@ -186,7 +182,6 @@ TemplateForm.propTypes = {
   loading: PropTypes.bool.isRequired,
   template: PropTypes.object.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  onDelete: PropTypes.func,
 };
 
 const mapStateToProps = ({ templateDeleting, templateSaving }) => ({

package/src/templates/components/templateForm/TemplateFormActions.js

@@ -1,56 +1,39 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button } from "semantic-ui-react";
+import { useHistory } from "react-router-dom";
+import { Button, Container } from "semantic-ui-react";
+import { TEMPLATES } from "@truedat/core/routes";
 import { FormattedMessage } from "react-intl";
-import { ConfirmModal } from "@truedat/core/components";
 
 export const TemplateFormActions = ({
-  template: { name, id },
   templateSaving,
   templateDeleting,
-  onDelete,
   onSave,
-}) => (
-  <div className="actions">
-    {id && (
-      <ConfirmModal
-        icon="trash"
-        trigger={
-          <Button
-            negative
-            content={<FormattedMessage id="actions.delete" />}
-            loading={templateDeleting}
-            disabled={templateSaving || templateDeleting}
-          />
-        }
-        header={
-          <FormattedMessage id="template.actions.delete.confirmation.header" />
-        }
-        content={
-          <FormattedMessage
-            id="template.actions.delete.confirmation.content"
-            values={{ name: <i>{name}</i> }}
-          />
-        }
-        onConfirm={onDelete}
+}) => {
+  const history = useHistory();
+  const onCancel = () => history.push(TEMPLATES);
+  return (
+    <Container textAlign="right">
+      <Button
+        primary
+        content={<FormattedMessage id="actions.save" />}
+        onClick={onSave}
+        loading={templateSaving}
+        disabled={templateSaving || templateDeleting}
       />
-    )}
-    <Button
-      primary
-      content={<FormattedMessage id="actions.save" />}
-      onClick={onSave}
-      loading={templateSaving}
-      disabled={templateSaving || templateDeleting}
-    />
-  </div>
-);
+      <Button
+        content={<FormattedMessage id="actions.cancel" />}
+        onClick={onCancel}
+      />
+    </Container>
+  );
+};
 
 TemplateFormActions.propTypes = {
   template: PropTypes.object.isRequired,
   templateDeleting: PropTypes.bool.isRequired,
   templateSaving: PropTypes.bool.isRequired,
-  onDelete: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
 };
 

package/src/templates/components/templateForm/__tests__/TemplateForm.spec.js

@@ -10,7 +10,7 @@ const template = {
 };
 const messages = {
   en: {
-    "actions.delete": "actions.delete",
+    "actions.cancel": "actions.cancel",
     "actions.save": "actions.save",
     "template.form.fieldGroups": "template.form.fieldGroups",
     "template.form.header": "template.form.header",

package/src/templates/components/templateForm/__tests__/TemplateFormActions.spec.js

@@ -4,7 +4,6 @@ import { TemplateFormActions } from "../TemplateFormActions";
 
 describe("<TemplateFormActions />", () => {
   const onSave = jest.fn();
-  const onDelete = jest.fn();
   const template = {
     id: 1,
     name: "Name",
@@ -15,7 +14,6 @@ describe("<TemplateFormActions />", () => {
     template,
     templateSaving,
     templateDeleting,
-    onDelete,
     onSave,
   };
 

package/src/templates/components/templateForm/__tests__/__snapshots__/TemplateForm.spec.js.snap

@@ -28,6 +28,7 @@ exports[`<TemplateForm /> matches the latest snapshot (loading) 1`] = `
         >
           <input
             name="name"
+            readonly=""
             required=""
             type="text"
             value="Name"
@@ -255,21 +256,19 @@ exports[`<TemplateForm /> matches the latest snapshot (loading) 1`] = `
       class="ui divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
-        class="ui negative disabled button"
+        class="ui loading primary disabled button"
         disabled=""
         tabindex="-1"
       >
-        actions.delete
+        actions.save
       </button>
       <button
-        class="ui loading primary disabled button"
-        disabled=""
-        tabindex="-1"
+        class="ui button"
       >
-        actions.save
+        actions.cancel
       </button>
     </div>
   </form>
@@ -304,6 +303,7 @@ exports[`<TemplateForm /> matches the latest snapshot 1`] = `
         >
           <input
             name="name"
+            readonly=""
             required=""
             type="text"
             value="Name"
@@ -531,17 +531,17 @@ exports[`<TemplateForm /> matches the latest snapshot 1`] = `
       class="ui divider"
     />
     <div
-      class="actions"
+      class="ui right aligned container"
     >
       <button
-        class="ui negative button"
+        class="ui primary button"
       >
-        actions.delete
+        actions.save
       </button>
       <button
-        class="ui primary button"
+        class="ui button"
       >
-        actions.save
+        actions.cancel
       </button>
     </div>
   </form>

package/src/templates/components/templateForm/__tests__/__snapshots__/TemplateFormActions.spec.js.snap

@@ -1,43 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TemplateFormActions /> matches the latest snapshot (deleting) 1`] = `
-<div
-  className="actions"
+<Container
+  textAlign="right"
 >
-  <ConfirmModal
-    content={
-      <Memo(MemoizedFormattedMessage)
-        id="template.actions.delete.confirmation.content"
-        values={
-          {
-            "name": <i>
-              Name
-            </i>,
-          }
-        }
-      />
-    }
-    header={
-      <Memo(MemoizedFormattedMessage)
-        id="template.actions.delete.confirmation.header"
-      />
-    }
-    icon="trash"
-    onConfirm={[MockFunction]}
-    trigger={
-      <Button
-        as="button"
-        content={
-          <Memo(MemoizedFormattedMessage)
-            id="actions.delete"
-          />
-        }
-        disabled={true}
-        loading={true}
-        negative={true}
-      />
-    }
-  />
   <Button
     as="button"
     content={
@@ -50,47 +16,22 @@ exports[`<TemplateFormActions /> matches the latest snapshot (deleting) 1`] = `
     onClick={[MockFunction]}
     primary={true}
   />
-</div>
-`;
-
-exports[`<TemplateFormActions /> matches the latest snapshot (saving) 1`] = `
-<div
-  className="actions"
->
-  <ConfirmModal
+  <Button
+    as="button"
     content={
       <Memo(MemoizedFormattedMessage)
-        id="template.actions.delete.confirmation.content"
-        values={
-          {
-            "name": <i>
-              Name
-            </i>,
-          }
-        }
-      />
-    }
-    header={
-      <Memo(MemoizedFormattedMessage)
-        id="template.actions.delete.confirmation.header"
-      />
-    }
-    icon="trash"
-    onConfirm={[MockFunction]}
-    trigger={
-      <Button
-        as="button"
-        content={
-          <Memo(MemoizedFormattedMessage)
-            id="actions.delete"
-          />
-        }
-        disabled={true}
-        loading={false}
-        negative={true}
+        id="actions.cancel"
       />
     }
+    onClick={[Function]}
   />
+</Container>
+`;
+
+exports[`<TemplateFormActions /> matches the latest snapshot (saving) 1`] = `
+<Container
+  textAlign="right"
+>
   <Button
     as="button"
     content={
@@ -103,47 +44,22 @@ exports[`<TemplateFormActions /> matches the latest snapshot (saving) 1`] = `
     onClick={[MockFunction]}
     primary={true}
   />
-</div>
-`;
-
-exports[`<TemplateFormActions /> matches the latest snapshot 1`] = `
-<div
-  className="actions"
->
-  <ConfirmModal
+  <Button
+    as="button"
     content={
       <Memo(MemoizedFormattedMessage)
-        id="template.actions.delete.confirmation.content"
-        values={
-          {
-            "name": <i>
-              Name
-            </i>,
-          }
-        }
-      />
-    }
-    header={
-      <Memo(MemoizedFormattedMessage)
-        id="template.actions.delete.confirmation.header"
-      />
-    }
-    icon="trash"
-    onConfirm={[MockFunction]}
-    trigger={
-      <Button
-        as="button"
-        content={
-          <Memo(MemoizedFormattedMessage)
-            id="actions.delete"
-          />
-        }
-        disabled={false}
-        loading={false}
-        negative={true}
+        id="actions.cancel"
       />
     }
+    onClick={[Function]}
   />
+</Container>
+`;
+
+exports[`<TemplateFormActions /> matches the latest snapshot 1`] = `
+<Container
+  textAlign="right"
+>
   <Button
     as="button"
     content={
@@ -156,5 +72,14 @@ exports[`<TemplateFormActions /> matches the latest snapshot 1`] = `
     onClick={[MockFunction]}
     primary={true}
   />
-</div>
+  <Button
+    as="button"
+    content={
+      <Memo(MemoizedFormattedMessage)
+        id="actions.cancel"
+      />
+    }
+    onClick={[Function]}
+  />
+</Container>
 `;

package/src/templates/components/TemplateCards.js

@@ -1,57 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import queryString from "query-string";
-import { FormattedMessage } from "react-intl";
-import { connect } from "react-redux";
-import { Link, useLocation } from "react-router-dom";
-import { Icon, Card } from "semantic-ui-react";
-import { TEMPLATES_NEW } from "@truedat/core/routes";
-import TemplateCard from "./TemplateCard";
-import { filterScopeWithTemplates, validScope } from "./scopes";
-
-export const TemplateCards = ({ templates }) => {
-  const { search } = useLocation();
-  const { scope } = queryString.parse(search);
-  const defaultScope = _.flow(
-    _.map(_.prop("scope")),
-    _.filter(validScope),
-    _.head
-  )(templates);
-
-  const selectedScope =
-    filterScopeWithTemplates(scope, templates) || defaultScope;
-  const visibleTemplates = _.filter(_.propEq("scope", selectedScope))(
-    templates
-  );
-
-  return (
-    <Card.Group>
-      <Card link as={Link} to={TEMPLATES_NEW} className="create template">
-        <Card.Content textAlign="center">
-          <Card.Header>
-            <FormattedMessage id="templates.actions.create" />
-          </Card.Header>
-          <Card.Description>
-            <Icon.Group floated="left" size="big">
-              <Icon name="file outline" />
-              <Icon corner name="add" />
-            </Icon.Group>
-          </Card.Description>
-        </Card.Content>
-      </Card>
-
-      {visibleTemplates.map((template, i) => (
-        <TemplateCard key={i} template={template} />
-      ))}
-    </Card.Group>
-  );
-};
-
-TemplateCards.propTypes = {
-  templates: PropTypes.array,
-};
-
-const mapStateToProps = ({ templates }) => ({ templates });
-
-export default connect(mapStateToProps)(TemplateCards);

package/src/templates/components/TemplateTabs.js

@@ -1,40 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { Link, useLocation } from "react-router-dom";
-import { Menu } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
-import queryString from "query-string";
-import { linkTo } from "@truedat/core/routes";
-import { filterScope } from "./scopes";
-
-const TemplateTabs = ({ scopes }) => {
-  const { search } = useLocation();
-  const { scope: selectedScope } = queryString.parse(search);
-  const activeTab = _.max([0, _.findIndex(s => s == selectedScope)(scopes)]);
-  return (
-    <Menu attached="top" secondary pointing tabular>
-      {scopes.map((scope, i) => (
-        <Menu.Item
-          key={i}
-          active={i === activeTab}
-          as={Link}
-          to={linkTo.TEMPLATE_SCOPE({ scope })}
-        >
-          <FormattedMessage id={`templates.tabs.${scope}`} />
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
-};
-
-TemplateTabs.propTypes = {
-  scopes: PropTypes.array
-};
-
-const mapStateToProps = ({ templates }) => ({
-  scopes: _.flow(_.map("scope"), _.uniq, _.filter(filterScope))(templates)
-});
-
-export default connect(mapStateToProps)(TemplateTabs);

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

@@ -1,34 +0,0 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-import { TemplateCards } from "../TemplateCards";
-
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useLocation: () => ({
-    hash: "",
-    key: "v5q3jz",
-    pathname: "/templates",
-    search: "?scope=bg"
-  })
-}));
-
-describe("<TemplateCards />", () => {
-  const templates = [
-    {
-      scope: "bg",
-      name: "testbg",
-      label: "testbg"
-    },
-    {
-      scope: "dq",
-      name: "testdq",
-      label: "testdq"
-    }
-  ];
-  const props = { templates };
-
-  it("matches the latest snapshot", () => {
-    const wrapper = shallowWithIntl(<TemplateCards {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

package/src/templates/components/__tests__/__snapshots__/TemplateCards.spec.js.snap

@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TemplateCards /> matches the latest snapshot 1`] = `
-<CardGroup>
-  <Card
-    as={
-      {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    className="create template"
-    link={true}
-    to="/templates/new"
-  >
-    <CardContent
-      textAlign="center"
-    >
-      <CardHeader>
-        <MemoizedFormattedMessage
-          id="templates.actions.create"
-        />
-      </CardHeader>
-      <CardDescription>
-        <IconGroup
-          as="i"
-          floated="left"
-          size="big"
-        >
-          <Icon
-            as="i"
-            name="file outline"
-          />
-          <Icon
-            as="i"
-            corner={true}
-            name="add"
-          />
-        </IconGroup>
-      </CardDescription>
-    </CardContent>
-  </Card>
-  <TemplateCard
-    key="0"
-    template={
-      {
-        "label": "testbg",
-        "name": "testbg",
-        "scope": "bg",
-      }
-    }
-  />
-</CardGroup>
-`;

package/src/templates/components/scopes.js

@@ -1,8 +0,0 @@
-import _ from "lodash/fp";
-
-export const validScope = (scope) => _.negate(_.includes(scope))(["cx", "ca"]);
-export const filterScope = (scope) => (validScope(scope) ? scope : null);
-export const filterScopeWithTemplates = (scope, templates) =>
-  validScope(scope) && _.flow(_.map("scope"), _.includes(scope))(templates)
-    ? scope
-    : null;