Skip to content
Snippets Groups Projects
Commit 2c7592ac authored by Mohammad Torkashvand's avatar Mohammad Torkashvand
Browse files

add new gui 2 structure

parent 69bf36a3
No related branches found
No related tags found
1 merge request!20New GUI V2 structure
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { PATH_WORKFLOWS } from '@orchestrator-ui/orchestrator-ui-components';
const IndexPage = () => {
const router = useRouter();
useEffect(() => {
router.push(PATH_WORKFLOWS);
}, [router]);
return null;
};
export default IndexPage;
public/favicon.png

842 B

## Adding or overriding translations
The standard Wfo component library has translations included, they can be found in messages folder of the @orchestrator-ui/orchestrator-ui-components library. The translations that are provided in this folder (wfo-ui/translations) are merged into these standard translations, this allows for adding to and overriding of the standard translations with the custom ones provided.
Overriding happens on a per key basis
_example_
The standard library in en-GB.json provides
```
{
metadata: {
product: {
name: 'Name',
description: 'Description'
}
}
}
```
A file in this folder with the same locale 'en-GB.json' provides
```
{
metadata: {
product: {
name: 'A better name'
}
}
}
```
The resulting translation keys and messages that are used is
```
{
metadata: {
product: {
name: 'A better name',
description: 'Description'
}
}
}
```
{}
{}
import React from 'react';
import type { ReactNode } from 'react';
import { merge } from 'lodash';
import { IntlErrorCode, IntlProvider } from 'next-intl';
import { useRouter } from 'next/router';
import {
Locale,
useGetTranslationMessages,
} from '@orchestrator-ui/orchestrator-ui-components';
import enGB from './en-GB.json';
import nlNL from './nl-NL.json';
interface TranslationsProviderProps {
children: ReactNode;
}
export const TranslationsProvider = ({
children,
}: TranslationsProviderProps) => {
const { locale } = useRouter();
const standardMessages = useGetTranslationMessages(locale);
const getCustomMessages = () => {
switch (locale) {
case Locale.enGB:
return enGB;
case Locale.nlNL:
return nlNL;
default:
return enGB;
}
};
const onError = (error: { code: IntlErrorCode }) => {
if (
error &&
error.code &&
error.code !== IntlErrorCode.MISSING_MESSAGE &&
error.code !== IntlErrorCode.INSUFFICIENT_PATH
) {
// Missing translations are expected and normal in the context of the
// forms module (see UserInputForm.tsx) so we silently discard them
// TODO: Think of a place to better log missing translations keys that shouldn't be missing
console.error(error);
}
};
const messages = merge(standardMessages, getCustomMessages());
return (
<IntlProvider
locale={locale || Locale.enGB}
messages={messages}
onError={onError}
>
{children}
</IntlProvider>
);
};
{
"extends": "@orchestrator-ui/tsconfig/nextjs.json",
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
},
"plugins": [
{
"name": "next"
}
],
"strictNullChecks": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment