How to use the @webiny/app/i18n.i18n.ns function in @webiny/app

// @flow
import React from "react";
import { ReactComponent as I18NIcon } from "./../assets/icons/round-translate-24px.svg";
import { hasRoles } from "@webiny/app-security";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-forms/admin/menus");

export default [
    {
        type: "menu",
        name: "menu-languages",
        render({ Menu, Section, Item }: Object) {
            const { locales }: Object = (hasRoles({
                locales: ["i18n-locales"]
            }): any);

            if (locales) {
                return (
                    <menu label="{t`Languages`}" name="languages">}&gt;
                        {locales &amp;&amp; (
                            <section label="{t`Locales`}">
                                {locales &amp;&amp; }</section></menu>

// @flow
import { useUi } from "@webiny/app/hooks/useUi";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-admin/hooks/use-confirmation-dialog");

const useConfirmationDialog = ({ title, message }) => {
    const ui = useUi();

    return {
        showConfirmation: (onAccept, onCancel) => {
            ui.setState(ui => {
                return {
                    ...ui,
                    dialog: {
                        message,
                        options: {
                            title,
                            actions: {
                                accept: {
                                    label: t`Confirm`,

import { useDialog } from "@webiny/app-admin/hooks/useDialog";
import { useDataList } from "@webiny/app/hooks/useDataList";
import useReactRouter from "use-react-router";
import { getData, getError } from "./functions";
import { get } from "lodash";
import { i18n } from "@webiny/app/i18n";

type Props = {
    create?: {},
    read?: {},
    list?: {},
    update?: {},
    delete?: {}
};

const t = i18n.ns("app-admin/contexts");

export const CrudContext = React.createContext();

export const CrudProvider = ({ children, ...props }: Props) => {
    const { showSnackbar } = useSnackbar();
    const { showDialog } = useDialog();
    const { location, history } = useReactRouter();

    const list = useDataList({
        name: "dataList", // TODO: ???
        query: get(props, "list.query", props.list),
        variables: get(props, "list.variables"),
        // "useDataList" will know how to handle no-handler-provided situations.
        getData: get(props, "list.getData"),
        getMeta: get(props, "list.getMeta"),
        getError: get(props, "list.getError")

// @flow
import React from "react";
import { ReactComponent as PagesIcon } from "@webiny/app-page-builder/admin/assets/round-ballot-24px.svg";
import { hasRoles } from "@webiny/app-security";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-forms/admin/menus");
import { getPlugins } from "@webiny/plugins";

export default [
    {
        type: "menu",
        name: "menu-content",
        render({ Menu, Section, Item }: Object) {
            const { menus, categories, editor }: Object = (hasRoles({
                menus: ["pb-menus"],
                categories: ["pb-categories"],
                editor: ["pb-editor"]
            }): any);

            if (menus || categories || editor) {
                const additionalSectionPlugins = getPlugins("menu-content-section");
                return (

import React from "react";
import Auth from "@aws-amplify/auth";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input } from "@webiny/ui/Input";
import { validation } from "@webiny/validation";
import { i18n } from "@webiny/app/i18n";
import Authentication from "./components/Authentication";

const t1 = i18n.ns("app-plugin-security-cognito/users/form");
const t2 = i18n.ns("app-plugin-security-cognito/users/account");

export default config => {
    // Configure Amplify Auth
    Auth.configure(config);

    return {
        name: "security-authentication-provider-cognito",
        type: "security-authentication-provider",
        securityProviderHook({ onIdToken }) {
            const renderAuthentication = () => {
                return ;
            };

            const logout = async () => {
                await Auth.signOut();

import getFileTypePlugin from "./getFileTypePlugin";
import get from "lodash.get";
import Tags from "./FileDetails/Tags";
import Name from "./FileDetails/Name";
import { Tooltip } from "@webiny/ui/Tooltip";
import { useHotkeys } from "react-hotkeyz";
import { ReactComponent as DownloadIcon } from "./icons/round-cloud_download-24px.svg";
import { ReactComponent as DeleteIcon } from "./icons/delete.svg";
import TimeAgo from "timeago-react";
import { useFileManager } from "./FileManagerContext";
import { useMutation } from "react-apollo";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import { ConfirmationDialog } from "@webiny/ui/ConfirmationDialog";
import { DELETE_FILE } from "./graphql";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-admin/file-manager/file-details");

const style = {
    wrapper: css({
        padding: 10,
        height: "100%",
        overflow: "auto"
    }),
    header: css({
        textAlign: "center",
        fontSize: 18,
        padding: 10,
        fontWeight: "600",
        color: "var(--mdc-theme-on-surface)"
    }),
    preview: css({
        backgroundColor: "var(--mdc-theme-background)",

import { ButtonPrimary } from "@webiny/ui/Button";
import { MultiAutoComplete } from "@webiny/ui/AutoComplete";
import { CircularProgress } from "@webiny/ui/Progress";
import { useQuery } from "react-apollo";
import { useCrud } from "@webiny/app-admin/hooks/useCrud";
import { validation } from "@webiny/validation";
import { get } from "lodash";
import { LIST_SCOPES } from "./graphql";
import {
    SimpleForm,
    SimpleFormFooter,
    SimpleFormContent,
    SimpleFormHeader
} from "@webiny/app-admin/components/SimpleForm";

const t = i18n.ns("app-security/admin/roles/form");

const RoleForm = () => {
    const scopesQuery = useQuery(LIST_SCOPES);
    const scopes = get(scopesQuery, "data.security.scopes") || [];
    const { form: crudForm } = useCrud();

    return (
        <form>
            {({ data, form, Bind }) =&gt; (
                
                    {crudForm.loading &amp;&amp; }
                    
                    
                        
                            
                                </form>

import { i18n } from "@webiny/app/i18n";
import { Form } from "@webiny/form";
import { Alert } from "@webiny/ui/Alert";
import { Grid, Cell } from "@webiny/ui/Grid";
import { ButtonPrimary } from "@webiny/ui/Button";
import LocaleCodesAutoComplete from "@webiny/app-i18n/admin/views/I18NLocales/LocaleCodesAutoComplete";
import { CircularProgress } from "@webiny/ui/Progress";
import { validation } from "@webiny/validation";
import {
    SimpleForm,
    SimpleFormHeader,
    SimpleFormFooter,
    SimpleFormContent
} from "@webiny/app-admin/components/SimpleForm";

const t = i18n.ns("app-i18n/admin/installation");

const IS_INSTALLED = gql`
    {
        i18n {
            isInstalled {
                data
                error {
                    code
                    message
                }
            }
        }
    }
`;

const INSTALL = gql`

import { Input } from "@webiny/ui/Input";
import { Select } from "@webiny/ui/Select";
import { ButtonPrimary } from "@webiny/ui/Button";
import { usePageBuilder } from "@webiny/app-page-builder/hooks/usePageBuilder";
import {
    SimpleForm,
    SimpleFormHeader,
    SimpleFormFooter,
    SimpleFormContent
} from "@webiny/app-admin/components/SimpleForm";
import { categoryUrlValidator } from "./validators";
import { CircularProgress } from "@webiny/ui/Progress";
import { validation } from "@webiny/validation";
import { useCrud } from "@webiny/app-admin/hooks/useCrud";

const t = i18n.ns("app-page-builder/admin/categories/form");

const CategoriesForm = () => {
    const { theme } = usePageBuilder();
    const { form: crudForm } = useCrud();

    return (
        <form>
            {({ data, form, Bind }) =&gt; (
                
                    {crudForm.loading &amp;&amp; }
                    
                    
                        
                            
                                
                                    <input label="{t`Name`}"></form>

import getFileUploader from "./getFileUploader";
import outputFileSelectionError from "./outputFileSelectionError";
import DropFilesHere from "./DropFilesHere";
import NoResults from "./NoResults";
import FileDetails from "./FileDetails";
import LeftSidebar from "./LeftSidebar";
import BottomInfoBar from "./BottomInfoBar";
import { OverlayLayout } from "@webiny/app-admin/components/OverlayLayout";
import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
import { Scrollbar } from "@webiny/ui/Scrollbar";
import { css } from "emotion";
import styled from "@emotion/styled";
import { useHotkeys } from "react-hotkeyz";
import { useFileManager } from "./FileManagerContext";
import { i18n } from "@webiny/app/i18n";
const t = i18n.ns("app-admin/file-manager/file-manager-view");

import { ReactComponent as SearchIcon } from "./icons/round-search-24px.svg";
import { ReactComponent as UploadIcon } from "./icons/round-cloud_upload-24px.svg";

const style = {
    draggingFeedback: css({
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        opacity: 0.5,
        background: "white",
        zIndex: 100
    }),
    leftDrawer: {