@redocly/theme 0.60.0 → 0.61.0-next.0

package/lib/core/types/hooks.d.ts

@@ -1,10 +1,10 @@
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { BannerConfig, CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { BannerConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, CatalogViewMode } from './catalog';
+import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, UseCatalogFetchCatalogEntities, UseCatalogFetchCatalogEntitiesRelations } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem } from './search';
@@ -12,7 +12,6 @@ import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
 import type { DrilldownMenuItemDetails } from './sidebar';
-import { BffCatalogEntity, BffCatalogEntityList, BffCatalogRelatedEntity, BffCatalogRelatedEntityList } from './catalog';
 import { AiSearchError } from '../constants/search';
 export type ThemeHooks = {
     useTranslate: () => {
@@ -122,16 +121,11 @@ export type ThemeHooks = {
         prevPage?: ResolvedNavItemWithLink;
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
-    useCatalog: (config?: CatalogEntityConfig, serverFilters?: Record<string, {
-        value: string;
-        count: number;
-    }[]>, entitiesCounterInitial?: number, initialViewMode?: CatalogViewMode) => UseCatalogResponse;
+    useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
     useCatalogSort: () => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
-    useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;
-    useFetchCatalogEntitiesRelations: (params: CatalogApiParams & {
-        entityKey: string;
-    }, initialData?: BffCatalogRelatedEntityList) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
+    useFetchCatalogEntities: UseCatalogFetchCatalogEntities;
+    useFetchCatalogEntitiesRelations: UseCatalogFetchCatalogEntitiesRelations;
     useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
     useTelemetry: () => Omit<AsyncApiRealmUI.Telemetry, 'init' | 'updateCloudEventData' | 'forceFlush' | 'startSpan' | 'constructCloudEvent' | 'sendToOtelService'>;
     useUserTeams: () => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0",
+  "version": "0.61.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.6.0"
+    "@redocly/realm-asyncapi-sdk": "0.7.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Catalog/Catalog.tsx

@@ -79,12 +79,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(
-    catalogConfig,
+  } = useCatalog({
+    config: catalogConfig,
+    entitiesCounterInitial: initialEntitiesList?.page.total || 0,
     serverFilters,
-    initialEntitiesList?.page.total || 0,
     initialViewMode,
-  );
+  });
 
   return (
     <>
@@ -95,19 +95,21 @@ export function Catalog(props: CatalogProps): JSX.Element {
             collapsedSidebar ? null : (
               <CatalogSelector
                 catalogSwitcherItems={catalogSwitcherItems}
-                setSearchQuery={setSearchQuery}
-                setSortOption={setSortOption}
+                onChange={() => {
+                  setSearchQuery('');
+                  setSortOption(null);
+                }}
               />
             )
           }
           menu={
             <CatalogFilterContent
-              setFilterTerm={setSearchQuery}
               filters={filters}
               filterTerm={searchQuery}
-              hideSearch={true}
-              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
+              onClear={() => {
+                setSearchQuery('');
+              }}
             />
           }
           footer={

package/src/components/Catalog/CatalogEntities.tsx

@@ -3,7 +3,11 @@ import React, { JSX, useEffect } from 'react';
 import type { CatalogEntityConfig } from '@redocly/config';
 
 import { BffCatalogEntity, BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
-import { useThemeHooks, useCatalogEntities } from '@redocly/theme/core/hooks';
+import {
+  useThemeHooks,
+  useCatalogEntities,
+  useCatalogEntityDetails,
+} from '@redocly/theme/core/hooks';
 import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { CatalogCardView } from '@redocly/theme/components/Catalog/CatalogCardView/CatalogCardView';
 import { CatalogTableView } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
@@ -43,8 +47,11 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
     isColumnSorted,
   } = props;
 
-  const { useFetchCatalogEntities } = useThemeHooks();
-
+  const { getEntityDetailsLink } = useCatalogEntityDetails({
+    catalogConfig,
+  });
+  const { useTelemetry, useFetchCatalogEntities } = useThemeHooks();
+  const telemetry = useTelemetry();
   const { initialFilter } = useCatalogEntities({
     entitiesTypes,
     excludedEntities,
@@ -67,6 +74,19 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
     props.initialEntitiesList,
   );
 
+  const onRowClick = (entity: BffCatalogEntity) => {
+    if (searchQuery) {
+      telemetry.sendCatalogEntitiesListSearchResultClickedMessage({
+        id: entity.id,
+        object: 'catalog_entity',
+        uri: getEntityDetailsLink(entity),
+        query: searchQuery,
+        entityKey: entity.key,
+        entityType: entity.type,
+      });
+    }
+  };
+
   const shouldShowLoadMore =
     query.hasNextPage ||
     (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
@@ -91,6 +111,7 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
           currentSortOption={sortOption}
           handleSortClick={handleSortClick}
           isColumnSorted={isColumnSorted}
+          onRowClick={onRowClick}
         />
       )}
 

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -48,15 +48,25 @@ const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactEl
   }
 };
 
-const renderDataSchemaSection = (
-  entity: BffCatalogEntity,
-  relatedEntity: BffCatalogRelatedEntity | null,
+type RenderDataSchemaSectionProps = {
+  entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+  catalogConfig: CatalogEntityConfig;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  RedocSchema: React.ComponentType<any>,
+  RedocSchema: React.ComponentType<any>;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  StoreProvider: React.ComponentType<any>,
-  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>,
-): React.ReactElement | null => {
+  StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
+};
+
+const renderDataSchemaSection = ({
+  entity,
+  relatedEntity,
+  catalogConfig,
+  RedocSchema,
+  StoreProvider,
+  GraphqlTypeRenderer,
+}: RenderDataSchemaSectionProps): React.ReactElement | null => {
   if (entity.type !== 'data-schema') {
     return null;
   }
@@ -65,6 +75,7 @@ const renderDataSchemaSection = (
     <CatalogEntitySchema
       entity={entity}
       relatedEntity={relatedEntity}
+      catalogConfig={catalogConfig}
       RedocSchema={RedocSchema}
       StoreProvider={StoreProvider}
       GraphqlTypeRenderer={GraphqlTypeRenderer}
@@ -109,13 +120,14 @@ export function CatalogEntity({
                       tag={entity.key}
                     />
                     <CatalogEntityProperties entity={entity} />
-                    {renderDataSchemaSection(
+                    {renderDataSchemaSection({
                       entity,
                       relatedEntity,
+                      catalogConfig,
                       RedocSchema,
                       StoreProvider,
                       GraphqlTypeRenderer,
-                    )}
+                    })}
                     <CatalogTwoColumnsSection>
                       {renderFirstColumnEntitySection(entity)}
                       <CatalogEntityLinks entity={entity} />

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -12,6 +12,8 @@ import type {
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
 import { CatalogEntityRelationsTableContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent';
+import { useCatalogEntityDetails, useThemeHooks } from '@redocly/theme/core/hooks';
+import { reverseRelationMap } from '@redocly/theme/core/constants';
 
 export type CatalogEntityRelationsTableProps = {
   entity: BffCatalogEntity;
@@ -35,6 +37,7 @@ export type CatalogEntityRelationsTableProps = {
 };
 
 export function CatalogEntityRelationsTable({
+  entity,
   entitiesCatalogConfig,
   catalogConfig,
   relations,
@@ -50,6 +53,29 @@ export function CatalogEntityRelationsTable({
   shouldShowLoadMore,
   listType,
 }: CatalogEntityRelationsTableProps): JSX.Element {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const { getEntityDetailsLink } = useCatalogEntityDetails({
+    catalogConfig,
+    entitiesCatalogConfig,
+  });
+
+  const onRowClick = (relatedEntity: BffCatalogRelatedEntity) => {
+    if (searchQuery) {
+      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage({
+        id: relatedEntity.id,
+        object: 'catalog_entity',
+        uri: getEntityDetailsLink(relatedEntity),
+        query: searchQuery,
+        entityKey: entity.key,
+        entityType: entity.type,
+        relationType: reverseRelationMap[relatedEntity.relationType],
+        relatedEntityKey: relatedEntity.key,
+        relatedEntityType: relatedEntity.type,
+      });
+    }
+  };
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
       {heading && <Heading>{heading}</Heading>}
@@ -73,6 +99,7 @@ export function CatalogEntityRelationsTable({
         isColumnSorted={isColumnSorted}
         shouldShowLoadMore={shouldShowLoadMore}
         listType={listType}
+        onRowClick={onRowClick}
       />
     </div>
   );

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.tsx

@@ -29,6 +29,7 @@ export type CatalogEntityRelationsTableContentProps = {
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
   listType?: ListType;
+  onRowClick: (entity: BffCatalogRelatedEntity) => void;
 };
 
 export function CatalogEntityRelationsTableContent({
@@ -44,6 +45,7 @@ export function CatalogEntityRelationsTableContent({
   isColumnSorted,
   shouldShowLoadMore,
   listType,
+  onRowClick,
 }: CatalogEntityRelationsTableContentProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent">
@@ -59,6 +61,7 @@ export function CatalogEntityRelationsTableContent({
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}
             style={{ marginTop: 0 }}
+            onRowClick={onRowClick}
           />
         ) : (
           <CatalogEntitiesEmptyState listType={listType} />

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -2,8 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import * as Sampler from 'openapi-sampler';
 
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+
+import { useCatalogEntityDetails, useThemeHooks } from '@redocly/theme/core/hooks';
 import { useCatalogEntitySchema } from '@redocly/theme/core/hooks';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
@@ -11,6 +13,7 @@ import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 export type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;
   relatedEntity: BffCatalogRelatedEntity | null;
+  catalogConfig: CatalogEntityConfig;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>;
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -21,15 +24,20 @@ export type CatalogEntitySchemaProps = {
 export function CatalogEntitySchema({
   entity,
   relatedEntity,
+  catalogConfig,
   RedocSchema,
   StoreProvider,
   GraphqlTypeRenderer,
 }: CatalogEntitySchemaProps) {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
   const { translate } = useTranslate();
   const { definition, parsedSchema, rawSchema } = useCatalogEntitySchema({ entity, relatedEntity });
   const isGraphql = entity.metadata?.specType === 'graphql';
   const graphqlSDL = entity?.metadata?.sdl;
+  const { getEntityDetailsLink } = useCatalogEntityDetails({
+    catalogConfig,
+  });
 
   return (
     <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
@@ -43,6 +51,13 @@ export function CatalogEntitySchema({
             variant="secondary"
             iconPosition="right"
             size="medium"
+            onCopyClick={() =>
+              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage({
+                id: entity.id,
+                object: 'catalog_entity',
+                uri: getEntityDetailsLink(entity),
+              })
+            }
           ></CopyButton>
         )}
       </HeaderWrapper>

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -102,7 +102,13 @@ export function CatalogFilterCheckboxes({
                 role="link"
                 onClick={() => {
                   filter.toggleOption(value);
-                  telemetry.sendFilterCheckboxToggledMessage({ id });
+                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage({
+                    id: filter.property + '--' + value,
+                    object: 'checkbox',
+                    uri: window.location.href,
+                    category: filter.property,
+                    value: value,
+                  });
                 }}
               >
                 <CheckboxIcon

package/src/components/Catalog/CatalogFilter/CatalogFilterContent.tsx

@@ -1,34 +1,31 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
 import type { RedoclyConfig } from '@redocly/theme/config';
 
-import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogFilter } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilter';
 import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
 
 export type CatalogFilterContentProps = {
-  setFilterTerm: (value: string) => void;
+  onClear: () => void;
   filters: ResolvedFilter[];
   filterTerm: string;
   filterValuesCasing?:
     | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
     | ((str: string) => string);
-  hideSearch?: boolean;
   showCounter?: boolean;
   className?: string;
 };
 
 export function CatalogFilterContent({
-  setFilterTerm,
+  onClear,
   filters,
   filterTerm,
   filterValuesCasing,
-  hideSearch,
   showCounter = true,
   className,
 }: CatalogFilterContentProps): JSX.Element | null {
@@ -50,7 +47,7 @@ export function CatalogFilterContent({
 
   const handleClearAll = (): void => {
     filters.forEach((filter) => filter.selectOption(''));
-    setFilterTerm('');
+    onClear();
   };
 
   if (!filters.length) {
@@ -72,10 +69,7 @@ export function CatalogFilterContent({
           </Button>
         ) : null}
       </FiltersHeader>
-      {!hideSearch && (
-        <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
-      )}
-      <FilterItems hideSearch={hideSearch}>
+      <FilterItems>
         {filters.map((filter, idx) => (
           <CatalogFilter
             filter={filter}
@@ -108,14 +102,9 @@ const FiltersTitle = styled.div`
   line-height: var(--filter-content-title-line-height);
 `;
 
-const FilterItems = styled.div<{ hideSearch?: boolean }>`
+const FilterItems = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
   border-top: 1px solid var(--border-color-secondary);
-  ${({ hideSearch }) =>
-    hideSearch &&
-    css`
-      border-top: none;
-    `}
 `;

package/src/components/Catalog/CatalogSelector.tsx

@@ -3,21 +3,19 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types';
+import { CatalogSwitcherItem } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export type CatalogSelectorProps = {
   catalogSwitcherItems: CatalogSwitcherItem[];
-  setSearchQuery: (query: string) => void;
-  setSortOption: (option: SortOption | null) => void;
+  onChange: () => void;
 };
 
 export function CatalogSelector({
   catalogSwitcherItems,
-  setSearchQuery,
-  setSortOption,
+  onChange,
 }: CatalogSelectorProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -41,8 +39,7 @@ export function CatalogSelector({
         options={options}
         onChange={(value) => {
           navigate(`${pathPrefix}/catalogs/${value}`);
-          setSearchQuery('');
-          setSortOption(null);
+          onChange();
         }}
         icon={<ChevronDownIcon color="var(--catalog-select-icon-color)" />}
       />

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -27,6 +27,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   columns?: CatalogColumn<T>[];
   setSortOption: (sortOption: SortOption | null) => void;
   currentSortOption?: SortOption | null;
+  onRowClick?: (entity: T) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   style?: React.CSSProperties;
@@ -95,6 +96,7 @@ export const CatalogTableView = <T extends BaseEntity>({
   columns = baseColumns as CatalogColumn<BaseEntity>[],
   setSortOption,
   currentSortOption,
+  onRowClick,
   handleSortClick,
   isColumnSorted,
   style,
@@ -124,6 +126,7 @@ export const CatalogTableView = <T extends BaseEntity>({
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             columns={columns}
+            onRowClick={onRowClick}
           />
         ))}
       </div>

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -8,7 +8,7 @@ import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
-import { useCatalogTableViewRow } from '@redocly/theme/core/hooks';
+import { useCatalogEntityDetails } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 import { Link } from '../../Link/Link';
@@ -26,6 +26,7 @@ export type CatalogTableViewRowProps<T extends BaseEntity> = {
   entitiesCatalogConfig?: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   columns?: CatalogColumn<T>[];
+  onRowClick?: (entity: T) => void;
 };
 
 export type CatalogColumn<T> = {
@@ -89,10 +90,9 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
   entitiesCatalogConfig,
   catalogConfig,
   columns = baseColumns as CatalogColumn<BaseEntity>[],
+  onRowClick = () => {},
 }: CatalogTableViewRowProps<T>) => {
-  const { getEntityDetailsLink } = useCatalogTableViewRow({
-    entityKey: entity.key,
-    entityType: entity.type,
+  const { getEntityDetailsLink } = useCatalogEntityDetails({
     catalogConfig,
     entitiesCatalogConfig,
   });
@@ -102,7 +102,8 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
       key={entity.id}
       $columnsWidths={columns.map((column) => column.width || '1fr')}
       $columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
-      to={getEntityDetailsLink() + '?search='}
+      to={getEntityDetailsLink(entity) + '?search='}
+      onClick={() => onRowClick(entity)}
       style={{ color: 'var(--catalog-page-wrapper-text-color)' }}
       data-component-name="Catalog/CatalogTableView/CatalogTableViewRow"
     >

package/src/core/hooks/catalog/{use-catalog-table-view-row.ts → use-catalog-entity-details.ts}

@@ -1,39 +1,35 @@
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 
 import { getPathPrefix } from '../../utils/urls';
 
-type CatalogTableViewRowProps = {
-  entityKey: string;
-  entityType: string;
+type Props = {
   catalogConfig: CatalogEntityConfig;
   entitiesCatalogConfig?: EntitiesCatalogConfig;
 };
 
-export function useCatalogTableViewRow({
-  entityKey,
-  entityType,
-  catalogConfig,
-  entitiesCatalogConfig,
-}: CatalogTableViewRowProps) {
-  const getCatalogSpecificConfigByEntityTypeIncluded = () => {
+type BaseEntity = Pick<BffCatalogEntity, 'key' | 'type'>;
+
+export function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig }: Props) {
+  const getCatalogSpecificConfigByEntityTypeIncluded = (entity: BaseEntity) => {
     if (!entitiesCatalogConfig) {
       return;
     }
 
     return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
-      return catalog?.includes?.some((include) => include.type === entityType);
+      return catalog?.includes?.some((include) => include.type === entity.type);
     });
   };
 
-  const getEntityDetailsLink = () => {
+  const getEntityDetailsLink = (entity: BaseEntity) => {
     const pathPrefix = getPathPrefix();
-    const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded();
+    const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded(entity);
 
     if (!catalogSpecificConfig || !entitiesCatalogConfig) {
-      return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entityKey}`;
+      return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`;
     }
 
-    return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entityKey}`;
+    return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entity.key}`;
   };
 
   return { getEntityDetailsLink };

package/src/core/hooks/index.ts

@@ -45,6 +45,6 @@ export * from './use-user-teams';
 export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
-export * from './catalog/use-catalog-table-view-row';
+export * from './catalog/use-catalog-entity-details';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';