@truedat/bg 8.7.4 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "8.7.4",
+  "version": "8.8.0",
   "description": "Truedat Web Business Glossary",
   "sideEffects": [
     "**/*.css",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.7.4",
+    "@truedat/test": "8.8.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "74bf59ddf29e05b518dc206271c4f1215d66a942"
+  "gitHead": "006b9cd6486cd37976d4dc06ede1a48e37175f30"
 }

package/src/concepts/components/Concept.js

@@ -109,7 +109,7 @@ export const Concept = ({ id, concept }) => {
         resource_type="business_concept"
         target_type="business_concept"
       />
-      <Grid columns="equal" style={{ marginTop: 0 }}>
+      <Grid className="concept-layout" columns="equal">
         <Grid.Column width={12}>
           <Segment>
             <ConceptHeader
@@ -139,13 +139,13 @@ export const Concept = ({ id, concept }) => {
           {grantView ? (
             <StructureGrantCart allowEmptyCart />
           ) : (
-            <>
+            <div className="concept-sidebar-content">
               <ConceptSummary />
               <ConceptRelationsSummary />
               <ConceptTaxonomy />
               <SharedToDomains />
               <ConceptCompleteness />
-            </>
+            </div>
           )}
         </Grid.Column>
       </Grid>

package/src/concepts/components/__tests__/__snapshots__/Concept.spec.js.snap

@@ -35,8 +35,7 @@ exports[`<Concept /> matches the latest snapshot 1`] = `
     </span>
   </div>
   <div
-    class="ui equal width grid"
-    style="margin-top: 0px;"
+    class="ui equal width grid concept-layout"
   >
     <div
       class="twelve wide column"
@@ -235,148 +234,152 @@ exports[`<Concept /> matches the latest snapshot 1`] = `
       class="four wide column"
     >
       <div
-        class="ui segment"
+        class="concept-sidebar-content"
       >
-        <h3
-          class="ui dividing header"
-        >
-          Resumen
-        </h3>
         <div
-          class="item concept-summary"
-          role="listitem"
+          class="ui segment"
         >
+          <h3
+            class="ui dividing header"
+          >
+            Resumen
+          </h3>
           <div
-            class="content concept-summary__content"
+            class="item concept-summary"
+            role="listitem"
           >
             <div
-              class="concept-summary__content-bold"
+              class="content concept-summary__content"
             >
-              concept.props.status
-              :
-            </div>
-            <div
-              class="ui olive label"
-            >
-              draft
+              <div
+                class="concept-summary__content-bold"
+              >
+                concept.props.status
+                :
+              </div>
+              <div
+                class="ui olive label"
+              >
+                draft
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="item concept-summary"
-          role="listitem"
-        >
           <div
-            class="content concept-summary__content"
+            class="item concept-summary"
+            role="listitem"
           >
             <div
-              class="concept-summary__content-bold"
-            >
-              concept.props.version
-              :
-            </div>
-            <div
-              class="ui label"
+              class="content concept-summary__content"
             >
-              <i
-                aria-hidden="true"
-                class="grey ellipsis vertical icon"
-              />
+              <div
+                class="concept-summary__content-bold"
+              >
+                concept.props.version
+                :
+              </div>
+              <div
+                class="ui label"
+              >
+                <i
+                  aria-hidden="true"
+                  class="grey ellipsis vertical icon"
+                />
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="item concept-summary"
-          role="listitem"
-        >
           <div
-            class="content concept-summary__content"
+            class="item concept-summary"
+            role="listitem"
           >
             <div
-              class="concept-summary__content-bold"
-            >
-              concept.props.last_update_at
-              :
-            </div>
-            <div
-              class="ui label"
+              class="content concept-summary__content"
             >
-              <time
-                datetime="1735725600000"
+              <div
+                class="concept-summary__content-bold"
+              >
+                concept.props.last_update_at
+                :
+              </div>
+              <div
+                class="ui label"
               >
-                2025-01-01 10:00
-              </time>
+                <time
+                  datetime="1735725600000"
+                >
+                  2025-01-01 10:00
+                </time>
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="item concept-summary"
-          role="listitem"
-        >
           <div
-            class="content concept-summary__content"
+            class="item concept-summary"
+            role="listitem"
           >
             <div
-              class="concept-summary__content-bold"
+              class="content concept-summary__content"
             >
-              concept.props.last_update_by
-              :
-            </div>
-            <div
-              class="ui label"
-            >
-              <i
-                aria-hidden="true"
-                class="grey ellipsis vertical icon"
-              />
+              <div
+                class="concept-summary__content-bold"
+              >
+                concept.props.last_update_by
+                :
+              </div>
+              <div
+                class="ui label"
+              >
+                <i
+                  aria-hidden="true"
+                  class="grey ellipsis vertical icon"
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="ui segment completeness"
-      >
-        <h3
-          class="ui dividing header"
-        >
-          Completeness
-           
-          es
-        </h3>
         <div
-          class="ui progress"
-          data-percent="0"
+          class="ui segment completeness"
         >
+          <h3
+            class="ui dividing header"
+          >
+            Completeness
+             
+            es
+          </h3>
           <div
-            class="bar"
-            style="width: 0%;"
+            class="ui progress"
+            data-percent="0"
           >
             <div
-              class="progress"
+              class="bar"
+              style="width: 0%;"
             >
-              0%
+              <div
+                class="progress"
+              >
+                0%
+              </div>
             </div>
           </div>
-        </div>
-        <h3
-          class="ui dividing header"
-        >
-          Completeness
-           
-          en
-        </h3>
-        <div
-          class="ui error progress"
-          data-percent="1"
-        >
+          <h3
+            class="ui dividing header"
+          >
+            Completeness
+             
+            en
+          </h3>
           <div
-            class="bar"
-            style="width: 1%;"
+            class="ui error progress"
+            data-percent="1"
           >
             <div
-              class="progress"
+              class="bar"
+              style="width: 1%;"
             >
-              1%
+              <div
+                class="progress"
+              >
+                1%
+              </div>
             </div>
           </div>
         </div>
@@ -421,8 +424,7 @@ exports[`<Concept /> matches the latest snapshot with grantView activated 1`] =
     </span>
   </div>
   <div
-    class="ui equal width grid"
-    style="margin-top: 0px;"
+    class="ui equal width grid concept-layout"
   >
     <div
       class="twelve wide column"

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

@@ -2,7 +2,8 @@ import _ from "lodash/fp";
 import { lazy } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Segment, Grid } from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Segment, Grid, Icon } from "semantic-ui-react";
 import {
   useDataStructureFilters,
   useDataStructureSearch,
@@ -60,6 +61,14 @@ const ConceptStructureLinksSegment = ({ groups, visible }) => {
             targetType="structure"
             linksActions={LinksActions}
           />
+          {_.isEmpty(groups) ? (
+            <div className="concept-structure-links-empty" role="status">
+              <Icon name="search" />
+              <span className="concept-structure-links-empty__message">
+                <FormattedMessage id="conceptStructureLinks.empty" />
+              </span>
+            </div>
+          ) : null}
         </>
       )}
     </Segment>

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

@@ -1,4 +1,3 @@
-import _ from "lodash/fp";
 import { render, waitForLoad } from "@truedat/test/render";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { ConceptStructureLinksPane } from "../ConceptStructureLinks";
@@ -48,6 +47,15 @@ afterAll(() => {
 });
 
 describe("<ConceptStructureLinksPane />", () => {
+  const emptyMessage =
+    "This concept currently has no relationships with structures.";
+  const renderOpts = {
+    messages: {
+      en: {
+        "conceptStructureLinks.empty": emptyMessage,
+      },
+    },
+  };
   const props = {
     groups: [[[{ name: "name" }], ["group", [{ name: "foo" }]]]],
   };
@@ -60,14 +68,38 @@ describe("<ConceptStructureLinksPane />", () => {
       searchData: [],
     });
 
-    const rendered = render(<ConceptStructureLinksPane {...props} />);
+    const rendered = render(
+      <ConceptStructureLinksPane {...props} />,
+      renderOpts,
+    );
 
     await waitForLoad(rendered);
     await rendered.findByText(/foo/i);
 
+    expect(rendered.queryByRole("status")).not.toBeInTheDocument();
     expect(rendered.container).toMatchSnapshot();
   });
 
+  it("renders an empty state when the concept has no structure relationships", async () => {
+    useConceptContext.mockReturnValue({
+      conceptContext: { grantView: false },
+    });
+    useSearchContext.mockReturnValue({
+      searchData: [],
+      loading: false,
+    });
+
+    const rendered = render(
+      <ConceptStructureLinksPane {...props} groups={[]} />,
+      renderOpts,
+    );
+
+    await waitForLoad(rendered);
+
+    expect(rendered.getByRole("status")).toHaveTextContent(emptyMessage);
+    expect(rendered.container.querySelector("table")).not.toBeInTheDocument();
+  });
+
   it("matches the latest snapshot with grantView", async () => {
     useConceptContext.mockReturnValue({
       conceptContext: { grantView: true },
@@ -89,9 +121,13 @@ describe("<ConceptStructureLinksPane />", () => {
       loading: false,
     });
 
-    const rendered = render(<ConceptStructureLinksPane {...props} />);
+    const rendered = render(
+      <ConceptStructureLinksPane {...props} />,
+      renderOpts,
+    );
     await waitForLoad(rendered);
 
+    expect(rendered.queryByRole("status")).not.toBeInTheDocument();
     expect(rendered.container).toMatchSnapshot();
   });
 });

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

@@ -28,11 +28,11 @@ exports[`<ConceptRelationRow /> matches the latest snapshot 1`] = `
       class="center aligned"
     >
       <button
-        class="ui red mini basic icon button"
+        class="ui red mini basic compact icon button relation-actions__delete-button"
       >
         <i
           aria-hidden="true"
-          class="red trash alternate outline icon"
+          class="red trash alternate outline small icon relation-actions__delete-icon"
         />
       </button>
     </td>

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

@@ -26,36 +26,57 @@ exports[`<ConceptStructureLinksPane /> matches the latest snapshot 1`] = `
           >
             conceptRelation.master.table.title
           </h3>
-          <table
-            class="ui table"
+          <div
+            class="links-pane__table-scroll"
           >
-            <thead
-              class=""
+            <table
+              class="ui celled sortable unstackable compact table links-pane__table"
+              style="--links-pane-table-min-width: 264px;"
             >
-              <tr
+              <colgroup>
+                <col
+                  class="links-pane__column"
+                  style="--links-pane-column-width: 264px;"
+                />
+              </colgroup>
+              <thead
                 class=""
               >
-                <th
+                <tr
                   class=""
                 >
-                  name
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              class=""
-            >
-              <tr
+                  <th
+                    class="links-pane__cell links-pane__cell--header links-pane__cell--wrap"
+                    style="--links-pane-column-width: 264px;"
+                  >
+                    <span
+                      class="links-pane__filter-label"
+                    >
+                      <span
+                        class="links-pane__filter-label-text"
+                      >
+                        name
+                      </span>
+                    </span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody
                 class=""
               >
-                <td
+                <tr
                   class=""
                 >
-                  foo
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                  <td
+                    class="links-pane__cell links-pane__cell--wrap"
+                    style="--links-pane-column-width: 264px;"
+                  >
+                    foo
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>

package/src/concepts/relations/selectors/__tests__/getConceptLinks.spec.js

@@ -133,6 +133,6 @@ describe("selectors: getConceptLinks", () => {
   });
   it("should return the keys of the concept filters which are not currently active", () => {
     const columns = _.flow(getConceptLinks, _.map(_.first))(state);
-    expect(_.map(_.size)(columns)).toEqual([9, 9]);
+    expect(_.map(_.size)(columns)).toEqual([8, 8]);
   });
 });

package/src/concepts/relations/selectors/getConceptLinks.js

@@ -79,7 +79,6 @@ const withDeletedAttribute = (conceptLinks, columns) =>
               sort: { name: "deleted_at" },
               fieldDecorator: dateDecorator,
               textAlign: "center",
-              width: 2,
             }
           : c,
       )(columns)

package/src/concepts/relations/styles/ConceptStructureLinks.less

@@ -0,0 +1,27 @@
+.concept-structure-links-empty {
+  align-items: center;
+  background: #fafbfc;
+  border: 1px dashed #cbd2da;
+  border-radius: 10px;
+  color: #4d5865;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  justify-content: center;
+  margin-top: 2rem;
+  min-height: 140px;
+  padding: 2rem 1.25rem;
+  text-align: center;
+
+  > .icon {
+    color: #c9d1e0;
+    font-size: 2.5rem;
+    margin: 0;
+  }
+
+  &__message {
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+}

package/src/concepts/styles/Concept.less

@@ -0,0 +1,31 @@
+.ui.grid.concept-layout {
+  margin-top: 0;
+}
+
+@media (max-width: 1399px) {
+  .ui.grid.concept-layout {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+  }
+
+  .ui.grid.concept-layout > .column:not(.row).twelve.wide,
+  .ui.grid.concept-layout > .column:not(.row).four.wide {
+    width: 100% !important;
+  }
+
+  .ui.grid.concept-layout > .column:not(.row) {
+    flex: 0 0 auto !important;
+  }
+
+  .concept-sidebar-content {
+    align-items: start;
+    display: grid;
+    gap: 1em;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .concept-sidebar-content > .ui.segment {
+    align-self: start;
+    margin-top: 0;
+  }
+}