@redocly/theme 0.57.0-next.1 → 0.57.0-next.2

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { Route, Routes, useLocation, matchPath } from 'react-router-dom';
 
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
 
@@ -19,6 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
+import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 
 export type CatalogEntityProps = {
   entity: BffCatalogEntity;
@@ -27,6 +29,17 @@ export type CatalogEntityProps = {
   initialRelations: BffCatalogRelatedEntityList;
 };
 
+const renderEntityContent = (entity: BffCatalogEntity): React.ReactElement => {
+  switch (entity.type) {
+    case 'data-schema':
+      return <CatalogEntitySchema entity={entity} />;
+    case 'api-operation':
+      return <CatalogEntityMethodAndPath entity={entity} />;
+    default:
+      return <CatalogEntityMetadata entity={entity} />;
+  }
+};
+
 export function CatalogEntity({
   entity,
   entitiesCatalogConfig,
@@ -37,7 +50,6 @@ export function CatalogEntity({
   const { translate } = useTranslate();
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-
   const {
     layout,
     collapsedSidebar,
@@ -47,16 +59,19 @@ export function CatalogEntity({
     setSearchQuery,
   } = useCatalog();
 
-  const renderEntityContent = (): React.ReactElement => {
-    switch (entity.type) {
-      case 'data-schema':
-        return <CatalogEntitySchema entity={entity} />;
-      case 'api-operation':
-        return <CatalogEntityMethodAndPath entity={entity} />;
-      default:
-        return <CatalogEntityMetadata entity={entity} />;
-    }
-  };
+  const { pathname } = useLocation();
+  const linkBase = `${linkToMainCatalog}/entities/${entity.key}`;
+  const menuItemDefs = [
+    { label: 'Overview', path: linkBase, end: true },
+    { label: 'Relations Graph', path: `${linkBase}/relations-graph`, end: true },
+  ];
+  const sidebarMenuItems = menuItemDefs.map(({ label, path, end }) => ({
+    label,
+    link: path,
+    active: Boolean(matchPath({ path: `/${path}`, end }, pathname)),
+    items: [],
+    hasActiveSubItem: false,
+  }));
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
@@ -80,19 +95,7 @@ export function CatalogEntity({
             )}
           </BackLink>
         }
-        menu={
-          <Menu
-            items={[
-              {
-                label: 'Overview',
-                link: `${linkToMainCatalog}/entities/${entity.key}`,
-                active: true,
-                items: [],
-                hasActiveSubItem: false,
-              },
-            ]}
-          />
-        }
+        menu={<Menu items={sidebarMenuItems} />}
         footer={
           <SidebarActions
             layout={layout}
@@ -111,24 +114,39 @@ export function CatalogEntity({
           ]}
         />
         <CatalogEntityPageWrapper>
-          <CatalogPageDescription
-            title={entity.title}
-            description={entity.summary ?? ''}
-            tag={entity.key}
-          />
-          <CatalogEntityProperties entity={entity} />
-          <CatalogTwoColumnsSection>
-            {renderEntityContent()}
-            <CatalogEntityLinks entity={entity} />
-          </CatalogTwoColumnsSection>
-          <CatalogEntityRelations
-            entity={entity}
-            entitiesCatalogConfig={entitiesCatalogConfig}
-            catalogConfig={catalogConfig}
-            initialRelations={initialRelations}
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-          />
+          <Routes>
+            <Route path={`${catalogConfig.slug}/entities/${entity.key}`}>
+              <Route
+                index
+                element={
+                  <>
+                    <CatalogPageDescription
+                      title={entity.title}
+                      description={entity.summary ?? ''}
+                      tag={entity.key}
+                    />
+                    <CatalogEntityProperties entity={entity} />
+                    <CatalogTwoColumnsSection>
+                      {renderEntityContent(entity)}
+                      <CatalogEntityLinks entity={entity} />
+                    </CatalogTwoColumnsSection>
+                    <CatalogEntityRelations
+                      entity={entity}
+                      entitiesCatalogConfig={entitiesCatalogConfig}
+                      catalogConfig={catalogConfig}
+                      initialRelations={initialRelations}
+                      searchQuery={searchQuery}
+                      setSearchQuery={setSearchQuery}
+                    />
+                  </>
+                }
+              />
+              <Route
+                path="relations-graph"
+                element={<CatalogEntityRelationsGraph entity={entity} />}
+              />
+            </Route>
+          </Routes>
         </CatalogEntityPageWrapper>
       </CatalogPageContent>
     </CatalogPageWrapper>

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, type EdgeProps } from '@xyflow/react';
+import styled from 'styled-components';
+
+export type CatalogEntityRelationsEdgeProps = EdgeProps & { className?: string };
+
+export function CatalogEntityRelationsEdge(
+  props: CatalogEntityRelationsEdgeProps,
+): React.ReactElement {
+  const {
+    id,
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    style,
+    label,
+    markerEnd,
+    className,
+  } = props;
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 12,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} style={style} markerEnd={markerEnd} />
+      {label ? (
+        <EdgeLabelRenderer>
+          <EdgeLabel
+            className={className ? `nopan ${className}` : 'nopan'}
+            style={{ transform: `translate(-50%, 0%) translate(${labelX}px, ${labelY - 10}px)` }}
+            data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge"
+          >
+            {label}
+          </EdgeLabel>
+        </EdgeLabelRenderer>
+      ) : null}
+    </>
+  );
+}
+
+const EdgeLabel = styled.div`
+  position: absolute;
+  background: var(--catalog-entity-relations-edge-label-bg-color);
+  color: var(--catalog-entity-relations-edge-label-text-color);
+  border: var(--catalog-entity-relations-edge-label-border-width)
+    var(--catalog-entity-relations-edge-label-border-style)
+    var(--catalog-entity-relations-edge-label-border-color);
+  border-radius: var(--catalog-entity-relations-edge-label-border-radius);
+  padding: var(--catalog-entity-relations-edge-label-padding);
+  font-size: var(--catalog-entity-relations-edge-label-font-size);
+  line-height: var(--catalog-entity-relations-edge-label-line-height);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.tsx

@@ -0,0 +1,7 @@
+import type { CatalogEntityRelationsGraphProps } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
+
+import { dynamic } from '@redocly/theme/core/utils';
+
+export const CatalogEntityRelationsGraph = dynamic<CatalogEntityRelationsGraphProps>(() =>
+  import('./CatalogEntityRelationsGraph').then((mod) => mod.CatalogEntityRelationsGraph),
+);

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

@@ -0,0 +1,91 @@
+import React, { JSX, useMemo } from 'react';
+import { Background, ColorMode, Controls, ReactFlow } from '@xyflow/react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
+import { useGraph } from '@redocly/theme/core/hooks/catalog/useGraph';
+import { CatalogEntityRelationsNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+import { CatalogEntityRelationsEdge } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge';
+import { xyflow } from '@redocly/theme/core/styles';
+import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
+import { GraphCustomEdgeType, GraphCustomNodeType } from '@redocly/theme/core/constants/catalog';
+
+export type CatalogEntityRelationsGraphProps = {
+  entity: BffCatalogEntity;
+};
+
+const commonReactFlowConfig = {
+  fitView: true,
+  proOptions: {
+    hideAttribution: true,
+  },
+  style: {
+    border:
+      'var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color)',
+    borderRadius: 'var(--catalog-card-border-radius, 8px)',
+  },
+};
+
+export function CatalogEntityRelationsGraph({
+  entity,
+}: CatalogEntityRelationsGraphProps): JSX.Element {
+  const { useFetchCatalogEntitiesRelations } = useThemeHooks();
+  const { activeColorMode } = useColorSwitcher();
+  const { items: allRelations } = useFetchCatalogEntitiesRelations({
+    entityKey: entity.key,
+  });
+
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useGraph({
+    entity,
+    relations: allRelations ?? [],
+  });
+
+  const nodeTypes = useMemo(
+    () => ({ [GraphCustomNodeType.CatalogEntity]: CatalogEntityRelationsNode }),
+    [],
+  );
+  const edgeTypes = useMemo(
+    () => ({ [GraphCustomEdgeType.CatalogEdge]: CatalogEntityRelationsEdge }),
+    [],
+  );
+
+  const reactFlowConfig = allRelations.length
+    ? {
+        key: entity.id,
+        nodes,
+        edges,
+        nodeTypes,
+        edgeTypes,
+        onNodesChange,
+        onEdgesChange,
+        onConnect,
+        colorMode: activeColorMode as ColorMode,
+        ...commonReactFlowConfig,
+      }
+    : {
+        ...commonReactFlowConfig,
+      };
+
+  return (
+    <>
+      <CatalogPageDescription
+        title={entity.title}
+        description={entity.summary ?? ''}
+        tag={entity.key}
+      />
+      <GraphWrapper>
+        <ReactFlow {...reactFlowConfig}>
+          <Background bgColor="var(--catalog-card-bg-color)" />
+          <Controls />
+        </ReactFlow>
+      </GraphWrapper>
+    </>
+  );
+}
+
+const GraphWrapper = styled.div`
+  height: 700px;
+  width: 100%;
+  ${xyflow}
+`;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import styled from 'styled-components';
+
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
+
+export type CatalogEntityRelationsLinkedNodeProps = {
+  label: string;
+  entityType: string;
+  className?: string;
+  to: string;
+};
+
+export function CatalogEntityRelationsLinkedNode({
+  label,
+  entityType,
+  className,
+  to,
+}: CatalogEntityRelationsLinkedNodeProps): React.ReactElement {
+  return (
+    <RelationsLinkedNodeWrapper
+      className={className}
+      to={to}
+      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode"
+    >
+      <Handle type={GraphHandleType.Target} position={Position.Top} id={GraphHandleType.Target} />
+      <CatalogEntityIcon entityType={entityType} defaultColor={false} />
+      <div>{label}</div>
+    </RelationsLinkedNodeWrapper>
+  );
+}
+
+const RelationsLinkedNodeWrapper = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight);
+  background: var(--catalog-entity-relations-node-bg-color);
+  color: var(--catalog-entity-relations-node-text-color);
+  border: var(--catalog-entity-relations-node-border-width)
+    var(--catalog-entity-relations-node-border-style)
+    var(--catalog-entity-relations-node-border-color);
+`;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { CatalogEntityRelationsRootNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode';
+import { CatalogEntityRelationsLinkedNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode';
+
+export type CatalogEntityNodeData = {
+  label: string;
+  entityType: string;
+  entityKey: string;
+  isRoot?: boolean;
+};
+
+export type CatalogEntityRelationsNodeProps = { data: CatalogEntityNodeData; className?: string };
+
+export enum HandleType {
+  Target = 'target',
+  Source = 'source',
+}
+
+export function CatalogEntityRelationsNode({
+  data,
+  className,
+}: CatalogEntityRelationsNodeProps): React.ReactElement {
+  const { label, entityType, isRoot, entityKey } = data;
+  const mergedClassName = `nopan${className ? ` ${className}` : ''}`;
+
+  if (isRoot) {
+    return (
+      <CatalogEntityRelationsRootNode
+        className={mergedClassName}
+        label={label}
+        entityType={entityType}
+      />
+    );
+  }
+
+  return (
+    <CatalogEntityRelationsLinkedNode
+      className={mergedClassName}
+      label={label}
+      entityType={entityType}
+      to={`/catalogs/all/entities/${entityKey}`}
+    />
+  );
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import styled from 'styled-components';
+
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { GraphHandleType } from '@redocly/theme/core/constants/catalog';
+
+export type CatalogEntityRelationsRootNodeProps = {
+  label: string;
+  entityType: string;
+  className?: string;
+};
+
+export function CatalogEntityRelationsRootNode({
+  label,
+  entityType,
+  className,
+}: CatalogEntityRelationsRootNodeProps): React.ReactElement {
+  return (
+    <RelationsRootNodeWrapper
+      className={className}
+      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode"
+    >
+      <CatalogEntityIcon
+        entityType={entityType}
+        forceColor="var(--catalog-entity-relations-node-root-icon-color)"
+      />
+      <div>{label}</div>
+      <Handle
+        type={GraphHandleType.Source}
+        position={Position.Bottom}
+        id={GraphHandleType.Source}
+      />
+    </RelationsRootNodeWrapper>
+  );
+}
+
+const RelationsRootNodeWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--catalog-entity-relations-node-gap);
+  padding: var(--catalog-entity-relations-node-padding);
+  border-radius: var(--catalog-entity-relations-node-border-radius);
+  font-style: normal;
+  font-weight: var(--catalog-entity-relations-node-font-weight-root);
+  background: var(--catalog-entity-relations-node-root-bg-color);
+  color: var(--catalog-entity-relations-node-root-text-color);
+  border: none;
+`;

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

@@ -24,7 +24,7 @@ export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPat
         leftContent={
           <Label>
             <MethodTag color={method.toLowerCase()}>{method}</MethodTag>
-            {path}
+            <PathLabel>{path}</PathLabel>
           </Label>
         }
         withSeparator={false}
@@ -36,7 +36,10 @@ export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPat
 const MethodTag = styled(HttpTag)`
   width: auto;
   justify-content: start;
-  margin-right: var(--spacing-xxs);
+`;
+
+const PathLabel = styled.label`
+  margin-left: var(--spacing-xxs);
 `;
 
 const LinksWrapper = styled.div`
@@ -51,6 +54,7 @@ const LinksWrapper = styled.div`
 
 const Label = styled.div`
   display: flex;
+  width: 100%;
 `;
 
 const Heading = styled.h2`

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

@@ -11,6 +11,7 @@ export type CatalogEntityRelationsProps = {
   entitiesCatalogConfig: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   initialRelations: BffCatalogRelatedEntityList;
+  initialFilter?: string;
   searchQuery: string;
   setSearchQuery: (query: string) => void;
 };
@@ -29,10 +30,15 @@ export function CatalogEntityRelations({
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
   const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
-  const [filter, setFilter] = useState<string>(ENTITY_DEFAULT_FILTERS[entity.type] ?? '');
+  const [filter, setFilter] = useState<string>();
 
   const { items: relations, query } = useFetchCatalogEntitiesRelations(
-    { entityKey: entity.key, search: searchQuery, sort: sortOption ?? undefined, filter },
+    {
+      entityKey: entity.key,
+      search: searchQuery,
+      sort: sortOption ?? undefined,
+      filter: filter ?? ENTITY_DEFAULT_FILTERS[entity.type],
+    },
     initialRelations,
   );
 

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

@@ -2,16 +2,11 @@ import React, { JSX } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
-import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
-import {
-  CatalogColumn,
-  CatalogTableView,
-} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
-import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';
+
+import { CatalogEntityRelationsTableContent } from './CatalogEntityRelationsTableContent';
 
 export type CatalogEntityRelationsTableProps = {
   entity: BffCatalogEntity;
@@ -53,41 +48,27 @@ export function CatalogEntityRelationsTable({
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
       {heading && <Heading>{heading}</Heading>}
-      {(searchQuery || relations.length > 0) && (
-        <CatalogActionsRow
-          searchQuery={searchQuery}
-          setSearchQuery={setSearchQuery}
-          sortOption={sortOption}
-          setSortOption={setSortOption}
-          style={{ marginBottom: '12px' }}
-        />
-      )}
-      <HighlightContext.Provider value={[searchQuery]}>
-        {relations.length > 0 ? (
-          <CatalogTableView
-            entities={relations}
-            entitiesCatalogConfig={entitiesCatalogConfig}
-            catalogConfig={catalogConfig}
-            columns={columns}
-            setSortOption={setSortOption}
-            currentSortOption={sortOption}
-            handleSortClick={handleSortClick}
-            isColumnSorted={isColumnSorted}
-            style={{ marginTop: 0 }}
-          />
-        ) : (
-          <CatalogEntitiesEmptyState listType={listType} />
-        )}
-      </HighlightContext.Provider>
-      {shouldShowLoadMore && (
-        <LoadMore
-          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
-          onClick={query.fetchNextPage}
-          disabled={query.isFetchingNextPage}
-          blinking={query.isFetchingNextPage}
-          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
-        />
-      )}
+      <CatalogActionsRow
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        sortOption={sortOption}
+        setSortOption={setSortOption}
+        style={{ marginBottom: '12px' }}
+      />
+      <CatalogEntityRelationsTableContent
+        entitiesCatalogConfig={entitiesCatalogConfig}
+        catalogConfig={catalogConfig}
+        relations={relations}
+        query={query}
+        searchQuery={searchQuery}
+        columns={columns}
+        setSortOption={setSortOption}
+        sortOption={sortOption}
+        handleSortClick={handleSortClick}
+        isColumnSorted={isColumnSorted}
+        shouldShowLoadMore={shouldShowLoadMore}
+        listType={listType}
+      />
     </div>
   );
 }

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

@@ -0,0 +1,76 @@
+import React, { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
+import { BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
+import {
+  CatalogColumn,
+  CatalogTableView,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';
+
+export type CatalogEntityRelationsTableContentProps = {
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  relations: BffCatalogRelatedEntity[];
+  query: {
+    fetchNextPage: () => void;
+    isFetchingNextPage: boolean;
+  };
+  searchQuery: string;
+  columns: CatalogColumn<BffCatalogRelatedEntity>[];
+  sortOption: SortOption | null;
+  setSortOption: (sortOption: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  shouldShowLoadMore: boolean;
+  listType?: 'default' | 'team';
+};
+
+export function CatalogEntityRelationsTableContent({
+  entitiesCatalogConfig,
+  catalogConfig,
+  relations,
+  query,
+  searchQuery,
+  columns,
+  setSortOption,
+  sortOption,
+  handleSortClick,
+  isColumnSorted,
+  shouldShowLoadMore,
+  listType,
+}: CatalogEntityRelationsTableContentProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent">
+      <HighlightContext.Provider value={[searchQuery]}>
+        {relations.length > 0 ? (
+          <CatalogTableView
+            entities={relations}
+            entitiesCatalogConfig={entitiesCatalogConfig}
+            catalogConfig={catalogConfig}
+            columns={columns}
+            setSortOption={setSortOption}
+            currentSortOption={sortOption}
+            handleSortClick={handleSortClick}
+            isColumnSorted={isColumnSorted}
+            style={{ marginTop: 0 }}
+          />
+        ) : (
+          <CatalogEntitiesEmptyState listType={listType} />
+        )}
+      </HighlightContext.Provider>
+      {shouldShowLoadMore && (
+        <LoadMore
+          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
+          onClick={query.fetchNextPage}
+          disabled={query.isFetchingNextPage}
+          blinking={query.isFetchingNextPage}
+          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
+        />
+      )}
+    </div>
+  );
+}