@truedat/ai 6.0.1

package/src/components/resourceMappings/ResourceMappingEditor.js

@@ -0,0 +1,203 @@
+import React, { 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>
+              <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

@@ -0,0 +1,119 @@
+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";
+
+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>
+          <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

@@ -0,0 +1,140 @@
+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 {
+  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="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

@@ -0,0 +1,204 @@
+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 ResourceMappingEditor from "../ResourceMappingEditor";
+
+const renderOpts = {
+  messages: {
+    en: {
+      "resourceMappings.resourceType.data_structure":
+        "resourceMappings.resourceType.data_structure",
+      "form.validation.required": "form.validation.required",
+      "resourceMappings.form.selector": "resourceMappings.form.selector",
+      "resourceMappings.form.fields": "resourceMappings.form.fields",
+      "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",
+      "resourceMappings.form.name": "resourceMappings.form.name",
+      "resourceMappings.form.name": "resourceMappings.form.name",
+      "resourceMappings.form.resource_type":
+        "resourceMappings.form.resource_type",
+      "resourceMappings.form.fields.add": "resourceMappings.form.fields.add",
+      "resourceMappings.form.fields.source":
+        "resourceMappings.form.fields.source",
+      "form.validation.required": "form.validation.required",
+      "resourceMappings.form.fields.source":
+        "resourceMappings.form.fields.source",
+      "resourceMappings.form.fields.target":
+        "resourceMappings.form.fields.target",
+      "actions.discard.confirmation.content":
+        "actions.discard.confirmation.content",
+      "actions.discard.confirmation.header":
+        "actions.discard.confirmation.header",
+      "confirmation.yes": "confirmation.yes",
+      "confirmation.no": "confirmation.no",
+    },
+  },
+  fallback: "lazy",
+};
+
+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 { container } = render(
+      <ResourceMappingEditor {...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(
+      <ResourceMappingEditor {...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(
+      <ResourceMappingEditor {...thisProps} />,
+      renderOpts
+    );
+
+    await waitFor(() => expect(container).toMatchSnapshot());
+  });
+
+  it("test cancel button", async () => {
+    const onCancel = jest.fn();
+    const thisProps = { ...props, onCancel };
+    const { getByRole } = render(
+      <ResourceMappingEditor {...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(
+      <ResourceMappingEditor {...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(
+      <ResourceMappingEditor {...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(
+      <ResourceMappingEditor {...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({
+      fields: [
+        {
+          source: "s1",
+          target: "t1",
+        },
+      ],
+      id: 1,
+      name: "rm1name",
+      resource_type: "boolean",
+      selector: {
+        system_external_id: 1,
+      },
+    });
+  });
+});