DINA UI docs

import { DinaForm, SubmitButton, TextField } from "../components";

export default function ExampleFormPage() {
  const onSubmit: DinaFormOnSubmit = async ({
    submittedValues,
    api: { save }
  }) => {
    if (!submittedValues.name) {
      throw new Error("Name must be set.");
    }

    // Makes a Create or Update call to the back-end.
    await save(
      [
        {
          resource: submittedValues,
          type: "my-type"
        }
      ],
      { apiBaseUrl: "/objectstore-api" }
    );
  };

  return (
    <div className="card card-body" style={{ width: "1000px" }}>
      <DinaForm initialValues={{}} onSubmit={onSubmit}>
        <TextField name="name" />
        <TextField name="description" />
        <SubmitButton />
      </DinaForm>
    </div>
  );
}

<DinaForm initialValues={{ person: { name: "", age: 0 } }}>
  <TextField name="person.name" className="col-md-6" />
  <NumberField name="person.age" className="col-md-6" />
  <SubmitButton />
</DinaForm>

import { COLLECTION_MODULE_REVISION_ROW_CONFIG } from "../../../components/revisions/revision-modules";
import { RevisionsPage } from "../../../components/revisions/RevisionsPageLayout";

export default () => (
  <RevisionsPage
    // The API route to the Javers snapshot list
    auditSnapshotPath="collection-api/audit-snapshot"
    // URL to the details page
    detailsPageLink="/collection/material-sample/view?id="
    // Query for the current state of the record
    queryPath="collection-api/material-sample"
    // The JSONAPI resource "type"
    resourceType="material-sample"
    // The row configs are specific to each module (Collection, Object Store, Agent, etc.)
    revisionRowConfigsByType={COLLECTION_MODULE_REVISION_ROW_CONFIG}
    // The field on the resource that gives the name. Usuallu this field is called "name"
    nameField="materialSampleName"
  />
);

import { COLLECTION_MODULE_REVISION_ROW_CONFIG } from "../../components/revisions/revision-modules";
import RevisionsByUserPage from "../../components/revision-by-user/CommonRevisionsByUserPage";

export default function CollectionRevisionByUserPage() {
  return (
    <RevisionsByUserPage
      // The API route to the Javers snapshot list
      snapshotPath="collection-api/audit-snapshot"
      // The row configs are specific to each module (Collection, Object Store, Agent, etc.)
      revisionRowConfigsByType={COLLECTION_MODULE_REVISION_ROW_CONFIG}
    />
  );
}

import { RevisionRowConfigsByType } from "./revision-row-config";
import { COLLECTING_EVENT_REVISION_ROW_CONFIG } from "./revision-row-configs/collectingevent-revision-row-config";
import { MATERIAL_SAMPLE_REVISION_ROW_CONFIG } from "./revision-row-configs/material-sample-revision-row-configs";
import { METADATA_REVISION_ROW_CONFIG } from "./revision-row-configs/metadata-revision-row-config";

/** Custom revision row behavior for Object Store Resources. */
export const OBJECT_STORE_MODULE_REVISION_ROW_CONFIG: RevisionRowConfigsByType = {
  metadata: METADATA_REVISION_ROW_CONFIG
};

/** Custom revision row behavior for Object Store Resources. */
export const COLLECTION_MODULE_REVISION_ROW_CONFIG: RevisionRowConfigsByType = {
  "collecting-event": COLLECTING_EVENT_REVISION_ROW_CONFIG,
  "material-sample": MATERIAL_SAMPLE_REVISION_ROW_CONFIG
};

import { screen } from "@testing-library/react";

it("should display form elements", async () => {
  const wrapper = mountWithAppContext(<PersonForm />, { apiContext });

  await waitFor(() => {
    expect(wrapper.getByRole("textbox", { name: /name/i })).toBeInTheDocument();
  });

  // Open Testing Playground to visually inspect the DOM
  screen.logTestingPlaygroundURL();

  // The test will output a URL like:
  // https://testing-playground.com/#markup=...
  // Open this URL in your browser to see the rendered component
  // and get suggestions for better queries
});

const mockGet = jest.fn();

// Single resource
mockGet.mockResolvedValueOnce({
  data: {
    id: "123",
    type: "person",
    attributes: { name: "John" }
  }
});

// List of resources
mockGet.mockResolvedValueOnce({
  data: [
    { id: "1", type: "person", name: "John" },
    { id: "2", type: "person", name: "Jane" }
  ],
  meta: { totalResourceCount: 2 }
});

// With includes
mockGet.mockResolvedValueOnce({
  data: [
    {
      id: "1",
      type: "material-sample",
      relationships: {
        collection: { data: { id: "col-1", type: "collection" } }
      }
    }
  ],
  included: [
    { id: "col-1", type: "collection", name: "Main Collection" }
  ]
});

// Conditional mocking based on path
const mockGet = jest.fn(async (path) => {
  switch (path) {
    case "objectstore-api/metadata/123":
      return { data: TEST_METADATA };
    case "objectstore-api/license":
      return { data: TEST_LICENSES };
    case "agent-api/person":
      return { data: [] };
  }
});

const mockBulkGet = jest.fn<any, any>(async (paths: string[]) =>
  paths.map((path) => {
    switch (path) {
      case "person/123":
        return {
          id: "123",
          type: "person",
          displayName: "John Doe"
        };
    }
  })
);

const apiContext: any = {
  apiClient: { get: mockGet },
  bulkGet: mockBulkGet,
  save: mockSave
};

const mockSave = jest.fn();

// Create resource
mockSave.mockResolvedValueOnce([
  {
    id: "new-123",
    type: "person",
    name: "New Person"
  }
]);

// Update resource
mockSave.mockResolvedValueOnce([
  {
    id: "123",
    type: "person",
    name: "Updated Person"
  }
]);

// Bulk operations - return all saved resources
mockSave.mockImplementation(async (saves) => {
  return saves.map(save => ({
    ...save.resource,
    id: save.resource.id || "new-id"
  }));
});

const mockPatch = jest.fn();

apiContext.apiClient.axios = { patch: mockPatch } as any;

mockPatch.mockResolvedValueOnce({
  data: [
    {
      data: { id: "1", type: "person", attributes: { name: "John" } },
      status: 201
    }
  ]
});

// GET error
mockGet.mockRejectedValueOnce({
  response: {
    status: 404,
    statusText: "Not Found"
  }
});

// SAVE error
mockSave.mockRejectedValueOnce({
  response: {
    status: 422,
    data: {
      errors: [{
        detail: "Name is required",
        source: { pointer: "/data/attributes/name" }
      }]
    }
  }
});

import { fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";

it("should display form elements", async () => {
  const wrapper = mountWithAppContext(<PersonForm />, { apiContext });

  // Wait for component to load
  await waitFor(() => {
    expect(wrapper.getByRole("textbox", { name: /name/i })).toBeInTheDocument();
  });

  // Query by role
  const nameInput = wrapper.getByRole("textbox", { name: /name/i });
  const submitButton = wrapper.getByRole("button", { name: /submit/i });
  const checkbox = wrapper.getByRole("checkbox", { name: /active/i });
  const combobox = wrapper.getByRole("combobox", { name: /category/i });

  // Query by text
  expect(wrapper.getByText(/welcome/i)).toBeInTheDocument();

  // Query by display value
  expect(wrapper.getByDisplayValue("John Doe")).toBeInTheDocument();

  // Check if element has value
  expect(nameInput).toHaveDisplayValue("John");
});

import { fireEvent, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

it("should save form data", async () => {
  mockSave.mockResolvedValueOnce([
    { id: "123", type: "person", name: "John" }
  ]);

  const wrapper = mountWithAppContext(<PersonForm />, { apiContext });

  // Wait for form to load
  await waitFor(() => {
    expect(wrapper.getByRole("textbox", { name: /name/i })).toBeInTheDocument();
  });

  // Fill form using fireEvent
  fireEvent.change(wrapper.getByRole("textbox", { name: /name/i }), {
    target: { value: "John" }
  });

  // Or use userEvent for more realistic interactions
  userEvent.click(wrapper.getByRole("button", { name: /submit/i }));

  // Submit form
  fireEvent.submit(wrapper.container.querySelector("form")!);

  // Wait for save to complete
  await waitFor(() => {
    expect(mockSave).toHaveBeenCalledWith(
      [{
        resource: { name: "John", type: "person" },
        type: "person"
      }],
      { apiBaseUrl: "/agent-api" }
    );
  });
});

import { fireEvent, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

it("should handle user interactions", async () => {
  const wrapper = mountWithAppContext(<MyComponent />, { apiContext });

  await waitFor(() => {
    expect(wrapper.getByRole("button", { name: /add tag/i })).toBeInTheDocument();
  });

  // Click button
  userEvent.click(wrapper.getByRole("button", { name: /add tag/i }));

  // Change input
  fireEvent.change(wrapper.getByRole("combobox", { name: /tags/i }), {
    target: { value: "new tag" }
  });

  // Select option
  userEvent.click(wrapper.getByRole("option", { name: /add "new tag"/i }));

  // Toggle switch
  userEvent.click(wrapper.getByRole("switch"));

  // Remove item
  userEvent.click(wrapper.getByRole("button", { name: /remove tag1/i }));

  // Wait for new element to appear
  await waitFor(() => {
    expect(wrapper.getByText(/new tag/i)).toBeInTheDocument();
  });
});

it("should update dropdown selection", async () => {
  const wrapper = mountWithAppContext(<MyForm />, { apiContext });

  await waitFor(() => {
    expect(wrapper.getByRole("combobox", { name: /license/i })).toBeInTheDocument();
  });

  // Open dropdown
  userEvent.click(wrapper.getByRole("combobox", { name: /license/i }));

  // Select option
  userEvent.click(wrapper.getByRole("option", { name: /<none>/i }));

  // Verify selection
  expect(wrapper.getByRole("combobox", { name: /license/i })).toHaveDisplayValue("");
});

await waitFor(() => {
  expect(wrapper.getByText("Loaded")).toBeInTheDocument();
});

expect(mockSave).lastCalledWith(
  [{
    resource: {
      id: "123",
      type: "metadata",
      // Only include fields that were changed
      name: "Updated Name"
    },
    type: "metadata"
  }],
  { apiBaseUrl: "/objectstore-api" }
);

<h2>PCR Primers</h2>

import { DinaMessage } from "../../intl/dina-intl.ts""

...

<h2><DinaMessage id="pcrPrimerListTitle" /></h2>

import { useDinaIntl } from "../../dina-intl.ts""

function MyComponent() {
  const { formatMessage } = useDinaIntl();

  useEffect(() => {
    alert(formatMessage("greeting"));
  }, []);

  return (
    <div>...</div>
  );
}

export const DINA_MESSAGES_ENGLISH = {
  ...
  greeting: "Hello!"
  ...
}

export const DINA_MESSAGES_FRENCH: Partial<typeof DINA_MESSAGES_ENGLISH> = {
  ...
  greeting: "Bonjour!", // If the key exists in the english messages file, Typescript allows it.
  otherKey: "C'est un autre message." // If "otherKey" isn't a key in the English messages, this should show an error in your IDE.
  ...
};

export const DINA_MESSAGES_ENGLISH = {
  ...
  field_name: "Name",
  "field_group.groupName": "Group Name",
  ...
}

export const DINA_MESSAGES_FRENCH: Partial<typeof DINA_MESSAGES_ENGLISH> = {
  ...
  field_name: "Nom",
  "field_group.groupName": "Nom de Groupe"
  ...
}

cd ./packages/scripts
yarn --silent export-intl-csv > messages.csv

cd ./packages/scripts
CSVFILE=messages.csv yarn import-intl-csv