@truedat/bg 7.1.3 → 7.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.1.3",
+  "version": "7.1.4",
   "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.1.3",
+    "@truedat/test": "7.1.4",
     "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.1.3",
-    "@truedat/df": "7.1.3",
-    "@truedat/lm": "7.1.3",
+    "@truedat/core": "7.1.4",
+    "@truedat/df": "7.1.4",
+    "@truedat/lm": "7.1.4",
     "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": "10542097513c7492b7bde1eed3de39746c39b908"
+  "gitHead": "4b951559f6e84f85ed054bf9afe8699dc57f7b8f"
 }

package/src/concepts/components/ConceptCrumbs.js

@@ -1,19 +1,16 @@
-import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Breadcrumb } from "semantic-ui-react";
-import { useActiveRoute } from "@truedat/core/hooks";
-import { connect } from "react-redux";
 import { Link, useHistory } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
-import {
-  CONCEPTS_BULK_UPDATE,
-  CONCEPTS,
-  CONCEPTS_PENDING,
-  linkTo,
-} from "@truedat/core/routes";
-
-export const ConceptCrumbs = ({
+import { connect } from "react-redux";
+
+import { useActiveRoute } from "@truedat/core/hooks";
+import { CONCEPTS_BULK_UPDATE, linkTo } from "@truedat/core/routes";
+import { getConceptVersionPath } from "../selectors/getConceptVersionPath";
+
+const ConceptCrumbs = ({
+  conceptVersionPath,
   name: defaultName,
   status,
   conceptAction,
@@ -22,61 +19,107 @@ export const ConceptCrumbs = ({
   i18n_content,
 }) => {
   const { locale } = useIntl();
+  const history = useHistory();
+  const bulkUpdateActive = useActiveRoute(CONCEPTS_BULK_UPDATE);
 
-  const i18n_lang_content = _.get(locale)(i18n_content);
-
-  const name = _.isUndefined(i18n_lang_content)
-    ? defaultName
-    : i18n_lang_content?.name;
+  const name = i18n_content?.[locale]?.name ?? defaultName;
 
-  const bulkUpdateActive = useActiveRoute(CONCEPTS_BULK_UPDATE);
-  const history = useHistory();
   const fromStatus = () =>
     status === "published"
-      ? history.push(CONCEPTS)
-      : history.push(CONCEPTS_PENDING);
+      ? history.push(linkTo.CONCEPTS)
+      : history.push(linkTo.CONCEPTS_PENDING);
+
   const goBack = () => (bulkUpdateActive ? history.goBack() : fromStatus());
-  return name || conceptAction ? (
+
+  const additionalCrumbs = [];
+
+  if (id) {
+    if (conceptAction) {
+      additionalCrumbs.push({
+        id: null,
+        path: linkTo.CONCEPT_VERSION({ business_concept_id, id }),
+        label: name,
+      });
+    } else {
+      additionalCrumbs.push({
+        id: null,
+        path: null,
+        label: name,
+      });
+    }
+  }
+
+  if (conceptAction) {
+    additionalCrumbs.push({
+      id: conceptAction,
+      path: null,
+    });
+  }
+
+  const allCrumbs = [...conceptVersionPath, ...additionalCrumbs];
+
+  if (allCrumbs.length === 0) {
+    return null;
+  }
+
+  return (
     <Breadcrumb>
-      <Breadcrumb.Section onClick={goBack} active={false}>
-        <FormattedMessage id="concepts.crumbs.top" />
-      </Breadcrumb.Section>
-      {name && (
-        <>
-          <Breadcrumb.Divider icon="right angle" />
-          {conceptAction ? (
-            <Breadcrumb.Section
-              as={Link}
-              to={linkTo.CONCEPT_VERSION({ business_concept_id, id })}
-              active={false}
-            >
-              {name}
+      {allCrumbs.map((crumb, index) => {
+        const isLast = index === allCrumbs.length - 1;
+
+        const crumbLabel = crumb.id ? (
+          <FormattedMessage id={crumb.id} />
+        ) : (
+          crumb.label
+        );
+
+        const sectionProps = crumb.path
+          ? { to: crumb.path, as: Link }
+          : {
+              as: "span",
+              onClick: index === 0 ? goBack : undefined,
+              style: { cursor: index === 0 ? "pointer" : "default" },
+            };
+
+        return (
+          <React.Fragment key={index}>
+            <Breadcrumb.Section active={isLast} {...sectionProps}>
+              {crumbLabel}
             </Breadcrumb.Section>
-          ) : (
-            <Breadcrumb.Section active>{name}</Breadcrumb.Section>
-          )}
-        </>
-      )}
-
-      {conceptAction && (
-        <>
-          <Breadcrumb.Divider icon="right angle" />
-          <Breadcrumb.Section active>
-            <FormattedMessage id={conceptAction} />
-          </Breadcrumb.Section>
-        </>
-      )}
+            {!isLast && <Breadcrumb.Divider icon="right angle" />}
+          </React.Fragment>
+        );
+      })}
     </Breadcrumb>
-  ) : null;
+  );
 };
 
 ConceptCrumbs.propTypes = {
-  business_concept_id: PropTypes.string,
+  conceptVersionPath: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      path: PropTypes.string,
+    })
+  ),
   name: PropTypes.string,
+  status: PropTypes.string,
   conceptAction: PropTypes.string,
+  business_concept_id: PropTypes.number,
   id: PropTypes.number,
-  status: PropTypes.string,
+  i18n_content: PropTypes.object,
+};
+
+const mapStateToProps = (state) => {
+  const { concept } = state;
+
+  return {
+    conceptVersionPath: getConceptVersionPath(state),
+    name: concept.name,
+    status: concept.status,
+    business_concept_id: concept.business_concept_id,
+    id: concept.id,
+    i18n_content: concept.i18n_content,
+  };
 };
 
-const mapStateToProps = ({ concept }) => ({ ...concept });
 export default connect(mapStateToProps)(ConceptCrumbs);

package/src/concepts/components/ConceptRoutes.js

@@ -14,7 +14,12 @@ import {
   CONCEPTS_NEW,
   CONCEPTS_PENDING,
   CONCEPTS_DEPRECATED,
-  CONCEPTS_SUBSCOPED,
+  CONCEPTS_SUBSCOPE,
+  CONCEPTS_SIDEMENU_MANAGEMENT_LINKS,
+  CONCEPTS_SIDEMENU_MANAGEMENT_UPLOADS,
+  CONCEPTS_SIDEMENU_SUBSCOPE,
+  CONCEPTS_SIDEMENU_SUBSCOPE_PENDING,
+  CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED,
   CONCEPTS,
 } from "@truedat/core/routes";
 import { useIntl } from "react-intl";
@@ -42,212 +47,243 @@ const RelationsGraphLoader = React.lazy(() =>
   import("@truedat/lm/components/RelationsGraphLoader")
 );
 
-export const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
+const ConceptRoutes = ({ concept, conceptLoaded, templatesLoaded }) => {
   const { formatMessage } = useIntl();
   const authorized = useAuthorized([
     "business_glossary_view",
     "business_glossary_management",
   ]);
+  if (!authorized) {
+    return <Unauthorized />;
+  }
+
   const pendingConceptsDefaultFilters = {
     status: ["pending_approval", "draft", "rejected"],
   };
+
   const archivedConceptsDefaultFilters = {
     status: ["deprecated"],
   };
 
+  const renderConceptsComponent = (props, filters, key) => {
+    const subscope = _.get("match.params.subscope", props) || "";
+    const baseId = `concepts.${subscope || "default"}.${key}`;
+
+    const showCreate = key === "pending";
+    const showUpload = key === "pending";
+
+    return (
+      <Concepts
+        defaultFilters={{
+          ...filters,
+          "template.subscope": subscope ? [subscope] : undefined,
+        }}
+        header={formatMessage({ id: `${baseId}.header` })}
+        subheader={formatMessage({ id: `${baseId}.subheader` })}
+        icon={formatMessage({
+          id: `concepts.${subscope}.icon`,
+          defaultMessage: "tags",
+        })}
+        create={showCreate}
+        upload={showUpload}
+      />
+    );
+  };
+
   return (
-    <>
+    <Switch>
       <Route
         exact
         path={CONCEPTS_BULK_UPLOAD_EVENTS}
-        render={() =>
-          authorized ? <ConceptsUploadEvents /> : <Unauthorized />
-        }
+        render={() => <ConceptsUploadEvents />}
+      />
+      <Route
+        exact
+        path={CONCEPTS_SIDEMENU_MANAGEMENT_UPLOADS}
+        render={() => <ConceptsUploadEvents />}
+      />
+
+      <Route
+        exact
+        path={CONCEPTS_SIDEMENU_MANAGEMENT_LINKS}
+        render={() => (
+          <>
+            <RelationTagsLoader />
+            <ConceptsLinksManagement
+              header={formatMessage({ id: "concepts.header.linksManager" })}
+              subheader={formatMessage({
+                id: "concepts.subheader.linksManager",
+              })}
+              icon={formatMessage({
+                id: "concepts.header.linksManager.icon",
+                defaultMessage: "linkify",
+              })}
+            />
+          </>
+        )}
       />
+
       <Route
         exact
         path={CONCEPT_LINKS_MANAGEMENT}
-        render={() =>
-          authorized ? (
-            <>
-              <RelationTagsLoader />
-              <ConceptsLinksManagement
-                header={formatMessage({
-                  id: "concepts.header.linksManager",
-                })}
-                subheader={formatMessage({
-                  id: "concepts.subheader.linksManager",
-                })}
-                icon={formatMessage({
-                  id: "concepts.header.linksManager.icon",
-                  defaultMessage: "linkify",
-                })}
-              />
-            </>
-          ) : (
-            <Unauthorized />
-          )
-        }
+        render={() => (
+          <>
+            <RelationTagsLoader />
+            <ConceptsLinksManagement
+              header={formatMessage({ id: "concepts.header.linksManager" })}
+              subheader={formatMessage({
+                id: "concepts.subheader.linksManager",
+              })}
+              icon={formatMessage({
+                id: "concepts.header.linksManager.icon",
+                defaultMessage: "linkify",
+              })}
+            />
+          </>
+        )}
       />
 
       <Route
         exact
         path={CONCEPTS_PENDING}
-        render={() =>
+        render={(routeProps) =>
           authorized ? (
-            <>
-              <Concepts
-                defaultFilters={pendingConceptsDefaultFilters}
-                header={formatMessage({ id: "concepts.header.manage" })}
-                subheader={formatMessage({ id: "concepts.subheader.manage" })}
-                icon={formatMessage({
-                  id: "concepts.header.manage.icon",
-                  defaultMessage: "edit",
-                })}
-                create
-                upload
-              />
-            </>
+            renderConceptsComponent(
+              routeProps,
+              pendingConceptsDefaultFilters,
+              "pending"
+            )
           ) : (
             <Unauthorized />
           )
         }
       />
+
       <Route
         exact
         path={CONCEPTS_DEPRECATED}
-        render={() =>
-          authorized ? (
-            <>
-              <Concepts
-                defaultFilters={archivedConceptsDefaultFilters}
-                header={formatMessage({ id: "concepts.header.deprecated" })}
-                subheader={formatMessage({
-                  id: "concepts.subheader.deprecated",
-                })}
-                icon={formatMessage({
-                  id: "concepts.header.deprecated.icon",
-                  defaultMessage: "archive",
-                })}
-                update={false}
-              />
-            </>
-          ) : (
-            <Unauthorized />
+        render={(routeProps) =>
+          renderConceptsComponent(
+            routeProps,
+            archivedConceptsDefaultFilters,
+            "deprecated"
           )
         }
       />
+
       <Route
         exact
-        path={CONCEPTS_SUBSCOPED}
-        render={(props) => {
-          const subscope = _.prop("match.params.subscope")(props);
-          const defaultFilters = {
-            status: ["published"],
-            ...(subscope ? { "template.subscope": [subscope] } : {}),
-          };
-          return authorized ? (
-            <>
-              <Concepts
-                header={subscope}
-                icon={formatMessage({
-                  id: "concepts.header.icon",
-                  defaultMessage: "tags",
-                })}
-                defaultFilters={defaultFilters}
-              />
-            </>
-          ) : (
-            <Unauthorized />
-          );
-        }}
+        path={CONCEPTS_SUBSCOPE}
+        render={(routeProps) =>
+          renderConceptsComponent(routeProps, { status: ["published"] }, "main")
+        }
       />
-
       <Route
-        path={CONCEPTS}
-        render={() =>
-          authorized ? (
-            <Switch>
-              <Route
-                exact
-                path={CONCEPTS}
-                render={() => (
-                  <>
-                    <Concepts
-                      defaultFilters={{
-                        status: ["published"],
-                        "template.subscope": "",
-                      }}
-                      header={formatMessage({ id: "concepts.header" })}
-                      subheader={formatMessage({
-                        id: "concepts.subheader.view",
-                      })}
-                      icon={formatMessage({
-                        id: "concepts.header.icon",
-                        defaultMessage: "tags",
-                      })}
-                    />
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={CONCEPTS_BULK_UPDATE}
-                render={() => (
-                  <>
-                    <ConceptCrumbs conceptAction="actions.update" />
-                    <TemplatesLoader scope="bg" />
-                    {templatesLoaded && <ConceptsBulkUpdate />}
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={CONCEPTS_NEW}
-                render={() => (
-                  <>
-                    <ConceptCrumbs conceptAction="concepts.actions.create" />
-                    <ConceptCreate />
-                  </>
-                )}
-              />
-              <Route
-                exact
-                path={CONCEPT_EDIT}
-                render={() => (
-                  <>
-                    <ConceptCrumbs conceptAction="concepts.actions.edit" />
-                    <TemplatesLoader scope="bg" />
-                    <ConceptLoader />
-                    {conceptLoaded && templatesLoaded ? <ConceptEdit /> : null}
-                  </>
-                )}
-              />
-              <Route
-                path={CONCEPT_VERSION}
-                render={() => (
-                  <>
-                    <ConceptLoader />
-                    <RelationTagsLoader />
-                    {conceptLoaded ? (
-                      <>
-                        <ConceptSubscriptionLoader />
-                        <RelationsGraphLoader
-                          resource_id={concept?.business_concept_id}
-                        />
-                        <Concept />
-                      </>
-                    ) : null}
-                  </>
-                )}
-              />
-            </Switch>
-          ) : (
-            <Unauthorized />
+        exact
+        path={CONCEPTS_SIDEMENU_SUBSCOPE}
+        render={(routeProps) =>
+          renderConceptsComponent(routeProps, { status: ["published"] }, "main")
+        }
+      />
+      <Route
+        exact
+        path={CONCEPTS_SIDEMENU_SUBSCOPE_PENDING}
+        render={(routeProps) =>
+          renderConceptsComponent(
+            routeProps,
+            { status: ["pending_approval", "draft", "rejected"] },
+            "pending"
+          )
+        }
+      />
+      <Route
+        exact
+        path={CONCEPTS_SIDEMENU_SUBSCOPE_DEPRECATED}
+        render={(routeProps) =>
+          renderConceptsComponent(
+            routeProps,
+            { status: ["deprecated"] },
+            "deprecated"
           )
         }
       />
-    </>
+      <Route
+        exact
+        path={CONCEPT_EDIT}
+        render={() => (
+          <>
+            <ConceptCrumbs conceptAction="concepts.actions.edit" />
+            <TemplatesLoader scope="bg" />
+            <ConceptLoader />
+            {conceptLoaded && templatesLoaded ? <ConceptEdit /> : null}
+          </>
+        )}
+      />
+      <Route
+        path={CONCEPT_VERSION}
+        render={() => (
+          <>
+            <ConceptLoader />
+            <RelationTagsLoader />
+            {conceptLoaded && (
+              <>
+                <ConceptSubscriptionLoader />
+                <RelationsGraphLoader
+                  resource_id={concept?.business_concept_id}
+                />
+                <Concept />
+              </>
+            )}
+          </>
+        )}
+      />
+      <Route
+        exact
+        path={CONCEPTS_NEW}
+        render={() => (
+          <>
+            <ConceptCrumbs conceptAction="concepts.actions.create" />
+            <ConceptCreate />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path={CONCEPTS_BULK_UPDATE}
+        render={() => (
+          <>
+            <ConceptCrumbs conceptAction="actions.update" />
+            <TemplatesLoader scope="bg" />
+            {templatesLoaded && <ConceptsBulkUpdate />}
+          </>
+        )}
+      />
+      <Route
+        exact
+        path={CONCEPTS_NEW}
+        render={() => (
+          <>
+            <ConceptCrumbs conceptAction="concepts.actions.create" />
+            <ConceptCreate />
+          </>
+        )}
+      />
+      <Route
+        exact
+        path={CONCEPTS}
+        render={() => (
+          <Concepts
+            defaultFilters={{ status: ["published"], "template.subscope": "" }}
+            header={formatMessage({ id: "concepts.header" })}
+            subheader={formatMessage({ id: "concepts.subheader.view" })}
+            icon={formatMessage({
+              id: "concepts.header.icon",
+              defaultMessage: "tags",
+            })}
+          />
+        )}
+      />
+    </Switch>
   );
 };
 
@@ -257,10 +293,10 @@ ConceptRoutes.propTypes = {
   templatesLoaded: PropTypes.bool,
 };
 
-const mapStateToProps = ({ concept, templatesLoading, templates }) => ({
-  conceptLoaded: !_.isEmpty(concept),
-  templatesLoaded: !templatesLoading && !_.isEmpty(templates),
-  concept,
+const mapStateToProps = (state) => ({
+  concept: state.concept,
+  conceptLoaded: !_.isEmpty(state.concept),
+  templatesLoaded: !state.templatesLoading && !_.isEmpty(state.templates),
 });
 
 export default connect(mapStateToProps)(ConceptRoutes);

package/src/concepts/components/Concepts.js

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Header, Icon, Segment } from "semantic-ui-react";
-import ConceptCrumbs from "./ConceptCrumbs";
 import ConceptsPanel from "./ConceptsPanel";
 
 export const Concepts = ({
@@ -13,7 +12,6 @@ export const Concepts = ({
 }) => {
   return (
     <>
-      <ConceptCrumbs />
       <Segment>
         <Header as="h2">
           <Icon circular name={icon} />