From 98481691fbae7d2cf1bc355205c2e724731ba803 Mon Sep 17 00:00:00 2001
From: Jong Eun Lee <jongeun@lablup.com>
Date: Wed, 13 Nov 2024 15:37:04 +0800
Subject: [PATCH] feat: Global breadcrumb

---
 .../src/components/MainLayout/MainLayout.tsx  | 35 ++-----
 react/src/components/WebUIBreadcrumb.tsx      | 99 +++++++++++++++++++
 2 files changed, 107 insertions(+), 27 deletions(-)
 create mode 100644 react/src/components/WebUIBreadcrumb.tsx

diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
index c161e72b25..ed37646318 100644
--- a/react/src/components/MainLayout/MainLayout.tsx
+++ b/react/src/components/MainLayout/MainLayout.tsx
@@ -9,6 +9,7 @@ import ForceTOTPChecker from '../ForceTOTPChecker';
 import NetworkStatusBanner from '../NetworkStatusBanner';
 import PasswordChangeRequestAlert from '../PasswordChangeRequestAlert';
 import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
+import WebUIBreadcrumb from '../WebUIBreadcrumb';
 import WebUIHeader from './WebUIHeader';
 import WebUISider from './WebUISider';
 import { App, Layout, theme } from 'antd';
@@ -177,33 +178,6 @@ function MainLayout() {
                   />
                 </div>
               </Suspense>
-              {/* <Flex direction="column"> */}
-
-              {/* TODO: Breadcrumb */}
-              {/* {location.pathname.split("/").length > 3 && (
-            <Breadcrumb
-              items={matches.map((match, index) => {
-                return {
-                  key: match.id,
-                  href:
-                    _.last(matches) === match
-                      ? undefined
-                      : // @ts-ignore
-                        match?.handle?.altPath || match.pathname,
-                  //@ts-ignore
-                  title: match?.handle?.title,
-                  onClick:
-                    _.last(matches) === match
-                      ? undefined
-                      : (e) => {
-                          e.preventDefault();
-                          // @ts-ignore
-                          navigate(match?.handle?.altPath || match.pathname);
-                        },
-                };
-              })}
-            />
-          )} */}
               <Suspense>
                 <PasswordChangeRequestAlert
                   showIcon
@@ -217,6 +191,13 @@ function MainLayout() {
                 <ForceTOTPChecker />
               </Suspense>
               <Suspense>
+                <WebUIBreadcrumb
+                  style={{
+                    marginBottom: token.marginMD,
+                    marginLeft: token.paddingContentHorizontalLG * -1,
+                    marginRight: token.paddingContentHorizontalLG * -1,
+                  }}
+                />
                 <Outlet />
               </Suspense>
               {/* To match paddig to 16 (2+14) */}
diff --git a/react/src/components/WebUIBreadcrumb.tsx b/react/src/components/WebUIBreadcrumb.tsx
new file mode 100644
index 0000000000..82909ad13a
--- /dev/null
+++ b/react/src/components/WebUIBreadcrumb.tsx
@@ -0,0 +1,99 @@
+import Flex, { FlexProps } from './Flex';
+import WebUILink from './WebUILink';
+import { Breadcrumb, theme } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMatches } from 'react-router-dom';
+
+interface WebUIBreadcrumbProps extends FlexProps {}
+const WebUIBreadcrumb: React.FC<WebUIBreadcrumbProps> = (props) => {
+  // const location = useLocation();
+  const matches = useMatches();
+  // matches[0].handle.
+
+  const { token } = theme.useToken();
+
+  const { t } = useTranslation();
+  return (
+    <Flex
+      direction="column"
+      justify="center"
+      align="stretch"
+      {...props}
+      style={_.merge(
+        {
+          height: 40,
+          paddingLeft: token.paddingContentHorizontalLG,
+          borderBottom: `1px solid ${token.colorBorder}`,
+        } as React.CSSProperties,
+        props.style,
+      )}
+    >
+      <Breadcrumb
+        style={{
+          fontSize: token.fontSizeSM,
+          // lineHeight: he,
+        }}
+        items={[
+          ..._.chain(matches)
+            .filter((match) => {
+              return (
+                // @ts-ignore
+                !_.isEmpty(match?.handle?.labelKey) ||
+                // @ts-ignore
+                !_.isEmpty(match?.handle?.title)
+              );
+            })
+            .map((match, index) => {
+              return {
+                key: match.id,
+                href:
+                  _.last(matches) === match
+                    ? undefined
+                    : // @ts-ignore
+                      match?.handle?.altPath || match.pathname,
+                //@ts-ignore
+                title: match?.handle?.title || t(match?.handle?.labelKey),
+                // onClick:
+                //   _.last(matches) === match
+                //     ? undefined
+                //     : (e: any) => {
+                //         e.preventDefault();
+                //         // @ts-ignore
+                //         navigate(match?.handle?.altPath || match.pathname);
+                // },
+              };
+            })
+            .value(),
+          {
+            // Add dummy tail to add a `/` at the end of the breadcrumb
+            key: 'dummy_tail',
+            title: ' ',
+          },
+        ]}
+        itemRender={(currentRoute, params, items, paths) => {
+          const isLast =
+            currentRoute?.key === items[items.length - 2]?.key ||
+            currentRoute?.key === 'dummy_tail';
+          return isLast || !currentRoute.href ? (
+            <span>{currentRoute.title}</span>
+          ) : (
+            <WebUILink
+              to={currentRoute.href}
+              style={{
+                margin: 0,
+                padding: 0,
+                height: 'unset'
+              }}
+            >
+              {currentRoute.title}
+            </WebUILink>
+          );
+        }}
+      />
+    </Flex>
+  );
+};
+
+export default WebUIBreadcrumb;