@truedat/dq 7.5.4 → 7.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dq",
-  "version": "7.5.4",
+  "version": "7.5.6",
   "description": "Truedat Web Data Quality Module",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.5.4",
+    "@truedat/test": "7.5.6",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -92,8 +92,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/core": "7.5.4",
-    "@truedat/df": "7.5.4",
+    "@truedat/core": "7.5.6",
+    "@truedat/df": "7.5.6",
     "decode-uri-component": "^0.2.2",
     "graphql": "^15.5.3",
     "moment": "^2.29.4",
@@ -118,5 +118,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "e41d75322f4e11f804d9e834c21f6416c8586963"
+  "gitHead": "23d70104f45068aea9795621334ee2df022d21b2"
 }

package/src/components/ImplementationStructureDelete.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Icon } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal } from "@truedat/core/components";
 import { deleteImplementationStructure } from "../routines";
@@ -13,7 +13,14 @@ export const ImplementationStructureDelete = ({
 }) => (
   <ConfirmModal
     icon="trash"
-    trigger={<Icon name="trash alternate outline" color="red" />}
+    trigger={
+      <Button
+        icon={<Icon name="trash alternate outline" color="red" />}
+        basic
+        size="mini"
+        color="red"
+      />
+    }
     header={
       <FormattedMessage id="implementationsStructures.delete.confirmation.header" />
     }

package/src/components/RuleActions.js

@@ -1,9 +1,9 @@
 import _ from "lodash/fp";
 import React from "react";
-import { Link } from "react-router-dom";
-import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { Button } from "semantic-ui-react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { Button, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
@@ -14,7 +14,7 @@ const ModalDelete = ({ deleteRule, id }) => (
     icon="trash"
     trigger={
       <Button
-        icon="trash"
+        icon={<Icon name="trash alternate outline" color="red" />}
         content={<FormattedMessage id="quality.actions.remove" />}
       />
     }

package/src/components/RuleResultRow.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import { Table, Icon, Label } from "semantic-ui-react";
+import { Button, Table, Icon, Label } from "semantic-ui-react";
 import { ConfirmModal, DateTime } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
 import { columnDecorator } from "@truedat/core/services";
@@ -103,7 +103,14 @@ export const RuleResultRow = ({
           <Table.Cell onClick={(e) => e.stopPropagation()}>
             <ConfirmModal
               icon="trash"
-              trigger={<Icon name="trash alternate outline" color="red" />}
+              trigger={
+                <Button
+                  icon="trash alternate outline"
+                  color="red"
+                  size="mini"
+                  basic
+                />
+              }
               header={formatMessage({
                 id: "rule_result.actions.delete.confirmation.header",
               })}

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

@@ -166,7 +166,7 @@ describe("<RuleResultRow />", () => {
       </table>
     );
     expect(
-      container.querySelector("td > i.red.trash.alternate.outline.icon")
+      container.querySelector("button.basic > i.trash.alternate.outline.icon")
     ).toBeInTheDocument();
   });
 
@@ -193,7 +193,7 @@ describe("<RuleResultRow />", () => {
       </table>
     );
     expect(
-      container.querySelector("td > i.red.trash.alternate.outline.icon")
+      container.querySelector("button.basic > i.trash.alternate.outline.icon")
     ).not.toBeInTheDocument();
   });
 });

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

@@ -2,9 +2,13 @@
 
 exports[`<ImplementationStructureDelete /> matches the latest snapshot 1`] = `
 <div>
-  <i
-    aria-hidden="true"
-    class="red trash alternate outline icon"
-  />
+  <button
+    class="ui red mini basic icon button"
+  >
+    <i
+      aria-hidden="true"
+      class="red trash alternate outline icon"
+    />
+  </button>
 </div>
 `;

package/src/components/ruleImplementationForm/FieldsGroup.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
 import { useIntl } from "react-intl";
-import { Grid, Icon } from "semantic-ui-react";
+import { Button, Grid, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { getStructureFieldOptionValue } from "@truedat/dd/selectors/getStructureFieldOptionValue";
 import { getStructureFields } from "../../selectors/getStructureFields";
@@ -24,7 +24,11 @@ const Field = ({
       <Grid.Row>
         <Grid.Column width={4}>
           <StructureFieldsDropdown
-            label={formatMessage({ id: "filtersGrid.field.label" })}
+            label={
+              <strong>
+                {formatMessage({ id: "filtersGrid.field.label" })}
+              </strong>
+            }
             inline={false}
             parentStructures={parentStructures}
             structureFields={structureFields}
@@ -32,10 +36,17 @@ const Field = ({
             value={getStructureFieldOptionValue(clause?.structure)}
           />
         </Grid.Column>
-        <Grid.Column width={2}>
-          <Icon
-            name="trash"
-            className="selectable segment-trash-buttom"
+        <Grid.Column
+          width={2}
+          verticalAlign="top"
+          className="fix-button-alignment"
+        >
+          <Button
+            icon={<Icon name="trash alternate outline" color="red" />}
+            basic
+            color="red"
+            size="mini"
+            className="selectable force-margin-bottom fix-button-alignment"
             onClick={() => setRowValue({ index })}
           />
         </Grid.Column>

package/src/components/ruleImplementationForm/FiltersGroup.js

@@ -1,7 +1,14 @@
 import _ from "lodash/fp";
 import React, { Fragment, useState } from "react";
 import { useIntl } from "react-intl";
-import { Accordion, Divider, Grid, Icon, Popup } from "semantic-ui-react";
+import {
+  Accordion,
+  Divider,
+  Grid,
+  Icon,
+  Popup,
+  Button,
+} from "semantic-ui-react";
 import PropTypes from "prop-types";
 import ValueConditions from "./ValueConditions";
 import FiltersFormGroup from "./FiltersFormGroup";
@@ -64,7 +71,12 @@ const Filter = ({
             operators={operators}
           />
         </Grid.Column>
-        <Grid.Column width={2} floated="right">
+        <Grid.Column
+          width={2}
+          floated="right"
+          verticalAlign="top"
+          className="fix-button-alignment"
+        >
           {conditionApplies(clause) && (
             <Popup
               trigger={
@@ -82,9 +94,12 @@ const Filter = ({
               hideOnScroll
             />
           )}
-          <Icon
-            name="trash"
-            className="selectable force-margin-bottom"
+          <Button
+            icon={<Icon name="trash alternate outline" color="red" />}
+            color="red"
+            basic
+            size="mini"
+            className="selectable force-margin-bottom fix-button-alignment"
             onClick={() => setRowValue({ index })}
           />
         </Grid.Column>

package/src/components/ruleImplementationForm/ValueConditions.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import React from "react";
-import { Grid, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
+import { Button, Grid, Icon } from "semantic-ui-react";
 import { dropAt, replaceAt } from "@truedat/core/services/arrays";
 import FiltersFormGroup from "./FiltersFormGroup";
 
@@ -97,8 +97,11 @@ export const ValueConditions = ({
             className="selectable force-margin-bottom"
             onClick={onRowAddition}
           />
-          <Icon
-            name="trash"
+          <Button
+            icon={<Icon name="trash alternate outline" color="red" />}
+            basic
+            color="red"
+            size="mini"
             className="selectable force-margin-bottom"
             onClick={() => onRowDelete(index)}
           />

package/src/components/ruleImplementationForm/__tests__/__snapshots__/FiltersGroup.spec.js.snap

@@ -72,12 +72,16 @@ exports[`<FiltersGroup /> matches the latest snapshot when siblings provided 1`]
       </div>
     </div>
     <div
-      class="right floated two wide column"
+      class="right floated top aligned two wide column fix-button-alignment"
     >
-      <i
-        aria-hidden="true"
-        class="trash icon selectable force-margin-bottom"
-      />
+      <button
+        class="ui red mini basic icon button selectable force-margin-bottom fix-button-alignment"
+      >
+        <i
+          aria-hidden="true"
+          class="red trash alternate outline icon"
+        />
+      </button>
     </div>
   </div>
 </div>

package/src/components/ruleImplementationForm/__tests__/__snapshots__/ValueConditions.spec.js.snap

@@ -77,10 +77,14 @@ exports[`<ValueConditions /> matches the latest snapshot when siblings provided
         aria-hidden="true"
         class="plus circle icon selectable force-margin-bottom"
       />
-      <i
-        aria-hidden="true"
-        class="trash icon selectable force-margin-bottom"
-      />
+      <button
+        class="ui red mini basic icon button selectable force-margin-bottom"
+      >
+        <i
+          aria-hidden="true"
+          class="red trash alternate outline icon"
+        />
+      </button>
     </div>
   </div>
 </div>

package/src/styles/ruleImplementationForm/FieldsGroup.less

@@ -0,0 +1,8 @@
+.ui[class*="middle aligned"].grid > .row > .column.fix-button-alignment{
+    align-self: flex-start !important;
+    
+    .ui.basic.button.fix-button-alignment  {
+        align-self: flex-start !important;
+        margin-top: 1.7rem;
+    }
+}

package/src/styles/ruleImplementationForm/FiltersGroup.less

@@ -0,0 +1,8 @@
+.ui[class*="middle aligned"].grid > .row > .column.fix-button-alignment{
+    align-self: flex-start !important;
+
+    .ui.basic.button.fix-button-alignment  {
+        align-self: flex-start !important;
+        margin-top: 1.7rem;
+    }
+}