@truedat/bg 7.5.0 → 7.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.5.0",
+  "version": "7.5.1",
   "description": "Truedat Web Business Glossary",
   "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.0",
+    "@truedat/test": "7.5.1",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -86,9 +86,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "7.5.0",
-    "@truedat/df": "7.5.0",
-    "@truedat/lm": "7.5.0",
+    "@truedat/core": "7.5.1",
+    "@truedat/df": "7.5.1",
+    "@truedat/lm": "7.5.1",
     "decode-uri-component": "^0.2.2",
     "file-saver": "^2.0.5",
     "moment": "^2.29.4",
@@ -111,5 +111,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "c6088400f5b3724b8b358e9c4893096005fe4e42"
+  "gitHead": "dd78383f466a9151664396b76163d13c0a5c641c"
 }

package/src/concepts/api.js

@@ -10,6 +10,8 @@ const API_BUSINESS_CONCEPT_VERSIONS_SEARCH =
 const API_BUSINESS_CONCEPT_VERSIONS_UPLOAD =
   "/api/business_concept_versions/upload";
 const API_CONCEPT_ARCHIVE = "/api/business_concepts/:id/versions";
+const API_CONCEPT_LINKS_DOWNLOAD =
+  "/api/business_concept_versions/links/download";
 const API_CONCEPT_FILTERS = "/api/business_concept_filters/search";
 const API_CONCEPT_SHARED_DOMAINS = "/api/business_concepts/:id/shared_domains";
 const API_BUSINESS_CONCEPT_BULK_UPDATE =
@@ -27,6 +29,7 @@ export {
   API_BUSINESS_CONCEPT_VERSIONS_SEARCH,
   API_BUSINESS_CONCEPT_VERSIONS_UPLOAD,
   API_CONCEPT_ARCHIVE,
+  API_CONCEPT_LINKS_DOWNLOAD,
   API_CONCEPT_FILTERS,
   API_CONCEPT_SHARED_DOMAINS,
   API_BUSINESS_CONCEPT_BULK_UPDATE,

package/src/concepts/hooks/useConcepts.js

@@ -1,13 +1,24 @@
 import useSWR from "swr";
 import useSWRMutations from "swr/mutation";
-import { apiJson, apiJsonPost } from "@truedat/core/services/api";
+import FileSaver from "file-saver";
+import { apiJson, apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
 
 import {
   API_CONCEPT_FILTERS,
+  API_CONCEPT_LINKS_DOWNLOAD,
   API_BUSINESS_CONCEPT_VERSIONS_SEARCH,
   API_BUSINESS_CONCEPT_VERSIONS_ACTIONS,
 } from "../api";
 
+function saveFile({ data, headers }) {
+  const contentDisposition = headers["content-disposition"];
+  const regex = /filename=(.+)$/;
+  const match = regex.exec(contentDisposition);
+  const fileName = match ? match[1] : "links.xlsx";
+
+  FileSaver.saveAs(data, fileName);
+}
+
 export const useConceptFilters = () => {
   return useSWRMutations(API_CONCEPT_FILTERS, (url, { arg }) =>
     apiJsonPost(url, arg)
@@ -32,3 +43,13 @@ export const useConceptVersionsActions = () => {
     mutate,
   };
 };
+
+export const useConceptLinksDownload = () => {
+  return useSWRMutations(API_CONCEPT_LINKS_DOWNLOAD, (url, { arg }) => {
+    return apiJsonPost(url, arg, { ...JSON_OPTS, responseType: "blob" }).then(
+      ({ data, headers }) => {
+        saveFile({ data, headers });
+      }
+    );
+  });
+};

package/src/concepts/relations/components/ConceptSelector.js

@@ -2,8 +2,15 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Table, Message, Label, Icon, Segment } from "semantic-ui-react";
-import { FormattedMessage } from "react-intl";
+import {
+  Button,
+  Table,
+  Message,
+  Label,
+  Icon,
+  Segment,
+} from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
 import SearchWidget from "@truedat/core/search/SearchWidget";
 import {
   SearchContextProvider,
@@ -14,6 +21,7 @@ import { mapStatusColor } from "../../constants/mappings";
 import { translations } from "../../utils/filterOptions";
 
 import {
+  useConceptLinksDownload,
   useConceptVersionsSearch,
   useConceptFilters,
 } from "../../hooks/useConcepts";
@@ -78,8 +86,12 @@ export function ConceptSelectorContent({
   showTitle = true,
   links,
 }) {
-  const { searchData } = useSearchContext();
+  const { searchData, filterParams: searchParams } = useSearchContext();
+  const { trigger: triggerDownload, isMutating: downloading } =
+    useConceptLinksDownload();
+  const { formatMessage } = useIntl();
   const concepts = searchData?.data;
+  const conceptsActions = _.propOr({}, "_actions")(searchData);
 
   const selectedConceptIsFiltered = !_.reduce(
     (acc, c) => (selectedConcept && c.id == selectedConcept.id) || acc,
@@ -103,6 +115,18 @@ export function ConceptSelectorContent({
         </label>
       )}
       <Segment>
+        {conceptsActions?.downloadLinks && (
+          <Button
+            icon="download"
+            floated="right"
+            secondary
+            loading={downloading}
+            onClick={() => triggerDownload(searchParams)}
+            data-tooltip={formatMessage({
+              id: "concepts.actions.downloadLinks.tooltip",
+            })}
+          />
+        )}
         <SearchWidget />
         {!_.isEmpty(concepts) || selectedConcept ? (
           <Table selectable size="small">

package/src/concepts/relations/components/__tests__/ConceptSelector.spec.js

@@ -25,6 +25,7 @@ const data = {
       last_change_at: "2020-01-01T00:00:00.000Z",
     },
   ],
+  _actions: { downloadLinks: {} },
 };
 
 const filterData = {
@@ -91,6 +92,11 @@ describe("<ConceptSelector />", () => {
     await waitFor(() => {
       expect(container.querySelector(".loading")).toBeNull();
     });
+    expect(
+      container.querySelector(
+        'button[data-tooltip="concepts.actions.downloadLinks.tooltip"]'
+      )
+    ).toBeInTheDocument();
     expect(container).toMatchSnapshot();
   });
 

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptSelector.spec.js.snap

@@ -8,6 +8,15 @@ exports[`<ConceptSelector /> matches the latest snapshot 1`] = `
   <div
     class="ui segment"
   >
+    <button
+      class="ui icon secondary right floated button"
+      data-tooltip="concepts.actions.downloadLinks.tooltip"
+    >
+      <i
+        aria-hidden="true"
+        class="download icon"
+      />
+    </button>
     <div
       class="ui action left icon input"
     >