unified UI thing

web/src/components/AppLoader.tsx

@@ -5,6 +5,7 @@ import { IconAlertCircle } from '@tabler/icons-react';
 import Breadcrumbs from './Breadcrumbs';
 
 const DemoApp = React.lazy(() => import('demo/App'));
+const KMSApp = React.lazy(() => import('kms/App'));
 
 const AppLoader: React.FC = () => {
   const { appName } = useParams<{ appName: string }>();
@@ -37,6 +38,12 @@ const AppLoader: React.FC = () => {
             <DemoApp />
           </Suspense>
         );
+      case 'kms':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <KMSApp />
+          </Suspense>
+        );
       default:
         return (
           <ErrorFallback 

web/src/components/Navigation.tsx

@@ -7,6 +7,7 @@ import {
   IconDashboard,
   IconChartLine,
   IconStar,
+  IconKey,
 } from '@tabler/icons-react';
 
 const Navigation: React.FC = () => {
@@ -37,6 +38,11 @@ const Navigation: React.FC = () => {
       icon: IconDashboard,
       path: '/app/demo',
     },
+    {
+      label: 'Key Management',
+      icon: IconKey,
+      path: '/app/kms',
+    },
     {
       label: 'Analytics',
       icon: IconChartLine,

web/webpack.config.js

@@ -46,6 +46,7 @@ module.exports = {
       name: 'shell',
       remotes: {
         demo: 'demo@http://localhost:3001/remoteEntry.js',
+        kms: 'kms@http://localhost:3002/remoteEntry.js',
       },
       shared: {
         react: {