@truedat/dd 5.9.1 → 5.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "5.9.1",
+  "version": "5.9.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": "5.8.5",
+    "@truedat/test": "5.9.3",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -87,9 +87,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "5.9.1",
-    "@truedat/core": "5.9.1",
-    "@truedat/df": "5.9.1",
+    "@truedat/auth": "5.9.3",
+    "@truedat/core": "5.9.3",
+    "@truedat/df": "5.9.3",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -114,5 +114,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "aaeee38d6569e8c4c6bb605b0cc9b888bd4723a3"
+  "gitHead": "703abeeedf1ca0f6ecbc09c9633178e9dcd83e20"
 }

package/src/api/mutations.js

@@ -103,3 +103,31 @@ export const DELETE_GRANT_APPROVAL_RULE = gql`
     }
   }
 `;
+
+export const UPDATE_CATALOG_VIEW_CONFIG = gql`
+  mutation UpdateCatalogViewConfig(
+    $catalogViewConfig: UpdateCatalogViewConfigInput!
+  ) {
+    updateCatalogViewConfig(catalogViewConfig: $catalogViewConfig) {
+      id
+    }
+  }
+`;
+
+export const CREATE_CATALOG_VIEW_CONFIG = gql`
+  mutation CreateCatalogViewConfig(
+    $catalogViewConfig: CreateCatalogViewConfigInput!
+  ) {
+    createCatalogViewConfig(catalogViewConfig: $catalogViewConfig) {
+      id
+    }
+  }
+`;
+
+export const DELETE_CATALOG_VIEW_CONFIG = gql`
+  mutation DeleteCatalogViewConfig($id: ID!) {
+    deleteCatalogViewConfig(id: $id) {
+      id
+    }
+  }
+`;

package/src/api/queries.js

@@ -499,3 +499,23 @@ export const TASK_QUERY = gql`
     }
   }
 `;
+
+export const CATALOG_VIEW_CONFIGS_QUERY = gql`
+  query CatalogViewConfigs {
+    catalogViewConfigs {
+      id
+      fieldType
+      fieldName
+    }
+  }
+`;
+
+export const CATALOG_VIEW_CONFIG_QUERY = gql`
+  query CatalogViewConfig($id: ID!) {
+    catalogViewConfig(id: $id) {
+      id
+      fieldType
+      fieldName
+    }
+  }
+`;

package/src/api.js

@@ -1,3 +1,5 @@
+const API_BUCKET_STRUCTURES = "/api/buckets/structures";
+const API_BUCKET_STRUCTURE = "/api/buckets/structures/:id";
 const API_DATA_STRUCTURE = "/api/data_structures/:id";
 const API_DATA_STRUCTURES_BULK_UPDATE = "/api/data_structures/bulk_update";
 const API_DATA_STRUCTURES_EDITABLE_CSV = "/api/data_structures/editable_csv";
@@ -48,6 +50,8 @@ const API_STRUCTURE_NOTE = "/api/data_structures/:data_structure_id/notes/:id";
 const API_STRUCTURE_NOTES = "/api/data_structures/:data_structure_id/notes";
 
 export {
+  API_BUCKET_STRUCTURES,
+  API_BUCKET_STRUCTURE,
   API_DATA_STRUCTURE,
   API_DATA_STRUCTURES_BULK_UPDATE,
   API_DATA_STRUCTURES_EDITABLE_CSV,

package/src/components/BucketView.js

@@ -0,0 +1,92 @@
+import _ from "lodash/fp";
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Grid, Segment } from "semantic-ui-react";
+import { useParams, useLocation } from "react-router-dom";
+import { saveNavFilter as saveNavFilterRoutine } from "../routines";
+import FilteredNav from "./FilteredNav";
+import StructureCrumbs from "./StructureCrumbs";
+import StructureGrantCart from "./StructureGrantCart";
+import StructureSummary from "./StructureSummary";
+import StructureTabPaneRoutes from "./StructureTabPaneRoutes";
+import StructureTabRoutes from "./StructureTabRoutes";
+
+const isBucketFilter = _.flow(
+  Object.keys,
+  // Both metadata and mutable_metadata are "metadata"
+  _.any((entry) => entry.startsWith("metadata", "note"))
+);
+
+export const BucketView = ({
+  showGrantRequestCart,
+  saveNavFilter,
+  navFilter,
+}) => {
+  const params = useParams();
+  const { id: structureId } = params;
+  const location = useLocation();
+
+  useEffect(() => {
+    _.flow(
+      _.path("search"),
+      (search) => new URLSearchParams(search).entries(),
+      (entries) => Object.fromEntries(entries),
+      _.pick(["propertyPath", "propertyValue"]),
+      _.values,
+      (keyValue) => Object.fromEntries(new Map([keyValue]).entries()),
+      saveNavFilter
+    )(location);
+  }, [location, saveNavFilter]);
+
+  return (
+    <Segment className="structures">
+      <Grid>
+        <Grid.Row stretched>
+          <Grid.Row>
+            <Grid.Column width={16}>
+              <StructureCrumbs />
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Column width={4}>
+            <Segment>
+              {isBucketFilter(navFilter) ? (
+                <FilteredNav filter={navFilter} />
+              ) : null}
+            </Segment>
+          </Grid.Column>
+          <Grid.Column width={showGrantRequestCart ? 8 : 12}>
+            <Segment>
+              {structureId ? (
+                <>
+                  <StructureSummary />
+                  <StructureTabRoutes />
+                  <StructureTabPaneRoutes />
+                </>
+              ) : (
+                <p> {JSON.stringify(navFilter)} </p>
+              )}
+            </Segment>
+          </Grid.Column>
+          {showGrantRequestCart && (
+            <Grid.Column width={4}>
+              <StructureGrantCart />
+            </Grid.Column>
+          )}
+        </Grid.Row>
+      </Grid>
+    </Segment>
+  );
+};
+
+BucketView.propTypes = {
+  navFilter: PropTypes.object,
+  saveNavFilter: PropTypes.func,
+  showGrantRequestCart: PropTypes.bool,
+};
+
+const mapStateToProps = ({ navFilter }) => ({ navFilter });
+
+export default connect(mapStateToProps, {
+  saveNavFilter: saveNavFilterRoutine,
+})(BucketView);

package/src/components/CatalogCustomViewCards.js

@@ -0,0 +1,89 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Link, useParams } from "react-router-dom";
+import { Card, Label } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { FormattedNumber } from "react-intl";
+import { CardGroupsAccordion } from "@truedat/core/components";
+import { linkTo } from "@truedat/core/routes";
+
+export const CatalogCustomViewCards = ({ structureFilters }) => {
+  const { propertyPath } = useParams();
+  const groups = [];
+
+  return Object.keys(groups).length > 1 ? (
+    <CardGroupsAccordion
+      groups={groups}
+      cardComponent={CatalogCustomViewCard}
+    />
+  ) : (
+    <Card.Group className="structures">
+      {_.map(({ doc_count: structures_count, key: name }) => (
+        <CatalogCustomViewCard
+          key={name}
+          id={name}
+          name={name}
+          structures_count={structures_count}
+        />
+      ))(structureFilters[propertyPath]?.buckets)}
+    </Card.Group>
+  );
+};
+
+CatalogCustomViewCards.propTypes = {
+  structureFilters: PropTypes.object,
+};
+
+export const CatalogCustomViewCard = ({
+  name,
+  structures_count,
+  structureTypes,
+}) => {
+  const { formatMessage } = useIntl();
+  const { propertyPath } = useParams();
+  const queryParams = new URLSearchParams({
+    propertyPath,
+    propertyValue: name,
+  });
+  return (
+    <Card link as={Link} to={`${linkTo.BUCKET_VIEW()}?${queryParams}`}>
+      <Card.Content className="extra-bottom-padding">
+        <Card.Header style={name === "_missing" ? { color: "grey" } : null}>
+          {name === "_missing" ? formatMessage({ id: "missingBucket" }) : name}
+        </Card.Header>
+        {structures_count && (
+          <CatalogCustomViewCardPopup
+            structures_count={structures_count}
+            structureTypes={structureTypes}
+          />
+        )}
+      </Card.Content>
+    </Card>
+  );
+};
+
+CatalogCustomViewCard.propTypes = {
+  name: PropTypes.string,
+  structures_count: PropTypes.number,
+  structureTypes: PropTypes.object,
+};
+
+export const CatalogCustomViewCardPopup = ({ structures_count }) => {
+  return (
+    <Label aria-label="count" attached="bottom right" className="overlapping">
+      <FormattedNumber value={structures_count} />
+    </Label>
+  );
+};
+CatalogCustomViewCardPopup.propTypes = {
+  structures_count: PropTypes.number,
+};
+
+const mapStateToProps = ({ structures, structureFilters }) => ({
+  structures,
+  structureFilters,
+});
+
+export default connect(mapStateToProps)(CatalogCustomViewCards);

package/src/components/CatalogViewConfigForm.js

@@ -0,0 +1,130 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import React, { useEffect } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useParams } from "react-router-dom";
+import { useForm, Controller } from "react-hook-form";
+import { connect } from "react-redux";
+
+import { Button, Header, Form, Icon } from "semantic-ui-react";
+
+import { useQuery } from "@apollo/client";
+import { CATALOG_VIEW_CONFIG_QUERY } from "../api/queries";
+import { upsertCatalogViewConfig as upsertCatalogViewConfigRoutine } from "../routines";
+
+export const CatalogViewConfigForm = ({
+  initialConfig,
+  upsertCatalogViewConfig,
+  loading,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const { handleSubmit, control, formState, reset } = useForm({
+    mode: "onChange",
+  });
+
+  const onSubmit = (config) => upsertCatalogViewConfig(config);
+
+  useEffect(() => {
+    reset(initialConfig);
+  }, [initialConfig, reset]);
+
+  return loading ? null : (
+    <>
+      <Header as="h2">
+        <Icon name="book" />
+        <Header.Content>
+          <FormattedMessage id="bucketViewConfigs.new" />
+        </Header.Content>
+      </Header>
+      <Form onSubmit={handleSubmit(onSubmit)} aria-label="form">
+        <Controller
+          control={control}
+          name="fieldType"
+          rules={{ required: true }}
+          render={({ field: { onBlur, onChange, value: fieldType } }) => (
+            <Form.Field>
+              <Form.Dropdown
+                aria-label="fieldType"
+                width={2}
+                name="fieldType"
+                onBlur={onBlur}
+                label={formatMessage({
+                  id: "bucketViewConfig.fieldType",
+                })}
+                selection
+                options={["metadata", "note"].map((o) => ({
+                  key: o,
+                  value: o,
+                  text: formatMessage({
+                    id: `${o}`,
+                  }),
+                }))}
+                onChange={(_e, { value }) => onChange(value)}
+                placeholder={formatMessage({
+                  id: "grantApprovalRule.conditions.field_prefix.placeholder",
+                })}
+                value={fieldType}
+                required
+              />
+            </Form.Field>
+          )}
+        />
+        <Controller
+          control={control}
+          name="fieldName"
+          rules={{ required: true }}
+          render={({ field: { onBlur, onChange, value: fieldName } }) => (
+            <Form.Field>
+              <Form.Input
+                id={`fieldName-${fieldName}`}
+                width={2}
+                name="fieldName"
+                aria-label="fieldName"
+                label={formatMessage({
+                  id: "bucketViewConfig.fieldName",
+                })}
+                value={fieldName || ""}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                required
+              />
+            </Form.Field>
+          )}
+        />
+        <Button
+          type="submit"
+          disabled={!formState.isValid}
+          aria-label="save"
+          primary
+          content={formatMessage({ id: "actions.save" })}
+        />
+      </Form>
+    </>
+  );
+};
+
+CatalogViewConfigForm.propTypes = {
+  initialConfig: PropTypes.object,
+  upsertCatalogViewConfig: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+export const CatalogViewConfigFormConnected = connect(null, {
+  upsertCatalogViewConfig: upsertCatalogViewConfigRoutine,
+})(CatalogViewConfigForm);
+
+export const CatalogViewConfigFormLoader = () => {
+  const { id } = useParams();
+  const { loading, error, data } = useQuery(CATALOG_VIEW_CONFIG_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id },
+  });
+  if (error) return null;
+  const config = data?.catalogViewConfig;
+  return (
+    <CatalogViewConfigFormConnected loading={loading} initialConfig={config} />
+  );
+};
+
+export default CatalogViewConfigFormLoader;

package/src/components/CatalogViewConfigs.js

@@ -0,0 +1,124 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { columnDecoratorComponent } from "@truedat/core/services";
+import { Link, useHistory } from "react-router-dom";
+import { BUCKET_VIEW_CONFIG_NEW, linkTo } from "@truedat/core/routes";
+import { useQuery } from "@apollo/client";
+import { Button, Segment, Table } from "semantic-ui-react";
+import { ConfirmModal } from "@truedat/core/components";
+import { connect } from "react-redux";
+import { CATALOG_VIEW_CONFIGS_QUERY } from "../api/queries";
+import { deleteCatalogViewConfig as deleteCatalogViewConfigRoutine } from "../routines";
+
+export const CatalogViewConfigs = ({
+  deleteCatalogViewConfig,
+  configs,
+  loading,
+}) => {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+
+  const columns = [
+    { name: "Field type", fieldSelector: "fieldType" },
+    { name: "Field name", fieldSelector: "fieldName" },
+  ];
+
+  return loading ? null : (
+    <Segment textAlign="right">
+      <Button
+        primary
+        as={Link}
+        to={BUCKET_VIEW_CONFIG_NEW}
+        content={formatMessage({
+          id: "bucketViewConfigs.new",
+        })}
+      />
+      <Table>
+        <Table.Header>
+          <Table.Row>
+            {columns.map((column, i) => {
+              return (
+                <Table.HeaderCell
+                  key={i}
+                  width={column.width}
+                  content={formatMessage({
+                    id: `bucketViewConfig.${column.fieldSelector}`,
+                  })}
+                />
+              );
+            })}
+            <Table.HeaderCell textAlign="center">
+              <FormattedMessage id="actions.delete" />
+            </Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {configs.map((config, rowNumber) => {
+            return (
+              <Table.Row style={{ cursor: "pointer" }} key={rowNumber}>
+                {columns.map((column, columnNumber) => (
+                  <Table.Cell
+                    key={`${rowNumber}_${columnNumber}`}
+                    content={columnDecoratorComponent(column)(config)}
+                    onClick={() =>
+                      history.push(
+                        linkTo.BUCKET_VIEW_CONFIG_EDIT({ id: config.id })
+                      )
+                    }
+                  />
+                ))}
+                <Table.Cell
+                  style={{ cursor: "default" }}
+                  collapsing
+                  width="1"
+                  textAlign="center"
+                >
+                  <ConfirmModal
+                    icon="trash"
+                    trigger={
+                      <Button
+                        aria-label="delete"
+                        basic
+                        icon="trash"
+                        color="red"
+                      />
+                    }
+                    header={
+                      <FormattedMessage id="relations.actions.data_field.delete.confirmation.header" />
+                    }
+                    content={
+                      <FormattedMessage id="relations.actions.data_field.delete.confirmation.content" />
+                    }
+                    onConfirm={() => deleteCatalogViewConfig({ id: config.id })}
+                  />
+                </Table.Cell>
+              </Table.Row>
+            );
+          })}
+        </Table.Body>
+      </Table>
+    </Segment>
+  );
+};
+
+CatalogViewConfigs.propTypes = {
+  configs: PropTypes.array,
+  deleteCatalogViewConfig: PropTypes.func,
+  loading: PropTypes.bool,
+};
+
+export const CatalogViewConfigsConnected = connect(null, {
+  deleteCatalogViewConfig: deleteCatalogViewConfigRoutine,
+})(CatalogViewConfigs);
+
+export const CatalogViewConfigsLoader = () => {
+  const { loading, error, data } = useQuery(CATALOG_VIEW_CONFIGS_QUERY, {
+    fetchPolicy: "cache-and-network",
+  });
+  if (error) return null;
+  const configs = data?.catalogViewConfigs || [];
+  return <CatalogViewConfigsConnected loading={loading} configs={configs} />;
+};
+
+export default CatalogViewConfigsLoader;

package/src/components/DictionaryRoutes.js

@@ -2,6 +2,11 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useActiveRoute } from "@truedat/core/hooks";
 import {
+  BUCKET_VIEW,
+  BUCKET_VIEW_CONFIG_EDIT,
+  BUCKET_VIEW_CONFIG_NEW,
+  BUCKET_VIEW_CONFIGS,
+  BUCKETS_VIEW,
   PENDING_STRUCTURE_NOTES,
   PROFILE_EXECUTION,
   PROFILE_GROUP,
@@ -13,6 +18,7 @@ import {
   SYSTEMS,
   TASKS,
 } from "@truedat/core/routes";
+import CatalogViewConfigs from "./CatalogViewConfigs";
 import PendingStructureNotes from "./PendingStructureNotes";
 import ProfileExecution from "./ProfileExecution";
 import ProfileExecutionBreadcrumbs from "./ProfileExecutionBreadcrumbs";
@@ -30,30 +36,55 @@ import SystemsRoutes from "./SystemsRoutes";
 import SystemsLoader from "./SystemsLoader";
 import TagsRoutes from "./TagsRoutes";
 import TasksRoutes from "./TasksRoutes";
+import {
+  CatalogViewConfigFormConnected,
+  CatalogViewConfigFormLoader,
+} from "./CatalogViewConfigForm";
 
 const TemplatesLoader = React.lazy(() =>
   import("@truedat/df/templates/components/TemplatesLoader")
 );
 
-const Loaders = () => (
-  <>
-    <StructuresLoader />
-    <StructureFiltersLoader />
-    <TemplatesLoader scope="dd" />
-  </>
-);
+const Loaders = () => {
+  return (
+    <>
+      <StructuresLoader />
+      <StructureFiltersLoader />
+      <TemplatesLoader scope="dd" />
+    </>
+  );
+};
 
 export const DictionaryRoutes = () => {
   const structuresActive = useActiveRoute(STRUCTURES);
   const systemsActive = useActiveRoute(SYSTEMS);
   const structureTypesActive = useActiveRoute(STRUCTURE_TYPES);
-  const active = structuresActive || systemsActive || structureTypesActive;
+  const customCatalogViewActive = useActiveRoute(BUCKETS_VIEW);
+  const active =
+    structuresActive ||
+    systemsActive ||
+    structureTypesActive ||
+    customCatalogViewActive;
 
   return (
     <>
       <Route render={() => (active ? <Loaders /> : null)} />
+      <Switch>
+        <Route
+          path={BUCKET_VIEW_CONFIG_EDIT}
+          render={() => <CatalogViewConfigFormLoader />}
+        />
+        <Route
+          path={BUCKET_VIEW_CONFIG_NEW}
+          render={() => <CatalogViewConfigFormConnected />}
+        />
+        <Route
+          path={BUCKET_VIEW_CONFIGS}
+          render={() => <CatalogViewConfigs />}
+        />
+      </Switch>
       <Route
-        path={STRUCTURES}
+        path={[STRUCTURES, BUCKETS_VIEW, BUCKET_VIEW]}
         render={() => (
           <>
             <StructureTypesLoader />