@truedat/dd 6.8.1 → 6.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.8.1",
+  "version": "6.8.3",
   "description": "Truedat Web Data Dictionary",
   "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": "6.7.1",
+    "@truedat/test": "6.8.3",
     "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.7.1",
-    "@truedat/auth": "6.8.1",
-    "@truedat/core": "6.8.1",
-    "@truedat/df": "6.8.1",
+    "@truedat/auth": "6.8.3",
+    "@truedat/core": "6.8.3",
+    "@truedat/df": "6.8.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "974fcd9317b94e2b5b5eafe0281deeeaa58535b7"
+  "gitHead": "d3bea8cda996ea5ec5d2a0a75dfeb9a0594269d5"
 }

package/src/components/DictionaryRoutes.js

@@ -114,7 +114,11 @@ export const DictionaryRoutes = () => {
         render={() => (
           <>
             <SystemsLoader />
-            <PendingStructureNotes />
+            <PendingStructureNotes
+              defaultFilters={{
+                note_status: ["rejected", "draft", "pending_approval"],
+              }}
+            />
           </>
         )}
       />

package/src/components/GrantRequest.js

@@ -21,7 +21,7 @@ const ConditionSummary = React.lazy(() =>
 
 export const GrantRequest = ({ grantRequest, template }) => {
   const { formatMessage } = useIntl();
-  const metadata = grantRequest?.metadata;
+  const dynamic_content = grantRequest?.dynamic_content;
   const data_structure = grantRequest?._embedded?.data_structure;
   const path = _.flow(
     _.map("name"),
@@ -101,8 +101,11 @@ export const GrantRequest = ({ grantRequest, template }) => {
                 </List.Description>
               </List.Item>
             </List>
-            {metadata && template && (
-              <DynamicFormViewer template={template} content={metadata} />
+            {dynamic_content && template && (
+              <DynamicFormViewer
+                template={template}
+                content={dynamic_content}
+              />
             )}
           </Segment>
         </Grid.Column>

package/src/components/PendingStructureNoteRow.js

@@ -2,41 +2,33 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { Table } from "semantic-ui-react";
-import { useIntl } from "react-intl";
 import { useHistory } from "react-router-dom";
+import { columnDecorator } from "@truedat/core/services";
 import { linkTo } from "@truedat/core/routes";
 
-const PendingStructureNoteRow = ({ structureNote }) => {
-  const { formatMessage } = useIntl();
+const PendingStructureNoteRow = ({ structure, columns }) => {
   const history = useHistory();
-  const dataStructure = structureNote?.dataStructure;
-  const path = _.propOr([], "dataStructure.currentVersion.path")(structureNote);
-  const name = dataStructure?.currentVersion?.name;
-  const system = dataStructure?.system?.name;
-  const domainsNames = _.flow(
-    _.prop("dataStructure.domains"),
-    _.map("name")
-  )(structureNote);
-
-  return (
-    <Table.Row
-      onClick={() => history.push(linkTo.STRUCTURE_NOTES(dataStructure))}
-    >
-      <Table.Cell content={name} />
-      <Table.Cell
-        content={formatMessage({
-          id: `structure.notes.status.${structureNote.status}`,
-        })}
-      />
-      <Table.Cell content={system} />
-      <Table.Cell content={domainsNames.join(", ")} />
-      <Table.Cell content={path.join(" > ")} />
+  return _.isEmpty(columns) || _.isEmpty(structure) ? null : (
+    <Table.Row key={structure.id}>
+      {columns.map((column, i) => (
+        <Table.Cell
+          key={i}
+          {...(i == 0 && {
+            title: columnDecorator(column)(structure),
+            className: "structure-cell-overflow",
+          })}
+          textAlign={column.textAlign}
+          content={columnDecorator(column)(structure)}
+          onClick={() => history.push(linkTo.STRUCTURE({ id: structure.id }))}
+        />
+      ))}
     </Table.Row>
   );
 };
 
 PendingStructureNoteRow.propTypes = {
-  structureNote: PropTypes.object,
+  structure: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
 };
 
 export default PendingStructureNoteRow;

package/src/components/PendingStructureNotes.js

@@ -1,34 +1,25 @@
 import _ from "lodash/fp";
-import React, { useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { FormattedMessage, useIntl } from "react-intl";
-import { useQuery } from "@apollo/client";
-import { Checkbox, Form, Header, Icon, Segment } from "semantic-ui-react";
-import { useForm, Controller } from "react-hook-form";
-import { DomainSelector } from "@truedat/core/components";
-import { STRUCTURE_NOTES_QUERY } from "../api/queries";
+import { FormattedMessage } from "react-intl";
+import { Dimmer, Loader, Header, Icon, Segment } from "semantic-ui-react";
+import {
+  SearchContextProvider,
+  useSearchContext,
+} from "@truedat/core/search/SearchContext";
+import SearchWidget from "@truedat/core/search/SearchWidget";
+import {
+  useDataStructureFilters,
+  useDataStructureSearch,
+} from "../hooks/useStructures";
+import translations from "../utils/structureCustomTranslations";
+import PendingStructureNotesPagination from "./PendingStructureNotesPagination";
+import PendingStructureNotesLabelResults from "./PendingStructureNotesLabelResults";
 import PendingStructureNotesTable from "./PendingStructureNotesTable";
 
-const STATUS = ["pending_approval", "draft", "rejected"];
-
-export const PendingStructureNotes = ({ systems }) => {
-  const { formatMessage } = useIntl();
-  const [domainsLoading, setDomainsLoading] = useState(true);
-  const [filter, setFilter] = useState({
-    statuses: STATUS,
-  });
-  const { loading, error, data } = useQuery(STRUCTURE_NOTES_QUERY, {
-    variables: { filter },
-    fetchPolicy: "cache-and-network",
-  });
-  const items = loading || error ? [] : data?.structureNotes;
-  const { control } = useForm({
-    mode: "all",
-    defaultValues: {
-      status: STATUS,
-    },
-  });
+export const PendingStructureNotesContent = () => {
+  const { loading } = useSearchContext();
 
   return (
     <Segment>
@@ -41,97 +32,53 @@ export const PendingStructureNotes = ({ systems }) => {
           </Header.Subheader>
         </Header.Content>
       </Header>
-      <Form loading={domainsLoading}>
-        <Header
-          as="h5"
-          content={formatMessage({ id: "pendingStructureNotes.filters" })}
-        />
-        <Controller
-          control={control}
-          name="status"
-          render={({ field: { onBlur, onChange, value } }) => (
-            <Form.Field className="subscriptions-checkbox-filters">
-              <label>
-                <FormattedMessage id="pendingStructureNotes.props.status" />
-              </label>
-              {STATUS.map((type, idx) => (
-                <Checkbox
-                  onBlur={onBlur}
-                  key={idx}
-                  label={
-                    <label>
-                      <FormattedMessage
-                        id={`structure.notes.status.${type}`}
-                        defaultMessage={type}
-                      />
-                    </label>
-                  }
-                  onChange={() => {
-                    const statuses = _.includes(type)(value)
-                      ? _.filter((t) => t !== type)(value)
-                      : [...value, type];
-                    setFilter({ ...filter, statuses });
-                    onChange(statuses);
-                  }}
-                  checked={_.includes(type)(value)}
-                />
-              ))}
-            </Form.Field>
-          )}
-        />
-        <Controller
-          control={control}
-          name="domain_ids"
-          render={({ field: { onChange, value } }) => (
-            <DomainSelector
-              label={formatMessage({ id: "domain.selector.label" })}
-              labels
-              action="publishStructureNote"
-              value={value}
-              onChange={(_e, { value }) => {
-                const domain_ids = _.isEmpty(value) ? [] : [value];
-                setFilter({ ...filter, domain_ids });
-                onChange(value);
-              }}
-              onLoad={() => setDomainsLoading(false)}
-            />
-          )}
-        />
-        <Controller
-          control={control}
-          name="system_ids"
-          render={({ field: { onBlur, onChange, value } }) => (
-            <Form.Dropdown
-              label={formatMessage({
-                id: "pendingStructureNotes.props.system",
-              })}
-              onBlur={onBlur}
-              onChange={(e, { value }) => {
-                setFilter({ ...filter, system_ids: value });
-                onChange(value);
-              }}
-              options={systems.map(({ name, id }) => ({
-                text: name,
-                key: id,
-                value: id,
-              }))}
-              selection
-              clearable
-              multiple
-              value={value || []}
-            />
-          )}
-        />
-      </Form>
-      <PendingStructureNotesTable structureNotes={items} loading={loading} />
+
+      <SearchWidget />
+      <Dimmer.Dimmable dimmed={loading}>
+        <Dimmer active={loading} inverted>
+          <Loader />
+        </Dimmer>
+        <PendingStructureNotesLabelResults />
+        <PendingStructureNotesTable />
+        <PendingStructureNotesPagination />
+      </Dimmer.Dimmable>
     </Segment>
   );
 };
 
+export const PendingStructureNotes = (props) => {
+  const defaultFilters = _.propOr({}, "defaultFilters")(props);
+  const filtersGroup = _.propOr([], "filtersGroup")(props);
+  const enrichSearchPayload = {
+    my_grant_requests: false,
+    with_data_fields: false,
+  };
+  const searchProps = {
+    initialSortColumn: "name.raw",
+    initialSortDirection: "ascending",
+    useSearch: useDataStructureSearch,
+    useFilters: useDataStructureFilters,
+    pageSize: 20,
+    userFiltersType: "user_search_filters",
+    userFilterScope: "data_structure",
+    translations,
+    filtersGroup,
+    defaultFilters,
+    enrichSearchPayload,
+  };
+  return (
+    <SearchContextProvider {...searchProps} defaultFilters={defaultFilters}>
+      <PendingStructureNotesContent />
+    </SearchContextProvider>
+  );
+};
+
 PendingStructureNotes.propTypes = {
-  systems: PropTypes.array,
+  defaultFilters: PropTypes.object,
 };
 
-export const mapStateToProps = ({ systems }) => ({ systems });
+const mapStateToProps = (state) => ({
+  filtersGroup: state?.pendingStructureNotesFiltersGroup,
+});
 
 export default connect(mapStateToProps)(PendingStructureNotes);

package/src/components/PendingStructureNotesLabelResults.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Label } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export const PendingStructureNotesLabelResults = () => {
+  const { formatNumber } = useIntl();
+  const { count: originalCount } = useSearchContext();
+  const count = formatNumber(originalCount);
+  return (
+    <Label className="structures-notes-label-results">
+      <FormattedMessage id="structures.retrieved.results" values={{ count }} />
+    </Label>
+  );
+};
+
+export default PendingStructureNotesLabelResults;

package/src/components/PendingStructureNotesPagination.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Pagination } from "@truedat/core/components";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+
+export default function PendingStructureNotesPagination() {
+  const { count, size, page, selectPage } = useSearchContext();
+  const totalPages = Math.ceil(count / size);
+
+  return (
+    <Pagination
+      totalPages={totalPages}
+      activePage={page}
+      selectPage={selectPage}
+    />
+  );
+}

package/src/components/PendingStructureNotesTable.js

@@ -1,13 +1,19 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { FormattedMessage, useIntl } from "react-intl";
+import { connect } from "react-redux";
+import { FormattedMessage } from "react-intl";
 import { Table, Header, Icon } from "semantic-ui-react";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { getStructureNotesColumnsSelector } from "../selectors/";
 import PendingStructureNoteRow from "./PendingStructureNoteRow";
 
-const PendingStructureNotesTable = ({ structureNotes, loading }) => {
-  const { formatMessage } = useIntl();
-  return loading ? null : _.isEmpty(structureNotes) ? (
+const PendingStructureNotesTable = ({ columns }) => {
+  const { searchData, sortColumn, sortDirection, handleSortSelection } =
+    useSearchContext();
+  const structures = searchData?.data;
+
+  return _.isEmpty(structures) ? (
     <Header as="h4">
       <Icon name="search" />
       <Header.Content>
@@ -15,48 +21,51 @@ const PendingStructureNotesTable = ({ structureNotes, loading }) => {
       </Header.Content>
     </Header>
   ) : (
-    <Table selectable>
+    <Table selectable sortable>
       <Table.Header>
         <Table.Row>
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.structure",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.status",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.system",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.domains",
-            })}
-          />
-          <Table.HeaderCell
-            content={formatMessage({
-              id: "pendingStructureNotes.props.path",
-            })}
-          />
+          {columns &&
+            columns.map((column, key) => (
+              <Table.HeaderCell
+                key={key}
+                width={column.width}
+                content={
+                  <FormattedMessage
+                    id={`pendingStructureNotes.props.${
+                      column.header || column.name
+                    }`}
+                  />
+                }
+                sorted={
+                  _.path("sort.name")(column) === sortColumn
+                    ? sortDirection
+                    : null
+                }
+                className={_.path("sort.name")(column) ? "" : "disabled"}
+                onClick={() => handleSortSelection(_.path("sort.name")(column))}
+              />
+            ))}
         </Table.Row>
       </Table.Header>
       <Table.Body>
-        {structureNotes.map((structureNote, key) => (
-          <PendingStructureNoteRow key={key} structureNote={structureNote} />
+        {structures.map((structure, key) => (
+          <PendingStructureNoteRow
+            key={key}
+            structure={structure}
+            columns={columns}
+          />
         ))}
       </Table.Body>
     </Table>
   );
 };
 
+const mapStateToProps = (state) => ({
+  columns: getStructureNotesColumnsSelector(state),
+});
+
 PendingStructureNotesTable.propTypes = {
-  structureNotes: PropTypes.array,
-  loading: PropTypes.bool,
+  columns: PropTypes.array,
 };
 
-export default PendingStructureNotesTable;
+export default connect(mapStateToProps)(PendingStructureNotesTable);

package/src/components/StructureNotes.js

@@ -76,7 +76,7 @@ const StructureNote = ({ structureNote, template, structure, notesSize }) => {
       {!collapsed && (
         <DynamicFormViewer
           template={template}
-          content={structureNote.df_content}
+          content={structureNote.dynamic_content}
           diff={structureNote._diff}
         />
       )}

package/src/components/SystemCards.js

@@ -13,31 +13,33 @@ import { linkTo } from "@truedat/core/routes";
 export const SystemCards = ({ systems, structureTypes }) => {
   const groups = _.flow(
     _.map((system) =>
-      !system.df_content?.system_group?.value
+      !system.dynamic_content?.system_group?.value
         ? _.set(
-            "df_content.system_group",
+            "dynamic_content.system_group",
             { value: "default", origin: "default" },
             system
           )
         : system
     ),
-    _.groupBy("df_content.system_group.value")
+    _.groupBy("dynamic_content.system_group.value")
   )(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)}
+      {_.map(
+        ({ id, name, structures_count: structures_count, dynamic_content }) => (
+          <SystemCard
+            key={id}
+            id={id}
+            name={name}
+            structures_count={structures_count}
+            dynamic_content={dynamic_content}
+            structureTypes={structureTypes}
+          />
+        )
+      )(systems)}
     </Card.Group>
   );
 };
@@ -51,7 +53,7 @@ export const SystemCard = ({
   id,
   name,
   structures_count,
-  df_content,
+  dynamic_content,
   structureTypes,
 }) => {
   return (
@@ -64,10 +66,10 @@ export const SystemCard = ({
             structureTypes={structureTypes}
           />
         )}
-        {!_.isEmpty(_.get("logo.value")(df_content)) &&
-          _.startsWith("data:image")(_.get("logo.value")(df_content)) && (
+        {!_.isEmpty(_.get("logo.value")(dynamic_content)) &&
+          _.startsWith("data:image")(_.get("logo.value")(dynamic_content)) && (
             <Image
-              src={_.get("logo.value")(df_content)}
+              src={_.get("logo.value")(dynamic_content)}
               className="system-image"
             />
           )}
@@ -80,7 +82,7 @@ SystemCard.propTypes = {
   id: PropTypes.number,
   name: PropTypes.string,
   structures_count: PropTypes.object,
-  df_content: PropTypes.object,
+  dynamic_content: PropTypes.object,
   structureTypes: PropTypes.array,
 };
 

package/src/components/SystemView.js

@@ -11,7 +11,7 @@ const DynamicFormViewer = React.lazy(() =>
 );
 
 export const SystemView = ({ system, systemTemplate }) => {
-  const { name, external_id, df_content } = system || {};
+  const { name, external_id, dynamic_content } = system || {};
   const SystemHeader = () => (
     <Header as="h2">
       <Header.Content>
@@ -24,7 +24,7 @@ export const SystemView = ({ system, systemTemplate }) => {
     <div
       style={{
         textAlign: "center",
-        paddingBottom: "100px"
+        paddingBottom: "100px",
       }}
     >
       <Image className="search" src={searchImage} />
@@ -38,11 +38,14 @@ export const SystemView = ({ system, systemTemplate }) => {
     <Segment>
       <SystemEditButton system={system} />
       <SystemHeader />
-      {_.isEmpty(df_content || {}) ? (
+      {_.isEmpty(dynamic_content || {}) ? (
         <EmptyImage />
       ) : (
         systemTemplate && (
-          <DynamicFormViewer template={systemTemplate} content={df_content} />
+          <DynamicFormViewer
+            template={systemTemplate}
+            content={dynamic_content}
+          />
         )
       )}
     </Segment>

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

@@ -22,7 +22,7 @@ describe("<GrantRequest />", () => {
     },
     inserted_at: "2021-10-04T07:25:01.041463Z",
     updated_at: "2021-10-04T07:25:01.044005Z",
-    metadata: { bar: { value: "baz", origin: "user" } },
+    dynamic_content: { bar: { value: "baz", origin: "user" } },
     status: "pending",
     _embedded: {
       data_structure: { id: 1, name: "baz", path: [{ name: "foo" }] },
@@ -109,7 +109,7 @@ describe("<GrantRequest />", () => {
       filters: {},
       inserted_at: "2021-10-04T07:25:01.041463Z",
       updated_at: "2021-10-04T07:25:01.044005Z",
-      metadata: { bar: { value: "baz", origin: "user" } },
+      dynamic_content: { bar: { value: "baz", origin: "user" } },
       status: "failed",
       status_reason: "there is always a reason",
       _embedded: {