@truedat/core 4.58.7 → 4.59.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.59.0] 2023-01-09
+
+### Added
+
+- [TD-1968] I18n messages management view
+
 ## [4.58.4] 2022-12-22
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "4.58.7",
+  "version": "4.59.0",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "4803deea029616582194b9704bf57c7ef9ea4faa"
+  "gitHead": "7d2cd52d47210cdd67cf3521697dab38c963a570"
 }

package/src/api.js

@@ -1,2 +1,5 @@
 export const API_COMMENTS = "/api/business_concepts/comments";
 export const API_LOCALE_MESSAGES = "/api/locales/:lang/messages";
+export const API_LOCALES = "/api/locales";
+export const API_MESSAGE = "/api/messages/:id";
+export const API_MESSAGES = "/api/messages";

package/src/components/AdminMenu.js

@@ -3,6 +3,7 @@ import { useAuthorized } from "../hooks";
 import {
   CONFIGURATIONS,
   JOBS,
+  I18N_MESSAGES,
   RELATION_TAGS,
   SOURCES,
   SUBSCRIPTIONS,
@@ -17,6 +18,7 @@ const items = [
   { name: "sources", routes: [SOURCES] },
   { name: "jobs", routes: [JOBS] },
   { name: "configurations", routes: [CONFIGURATIONS] },
+  { name: "i18nMessages", routes: [I18N_MESSAGES] },
 ];
 
 export const AdminMenu = () => {

package/src/components/__tests__/__snapshots__/AdminMenu.spec.js.snap

@@ -108,6 +108,19 @@ exports[`<AdminMenu /> matches the latest snapshot 1`] = `
             Configuration
           </span>
         </a>
+        <a
+          aria-checked="false"
+          class="item"
+          href="/i18n/messages"
+          name="i18nMessages"
+          role="option"
+        >
+          <span
+            class="text"
+          >
+            Translations
+          </span>
+        </a>
       </div>
     </div>
   </div>

package/src/hooks/index.js

@@ -1,6 +1,7 @@
 export * from "./useActiveRoute";
 export * from "./useActiveRoutes";
 export * from "./useAuthorized";
+export * from "./useLocales";
 export * from "./useMessages";
 export * from "./usePath";
 export * from "./useOnScreen";

package/src/hooks/useLocales.js

@@ -0,0 +1,9 @@
+import useSWR from "swr";
+import { API_LOCALES } from "../api";
+import { apiJson } from "../services/api";
+
+export const useLocales = () => {
+  const { data, error, mutate } = useSWR(API_LOCALES, apiJson);
+  const locales = data?.data?.data;
+  return { locales, error, loading: !error && !data, mutate };
+};

package/src/hooks/useMessages.js

@@ -1,13 +1,24 @@
 import { compile } from "path-to-regexp";
 import useSWRImmutable from "swr/immutable";
-import { API_LOCALE_MESSAGES } from "../api";
-import { apiJson } from "../services/api";
+import useSWRMutations from "swr/mutation";
+import { API_LOCALE_MESSAGES, API_MESSAGE, API_MESSAGES } from "../api";
+import { apiJson, apiJsonPatch, apiJsonPost } from "../services/api";
 
-const toApiPath = compile(API_LOCALE_MESSAGES);
+const toApiLocaleMessagesPath = compile(API_LOCALE_MESSAGES);
+const toApiMessagePath = compile(API_MESSAGE);
 
 export const useMessages = (lang) => {
-  const url = toApiPath({ lang });
+  const url = toApiLocaleMessagesPath({ lang });
   const { data, error } = useSWRImmutable(url, apiJson);
   const messages = data?.data;
   return { messages, error, loading: !error && !data };
 };
+
+export const useMessagePatch = (id) => {
+  const url = toApiMessagePath({ id });
+  return useSWRMutations(url, (url, { arg }) => apiJsonPatch(url, arg));
+};
+
+export const useMessagePost = () => {
+  return useSWRMutations(API_MESSAGES, (url, { arg }) => apiJsonPost(url, arg));
+};

package/src/i18n/components/EditableCell.js

@@ -0,0 +1,53 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import React, { useState } from "react";
+import { Table, Input } from "semantic-ui-react";
+
+const MAX_LENGTH = 255;
+
+export default function EditableCell({
+  value: propValue,
+  placeholder,
+  onChange,
+}) {
+  const [editionMode, setEditMode] = useState(false);
+  const [value, setValue] = useState(propValue || "");
+
+  const onBlur = () => {
+    if (_.isEmpty(value)) setValue(propValue);
+    else if (value != propValue) onChange(value);
+    setEditMode(false);
+  };
+
+  return editionMode ? (
+    <Table.Cell
+      className="no-padding"
+      width={5}
+      content={
+        <Input
+          fluid
+          maxLength={MAX_LENGTH}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          onChange={(e) => setValue(e.target.value)}
+          value={value}
+          autoFocus
+        />
+      }
+    />
+  ) : (
+    <Table.Cell
+      className="cursor-pointer"
+      width={5}
+      content={value}
+      onClick={() => setEditMode(true)}
+      onFocus={() => setEditMode(true)}
+    />
+  );
+}
+
+EditableCell.propTypes = {
+  value: PropTypes.string,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+};

package/src/i18n/components/I18nRoutes.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Unauthorized } from "@truedat/core/components";
+import { useAuthorized } from "@truedat/core/hooks";
+import { I18N, I18N_MESSAGES, I18N_MESSAGES_NEW } from "@truedat/core/routes";
+import Messages from "./Messages";
+import NewMessage from "./NewMessage";
+
+export const AuthorizedI18nRoutes = () => (
+  <Switch>
+    <Route exact path={I18N_MESSAGES} render={() => <Messages />} />
+    <Route exact path={I18N_MESSAGES_NEW} render={() => <NewMessage />} />
+  </Switch>
+);
+
+export default function I18nRoutes() {
+  const authorized = useAuthorized();
+  return (
+    <Route
+      path={I18N}
+      render={() => (authorized ? <AuthorizedI18nRoutes /> : <Unauthorized />)}
+    />
+  );
+}

package/src/i18n/components/MessageForm.js

@@ -0,0 +1,141 @@
+import _ from "lodash/fp";
+import PropTypes from "prop-types";
+import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { Button, Form, Segment, Header, Loader } from "semantic-ui-react";
+import { HistoryBackButton } from "@truedat/core/components";
+import { useLocales } from "@truedat/core/hooks";
+
+export const LangForm = ({
+  control,
+  lang: { lang, id },
+  errors,
+  formatMessage,
+}) => {
+  return (
+    <Segment>
+      <Header
+        as="h4"
+        content={formatMessage({ id: `i18n.messages.locale.${lang}` })}
+      />
+      <Controller
+        control={control}
+        name={`langs.${id}.definition`}
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "i18n.message.props.definition" }) }
+          ),
+        }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            autoComplete="off"
+            error={_.path(["langs", id, "definition", "message"])(errors)}
+            label={formatMessage({ id: "i18n.message.props.definition" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "i18n.message.form.definition.placeholder",
+            })}
+            value={value || ""}
+            required
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name={`langs.${id}.description`}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            autoComplete="off"
+            label={formatMessage({ id: "i18n.message.props.description" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "i18n.message.form.description.placeholder",
+            })}
+            value={value || ""}
+          />
+        )}
+      />
+    </Segment>
+  );
+};
+
+export const MessageForm = ({ onSubmit, isSubmitting }) => {
+  const { locales, loading } = useLocales();
+  const { formatMessage } = useIntl();
+  const { handleSubmit, control, formState } = useForm({
+    mode: "all",
+    defaultValues: {
+      message_id: "",
+      langs: {},
+    },
+  });
+  const { errors, isDirty, isValid } = formState;
+
+  return loading ? (
+    <Loader />
+  ) : (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="message_id"
+        rules={{
+          required: formatMessage(
+            { id: "form.validation.required" },
+            { prop: formatMessage({ id: "i18n.message.props.messageId" }) }
+          ),
+        }}
+        render={({ field: { onBlur, onChange, value } }) => (
+          <Form.Input
+            autoComplete="off"
+            error={_.path(["message_id", "message"])(errors)}
+            label={formatMessage({ id: "i18n.message.props.messageId" })}
+            onBlur={onBlur}
+            onChange={(_e, { value }) => onChange(value)}
+            placeholder={formatMessage({
+              id: "i18n.message.form.messageId.placeholder",
+            })}
+            value={value || ""}
+            required
+          />
+        )}
+      />
+
+      {locales.map((lang, i) => (
+        <LangForm
+          key={i}
+          control={control}
+          lang={lang}
+          errors={errors}
+          formatMessage={formatMessage}
+        />
+      ))}
+
+      <div className="actions">
+        <Button
+          floated="right"
+          type="submit"
+          primary
+          loading={isSubmitting}
+          disabled={isSubmitting || !isDirty || !isValid}
+          content={formatMessage({ id: "actions.save" })}
+        />
+        <HistoryBackButton
+          content={formatMessage({ id: "actions.cancel" })}
+          disabled={isSubmitting}
+        />
+      </div>
+    </Form>
+  );
+};
+
+MessageForm.propTypes = {
+  message: PropTypes.object,
+  onSubmit: PropTypes.func,
+  isSubmitting: PropTypes.bool,
+};
+
+export default MessageForm;

package/src/i18n/components/Messages.js

@@ -0,0 +1,124 @@
+import _ from "lodash/fp";
+import React, { useState } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import {
+  Button,
+  Header,
+  Divider,
+  Icon,
+  Segment,
+  Dimmer,
+  Loader,
+  Menu,
+} from "semantic-ui-react";
+import { Link } from "react-router-dom";
+import { SearchInput } from "@truedat/core/components";
+import { lowerDeburrTrim } from "@truedat/core/services/sort";
+import { useLocales } from "@truedat/core/hooks";
+import { I18N_MESSAGES_NEW } from "@truedat/core/routes";
+import { Pagination } from "@truedat/core/components";
+import MessagesTable from "./MessagesTable";
+
+const ITEMS_PER_PAGE = 30;
+
+export function MessagesContent({ locales, loading }) {
+  const langs = _.map("lang")(locales);
+  const [selectedLang, setSelectedLang] = useState(_.head(langs));
+  const [page, setPage] = useState(1);
+  const [filter, setFilter] = useState("");
+  const { formatMessage } = useIntl();
+
+  const handleSearch = (_e, data) => {
+    _.flow(_.propOr("", "value"), setFilter)(data);
+    setPage(1);
+  };
+
+  const messages = _.flow(
+    _.find({ lang: selectedLang }),
+    _.prop("messages"),
+    _.filter(({ message_id, definition, description }) => {
+      const deburrFilter = lowerDeburrTrim(filter);
+      return (
+        deburrFilter == "" ||
+        lowerDeburrTrim(message_id).includes(deburrFilter) ||
+        lowerDeburrTrim(definition).includes(deburrFilter) ||
+        lowerDeburrTrim(description).includes(deburrFilter)
+      );
+    })
+  )(locales);
+
+  const totalPages = Math.ceil(messages.length / ITEMS_PER_PAGE);
+  const paginatedMessages = _.flow(
+    _.drop((page - 1) * ITEMS_PER_PAGE),
+    _.take(ITEMS_PER_PAGE)
+  )(messages);
+
+  return (
+    <>
+      <Menu attached="top" secondary pointing tabular>
+        {langs.map((lang, i) => (
+          <Menu.Item
+            key={i}
+            active={lang === selectedLang}
+            onClick={() => setSelectedLang(lang)}
+          >
+            <FormattedMessage id={`i18n.messages.locale.${lang}`} />
+          </Menu.Item>
+        ))}
+      </Menu>
+      <Divider hidden />
+      <SearchInput
+        onChange={handleSearch}
+        placeholder={formatMessage({ id: "i18n.messages.search.placeholder" })}
+        value={filter}
+      />
+      <MessagesTable
+        messages={paginatedMessages}
+        locales={locales}
+        loading={loading}
+      />
+      <Pagination
+        totalPages={totalPages}
+        activePage={page}
+        selectPage={({ activePage }) => setPage(activePage)}
+      />
+    </>
+  );
+}
+
+export default function Messages() {
+  const { formatMessage } = useIntl();
+  const { locales, loading } = useLocales();
+
+  return (
+    <Segment>
+      <Header as="h2">
+        <Icon circular name="language" />
+        <Header.Content>
+          <FormattedMessage id={"i18n.messages.header"} />
+          <Header.Subheader>
+            <FormattedMessage id={"i18n.messages.subheader"} />
+          </Header.Subheader>
+        </Header.Content>
+      </Header>
+      <Segment attached="bottom">
+        <Dimmer.Dimmable dimmed={loading}>
+          <Dimmer active={loading} inverted>
+            <Loader />
+          </Dimmer>
+        </Dimmer.Dimmable>
+        <Button
+          floated="right"
+          primary
+          content={formatMessage({ id: "i18n.actions.createMessage" })}
+          icon="add circle"
+          as={Link}
+          to={I18N_MESSAGES_NEW}
+        />
+        {!loading ? (
+          <MessagesContent locales={locales} loading={loading} />
+        ) : null}
+      </Segment>
+    </Segment>
+  );
+}

package/src/i18n/components/MessagesTable.js

@@ -0,0 +1,86 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { Table, Header, Icon } from "semantic-ui-react";
+import { useMessagePatch } from "@truedat/core/hooks";
+import EditableCell from "./EditableCell";
+
+export const MessageRow = ({ message, formatMessage }) => {
+  const { trigger } = useMessagePatch(message.id);
+
+  const doPatch = (field) => (value) =>
+    trigger({ message: { [field]: value } });
+
+  return (
+    <Table.Row>
+      <Table.Cell width={6} content={message?.message_id} />
+      <EditableCell
+        value={message?.definition}
+        onChange={doPatch("definition")}
+        placeholder={formatMessage({
+          id: "i18n.message.form.definition.placeholder",
+        })}
+      />
+      <EditableCell
+        value={message?.description}
+        onChange={doPatch("description")}
+        placeholder={formatMessage({
+          id: "i18n.message.form.description.placeholder",
+        })}
+      />
+    </Table.Row>
+  );
+};
+
+export const MessagesTable = ({ messages, loading }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      {!_.isEmpty(messages) && (
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell
+                content={formatMessage({ id: "i18n.message.props.messageId" })}
+              />
+              <Table.HeaderCell
+                content={formatMessage({ id: "i18n.message.props.definition" })}
+              />
+              <Table.HeaderCell
+                content={formatMessage({
+                  id: "i18n.message.props.description",
+                })}
+              />
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {messages.map((message) => (
+              <MessageRow
+                key={message.id}
+                message={message}
+                formatMessage={formatMessage}
+              />
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+      {_.isEmpty(messages) && !loading && (
+        <Header as="h4">
+          <Icon name="search" />
+          <Header.Content>
+            {formatMessage({ id: "i18n.messages.empty" })}
+          </Header.Content>
+        </Header>
+      )}
+    </>
+  );
+};
+
+MessagesTable.propTypes = {
+  messages: PropTypes.array,
+  loading: PropTypes.bool,
+};
+
+export default MessagesTable;

package/src/i18n/components/NewMessage.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Breadcrumb, Header, Container, Segment } from "semantic-ui-react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useHistory, Link } from "react-router-dom";
+import { useMessagePost } from "@truedat/core/hooks";
+import { I18N_MESSAGES } from "@truedat/core/routes";
+import MessageForm from "./MessageForm";
+
+const NewMessage = () => {
+  const { formatMessage } = useIntl();
+  const { trigger } = useMessagePost();
+  const history = useHistory();
+
+  const onSubmit = (message) => {
+    trigger({ message });
+    history.push(I18N_MESSAGES);
+  };
+
+  return (
+    <>
+      <Breadcrumb>
+        <Breadcrumb.Section as={Link} to={I18N_MESSAGES} active={false}>
+          <FormattedMessage id="i18n.messages.header" />
+        </Breadcrumb.Section>
+        <Breadcrumb.Divider icon="right angle" />
+        <Breadcrumb.Section active>
+          <FormattedMessage id="i18n.actions.createMessage" />
+        </Breadcrumb.Section>
+      </Breadcrumb>
+      <Container text as={Segment}>
+        <Header
+          as="h2"
+          icon="language"
+          content={formatMessage({ id: "i18n.actions.createMessage" })}
+        />
+        <MessageForm onSubmit={onSubmit} />
+      </Container>
+    </>
+  );
+};
+
+NewMessage.propTypes = {
+  createUser: PropTypes.func,
+};
+
+export default NewMessage;

package/src/i18n/components/__tests__/EditableCell.spec.js

@@ -0,0 +1,54 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import EditableCell from "../EditableCell";
+
+const renderOpts = { messages };
+
+describe("<EditableCell />", () => {
+  const onChange = jest.fn();
+  const value = "value";
+  const placeholder = "placeholder";
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      onChange,
+      value,
+      placeholder,
+    };
+    const { container } = render(<EditableCell {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("clicking the cell will enter edition mode and match snapshot", async () => {
+    const props = {
+      onChange,
+      value,
+      placeholder,
+    };
+    const { container, findByText } = render(
+      <EditableCell {...props} />,
+      renderOpts
+    );
+    userEvent.click(await findByText(value));
+    expect(container).toMatchSnapshot();
+  });
+
+  it("on edition mode edition mode will call onChange on blur", async () => {
+    const props = {
+      onChange,
+      value,
+      placeholder,
+    };
+    const { getByRole, findByText } = render(
+      <EditableCell {...props} />,
+      renderOpts
+    );
+    userEvent.click(await findByText(value));
+
+    userEvent.type(getByRole("textbox", { type: /text/i }), "foo");
+    userEvent.tab(getByRole("textbox", { type: /text/i }));
+    expect(onChange).toHaveBeenCalledWith("valuefoo");
+  });
+});

package/src/i18n/components/__tests__/I18nRoutes.spec.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import I18nRoutes from "../I18nRoutes";
+
+jest.mock("@truedat/core/hooks", () => ({
+  useAuthorized: jest.fn(() => true),
+}));
+
+describe("<I18nRoutes />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<I18nRoutes />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/i18n/components/__tests__/MessageForm.spec.js

@@ -0,0 +1,28 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import MessageForm from "../MessageForm";
+
+const renderOpts = { messages };
+
+jest.mock("@truedat/core/hooks", () => ({
+  useLocales: jest.fn(() => ({
+    loading: false,
+    locales: [{ lang: "es", id: 1 }],
+  })),
+}));
+
+describe("<MessageForm />", () => {
+  const onSubmit = jest.fn();
+  const isSubmitting = false;
+
+  it("matches the latest snapshot", () => {
+    const props = {
+      onSubmit,
+      isSubmitting,
+    };
+    const { container } = render(<MessageForm {...props} />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/i18n/components/__tests__/Messages.spec.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import Messages from "../Messages";
+
+const renderOpts = { messages };
+
+jest.mock("@truedat/core/hooks", () => ({
+  useLocales: jest.fn(() => ({
+    loading: false,
+    locales: [
+      {
+        lang: "es",
+        id: 1,
+        messages: [
+          {
+            message_id: "message_id",
+            definition: "definition",
+            description: "description",
+          },
+        ],
+      },
+    ],
+  })),
+  useMessagePatch: jest.fn(() => ({ trigger: jest.fn() })),
+}));
+
+describe("<Messages />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<Messages />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/i18n/components/__tests__/NewMessage.spec.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { render } from "@truedat/test/render";
+import messages from "@truedat/core/messages";
+import NewMessage from "../NewMessage";
+
+const renderOpts = { messages };
+
+jest.mock("@truedat/core/hooks", () => ({
+  useLocales: jest.fn(() => ({
+    loading: false,
+    locales: [{ lang: "es", id: 1 }],
+  })),
+  useMessagePost: jest.fn(() => ({ trigger: jest.fn() })),
+}));
+
+describe("<NewMessage />", () => {
+  it("matches the latest snapshot", () => {
+    const { container } = render(<NewMessage />, renderOpts);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/i18n/components/__tests__/__snapshots__/EditableCell.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EditableCell /> clicking the cell will enter edition mode and match snapshot 1`] = `
+<div>
+  <td
+    class="five wide no-padding"
+  >
+    <div
+      class="ui fluid input"
+    >
+      <input
+        maxlength="255"
+        placeholder="placeholder"
+        type="text"
+        value="value"
+      />
+    </div>
+  </td>
+</div>
+`;
+
+exports[`<EditableCell /> matches the latest snapshot 1`] = `
+<div>
+  <td
+    class="five wide cursor-pointer"
+  >
+    value
+  </td>
+</div>
+`;

package/src/i18n/components/__tests__/__snapshots__/I18nRoutes.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<I18nRoutes /> matches the latest snapshot 1`] = `<div />`;

package/src/i18n/components/__tests__/__snapshots__/MessageForm.spec.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MessageForm /> matches the latest snapshot 1`] = `
+<div>
+  <form
+    class="ui form"
+  >
+    <div
+      class="required field"
+    >
+      <label>
+        Message ID
+      </label>
+      <div
+        class="ui input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Message ID"
+          required=""
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="ui segment"
+    >
+      <h4
+        class="ui header"
+      >
+        Spanish
+      </h4>
+      <div
+        class="required field"
+      >
+        <label>
+          Definition
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            placeholder="Definition"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          Description
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            placeholder="Description"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="actions"
+    >
+      <button
+        class="ui primary disabled right floated button"
+        disabled=""
+        tabindex="-1"
+        type="submit"
+      >
+        Save
+      </button>
+      <a
+        class="ui secondary button"
+        href="/"
+        role="button"
+      >
+        Cancel
+      </a>
+    </div>
+  </form>
+</div>
+`;

package/src/i18n/components/__tests__/__snapshots__/Messages.spec.js.snap

@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Messages /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="language circular icon"
+      />
+      <div
+        class="content"
+      >
+        Translations
+        <div
+          class="sub header"
+        >
+          Messages used in Truedat
+        </div>
+      </div>
+    </h2>
+    <div
+      class="ui bottom attached segment"
+    >
+      <div
+        class="dimmable"
+      >
+        <div
+          class="ui inverted dimmer"
+        >
+          <div
+            class="content"
+          >
+            <div
+              class="ui loader"
+            />
+          </div>
+        </div>
+      </div>
+      <a
+        class="ui primary right floated button"
+        href="/i18n/messages/new"
+        role="button"
+      >
+        <i
+          aria-hidden="true"
+          class="add circle icon"
+        />
+        Create message
+      </a>
+      <div
+        class="ui pointing secondary top attached tabular menu"
+      >
+        <a
+          class="active item"
+        >
+          Spanish
+        </a>
+      </div>
+      <div
+        class="ui hidden divider"
+      />
+      <div
+        class="ui icon input"
+      >
+        <input
+          placeholder="Search messages"
+          type="text"
+          value=""
+        />
+        <i
+          aria-hidden="true"
+          class="search link icon"
+        />
+      </div>
+      <table
+        class="ui table"
+      >
+        <thead
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <th
+              class=""
+            >
+              Message ID
+            </th>
+            <th
+              class=""
+            >
+              Definition
+            </th>
+            <th
+              class=""
+            >
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class="six wide"
+            >
+              message_id
+            </td>
+            <td
+              class="five wide cursor-pointer"
+            >
+              definition
+            </td>
+            <td
+              class="five wide cursor-pointer"
+            >
+              description
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        aria-label="Pagination Navigation"
+        class="ui pagination menu"
+        role="navigation"
+      >
+        <a
+          aria-current="false"
+          aria-disabled="true"
+          aria-label="First item"
+          class="disabled item"
+          tabindex="-1"
+          type="firstItem"
+          value="1"
+        >
+          «
+        </a>
+        <a
+          aria-current="false"
+          aria-disabled="true"
+          aria-label="Previous item"
+          class="disabled item"
+          tabindex="-1"
+          type="prevItem"
+          value="1"
+        >
+          ⟨
+        </a>
+        <a
+          aria-current="true"
+          aria-disabled="true"
+          class="active disabled item"
+          tabindex="-1"
+          type="pageItem"
+          value="1"
+        >
+          1
+        </a>
+        <a
+          aria-current="false"
+          aria-disabled="true"
+          aria-label="Next item"
+          class="disabled item"
+          tabindex="-1"
+          type="nextItem"
+          value="1"
+        >
+          ⟩
+        </a>
+        <a
+          aria-current="false"
+          aria-disabled="true"
+          aria-label="Last item"
+          class="disabled item"
+          tabindex="-1"
+          type="lastItem"
+          value="1"
+        >
+          »
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/i18n/components/__tests__/__snapshots__/NewMessage.spec.js.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NewMessage /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui breadcrumb"
+  >
+    <a
+      class="section"
+      href="/i18n/messages"
+    >
+      Translations
+    </a>
+    <i
+      aria-hidden="true"
+      class="right angle icon divider"
+    />
+    <div
+      class="active section"
+    >
+      Create message
+    </div>
+  </div>
+  <div
+    class="ui segment ui text container"
+  >
+    <h2
+      class="ui header"
+    >
+      <i
+        aria-hidden="true"
+        class="language icon"
+      />
+      <div
+        class="content"
+      >
+        Create message
+      </div>
+    </h2>
+    <form
+      class="ui form"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          Message ID
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            autocomplete="off"
+            placeholder="Message ID"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="ui segment"
+      >
+        <h4
+          class="ui header"
+        >
+          Spanish
+        </h4>
+        <div
+          class="required field"
+        >
+          <label>
+            Definition
+          </label>
+          <div
+            class="ui input"
+          >
+            <input
+              autocomplete="off"
+              placeholder="Definition"
+              required=""
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+        <div
+          class="field"
+        >
+          <label>
+            Description
+          </label>
+          <div
+            class="ui input"
+          >
+            <input
+              autocomplete="off"
+              placeholder="Description"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="actions"
+      >
+        <button
+          class="ui primary disabled right floated button"
+          disabled=""
+          tabindex="-1"
+          type="submit"
+        >
+          Save
+        </button>
+        <a
+          class="ui secondary button"
+          href="/"
+          role="button"
+        >
+          Cancel
+        </a>
+      </div>
+    </form>
+  </div>
+</div>
+`;

package/src/i18n/components/index.js

@@ -0,0 +1,3 @@
+import I18nRoutes from "./I18nRoutes";
+
+export { I18nRoutes };

package/src/messages/en.js

@@ -56,6 +56,23 @@ export default {
   "form.validation.required": "{prop} is required",
   "form.validation.minLength": "{prop} must have at least {value} characters",
   "form.validation.email.invalid": "Invalid email address",
+
+  "i18n.actions.createMessage": "Create message",
+
+  "i18n.message.form.messageId.placeholder": "Message ID",
+  "i18n.message.form.definition.placeholder": "Definition",
+  "i18n.message.form.description.placeholder": "Description",
+  "i18n.message.props.messageId": "Message ID",
+  "i18n.message.props.definition": "Definition",
+  "i18n.message.props.description": "Description",
+
+  "i18n.messages.header": "Translations",
+  "i18n.messages.subheader": "Messages used in Truedat",
+  "i18n.messages.empty": "No messages",
+  "i18n.messages.locale.es": "Spanish",
+  "i18n.messages.locale.en": "English",
+  "i18n.messages.search.placeholder": "Search messages",
+
   "navigation.dashboard": "Dashboard",
   "navigation.menu": "Menu",
   "search.applied_filters": "Filters:",
@@ -91,6 +108,7 @@ export default {
   "sidemenu.grant_requests": "Grant Requests",
   "sidemenu.grants": "Grants",
   "sidemenu.hide": "Collapse sidebar",
+  "sidemenu.i18nMessages": "Translations",
   "sidemenu.implementations": "Implementations",
   "sidemenu.implementations_management": "Drafts",
   "sidemenu.implementations_deprecated": "Deprecated",

package/src/messages/es.js

@@ -56,6 +56,23 @@ export default {
   "form.validation.required": "{prop} es un campo requerido",
   "form.validation.minLength": "{prop} debe tener al menos {value} elementos",
   "form.validation.email.invalid": "Dirección de email inválida",
+
+  "i18n.actions.createMessage": "Crear mensaje",
+
+  "i18n.message.form.messageId.placeholder": "Id del mensaje",
+  "i18n.message.form.definition.placeholder": "Definición",
+  "i18n.message.form.description.placeholder": "Descripción",
+  "i18n.message.props.messageId": "Id del mensaje",
+  "i18n.message.props.definition": "Definición",
+  "i18n.message.props.description": "Descripción",
+
+  "i18n.messages.header": "Traducciones",
+  "i18n.messages.subheader": "Mensajes utilizados en Truedat",
+  "i18n.messages.empty": "No hay mensajes",
+  "i18n.messages.locale.es": "Español",
+  "i18n.messages.locale.en": "Inglés",
+  "i18n.messages.search.placeholder": "Buscar mensajes",
+
   loading: "cargando...",
   "navigation.dashboard": "Dashboard",
   "navigation.menu": "Menú",
@@ -94,6 +111,7 @@ export default {
   "sidemenu.grant_requests": "Peticiones de Accesos",
   "sidemenu.grants": "Accesos",
   "sidemenu.hide": "Ocultar",
+  "sidemenu.i18nMessages": "Traducciones",
   "sidemenu.implementations": "Implementaciones",
   "sidemenu.implementations_management": "Borradores",
   "sidemenu.implementations_deprecated": "Archivadas",

package/src/routes.js

@@ -62,6 +62,9 @@ export const GROUP = "/groups/:id";
 export const GROUPS = "/groups";
 export const GROUP_CREATE = "/groups/new";
 export const GROUP_EDIT = "/groups/:id/edit";
+export const I18N = "/i18n";
+export const I18N_MESSAGES = "/i18n/messages";
+export const I18N_MESSAGES_NEW = "/i18n/messages/new";
 export const IMPLEMENTATION = "/implementations/:implementation_id(\\d+)";
 export const IMPLEMENTATIONS = "/implementations";
 export const IMPLEMENTATIONS_DEPRECATED = "/deprecatedImplementations";
@@ -258,6 +261,9 @@ const routes = {
   GROUPS,
   GROUP_CREATE,
   GROUP_EDIT,
+  I18N,
+  I18N_MESSAGES,
+  I18N_MESSAGES_NEW,
   IMPLEMENTATION,
   IMPLEMENTATIONS,
   IMPLEMENTATIONS_DEPRECATED,