@truedat/qx 5.12.2 → 5.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/qx",
-  "version": "5.12.2",
+  "version": "5.12.7",
   "description": "Truedat Web Quality Experience package",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -31,6 +31,10 @@
     "@babel/plugin-transform-modules-commonjs": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.2.1",
     "@truedat/test": "5.12.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -80,8 +84,9 @@
     ]
   },
   "dependencies": {
-    "@truedat/core": "5.12.2",
+    "@truedat/core": "5.12.7",
     "prop-types": "^15.8.1",
+    "react-hook-form": "^7.45.4",
     "react-intl": "^5.20.10",
     "react-router-dom": "^5.2.0",
     "semantic-ui-react": "^2.1.4",
@@ -92,5 +97,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "1121d357f2a54a2ad2e77adbd43096004316453d"
+  "gitHead": "940dfaecf8852eaa4a345b30ba690dc441adaccf"
 }

package/src/api.js

@@ -1,3 +1,5 @@
 const API_DATA_SETS = "/api/data_sets";
+const API_FUNCTIONS = "/api/quality_functions";
+const API_FUNCTION = "/api/quality_functions/:id";
 
-export { API_DATA_SETS };
+export { API_DATA_SETS, API_FUNCTIONS, API_FUNCTION };

package/src/components/QxContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext();

package/src/components/QxRoutes.js

@@ -2,8 +2,9 @@ import React from "react";
 import { Route } from "react-router-dom";
 import { Unauthorized } from "@truedat/core/components";
 import { useAuthorized } from "@truedat/core/hooks";
-import { DATA_SETS } from "@truedat/core/routes";
+import { DATA_SETS, FUNCTIONS } from "@truedat/core/routes";
 import DataSets from "./DataSets";
+import Functions from "./functions/Functions";
 
 export default function QxRoutes() {
   const authorized = useAuthorized();
@@ -14,6 +15,10 @@ export default function QxRoutes() {
         path={DATA_SETS}
         render={() => (authorized ? <DataSets /> : <Unauthorized />)}
       />
+      <Route
+        path={FUNCTIONS}
+        render={() => (authorized ? <Functions /> : <Unauthorized />)}
+      />
     </>
   );
 }

package/src/components/common/DescriptionInput.js

@@ -0,0 +1,47 @@
+import _ from "lodash/fp";
+import React from "react";
+import { useState } from "react";
+import { useIntl } from "react-intl";
+import { Input, List } from "semantic-ui-react";
+
+export default function DescriptionInput({
+  value,
+  onChange,
+  onBlur,
+  name = "description",
+}) {
+  const { formatMessage } = useIntl();
+  const [editionMode, setEditMode] = useState();
+  return (
+    <List link horizontal>
+      {!editionMode ? (
+        <List.Item
+          as="a"
+          tabIndex={0}
+          onClick={() => setEditMode(true)}
+          onFocus={() => setEditMode(true)}
+          style={{ fontStyle: "italic", fontSize: 13, padding: "9.5px 14px" }}
+        >
+          {_.isEmpty(value)
+            ? formatMessage({ id: "functions.form.add_description" })
+            : value}
+        </List.Item>
+      ) : null}
+      {editionMode ? (
+        <List.Item>
+          <Input
+            onBlur={() => {
+              onBlur && onBlur();
+              setEditMode(false);
+            }}
+            placeholder={formatMessage({ id: "functions.form.description" })}
+            name={name}
+            onChange={onChange}
+            value={value}
+            autoFocus
+          />
+        </List.Item>
+      ) : null}
+    </List>
+  );
+}

package/src/components/common/TestFormWrapper.js

@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormProvider, useForm } from "react-hook-form";
+import QxContext from "@truedat/qx/components/QxContext";
+
+export default function TestFormWrapper({
+  type = "string",
+  field = "test",
+  functions = [],
+  children,
+  watcher,
+  defaultValues,
+}) {
+  const form = useForm({ mode: "onChange", defaultValues });
+  watcher && watcher(form.watch());
+
+  return (
+    <FormProvider {...form}>
+      <QxContext.Provider value={{ functions, type, field }}>
+        {children}
+      </QxContext.Provider>
+    </FormProvider>
+  );
+}
+
+TestFormWrapper.propTypes = {
+  type: PropTypes.string,
+  field: PropTypes.string,
+  functions: PropTypes.array,
+  children: PropTypes.node,
+  watcher: PropTypes.func,
+  defaultValues: PropTypes.object,
+};

package/src/components/common/TypeSelector.js

@@ -0,0 +1,33 @@
+import _ from "lodash/fp";
+import React from "react";
+import { Dropdown } from "semantic-ui-react";
+import { typeToIcon, types } from "@truedat/qx/types";
+
+export default function TypeSelector({
+  value,
+  onChange,
+  onBlur,
+  withoutTypeAny,
+  name = "type",
+}) {
+  const options = _.flow(
+    _.reject((value) => withoutTypeAny && value == "any"),
+    _.map((value) => ({
+      key: value,
+      text: value,
+      value,
+      icon: typeToIcon(value),
+    }))
+  )(types);
+  return (
+    <Dropdown
+      button
+      basic
+      onBlur={onBlur}
+      name={name}
+      options={options}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}

package/src/components/common/index.js

@@ -0,0 +1,4 @@
+import DescriptionInput from "./DescriptionInput";
+import TypeSelector from "./TypeSelector";
+
+export { DescriptionInput, TypeSelector };

package/src/components/functions/FunctionEditor.js

@@ -0,0 +1,200 @@
+import React, { Fragment, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Divider,
+  Grid,
+  GridColumn,
+  Header,
+  Form,
+  Label,
+} from "semantic-ui-react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import { ConfirmModal } from "@truedat/core/components";
+import QxContext from "@truedat/qx/components/QxContext";
+import { typeToColor } from "@truedat/qx/types";
+import { DescriptionInput, TypeSelector } from "@truedat/qx/components/common";
+import Expression from "./expressions/Expression";
+
+import FunctionParams from "./FunctionParams";
+
+export default function FunctionEditor({
+  selectedFunction,
+  functions,
+  onSubmit,
+  onCancel,
+  onDelete,
+  isSubmitting,
+  setDirty,
+}) {
+  const { formatMessage } = useIntl();
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: selectedFunction,
+  });
+  const { control, handleSubmit, watch, formState, setValue } = form;
+  const { isDirty, isValid } = formState;
+
+  useEffect(() => {
+    setDirty(isDirty);
+  }, [setDirty, isDirty]);
+
+  if (!selectedFunction) return null;
+
+  const type = watch("type");
+  const params = watch("params");
+
+  return (
+    <Fragment>
+      <FormProvider {...form}>
+        <Form>
+          <Header as="h3" dividing>
+            {watch("name") || "Function"}/{params.length}
+            <Label color={typeToColor(type)}>{type}</Label>
+          </Header>
+          <Grid>
+            <GridColumn>
+              <Grid.Row>
+                <Controller
+                  control={control}
+                  name="name"
+                  rules={{
+                    required: formatMessage(
+                      { id: "form.validation.required" },
+                      { prop: formatMessage({ id: "functions.form.name" }) }
+                    ),
+                  }}
+                  render={({
+                    field: { onBlur, onChange, value },
+                    fieldState: { error },
+                  }) => (
+                    <Form.Input
+                      autoComplete="off"
+                      action={
+                        <Controller
+                          name="type"
+                          control={control}
+                          render={({ field: { onBlur, onChange, value } }) => (
+                            <TypeSelector
+                              onBlur={onBlur}
+                              value={value}
+                              onChange={(_e, { value }) => {
+                                onChange(value);
+                                setValue("expression.value", null, {
+                                  shouldValidate: true,
+                                });
+                              }}
+                            />
+                          )}
+                        />
+                      }
+                      placeholder={formatMessage({ id: "functions.form.name" })}
+                      error={error?.message}
+                      label={formatMessage({ id: "group.props.name" })}
+                      onBlur={onBlur}
+                      onChange={(_e, { value }) => onChange(value)}
+                      value={value}
+                      required
+                    />
+                  )}
+                />
+              </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>
+
+          <Header as="h5" dividing>
+            {formatMessage({ id: "functions.form.params" })}
+          </Header>
+          <FunctionParams />
+
+          <Header as="h5" dividing>
+            {formatMessage({ id: "functions.form.output" })}
+          </Header>
+          <QxContext.Provider value={{ functions, type, field: "expression" }}>
+            <Expression />
+          </QxContext.Provider>
+          <Divider hidden />
+          <div className="actions">
+            {onDelete ? (
+              <ConfirmModal
+                trigger={
+                  <Button
+                    color="red"
+                    content={formatMessage({ id: "actions.delete" })}
+                    disabled={isSubmitting}
+                  />
+                }
+                header={formatMessage({
+                  id: "functions.action.delete.header",
+                })}
+                content={formatMessage({
+                  id: "functions.action.delete.content",
+                })}
+                onConfirm={onDelete}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : null}
+            {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}
+              />
+            )}
+
+            <Button
+              onClick={handleSubmit(onSubmit)}
+              primary
+              loading={isSubmitting}
+              disabled={!isValid || !isDirty}
+              content={formatMessage({ id: "actions.save" })}
+            />
+          </div>
+        </Form>
+      </FormProvider>
+    </Fragment>
+  );
+}
+
+FunctionEditor.propTypes = {
+  selectedFunction: PropTypes.object,
+  functions: PropTypes.array,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  onDelete: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  setDirty: PropTypes.func,
+};

package/src/components/functions/FunctionParams.js

@@ -0,0 +1,122 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Controller, useFormContext, useFieldArray } from "react-hook-form";
+import { Button, Grid, Form, List } from "semantic-ui-react";
+import { DescriptionInput, TypeSelector } from "@truedat/qx/components/common";
+
+export default function FunctionParams() {
+  const { formatMessage } = useIntl();
+  const { fields, append, remove } = useFieldArray({
+    name: "params",
+    keyName: "key",
+  });
+
+  const maxParamId = _.flow(_.map("id"), _.max)(fields) || 0;
+  const newParam = () => ({
+    name: "",
+    type: "boolean",
+    description: "",
+    id: maxParamId + 1,
+  });
+
+  return (
+    <List>
+      {fields.map((param, index) => (
+        <List.Item key={param.key}>
+          <ParamItem index={index} onDelete={() => remove(index)} />
+        </List.Item>
+      ))}
+      <List.Item>
+        <Button onClick={() => append(newParam())}>
+          {formatMessage({ id: "functions.form.add_param" })}
+        </Button>
+      </List.Item>
+    </List>
+  );
+}
+
+const ParamItem = ({ index, onDelete }) => {
+  const { formatMessage } = useIntl();
+  const { control } = useFormContext();
+  const [isShownDelete, setIsShownDelete] = useState();
+  return (
+    <div
+      onMouseEnter={() => setIsShownDelete(true)}
+      onMouseLeave={() => setIsShownDelete(false)}
+    >
+      <Grid>
+        <Grid.Row>
+          <Grid.Column></Grid.Column>
+          <Grid.Column width={15}>
+            <Grid.Row>
+              <Form.Group inline className="no-margin">
+                <Controller
+                  control={control}
+                  name={`params[${index}].name`}
+                  rules={{
+                    required: formatMessage({ id: "functions.form.required" }),
+                  }}
+                  render={({
+                    field: { onBlur, onChange, value },
+                    fieldState: { error },
+                  }) => (
+                    <Form.Input
+                      autoComplete="off"
+                      action={
+                        <Controller
+                          name={`params[${index}].type`}
+                          control={control}
+                          render={({ field: { onBlur, onChange, value } }) => (
+                            <TypeSelector
+                              onBlur={onBlur}
+                              value={value}
+                              onChange={(_e, { value }) => onChange(value)}
+                            />
+                          )}
+                        />
+                      }
+                      placeholder={formatMessage({ id: "functions.form.name" })}
+                      error={error?.message}
+                      onBlur={onBlur}
+                      onChange={(_e, { value }) => onChange(value)}
+                      value={value}
+                    />
+                  )}
+                />
+                {isShownDelete ? (
+                  <Button
+                    onClick={onDelete}
+                    icon="trash alternate outline"
+                    basic
+                    color="red"
+                    aria-label="delete"
+                  />
+                ) : null}
+              </Form.Group>
+            </Grid.Row>
+            <Grid.Row>
+              <Controller
+                name={`params[${index}].description`}
+                control={control}
+                render={({ field: { onBlur, onChange, value } }) => (
+                  <DescriptionInput
+                    onBlur={onBlur}
+                    value={value}
+                    onChange={(_e, { value }) => onChange(value)}
+                  />
+                )}
+              />
+            </Grid.Row>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </div>
+  );
+};
+
+ParamItem.propTypes = {
+  index: PropTypes.number,
+  onDelete: PropTypes.func,
+};

package/src/components/functions/Functions.js

@@ -0,0 +1,152 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Button,
+  Grid,
+  GridColumn,
+  Header,
+  Icon,
+  Label,
+  List,
+  Segment,
+} from "semantic-ui-react";
+
+import { typeToColor } from "@truedat/qx/types";
+import {
+  useFunctions,
+  useFunctionCreate,
+  useFunctionDelete,
+  useFunctionUpdate,
+} from "@truedat/qx/hooks/useFunctions";
+import FunctionEditor from "./FunctionEditor";
+
+const NEW_FUNCTION = {
+  name: "",
+  description: "",
+  type: "boolean",
+  params: [],
+  expression: { shape: "function", value: null },
+};
+
+export default function Functions() {
+  const { formatMessage } = useIntl();
+  const { data, loading, mutate } = useFunctions();
+  const [selectedFunction, setSelectedFunction] = useState();
+  const [isDirty, setDirty] = useState(false);
+
+  const functions = data?.data;
+  const userFunctions = _.reject(({ expression }) => _.isNil(expression))(
+    functions
+  );
+
+  const changeSelectedFunction = (selection) => {
+    setSelectedFunction(null);
+    setSelectedFunction(selection);
+  };
+  const setStateNewFunction = () => changeSelectedFunction(NEW_FUNCTION);
+  const clearForm = () => {
+    setSelectedFunction(null);
+    setDirty(false);
+  };
+
+  const { trigger: createFunction, isMutating: isCreating } =
+    useFunctionCreate();
+
+  const { trigger: updateFunction, isMutating: isUpdating } =
+    useFunctionUpdate(selectedFunction);
+
+  const { trigger: deleteFunction, isMutating: isDeleting } =
+    useFunctionDelete(selectedFunction);
+
+  const isSubmitting = isCreating || isUpdating || isDeleting;
+  const onFunctionCreate = (func) => {
+    const mutateFunction = selectedFunction?.id
+      ? updateFunction
+      : createFunction;
+    mutateFunction({ function: func }).then(() => {
+      clearForm();
+      mutate();
+    });
+  };
+  const onFunctionDelete = (func) => {
+    deleteFunction({ function: func }).then(() => {
+      clearForm();
+      mutate();
+    });
+  };
+  return (
+    <Segment loading={loading}>
+      <Header as="h2">
+        <Icon circular name="archive" />
+        <Header.Content>
+          <FormattedMessage id="functions.header" />
+          <Header.Subheader>
+            <FormattedMessage id="functions.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+
+      <Grid>
+        <GridColumn width={4}>
+          <Button fluid onClick={setStateNewFunction} disabled={isDirty}>
+            {formatMessage({ id: "functions.action.new" })}
+          </Button>
+          <List divided selection={!isDirty}>
+            {!_.isEmpty(userFunctions) ? (
+              userFunctions.map((func, key) => (
+                <List.Item
+                  key={key}
+                  onClick={() => !isDirty && changeSelectedFunction(func)}
+                >
+                  <List.Content>
+                    <List.Header>
+                      <Label
+                        size="tiny"
+                        circular
+                        color={typeToColor(func.type)}
+                        width="100px"
+                      >
+                        {func.type[0]}
+                      </Label>{" "}
+                      {func.name || "Function"}/{func.params.length}
+                    </List.Header>
+                  </List.Content>
+                </List.Item>
+              ))
+            ) : (
+              <List.Item>
+                <List.Content>
+                  <List.Header>
+                    {formatMessage({ id: "functions.empty_list" })}
+                  </List.Header>
+                </List.Content>
+              </List.Item>
+            )}
+          </List>
+        </GridColumn>
+        <GridColumn width={11}>
+          {selectedFunction ? (
+            <FunctionEditor
+              key={selectedFunction?.id || "new"}
+              selectedFunction={selectedFunction}
+              functions={functions}
+              onCancel={clearForm}
+              onSubmit={onFunctionCreate}
+              onDelete={selectedFunction?.id ? onFunctionDelete : null}
+              isSubmitting={isSubmitting}
+              setDirty={setDirty}
+            />
+          ) : (
+            <Header as="h2" icon textAlign="center">
+              <Icon name="hand pointer outline" />
+              <Header.Subheader>
+                {formatMessage({ id: "functions.no_selection" })}
+              </Header.Subheader>
+            </Header>
+          )}
+        </GridColumn>
+      </Grid>
+    </Segment>
+  );
+}