Request Inheritance (#209)

src-web/hooks/useHeadersTab.tsx

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { CountBadge } from '../components/core/CountBadge';
+import type { TabItem } from '../components/core/Tabs/Tabs';
+import type { HeaderModel } from './useInheritedHeaders';
+import { useInheritedHeaders } from './useInheritedHeaders';
+
+export function useHeadersTab<T extends string>(
+  tabValue: T,
+  model: HeaderModel | null,
+  label?: string,
+) {
+  const inheritedHeaders = useInheritedHeaders(model);
+
+  return useMemo<TabItem[]>(() => {
+    if (model == null) return [];
+
+    const allHeaders = [
+      ...inheritedHeaders,
+      ...(model.model === 'grpc_request' ? model.metadata : model.headers),
+    ];
+    const numHeaders = allHeaders.filter((h) => h.name).length;
+
+    const tab: TabItem = {
+      value: tabValue,
+      label: label ?? 'Headers',
+      rightSlot: <CountBadge count={numHeaders} />,
+    };
+
+    return [tab];
+  }, [inheritedHeaders, label, model, tabValue]);
+}