@truedat/qx 8.10.2 → 8.10.4

package/src/components/functions/FunctionEdit.js

@@ -0,0 +1,92 @@
+import { useParams, useNavigate } from "react-router";
+import { Segment } from "semantic-ui-react";
+import { FUNCTIONS } from "@truedat/core/routes";
+import {
+  useFunctionFetch,
+  useFunctions,
+  useFunctionCreate,
+  useFunctionUpdate,
+  useFunctionDelete,
+} from "@truedat/qx/hooks/useFunctions";
+import FunctionEditor from "./FunctionEditor";
+
+const NEW_FUNCTION = {
+  name: "",
+  description: "",
+  type: "boolean",
+  params: [],
+  expression: { shape: "function", value: null },
+};
+
+function FunctionEditWithId({ id }) {
+  const navigate = useNavigate();
+  const { data: functionData, loading, error } = useFunctionFetch(id);
+  const { data: functionsData } = useFunctions();
+  const functions = functionsData?.data;
+  const func = functionData?.data;
+
+  const { trigger: updateFunction, isMutating: isUpdating } =
+    useFunctionUpdate(func);
+  const { trigger: deleteFunction, isMutating: isDeleting } =
+    useFunctionDelete(func);
+
+  const isSubmitting = isUpdating || isDeleting;
+
+  const onSubmit = (f) => {
+    updateFunction({ function: f }).then(() => navigate(FUNCTIONS));
+  };
+
+  const onDelete = (f) => {
+    deleteFunction({ function: f }).then(() => navigate(FUNCTIONS));
+  };
+
+  if (error) return null;
+
+  return (
+    <Segment loading={loading}>
+      <FunctionEditor
+        key={func?.id}
+        selectedFunction={func}
+        functions={functions}
+        onCancel={() => navigate(FUNCTIONS)}
+        onSubmit={onSubmit}
+        // Seeded functions are recreated from their JSON file on every reboot,
+        // so deleting one would only hide it until the next restart.
+        onDelete={func?.seeded ? null : onDelete}
+        isSubmitting={isSubmitting}
+      />
+    </Segment>
+  );
+}
+
+function FunctionNew() {
+  const navigate = useNavigate();
+  const { data: functionsData } = useFunctions();
+  const functions = functionsData?.data;
+
+  const { trigger: createFunction, isMutating: isCreating } =
+    useFunctionCreate();
+
+  const onSubmit = (f) => {
+    createFunction({ function: f }).then(() => navigate(FUNCTIONS));
+  };
+
+  return (
+    <Segment>
+      <FunctionEditor
+        key="new"
+        selectedFunction={NEW_FUNCTION}
+        functions={functions}
+        onCancel={() => navigate(FUNCTIONS)}
+        onSubmit={onSubmit}
+        onDelete={null}
+        isSubmitting={isCreating}
+      />
+    </Segment>
+  );
+}
+
+export default function FunctionEdit() {
+  const { id } = useParams();
+  return id ? <FunctionEditWithId id={id} /> : <FunctionNew />;
+}

package/src/components/functions/FunctionEditor.js

@@ -1,4 +1,4 @@
-import { Fragment, useEffect } from "react";
+import { Fragment } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import {
@@ -27,7 +27,6 @@ export default function FunctionEditor({
   onCancel,
   onDelete,
   isSubmitting,
-  setDirty,
 }) {
   const { formatMessage } = useIntl();
   const form = useForm({
@@ -37,10 +36,6 @@ export default function FunctionEditor({
   const { control, handleSubmit, watch, formState, setValue } = form;
   const { isDirty, isValid } = formState;
 
-  useEffect(() => {
-    setDirty(isDirty);
-  }, [setDirty, isDirty]);
-
   if (!selectedFunction) return null;
 
   const type = watch("type");
@@ -105,17 +100,44 @@ export default function FunctionEditor({
               </Grid.Row>
               <Grid.Row>
                 <Controller
-                  name="description"
                   control={control}
-                  render={({ field: { onBlur, onChange, value } }) => (
-                    <DescriptionInput
+                  name="label"
+                  render={({
+                    field: { onBlur, onChange, value },
+                    fieldState: { error },
+                  }) => (
+                    <Form.Input
+                      label={formatMessage({ id: "functions.form.label" })}
+                      placeholder={formatMessage({
+                        id: "functions.form.label",
+                      })}
+                      autoComplete="off"
                       onBlur={onBlur}
-                      value={value}
                       onChange={(_e, { value }) => onChange(value)}
+                      value={value ?? ""}
+                      error={error?.message}
                     />
                   )}
                 />
               </Grid.Row>
+              <Grid.Row>
+                <Controller
+                  name="description"
+                  control={control}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <Form.Field>
+                      <label>
+                        {formatMessage({ id: "functions.form.description" })}
+                      </label>
+                      <DescriptionInput
+                        onBlur={onBlur}
+                        value={value}
+                        onChange={(_e, { value }) => onChange(value)}
+                      />
+                    </Form.Field>
+                  )}
+                />
+              </Grid.Row>
             </GridColumn>
           </Grid>
           <Header as="h5" dividing>

package/src/components/functions/FunctionParams.js

@@ -4,7 +4,7 @@ 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";
+import { TypeSelector } from "@truedat/qx/components/common";
 
 export default function FunctionParams() {
   const { formatMessage } = useIntl();
@@ -45,73 +45,66 @@ const ParamItem = ({ index, onDelete }) => {
       onMouseEnter={() => setIsShownDelete(true)}
       onMouseLeave={() => setIsShownDelete(false)}
     >
-      <Grid>
-        <Grid.Row>
-          <Grid.Column />
-          <Grid.Column width={15}>
-            <Grid.Row>
-              <Form.Group inline className="no-margin">
+      <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}
-                  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}
+                  render={({ field: { onBlur, onChange, value } }) => (
+                    <TypeSelector
                       onBlur={onBlur}
-                      onChange={(_e, { value }) => onChange(value)}
                       value={value}
+                      onChange={(_e, { value }) => onChange(value)}
                     />
                   )}
                 />
-                {isShownDelete ? (
-                  <Button
-                    onClick={onDelete}
-                    icon="trash alternate outline"
-                    basic
-                    color="red"
-                    size="mini"
-                    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>
+              }
+              placeholder={formatMessage({ id: "functions.form.name" })}
+              error={error?.message}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value}
+            />
+          )}
+        />
+        <Controller
+          name={`params[${index}].description`}
+          control={control}
+          render={({ field: { onBlur, onChange, value } }) => (
+            <Form.Input
+              autoComplete="off"
+              placeholder={formatMessage({
+                id: "functions.form.description",
+              })}
+              onBlur={onBlur}
+              onChange={(_e, { value }) => onChange(value)}
+              value={value ?? ""}
+            />
+          )}
+        />
+        {isShownDelete ? (
+          <Button
+            onClick={onDelete}
+            icon="trash alternate outline"
+            basic
+            color="red"
+            size="mini"
+            aria-label="delete"
+          />
+        ) : null}
+      </Form.Group>
     </div>
   );
 };

package/src/components/functions/FunctionsList.js

@@ -0,0 +1,213 @@
+import _ from "lodash/fp";
+import { useMemo, useState } from "react";
+import { compile } from "path-to-regexp";
+import { Link } from "react-router";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Button,
+  Divider,
+  Header,
+  Icon,
+  Input,
+  Label,
+  Segment,
+  Table,
+} from "semantic-ui-react";
+import { Pagination } from "@truedat/core/components";
+import { columnDecorator } from "@truedat/core/services";
+import { FUNCTION, FUNCTIONS_NEW } from "@truedat/core/routes";
+import { useFunctions } from "@truedat/qx/hooks/useFunctions";
+import { typeLabel } from "@truedat/qx/types";
+
+const PAGE_SIZE = 10;
+
+const columns = [
+  {
+    name: "type",
+    sort: "type",
+    width: 2,
+    fieldSelector: ({ type }) => type,
+    fieldDecorator: (type) => typeLabel(type),
+  },
+  {
+    name: "name",
+    sort: "name",
+    fieldSelector: _.pick(["id", "name"]),
+    fieldDecorator: ({ id, name }) => (
+      <Link to={compile(FUNCTION)({ id: `${id}` })}>{name || "Function"}</Link>
+    ),
+  },
+  {
+    name: "label",
+    sort: "label",
+  },
+  {
+    name: "class",
+    sort: "class",
+    width: 3,
+  },
+  {
+    name: "description",
+    sort: "description",
+  },
+  {
+    name: "params",
+    width: 2,
+    textAlign: "center",
+    fieldSelector: ({ params }) => params?.length ?? 0,
+    fieldDecorator: (count) => count,
+  },
+];
+
+function FunctionRow({ func }) {
+  return _.isEmpty(func) ? null : (
+    <Table.Row>
+      {columns.map((column, i) => (
+        <Table.Cell
+          key={i}
+          textAlign={column.textAlign}
+          content={columnDecorator(column)(func)}
+        />
+      ))}
+    </Table.Row>
+  );
+}
+
+export default function FunctionsList() {
+  const { formatMessage } = useIntl();
+  const { data, loading } = useFunctions();
+  const [searchInput, setSearchInput] = useState("");
+  const [sortColumn, setSortColumn] = useState(null);
+  const [sortDirection, setSortDirection] = useState("ascending");
+  const [activePage, setActivePage] = useState(1);
+
+  const userFunctions = _.reject(({ expression }) => _.isNil(expression))(
+    data?.data || [],
+  );
+
+  const handleSortSelection = (column) => {
+    if (sortColumn === column) {
+      setSortDirection(
+        sortDirection === "ascending" ? "descending" : "ascending",
+      );
+    } else {
+      setSortColumn(column);
+      setSortDirection("ascending");
+    }
+    setActivePage(1);
+  };
+
+  const handleSearch = (_e, { value }) => {
+    setSearchInput(value);
+    setActivePage(1);
+  };
+
+  const filtered = useMemo(() => {
+    const lower = searchInput.trim().toLowerCase();
+    return lower
+      ? userFunctions.filter(
+          ({ name, description }) =>
+            (name && name.toLowerCase().includes(lower)) ||
+            (description && description.toLowerCase().includes(lower)),
+        )
+      : userFunctions;
+  }, [userFunctions, searchInput]);
+
+  const sorted = useMemo(() => {
+    if (!sortColumn) return filtered;
+    const order = sortDirection === "ascending" ? "asc" : "desc";
+    return _.orderBy([sortColumn], [order])(filtered);
+  }, [filtered, sortColumn, sortDirection]);
+
+  const totalPages = Math.ceil(sorted.length / PAGE_SIZE);
+  const paginated = sorted.slice(
+    (activePage - 1) * PAGE_SIZE,
+    activePage * PAGE_SIZE,
+  );
+
+  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>
+      <Button
+        floated="right"
+        primary
+        as={Link}
+        to={FUNCTIONS_NEW}
+        content={formatMessage({ id: "functions.action.new" })}
+      />
+      <Divider hidden />
+      {_.isEmpty(userFunctions) ? (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "functions.empty_list" })}
+          </Header.Content>
+        </Header>
+      ) : (
+        <>
+          <div>
+            <Input
+              icon
+              placeholder={formatMessage({ id: "search.placeholder" })}
+              onChange={handleSearch}
+            >
+              <input />
+              <Icon name="search" />
+            </Input>
+          </div>
+          <Label style={{ float: "right" }}>
+            <FormattedMessage
+              id="functions.list.count"
+              values={{ count: filtered.length }}
+            />
+          </Label>
+          <Divider hidden />
+          <Table sortable>
+            <Table.Header>
+              <Table.Row>
+                {columns.map((column, i) => (
+                  <Table.HeaderCell
+                    key={i}
+                    width={column.width}
+                    textAlign={column.textAlign}
+                    sorted={
+                      column.sort && sortColumn === column.sort
+                        ? sortDirection
+                        : null
+                    }
+                    className={column.sort ? "" : "disabled"}
+                    onClick={() =>
+                      column.sort && handleSortSelection(column.sort)
+                    }
+                    content={formatMessage({
+                      id: `functions.table.${column.name}`,
+                      defaultMessage: column.name,
+                    })}
+                  />
+                ))}
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {paginated.map((func, i) => (
+                <FunctionRow key={i} func={func} />
+              ))}
+            </Table.Body>
+          </Table>
+          <Pagination
+            activePage={activePage}
+            totalPages={totalPages}
+            selectPage={({ activePage }) => setActivePage(activePage)}
+          />
+        </>
+      )}
+    </Segment>
+  );
+}

package/src/components/functions/__tests__/FunctionEdit.spec.js

@@ -0,0 +1,168 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { useParams } from "react-router";
+import FunctionEdit from "../FunctionEdit";
+
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: jest.fn(),
+  useNavigate: jest.fn(() => jest.fn()),
+}));
+
+jest.mock("@truedat/core/components", () => ({
+  Loading: () => <div data-testid="loading">loading…</div>,
+}));
+
+jest.mock(
+  "../FunctionEditor",
+  () =>
+    function MockFunctionEditor({ selectedFunction, onDelete }) {
+      return (
+        <div data-testid="function-editor">
+          <span data-testid="function-name">{selectedFunction?.name}</span>
+          <span data-testid="has-delete">
+            {onDelete ? "with-delete" : "no-delete"}
+          </span>
+        </div>
+      );
+    },
+);
+
+const mockUseFunctionFetch = jest.fn();
+
+jest.mock("@truedat/qx/hooks/useFunctions", () => ({
+  useFunctions: jest.fn(() => ({
+    data: { data: [{ id: 1, name: "eq", type: "boolean", params: [] }] },
+    loading: false,
+  })),
+  useFunctionFetch: (...args) => mockUseFunctionFetch(...args),
+  useFunctionCreate: jest.fn(() => ({
+    trigger: jest.fn(() => Promise.resolve()),
+    isMutating: false,
+  })),
+  useFunctionUpdate: jest.fn(() => ({
+    trigger: jest.fn(() => Promise.resolve()),
+    isMutating: false,
+  })),
+  useFunctionDelete: jest.fn(() => ({
+    trigger: jest.fn(() => Promise.resolve()),
+    isMutating: false,
+  })),
+}));
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  useParams.mockReturnValue({});
+  mockUseFunctionFetch.mockReturnValue({
+    func: null,
+    loading: false,
+    error: undefined,
+  });
+});
+
+describe("<FunctionEdit /> — new function", () => {
+  it("renders the editor with empty NEW_FUNCTION defaults when no id param", async () => {
+    const rendered = render(<FunctionEdit />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("function-editor")).toBeInTheDocument();
+    expect(rendered.getByTestId("function-name")).toHaveTextContent("");
+    expect(rendered.getByTestId("has-delete")).toHaveTextContent("no-delete");
+  });
+});
+
+describe("<FunctionEdit /> — edit existing function", () => {
+  it("shows Loading while fetching function", () => {
+    useParams.mockReturnValue({ id: "42" });
+    mockUseFunctionFetch.mockReturnValue({
+      data: null,
+      loading: true,
+      error: undefined,
+    });
+
+    const rendered = render(<FunctionEdit />);
+
+    expect(
+      rendered.container.querySelector(".ui.segment.loading"),
+    ).toBeInTheDocument();
+  });
+
+  it("renders nothing when fetch returns an error", async () => {
+    useParams.mockReturnValue({ id: "42" });
+    mockUseFunctionFetch.mockReturnValue({
+      func: null,
+      loading: false,
+      error: { message: "Not found" },
+    });
+
+    const rendered = render(<FunctionEdit />);
+    await waitForLoad(rendered);
+
+    expect(rendered.queryByTestId("function-editor")).not.toBeInTheDocument();
+    expect(
+      rendered.container.querySelector(".ui.segment.loading"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders editor with the fetched function and a delete handler", async () => {
+    useParams.mockReturnValue({ id: "42" });
+    mockUseFunctionFetch.mockReturnValue({
+      data: {
+        data: {
+          id: 42,
+          name: "my_func",
+          type: "boolean",
+          params: [],
+          expression: { shape: "function", value: null },
+        },
+        loading: false,
+        error: undefined,
+      },
+    });
+
+    const rendered = render(<FunctionEdit />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("function-editor")).toBeInTheDocument();
+    expect(rendered.getByTestId("function-name")).toHaveTextContent("my_func");
+    expect(rendered.getByTestId("has-delete")).toHaveTextContent("with-delete");
+  });
+
+  it("hides delete for seeded functions, which the loader recreates on reboot", async () => {
+    useParams.mockReturnValue({ id: "42" });
+    mockUseFunctionFetch.mockReturnValue({
+      data: {
+        data: {
+          id: 42,
+          name: "length_gt",
+          type: "boolean",
+          seeded: true,
+          params: [],
+          expression: { shape: "function", value: null },
+        },
+        loading: false,
+        error: undefined,
+      },
+    });
+
+    const rendered = render(<FunctionEdit />);
+    await waitForLoad(rendered);
+
+    expect(rendered.getByTestId("function-name")).toHaveTextContent(
+      "length_gt",
+    );
+    expect(rendered.getByTestId("has-delete")).toHaveTextContent("no-delete");
+  });
+
+  it("passes id to useFunctionFetch", async () => {
+    useParams.mockReturnValue({ id: "7" });
+    mockUseFunctionFetch.mockReturnValue({
+      func: { id: 7, name: "fn", type: "string", params: [], expression: {} },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<FunctionEdit />);
+
+    expect(mockUseFunctionFetch).toHaveBeenCalledWith("7");
+  });
+});