@truedat/dd 4.52.4 → 4.52.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [4.52.5] 2022-09-30
+
+- [TD-2430] Add join type selection when defining an implementation dataset
+
 ## [4.52.3] 2022-09-22
 
 ### Removed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.52.4",
+  "version": "4.52.6",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "4.52.0",
+    "@truedat/test": "4.52.6",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.52.4",
-    "@truedat/core": "4.52.4",
-    "@truedat/df": "4.52.4",
+    "@truedat/auth": "4.52.6",
+    "@truedat/core": "4.52.6",
+    "@truedat/df": "4.52.6",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "c8fb8bfae18f39f7925c46e45b7818d02a5bc070"
+  "gitHead": "14204211010d6329f9f22071c95e7d9d6ce6b0f7"
 }

package/src/components/ReferenceDatasetSelectorInputField.js

@@ -1,11 +1,9 @@
 import _ from "lodash/fp";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-
 import { matchSorter } from "match-sorter";
 import { useIntl } from "react-intl";
 import { Container, Form, Dropdown, Icon } from "semantic-ui-react";
-
 import StructureSelectorInputFieldJoin from "./StructureSelectorInputFieldJoin";
 
 export const ReferenceDatasetSelectorInputField = ({
@@ -53,6 +51,9 @@ export const ReferenceDatasetSelectorInputField = ({
   const handleSelectField = (clauses) => {
     onChangeField({ ...selectedStructure, clauses });
   };
+  const handleSelectJoinType = (joinType) => {
+    onChangeField({ ...selectedStructure, join_type: joinType });
+  };
 
   return (
     <>
@@ -77,15 +78,11 @@ export const ReferenceDatasetSelectorInputField = ({
       {_.prop("structure")(selectedStructure) && (
         <Container style={{ paddingLeft: "8em" }}>
           <Form.Field>
-            <label>
-              {formatMessage({
-                id: "structureSelector.union.criteria",
-              })}
-            </label>
             <StructureSelectorInputFieldJoin
               structures={structures}
               selectedStructure={selectedStructure}
               handleSelectField={handleSelectField}
+              handleSelectJoinType={handleSelectJoinType}
             />
           </Form.Field>
         </Container>

package/src/components/StructureSelectorInputField.js

@@ -34,6 +34,10 @@ export const StructureSelectorInputField = ({
     onChangeField({ ...selectedStructure, clauses });
   };
 
+  const handleSelectJoinType = (joinType) => {
+    onChangeField({ ...selectedStructure, join_type: joinType });
+  };
+
   const aliasIsNeeded =
     _.flow(
       _.map(_.path("structure.id")),
@@ -106,13 +110,11 @@ export const StructureSelectorInputField = ({
       {joined && _.prop("structure")(selectedStructure) && (
         <Container style={{ paddingLeft: "8em" }}>
           <Form.Field>
-            <label>
-              {formatMessage({ id: "structureSelector.union.criteria" })}
-            </label>
             <StructureSelectorInputFieldJoin
               structures={structures}
               selectedStructure={selectedStructure}
               handleSelectField={handleSelectField}
+              handleSelectJoinType={handleSelectJoinType}
             />
           </Form.Field>
         </Container>

package/src/components/StructureSelectorInputFieldJoin.js

@@ -2,10 +2,14 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Grid, Icon, Popup } from "semantic-ui-react";
+import { Dropdown, Grid, Icon, Popup } from "semantic-ui-react";
 import { getStructureFieldOptionValue } from "../selectors/getStructureFieldOptionValue";
 import StructureFieldsDropdown from "./StructureFieldsDropdown";
 
+const JoinTypeIcon = React.lazy(() =>
+  import("@truedat/dq/components/JoinTypeIcon")
+);
+
 const getClauses = (selectedStructure) => {
   const clauses = _.getOr([], "clauses")(selectedStructure);
   return _.isEmpty(clauses) ? [{}] : clauses;
@@ -113,7 +117,9 @@ export const StructureSelectorInputFieldJoin = ({
   structures,
   selectedStructure,
   handleSelectField,
+  handleSelectJoinType,
 }) => {
+  const { formatMessage } = useIntl();
   const clauses = getClauses(selectedStructure);
   const parentStructures = getParentStructures(structures, selectedStructure);
   const createClause = () => handleSelectField([...clauses, {}]);
@@ -135,22 +141,58 @@ export const StructureSelectorInputFieldJoin = ({
     const newClauses = _.set(`[${idx}]`, newClause)(clauses);
     handleSelectField(newClauses);
   };
+
+  const joinTypes = ["inner", "left", "right", "full_outer"];
+
+  const trigger = <JoinTypeIcon type={selectedStructure.join_type} />;
+
   return (
-    <div style={{ marginBottom: "1em" }}>
-      {clauses.map(({ left, right }, idx) => (
-        <JoinClause
-          key={idx}
-          idx={idx}
-          createClause={createClause}
-          deleteClause={deleteClause}
-          handleChange={handleChange}
-          left={left}
-          parentStructures={parentStructures}
-          right={right}
-          selectedStructure={selectedStructure}
-        />
-      ))}
-    </div>
+    <>
+      <label>{formatMessage({ id: "structureSelector.union.type" })}</label>
+      <Grid>
+        <Grid.Column width={4}>
+          <Dropdown trigger={trigger}>
+            <Dropdown.Menu>
+              {_.map.convert({ cap: false })((value, key) => (
+                <Dropdown.Item
+                  key={key}
+                  onClick={() => handleSelectJoinType(value)}
+                  selected={value === selectedStructure.join_type}
+                >
+                  <Grid verticalAlign="middle">
+                    <Grid.Column width={4}>
+                      <JoinTypeIcon type={value} />
+                    </Grid.Column>
+                    <Grid.Column>
+                      {formatMessage({
+                        id: `joinType.${value}`,
+                      })}
+                    </Grid.Column>
+                  </Grid>
+                </Dropdown.Item>
+              ))(joinTypes)}
+            </Dropdown.Menu>
+          </Dropdown>
+        </Grid.Column>
+      </Grid>
+
+      <label>{formatMessage({ id: "structureSelector.union.criteria" })}</label>
+      <div style={{ marginBottom: "1em" }}>
+        {clauses.map(({ left, right }, idx) => (
+          <JoinClause
+            key={idx}
+            idx={idx}
+            createClause={createClause}
+            deleteClause={deleteClause}
+            handleChange={handleChange}
+            left={left}
+            parentStructures={parentStructures}
+            right={right}
+            selectedStructure={selectedStructure}
+          />
+        ))}
+      </div>
+    </>
   );
 };
 
@@ -158,6 +200,7 @@ StructureSelectorInputFieldJoin.propTypes = {
   structures: PropTypes.array,
   selectedStructure: PropTypes.object,
   handleSelectField: PropTypes.func,
+  handleSelectJoinType: PropTypes.func,
 };
 
 export default StructureSelectorInputFieldJoin;

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

@@ -87,118 +87,346 @@ exports[`<StructureSelectorInputFieldJoin /> matches the latest JoinClause snaps
 `;
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot 1`] = `
-<div
-  style={
-    Object {
-      "marginBottom": "1em",
-    }
-  }
->
-  <JoinClause
-    createClause={[Function]}
-    deleteClause={[Function]}
-    handleChange={[Function]}
-    idx={0}
-    key="0"
-    parentStructures={Array []}
-    selectedStructure={
+<Fragment>
+  <label>
+    structureSelector.union.type
+  </label>
+  <Grid>
+    <GridColumn
+      width={4}
+    >
+      <Dropdown
+        additionLabel="Add "
+        additionPosition="top"
+        closeOnBlur={true}
+        closeOnEscape={true}
+        deburr={false}
+        icon="dropdown"
+        minCharacters={1}
+        noResultsMessage="No results found."
+        openOnFocus={true}
+        renderLabel={[Function]}
+        searchInput="text"
+        selectOnBlur={true}
+        selectOnNavigation={true}
+        trigger={<UNDEFINED />}
+        wrapSelection={true}
+      >
+        <DropdownMenu>
+          <DropdownItem
+            key="0"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="inner"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.inner
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+          <DropdownItem
+            key="1"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="left"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.left
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+          <DropdownItem
+            key="2"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="right"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.right
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+          <DropdownItem
+            key="3"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="full_outer"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.full_outer
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </GridColumn>
+  </Grid>
+  <label>
+    structureSelector.union.criteria
+  </label>
+  <div
+    style={
       Object {
-        "id": "456",
+        "marginBottom": "1em",
       }
     }
-  />
-</div>
+  >
+    <JoinClause
+      createClause={[Function]}
+      deleteClause={[Function]}
+      handleChange={[Function]}
+      idx={0}
+      key="0"
+      parentStructures={Array []}
+      selectedStructure={
+        Object {
+          "id": "456",
+        }
+      }
+    />
+  </div>
+</Fragment>
 `;
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot with various clauses 1`] = `
-<div
-  style={
-    Object {
-      "marginBottom": "1em",
-    }
-  }
->
-  <JoinClause
-    createClause={[Function]}
-    deleteClause={[Function]}
-    handleChange={[Function]}
-    idx={0}
-    key="0"
-    left={
+<Fragment>
+  <label>
+    structureSelector.union.type
+  </label>
+  <Grid>
+    <GridColumn
+      width={4}
+    >
+      <Dropdown
+        additionLabel="Add "
+        additionPosition="top"
+        closeOnBlur={true}
+        closeOnEscape={true}
+        deburr={false}
+        icon="dropdown"
+        minCharacters={1}
+        noResultsMessage="No results found."
+        openOnFocus={true}
+        renderLabel={[Function]}
+        searchInput="text"
+        selectOnBlur={true}
+        selectOnNavigation={true}
+        trigger={<UNDEFINED />}
+        wrapSelection={true}
+      >
+        <DropdownMenu>
+          <DropdownItem
+            key="0"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="inner"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.inner
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+          <DropdownItem
+            key="1"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="left"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.left
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+          <DropdownItem
+            key="2"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="right"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.right
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+          <DropdownItem
+            key="3"
+            onClick={[Function]}
+            selected={false}
+          >
+            <Grid
+              verticalAlign="middle"
+            >
+              <GridColumn
+                width={4}
+              >
+                <lazy
+                  type="full_outer"
+                />
+              </GridColumn>
+              <GridColumn>
+                joinType.full_outer
+              </GridColumn>
+            </Grid>
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </GridColumn>
+  </Grid>
+  <label>
+    structureSelector.union.criteria
+  </label>
+  <div
+    style={
       Object {
-        "id": "5",
+        "marginBottom": "1em",
       }
     }
-    parentStructures={Array []}
-    right={
-      Object {
-        "id": "6",
+  >
+    <JoinClause
+      createClause={[Function]}
+      deleteClause={[Function]}
+      handleChange={[Function]}
+      idx={0}
+      key="0"
+      left={
+        Object {
+          "id": "5",
+        }
       }
-    }
-    selectedStructure={
-      Object {
-        "clauses": Array [
-          Object {
-            "left": Object {
-              "id": "5",
-            },
-            "right": Object {
-              "id": "6",
-            },
-          },
-          Object {
-            "left": Object {
-              "id": "7",
+      parentStructures={Array []}
+      right={
+        Object {
+          "id": "6",
+        }
+      }
+      selectedStructure={
+        Object {
+          "clauses": Array [
+            Object {
+              "left": Object {
+                "id": "5",
+              },
+              "right": Object {
+                "id": "6",
+              },
             },
-            "right": Object {
-              "id": "8",
+            Object {
+              "left": Object {
+                "id": "7",
+              },
+              "right": Object {
+                "id": "8",
+              },
             },
-          },
-        ],
-        "id": "456",
+          ],
+          "id": "456",
+        }
       }
-    }
-  />
-  <JoinClause
-    createClause={[Function]}
-    deleteClause={[Function]}
-    handleChange={[Function]}
-    idx={1}
-    key="1"
-    left={
-      Object {
-        "id": "7",
+    />
+    <JoinClause
+      createClause={[Function]}
+      deleteClause={[Function]}
+      handleChange={[Function]}
+      idx={1}
+      key="1"
+      left={
+        Object {
+          "id": "7",
+        }
       }
-    }
-    parentStructures={Array []}
-    right={
-      Object {
-        "id": "8",
+      parentStructures={Array []}
+      right={
+        Object {
+          "id": "8",
+        }
       }
-    }
-    selectedStructure={
-      Object {
-        "clauses": Array [
-          Object {
-            "left": Object {
-              "id": "5",
+      selectedStructure={
+        Object {
+          "clauses": Array [
+            Object {
+              "left": Object {
+                "id": "5",
+              },
+              "right": Object {
+                "id": "6",
+              },
             },
-            "right": Object {
-              "id": "6",
+            Object {
+              "left": Object {
+                "id": "7",
+              },
+              "right": Object {
+                "id": "8",
+              },
             },
-          },
-          Object {
-            "left": Object {
-              "id": "7",
-            },
-            "right": Object {
-              "id": "8",
-            },
-          },
-        ],
-        "id": "456",
+          ],
+          "id": "456",
+        }
       }
-    }
-  />
-</div>
+    />
+  </div>
+</Fragment>
 `;

package/src/messages/en.js

@@ -130,6 +130,10 @@ export default {
   "graph.header.target_class": "Target Type",
   "graph.header.target_external_id": "Target External Id",
   "graph.header.target_name": "Target Name",
+  "joinType.inner": "inner join",
+  "joinType.left": "outer left",
+  "joinType.right": "outer right",
+  "joinType.full_outer": "full outer join",
   "lineage.events.header": "My graphs",
   "lineage.events.props.graph_data": "Graph",
   "lineage.events.props.inserted_at": "Date",
@@ -368,6 +372,7 @@ export default {
   "structureDomain.actions.update": "Update",
   "structureDomain.actions.update.inherit": "Apply on children",
   "structureSelector.union.criteria": "Union criteria",
+  "structureSelector.union.type": "Union type",
   "structureTag.comment": "Comments",
   "structureTag.comment.placeholder": "Introduce any comments",
   "structureTag.inherit": "Inherited by children",

package/src/messages/es.js

@@ -135,6 +135,10 @@ export default {
   "graph.header.target_class": "Tipo Destino",
   "graph.header.target_external_id": "Id Externo Destino",
   "graph.header.target_name": "Nombre Destino",
+  "joinType.inner": "inner join",
+  "joinType.left": "outer left",
+  "joinType.right": "outer right",
+  "joinType.full_outer": "full outer join",
   "lineage.events.header": "Mis grafos",
   "lineage.events.props.graph_data": "Grafo",
   "lineage.events.props.inserted_at": "Fecha",
@@ -376,6 +380,7 @@ export default {
   "structureDomain.actions.update": "Actualizar",
   "structureDomain.actions.update.inherit": "Aplicar en hijos",
   "structureSelector.union.criteria": "Criterio de unión",
+  "structureSelector.union.type": "Tipo de unión",
   "structureTag.comment": "Comentario",
   "structureTag.comment.placeholder": "Introducir un comentario",
   "structureTag.inherit": "Heredar en cascada",