Show current tab in breadcrumbs

Author: synzen

services/backend-api/client/src/pages/ConnectionDiscordChannelSettings.tsx

@@ -54,6 +54,7 @@ import {
 } from "../contexts/PageAlertContext";
 import { TabContentContainer } from "../components/TabContentContainer";
 import { FeedDiscordChannelConnection } from "../types";
+import { UserFeedTabSearchParam } from "../constants/userFeedTabSearchParam";
 
 const tabIndexBySearchParam = new Map<string, number>([
   [UserFeedConnectionTabSearchParam.Message, 0],
@@ -173,6 +174,17 @@ const ConnectionDiscordChannelSettingsInner: React.FC = () => {
                         {feed?.title}
                       </BreadcrumbLink>
                     </BreadcrumbItem>
+                    <BreadcrumbItem>
+                      <BreadcrumbLink
+                        as={RouterLink}
+                        to={pages.userFeed(feedId as string, {
+                          tab: UserFeedTabSearchParam.Connections,
+                        })}
+                        color="blue.300"
+                      >
+                        Connections
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
                     <BreadcrumbItem isCurrentPage>
                       <BreadcrumbLink href="#">{connection?.name}</BreadcrumbLink>
                     </BreadcrumbItem>

services/backend-api/client/src/pages/UserFeed.tsx

@@ -97,9 +97,17 @@ import { TabContentContainer } from "../components/TabContentContainer";
 const tabIndexBySearchParam = new Map<string, number>([
   [UserFeedTabSearchParam.Connections, 0],
   [UserFeedTabSearchParam.Comparisons, 1],
+  [UserFeedTabSearchParam.ExternalProperties, 2],
   [UserFeedTabSearchParam.Settings, 3],
   [UserFeedTabSearchParam.Logs, 4],
-  [UserFeedTabSearchParam.ExternalProperties, 2],
+]);
+
+const tabLabelsByIndex = new Map<number, string>([
+  [0, "Connections"],
+  [1, "Comparisons"],
+  [2, "External Properties"],
+  [3, "Settings"],
+  [4, "Logs"],
 ]);
 
 export const UserFeed = () => {
@@ -342,8 +350,21 @@ const UserFeedInner: React.FC = () => {
                         Feeds
                       </BreadcrumbLink>
                     </BreadcrumbItem>
+                    <BreadcrumbItem>
+                      <BreadcrumbLink
+                        as={RouterLink}
+                        to={pages.userFeed(feed.id, {
+                          tab: UserFeedTabSearchParam.Connections,
+                        })}
+                        color="blue.300"
+                      >
+                        {feed?.title}
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
                     <BreadcrumbItem isCurrentPage>
-                      <BreadcrumbLink href="#">{feed?.title}</BreadcrumbLink>
+                      <BreadcrumbLink>
+                        {tabLabelsByIndex.get(tabIndex || 0) ?? "Connections"}
+                      </BreadcrumbLink>
                     </BreadcrumbItem>
                   </Breadcrumb>
                   <Stack flex={1}>