@rhoas/app-services-ui-components contains a number of components for the Managed Application Services UI.
npm install @rhoas/app-services-ui-components> @rhoas/app-services-ui-components contains a number of components for the Managed Application Services UI.
 
The project is documented using Storybook, published on GitHub Pages.
``tsx
import { Something } from '@rhoas/app-services-ui-components';
`
With npm installed, add the package to your peer and development dependencies.
`bash
$ npm install --save-dev --save-peer --save-exact @rhoas/app-services-ui-components
`
It's not recommended installing the package as a direct dependency to avoid having it bundled in your project's bundle.
Finally, make sure to list the dependency as a shared singleton in your federated
module section on the Webpack's config file.
Be sure to enable the singleton option in order to have the internationalization
layer work correctly.
`js
// webpack.js
const { dependencies, peerDependencies } = require('./package.json');
module.exports = () => {
return {
// ...
plugins: [
// other plugins
new webpack.container.ModuleFederationPlugin({
name: 'my-module',
filename: 'my-module.js',
exposes: {
'./MyModule': './src/MyModule',
},
shared: {
...dependencies,
...peerDependencies,
react: {
eager: true,
singleton: true,
requiredVersion: peerDependencies['react'],
},
'react-dom': {
eager: true,
singleton: true,
requiredVersion: peerDependencies['react-dom'],
},
'react-router-dom': {
singleton: true,
requiredVersion: peerDependencies['react-router-dom'],
},
'@rhoas/app-services-ui-components': {
singleton: true,
requiredVersion: peerDependencies['@rhoas/app-services-ui-components'],
},
'@rhoas/app-services-ui-shared': {
singleton: true,
requiredVersion: peerDependencies['@rhoas/app-services-ui-shared'],
},
'@patternfly/quickstarts': {
singleton: true,
requiredVersion: '*',
},
},
})
]
};
}
`
. You can translate strings by using one of the methods provided by
react-18next, like the useTranslation hook.To make life easier when developing a new Managed Application Services UI or when writing unit tests that also cover translations, the whole
react-i18next library is re-exported by @rhoas/app-services-ui-components.You can translate your content without directly including
react-i18next as a direct dependency of your project by doing:`tsx
import { useTranslation } from '@rhoas/app-services-ui-components';const MyComponent = () => {
const { t } = useTranslation();
return {t('common:status')}
}
`Refer to the
react-i18next documentation for more information.Optional: set up the shared context providers
> This step is required only if you want to run your application without
> the
app-services-ui dev server. Never place the following code in components
> you make available as a federated module!`tsx
// App.tsximport { VoidFunctionComponent } from "react";
import { I18nProvider, ModalProvider } from "@rhoas/app-services-ui-components";
const App: VoidFunctionComponent = () => (
lng={'en'}
resources={{
en: {
common: () => import('@rhoas/app-services-ui-components/locales/en/common.json'),
'create-kafka-instance': () => import('@rhoas/app-services-ui-components/locales/en/create-kafka-instance.json'),
kafka: () => import('@rhoas/app-services-ui-components/locales/en/kafka.json'),
metrics: () => import('@rhoas/app-services-ui-components/locales/en/metrics.json'),
overview: () => import('@rhoas/app-services-ui-components/locales/en/overview.json'),
datascienceoverview: () => import('@rhoas/app-services-ui-components/locales/en/datascienceoverview.json'),
kafkaoverview: () => import('@rhoas/app-services-ui-components/locales/en/kafkaoverview.json'),
topic: () => import("../locales/en/topic.json"),
apimgmtoverview: () => import('@rhoas/app-services-ui-components/locales/en/apimgmtoverview.json'),
"manage-kafka-permissions": () => import("@rhoas/app-services-ui-components/locales/en/manage-kafka-permissions.json"),},
}}
debug={true}
>
my app goes here
);
`See Also
redhat-developer/app-services-ui Managed Application Services main UI
- redhat-developer/kas-ui Control Plane UI (list Kafka instances, create Kafka instances)
- redhat-developer/kafka-ui Data Plane UI (details about a Kafka instance: metrics, topics, ACLs, etc.)
- redhat-developer/srs-ui Service Registry UI
- redhat-developer/cos-ui` Managed Connectors UI