Ensure logo is same in MCP card as well as details page (#2566)

* Ensure logo is same in card as well as details page

Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>

* Add server logo BFF mock data

Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>

* Fix linting issues

Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>

---------

Signed-off-by: manaswinidas <dasmanaswini10@gmail.com>

Author: manaswinidas

clients/ui/bff/internal/mocks/static_data_mock.go

@@ -2399,6 +2399,7 @@ func GetMcpServerMocks() []models.McpServer {
 		Version:     stringToPointer("0.9.2"),
 		License:     stringToPointer("Apache 2.0"),
 		LicenseLink: stringToPointer("https://www.apache.org/licenses/LICENSE-2.0"),
+		Logo:        stringToPointer("https://raw.githubusercontent.com/cncf/artwork/main/projects/prometheus/icon/color/prometheus-icon-color.svg"),
 		Tags:        []string{"metrics", "monitoring", "alerting"},
 		ToolCount:   15,
 		Transports:  []models.McpTransportType{models.McpTransportTypeHTTP},
@@ -2447,6 +2448,7 @@ func GetMcpServerMocks() []models.McpServer {
 		Version:     stringToPointer("1.2.0"),
 		License:     stringToPointer("Apache 2.0"),
 		LicenseLink: stringToPointer("https://www.apache.org/licenses/LICENSE-2.0"),
+		Logo:        stringToPointer("https://raw.githubusercontent.com/kubernetes/kubernetes/master/logo/logo.svg"),
 		Tags:        []string{"kubernetes", "containers", "orchestration"},
 		ToolCount:   23,
 		Transports:  []models.McpTransportType{models.McpTransportTypeHTTP, models.McpTransportTypeSSE},
@@ -2533,6 +2535,7 @@ func GetMcpServerMocks() []models.McpServer {
 		Version:     stringToPointer("1.1.0"),
 		License:     stringToPointer("AGPL-3.0"),
 		LicenseLink: stringToPointer("https://www.gnu.org/licenses/agpl-3.0.html"),
+		Logo:        stringToPointer("https://raw.githubusercontent.com/grafana/grafana/main/public/img/grafana_icon.svg"),
 		Tags:        []string{"dashboards", "visualization", "monitoring"},
 		ToolCount:   12,
 		Transports:  []models.McpTransportType{models.McpTransportTypeHTTP},
@@ -2602,6 +2605,7 @@ func GetMcpServerMocks() []models.McpServer {
 		Version:     stringToPointer("0.8.1"),
 		License:     stringToPointer("BSD-3-Clause"),
 		LicenseLink: stringToPointer("https://opensource.org/licenses/BSD-3-Clause"),
+		Logo:        stringToPointer("https://raw.githubusercontent.com/redis/redis-io/master/public/images/redis-white.png"),
 		Tags:        []string{"cache", "database", "messaging"},
 		ToolCount:   14,
 		Transports:  []models.McpTransportType{models.McpTransportTypeHTTP, models.McpTransportTypeSSE},

clients/ui/frontend/src/app/pages/mcpCatalog/components/McpCatalogCard.tsx

@@ -52,12 +52,21 @@ const McpCatalogCard: React.FC<McpCatalogCardProps> = React.memo(({ server }) =>
           className="pf-v6-u-mb-md"
         >
           <FlexItem>
-            <span
-              className="pf-v6-u-display-inline-block pf-v6-u-font-size-2xl pf-v6-u-color-200"
-              aria-hidden
-            >
-              <ApplicationsIcon />
-            </span>
+            {server.logo ? (
+              <img
+                src={server.logo}
+                alt=""
+                style={{ height: '32px', width: '32px' }}
+                data-testid={`mcp-catalog-card-logo-${serverId}`}
+              />
+            ) : (
+              <span
+                className="pf-v6-u-display-inline-block pf-v6-u-font-size-2xl pf-v6-u-color-200"
+                aria-hidden
+              >
+                <ApplicationsIcon />
+              </span>
+            )}
           </FlexItem>
           {isMcpRemoteDeploymentMode(server.deploymentMode) && (
             <FlexItem>

clients/ui/frontend/src/app/pages/mcpCatalog/components/__tests__/McpCatalogCard.spec.tsx

@@ -79,4 +79,22 @@ describe('McpCatalogCard', () => {
     const desc = screen.getByTestId('mcp-catalog-card-description-4');
     expect(desc).toBeInTheDocument();
   });
+
+  it('renders server logo when logo is provided', () => {
+    render(
+      <McpCatalogCard server={{ ...mockServer, id: '5', logo: 'https://example.com/logo.png' }} />,
+      {
+        wrapper,
+      },
+    );
+    const logo = screen.getByTestId('mcp-catalog-card-logo-5');
+    expect(logo).toBeInTheDocument();
+    expect(logo.tagName).toBe('IMG');
+    expect(logo).toHaveAttribute('src', 'https://example.com/logo.png');
+  });
+
+  it('renders default icon when no logo is provided', () => {
+    render(<McpCatalogCard server={mockServer} />, { wrapper });
+    expect(screen.queryByTestId('mcp-catalog-card-logo-1')).not.toBeInTheDocument();
+  });
 });