@truedat/dd 4.48.7 → 4.48.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.48.10] 2022-07-19
+
+### Changed
+
+- [TD-4975] StructuresView can be used as embedded without header
+
+## [4.48.8] 2022-07-18
+
+### Changed
+
+- [TD-5001] Display structure alias instead of technical name
+
 ## [4.48.2] 2022-07-08
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.48.7",
+  "version": "4.48.10",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.48.7",
-    "@truedat/core": "4.48.7",
-    "@truedat/df": "4.48.7",
+    "@truedat/auth": "4.48.10",
+    "@truedat/core": "4.48.10",
+    "@truedat/df": "4.48.10",
     "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": "f4a20ecf51eb101c2c25facfec48ee8cd0e621a3"
+  "gitHead": "9f5085bc64845d8eb2605c7c9d624feae44052f5"
 }

package/src/components/StructureChildrenRelations.js

@@ -2,23 +2,15 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { columnPredicate } from "@truedat/core/services";
 import {
   getChildrenRelationColumns,
-  getSortedChildrenRelations
+  getSortedChildrenRelations,
 } from "../selectors";
 import StructureRelations from "./StructureRelations";
 
-const columnPredicate = column => {
-  const { fieldSelector, name } = column || {};
-  const field = _.isFunction(fieldSelector)
-    ? fieldSelector
-    : _.path(_.defaultTo(name)(fieldSelector));
-  return name === "links" ? _.flow(field, _.negate(_.isEmpty)) : field;
-};
-
-const filterColumns = (columns, relations) => {
-  return _.filter(column => _.any(columnPredicate(column))(relations))(columns);
-};
+const filterColumns = (columns, relations) =>
+  _.filter((c) => _.any(columnPredicate(c))(relations))(columns);
 
 export const StructureChildrenRelations = ({ columns, relations, ...rest }) => (
   <StructureRelations columns={columns} relations={relations} {...rest} />
@@ -26,7 +18,7 @@ export const StructureChildrenRelations = ({ columns, relations, ...rest }) => (
 
 StructureChildrenRelations.propTypes = {
   columns: PropTypes.array,
-  relations: PropTypes.array
+  relations: PropTypes.array,
 };
 
 const mapStateToProps = (state, ownProps) => ({
@@ -34,7 +26,7 @@ const mapStateToProps = (state, ownProps) => ({
   columns: filterColumns(
     _.propOr(getChildrenRelationColumns(state), "columns")(ownProps),
     state.childrenRelations
-  )
+  ),
 });
 
 export default connect(mapStateToProps)(StructureChildrenRelations);

package/src/components/StructureCrumbs.js

@@ -16,7 +16,7 @@ export const StructuresCrumb = () => (
   </>
 );
 
-export const SystemCrumb = ({ name, id }) => (
+export const SystemCrumb = ({ id, name }) => (
   <>
     <Breadcrumb.Section
       as={Link}
@@ -29,21 +29,28 @@ export const SystemCrumb = ({ name, id }) => (
   </>
 );
 
-export const AncestorCrumb = ({ name, id, published_note }) => (
+SystemCrumb.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+};
+
+export const AncestorCrumb = ({ name, id }) => (
   <>
     <Breadcrumb.Section as={Link} to={linkTo.STRUCTURE({ id })} active={false}>
-      {_.isEmpty(published_note?.alias) ? name : published_note.alias}
+      {name}
     </Breadcrumb.Section>
     <Breadcrumb.Divider icon="right angle" />
   </>
 );
 
-export const StructureCrumb = ({ name, id, version, published_note }) =>
+AncestorCrumb.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+};
+
+export const StructureCrumb = ({ name, id, version }) =>
   _.isNil(version) ? (
-    <Breadcrumb.Section
-      active
-      content={_.isEmpty(published_note?.alias) ? name : published_note.alias}
-    />
+    <Breadcrumb.Section active content={name} />
   ) : (
     <>
       <Breadcrumb.Section
@@ -51,46 +58,56 @@ export const StructureCrumb = ({ name, id, version, published_note }) =>
         to={linkTo.STRUCTURE({ id })}
         active={false}
       >
-        {_.isEmpty(published_note?.alias) ? name : published_note.alias}
+        {name}
       </Breadcrumb.Section>
       <Breadcrumb.Divider icon="right angle" />
     </>
   );
 
+StructureCrumb.propTypes = {
+  id: PropTypes.number,
+  alias: PropTypes.string,
+  name: PropTypes.string,
+  version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
 export const VersionCrumb = ({ version }) => (
   <Breadcrumb.Section active>
     <FormattedMessage id="structure.crumbs.version" values={{ version }} />
   </Breadcrumb.Section>
 );
 
+VersionCrumb.propTypes = {
+  version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
 export const StructureCrumbs = ({
   id,
   system,
   ancestry,
+  alias,
   name,
   version,
-  published_note,
 }) =>
   name ? (
     <Breadcrumb>
       <StructuresCrumb />
-      {!_.isEmpty(system) && <SystemCrumb {...system} />}
-      {!_.isEmpty(ancestry) &&
-        _.map(({ data_structure_id, name, published_note }) => (
-          <AncestorCrumb
-            key={data_structure_id}
-            name={name}
-            id={data_structure_id}
-            published_note={published_note}
-          />
-        ))(ancestry)}
+      {_.isEmpty(system) ? null : <SystemCrumb {...system} />}
+      {_.isEmpty(ancestry)
+        ? null
+        : _.map(({ data_structure_id, name }) => (
+            <AncestorCrumb
+              key={data_structure_id}
+              name={name}
+              id={data_structure_id}
+            />
+          ))(ancestry)}
       <StructureCrumb
-        name={name}
+        name={_.defaultTo(name)(alias)}
         id={id}
         version={version}
-        published_note={published_note}
       />
-      {!_.isNil(version) && <VersionCrumb id={id} version={version} />}
+      {_.isNil(version) ? null : <VersionCrumb id={id} version={version} />}
     </Breadcrumb>
   ) : null;
 
@@ -98,10 +115,10 @@ StructureCrumbs.propTypes = {
   ancestry: PropTypes.array,
   id: PropTypes.number,
   name: PropTypes.string,
+  alias: PropTypes.string,
   field: PropTypes.object,
   system: PropTypes.object,
-  version: PropTypes.string,
-  published_note: PropTypes.object,
+  version: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
 const mapStateToProps = ({
@@ -115,4 +132,5 @@ const mapStateToProps = ({
   system,
   version,
 });
+
 export default connect(mapStateToProps)(StructureCrumbs);

package/src/components/StructureFieldRow.js

@@ -4,20 +4,22 @@ import { Table } from "semantic-ui-react";
 import { columnDecorator } from "@truedat/core/services";
 
 export const StructureFieldRow = ({ field, columns }) => (
-  <Table.Row key={field.data_structure_id} warning={field.deleted_at && true}>
-    {columns &&
-      columns.map((column, key) => (
-        <Table.Cell
-          key={key}
-          textAlign={column.textAlign}
-          content={columnDecorator(column)(field)}
-        />
-      ))}
+  <Table.Row key={field.data_structure_id} warning={!!field.deleted_at}>
+    {columns
+      ? columns.map((column, key) => (
+          <Table.Cell
+            key={key}
+            textAlign={column.textAlign}
+            content={columnDecorator(column)(field)}
+          />
+        ))
+      : null}
   </Table.Row>
 );
 
 StructureFieldRow.propTypes = {
-  columns: PropTypes.array
+  field: PropTypes.object.isRequired,
+  columns: PropTypes.array,
 };
 
 export default StructureFieldRow;

package/src/components/StructureFields.js

@@ -4,15 +4,15 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Table } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
+import { columnPredicate } from "@truedat/core/services";
 import { getSortedFields, getStructureFieldColumns } from "../selectors";
 import StructureFieldRow from "./StructureFieldRow";
 
-const columnPredicate = c =>
-  c === "links" ? _.flow(_.prop(c), _.negate(_.isEmpty)) : _.prop(c);
+const columnPred = (c) =>
+  c?.name === "degree" ? _.prop("degree") : columnPredicate(c);
 
-const getColumns = (fieldsColumns, fields) => {
-  return _.filter(p => _.any(columnPredicate(p.name))(fields))(fieldsColumns);
-};
+const getColumns = (columns, fields) =>
+  _.filter((c) => _.any(columnPred(c))(fields))(columns);
 
 export const StructureFields = ({ columns, fields, ...rest }) => (
   <Table>
@@ -38,7 +38,7 @@ export const StructureFields = ({ columns, fields, ...rest }) => (
 StructureFields.propTypes = {
   columns: PropTypes.array,
   fields: PropTypes.array,
-  version: PropTypes.string
+  version: PropTypes.string,
 };
 
 const mapStateToProps = (state, ownProps) => ({
@@ -48,7 +48,7 @@ const mapStateToProps = (state, ownProps) => ({
   columns: getColumns(
     _.propOr(getStructureFieldColumns(state), "columns")(ownProps),
     state.structureFields
-  )
+  ),
 });
 
 export default connect(mapStateToProps)(StructureFields);

package/src/components/StructureItem.js

@@ -49,14 +49,14 @@ StructureItem.propTypes = {
 
 export const mapStateToProps = (
   { structure },
-  { data_structure_id, id: structureId, type, name, published_note }
+  { data_structure_id, id: structureId, type, name, alias }
 ) => {
   const id = data_structure_id || structureId;
   return {
     id: id,
     active:
       type !== "system" && _.isFinite(id) && _.propEq("id", id)(structure),
-    name: _.isEmpty(published_note?.alias) ? name : published_note.alias,
+    name: _.defaultTo(name)(alias),
   };
 };
 

package/src/components/StructureSummary.js

@@ -55,7 +55,7 @@ export const StructureSummary = ({
   class: structureClass,
   classes: structureClasses,
   name,
-  published_note,
+  alias,
   description,
   userPermissions,
   updatedAt,
@@ -75,13 +75,11 @@ export const StructureSummary = ({
             <Dimmer.Dimmable dimmed={linkedStructureTagsLoading}>
               <Header as="h2">
                 <Header.Content>
-                  {_.isEmpty(published_note?.alias)
-                    ? name
-                    : published_note.alias}
+                  {_.defaultTo(name)(alias)}
                   {structureClasses?._grantable ? (
                     <StructureGrantButton />
                   ) : null}
-                  {!_.isEmpty(published_note?.alias) && (
+                  {_.isEmpty(alias) ? null : (
                     <Header.Subheader>{name}</Header.Subheader>
                   )}
                 </Header.Content>
@@ -120,7 +118,7 @@ StructureSummary.propTypes = {
   class: PropTypes.string,
   classes: PropTypes.object,
   name: PropTypes.string,
-  published_note: PropTypes.object,
+  alias: PropTypes.string,
   description: PropTypes.string,
   userPermissions: PropTypes.object,
   updatedAt: PropTypes.string,

package/src/components/StructuresSearchResults.js

@@ -14,34 +14,39 @@ export const StructuresSearchResults = ({
   onSelect,
   selectedStructure,
   structures,
-  loading
-}) =>
-  !_.isEmpty(structures) || !_.isEmpty(selectedStructure) ? (
-    <Dimmer.Dimmable dimmed={loading}>
-      <StructuresLabelResults />
-      <StructuresTable
-        columns={columns}
-        size={size}
-        selectedStructure={selectedStructure}
-        structures={structures}
-        onStructureSelected={onSelect}
-      />
-      <StructuresPagination size={size} />
-      <Dimmer inverted active={loading}>
-        <Loader size="large" />
-      </Dimmer>
-    </Dimmer.Dimmable>
-  ) : loading ? null : (
-    <Message icon info>
-      <Icon name="search" />
-      <Message.Content>
-        <Message.Header>
-          <FormattedMessage id="structures.not_found.header" />
-        </Message.Header>
-        <FormattedMessage id="structures.not_found.body" />
-      </Message.Content>
-    </Message>
-  );
+  loading,
+}) => (
+  <Dimmer.Dimmable dimmed={loading}>
+    <Dimmer active={loading} inverted>
+      <Loader size="large" />
+    </Dimmer>
+    {!_.isEmpty(structures) || !_.isEmpty(selectedStructure) ? (
+      <>
+        <StructuresLabelResults />
+        <StructuresTable
+          columns={columns}
+          size={size}
+          selectedStructure={selectedStructure}
+          structures={structures}
+          onStructureSelected={onSelect}
+        />
+        <StructuresPagination size={size} />
+      </>
+    ) : (
+      <Message icon info>
+        <Icon name="search" />
+        <Message.Content>
+          <Message.Header>
+            <FormattedMessage
+              id={`structures.${loading ? "loading" : "not_found"}.header`}
+            />
+          </Message.Header>
+          {loading ? null : <FormattedMessage id="structures.not_found.body" />}
+        </Message.Content>
+      </Message>
+    )}
+  </Dimmer.Dimmable>
+);
 
 StructuresSearchResults.propTypes = {
   columns: PropTypes.array,
@@ -49,7 +54,7 @@ StructuresSearchResults.propTypes = {
   onSelect: PropTypes.func,
   structures: PropTypes.array,
   selectedStructure: PropTypes.object,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
 };
 
 export default StructuresSearchResults;

package/src/components/StructuresView.js

@@ -26,23 +26,21 @@ export const StructuresHeader = () => (
   </Header>
 );
 
-export const StructuresView = ({
+const StructuresViewContent = ({
   actions = {},
   loading,
   structures,
   hasFilterApplied,
-  systemsLoading,
+  embedded,
 }) => {
   const history = useHistory();
   return (
-    <Segment loading={systemsLoading}>
-      <StructuresHeader />
-      <Divider hidden />
+    <>
       <StructuresOptions hasFilterApplied={hasFilterApplied} {...actions} />
       <StructuresSearch />
       <StructureSelectedFilters />
       <StructureDateFilter />
-      {hasFilterApplied ? (
+      {hasFilterApplied || embedded ? (
         <StructuresSearchResults
           structures={structures}
           loading={loading}
@@ -51,6 +49,27 @@ export const StructuresView = ({
       ) : (
         <SystemCards />
       )}
+    </>
+  );
+};
+
+StructuresViewContent.propTypes = {
+  actions: PropTypes.object,
+  structures: PropTypes.array,
+  loading: PropTypes.bool,
+  hasFilterApplied: PropTypes.bool,
+  embedded: PropTypes.bool,
+};
+
+export const StructuresView = (props) => {
+  const { systemsLoading, embedded } = props;
+  return embedded ? (
+    <StructuresViewContent {...props} />
+  ) : (
+    <Segment loading={systemsLoading}>
+      <StructuresHeader />
+      <Divider hidden />
+      <StructuresViewContent {...props} />
     </Segment>
   );
 };
@@ -61,6 +80,7 @@ StructuresView.propTypes = {
   loading: PropTypes.bool,
   systemsLoading: PropTypes.bool,
   hasFilterApplied: PropTypes.bool,
+  embedded: PropTypes.bool,
 };
 
 const selectedFilters = ({ structureActiveFilters, structureDateFilter }) =>
@@ -71,13 +91,15 @@ const selectedFilters = ({ structureActiveFilters, structureDateFilter }) =>
 
 const isEmptyPath = (state, path) => _.flow(_.path(path), _.isEmpty)(state);
 
-const mapStateToProps = (state) => ({
-  structures: structureRowsSelector(state),
-  actions: state.structuresActions,
-  loading: state.structuresLoading,
-  systemsLoading: state.systemsLoading,
-  hasFilterApplied:
-    !isEmptyPath(state, "structureQuery.query") || selectedFilters(state),
-});
+const mapStateToProps = (state) => {
+  return {
+    structures: structureRowsSelector(state),
+    actions: state.structuresActions,
+    loading: state.structuresLoading,
+    systemsLoading: state.systemsLoading,
+    hasFilterApplied:
+      !isEmptyPath(state, "structureQuery.query") || selectedFilters(state),
+  };
+};
 
 export default connect(mapStateToProps)(StructuresView);

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
 import { StructureFieldRow } from "../StructureFieldRow";
 import { defaultStructureFieldColumns } from "../../selectors/getStructureFieldColumns";
 
@@ -9,21 +9,30 @@ describe("<StructureFieldRow />", () => {
       data_structure_id: 1,
       name: "f1",
       description: "dd",
-      type: "tp",
       structureId: 123,
-      nullable: true,
-      precision: "22",
       version: 12,
       links: [
         { business_concept_version_id: 1, name: "foo", resource_id: 1 },
-        { business_concept_version_id: 2, name: "Bar", resource_id: 2 }
-      ]
+        { business_concept_version_id: 2, name: "Bar", resource_id: 2 },
+      ],
+      metadata: {
+        type: "tp",
+        nullable: true,
+        precision: "22",
+      },
     };
 
-    const wrapper = shallowWithIntl(
-      <StructureFieldRow field={field} columns={defaultStructureFieldColumns} />
+    const { container } = render(
+      <table>
+        <tbody>
+          <StructureFieldRow
+            field={field}
+            columns={defaultStructureFieldColumns}
+          />
+        </tbody>
+      </table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   it("row prints column fields", () => {
@@ -31,37 +40,32 @@ describe("<StructureFieldRow />", () => {
       data_structure_id: 1,
       name: "f1",
       description: "dd",
-      type: "tp",
       structureId: 123,
-      nullable: true,
-      precision: "22",
       version: 12,
       links: [
         { business_concept_version_id: 1, name: "foo", resource_id: 1 },
-        { business_concept_version_id: 2, name: "Bar", resource_id: 2 }
-      ]
+        { business_concept_version_id: 2, name: "Bar", resource_id: 2 },
+      ],
+      metadata: {
+        nullable: true,
+        precision: "22",
+        type: "tp",
+      },
     };
 
-    const wrapper = shallowWithIntl(
-      <StructureFieldRow field={field} columns={defaultStructureFieldColumns} />
+    const { getAllByRole, getByText } = render(
+      <table>
+        <tbody>
+          <StructureFieldRow
+            field={field}
+            columns={defaultStructureFieldColumns}
+          />
+        </tbody>
+      </table>
     );
 
-    expect(wrapper.find("TableCell")).toHaveLength(8);
-
-    expect(
-      wrapper
-        .find("TableCell")
-        .at(0)
-        .dive()
-        .find("Link")
-        .props().children
-    ).toEqual("f1");
-
-    const links = wrapper
-      .find("TableCell")
-      .at(7)
-      .dive()
-      .find("Link");
-    expect(links).toHaveLength(2);
+    expect(getAllByRole("cell")).toHaveLength(8);
+    expect(getByText("f1")).toBeDefined();
+    expect(getAllByRole("link")).toHaveLength(3);
   });
 });