fix changes requested

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>

Author: Philip-Carneiro

clients/ui/frontend/src/app/pages/mcpCatalog/screens/McpCatalog.tsx

@@ -94,7 +94,10 @@ const McpCatalog: React.FC = () => {
                   {isAllServersView && !isSingleCategory ? (
                     <McpCatalogAllServersView searchTerm={searchQuery} />
                   ) : (
-                    <McpCatalogGalleryView handleFilterReset={handleResetAllFilters} />
+                    <McpCatalogGalleryView
+                      handleFilterReset={handleResetAllFilters}
+                      isSingleCategory={isSingleCategory}
+                    />
                   )}
                 </PageSection>
               </Stack>

clients/ui/frontend/src/app/pages/mcpCatalog/screens/McpCatalogGalleryView.tsx

@@ -3,6 +3,7 @@ import {
   Alert,
   Bullseye,
   Button,
+  Content,
   EmptyState,
   Flex,
   Grid,
@@ -13,8 +14,12 @@ import {
 import { SearchIcon } from '@patternfly/react-icons';
 import { McpCatalogContext } from '~/app/context/mcpCatalog/McpCatalogContext';
 import { useMcpServersBySourceLabelWithAPI } from '~/app/hooks/mcpServerCatalog/useMcpServersBySourceLabel';
-import { MCP_CATALOG_GRID_SPAN } from '~/app/pages/mcpCatalog/const';
+import { MCP_CATALOG_GRID_SPAN, OTHER_MCP_SERVERS_DISPLAY_NAME } from '~/app/pages/mcpCatalog/const';
 import { mcpFiltersToFilterQuery } from '~/app/pages/mcpCatalog/utils/mcpCatalogUtils';
+import {
+  getLabelDisplayName,
+  getLabelDescription,
+} from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
 import EmptyModelCatalogState from '~/app/pages/modelCatalog/EmptyModelCatalogState';
 import ScrollViewOnMount from '~/app/shared/components/ScrollViewOnMount';
 import McpCatalogCard from '~/app/pages/mcpCatalog/components/McpCatalogCard';
@@ -23,11 +28,21 @@ const PAGE_SIZE = 10;
 
 type McpCatalogGalleryViewProps = {
   handleFilterReset: () => void;
+  isSingleCategory?: boolean;
 };
 
-const McpCatalogGalleryView: React.FC<McpCatalogGalleryViewProps> = ({ handleFilterReset }) => {
-  const { mcpApiState, selectedSourceLabel, searchQuery, filters, catalogLabelsLoaded } =
-    React.useContext(McpCatalogContext);
+const McpCatalogGalleryView: React.FC<McpCatalogGalleryViewProps> = ({
+  handleFilterReset,
+  isSingleCategory = false,
+}) => {
+  const {
+    mcpApiState,
+    selectedSourceLabel,
+    searchQuery,
+    filters,
+    catalogLabels,
+    catalogLabelsLoaded,
+  } = React.useContext(McpCatalogContext);
 
   const filterQuery = React.useMemo(() => mcpFiltersToFilterQuery(filters), [filters]);
 
@@ -80,9 +95,33 @@ const McpCatalogGalleryView: React.FC<McpCatalogGalleryViewProps> = ({ handleFil
     );
   }
 
+  const categoryTitle = isSingleCategory
+    ? getLabelDisplayName(
+        selectedSourceLabel || '',
+        catalogLabels,
+        OTHER_MCP_SERVERS_DISPLAY_NAME,
+        'servers',
+      )
+    : undefined;
+  const categoryDescription = isSingleCategory
+    ? getLabelDescription(selectedSourceLabel || '', catalogLabels)
+    : undefined;
+
   return (
     <>
       <ScrollViewOnMount shouldScroll scrollToTop />
+      {isSingleCategory && categoryTitle && (
+        <div className="pf-v6-u-mb-lg" data-testid="single-category-header">
+          <Title headingLevel="h3" size="lg">
+            {categoryTitle}
+          </Title>
+          {categoryDescription && (
+            <Content component="p" className="pf-v6-u-color-200 pf-v6-u-mt-sm">
+              {categoryDescription}
+            </Content>
+          )}
+        </div>
+      )}
       <Grid hasGutter>
         {items.map((server) => (
           <GridItem

clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelCatalog.tsx

@@ -92,6 +92,7 @@ const ModelCatalog: React.FC = () => {
                   <ModelCatalogGalleryView
                     searchTerm={searchTerm}
                     handleFilterReset={handleFilterReset}
+                    isSingleCategory={isSingleCategory}
                   />
                 )}
               </PageSection>

clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelCatalogGalleryView.tsx

@@ -2,6 +2,7 @@ import {
   Alert,
   Bullseye,
   Button,
+  Content,
   EmptyState,
   EmptyStateVariant,
   Flex,
@@ -22,6 +23,8 @@ import {
   getActiveLatencyFieldName,
   getSortParams,
   generateCategoryName,
+  getLabelDisplayName,
+  getLabelDescription,
   hasFiltersApplied,
   isValueDifferentFromDefault,
 } from '~/app/pages/modelCatalog/utils/modelCatalogUtils';
@@ -38,11 +41,13 @@ import {
 type ModelCatalogPageProps = {
   searchTerm: string;
   handleFilterReset: () => void;
+  isSingleCategory?: boolean;
 };
 
 const ModelCatalogGalleryView: React.FC<ModelCatalogPageProps> = ({
   searchTerm,
   handleFilterReset,
+  isSingleCategory = false,
 }) => {
   const {
     selectedSourceLabel,
@@ -51,6 +56,7 @@ const ModelCatalogGalleryView: React.FC<ModelCatalogPageProps> = ({
     filterOptionsLoaded,
     filterOptionsLoadError,
     catalogSources,
+    catalogLabels,
     catalogLabelsLoaded,
     catalogLabelsLoadError,
     setPerformanceViewEnabled,
@@ -270,9 +276,28 @@ const ModelCatalogGalleryView: React.FC<ModelCatalogPageProps> = ({
     );
   }
 
+  const categoryTitle = isSingleCategory
+    ? getLabelDisplayName(selectedSourceLabel || '', catalogLabels)
+    : undefined;
+  const categoryDescription = isSingleCategory
+    ? getLabelDescription(selectedSourceLabel || '', catalogLabels)
+    : undefined;
+
   return (
     <>
       <ScrollViewOnMount shouldScroll scrollToTop />
+      {isSingleCategory && categoryTitle && (
+        <div className="pf-v6-u-mb-lg" data-testid="single-category-header">
+          <Title headingLevel="h3" size="lg">
+            {categoryTitle}
+          </Title>
+          {categoryDescription && (
+            <Content component="p" className="pf-v6-u-color-200 pf-v6-u-mt-sm">
+              {categoryDescription}
+            </Content>
+          )}
+        </div>
+      )}
       <Grid hasGutter>
         {catalogModels.items.map((model: CatalogModel) => (
           <GridItem key={`${model.name}/${model.source_id}`} sm={6} md={6} lg={6} xl={6} xl2={3}>