@truedat/ai 6.2.3 → 6.3.1

package/src/components/providers/ProviderEditor.js

@@ -0,0 +1,199 @@
+import _ from "lodash/fp";
+import React, { Fragment, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import {
+  Button,
+  Container,
+  Divider,
+  Header,
+  Form,
+  Dropdown,
+} from "semantic-ui-react";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import { ConfirmModal } from "@truedat/core/components";
+import { useProviderTypeOptions } from "../constants";
+import { Openai, AzureOpenai, BedrockClaude } from "./providerProperties";
+
+const providerPropertiesComponents = {
+  openai: <Openai />,
+  azure_openai: <AzureOpenai />,
+  bedrock_claude: <BedrockClaude />,
+};
+
+export default function ProviderEditor({
+  selectedProvider,
+  onSubmit,
+  onCancel,
+  onDelete,
+  isSubmitting,
+  setDirty,
+}) {
+  const { formatMessage } = useIntl();
+  const typeOptions = useProviderTypeOptions();
+
+  const form = useForm({
+    mode: "onTouched",
+    defaultValues: selectedProvider,
+  });
+  const { control, handleSubmit, watch, formState } = form;
+  const { isDirty, isValid } = formState;
+
+  useEffect(() => {
+    setDirty(isDirty);
+  }, [setDirty, isDirty]);
+
+  if (!selectedProvider) return null;
+
+  const name =
+    watch("name") ||
+    formatMessage({
+      id: "providers.form.name.new",
+    });
+
+  const type = watch("type");
+
+  return (
+    <Fragment>
+      <FormProvider {...form}>
+        <Form>
+          <Header as="h3" dividing>
+            {name}
+          </Header>
+
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "providers.form.name",
+                  }),
+                }
+              ),
+            }}
+            render={({
+              field: { onBlur, onChange, value },
+              fieldState: { error },
+            }) => (
+              <Form.Input
+                autoComplete="off"
+                placeholder={formatMessage({
+                  id: "providers.form.name",
+                })}
+                error={error?.message}
+                label={formatMessage({
+                  id: "providers.form.name",
+                })}
+                onBlur={onBlur}
+                onChange={(_e, { value }) => onChange(value)}
+                value={value}
+                required
+              />
+            )}
+          />
+
+          <Controller
+            control={control}
+            name="type"
+            rules={{
+              required: formatMessage(
+                { id: "form.validation.required" },
+                {
+                  prop: formatMessage({
+                    id: "providers.form.type",
+                  }),
+                }
+              ),
+            }}
+            render={({ field: { onBlur, onChange, value } }) => (
+              <Form.Field required>
+                <label>
+                  {formatMessage({
+                    id: "providers.form.type",
+                  })}
+                </label>
+                <Dropdown
+                  selection
+                  onBlur={onBlur}
+                  options={typeOptions}
+                  onChange={(_e, { value }) => onChange(value)}
+                  value={value}
+                />
+              </Form.Field>
+            )}
+          />
+
+          {providerPropertiesComponents[type]}
+
+          <Divider hidden />
+          <Container textAlign="right">
+            <Button
+              onClick={handleSubmit(onSubmit)}
+              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: "functions.action.delete.header",
+                })}
+                content={formatMessage({
+                  id: "functions.action.delete.content",
+                })}
+                onConfirm={onDelete}
+                onOpen={(e) => e.stopPropagation()}
+                onClose={(e) => e.stopPropagation()}
+              />
+            ) : null}
+          </Container>
+        </Form>
+      </FormProvider>
+    </Fragment>
+  );
+}
+
+ProviderEditor.propTypes = {
+  selectedProvider: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onCancel: PropTypes.func,
+  onDelete: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+  setDirty: PropTypes.func,
+};

package/src/components/providers/Providers.js

@@ -0,0 +1,136 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Button,
+  Grid,
+  GridColumn,
+  Header,
+  Icon,
+  List,
+  Segment,
+} from "semantic-ui-react";
+
+import {
+  useProviders,
+  useProviderCreate,
+  useProviderDelete,
+  useProviderUpdate,
+} from "@truedat/ai/hooks/useProviders";
+import ProviderEditor from "./ProviderEditor";
+
+const NEW_PROVIDER = {
+  name: "",
+  type: "openai",
+  properties: {},
+};
+
+export default function Providers() {
+  const { formatMessage } = useIntl();
+  const { data, loading, mutate } = useProviders();
+  const [selectedProvider, setSelectedProvider] = useState();
+  const [isDirty, setDirty] = useState(false);
+
+  const providers = _.flow(_.prop("data"), _.orderBy(["id"], ["asc"]))(data);
+
+  const setStateNewProvider = () => setSelectedProvider(NEW_PROVIDER);
+  const clearForm = () => {
+    setSelectedProvider(null);
+    setDirty(false);
+  };
+
+  const { trigger: createProvider, isMutating: isCreating } =
+    useProviderCreate();
+
+  const { trigger: updateProvider, isMutating: isUpdating } =
+    useProviderUpdate(selectedProvider);
+
+  const { trigger: deleteProvider, isMutating: isDeleting } =
+    useProviderDelete(selectedProvider);
+
+  const isSubmitting = isCreating || isUpdating || isDeleting;
+  const onProviderCreate = async (provider) => {
+    const mutateProvider = selectedProvider?.id
+      ? updateProvider
+      : createProvider;
+    await mutateProvider({ provider });
+    clearForm();
+    mutate();
+  };
+
+  const onProviderDelete = async (provider) => {
+    await deleteProvider({ provider });
+    clearForm();
+    mutate();
+  };
+
+  return (
+    <Segment loading={loading}>
+      <Header as="h2">
+        <Icon circular name="map signs" />
+        <Header.Content>
+          <FormattedMessage id="providers.header" />
+          <Header.Subheader>
+            <FormattedMessage id="providers.subheader" />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+
+      <Grid>
+        <GridColumn width={4}>
+          <Button fluid onClick={setStateNewProvider} disabled={isDirty}>
+            {formatMessage({ id: "providers.action.new" })}
+          </Button>
+          <List divided selection={!isDirty}>
+            {!_.isEmpty(providers) ? (
+              providers.map((provider, key) => (
+                <List.Item
+                  key={key}
+                  onClick={() => !isDirty && setSelectedProvider(provider)}
+                >
+                  <List.Content>
+                    <List.Header>
+                      {provider.name ||
+                        formatMessage({
+                          id: "providers.form.name.new",
+                        })}
+                    </List.Header>
+                  </List.Content>
+                </List.Item>
+              ))
+            ) : (
+              <List.Item>
+                <List.Content>
+                  <List.Header>
+                    {formatMessage({ id: "providers.empty_list" })}
+                  </List.Header>
+                </List.Content>
+              </List.Item>
+            )}
+          </List>
+        </GridColumn>
+        <GridColumn width={11}>
+          {selectedProvider ? (
+            <ProviderEditor
+              key={selectedProvider?.id || "new"}
+              selectedProvider={selectedProvider}
+              providers={providers}
+              onCancel={clearForm}
+              onSubmit={onProviderCreate}
+              onDelete={selectedProvider?.id ? onProviderDelete : null}
+              isSubmitting={isSubmitting}
+              setDirty={setDirty}
+            />
+          ) : (
+            <Header as="h2" icon textAlign="center">
+              <Icon name="hand pointer outline" />
+              <Header.Subheader>
+                {formatMessage({ id: "providers.no_selection" })}
+              </Header.Subheader>
+            </Header>
+          )}
+        </GridColumn>
+      </Grid>
+    </Segment>
+  );
+}

package/src/components/providers/__tests__/ProviderEditor.spec.js

@@ -0,0 +1,191 @@
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import userEvent from "@testing-library/user-event";
+import ProviderEditor from "../ProviderEditor";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useLocales: jest.fn(() => ({
+    loading: false,
+    locales: [{ lang: "es", id: 1 }],
+  })),
+}));
+
+const renderOpts = {
+  messages: {
+    en: {
+      "form.validation.required": "form.validation.required",
+      "actions.save": "actions.save",
+      "actions.cancel": "actions.cancel",
+      "actions.delete": "actions.delete",
+      "functions.action.delete.header": "functions.action.delete.header",
+      "functions.action.delete.content": "functions.action.delete.content",
+      "providers.form.name": "providers.form.name",
+      "providers.form.name": "providers.form.name",
+      "providers.form.type": "providers.form.type",
+      "form.validation.required": "form.validation.required",
+      "actions.discard.confirmation.content":
+        "actions.discard.confirmation.content",
+      "actions.discard.confirmation.header":
+        "actions.discard.confirmation.header",
+      "confirmation.yes": "confirmation.yes",
+      "confirmation.no": "confirmation.no",
+      "providers.type.openai": "providers.type.openai",
+      "providers.type.azure_openai": "providers.type.azure_openai",
+      "providers.type.bedrock_claude": "providers.type.bedrock_claude",
+      "providerProperties.form.model": "providerProperties.form.model",
+      "providerProperties.form.organizationKey":
+        "providerProperties.form.organizationKey",
+      "providerProperties.form.apiKey": "providerProperties.form.apiKey",
+    },
+  },
+  fallback: "lazy",
+};
+
+const props = {
+  selectedProvider: {
+    id: 1,
+    name: "provider1",
+    type: "openai",
+    properties: { model: "model1", organization_key: "ok1" },
+  },
+  providers: [
+    {
+      id: 1,
+      name: "provider1",
+      type: "openai",
+      properties: { model: "model1", organization_key: "ok1" },
+    },
+  ],
+  onSubmit: jest.fn(),
+  onCancel: jest.fn(),
+  onDelete: jest.fn(),
+  isSubmitting: false,
+  setDirty: jest.fn(),
+};
+
+describe("<ProviderEditor />", () => {
+  it("matches the latest snapshot", async () => {
+    const { container } = render(<ProviderEditor {...props} />, renderOpts);
+    await act(async () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  it("matches snapshot without selected resource mapping", async () => {
+    const props = { setDirty: jest.fn() };
+    const { container, queryByText } = render(
+      <ProviderEditor {...props} />,
+      renderOpts
+    );
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches snapshot without onDelete", async () => {
+    const thisProps = {
+      ...props,
+      onDelete: null,
+    };
+    const { container } = render(<ProviderEditor {...thisProps} />, renderOpts);
+
+    await waitFor(() => expect(container).toMatchSnapshot());
+  });
+
+  it("test cancel button", async () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { getByRole } = render(<ProviderEditor {...thisProps} />, renderOpts);
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+
+    await waitFor(() => expect(onCancel).toHaveBeenCalled());
+  });
+
+  it("test cancel button with confirm", async () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { container, getByRole, getAllByRole } = render(
+      <ProviderEditor {...thisProps} />,
+      renderOpts
+    );
+
+    userEvent.type(getAllByRole("textbox")[0], "name");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /cancel/i }));
+    expect(onCancel).toHaveBeenCalledTimes(0);
+
+    expect(container).toMatchSnapshot();
+
+    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it("test delete button", async () => {
+    const onDelete = jest.fn();
+    const thisProps = { ...props, onDelete };
+    const { container, getByRole } = render(
+      <ProviderEditor {...thisProps} />,
+      renderOpts
+    );
+
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /modal-negative-action/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    userEvent.click(getByRole("button", { name: /delete/i }));
+    expect(onDelete).toHaveBeenCalledTimes(0);
+
+    await waitFor(() => expect(container).toMatchSnapshot());
+
+    userEvent.click(getByRole("button", { name: /modal-affirmative-action/i }));
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it("test submit", async () => {
+    const onSubmit = jest.fn();
+    const thisProps = { ...props, onSubmit };
+    const { getByRole, getAllByRole } = render(
+      <ProviderEditor {...thisProps} />,
+      renderOpts
+    );
+
+    expect(getByRole("button", { name: /save/i })).toBeDisabled();
+
+    userEvent.type(getAllByRole("textbox")[0], "name");
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    userEvent.click(getByRole("button", { name: /save/i }));
+
+    await waitFor(() =>
+      expect(getByRole("button", { name: /save/i })).toBeEnabled()
+    );
+
+    expect(onSubmit.mock.calls[0][0]).toEqual({
+      id: 1,
+      name: "provider1name",
+      type: "openai",
+      properties: {
+        model: "model1",
+        organization_key: "ok1",
+        api_key: undefined,
+      },
+    });
+  });
+});

package/src/components/providers/__tests__/Providers.spec.js

@@ -0,0 +1,77 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import { render } from "@truedat/test/render";
+import Providers from "../Providers";
+
+jest.mock("@truedat/ai/hooks/useProviders", () => {
+  const originalModule = jest.requireActual("@truedat/ai/hooks/useProviders");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useProviders: jest.fn(() => ({
+      data: {
+        data: [
+          {
+            name: "rm1",
+            resource_type: "boolean",
+            fields: [{ source: "s1", target: "t1" }],
+            selector: { system_external_id: 1 },
+          },
+        ],
+      },
+      loading: false,
+    })),
+    useProviderCreate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    useProviderDelete: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+    useProviderUpdate: jest.fn(() => ({
+      trigger: jest.fn(() => new Promise(() => {})),
+      isMutating: false,
+    })),
+  };
+});
+
+describe("<Providers />", () => {
+  const renderOpts = {
+    messages: {
+      en: {
+        "providers.header": "providers.header",
+        "providers.subheader": "providers.subheader",
+        "providers.no_selection": "providers.no_selection",
+        "providers.empty_list": "providers.empty_list",
+        "providers.action.new": "providers.action.new",
+        "group.props.name": "name",
+        "providers.form.name": "name",
+        "providers.form.add_description": "add_description",
+        "providers.form.name": "name",
+        "providers.form.add_param": "add_param",
+        "actions.save": "save",
+        "actions.cancel": "cancel",
+        "actions.delete": "delete",
+        "providers.action.delete.header": "delete_header",
+        "providers.action.delete.content": "delete_content",
+        "providers.form.output": "output",
+        "providers.form.params": "params",
+        "form.validation.required": "required",
+        "confirmation.yes": "confirm_yes",
+        "confirmation.no": "confirm_no",
+        "actions.discard.confirmation.header": "confirmation_header",
+        "actions.discard.confirmation.content": "confirmation_content",
+        "providers.action.new": "providers.action.new",
+      },
+    },
+    fallback: "lazy",
+  };
+
+  it("matches the latest snapshot", async () => {
+    const { container, queryByText } = render(<Providers />, renderOpts);
+    await waitFor(() => expect(queryByText(/lazy/i)).not.toBeInTheDocument());
+    expect(container).toMatchSnapshot();
+  });
+});