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

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

@@ -88,7 +88,7 @@ export function CatalogEntityTeamRelations({
       <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
-            key={`members-${relations.length}-${relations.map((r) => r.id).join(',')}`}
+            key="members-table"
             entity={entity}
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
@@ -111,7 +111,7 @@ export function CatalogEntityTeamRelations({
           onClick={() => setFilter('-type:user')}
         >
           <CatalogEntityDefaultRelations
-            key={`related-${relations.length}-${relations.map((r) => r.id).join(',')}`}
+            key="related-entities-table"
             entity={entity}
             relations={relations}
             query={query}

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,14 +11,15 @@ import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon'
 export type CatalogEntityIconProps = {
   entityType: string;
   defaultColor?: boolean;
+  forceColor?: string;
 };
 
 const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
 
-const getEntityIcon = ({ entityType, defaultColor }: CatalogEntityIconProps) => {
-  const iconColor = defaultColor
-    ? `var(--catalog-entity-icon-color)`
-    : getIconColor(entityType as EntityType);
+const getEntityIcon = ({ entityType, defaultColor, forceColor }: CatalogEntityIconProps) => {
+  const iconColor =
+    forceColor ??
+    (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
 
   const entityIconMap: Record<EntityType, JSX.Element> = {
     service: <CodeIcon color={iconColor} />,
@@ -36,8 +37,9 @@ const getEntityIcon = ({ entityType, defaultColor }: CatalogEntityIconProps) =>
 export function CatalogEntityIcon({
   entityType,
   defaultColor = false,
+  forceColor,
 }: CatalogEntityIconProps): JSX.Element {
-  const icon = getEntityIcon({ entityType, defaultColor });
+  const icon = getEntityIcon({ entityType, defaultColor, forceColor });
 
   if (!icon) {
     throw new Error(`Unhandled entity type: ${entityType}`);

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

@@ -101,7 +101,7 @@ 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()}
+      to={getEntityDetailsLink() + '?search='}
       style={{ color: 'var(--catalog-page-wrapper-text-color)' }}
       data-component-name="Catalog/CatalogTableView/CatalogTableViewRow"
     >

package/src/components/Catalog/variables.ts

@@ -382,4 +382,46 @@ export const catalog = css`
 
   --catalog-avatar-bg-color: #ededf2;
   // @tokens End
+
+  /**
+    * @tokens Catalog entity relations node
+    */
+  --catalog-entity-relations-node-padding-vertical: 10px;
+  --catalog-entity-relations-node-padding-horizontal: 14px;
+  --catalog-entity-relations-node-padding: var(--catalog-entity-relations-node-padding-vertical) var(--catalog-entity-relations-node-padding-horizontal);
+  --catalog-entity-relations-node-gap: 8px;
+  --catalog-entity-relations-node-border-radius: 10px;
+
+  --catalog-entity-relations-node-bg-color: var(--layer-color);
+  --catalog-entity-relations-node-text-color: var(--catalog-card-text-color);
+
+  --catalog-entity-relations-node-border-color: var(--border-color-secondary);
+  --catalog-entity-relations-node-border-width: var(--border-width);
+  --catalog-entity-relations-node-border-style: var(--border-style);
+
+  --catalog-entity-relations-node-font-weight: var(--font-weight-regular);
+  --catalog-entity-relations-node-font-weight-root: 600;
+
+  --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
+  --catalog-entity-relations-node-root-text-color: #ffffff;
+  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  // @tokens End
+
+  /**
+    * @tokens Catalog entity relations edge
+    */
+  --catalog-entity-relations-edge-label-bg-color: var(--layer-color);
+  --catalog-entity-relations-edge-label-text-color: var(--catalog-card-text-color);
+  --catalog-entity-relations-edge-label-border-color: var(--border-color-secondary);
+  --catalog-entity-relations-edge-label-border-width: var(--border-width);
+  --catalog-entity-relations-edge-label-border-style: var(--border-style);
+  --catalog-entity-relations-edge-label-border-radius: 10px;
+
+  --catalog-entity-relations-edge-label-padding-vertical: 2px;
+  --catalog-entity-relations-edge-label-padding-horizontal: 8px;
+  --catalog-entity-relations-edge-label-padding: var(--catalog-entity-relations-edge-label-padding-vertical) var(--catalog-entity-relations-edge-label-padding-horizontal);
+
+  --catalog-entity-relations-edge-label-font-size: 12px;
+  --catalog-entity-relations-edge-label-line-height: 1.2;
+  // @tokens End
 `;

package/src/components/CatalogClassic/CatalogClassicVirtualizedGroups.tsx

@@ -106,6 +106,7 @@ export function CatalogClassicVirtualizedGroups({
       return ESTIMATED_CARD_HEIGHT;
     },
     overscan: 5,
+    enabled: shouldVirtualize,
   });
 
   useEffect(() => {
@@ -117,27 +118,29 @@ export function CatalogClassicVirtualizedGroups({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters, filterTerm, size.width, shouldVirtualize]);
 
+  const renderRow = (rowData: VirtualRowData) => {
+    if (rowData.type === 'header') {
+      return (
+        <SSRHeaderRow key={rowData.key}>
+          <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
+          <CounterTag borderless>{rowData.groupCount}</CounterTag>
+        </SSRHeaderRow>
+      );
+    }
+
+    return (
+      <SSRGridRow key={rowData.key}>
+        {rowData.items.map((item) => (
+          <CatalogClassicCard key={item.link} item={item} />
+        ))}
+      </SSRGridRow>
+    );
+  };
+
   if (!isClient) {
     return (
       <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
-        {flatRows.slice(0, 15).map((rowData) => {
-          if (rowData.type === 'header') {
-            return (
-              <SSRHeaderRow key={rowData.key}>
-                <CatalogSeparatorLabel>{rowData.groupTitle}</CatalogSeparatorLabel>
-                <CounterTag borderless>{rowData.groupCount}</CounterTag>
-              </SSRHeaderRow>
-            );
-          }
-
-          return (
-            <SSRGridRow key={rowData.key}>
-              {rowData.items.map((item) => (
-                <CatalogClassicCard key={item.link} item={item} />
-              ))}
-            </SSRGridRow>
-          );
-        })}
+        {flatRows.slice(0, 15).map((rowData) => renderRow(rowData))}
         <LoadingWrapper>
           <SpinnerLoader color="var(--catalog-classic-description-text-color)" size="20px" />
         </LoadingWrapper>
@@ -145,6 +148,14 @@ export function CatalogClassicVirtualizedGroups({
     );
   }
 
+  if (!shouldVirtualize) {
+    return (
+      <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
+        {flatRows.map((rowData) => renderRow(rowData))}
+      </div>
+    );
+  }
+
   return (
     <div ref={parentRef} data-component-name="CatalogClassic/CatalogClassicVirtualizedGroups">
       <div

package/src/core/constants/catalog.ts

@@ -57,3 +57,16 @@ export const reverseRelationMap: Record<EntityRelationType, EntityRelationType>
   triggers: 'triggeredBy',
   triggeredBy: 'triggers',
 } as const;
+
+export enum GraphHandleType {
+  Target = 'target',
+  Source = 'source',
+}
+
+export enum GraphCustomNodeType {
+  CatalogEntity = 'catalogEntity',
+}
+
+export enum GraphCustomEdgeType {
+  CatalogEdge = 'catalogEdge',
+}

package/src/core/hooks/catalog/useGraph.ts

@@ -0,0 +1,236 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import {
+  addEdge,
+  type Node,
+  type Edge,
+  type Connection,
+  useNodesState,
+  useEdgesState,
+  Position,
+  OnNodesChange,
+  OnEdgesChange,
+} from '@xyflow/react';
+
+import { type CatalogEntityNodeData } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import {
+  GraphCustomEdgeType,
+  GraphCustomNodeType,
+  GraphHandleType,
+  reverseRelationMap,
+} from '../../constants/catalog';
+
+export type UseGraphProps = {
+  entity: BffCatalogEntity;
+  relations: BffCatalogRelatedEntity[];
+};
+
+export type UseGraphReturn = {
+  nodes: Node<CatalogEntityNodeData>[];
+  edges: Edge[];
+  onNodesChange: OnNodesChange<Node<CatalogEntityNodeData>>;
+  onEdgesChange: OnEdgesChange<Edge>;
+  onConnect: (params: Connection) => void;
+};
+
+type EntityGraphData = {
+  id: string;
+  title: string;
+  entityType: string;
+  relationLabel: string;
+  key: string;
+};
+
+// TODO: This isn't final implementation, leaved comments for future reference.
+export function useGraph({ entity, relations }: UseGraphProps): UseGraphReturn {
+  const rootNodeId = entity.id;
+
+  // Compute final label for a relation considering its role
+  const getRelationLabel = useCallback((relation: BffCatalogRelatedEntity): string => {
+    const relationType = relation.relationType;
+    if (!relationType) {
+      return 'related';
+    }
+
+    return relation.relationRole === 'source' ? reverseRelationMap[relationType] : relationType;
+  }, []);
+
+  const processedRelations = useMemo(() => {
+    // Exclude self-relations and deduplicate by id
+    const seenIds = new Set<string>();
+    const filtered = (relations ?? []).filter((r) => r.id !== rootNodeId && r.key !== entity.key);
+
+    const unique = [] as Array<{
+      id: string;
+      title: string;
+      entityType: string;
+      relationLabel: string;
+      key: string;
+    }>;
+
+    for (const r of filtered) {
+      if (seenIds.has(r.id)) continue;
+      seenIds.add(r.id);
+      unique.push({
+        id: r.id,
+        title: r.title,
+        entityType: r.type, // Group by entity type, not relation type
+        relationLabel: getRelationLabel(r),
+        key: r.key,
+      });
+    }
+
+    return unique;
+  }, [relations, getRelationLabel, rootNodeId, entity.key]);
+
+  // Entity data type for layout
+
+  const computedNodes = useMemo<Node<CatalogEntityNodeData>[]>(() => {
+    if (!processedRelations.length) {
+      return [
+        {
+          id: rootNodeId,
+          type: GraphCustomNodeType.CatalogEntity,
+          position: { x: 0, y: 0 },
+          data: {
+            label: entity.title,
+            entityType: entity.type,
+            isRoot: true,
+            entityKey: entity.key,
+          },
+          sourcePosition: Position.Bottom,
+          targetPosition: Position.Top,
+        },
+      ];
+    }
+
+    // Group entities by their entity type
+    const entityTypeGroups = new Map<string, EntityGraphData[]>();
+    for (const rel of processedRelations) {
+      const entityData: EntityGraphData = {
+        id: rel.id,
+        title: rel.title,
+        entityType: rel.entityType,
+        relationLabel: rel.relationLabel,
+        key: rel.key,
+      };
+
+      const current = entityTypeGroups.get(rel.entityType);
+      if (current) {
+        current.push(entityData);
+      } else {
+        entityTypeGroups.set(rel.entityType, [entityData]);
+      }
+    }
+
+    // Sort entity types for consistent ordering
+    const entityTypes = Array.from(entityTypeGroups.keys()).sort();
+
+    // Layout constants
+    const rootY = 0;
+    const verticalGap = 80; // Gap between entities of same type (vertical)
+    const horizontalGap = 250; // Gap between different entity types (horizontal)
+    const topMargin = 240; // Distance from root to first row of entities
+
+    // Special handling for single entity type group - root on left, entities on right
+    const isSingleGroup = entityTypes.length === 1;
+
+    let rootX = 0;
+    let startX = 0;
+
+    if (isSingleGroup) {
+      // Position root on the left, entities on the right
+      rootX = -horizontalGap / 2;
+      startX = horizontalGap / 2;
+    } else {
+      // Calculate starting X position to center all groups (original behavior)
+      const totalWidth = (entityTypes.length - 1) * horizontalGap;
+      startX = -totalWidth / 2;
+    }
+
+    const nodes: Node<CatalogEntityNodeData>[] = [
+      // Root entity
+      {
+        id: rootNodeId,
+        type: GraphCustomNodeType.CatalogEntity,
+        position: { x: rootX, y: rootY },
+        data: { label: entity.title, entityType: entity.type, isRoot: true, entityKey: entity.key },
+        sourcePosition: Position.Bottom,
+        targetPosition: Position.Top,
+      },
+    ];
+
+    // Position entities by type groups
+    for (let typeIndex = 0; typeIndex < entityTypes.length; typeIndex++) {
+      const entityType = entityTypes[typeIndex];
+      const entitiesOfType = entityTypeGroups.get(entityType) ?? [];
+
+      // Calculate X position for this entity type group
+      const groupX = startX + typeIndex * horizontalGap;
+
+      // Calculate starting Y position to center entities vertically within the group
+      const groupHeight = (entitiesOfType.length - 1) * verticalGap;
+      const groupStartY = rootY + topMargin - groupHeight / 2;
+
+      // Position each entity within the group
+      for (let entityIndex = 0; entityIndex < entitiesOfType.length; entityIndex++) {
+        const entityData = entitiesOfType[entityIndex];
+        const entityY = groupStartY + entityIndex * verticalGap;
+
+        nodes.push({
+          id: entityData.id,
+          type: GraphCustomNodeType.CatalogEntity,
+          position: { x: groupX, y: entityY },
+          data: {
+            label: entityData.title,
+            entityType: entityData.entityType,
+            isRoot: false,
+            entityKey: entityData.key,
+          },
+          sourcePosition: Position.Bottom,
+          targetPosition: Position.Top,
+        });
+      }
+    }
+
+    return nodes;
+  }, [rootNodeId, entity.title, entity.type, entity.key, processedRelations]);
+
+  const computedEdges = useMemo<Edge[]>(() => {
+    return processedRelations.map((relation) => ({
+      id: `e-${rootNodeId}-${relation.id}`,
+      source: rootNodeId,
+      target: relation.id,
+      sourceHandle: GraphHandleType.Source, // Use the bottom handle of the center node
+      targetHandle: GraphHandleType.Target, // Use the target handle (top) of related nodes
+      type: GraphCustomEdgeType.CatalogEdge,
+      label: relation.relationLabel,
+    }));
+  }, [rootNodeId, processedRelations]);
+
+  const [nodes, setNodes, onNodesChange] =
+    useNodesState<Node<CatalogEntityNodeData>>(computedNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(computedEdges);
+
+  useEffect(() => {
+    setNodes(computedNodes);
+  }, [computedNodes, setNodes]);
+
+  useEffect(() => {
+    setEdges(computedEdges);
+  }, [computedEdges, setEdges]);
+
+  const onConnect = useCallback(
+    (params: Connection) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
+    [setEdges],
+  );
+
+  return {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+  };
+}

package/src/core/hooks/index.ts

@@ -37,6 +37,7 @@ export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
 export * from './catalog/useCatalogEntities';
+export * from './catalog/useGraph';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';

package/src/core/openapi/index.ts

@@ -29,3 +29,4 @@ export { useModalScrollLock } from '../hooks/use-modal-scroll-lock';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
+export { ENTITY_RELATION_TYPES } from '../constants/catalog';

package/src/core/styles/index.ts

@@ -1,2 +1,3 @@
 export * from './global';
 export * from './dark';
+export { xyflow } from './xyflow';