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

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -121,6 +121,7 @@ const ArrowCircle = styled_components_1.default.div `
 `;
 const CardContent = styled_components_1.default.div `
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+  height: 100%;
 `;
 const CardFooter = styled_components_1.default.div `
   height: var(--catalog-card-footer-height);

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntity = CatalogEntity;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../../../core/utils");
 const ArrowLeftIcon_1 = require("../../../icons/ArrowLeftIcon/ArrowLeftIcon");
 const CatalogPageDescription_1 = require("../../../components/Catalog/CatalogPageDescription");
@@ -21,6 +22,17 @@ const hooks_1 = require("../../../core/hooks");
 const SidebarActions_1 = require("../../../components/SidebarActions/SidebarActions");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
+const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
+const renderEntityContent = (entity) => {
+    switch (entity.type) {
+        case 'data-schema':
+            return react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity });
+        case 'api-operation':
+            return react_1.default.createElement(CatalogEntityMethodAndPath_1.CatalogEntityMethodAndPath, { entity: entity });
+        default:
+            return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
+    }
+};
 function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
     var _a;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -28,38 +40,37 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
     const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
     const { layout, collapsedSidebar, onChangeViewClick, onChangeCollapseSidebarClick, searchQuery, setSearchQuery, } = useCatalog();
-    const renderEntityContent = () => {
-        switch (entity.type) {
-            case 'data-schema':
-                return react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity });
-            case 'api-operation':
-                return react_1.default.createElement(CatalogEntityMethodAndPath_1.CatalogEntityMethodAndPath, { entity: entity });
-            default:
-                return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
-        }
-    };
+    const { pathname } = (0, react_router_dom_1.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((0, react_router_dom_1.matchPath)({ path: `/${path}`, end }, pathname)),
+        items: [],
+        hasActiveSubItem: false,
+    }));
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
-        react_1.default.createElement(CatalogSidebar, { collapsed: collapsedSidebar, header: react_1.default.createElement(BackLink, { icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left", variant: "ghost", size: "medium", "data-component-name": "Sidebar/BackButton", to: linkToMainCatalog }, collapsedSidebar ? ('') : (react_1.default.createElement("div", { "data-translation-key": "sidebar.menu.backLabel" }, translate('sidebar.menu.backLabel')))), menu: react_1.default.createElement(Menu_1.Menu, { items: [
-                    {
-                        label: 'Overview',
-                        link: `${linkToMainCatalog}/entities/${entity.key}`,
-                        active: true,
-                        items: [],
-                        hasActiveSubItem: false,
-                    },
-                ] }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
+        react_1.default.createElement(CatalogSidebar, { collapsed: collapsedSidebar, header: react_1.default.createElement(BackLink, { icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left", variant: "ghost", size: "medium", "data-component-name": "Sidebar/BackButton", to: linkToMainCatalog }, collapsedSidebar ? ('') : (react_1.default.createElement("div", { "data-translation-key": "sidebar.menu.backLabel" }, translate('sidebar.menu.backLabel')))), menu: react_1.default.createElement(Menu_1.Menu, { items: sidebarMenuItems }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },
                     { label: entity.title },
                 ] }),
             react_1.default.createElement(CatalogEntityPageWrapper, null,
-                react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
-                react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
-                react_1.default.createElement(CatalogTwoColumnsSection, null,
-                    renderEntityContent(),
-                    react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
-                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })))));
+                react_1.default.createElement(react_router_dom_1.Routes, null,
+                    react_1.default.createElement(react_router_dom_1.Route, { path: `${catalogConfig.slug}/entities/${entity.key}` },
+                        react_1.default.createElement(react_router_dom_1.Route, { index: true, element: react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
+                                react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
+                                react_1.default.createElement(CatalogTwoColumnsSection, null,
+                                    renderEntityContent(entity),
+                                    react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
+                                react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations, searchQuery: searchQuery, setSearchQuery: setSearchQuery })) }),
+                        react_1.default.createElement(react_router_dom_1.Route, { path: "relations-graph", element: react_1.default.createElement(CatalogEntityRelationsGraph_lazy_1.CatalogEntityRelationsGraph, { entity: entity }) })))))));
 }
 const CatalogPageWrapper = styled_components_1.default.div `
   --sidebar-width: var(--catalog-sidebar-width);

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type EdgeProps } from '@xyflow/react';
+export type CatalogEntityRelationsEdgeProps = EdgeProps & {
+    className?: string;
+};
+export declare function CatalogEntityRelationsEdge(props: CatalogEntityRelationsEdgeProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsEdge = CatalogEntityRelationsEdge;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@xyflow/react");
+const styled_components_1 = __importDefault(require("styled-components"));
+function CatalogEntityRelationsEdge(props) {
+    const { id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, style, label, markerEnd, className, } = props;
+    const [edgePath, labelX, labelY] = (0, react_2.getSmoothStepPath)({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: 12,
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.BaseEdge, { id: id, path: edgePath, style: style, markerEnd: markerEnd }),
+        label ? (react_1.default.createElement(react_2.EdgeLabelRenderer, null,
+            react_1.default.createElement(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))) : null));
+}
+const EdgeLabel = styled_components_1.default.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);
+`;
+//# sourceMappingURL=CatalogEntityRelationsEdge.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { BffCatalogEntity } from '../../../../core/types';
+export type CatalogEntityRelationsGraphProps = {
+    entity: BffCatalogEntity;
+};
+export declare function CatalogEntityRelationsGraph({ entity, }: CatalogEntityRelationsGraphProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsGraph = CatalogEntityRelationsGraph;
+const react_1 = __importStar(require("react"));
+const react_2 = require("@xyflow/react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../../core/hooks");
+const useGraph_1 = require("../../../../core/hooks/catalog/useGraph");
+const CatalogEntityRelationsNode_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode");
+const CatalogEntityRelationsEdge_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge");
+const styles_1 = require("../../../../core/styles");
+const CatalogPageDescription_1 = require("../../../../components/Catalog/CatalogPageDescription");
+const catalog_1 = require("../../../../core/constants/catalog");
+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)',
+    },
+};
+function CatalogEntityRelationsGraph({ entity, }) {
+    var _a;
+    const { useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
+    const { activeColorMode } = (0, hooks_1.useColorSwitcher)();
+    const { items: allRelations } = useFetchCatalogEntitiesRelations({
+        entityKey: entity.key,
+    });
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = (0, useGraph_1.useGraph)({
+        entity,
+        relations: allRelations !== null && allRelations !== void 0 ? allRelations : [],
+    });
+    const nodeTypes = (0, react_1.useMemo)(() => ({ [catalog_1.GraphCustomNodeType.CatalogEntity]: CatalogEntityRelationsNode_1.CatalogEntityRelationsNode }), []);
+    const edgeTypes = (0, react_1.useMemo)(() => ({ [catalog_1.GraphCustomEdgeType.CatalogEdge]: CatalogEntityRelationsEdge_1.CatalogEntityRelationsEdge }), []);
+    const reactFlowConfig = allRelations.length
+        ? Object.assign({ key: entity.id, nodes,
+            edges,
+            nodeTypes,
+            edgeTypes,
+            onNodesChange,
+            onEdgesChange,
+            onConnect, colorMode: activeColorMode }, commonReactFlowConfig) : Object.assign({}, commonReactFlowConfig);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
+        react_1.default.createElement(GraphWrapper, null,
+            react_1.default.createElement(react_2.ReactFlow, Object.assign({}, reactFlowConfig),
+                react_1.default.createElement(react_2.Background, { bgColor: "var(--catalog-card-bg-color)" }),
+                react_1.default.createElement(react_2.Controls, null)))));
+}
+const GraphWrapper = styled_components_1.default.div `
+  height: 700px;
+  width: 100%;
+  ${styles_1.xyflow}
+`;
+//# sourceMappingURL=CatalogEntityRelationsGraph.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.d.ts

@@ -0,0 +1,2 @@
+import type { CatalogEntityRelationsGraphProps } from '../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph';
+export declare const CatalogEntityRelationsGraph: import("react").ComponentType<CatalogEntityRelationsGraphProps>;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsGraph = void 0;
+const utils_1 = require("../../../../core/utils");
+exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('./CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
+//# sourceMappingURL=CatalogEntityRelationsGraph.lazy.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type CatalogEntityRelationsLinkedNodeProps = {
+    label: string;
+    entityType: string;
+    className?: string;
+    to: string;
+};
+export declare function CatalogEntityRelationsLinkedNode({ label, entityType, className, to, }: CatalogEntityRelationsLinkedNodeProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsLinkedNode = CatalogEntityRelationsLinkedNode;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@xyflow/react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntityIcon");
+const Link_1 = require("../../../../components/Link/Link");
+const catalog_1 = require("../../../../core/constants/catalog");
+function CatalogEntityRelationsLinkedNode({ label, entityType, className, to, }) {
+    return (react_1.default.createElement(RelationsLinkedNodeWrapper, { className: className, to: to, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode" },
+        react_1.default.createElement(react_2.Handle, { type: catalog_1.GraphHandleType.Target, position: react_2.Position.Top, id: catalog_1.GraphHandleType.Target }),
+        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false }),
+        react_1.default.createElement("div", null, label)));
+}
+const RelationsLinkedNodeWrapper = (0, styled_components_1.default)(Link_1.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);
+`;
+//# sourceMappingURL=CatalogEntityRelationsLinkedNode.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type CatalogEntityNodeData = {
+    label: string;
+    entityType: string;
+    entityKey: string;
+    isRoot?: boolean;
+};
+export type CatalogEntityRelationsNodeProps = {
+    data: CatalogEntityNodeData;
+    className?: string;
+};
+export declare enum HandleType {
+    Target = "target",
+    Source = "source"
+}
+export declare function CatalogEntityRelationsNode({ data, className, }: CatalogEntityRelationsNodeProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HandleType = void 0;
+exports.CatalogEntityRelationsNode = CatalogEntityRelationsNode;
+const react_1 = __importDefault(require("react"));
+const CatalogEntityRelationsRootNode_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode");
+const CatalogEntityRelationsLinkedNode_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsLinkedNode");
+var HandleType;
+(function (HandleType) {
+    HandleType["Target"] = "target";
+    HandleType["Source"] = "source";
+})(HandleType || (exports.HandleType = HandleType = {}));
+function CatalogEntityRelationsNode({ data, className, }) {
+    const { label, entityType, isRoot, entityKey } = data;
+    const mergedClassName = `nopan${className ? ` ${className}` : ''}`;
+    if (isRoot) {
+        return (react_1.default.createElement(CatalogEntityRelationsRootNode_1.CatalogEntityRelationsRootNode, { className: mergedClassName, label: label, entityType: entityType }));
+    }
+    return (react_1.default.createElement(CatalogEntityRelationsLinkedNode_1.CatalogEntityRelationsLinkedNode, { className: mergedClassName, label: label, entityType: entityType, to: `/catalogs/all/entities/${entityKey}` }));
+}
+//# sourceMappingURL=CatalogEntityRelationsNode.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CatalogEntityRelationsRootNodeProps = {
+    label: string;
+    entityType: string;
+    className?: string;
+};
+export declare function CatalogEntityRelationsRootNode({ label, entityType, className, }: CatalogEntityRelationsRootNodeProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsRootNode = CatalogEntityRelationsRootNode;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@xyflow/react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogEntityIcon_1 = require("../../../../components/Catalog/CatalogEntityIcon");
+const catalog_1 = require("../../../../core/constants/catalog");
+function CatalogEntityRelationsRootNode({ label, entityType, className, }) {
+    return (react_1.default.createElement(RelationsRootNodeWrapper, { className: className, "data-component-name": "Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsRootNode" },
+        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, forceColor: "var(--catalog-entity-relations-node-root-icon-color)" }),
+        react_1.default.createElement("div", null, label),
+        react_1.default.createElement(react_2.Handle, { type: catalog_1.GraphHandleType.Source, position: react_2.Position.Bottom, id: catalog_1.GraphHandleType.Source })));
+}
+const RelationsRootNodeWrapper = styled_components_1.default.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;
+`;
+//# sourceMappingURL=CatalogEntityRelationsRootNode.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath.js

@@ -19,12 +19,14 @@ function CatalogEntityMethodAndPath({ entity }) {
         react_1.default.createElement(Heading, null, "Method & Path"),
         react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
                 react_1.default.createElement(MethodTag, { color: method.toLowerCase() }, method),
-                path), withSeparator: false })));
+                react_1.default.createElement(PathLabel, null, path)), withSeparator: false })));
 }
 const MethodTag = (0, styled_components_1.default)(HttpTag_1.HttpTag) `
   width: auto;
   justify-content: start;
-  margin-right: var(--spacing-xxs);
+`;
+const PathLabel = styled_components_1.default.label `
+  margin-left: var(--spacing-xxs);
 `;
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
@@ -37,6 +39,7 @@ const LinksWrapper = styled_components_1.default.div `
 `;
 const Label = styled_components_1.default.div `
   display: flex;
+  width: 100%;
 `;
 const Heading = styled_components_1.default.h2 `
   margin-bottom: var(--spacing-sm);

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.d.ts

@@ -6,6 +6,7 @@ export type CatalogEntityRelationsProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     initialRelations: BffCatalogRelatedEntityList;
+    initialFilter?: string;
     searchQuery: string;
     setSearchQuery: (query: string) => void;
 };

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.js

@@ -33,11 +33,15 @@ const ENTITY_DEFAULT_FILTERS = {
     team: 'type:user',
 };
 function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, searchQuery, setSearchQuery, }) {
-    var _a;
     const { useCatalogSort, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
     const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
-    const [filter, setFilter] = (0, react_1.useState)((_a = ENTITY_DEFAULT_FILTERS[entity.type]) !== null && _a !== void 0 ? _a : '');
-    const { items: relations, query } = useFetchCatalogEntitiesRelations({ entityKey: entity.key, search: searchQuery, sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined, filter }, initialRelations);
+    const [filter, setFilter] = (0, react_1.useState)();
+    const { items: relations, query } = useFetchCatalogEntitiesRelations({
+        entityKey: entity.key,
+        search: searchQuery,
+        sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined,
+        filter: filter !== null && filter !== void 0 ? filter : ENTITY_DEFAULT_FILTERS[entity.type],
+    }, initialRelations);
     const shouldShowLoadMore = query.hasNextPage ||
         (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);
     switch (entity.type) {

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.js

@@ -6,18 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsTable = CatalogEntityRelationsTable;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const ArrowDownIcon_1 = require("../../../../icons/ArrowDownIcon/ArrowDownIcon");
-const LoadMore_1 = require("../../../../components/LoadMore/LoadMore");
-const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
-const CatalogHighlight_1 = require("../../../../components/Catalog/CatalogHighlight");
-const CatalogEntitiesEmptyState_1 = require("../../../../components/Catalog/CatalogEntitiesEmptyState");
+const CatalogEntityRelationsTableContent_1 = require("./CatalogEntityRelationsTableContent");
 function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
         heading && react_1.default.createElement(Heading, null, heading),
-        (searchQuery || relations.length > 0) && (react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } })),
-        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 } })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
-        shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
+        react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } }),
+        react_1.default.createElement(CatalogEntityRelationsTableContent_1.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 })));
 }
 const Heading = styled_components_1.default.h2 `
   margin: var(--spacing-base) 0;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
+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 declare function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }: CatalogEntityRelationsTableContentProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsTableContent = CatalogEntityRelationsTableContent;
+const react_1 = __importDefault(require("react"));
+const ArrowDownIcon_1 = require("../../../../icons/ArrowDownIcon/ArrowDownIcon");
+const LoadMore_1 = require("../../../../components/LoadMore/LoadMore");
+const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
+const CatalogHighlight_1 = require("../../../../components/Catalog/CatalogHighlight");
+const CatalogEntitiesEmptyState_1 = require("../../../../components/Catalog/CatalogEntitiesEmptyState");
+function CatalogEntityRelationsTableContent({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, listType, }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent" },
+        react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] }, relations.length > 0 ? (react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, style: { marginTop: 0 } })) : (react_1.default.createElement(CatalogEntitiesEmptyState_1.CatalogEntitiesEmptyState, { listType: listType }))),
+        shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
+}
+//# sourceMappingURL=CatalogEntityRelationsTableContent.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -48,9 +48,9 @@ function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, set
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
         react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
-                react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: `members-${relations.length}-${relations.map((r) => r.id).join(',')}`, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
+                react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
-                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: `related-${relations.length}-${relations.map((r) => r.id).join(',')}`, entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
 }
 const TabItem = styled_components_1.default.div `
   padding: 12px;

package/lib/components/Catalog/CatalogEntityIcon.d.ts

@@ -2,5 +2,6 @@ import { JSX } from 'react';
 export type CatalogEntityIconProps = {
     entityType: string;
     defaultColor?: boolean;
+    forceColor?: string;
 };
-export declare function CatalogEntityIcon({ entityType, defaultColor, }: CatalogEntityIconProps): JSX.Element;
+export declare function CatalogEntityIcon({ entityType, defaultColor, forceColor, }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -12,10 +12,8 @@ const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
 const NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
 const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
-const getEntityIcon = ({ entityType, defaultColor }) => {
-    const iconColor = defaultColor
-        ? `var(--catalog-entity-icon-color)`
-        : getIconColor(entityType);
+const getEntityIcon = ({ entityType, defaultColor, forceColor }) => {
+    const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
     const entityIconMap = {
         service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
         domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
@@ -27,8 +25,8 @@ const getEntityIcon = ({ entityType, defaultColor }) => {
     };
     return entityIconMap[entityType];
 };
-function CatalogEntityIcon({ entityType, defaultColor = false, }) {
-    const icon = getEntityIcon({ entityType, defaultColor });
+function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
+    const icon = getEntityIcon({ entityType, defaultColor, forceColor });
     if (!icon) {
         throw new Error(`Unhandled entity type: ${entityType}`);
     }

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -67,7 +67,7 @@ const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, col
         catalogConfig,
         entitiesCatalogConfig,
     });
-    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: getEntityDetailsLink(), style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
+    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: getEntityDetailsLink() + '?search=', style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
 };
 exports.CatalogTableViewRow = CatalogTableViewRow;
 const TableRow = (0, styled_components_1.default)(Link_1.Link) `