@truedat/dd 4.46.5 → 4.46.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.46.6] 2022-06-20
+
+### Added
+
+- [TD-4858] Split System Cards by `system_group` df field
+
 ## [4.46.5] 2022-06-17
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.46.5",
+  "version": "4.46.8",
   "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.46.5",
+    "@truedat/test": "4.46.8",
     "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.46.5",
-    "@truedat/core": "4.46.5",
-    "@truedat/df": "4.46.5",
+    "@truedat/auth": "4.46.8",
+    "@truedat/core": "4.46.8",
+    "@truedat/df": "4.46.8",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -103,7 +103,8 @@
     "redux-saga": "^1.1.3",
     "redux-saga-routines": "^3.2.3",
     "reselect": "^4.0.0",
-    "svg-pan-zoom": "^3.6.1"
+    "svg-pan-zoom": "^3.6.1",
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "@truedat/profile": ">= 4.45.0",
@@ -111,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "cc6e42515345adf2926f47216622e0fc4f7a0d86"
+  "gitHead": "44f3e7aea8153415f773f7b4f9137c11ad128b1d"
 }

package/src/components/SystemCards.js

@@ -7,35 +7,76 @@ import { Card, Icon, Image, Label, Table, Popup } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { FormattedMessage, FormattedNumber } from "react-intl";
 import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+import { CardGroupsAccordion } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
 
-export const SystemCards = ({ systems, structureTypes }) => (
-  <Card.Group className="structures">
-    {_.map(({ id, name, structures_count: structures_count, df_content }) => (
-      <Card key={id} link as={Link} to={linkTo.SYSTEM_STRUCTURES({ id: id })}>
-        <Card.Content className="extra-bottom-padding">
-          <Card.Header>{name}</Card.Header>
-          {!_.isEmpty(_.prop("types")(structures_count)) && (
-            <SystemsPopup
-              structures_count={structures_count}
-              structureTypes={structureTypes}
-            />
-          )}
-          {!_.isEmpty(_.get("logo")(df_content)) &&
-            _.startsWith("data:image")(_.get("logo")(df_content)) && (
-              <Image src={_.get("logo")(df_content)} className="system-image" />
-            )}
-        </Card.Content>
-      </Card>
-    ))(systems)}
-  </Card.Group>
-);
+export const SystemCards = ({ systems, structureTypes }) => {
+  const groups = _.flow(
+    _.map((system) =>
+      !system.df_content?.system_group
+        ? _.set("df_content.system_group", "default", system)
+        : system
+    ),
+    _.groupBy("df_content.system_group")
+  )(systems);
+
+  return Object.keys(groups).length > 1 ? (
+    <CardGroupsAccordion groups={groups} cardComponent={SystemCard} />
+  ) : (
+    <Card.Group className="structures">
+      {_.map(({ id, name, structures_count: structures_count, df_content }) => (
+        <SystemCard
+          key={id}
+          id={id}
+          name={name}
+          structures_count={structures_count}
+          df_content={df_content}
+          structureTypes={structureTypes}
+        />
+      ))(systems)}
+    </Card.Group>
+  );
+};
 
 SystemCards.propTypes = {
   systems: PropTypes.array,
   structureTypes: PropTypes.array,
 };
 
+export const SystemCard = ({
+  id,
+  name,
+  structures_count,
+  df_content,
+  structureTypes,
+}) => {
+  return (
+    <Card link as={Link} to={linkTo.SYSTEM_STRUCTURES({ id: id })}>
+      <Card.Content className="extra-bottom-padding">
+        <Card.Header>{name}</Card.Header>
+        {!_.isEmpty(_.prop("types")(structures_count)) && (
+          <SystemsPopup
+            structures_count={structures_count}
+            structureTypes={structureTypes}
+          />
+        )}
+        {!_.isEmpty(_.get("logo")(df_content)) &&
+          _.startsWith("data:image")(_.get("logo")(df_content)) && (
+            <Image src={_.get("logo")(df_content)} className="system-image" />
+          )}
+      </Card.Content>
+    </Card>
+  );
+};
+
+SystemCard.propTypes = {
+  id: PropTypes.number,
+  name: PropTypes.string,
+  structures_count: PropTypes.object,
+  df_content: PropTypes.object,
+  structureTypes: PropTypes.array,
+};
+
 export const SystemsPopup = ({ structures_count, structureTypes }) => {
   const { formatMessage } = useIntl();
   return (

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

@@ -1,157 +1,205 @@
+/* eslint-disable react/display-name */
 import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render } from "@truedat/test/render";
+import { waitFor, fireEvent } from "@testing-library/react";
+
 import { SystemCards, SystemsPopup } from "../SystemCards";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+const system_with_structures = {
+  external_id: "Microstrategy",
+  id: 1,
+  name: "Microstrategy",
+  structures_count: {
+    count: 1239,
+    types: [
+      { name: "carpeta", count: 1200 },
+      { name: "tabla", count: 2 },
+      { name: "columna", count: 37 },
+    ],
+  },
+};
 
-const mockHistory = {
-  goBack: jest.fn()
+const system_without_structures = {
+  external_id: "vacio",
+  id: 27,
+  name: "vacio",
+  structures_count: { count: 0 },
 };
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory
-}));
+const systems = [
+  { ...system_with_structures },
+  { ...system_without_structures },
+];
 
 describe("<SystemCards />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<SystemCards />);
-    expect(wrapper).toMatchSnapshot();
+  it("It matches the latest snapshot without system_groups", () => {
+    const props = { systems };
+    const { container } = render(<SystemCards {...props} />);
+    expect(container).toMatchSnapshot();
   });
 
-  it("mounts structures popup", () => {
+  it("It matches the latest snapshot with system_groups", () => {
     const systems = [
       {
-        external_id: "Microstrategy",
-        id: 1,
-        name: "Microstrategy",
-        structures_count: {
-          count: 1239,
-          types: [
-            { name: "carpeta", count: 1200 },
-            { name: "tabla", count: 2 },
-            { name: "columna", count: 37 }
-          ]
-        }
+        ...system_with_structures,
+        df_content: {
+          system_group: "foo-group",
+        },
       },
-      {
-        external_id: "vacio",
-        id: 27,
-        name: "vacio",
-        structures_count: { count: 0 }
-      }
+      { ...system_without_structures },
     ];
     const props = { systems };
-    const systemsWrapper = shallow(<SystemCards {...props} />);
-    expect(systemsWrapper).toMatchSnapshot();
-
-    expect(systemsWrapper.find("Card")).toHaveLength(2);
-    expect(
-      systemsWrapper
-        .find("Card")
-        .at(0)
-        .find("SystemsPopup")
-    ).toHaveLength(1);
-
-    expect(
-      systemsWrapper
-        .find("Card")
-        .at(1)
-        .find("SystemsPopup")
-    ).toHaveLength(0);
+    const { container } = render(<SystemCards {...props} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("mounts structures popup", async () => {
+    const props = { systems };
+    const { container, getByText } = render(<SystemCards {...props} />);
+
+    expect(container.getElementsByClassName("card")).toHaveLength(2);
+
+    const popup = getByText("1,239");
+    fireEvent.mouseEnter(popup);
+
+    await waitFor(() => {
+      expect(document.getElementsByClassName("popup")).toHaveLength(1);
+    });
+    fireEvent.mouseLeave(popup);
+    await waitFor(() => {
+      expect(document.getElementsByClassName("popup")).toHaveLength(0);
+    });
   });
 
   it("system logo", () => {
+    const imageSrc =
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
     const systems = [
       {
-        external_id: "Microstrategy",
-        id: 1,
-        name: "Microstrategy",
-        structures_count: {
-          count: 1239,
-          types: [
-            { name: "carpeta", count: 1200 },
-            { name: "tabla", count: 2 },
-            { name: "columna", count: 37 }
-          ]
+        ...system_with_structures,
+        df_content: {
+          logo: imageSrc,
         },
+      },
+      { ...system_without_structures },
+    ];
+    const props = { systems };
+    const { container } = render(<SystemCards {...props} />);
+
+    expect(container.getElementsByTagName("img")).toHaveLength(1);
+    expect(container.querySelector("img").getAttribute("src")).toMatch(
+      imageSrc
+    );
+  });
+
+  it("systems withouth system_group is not grouped", async () => {
+    const props = { systems };
+
+    const { container } = render(<SystemCards {...props} />);
+
+    await waitFor(() => {
+      // Check that the agrupations not appears
+      expect(container.innerHTML).not.toMatch("Without Groups");
+    });
+  });
+
+  it("all systems with the same system_group is not grouped", async () => {
+    const systems = [
+      {
+        ...system_with_structures,
         df_content: {
-          logo:
-            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
-        }
+          system_group: "foo-group",
+        },
       },
       {
-        external_id: "vacio",
-        id: 27,
-        name: "vacio",
-        structures_count: { count: 0 }
-      }
+        ...system_without_structures,
+        df_content: {
+          system_group: "foo-group",
+        },
+      },
     ];
     const props = { systems };
-    const systemsWrapper = shallow(<SystemCards {...props} />);
-    expect(
-      systemsWrapper
-        .find("Card")
-        .at(0)
-        .find("CardContent")
-        .find("Image")
-        .props().src
-    ).toBe(systems[0].df_content.logo);
-
-    expect(
-      systemsWrapper
-        .find("Card")
-        .at(1)
-        .find("CardContent")
-        .find("Image").length
-    ).toBe(0);
+
+    const { container } = render(<SystemCards {...props} />);
+
+    await waitFor(() => {
+      // Check that the agrupations not appears
+      expect(container.innerHTML).not.toMatch("Without Groups");
+      expect(container.innerHTML).not.toMatch("foo-group");
+    });
   });
 
-  it("structures types count popup", () => {
-    const structures_count = {
-      count: 1239,
-      types: [
-        { name: "carpeta", count: 1200 },
-        { name: "tabla", count: 2 },
-        { name: "columna", count: 37 }
-      ]
-    };
+  it("systems with system_group is grouped", async () => {
+    const systems = [
+      {
+        ...system_with_structures,
+        df_content: {
+          system_group: "foo-group",
+        },
+      },
+      {
+        ...system_without_structures,
+        df_content: {
+          system_group: "",
+        },
+      },
+    ];
+    const props = { systems };
+
+    const { getByText } = render(<SystemCards {...props} />);
+
+    await waitFor(() => {
+      // Check that the agrupations appears
+      expect(getByText("foo-group")).toBeTruthy();
+      expect(getByText("Without Groups")).toBeTruthy();
+
+      // Check under foo-group only have one system card
+      expect(
+        getByText("foo-group")
+          .closest(".CardGroupTitle")
+          .parentNode.getElementsByClassName("card")
+      ).toHaveLength(1);
+    });
+  });
+
+  it("structures types count popup", async () => {
+    const structures_count = { ...system_with_structures.structures_count };
     const props = { structures_count };
-    const systemsPopup = shallow(<SystemsPopup {...props} />);
-
-    expect(
-      systemsPopup
-        .find("Table")
-        .find("TableRow")
-        .at(0)
-        .find("TableCell")
-        .at(2)
-        .props().children
-    ).toBe(1200);
-
-    expect(
-      systemsPopup
-        .find("Table")
-        .find("TableRow")
-        .at(1)
-        .find("TableCell")
-        .at(2)
-        .props().children
-    ).toBe(2);
-
-    expect(
-      systemsPopup
-        .find("Table")
-        .find("TableRow")
-        .at(2)
-        .find("TableCell")
-        .at(2)
-        .props().children
-    ).toBe(37);
-
-    expect(systemsPopup).toMatchSnapshot();
+    const { getByText } = render(<SystemsPopup {...props} />);
+
+    const popup = getByText("1,239");
+    fireEvent.mouseEnter(popup);
+
+    await waitFor(() => {
+      // Check that popup is showed
+      expect(document.getElementsByClassName("popup")).toHaveLength(1);
+
+      // Check that are a row for each type of structures count
+      expect(document.querySelectorAll("tr")).toHaveLength(3);
+
+      // Check each row to have correct data according type of structure count
+      expect(
+        document.querySelectorAll("tr")[0].querySelectorAll("td")[1].innerHTML
+      ).toMatch("carpeta");
+      expect(
+        document.querySelectorAll("tr")[0].querySelectorAll("td")[2].innerHTML
+      ).toMatch("1200");
+
+      expect(
+        document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerHTML
+      ).toMatch("tabla");
+      expect(
+        document.querySelectorAll("tr")[1].querySelectorAll("td")[2].innerHTML
+      ).toMatch("2");
+
+      expect(
+        document.querySelectorAll("tr")[2].querySelectorAll("td")[1].innerHTML
+      ).toMatch("columna");
+      expect(
+        document.querySelectorAll("tr")[2].querySelectorAll("td")[2].innerHTML
+      ).toMatch("37");
+    });
+
+    expect(document).toMatchSnapshot();
   });
 });

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

@@ -1,211 +1,151 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SystemCards /> matches the latest snapshot 1`] = `
-<CardGroup
-  className="structures"
-/>
-`;
-
-exports[`<SystemCards /> mounts structures popup 1`] = `
-<CardGroup
-  className="structures"
->
-  <Card
-    as={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": Object {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    key="1"
-    link={true}
-    to="/systems/1/structures"
-  >
-    <CardContent
-      className="extra-bottom-padding"
-    >
-      <CardHeader>
-        Microstrategy
-      </CardHeader>
-      <SystemsPopup
-        structures_count={
-          Object {
-            "count": 1239,
-            "types": Array [
-              Object {
-                "count": 1200,
-                "name": "carpeta",
-              },
-              Object {
-                "count": 2,
-                "name": "tabla",
-              },
-              Object {
-                "count": 37,
-                "name": "columna",
-              },
-            ],
-          }
-        }
-      />
-    </CardContent>
-  </Card>
-  <Card
-    as={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "displayName": "Link",
-        "propTypes": Object {
-          "innerRef": [Function],
-          "onClick": [Function],
-          "replace": [Function],
-          "target": [Function],
-          "to": [Function],
-        },
-        "render": [Function],
-      }
-    }
-    key="27"
-    link={true}
-    to="/systems/27/structures"
-  >
-    <CardContent
-      className="extra-bottom-padding"
-    >
-      <CardHeader>
-        vacio
-      </CardHeader>
-    </CardContent>
-  </Card>
-</CardGroup>
-`;
-
-exports[`<SystemCards /> structures types count popup 1`] = `
-<Popup
-  basic={true}
-  disabled={false}
-  eventsEnabled={true}
-  on={
-    Array [
-      "click",
-      "hover",
-    ]
-  }
-  pinned={false}
-  popperModifiers={Array []}
-  position="top left"
-  trigger={
-    <Label
-      attached="bottom right"
-      className="overlapping"
-    >
-      <FormattedNumber
-        value={1239}
-      />
-    </Label>
-  }
->
-  <Table
-    as="table"
-    basic="very"
-    className="no-rows-border super-compact"
+exports[`<SystemCards /> It matches the latest snapshot with system_groups 1`] = `
+<div>
+  <div
+    class="accordion ui"
   >
-    <TableBody
-      as="tbody"
-    >
-      <TableRow
-        as="tr"
-        cellAs="td"
-        key="0"
+    <div>
+      <div
+        class="active title CardGroupTitle"
       >
-        <TableCell
-          as="td"
+        <h3
+          class="ui dividing header"
         >
-          <Icon
-            as="i"
-            name="question circle outline"
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
           />
-        </TableCell>
-        <TableCell
-          as="td"
-        >
-          <MemoizedFormattedMessage
-            defaultMessage="carpeta"
-            id="structure.type.carpeta.text"
-          />
-        </TableCell>
-        <TableCell
-          as="td"
-          textAlign="right"
-        >
-          1200
-        </TableCell>
-      </TableRow>
-      <TableRow
-        as="tr"
-        cellAs="td"
-        key="1"
+          Without Groups
+        </h3>
+      </div>
+      <div
+        class="content active"
       >
-        <TableCell
-          as="td"
+        <div
+          class="ui cards"
         >
-          <Icon
-            as="i"
-            name="question circle outline"
-          />
-        </TableCell>
-        <TableCell
-          as="td"
+          <a
+            class="ui link card"
+            href="/systems/27/structures"
+          >
+            <div
+              class="content extra-bottom-padding"
+            >
+              <div
+                class="header"
+              >
+                vacio
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="active title CardGroupTitle"
+      >
+        <h3
+          class="ui dividing header"
         >
-          <MemoizedFormattedMessage
-            defaultMessage="tabla"
-            id="structure.type.tabla.text"
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
           />
-        </TableCell>
-        <TableCell
-          as="td"
-          textAlign="right"
+          foo-group
+        </h3>
+      </div>
+      <div
+        class="content active"
+      >
+        <div
+          class="ui cards"
         >
-          2
-        </TableCell>
-      </TableRow>
-      <TableRow
-        as="tr"
-        cellAs="td"
-        key="2"
+          <a
+            class="ui link card"
+            href="/systems/1/structures"
+          >
+            <div
+              class="content extra-bottom-padding"
+            >
+              <div
+                class="header"
+              >
+                Microstrategy
+              </div>
+              <div
+                class="ui bottom right attached label overlapping"
+              >
+                1,239
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SystemCards /> It matches the latest snapshot without system_groups 1`] = `
+<div>
+  <div
+    class="ui cards structures"
+  >
+    <a
+      class="ui link card"
+      href="/systems/1/structures"
+    >
+      <div
+        class="content extra-bottom-padding"
       >
-        <TableCell
-          as="td"
+        <div
+          class="header"
         >
-          <Icon
-            as="i"
-            name="question circle outline"
-          />
-        </TableCell>
-        <TableCell
-          as="td"
+          Microstrategy
+        </div>
+        <div
+          class="ui bottom right attached label overlapping"
         >
-          <MemoizedFormattedMessage
-            defaultMessage="columna"
-            id="structure.type.columna.text"
-          />
-        </TableCell>
-        <TableCell
-          as="td"
-          textAlign="right"
+          1,239
+        </div>
+      </div>
+    </a>
+    <a
+      class="ui link card"
+      href="/systems/27/structures"
+    >
+      <div
+        class="content extra-bottom-padding"
+      >
+        <div
+          class="header"
         >
-          37
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</Popup>
+          vacio
+        </div>
+      </div>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<SystemCards /> structures types count popup 1`] = `
+Document {
+  "location": Location {
+    "assign": [Function],
+    "hash": "",
+    "host": "localhost",
+    "hostname": "localhost",
+    "href": "http://localhost/",
+    "origin": "http://localhost",
+    "pathname": "/",
+    "port": "",
+    "protocol": "http:",
+    "reload": [Function],
+    "replace": [Function],
+    "search": "",
+    "toString": [Function],
+  },
+}
 `;