@truedat/ai 6.11.1 → 6.12.0

package/src/components/actions/Actions.js

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  Header,
+  Icon,
+  Segment,
+  Grid,
+  Container,
+  Button,
+} from "semantic-ui-react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import { ACTION_NEW } from "@truedat/core/routes";
+import { useActionsSearch } from "../../hooks/useActions";
+import { ActionsTable } from "./ActionsTable";
+import { ActionsContextProvider } from "./ActionsContext";
+
+export function ActionsContent() {
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon name="caret square right" circular />
+        <Header.Content>
+          <FormattedMessage id="ai.actions.header" />
+          <Header.Subheader>
+            <FormattedMessage id="ai.actions.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Grid>
+        <Grid.Column width={8}>{/* filters */}</Grid.Column>
+        <Grid.Column width={8}>
+          <Container textAlign="right">
+            <Button
+              primary
+              as={Link}
+              to={ACTION_NEW}
+              content={<FormattedMessage id="ai.actions.actions.create" />}
+            />
+          </Container>
+        </Grid.Column>
+      </Grid>
+      <ActionsTable />
+    </Segment>
+  );
+}
+
+export const Actions = () => {
+  const searchProps = {
+    initialSortColumn: "updated_at",
+    initialSortDirection: "descending",
+    defaultFilters: { deleted: false },
+    useSearch: useActionsSearch,
+  };
+  return (
+    <ActionsContextProvider {...searchProps}>
+      <ActionsContent />
+    </ActionsContextProvider>
+  );
+};
+
+export default Actions;

package/src/components/actions/ActionsContext.js

@@ -0,0 +1,52 @@
+import _ from "lodash/fp";
+import React, { useState, useEffect, useContext, createContext } from "react";
+
+export const ActionsContext = createContext();
+export const useActionsContext = () => useContext(ActionsContext);
+
+export const ActionsContextProvider = (props) => {
+  const children = _.prop("children")(props);
+  const initialDefaultFilters = _.prop("defaultFilters")(props);
+  const initialSortColumn = _.prop("initialSortColumn")(props);
+  const initialSortDirection = _.prop("initialSortDirection")(props);
+  const useSearch = _.prop("useSearch")(props);
+  const [defaultFilters, setDefaultFilters] = useState(initialDefaultFilters);
+  const [rawData, setRawData] = useState([]);
+  const [sortColumn, setSortColumn] = useState(initialSortColumn);
+  const [sortDirection, setSortDirection] = useState(initialSortDirection);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (initialDefaultFilters !== defaultFilters) {
+      setDefaultFilters(initialDefaultFilters);
+    }
+  }, [initialDefaultFilters]);
+
+  const { trigger: triggerSearch } = useSearch();
+
+  useEffect(() => {
+    triggerSearch(defaultFilters).then(({ data }) => {
+      setRawData(data?.data);
+      setLoading(false);
+    });
+  }, [defaultFilters]);
+
+  const searchData = _.flow(
+    _.orderBy([sortColumn], [sortDirection == "ascending" ? "asc" : "desc"])
+  )(rawData);
+
+  const context = {
+    loading,
+    searchData,
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+  };
+
+  return (
+    <ActionsContext.Provider value={context}>
+      {children}
+    </ActionsContext.Provider>
+  );
+};

package/src/components/actions/ActionsTable.js

@@ -0,0 +1,124 @@
+import _ from "lodash/fp";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { Link } from "react-router-dom";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { linkTo } from "@truedat/core/routes";
+import { Loading } from "@truedat/core/components";
+import { columnDecorator } from "@truedat/core/services";
+import { sortColumn as sortHandler } from "@truedat/core/services/sort";
+import { DateDecorator } from "@truedat/core/services/columnDecorators";
+import { useActionsContext } from "./ActionsContext";
+
+const translateDecorator = (text) => (
+  <FormattedMessage id={text} defaultMessage={text} />
+);
+
+export const ActionsTable = () => {
+  const {
+    searchData: actions,
+    sortColumn,
+    sortDirection,
+    setSortColumn,
+    setSortDirection,
+    loading,
+  } = useActionsContext();
+
+  const columns = [
+    {
+      name: "name",
+      sort: { name: "name" },
+      fieldSelector: _.pick(["id", "name"]),
+      fieldDecorator: ({ id, name }) => (
+        <Link to={linkTo.ACTION({ id })}>{name}</Link>
+      ),
+    },
+    {
+      name: "user.full_name",
+      sort: { name: "full_name" },
+    },
+    {
+      name: "type",
+      sort: { name: "type" },
+      fieldDecorator: (field) => field,
+    },
+    {
+      name: "is_enabled",
+      sort: { name: "is_enabled" },
+      fieldDecorator: (field) =>
+        translateDecorator(`ai.actions.is_enabled.${field}`),
+    },
+    {
+      name: "updated_at",
+      sort: { name: "updated_at" },
+      fieldSelector: ({ updated_at }) => ({
+        date: updated_at,
+      }),
+      width: 2,
+      fieldDecorator: DateDecorator,
+      textAlign: "center",
+    },
+  ];
+
+  return _.isEmpty(actions) ? (
+    <Header as="h4">
+      <Icon name="search" />
+      <Header.Content>
+        <FormattedMessage id="ai.actions.search.results.empty" />
+      </Header.Content>
+    </Header>
+  ) : loading ? (
+    <Loading />
+  ) : (
+    <Table sortable>
+      <Table.Header>
+        <Table.Row>
+          {columns.map((column, key) => (
+            <Table.HeaderCell
+              key={key}
+              width={column.width}
+              content={
+                <FormattedMessage
+                  id={`ai.actions.form.${column.header || column.name}`}
+                  defaultMessage={column.name}
+                />
+              }
+              sorted={
+                _.path("sort.name")(column) === sortColumn
+                  ? sortDirection
+                  : null
+              }
+              className={_.path("sort.name")(column) ? "" : "disabled"}
+              onClick={() =>
+                sortHandler(
+                  column,
+                  () => {},
+                  setSortDirection,
+                  setSortColumn,
+                  sortDirection,
+                  sortColumn
+                )
+              }
+            />
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {actions.map((t, i) => (
+          <Table.Row key={i}>
+            {columns.map((column, i) => (
+              <Table.Cell
+                key={i}
+                warning={!t.is_enabled}
+                textAlign={column.textAlign}
+                content={columnDecorator(column)(t)}
+              />
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+};
+
+export default ActionsTable;

package/src/components/actions/__tests__/Action.spec.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import Action from "../Action";
+
+const action = {
+  id: 3,
+  name: "foo",
+  type: "baz",
+  user: {
+    id: 123,
+    full_name: "agent",
+  },
+  updated_at: "2024-09-04T14:35:16.854749Z",
+  user_id: 123,
+  deleted_at: null,
+  is_enabled: true,
+  dynamic_content: {},
+};
+jest.mock("@truedat/ai/hooks/useActions", () => {
+  const originalModule = jest.requireActual("@truedat/ai/hooks/useActions");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useAction: () => ({
+      action,
+      loading: false,
+      mutate: jest.fn(),
+    }),
+  };
+});
+
+const renderOpts = {
+  messages: {
+    en: {
+      "ai.actions.actions.delete.confirmation.content":
+        "Action will be deleted. Are you sure?",
+      "ai.actions.actions.delete.confirmation.header": "Delete action",
+      "ai.actions.actions.delete": "Delete",
+      "ai.actions.actions.disable.confirmation.content":
+        " Action will be disabled. Are you sure?",
+      "ai.actions.actions.disable.confirmation.header": "Disable action",
+      "ai.actions.actions.disable": "Disable",
+      "ai.actions.actions.edit": "Edit",
+      "ai.actions.actions.form.user": "Agent",
+      "ai.actions.is_enabled.true": "Active",
+      "navigation.admin.actions": "Actions",
+      "ai.actions.form.type": "Type",
+    },
+  },
+  fallback: "lazy",
+};
+
+describe("<Action />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<Action />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/actions/__tests__/ActionActions.spec.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ActionActions from "../ActionActions";
+
+const action = {
+  id: 3,
+  name: "foo",
+  type: "baz",
+  user: {
+    id: 123,
+    full_name: "agent",
+  },
+  updated_at: "2024-09-04T14:35:16.854749Z",
+  user_id: 123,
+  deleted_at: null,
+  is_enabled: true,
+  dynamic_content: {},
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "ai.actions.actions.delete.confirmation.content":
+        "Action will be deleted. Are you sure?",
+      "ai.actions.actions.delete.confirmation.header": "Delete action",
+      "ai.actions.actions.delete": "Delete",
+      "ai.actions.actions.disable.confirmation.content":
+        " Action will be disabled. Are you sure?",
+      "ai.actions.actions.disable.confirmation.header": "Disable action",
+      "ai.actions.actions.disable": "Disable",
+      "ai.actions.actions.edit": "Edit",
+      "navigation.admin.actions": "Actions",
+    },
+  },
+};
+
+describe("<ActionActions />", () => {
+  const props = {
+    action,
+    mutate: jest.fn(),
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ActionActions {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/actions/__tests__/ActionBreadcrumbs.spec.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import ActionBreadcrumbs from "../ActionBreadcrumbs";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "navigation.admin.actions": "Actions",
+    },
+  },
+};
+
+describe("<ActionBreadcrumbs />", () => {
+  const text = "edit";
+  const props = { text };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<ActionBreadcrumbs {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/actions/__tests__/ActionDetail.spec.js

@@ -0,0 +1,106 @@
+import React, { Suspense } from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import ActionDetail from "../ActionDetail";
+
+const template = {
+  __typename: "Template",
+  content: [
+    {
+      fields: [
+        {
+          cardinality: "1",
+          default: {
+            origin: "default",
+            value: "",
+          },
+          label: "Field Label",
+          name: "field_name",
+          type: "string",
+          values: {
+            fixed_tuple: [
+              {
+                text: "Value One",
+                value: "value_one",
+              },
+            ],
+          },
+          widget: "dropdown",
+        },
+      ],
+      name: "",
+    },
+  ],
+  id: "1",
+  label: "template_label",
+  name: "Template Name",
+  scope: "actions",
+};
+
+jest.mock("@truedat/core/hooks", () => ({
+  useTemplate: jest.fn(() => ({
+    data: { template },
+  })),
+}));
+
+const templatesMock = {
+  request: {
+    query: TEMPLATES_QUERY,
+    variables: { scope: "actions", domainIds: null },
+  },
+  result: { data: { templates: [template] } },
+};
+
+const action = {
+  id: 3,
+  name: "foo",
+  type: "baz",
+  user: {
+    id: 123,
+    full_name: "agent",
+  },
+  updated_at: "2024-09-04T14:35:16.854749Z",
+  user_id: 123,
+  deleted_at: null,
+  is_enabled: true,
+  dynamic_content: {
+    field_name: {
+      origin: "user",
+      value: "value_one",
+    },
+  },
+};
+
+const renderOpts = {
+  messages: {
+    en: {
+      "ai.actions.search.results.empty": "Empty",
+      "ai.actions.actions.create": "Create",
+      "ai.actions.subheader": "AI actions",
+      "ai.actions.header": "AI actions",
+      "ai.actions.actions.form.user": "Agent",
+      "ai.actions.form.type": "Type",
+    },
+  },
+  mocks: [templatesMock],
+};
+
+describe("<ActionDetail />", () => {
+  const props = {
+    action,
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { queryByText, container } = render(
+      <Suspense fallback={null}>
+        <ActionDetail {...props} />
+      </Suspense>,
+      renderOpts
+    );
+    await waitFor(() =>
+      expect(queryByText(/Value One/i)).not.toBeInTheDocument()
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/actions/__tests__/ActionEdit.spec.js

@@ -0,0 +1,133 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import { TEMPLATES_QUERY } from "@truedat/core/api/queries";
+import ActionEdit from "../ActionEdit";
+
+jest.mock("@truedat/auth/hooks/useUsers", () => ({
+  useAgents: jest.fn(() => ({
+    agents: [
+      { id: 1, full_name: "Agent 1" },
+      { id: 2, full_name: "Agent 2" },
+    ],
+  })),
+}));
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useParams: () => ({ id: "123" }),
+}));
+
+const template = {
+  __typename: "Template",
+  content: [
+    {
+      fields: [
+        {
+          cardinality: "1",
+          default: {
+            origin: "default",
+            value: "",
+          },
+          label: "Field Label",
+          name: "field_name",
+          type: "string",
+          values: {
+            fixed_tuple: [
+              {
+                text: "Value One",
+                value: "value_one",
+              },
+            ],
+          },
+          widget: "dropdown",
+        },
+      ],
+      name: "",
+    },
+  ],
+  id: "1",
+  label: "template_label",
+  name: "Template Name",
+  scope: "actions",
+};
+
+jest.mock("@truedat/core/hooks", () => ({
+  useTemplate: jest.fn(() => ({
+    data: { template },
+  })),
+}));
+
+const templatesMock = {
+  request: {
+    query: TEMPLATES_QUERY,
+    variables: { scope: "actions", domainIds: null },
+  },
+  result: { data: { templates: [template] } },
+};
+
+const action = {
+  deleted_at: null,
+  dynamic_content: {
+    field_name: {
+      origin: "user",
+      value: "value_one",
+    },
+  },
+  id: 123,
+  is_enabled: true,
+  name: "Action Name",
+  type: "Template Name",
+  updated_at: "2024-10-01T00:00:00.000000Z",
+  user: {
+    full_name: "Agent 1",
+    id: 1,
+  },
+  user_id: 1,
+};
+
+jest.mock("@truedat/ai/hooks/useActions", () => ({
+  useAction: jest.fn(() => ({
+    action,
+  })),
+  useActionUpdate: jest.fn(() => ({
+    trigger: jest.fn(() => new Promise(() => {})),
+  })),
+}));
+
+const renderOpts = {
+  messages: {
+    en: {
+      "actions.cancel": "Cancel",
+      "actions.update": "Update",
+      "ai.actions.actions.edit": "Edit Action",
+      "ai.actions.actions.form.active": "Active",
+      "ai.actions.actions.form.name": "Name",
+      "ai.actions.actions.form.user": "Agent",
+      "fields.dropdown.placeholder": "Select One...",
+      loading: "Loading",
+      "navigation.admin.actions": "Actions",
+      "selector.no.selection": "No selection",
+      "template.form.validation.empty_required": "Can't be empty",
+      "template.selector.label": "Template",
+    },
+  },
+  mocks: [templatesMock],
+  fallback: "lazy",
+};
+
+describe("<ActionEdit />", () => {
+  const setActionResource = jest.fn();
+  const props = {
+    setActionResource,
+  };
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(
+      <ActionEdit {...props} />,
+      renderOpts
+    );
+
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+});