@truedat/ai 8.10.3 → 8.10.5

package/src/components/prompts/__tests__/__snapshots__/Prompts.spec.js.snap

@@ -49,10 +49,10 @@ exports[`<Prompts /> matches the latest snapshot 1`] = `
                 class="header"
               >
                 <div
-                  class="ui grey circular empty label"
+                  class="ui green circular empty label"
                 />
                  
-                rm1
+                tr1
               </div>
             </div>
           </div>

package/src/components/resourceMappings/ResourceMappingEditor.js

@@ -1,200 +0,0 @@
-import { Fragment, useEffect } from "react";
-import PropTypes from "prop-types";
-import { useIntl } from "react-intl";
-import {
-  Button,
-  Container,
-  Divider,
-  Grid,
-  Header,
-  Form,
-  Dropdown,
-} from "semantic-ui-react";
-import { FormProvider, useForm, Controller } from "react-hook-form";
-import { ConfirmModal } from "@truedat/core/components";
-import { useResourceTypeOptions } from "../constants";
-import { selectorFor } from "./selectors";
-import ResourceMappingFields from "./ResourceMappingFields";
-
-export default function ResourceMappingEditor({
-  selectedResourceMapping,
-  onSubmit,
-  onCancel,
-  onDelete,
-  isSubmitting,
-  setDirty,
-}) {
-  const { formatMessage } = useIntl();
-  const resourceTypeOptions = useResourceTypeOptions();
-  const form = useForm({
-    mode: "onTouched",
-    defaultValues: selectedResourceMapping,
-  });
-  const { control, handleSubmit, watch, formState } = form;
-  const { isDirty, isValid } = formState;
-
-  useEffect(() => {
-    setDirty(isDirty);
-  }, [setDirty, isDirty]);
-
-  if (!selectedResourceMapping) return null;
-
-  const name =
-    watch("name") ||
-    formatMessage({
-      id: "resourceMappings.form.name.new",
-    });
-  const resourceType = watch("resource_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: "resourceMappings.form.name",
-                  }),
-                },
-              ),
-            }}
-            render={({
-              field: { onBlur, onChange, value },
-              fieldState: { error },
-            }) => (
-              <Form.Input
-                autoComplete="off"
-                placeholder={formatMessage({
-                  id: "resourceMappings.form.name",
-                })}
-                error={error?.message}
-                label={formatMessage({
-                  id: "resourceMappings.form.name",
-                })}
-                onBlur={onBlur}
-                onChange={(_e, { value }) => onChange(value)}
-                value={value}
-                required
-              />
-            )}
-          />
-          <Controller
-            control={control}
-            name="resource_type"
-            rules={{
-              required: formatMessage(
-                { id: "form.validation.required" },
-                {
-                  prop: formatMessage({
-                    id: "resourceMappings.form.resource_type",
-                  }),
-                },
-              ),
-            }}
-            render={({ field: { onBlur, onChange, value } }) => (
-              <Form.Field required>
-                <label>
-                  {formatMessage({
-                    id: "resourceMappings.form.resource_type",
-                  })}
-                </label>
-                <Dropdown
-                  selection
-                  onBlur={onBlur}
-                  options={resourceTypeOptions}
-                  onChange={(_e, { value }) => onChange(value)}
-                  value={value}
-                />
-              </Form.Field>
-            )}
-          />
-          <Header as="h5" dividing>
-            {formatMessage({ id: "resourceMappings.form.selector" })}
-          </Header>
-          <Grid>
-            <Grid.Row>
-              <Grid.Column />
-              <Grid.Column width={15}>{selectorFor(resourceType)}</Grid.Column>
-            </Grid.Row>
-          </Grid>
-          <Header as="h5" dividing>
-            {formatMessage({ id: "resourceMappings.form.fields" })}
-          </Header>
-          <ResourceMappingFields />
-          <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>
-  );
-}
-
-ResourceMappingEditor.propTypes = {
-  selectedResourceMapping: PropTypes.object,
-  onSubmit: PropTypes.func,
-  onCancel: PropTypes.func,
-  onDelete: PropTypes.func,
-  isSubmitting: PropTypes.bool,
-  setDirty: PropTypes.func,
-};

package/src/components/resourceMappings/ResourceMappingFields.js

@@ -1,120 +0,0 @@
-import { 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";
-
-export default function ResourceMappingFields() {
-  const { formatMessage } = useIntl();
-  const { fields, append, remove } = useFieldArray({
-    name: "fields",
-    keyName: "key",
-  });
-
-  const newField = () => ({
-    source: "",
-    target: "",
-  });
-
-  return (
-    <List>
-      {fields.map((field, index) => (
-        <List.Item key={field.key}>
-          <FieldItem index={index} onDelete={() => remove(index)} />
-        </List.Item>
-      ))}
-      <List.Item>
-        <Button onClick={() => append(newField())}>
-          {formatMessage({ id: "resourceMappings.form.fields.add" })}
-        </Button>
-      </List.Item>
-    </List>
-  );
-}
-
-const FieldItem = ({ 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 width={15}>
-            <Grid.Row>
-              <Form.Group inline className="no-margin">
-                <Controller
-                  control={control}
-                  name={`fields[${index}].source`}
-                  rules={{
-                    required: formatMessage(
-                      { id: "form.validation.required" },
-                      {
-                        prop: formatMessage({
-                          id: "resourceMappings.form.fields.source",
-                        }),
-                      },
-                    ),
-                  }}
-                  render={({
-                    field: { onBlur, onChange, value },
-                    fieldState: { error },
-                  }) => (
-                    <Form.Input
-                      autoComplete="off"
-                      placeholder={formatMessage({
-                        id: "resourceMappings.form.fields.source",
-                      })}
-                      error={error?.message}
-                      onBlur={onBlur}
-                      onChange={(_e, { value }) => onChange(value)}
-                      value={value}
-                    />
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name={`fields[${index}].target`}
-                  render={({
-                    field: { onBlur, onChange, value },
-                    fieldState: { error },
-                  }) => (
-                    <Form.Input
-                      autoComplete="off"
-                      placeholder={formatMessage({
-                        id: "resourceMappings.form.fields.target",
-                      })}
-                      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.Column>
-        </Grid.Row>
-      </Grid>
-    </div>
-  );
-};
-
-FieldItem.propTypes = {
-  index: PropTypes.number,
-  onDelete: PropTypes.func,
-};

package/src/components/resourceMappings/ResourceMappings.js

@@ -1,148 +0,0 @@
-import _ from "lodash/fp";
-import { useState } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
-import {
-  Button,
-  Grid,
-  GridColumn,
-  Header,
-  Icon,
-  List,
-  Segment,
-} from "semantic-ui-react";
-
-import {
-  useResourceMappings,
-  useResourceMappingCreate,
-  useResourceMappingDelete,
-  useResourceMappingUpdate,
-} from "@truedat/ai/hooks/useResourceMappings";
-import ResourceMappingEditor from "./ResourceMappingEditor";
-
-const NEW_RESOURCE_MAPPING = {
-  name: "",
-  resource_type: "data_structure",
-  fields: [],
-  selector: {},
-};
-
-export default function ResourceMappings() {
-  const { formatMessage } = useIntl();
-  const { data, loading, mutate } = useResourceMappings();
-  const [selectedResourceMapping, setSelectedResourceMapping] = useState();
-  const [isDirty, setDirty] = useState(false);
-
-  const resourceMappings = data?.data;
-
-  const setStateNewResourceMapping = () =>
-    setSelectedResourceMapping(NEW_RESOURCE_MAPPING);
-  const clearForm = () => {
-    setSelectedResourceMapping(null);
-    setDirty(false);
-  };
-
-  const { trigger: createResourceMapping, isMutating: isCreating } =
-    useResourceMappingCreate();
-
-  const { trigger: updateResourceMapping, isMutating: isUpdating } =
-    useResourceMappingUpdate(selectedResourceMapping);
-
-  const { trigger: deleteResourceMapping, isMutating: isDeleting } =
-    useResourceMappingDelete(selectedResourceMapping);
-
-  const isSubmitting = isCreating || isUpdating || isDeleting;
-
-  const onResourceMappingCreate = async (resource_mapping) => {
-    const mutateResourceMapping = selectedResourceMapping?.id
-      ? updateResourceMapping
-      : createResourceMapping;
-    await mutateResourceMapping({ resource_mapping });
-    clearForm();
-    mutate();
-  };
-
-  const onResourceMappingDelete = async (resource_mapping) => {
-    await deleteResourceMapping({ resource_mapping });
-    clearForm();
-    mutate();
-  };
-
-  return (
-    <Segment loading={loading}>
-      <Header as="h2">
-        <Icon
-          circular
-          name={formatMessage({
-            id: "resourceMappings.header.icon",
-            defaultMessage: "map signs",
-          })}
-        />
-        <Header.Content>
-          <FormattedMessage id="resourceMappings.header" />
-          <Header.Subheader>
-            <FormattedMessage id="resourceMappings.subheader" />
-          </Header.Subheader>
-        </Header.Content>
-      </Header>
-      <Grid>
-        <GridColumn width={4}>
-          <Button fluid onClick={setStateNewResourceMapping} disabled={isDirty}>
-            {formatMessage({ id: "resourceMappings.action.new" })}
-          </Button>
-          <List divided selection={!isDirty}>
-            {!_.isEmpty(resourceMappings) ? (
-              resourceMappings.map((resourceMapping, key) => (
-                <List.Item
-                  key={key}
-                  onClick={() =>
-                    !isDirty && setSelectedResourceMapping(resourceMapping)
-                  }
-                >
-                  <List.Content>
-                    <List.Header>
-                      {resourceMapping.name ||
-                        formatMessage({
-                          id: "resourceMappings.form.name.new",
-                        })}
-                    </List.Header>
-                  </List.Content>
-                </List.Item>
-              ))
-            ) : (
-              <List.Item>
-                <List.Content>
-                  <List.Header>
-                    {formatMessage({ id: "resourceMappings.empty_list" })}
-                  </List.Header>
-                </List.Content>
-              </List.Item>
-            )}
-          </List>
-        </GridColumn>
-        <GridColumn width={11}>
-          {selectedResourceMapping ? (
-            <ResourceMappingEditor
-              key={selectedResourceMapping?.id || "new"}
-              selectedResourceMapping={selectedResourceMapping}
-              resourceMappings={resourceMappings}
-              onCancel={clearForm}
-              onSubmit={onResourceMappingCreate}
-              onDelete={
-                selectedResourceMapping?.id ? onResourceMappingDelete : null
-              }
-              isSubmitting={isSubmitting}
-              setDirty={setDirty}
-            />
-          ) : (
-            <Header as="h2" icon textAlign="center">
-              <Icon name="hand pointer outline" />
-              <Header.Subheader>
-                {formatMessage({ id: "resourceMappings.no_selection" })}
-              </Header.Subheader>
-            </Header>
-          )}
-        </GridColumn>
-      </Grid>
-    </Segment>
-  );
-}

package/src/components/resourceMappings/__tests__/ResourceMappingEditor.spec.js

@@ -1,163 +0,0 @@
-import userEvent from "@testing-library/user-event";
-import { waitFor } from "@testing-library/react";
-import { render, waitForLoad } from "@truedat/test/render";
-import ResourceMappingEditor from "../ResourceMappingEditor";
-
-const props = {
-  selectedResourceMapping: {
-    id: 1,
-    name: "rm1",
-    resource_type: "boolean",
-    fields: [{ source: "s1", target: "t1" }],
-    selector: { system_external_id: 1 },
-  },
-  resourceMappings: [
-    {
-      id: 1,
-      name: "rm1",
-      resource_type: "boolean",
-      fields: [{ source: "s1", target: "t1" }],
-      selector: { system_external_id: 1 },
-    },
-  ],
-  onSubmit: jest.fn(),
-  onCancel: jest.fn(),
-  onDelete: jest.fn(),
-  isSubmitting: false,
-  setDirty: jest.fn(),
-};
-
-describe("<ResourceMappingEditor />", () => {
-  it("matches the latest snapshot", async () => {
-    const rendered = render(<ResourceMappingEditor {...props} />);
-    await waitForLoad(rendered);
-
-    expect(rendered.container).toMatchSnapshot();
-  });
-
-  it("matches snapshot without selected resource mapping", async () => {
-    const props = { setDirty: jest.fn() };
-    const rendered = render(<ResourceMappingEditor {...props} />);
-    await waitForLoad(rendered);
-
-    expect(rendered.container).toMatchSnapshot();
-  });
-
-  it("matches snapshot without onDelete", async () => {
-    const thisProps = {
-      ...props,
-      onDelete: null,
-    };
-    const rendered = render(<ResourceMappingEditor {...thisProps} />);
-    await waitForLoad(rendered);
-
-    expect(rendered.container).toMatchSnapshot();
-  });
-
-  it("test cancel button", async () => {
-    const onCancel = jest.fn();
-    const thisProps = { ...props, onCancel };
-    const rendered = render(<ResourceMappingEditor {...thisProps} />);
-    await waitForLoad(rendered);
-
-    const user = userEvent.setup({ delay: null });
-    await user.click(rendered.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 rendered = render(<ResourceMappingEditor {...thisProps} />);
-    await waitForLoad(rendered);
-
-    const user = userEvent.setup({ delay: null });
-    await user.type(rendered.getAllByRole("textbox")[0], "name");
-
-    await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled(),
-    );
-
-    await user.click(rendered.getByRole("button", { name: /cancel/i }));
-    expect(onCancel).toHaveBeenCalledTimes(0);
-
-    await user.click(
-      rendered.getByRole("button", { name: /modal-negative-action/i }),
-    );
-    expect(onCancel).toHaveBeenCalledTimes(0);
-
-    await user.click(rendered.getByRole("button", { name: /cancel/i }));
-    expect(onCancel).toHaveBeenCalledTimes(0);
-
-    expect(rendered.container).toMatchSnapshot();
-
-    await user.click(
-      rendered.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 rendered = render(<ResourceMappingEditor {...thisProps} />);
-    await waitForLoad(rendered);
-
-    const user = userEvent.setup({ delay: null });
-    await user.click(rendered.getByRole("button", { name: /delete/i }));
-    expect(onDelete).toHaveBeenCalledTimes(0);
-
-    await user.click(
-      rendered.getByRole("button", { name: /modal-negative-action/i }),
-    );
-    expect(onDelete).toHaveBeenCalledTimes(0);
-
-    await user.click(rendered.getByRole("button", { name: /delete/i }));
-    expect(onDelete).toHaveBeenCalledTimes(0);
-
-    expect(rendered.container).toMatchSnapshot();
-
-    await user.click(
-      rendered.getByRole("button", { name: /modal-affirmative-action/i }),
-    );
-    expect(onDelete).toHaveBeenCalledTimes(1);
-  });
-
-  it("test submit", async () => {
-    const onSubmit = jest.fn();
-    const thisProps = { ...props, onSubmit };
-    const rendered = render(<ResourceMappingEditor {...thisProps} />);
-    await waitForLoad(rendered);
-
-    expect(rendered.getByRole("button", { name: /save/i })).toBeDisabled();
-
-    const user = userEvent.setup({ delay: null });
-    await user.type(rendered.getAllByRole("textbox")[0], "name");
-
-    await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled(),
-    );
-
-    await user.click(rendered.getByRole("button", { name: /save/i }));
-
-    await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled(),
-    );
-
-    expect(onSubmit.mock.calls[0][0]).toEqual({
-      fields: [
-        {
-          source: "s1",
-          target: "t1",
-        },
-      ],
-      id: 1,
-      name: "rm1name",
-      resource_type: "boolean",
-      selector: {
-        system_external_id: 1,
-      },
-    });
-  });
-});