Fix breadcrumb link of metadata (#222)

* Fix breadcrumb link of metadata

* Added middleware for redirect

* Added changeset

* Removed app from changeset

* Redirect instead of rewrite

---------

Co-authored-by: René Dohmen <[email protected]>

Author: Georgi2704

.changeset/fresh-pets-eat.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+Fixed handling navigation for pages with sidebar submenu items

apps/wfo-ui/middleware.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+    return NextResponse.redirect(new URL('/metadata/products', request.url));
+}
+
+// Supports both a single string value or an array of matchers
+export const config = {
+    matcher: ['/metadata'],
+};

apps/wfo-ui/pages/_app.tsx

@@ -10,7 +10,6 @@ import {
     OrchestratorConfig,
     OrchestratorConfigProvider,
     WFOPageTemplate,
-    WFOBreadcrumbs,
 } from '@orchestrator-ui/orchestrator-ui-components';
 
 import '@elastic/eui/dist/eui_theme_light.min.css';
@@ -80,7 +79,6 @@ function CustomApp({ Component, pageProps }: AppProps) {
                                         enableBatching: true,
                                     }}
                                 >
-                                    <WFOBreadcrumbs />
                                     <Component {...pageProps} />
                                 </QueryParamProvider>
                             </WFOPageTemplate>

packages/orchestrator-ui-components/src/components/WFOBreadcrumbs/WFOBreadcrumbs.tsx renamed to packages/orchestrator-ui-components/src/components/WFOPageTemplate/WFOBreadcrumbs/WFOBreadcrumbs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EuiBreadcrumb, EuiBreadcrumbs, EuiSpacer } from '@elastic/eui';
 import { useRouter } from 'next/router';
-import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../utils';
+import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../../utils';
 
 export const WFOBreadcrumbs = () => {
     const router = useRouter();

packages/orchestrator-ui-components/src/components/WFOBreadcrumbs/index.ts renamed to packages/orchestrator-ui-components/src/components/WFOPageTemplate/WFOBreadcrumbs/index.ts

@@ -3,6 +3,7 @@ import { EuiPageTemplate } from '@elastic/eui';
 import { WFOPageHeader } from '../WFOPageHeader';
 import { WFOSidebar } from '../WFOSidebar';
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
+import { WFOBreadcrumbs } from '../WFOBreadcrumbs';
 
 export interface WFOPageTemplateProps {
     getAppLogo: (navigationHeight: number) => ReactElement;
@@ -50,6 +51,7 @@ export const WFOPageTemplate: FC<WFOPageTemplateProps> = ({
                         backgroundColor: theme.colors.emptyShade,
                     }}
                 >
+                    <WFOBreadcrumbs />
                     {children}
                 </EuiPageTemplate.Section>
             </EuiPageTemplate>

packages/orchestrator-ui-components/src/components/WFOPageTemplate/WFOPageTemplate/WFOPageTemplate.tsx

@@ -1,17 +1,19 @@
 import React, { FC } from 'react';
 import { EuiButton, EuiSideNav, EuiSpacer } from '@elastic/eui';
 import { useRouter } from 'next/router';
-
-const PATH_START = '/';
-const PATH_NEW_PROCESS = '/new-process';
-const PATH_PROCESSES = '/processes';
-const PATH_SUBSCRIPTIONS = '/subscriptions';
-const PATH_METADATA_PRODUCTS = '/metadata/products';
-const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';
-const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
-const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
-const PATH_TASKS = '/tasks';
-const PATH_SETTINGS = '/settings';
+import {
+    PATH_METADATA,
+    PATH_METADATA_PRODUCT_BLOCKS,
+    PATH_METADATA_PRODUCTS,
+    PATH_METADATA_RESOURCE_TYPES,
+    PATH_METADATA_WORKFLOWS,
+    PATH_NEW_PROCESS,
+    PATH_PROCESSES,
+    PATH_SETTINGS,
+    PATH_START,
+    PATH_SUBSCRIPTIONS,
+    PATH_TASKS,
+} from '../paths';
 
 export const WFOSidebar: FC = () => {
     const router = useRouter();
@@ -78,7 +80,7 @@ export const WFOSidebar: FC = () => {
                             name: 'Metadata',
                             id: '5',
                             onClick: () => {
-                                router.push(PATH_METADATA_PRODUCTS);
+                                router.push(PATH_METADATA);
                             },
                             items: [
                                 {

packages/orchestrator-ui-components/src/components/WFOPageTemplate/WFOSidebar/WFOSidebar.tsx

@@ -1,3 +1,4 @@
 export * from './WFOPageHeader';
 export * from './WFOPageTemplate';
 export * from './WFOSidebar';
+export * from './paths';

packages/orchestrator-ui-components/src/components/WFOPageTemplate/index.ts

@@ -0,0 +1,11 @@
+export const PATH_START = '/';
+export const PATH_NEW_PROCESS = '/new-process';
+export const PATH_PROCESSES = '/processes';
+export const PATH_SUBSCRIPTIONS = '/subscriptions';
+export const PATH_METADATA = '/metadata';
+export const PATH_METADATA_PRODUCTS = '/metadata/products';
+export const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';
+export const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
+export const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
+export const PATH_TASKS = '/tasks';
+export const PATH_SETTINGS = '/settings';

packages/orchestrator-ui-components/src/components/WFOPageTemplate/paths.ts

@@ -1,5 +1,5 @@
 export * from './WFOBadges';
-export * from './WFOBreadcrumbs';
+export * from './WFOPageTemplate/WFOBreadcrumbs';
 export * from './WFOFilterTabs';
 export * from './WFOPageTemplate';
 export * from './WFOSearchBar';