@truedat/qx 5.14.1 → 5.15.0

package/src/components/dataViews/DataViewEditor.js

@@ -0,0 +1,170 @@
+import React, { Fragment, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Divider,
+  Grid,
+  GridColumn,
+  Header,
+  Form,
+} from "semantic-ui-react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import { ConfirmModal } from "@truedat/core/components";
+import { DescriptionInput } from "@truedat/qx/components/common";
+import QxContext from "@truedat/qx/components/QxContext";
+import DataViewSelect from "./DataViewSelect";
+import Queryables from "./Queryables";
+
+export default function DataViewEditor({
+  selectedDataView,
+  context,
+  onSubmit,
+  onCancel,
+  onDelete,
+  isSubmitting,
+  setDirty,
+}) {
+  const { formatMessage } = useIntl();
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: selectedDataView,
+  });
+  const { control, handleSubmit, watch, formState } = form;
+  const { isDirty, isValid } = formState;
+
+  useEffect(() => {
+    setDirty(isDirty);
+  }, [setDirty, isDirty]);
+
+  if (!selectedDataView) return null;
+
+  return (
+    <Fragment>
+      <FormProvider {...form}>
+        <Form>
+          <Header as="h3" dividing>
+            {watch("name") || formatMessage({ id: "dataViews.action.new" })}
+          </Header>
+          <Grid>
+            <GridColumn>
+              <Grid.Row>
+                <Controller
+                  control={control}
+                  name="name"
+                  rules={{
+                    required: formatMessage(
+                      { id: "form.validation.required" },
+                      { prop: formatMessage({ id: "dataViews.form.name" }) }
+                    ),
+                  }}
+                  render={({
+                    field: { onBlur, onChange, value },
+                    fieldState: { error },
+                  }) => (
+                    <Form.Field required>
+                      <label>{formatMessage({ id: "group.props.name" })}</label>
+                      <Form.Input
+                        autoComplete="off"
+                        placeholder={formatMessage({
+                          id: "dataViews.form.name",
+                        })}
+                        error={error?.message}
+                        onBlur={onBlur}
+                        onChange={(_e, { value }) => onChange(value)}
+                        value={value}
+                      />
+                    </Form.Field>
+                  )}
+                />
+              </Grid.Row>
+              <Grid.Row>
+                <Controller
+                  name="description"
+                  control={control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <DescriptionInput
+                      onBlur={onBlur}
+                      value={value}
+                      onChange={(_e, { value }) => onChange(value)}
+                    />
+                  )}
+                />
+              </Grid.Row>
+            </GridColumn>
+          </Grid>
+          <QxContext.Provider value={context}>
+            <Queryables />
+            <DataViewSelect />
+          </QxContext.Provider>
+
+          <Divider hidden />
+          <div className="actions">
+            <Button
+              onClick={handleSubmit((data) => onSubmit(data))}
+              primary
+              loading={isSubmitting}
+              disabled={!isValid || !isDirty}
+              content={formatMessage({ id: "actions.save" })}
+            />
+            {isDirty ? (
+              <ConfirmModal
+                trigger={
+                  <Button
+                    content={formatMessage({ id: "actions.cancel" })}
+                    disabled={isSubmitting}
+                  />
+                }
+                header={formatMessage({
+                  id: "actions.discard.confirmation.header",
+                })}
+                content={formatMessage({
+                  id: "actions.discard.confirmation.content",
+                })}
+                onConfirm={onCancel}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : (
+              <Button
+                content={formatMessage({ id: "actions.cancel" })}
+                disabled={isSubmitting}
+                onClick={onCancel}
+              />
+            )}
+            {onDelete ? (
+              <ConfirmModal
+                trigger={
+                  <Button
+                    color="red"
+                    content={formatMessage({ id: "actions.delete" })}
+                    disabled={isSubmitting}
+                  />
+                }
+                header={formatMessage({
+                  id: "dataViews.action.delete.header",
+                })}
+                content={formatMessage({
+                  id: "dataViews.action.delete.content",
+                })}
+                onConfirm={onDelete}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : null}
+          </div>
+        </Form>
+      </FormProvider>
+    </Fragment>
+  );
+}
+
+DataViewEditor.propTypes = {
+  selectedDataView: PropTypes.object,
+  dataViews: PropTypes.array,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  onDelete: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  setDirty: PropTypes.func,
+};

package/src/components/dataViews/DataViewSelect.js

@@ -0,0 +1,47 @@
+import _ from "lodash/fp";
+import React, { useContext } from "react";
+import { useIntl } from "react-intl";
+import { useFormContext } from "react-hook-form";
+import { Grid, Label, Segment } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { Select } from "./queryableProperties";
+import { reduceQueryableFields } from "./queryableFunctions";
+
+export default function DataViewSelect() {
+  const { formatMessage } = useIntl();
+  const { watch } = useFormContext();
+  const context = useContext(QxContext);
+
+  const fields = _.flow(
+    watch,
+    reduceQueryableFields(formatMessage)
+  )("queryables");
+
+  return (
+    <div>
+      <Grid>
+        <Grid.Column>
+          <Segment>
+            <div className="queryable-label">
+              <Label ribbon>
+                {formatMessage({ id: `dataViews.form.select` })}
+              </Label>
+            </div>
+
+            <Grid.Row className="vertical-space">
+              <QxContext.Provider
+                value={{
+                  ...context,
+                  field: `select.properties`,
+                  fields,
+                }}
+              >
+                <Select />
+              </QxContext.Provider>
+            </Grid.Row>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+}

package/src/components/dataViews/DataViews.js

@@ -0,0 +1,169 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useQuery } from "@apollo/client";
+import {
+  Button,
+  Grid,
+  GridColumn,
+  Header,
+  Icon,
+  List,
+  Segment,
+} from "semantic-ui-react";
+import { REFERENCE_DATASETS_HEADERS_QUERY } from "@truedat/dd/api/queries";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import {
+  useDataViews,
+  useDataViewCreate,
+  useDataViewDelete,
+  useDataViewUpdate,
+} from "@truedat/qx/hooks/useDataViews";
+import { useFunctions } from "@truedat/qx/hooks/useFunctions";
+import DataViewEditor from "./DataViewEditor";
+
+const NEW_DATA_VIEW = {
+  name: "",
+  description: "",
+  queryables: [
+    {
+      id: 0,
+      alias: "",
+      type: "from",
+      properties: {
+        resource: null,
+      },
+    },
+  ],
+  select: {
+    type: "select",
+  },
+};
+
+export default function DataViews() {
+  const { formatMessage } = useIntl();
+  const { data, loading: dataViewsLoading, mutate } = useDataViews();
+  const { data: functionsData, loading: functionsLoading } = useFunctions();
+  const { data: referenceDatasetsData, loading: referenceDatasetsLoading } =
+    useQuery(REFERENCE_DATASETS_HEADERS_QUERY);
+
+  const loading =
+    dataViewsLoading || functionsLoading || referenceDatasetsLoading;
+  const [selectedDataView, setSelectedDataView] = useState();
+  const [isDirty, setDirty] = useState(false);
+
+  const dataViews = _.orderBy(["id"], ["asc"])(data?.data);
+  const functions = functionsData?.data;
+  const referenceDatasets = _.flow(
+    _.getOr([], "referenceDatasets"),
+    _.sortBy([({ name }) => lowerDeburrTrim(name), "name"]),
+    _.map((row) => ({ ...row, id: Number(row?.id) }))
+  )(referenceDatasetsData);
+
+  const context = {
+    dataViews,
+    referenceDatasets,
+    functions,
+    currentDataViewId: selectedDataView?.id,
+  };
+
+  const changeSelectedDataView = (selection) => {
+    setSelectedDataView(null);
+    setSelectedDataView(selection);
+  };
+  const setStateNewDataView = () => changeSelectedDataView(NEW_DATA_VIEW);
+  const clearForm = () => {
+    setSelectedDataView(null);
+    setDirty(false);
+  };
+
+  const { trigger: createDataView, isMutating: isCreating } =
+    useDataViewCreate();
+
+  const { trigger: updateDataView, isMutating: isUpdating } =
+    useDataViewUpdate(selectedDataView);
+
+  const { trigger: deleteDataView, isMutating: isDeleting } =
+    useDataViewDelete(selectedDataView);
+
+  const isSubmitting = isCreating || isUpdating || isDeleting;
+  const onDataViewCreate = (data_view) => {
+    const mutateDataView = selectedDataView?.id
+      ? updateDataView
+      : createDataView;
+    mutateDataView({ data_view }).then(() => {
+      clearForm();
+      mutate();
+    });
+  };
+  const onDataViewDelete = (data_view) => {
+    deleteDataView({ data_view }).then(() => {
+      clearForm();
+      mutate();
+    });
+  };
+  return (
+    <Segment loading={loading}>
+      <Header as="h2">
+        <Icon circular name="archive" />
+        <Header.Content>
+          <FormattedMessage id="dataViews.header" />
+          <Header.Subheader>
+            <FormattedMessage id="dataViews.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+
+      <Grid>
+        <GridColumn width={4}>
+          <Button fluid onClick={setStateNewDataView} disabled={isDirty}>
+            {formatMessage({ id: "dataViews.action.new" })}
+          </Button>
+          <List divided selection={!isDirty}>
+            {!_.isEmpty(dataViews) ? (
+              dataViews.map((dataView, key) => (
+                <List.Item
+                  key={key}
+                  onClick={() => !isDirty && changeSelectedDataView(dataView)}
+                >
+                  <List.Content>
+                    <List.Header>{dataView.name || "DataView"}</List.Header>
+                  </List.Content>
+                </List.Item>
+              ))
+            ) : (
+              <List.Item>
+                <List.Content>
+                  <List.Header>
+                    {formatMessage({ id: "dataViews.empty_list" })}
+                  </List.Header>
+                </List.Content>
+              </List.Item>
+            )}
+          </List>
+        </GridColumn>
+        <GridColumn width={11}>
+          {selectedDataView ? (
+            <DataViewEditor
+              key={selectedDataView?.id || "new"}
+              selectedDataView={selectedDataView}
+              context={context}
+              onCancel={clearForm}
+              onSubmit={onDataViewCreate}
+              onDelete={selectedDataView?.id ? onDataViewDelete : null}
+              isSubmitting={isSubmitting}
+              setDirty={setDirty}
+            />
+          ) : (
+            <Header as="h2" icon textAlign="center">
+              <Icon name="hand pointer outline" />
+              <Header.Subheader>
+                {formatMessage({ id: "dataViews.no_selection" })}
+              </Header.Subheader>
+            </Header>
+          )}
+        </GridColumn>
+      </Grid>
+    </Segment>
+  );
+}

package/src/components/dataViews/Queryable.js

@@ -0,0 +1,138 @@
+import _ from "lodash/fp";
+import React, { useState, useContext } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext } from "react-hook-form";
+import { Button, Grid, Form, Label, Segment } from "semantic-ui-react";
+import QxContext from "@truedat/qx/components/QxContext";
+import { From, GroupBy, Join, Select, Where } from "./queryableProperties";
+import { getColorById, reduceQueryableFields } from "./queryableFunctions";
+
+const queryableComponents = {
+  from: <From />,
+  group_by: <GroupBy />,
+  join: <Join />,
+  select: <Select />,
+  where: <Where />,
+};
+
+export default function Queryable({ index, onDelete }) {
+  const { formatMessage } = useIntl();
+  const { control, watch } = useFormContext();
+  const context = useContext(QxContext);
+  const [isShownDelete, setIsShownDelete] = useState();
+  const { type } = watch(`queryables[${index}]`);
+
+  const queryables = watch("queryables");
+  const fieldsOffset = _.prop(`[${index}].type`)(queryables) === "join" ? 1 : 0;
+  const fields = _.flow(
+    _.slice(0, index + fieldsOffset),
+    reduceQueryableFields(formatMessage)
+  )(queryables);
+
+  const queryable = watch(`queryables[${index}]`);
+  const queryableResourceKey = (queryable) => {
+    switch (queryable.type) {
+      case "join":
+      case "from":
+        const { alias, properties } = queryable;
+        const { id, type } = properties.resource || {};
+        return [id, type, alias].join(":");
+      default:
+        return null;
+    }
+  };
+
+  const validateAlias = _.flow(
+    _.remove((qry) => qry.id == queryable.id),
+    _.map("alias"),
+    _.reject((alias) => _.isNil(alias) || _.isEmpty(alias)),
+    _.includes(queryable.alias)
+  )(queryables)
+    ? formatMessage({
+        id: "dataViews.form.queryable.alias.duplicated",
+      })
+    : null;
+
+  const validateResource = _.flow(
+    _.remove((qry) => qry.id == queryable.id),
+    _.map(queryableResourceKey),
+    _.reject(_.isNil),
+    _.includes(queryableResourceKey(queryable))
+  )(queryables)
+    ? formatMessage({
+        id: "dataViews.form.queryable.resource.duplicated",
+      })
+    : null;
+
+  return (
+    <div
+      onMouseEnter={() => setIsShownDelete(true)}
+      onMouseLeave={() => setIsShownDelete(false)}
+    >
+      <Grid>
+        <Grid.Column>
+          <Segment>
+            <div className="queryable-label">
+              <Label ribbon color={getColorById(queryable.id)}>
+                {formatMessage({ id: `dataViews.form.queryable.${type}` })}
+              </Label>
+              {isShownDelete && index != 0 ? (
+                <Button
+                  onClick={onDelete}
+                  icon="trash alternate outline"
+                  basic
+                  color="red"
+                  aria-label="delete"
+                />
+              ) : null}
+            </div>
+            <Grid.Row className="vertical-space">
+              <Controller
+                control={control}
+                name={`queryables[${index}].alias`}
+                rules={{
+                  validate: () => validateAlias || validateResource,
+                }}
+                render={({
+                  field: { onBlur, onChange, value },
+                  fieldState: { error },
+                }) => (
+                  <Form.Input
+                    label={formatMessage({
+                      id: "dataViews.form.queryable.alias",
+                    })}
+                    autoComplete="off"
+                    placeholder={formatMessage({
+                      id: "dataViews.form.queryable.alias",
+                    })}
+                    error={error?.message}
+                    onBlur={onBlur}
+                    onChange={(_e, { value }) => onChange(value)}
+                    value={value}
+                  />
+                )}
+              />
+            </Grid.Row>
+            <Grid.Row className="vertical-space">
+              <QxContext.Provider
+                value={{
+                  ...context,
+                  field: `queryables[${index}].properties`,
+                  fields,
+                }}
+              >
+                {queryableComponents[type]}
+              </QxContext.Provider>
+            </Grid.Row>
+          </Segment>
+        </Grid.Column>
+      </Grid>
+    </div>
+  );
+}
+
+Queryable.propTypes = {
+  index: PropTypes.number,
+  onDelete: PropTypes.func,
+};

package/src/components/dataViews/Queryables.js

@@ -0,0 +1,53 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useIntl } from "react-intl";
+import { useFieldArray } from "react-hook-form";
+import { Button, Divider, List } from "semantic-ui-react";
+import Queryable from "./Queryable";
+
+export default function Queryables() {
+  const { formatMessage } = useIntl();
+  const { fields, append, remove } = useFieldArray({
+    name: "queryables",
+    keyName: "key",
+  });
+
+  const newClause = () => [
+    { expressions: [{ shape: "function", value: { isCondition: true } }] },
+  ];
+  const maxParamId = _.flow(_.map("id"), _.max)(fields) || 0;
+  const defaultPropertiesForType = {
+    where: {
+      clauses: newClause(),
+    },
+    join: {
+      clauses: newClause(),
+    },
+  };
+  const newQueryable = (type) => ({
+    type,
+    id: maxParamId + 1,
+    properties: _.propOr({}, type)(defaultPropertiesForType),
+  });
+
+  const queryableTypes = ["join", "where", "select", "group_by"];
+
+  return (
+    <List>
+      {fields.map((param, index) => (
+        <List.Item key={param.key}>
+          <Queryable index={index} onDelete={() => remove(index)} />
+        </List.Item>
+      ))}
+      <List.Item>
+        <Divider horizontal>
+          {queryableTypes.map((type, idx) => (
+            <Button key={idx} onClick={() => append(newQueryable(type))}>
+              {formatMessage({ id: `dataViews.form.queryable.${type}` })}
+            </Button>
+          ))}
+        </Divider>
+      </List.Item>
+    </List>
+  );
+}