@truedat/df 7.5.9 → 7.5.11

package/src/components/widgets/__tests__/__snapshots__/TableField.spec.js.snap

@@ -1,189 +1,153 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TableField /> matches the latest snapshot 1`] = `
-<Table
-  as="table"
-  celled={true}
-  className="no_padding width_max"
->
-  <TableHeader
-    as="thead"
+<div>
+  <table
+    class="ui celled table no_padding width_max"
   >
-    <TableRow
-      as="tr"
-      cellAs="td"
+    <thead
+      class=""
     >
-      <TableHeaderCell
-        as="th"
-        key="0"
+      <tr
+        class=""
       >
-        field1
-         
-        <span
-          className="is_required"
+        <th
+          class=""
         >
-          *
-        </span>
-      </TableHeaderCell>
-      <TableHeaderCell
-        as="th"
-        key="1"
-      >
-        field2
-         
-      </TableHeaderCell>
-      <TableHeaderCell
-        as="th"
-      >
-         
-      </TableHeaderCell>
-    </TableRow>
-  </TableHeader>
-  <TableBody
-    as="tbody"
-  >
-    <TableRow
-      as="tr"
-      cellAs="td"
-      key="0"
-    >
-      <TableCell
-        as="td"
-        key="0"
-      >
-        <Input
-          className="no_border"
-          id={0}
-          name="field1"
-          onChange={[Function]}
-          type="text"
-          value="Foo"
-        />
-      </TableCell>
-      <TableCell
-        as="td"
-        key="1"
-      >
-        <Input
-          className="no_border"
-          id={0}
-          name="field2"
-          onChange={[Function]}
-          type="text"
-          value="Bar"
-        />
-      </TableCell>
-      <TableCell
-        as="td"
-        style={
-          {
-            "padding": "1px",
-            "textAlign": "center",
-          }
-        }
-      >
-        <Button
-          as="button"
-          basic={true}
-          color="red"
-          icon={
-            <Icon
-              as="i"
-              className="selectable"
-              color="red"
-              name="trash alternate outline"
-              onClick={[Function]}
-            />
-          }
-          size="mini"
+          field1
+          <span
+            class="is_required"
+          >
+            *
+          </span>
+        </th>
+        <th
+          class=""
+        >
+          field2
+        </th>
+        <th
+          class=""
         />
-      </TableCell>
-    </TableRow>
-    <TableRow
-      as="tr"
-      cellAs="td"
-      key="1"
+      </tr>
+    </thead>
+    <tbody
+      class=""
     >
-      <TableCell
-        as="td"
-        key="0"
+      <tr
+        class=""
       >
-        <Input
-          className="no_border"
-          id={1}
-          name="field1"
-          onChange={[Function]}
-          type="text"
-          value="Fee"
-        />
-      </TableCell>
-      <TableCell
-        as="td"
-        key="1"
-      >
-        <Input
-          className="no_border"
-          id={1}
-          name="field2"
-          onChange={[Function]}
-          type="text"
-          value="Bor"
-        />
-      </TableCell>
-      <TableCell
-        as="td"
-        style={
-          {
-            "padding": "1px",
-            "textAlign": "center",
-          }
-        }
+        <td
+          class=""
+        >
+          <div
+            class="ui input no_border"
+          >
+            <input
+              id="0"
+              name="field1"
+              type="text"
+              value="Foo"
+            />
+          </div>
+        </td>
+        <td
+          class=""
+        >
+          <div
+            class="ui input no_border"
+          >
+            <input
+              id="0"
+              name="field2"
+              type="text"
+              value="Bar"
+            />
+          </div>
+        </td>
+        <td
+          class=""
+          style="text-align: center; padding: 1px;"
+        >
+          <button
+            class="ui red mini basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon selectable"
+            />
+          </button>
+        </td>
+      </tr>
+      <tr
+        class=""
       >
-        <Button
-          as="button"
-          basic={true}
-          color="red"
-          icon={
-            <Icon
-              as="i"
-              className="selectable"
-              color="red"
-              name="trash alternate outline"
-              onClick={[Function]}
+        <td
+          class=""
+        >
+          <div
+            class="ui input no_border"
+          >
+            <input
+              id="1"
+              name="field1"
+              type="text"
+              value="Fee"
             />
-          }
-          size="mini"
-        />
-      </TableCell>
-    </TableRow>
-  </TableBody>
-  <TableFooter
-    as="tfoot"
-  >
-    <TableRow
-      as="tr"
-      cellAs="td"
+          </div>
+        </td>
+        <td
+          class=""
+        >
+          <div
+            class="ui input no_border"
+          >
+            <input
+              id="1"
+              name="field2"
+              type="text"
+              value="Bor"
+            />
+          </div>
+        </td>
+        <td
+          class=""
+          style="text-align: center; padding: 1px;"
+        >
+          <button
+            class="ui red mini basic icon button"
+          >
+            <i
+              aria-hidden="true"
+              class="red trash alternate outline icon selectable"
+            />
+          </button>
+        </td>
+      </tr>
+    </tbody>
+    <tfoot
+      class=""
     >
-      <TableHeaderCell
-        as="th"
-        colSpan="3"
+      <tr
+        class=""
       >
-        <Button
-          as="button"
-          compact={true}
-          floated="right"
-          icon={
-            {
-              "color": "green",
-              "name": "add",
-            }
-          }
-          name="add_buttom"
-          onClick={[Function]}
-          size="small"
-        />
-      </TableHeaderCell>
-    </TableRow>
-  </TableFooter>
-</Table>
+        <th
+          class=""
+          colspan="3"
+        >
+          <button
+            class="ui small compact icon right floated button"
+            data-testid="add-button"
+            name="add_button"
+          >
+            <i
+              aria-hidden="true"
+              class="green add icon"
+            />
+          </button>
+        </th>
+      </tr>
+    </tfoot>
+  </table>
+</div>
 `;

package/src/components/widgets/__tests__/__snapshots__/TextField.spec.js.snap

@@ -1,11 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TextField /> matches the latest snapshot 1`] = `
-<FormTextArea
-  as={[Function]}
-  control={[Function]}
-  name="name"
-  onChange={[MockFunction]}
-  value="Foo"
-/>
+<div>
+  <div
+    class="field"
+  >
+    <textarea
+      name="name"
+      rows="3"
+    >
+      Foo
+    </textarea>
+  </div>
+</div>
 `;

package/src/reducers/__tests__/dfMessage.spec.js

@@ -1,9 +1,5 @@
-import {
-  clearTemplates,
-  createTemplate,
-  fetchTemplates,
-  updateTemplate
-} from "../../routines";
+import { clearTemplates, fetchTemplates } from "@truedat/core/routines";
+import { createTemplate, updateTemplate } from "../../routines";
 import { dfMessage } from "..";
 
 const fooState = { foo: "bar" };
@@ -20,7 +16,7 @@ describe("reducers: dfMessage", () => {
       dfMessage(
         { header: "alert.fetchTemplates.empty.header" },
         {
-          type: clearTemplates.TRIGGER
+          type: clearTemplates.TRIGGER,
         }
       )
     ).toEqual(initialState);
@@ -33,15 +29,15 @@ describe("reducers: dfMessage", () => {
         message: "my message",
         payload: {
           data: {},
-          scope: "bg"
-        }
+          scope: "bg",
+        },
       })
     ).toEqual({
       error: true,
       header: "alert.fetchTemplates.empty.header",
       content: "alert.fetchTemplates.empty.content",
       icon: "attention",
-      text: "my message"
+      text: "my message",
     });
   });
 
@@ -51,17 +47,17 @@ describe("reducers: dfMessage", () => {
         type: updateTemplate.FAILURE,
         payload: {
           data: {
-            errors: [{ name: "template.error.content.invalidtype.field.type" }]
+            errors: [{ name: "template.error.content.invalidtype.field.type" }],
           },
-          scope: "bg"
-        }
+          scope: "bg",
+        },
       })
     ).toEqual({
       error: true,
       header: "alert.updateTemplate.failed.header",
       content: "template.error.content.invalidtype",
       icon: "attention",
-      fields: { name: "field", type: "type" }
+      fields: { name: "field", type: "type" },
     });
   });
 
@@ -71,17 +67,17 @@ describe("reducers: dfMessage", () => {
         type: createTemplate.FAILURE,
         payload: {
           data: {
-            errors: [{ name: "template.error.content.repeatedfield.field" }]
+            errors: [{ name: "template.error.content.repeatedfield.field" }],
           },
-          scope: "bg"
-        }
+          scope: "bg",
+        },
       })
     ).toEqual({
       error: true,
       header: "alert.createTemplate.failed.header",
       content: "template.error.content.repeatedfield",
       icon: "attention",
-      fields: { name: "field" }
+      fields: { name: "field" },
     });
   });
 });

package/src/reducers/dfMessage.js

@@ -1,7 +1,8 @@
 import _ from "lodash/fp";
 import { dismissAlert } from "@truedat/core/routines";
 import { defaultMessage } from "@truedat/core/services/message";
-import { clearTemplates, fetchTemplates, createTemplate } from "../routines";
+import { clearTemplates, fetchTemplates } from "@truedat/core/routines";
+import { createTemplate } from "../routines";
 import { updateTemplate } from "../templates/routines";
 
 const initialState = {};
@@ -21,7 +22,7 @@ export const dfMessage = (state = initialState, { type, message, payload }) => {
             header: "alert.fetchTemplates.empty.header",
             content: "alert.fetchTemplates.empty.content",
             icon: "attention",
-            text: message
+            text: message,
           }
         : defaultMessage(state, type, payload);
     case updateTemplate.FAILURE:
@@ -47,13 +48,13 @@ const upsertError = (state, type, payload, header) =>
   hasError(payload.data.errors, "repeatedfield")
     ? repeatedFieldError(payload.data.errors, header)
     : hasError(payload.data.errors, "invalidtype")
-    ? invalidTypeError(payload.data.errors, header)
-    : defaultMessage(state, type, payload);
+      ? invalidTypeError(payload.data.errors, header)
+      : defaultMessage(state, type, payload);
 
 const hasError = (errors, error) =>
   _.flow(
     _.map("name"),
-    _.find(e => _.includes(error)(e)),
+    _.find((e) => _.includes(error)(e)),
     _.negate(_.isNil)
   )(errors);
 
@@ -67,7 +68,7 @@ const repeatedFieldError = (errors, header) => {
     header,
     content,
     fields: { name },
-    icon: "attention"
+    icon: "attention",
   };
 };
 
@@ -82,7 +83,7 @@ const invalidTypeError = (errors, header) => {
     header,
     content,
     fields: { name, type },
-    icon: "attention"
+    icon: "attention",
   };
 };
 

package/src/selectors/index.js

@@ -1,3 +1,2 @@
 export { makeGetDropdownOptions } from "./getOptions";
 export { makeGetApplyTemplate, makeGetTemplate } from "./templates";
-export { getSubscopes } from "./subscopedTemplates";

package/src/templates/components/NewTemplate.js

@@ -1,4 +1,3 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Header, Icon, Segment } from "semantic-ui-react";

package/src/templates/components/Template.js

@@ -1,5 +1,4 @@
 import _ from "lodash/fp";
-import React from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl } from "react-intl";
 import {
@@ -11,8 +10,10 @@ import {
   Container,
 } from "semantic-ui-react";
 import { connect } from "react-redux";
+import { useNavigate } from "react-router";
 import { ConfirmModal } from "@truedat/core/components";
 import { deleteTemplate, updateTemplate } from "../routines";
+import { TEMPLATES } from "@truedat/core/routes";
 import TemplateCrumbs from "./TemplateCrumbs";
 import TemplateForm from "./templateForm/TemplateForm";
 
@@ -23,7 +24,14 @@ export const Template = ({
   templateDeleting,
   templateSaving,
 }) => {
+  const navigate = useNavigate();
   const { formatMessage } = useIntl();
+
+  const onConfirmDelete = async (template) => {
+    await deleteTemplate(template);
+    navigate(TEMPLATES);
+  };
+
   return _.isUndefined(template.id) ? null : (
     <>
       <TemplateCrumbs name={template?.label} />
@@ -69,13 +77,12 @@ export const Template = ({
                       values={{ name: <i>{template.name}</i> }}
                     />
                   }
-                  onConfirm={() => deleteTemplate(template)}
+                  onConfirm={() => onConfirmDelete(template)}
                 />
               )}
             </Container>
           </Grid.Column>
         </Grid>
-
         <TemplateForm template={template} onSubmit={updateTemplate} editMode />
       </Segment>
     </>

package/src/templates/components/TemplateCard.js

@@ -1,18 +1,17 @@
-import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { Icon, Card } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 
 export const TemplateCard = ({ template: { id, name, label } }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const { formatMessage } = useIntl();
   return (
     <Card
       key={id}
       link
-      onClick={() => history.push(linkTo.TEMPLATE({ templateId: id }))}
+      onClick={() => navigate(linkTo.TEMPLATE({ templateId: id }))}
     >
       <Card.Content>
         <Card.Header>

package/src/templates/components/TemplateCrumbs.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 { TEMPLATES } from "@truedat/core/routes";
 
@@ -16,7 +15,7 @@ export const TemplateCrumbs = ({ name }) => (
 );
 
 TemplateCrumbs.propTypes = {
-  name: PropTypes.string
+  name: PropTypes.string,
 };
 
 export default TemplateCrumbs;

package/src/templates/components/TemplateFilters.js

@@ -1,5 +1,4 @@
 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";