@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

package/LICENSE

@@ -1 +1,7 @@
-(c) Copyright 2022 Redocly Inc, all rights reserved.
+Copyright 2022 Redocly Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/lib/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription.js

@@ -7,5 +7,6 @@ exports.AfterAsyncApiChannelDescription = void 0;
 // export function AfterAsyncApiChannelDescription(_props: AfterAsyncApiChannelDescriptionProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AfterAsyncApiChannelDescription = null;
 //# sourceMappingURL=AfterAsyncApiChannelDescription.js.map

package/lib/components/Buttons/AIAssistantButton.js

@@ -49,7 +49,7 @@ const RedoclyIcon_1 = require("../../icons/RedoclyIcon/RedoclyIcon");
 const defaultConfig = {
     hide: false,
     inputType: 'button',
-    inputIcon: 'redocly',
+    inputIcon: 'sparkles',
 };
 const getIcon = (iconType, inputType = 'button') => {
     const iconSize = inputType === 'icon'
@@ -73,8 +73,9 @@ function AIAssistantButton() {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeConfig = (0, hooks_1.useThemeConfig)();
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
     const buttonConfig = Object.assign(Object.assign({}, defaultConfig), ((_b = (_a = themeConfig.aiAssistant) === null || _a === void 0 ? void 0 : _a.trigger) !== null && _b !== void 0 ? _b : {}));
     const { hide, inputIcon, inputType } = buttonConfig;
     if (hide) {
@@ -84,6 +85,9 @@ function AIAssistantButton() {
     const text = translate('aiAssistant.trigger', 'Ask AI');
     const handleOpen = () => {
         setIsOpen(true);
+        telemetry.sendSearchAiOpenedMessage({
+            method: 'ai_trigger_button',
+        });
     };
     const handleClose = () => {
         setIsOpen(false);

package/lib/components/Buttons/ConnectMCPButton.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { MCPOption } from '../../core/types';
+export type ConnectMCPButtonProps = {
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    options?: MCPOption[];
+};
+export declare function ConnectMCPButton({ placement, alignment, options, }: ConnectMCPButtonProps): JSX.Element;

package/lib/components/Buttons/ConnectMCPButton.js

@@ -0,0 +1,145 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.ConnectMCPButton = ConnectMCPButton;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const Button_1 = require("../../components/Button/Button");
+const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
+const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
+const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const ConnectIcon_1 = require("../../icons/ConnectIcon/ConnectIcon");
+const hooks_1 = require("../../core/hooks");
+const hooks_2 = require("../../core/hooks");
+const TriggerButton = react_1.default.memo(({ text }) => {
+    return (react_1.default.createElement(StyledButton, { variant: "secondary", icon: react_1.default.createElement(ConnectIcon_1.ConnectIcon, null) }, text));
+});
+const MENU_OPTIONS = [
+    {
+        key: 'cursor',
+        icon: CursorIcon_1.CursorIcon,
+        titleTranslationKey: 'page.actions.connectMcp.cursor',
+        titleDefault: 'Connect to Cursor',
+        descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
+        descriptionDefault: 'Install MCP server on Cursor',
+    },
+    {
+        key: 'vscode',
+        icon: VSCodeIcon_1.VSCodeIcon,
+        titleTranslationKey: 'page.actions.connectMcp.vscode',
+        titleDefault: 'Connect to VS Code',
+        descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
+        descriptionDefault: 'Install MCP server on VS Code',
+    },
+    {
+        key: 'copy',
+        icon: CopyIcon_1.CopyIcon,
+        titleTranslationKey: 'page.actions.connectMcp.copyConfig',
+        titleDefault: 'Copy MCP Configuration',
+        descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
+        descriptionDefault: 'Copy MCP JSON Configuration',
+    },
+];
+function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
+    const { useTranslate } = (0, hooks_2.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { isCopied, triggerButtonText, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({
+        options,
+    });
+    const menuOptions = (0, react_1.useMemo)(() => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)), [visibleOptions]);
+    return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" },
+        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(TriggerButton, { text: triggerButtonText }), triggerEvent: "hover", placement: placement, alignment: alignment, closeOnClick: false },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, menuOptions.map((option) => {
+                const Icon = option.icon;
+                const showCheckmark = option.key === 'copy' && isCopied;
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleAction(option.key) },
+                    react_1.default.createElement(MenuItemContent, null,
+                        react_1.default.createElement(MenuItemIcon, null, showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null))),
+                        react_1.default.createElement(MenuItemText, null,
+                            react_1.default.createElement(MenuItemTitle, null, translate(option.titleTranslationKey, option.titleDefault)),
+                            react_1.default.createElement(MenuItemDescription, null, translate(option.descriptionTranslationKey, option.descriptionDefault))))));
+            })))));
+}
+const ConnectMCPButtonWrapper = styled_components_1.default.div `
+  display: inline-block;
+  position: relative;
+`;
+const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+  --button-gap: var(--connect-mcp-button-gap);
+`;
+const MenuItemContent = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--connect-mcp-button-menu-item-gap);
+  padding: var(--connect-mcp-button-menu-item-padding-block)
+    var(--connect-mcp-button-menu-item-padding-inline);
+`;
+const MenuItemIcon = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--connect-mcp-button-menu-item-icon-size);
+  height: var(--connect-mcp-button-menu-item-icon-size);
+  flex-shrink: 0;
+  border: var(--connect-mcp-button-menu-item-icon-border);
+  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
+  color: var(--connect-mcp-button-menu-item-icon-color);
+`;
+const MenuItemText = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--connect-mcp-button-menu-item-text-gap);
+  flex: 1;
+`;
+const MenuItemTitle = styled_components_1.default.div `
+  font-size: var(--connect-mcp-button-menu-item-title-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-title-line-height);
+  color: var(--connect-mcp-button-menu-item-title-color);
+`;
+const MenuItemDescription = styled_components_1.default.div `
+  font-size: var(--connect-mcp-button-menu-item-description-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-description-line-height);
+  color: var(--connect-mcp-button-menu-item-description-color);
+`;
+//# sourceMappingURL=ConnectMCPButton.js.map

package/lib/components/Buttons/variables.d.ts

@@ -1 +1,2 @@
 export declare const aiAssistantButton: import("styled-components").FlattenSimpleInterpolation;
+export declare const connectMCPButton: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Buttons/variables.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.aiAssistantButton = void 0;
+exports.connectMCPButton = exports.aiAssistantButton = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.aiAssistantButton = (0, styled_components_1.css) `
   /**
    * @tokens AI Assistant Button
@@ -23,7 +24,7 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   /* Positioning */
   --ai-assistant-button-bottom: var(--spacing-xl);
   --ai-assistant-button-right: var(--spacing-xl);
-  --ai-assistant-button-z-index: 1000;
+  --ai-assistant-button-z-index: 50
 
   /* Typography */
   --ai-assistant-button-font-size: var(--font-size-base);
@@ -48,4 +49,45 @@ exports.aiAssistantButton = (0, styled_components_1.css) `
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
+exports.connectMCPButton = (0, styled_components_1.css) `
+  /**
+   * @tokens Connect MCP Button
+   * @presenter Color
+   */
+
+  /* Button gap */
+  --connect-mcp-button-gap: var(--spacing-xs);
+
+  /* Menu item layout */
+  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
+  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
+  --connect-mcp-button-menu-item-padding-inline: 0;
+
+  /* Menu item icon */
+  --connect-mcp-button-menu-item-icon-size: 32px;
+  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
+  --connect-mcp-button-menu-item-icon-border-style: solid;
+  --connect-mcp-button-menu-item-icon-border-width: 1px;
+  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
+    var(--connect-mcp-button-menu-item-icon-border-style)
+    var(--connect-mcp-button-menu-item-icon-border-color);
+  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
+  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
+
+  /* Menu item text */
+  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
+
+  /* Menu item title */
+  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
+  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
+  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
+
+  /* Menu item description */
+  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
+  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
+  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+`;
 //# sourceMappingURL=variables.js.map

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

@@ -16,7 +16,8 @@ const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIc
 const utils_1 = require("../../../core/utils");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const telemetry = useTelemetry();
     const pathPrefix = (0, utils_1.getPathPrefix)();
     return (react_1.default.createElement(CatalogCardWrapper, { "data-component-name": "Catalog/CatalogCardView/CatalogCard", onClick: () => {
@@ -34,7 +35,7 @@ function CatalogCard({ entity, catalogConfig }) {
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = entity.summary) !== null && _a !== void 0 ? _a : '')),
             react_1.default.createElement(CardMetadataSection, null,
                 react_1.default.createElement(MetadataRow, null,
-                    react_1.default.createElement(MetadataLabel, null, "Domains:"),
+                    react_1.default.createElement(MetadataLabel, null, translate('catalog.metadata.domains', 'Domains:')),
                     react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], tagProps: {
                             style: {
                                 fontSize: 'var(--catalog-card-font-size)',
@@ -44,7 +45,7 @@ function CatalogCard({ entity, catalogConfig }) {
                             textTransform: 'none',
                         } })),
                 react_1.default.createElement(MetadataRow, null,
-                    react_1.default.createElement(MetadataLabel, null, "Owners:"),
+                    react_1.default.createElement(MetadataLabel, null, translate('catalog.metadata.owners', 'Owners:')),
                     react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], tagProps: {
                             style: {
                                 fontSize: 'var(--catalog-card-font-size)',

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

@@ -26,7 +26,11 @@ const renderFirstColumnEntitySection = (entity) => {
             return react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity });
     }
 };
-const renderDataSchemaSection = (entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer) => {
+const renderDataSchemaSection = (entity, relatedEntity, 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+RedocSchema, 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+StoreProvider, GraphqlTypeRenderer) => {
     if (entity.type !== 'data-schema') {
         return null;
     }

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

@@ -41,7 +41,7 @@ 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 hooks_2 = require("../../../../core/hooks");
 const CatalogEntityRelationsNode_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode");
 const CatalogEntityRelationsEdge_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge");
 const styles_1 = require("../../../../core/styles");
@@ -64,7 +64,7 @@ function CatalogEntityRelationsGraph({ entity, }) {
     const { items: allRelations } = useFetchCatalogEntitiesRelations({
         entityKey: entity.key,
     });
-    const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = (0, useGraph_1.useGraph)({
+    const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = (0, hooks_2.useGraph)({
         entity,
         relations: allRelations !== null && allRelations !== void 0 ? allRelations : [],
     });

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

@@ -25,6 +25,7 @@ const InfoBarWrapper = styled_components_1.default.div `
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) => hoverEffect &&
     `

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

@@ -10,13 +10,16 @@ const LaunchIcon_1 = require("../../../icons/LaunchIcon/LaunchIcon");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const Link_1 = require("../../../components/Link/Link");
+const hooks_1 = require("../../../core/hooks");
 function CatalogEntityLinks({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const links = Object.entries(entity.links || []);
     if (!links.length) {
         return null;
     }
     return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityLinks" },
-        react_1.default.createElement(Heading, null, "Links"),
+        react_1.default.createElement(Heading, null, translate('catalog.links.label', 'Links')),
         links.map(([key, value]) => (react_1.default.createElement(Link_1.Link, { key: key, color: "var(--catalog-metadata-link-color)", to: value.url, target: "_blank" },
             react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { leftContent: react_1.default.createElement(Label, null,
                     react_1.default.createElement(LinkIcon_1.LinkIcon, null),

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

@@ -56,6 +56,7 @@ const utils_1 = require("../../../core/utils");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const MAX_INITIAL_ITEMS = 4;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function renderMetadataValue(value) {
     if ((0, utils_1.isPlainObject)(value)) {
         return react_1.default.createElement(JsonViewerWrapper, { data: value, expandLevel: 3, controls: false });

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

@@ -8,15 +8,18 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
 const HttpTag_1 = require("../../../components/Tags/HttpTag");
+const hooks_1 = require("../../../core/hooks");
 function CatalogEntityMethodAndPath({ entity }) {
     var _a, _b;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const method = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.method;
     const path = (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.path;
     if (!method || !path) {
         return null;
     }
     return (react_1.default.createElement(LinksWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMethodAndPath" },
-        react_1.default.createElement(Heading, null, "Method & Path"),
+        react_1.default.createElement(Heading, null, translate('catalog.methodAndPath.label', '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),
                 react_1.default.createElement(PathLabel, null, path)), withSeparator: false })));

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

@@ -8,13 +8,16 @@ const react_1 = __importDefault(require("react"));
 const SlackIcon_1 = require("../../../../icons/SlackIcon/SlackIcon");
 const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 function ContactProperty({ entity }) {
     var _a, _b;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const channels = (_b = (_a = entity.contact) === null || _a === void 0 ? void 0 : _a.slack) === null || _b === void 0 ? void 0 : _b.channels;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SlackIcon_1.SlackIcon, null),
-                "Slack channels"), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)', cursor: 'pointer' }, onClick: () => {
+                translate('catalog.contact.label', 'Slack channels')), content: react_1.default.createElement(react_1.default.Fragment, null, channels === null || channels === void 0 ? void 0 : channels.map((channel) => (react_1.default.createElement(Tag_1.Tag, { key: channel.name, textTransform: "none", style: { backgroundColor: 'var(--bg-color)', cursor: 'pointer' }, onClick: () => {
                     if (channel.url) {
                         window.open(channel.url, '_blank');
                     }

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

@@ -8,12 +8,15 @@ const react_1 = __importDefault(require("react"));
 const GraphIcon_1 = require("../../../../icons/GraphIcon/GraphIcon");
 const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 function DomainsProperty({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const { domains = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null),
-                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Tag_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
+                translate('catalog.domains.label', 'Domains')), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Tag_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null), domain === null || domain === void 0 ? void 0 :
                 domain.title)))) })));
 }

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

@@ -9,16 +9,19 @@ const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIco
 const utils_1 = require("../../../../core/utils");
 const CatalogEntityTypeIcon_1 = require("../../../../components/Catalog/CatalogEntityTypeIcon");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 const formatEntityType = (entityType) => {
     return (0, utils_1.capitalize)(entityType.startsWith('api-')
         ? entityType.replace('api-', 'API-').replace(/-/g, ' ')
         : entityType.replace(/-/g, ' '));
 };
 function EntityTypeProperty({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null),
-                "Entity type"), content: react_1.default.createElement(react_1.default.Fragment, null,
+                translate('catalog.entityType.label', 'Entity type')), content: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
                 formatEntityType(entity.type)), hoverEffect: false })));
 }

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

@@ -8,12 +8,15 @@ const react_1 = __importDefault(require("react"));
 const NotesIcon_1 = require("../../../../icons/NotesIcon/NotesIcon");
 const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 function FormatProperty({ entity }) {
     var _a, _b;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(NotesIcon_1.NotesIcon, null),
-                "Format"), content: react_1.default.createElement(react_1.default.Fragment, null,
+                translate('catalog.format.label', 'Format')), content: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Tag_1.Tag, { textTransform: "none", key: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType, style: { backgroundColor: 'var(--bg-color)' } }, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.specType)), hoverEffect: false })));
 }
 //# sourceMappingURL=FormatProperty.js.map

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

@@ -9,12 +9,15 @@ const GithubIcon_1 = require("../../../../icons/GithubIcon/GithubIcon");
 const utils_1 = require("../../../../core/utils");
 const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 function GitProperty({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const git = entity.git;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/GitProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(GithubIcon_1.GithubIcon, null),
-                "Repositories"), content: react_1.default.createElement(react_1.default.Fragment, null, git === null || git === void 0 ? void 0 : git.map((repo) => {
+                translate('catalog.repositories.label', 'Repositories')), content: react_1.default.createElement(react_1.default.Fragment, null, git === null || git === void 0 ? void 0 : git.map((repo) => {
                 const url = new URL(repo);
                 const repoName = (0, utils_1.removeLeadingSlash)(url.pathname);
                 return (react_1.default.createElement(Tag_1.Tag, { key: repo, textTransform: "none", style: { backgroundColor: 'var(--bg-color)' } }, repoName));

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

@@ -8,12 +8,15 @@ const react_1 = __importDefault(require("react"));
 const PeopleIcon_1 = require("../../../../icons/PeopleIcon/PeopleIcon");
 const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 function OwnersProperty({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const { owners = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(PeopleIcon_1.PeopleIcon, null),
-                "Owners"), content: react_1.default.createElement(react_1.default.Fragment, null, owners.map((owner) => (react_1.default.createElement(Tag_1.Tag, { key: owner === null || owner === void 0 ? void 0 : owner.id, style: {
+                translate('catalog.owners.label', 'Owners')), content: react_1.default.createElement(react_1.default.Fragment, null, owners.map((owner) => (react_1.default.createElement(Tag_1.Tag, { key: owner === null || owner === void 0 ? void 0 : owner.id, style: {
                     backgroundColor: 'var(--bg-color)',
                     borderRadius: 'var(--border-radius-xl)',
                 } }, owner === null || owner === void 0 ? void 0 : owner.title)))) })));

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

@@ -8,11 +8,14 @@ const react_1 = __importDefault(require("react"));
 const TagsIcon_1 = require("../../../../icons/TagsIcon/TagsIcon");
 const theme_1 = require("../../../../index.js");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const hooks_1 = require("../../../../core/hooks");
 function TagsProperty({ entity }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TagsIcon_1.TagsIcon, null),
-                "Tags"), content: react_1.default.createElement(theme_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
+                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(theme_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--font-size-base)',
                         borderRadius: 'var(--border-radius)',

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

@@ -8,13 +8,16 @@ const react_1 = __importDefault(require("react"));
 const EmailIcon_1 = require("../../../../icons/EmailIcon/EmailIcon");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const CatalogUserEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogUserEntityCell");
+const hooks_1 = require("../../../../core/hooks");
 function UserEmailProperty({ entity }) {
     var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const email = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.email;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(EmailIcon_1.EmailIcon, null),
-                "Email"), content: react_1.default.createElement(CatalogUserEntityCell_1.Email, null, email), onClick: () => {
+                translate('catalog.email.label', 'Email')), content: react_1.default.createElement(CatalogUserEntityCell_1.Email, null, email), onClick: () => {
                 window.open(`mailto:${email}`, '_blank');
             } })));
 }

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

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

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

@@ -40,7 +40,7 @@ const teamColumns = [
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
+        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-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') },

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

@@ -41,14 +41,14 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Sampler = __importStar(require("openapi-sampler"));
 const hooks_1 = require("../../../core/hooks");
-const useCatalogEntitySchema_1 = require("../../../core/hooks/catalog/useCatalogEntitySchema");
+const hooks_2 = require("../../../core/hooks");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const CopyButton_1 = require("../../../components/Buttons/CopyButton");
 function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     var _a, _b;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { definition, parsedSchema, rawSchema } = (0, useCatalogEntitySchema_1.useCatalogEntitySchema)({ entity, relatedEntity });
+    const { definition, parsedSchema, rawSchema } = (0, hooks_2.useCatalogEntitySchema)({ entity, relatedEntity });
     const isGraphql = ((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType) === 'graphql';
     const graphqlSDL = (_b = entity === null || entity === void 0 ? void 0 : entity.metadata) === null || _b === void 0 ? void 0 : _b.sdl;
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -14,6 +14,7 @@ const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
 const Image_1 = require("../../components/Image/Image");
 const core_1 = require("../../core");
 const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
+const CubeIcon_1 = require("../../icons/CubeIcon/CubeIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
 const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
     var _a, _b;
@@ -34,7 +35,7 @@ const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogCo
     if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
         return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
     }
-    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
+    return react_1.default.createElement(CubeIcon_1.CubeIcon, { color: "var(--catalog-entity-icon-color)" });
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
     const themeConfig = (0, core_1.useThemeConfig)();