@redocly/theme 0.18.2 → 0.18.3

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -3,4 +3,5 @@ export declare const Breadcrumb: (props: {
     label: string;
     link?: string;
     isActive: boolean;
+    onClick?: () => void;
 }) => JSX.Element;

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -8,8 +8,8 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Breadcrumb = (props) => {
-    const { label, link, isActive } = props;
-    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
+    const { label, link, isActive, onClick } = props;
+    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
 };
 exports.Breadcrumb = Breadcrumb;
 const BreadcrumbText = styled_components_1.default.div `

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -7,6 +7,7 @@ exports.Breadcrumbs = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useBreadcrumbs_1 = require("../../mocks/Sidebar/useBreadcrumbs");
+const telemetry_1 = require("../../mocks/telemetry");
 const Breadcrumb_1 = require("./Breadcrumb");
 const Breadcrumbs = (props) => {
     const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)();
@@ -16,7 +17,13 @@ const Breadcrumbs = (props) => {
     return (react_1.default.createElement(Container, { "data-component-name": "Breadcrumbs/Breadcrumbs", className: props.className }, breadcrumbs.map((breadcrumb, idx) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
-            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast }),
+            react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
+                    telemetry_1.telemetry.send('breadcrumb_clicked', {
+                        link: breadcrumb.link,
+                        position: idx + 1,
+                        total_breadcrumbs: breadcrumbs.length,
+                    });
+                } }),
             isLast ? null : react_1.default.createElement("div", null, "/")));
     })));
 };

package/lib/components/Catalog/CatalogCard.js

@@ -33,6 +33,7 @@ const Link_1 = require("../../mocks/Link");
 const Highlight_1 = require("../../ui/Highlight");
 const Tags_1 = require("../../components/Tags");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function CatalogCard({ item }) {
     var _a;
     const { translate } = (0, hooks_1.useTranslate)();
@@ -40,7 +41,7 @@ function CatalogCard({ item }) {
         footer: 'theme.catalog.card.footer',
     };
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
-        React.createElement(StyledCard, null,
+        React.createElement(StyledCard, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardTitle, null,
                 React.createElement(Highlight_1.Highlight, null, item.title)),
             React.createElement(CardDescription, null,

package/lib/components/Catalog/useCatalog.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
+const telemetry_1 = require("../../mocks/telemetry");
 const utils_1 = require("../../utils");
 function useCatalog(items, config) {
     const location = (0, react_router_dom_1.useLocation)();
@@ -60,6 +61,7 @@ function useCatalog(items, config) {
             }
             return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
         });
+        telemetry_1.telemetry.send('catalog_filter_changed', { type: 'toggle' });
         window.scrollTo(0, 0);
     }, []);
     const selectOption = React.useCallback((filterIdx, option) => {
@@ -77,6 +79,7 @@ function useCatalog(items, config) {
                     ? new Set()
                     : f);
         });
+        telemetry_1.telemetry.send('catalog_filter_changed', { type: 'select' });
         window.scrollTo(0, 0);
     }, [filtersWithOptions]);
     React.useEffect(() => {
@@ -136,7 +139,15 @@ function useCatalog(items, config) {
         const groups = config.groupByFirstFilter && ((_a = filters[0].selectedOptions) === null || _a === void 0 ? void 0 : _a.size) > 0
             ? groupByFirstFilter(resolvedFilters, filteredItems)
             : [{ title: 'APIs', items: filteredItems }];
-        return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+        return {
+            groups,
+            filters: resolvedFilters,
+            setFilterTerm: (newTerm) => {
+                setFilterTerm(newTerm);
+                telemetry_1.telemetry.send('catalog_filter_changed', { type: 'term' });
+            },
+            filterTerm,
+        };
     }, [
         filtersWithOptions,
         normalizedItems,

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -9,6 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock");
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 const CopyButton_1 = require("../CopyButton");
 function CodeBlockControls({ children, className, title, controls, }) {
     var _a, _b, _c, _d, _e;
@@ -20,12 +21,15 @@ function CodeBlockControls({ children, className, title, controls, }) {
     const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Title, null, title),
         react_1.default.createElement(ControlsWrapper, null,
-            copy && !((_a = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: copy === null || copy === void 0 ? void 0 : copy.onClick })) : null,
+            copy && !((_a = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, tooltipText: copy.tooltipText, onCopyClick: () => {
+                    copy === null || copy === void 0 ? void 0 : copy.onClick;
+                    telemetry_1.telemetry.send('code_snippet_copied', {});
+                } })) : null,
             expand && !((_b = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _b === void 0 ? void 0 : _b.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
             collapse && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
             select ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "select-all", "data-testid": "select-all", asIcon: controlsType === 'icon', onClick: select === null || select === void 0 ? void 0 : select.onClick, title: select === null || select === void 0 ? void 0 : select.tooltipText }, controlsType === 'icon' ? react_1.default.createElement(icons_1.SelectIcon, null) : (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "clear-all", "data-testid": "clear-all", asIcon: controlsType === 'icon', onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, title: deselect === null || deselect === void 0 ? void 0 : deselect.tooltipText }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.DeselectIcon, null)) : (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? (deselect.label) : ('Clear all'))) : null,
-            report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: report.tooltipText }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : null;
+            report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: report.tooltipText }, report.props, { onClick: () => telemetry_1.telemetry.send('code_snippet_reported', {}) }), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }
 exports.CodeBlockControls = CodeBlockControls;

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -31,6 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ColorModeIcon_1 = require("../../icons/ColorModeIcon");
 const hooks_1 = require("../../hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function ColorModeSwitcher(props) {
     const { className } = props;
     const themeSettings = (0, hooks_1.useThemeConfig)();
@@ -53,6 +54,7 @@ function ColorModeSwitcher(props) {
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
+        telemetry_1.telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
     };
     return (react_1.default.createElement(Wrapper, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", onClick: handelChangeColorMode, modes: modes, role: "link", className: className }, modes.map((mode) => (react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: mode, key: mode })))));
 }

package/lib/components/EditPageButton/EditPageButton.js

@@ -7,8 +7,9 @@ exports.EditPageButton = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
+const telemetry_1 = require("../../mocks/telemetry");
 const EditPageButton = ({ text, to, icon }) => {
-    return (react_1.default.createElement(EditButton, { to: to },
+    return (react_1.default.createElement(EditButton, { to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
         icon ? react_1.default.createElement(ButtonIcon, { src: icon }) : null,
         react_1.default.createElement(ButtonText, null, text)));
 };

package/lib/components/Feedback/Feedback.js

@@ -33,6 +33,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../hooks");
 const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
+const telemetry_1 = require("../../mocks/telemetry");
 const Feedback = (props) => {
     const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
@@ -42,13 +43,22 @@ const Feedback = (props) => {
         switch (type) {
             case 'rating':
                 return (React.createElement(Wrapper, null,
-                    React.createElement(Feedback_1.Rating, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'rating', values, path }) })));
+                    React.createElement(Feedback_1.Rating, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'rating', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'rating' });
+                        } })));
             case 'sentiment':
                 return (React.createElement(Wrapper, null,
-                    React.createElement(Feedback_1.Sentiment, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'sentiment', values, path }) })));
+                    React.createElement(Feedback_1.Sentiment, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'sentiment', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'sentiment' });
+                        } })));
             case 'comment':
                 return (React.createElement(Wrapper, null,
-                    React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => submitFeedback({ type: 'comment', values, path }) })));
+                    React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'comment', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'comment' });
+                        } })));
             default:
                 console.log(`No feedback with type ${type}!`);
                 break;

package/lib/components/Feedback/Sentiment.js

@@ -66,9 +66,13 @@ const Sentiment = ({ settings, onSubmit, className }) => {
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
         React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
-        React.createElement(Vote, { onClick: () => setScore(1) },
+        React.createElement(Vote, { onClick: () => {
+                setScore(1);
+            } },
             React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
-        React.createElement(Vote, { onClick: () => setScore(-1) },
+        React.createElement(Vote, { onClick: () => {
+                setScore(-1);
+            } },
             React.createElement(Thumbs_1.ThumbDown, null))));
 };
 exports.Sentiment = Sentiment;

package/lib/components/Footer/FooterColumn.js

@@ -31,6 +31,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function FooterColumn({ column, className }) {
     var _a;
     const { translate } = (0, hooks_1.useTranslate)();
@@ -41,7 +42,7 @@ function FooterColumn({ column, className }) {
             if (columnItem.type === 'error') {
                 return null;
             }
-            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label },
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
                 react_1.default.createElement(exports.FooterLinkIcon, { url: columnItem.icon, withIconPadding: hasIcon }),
                 translate(columnItem.labelTranslationKey, columnItem.label)));
         })));

package/lib/components/Menu/MenuLinkItem.js

@@ -7,8 +7,9 @@ exports.MenuLinkItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const MenuLink_1 = require("../../components/Menu/MenuLink");
+const telemetry_1 = require("../../mocks/telemetry");
 function MenuLinkItem({ item, children, className, }) {
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className, onClick: () => telemetry_1.telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type }) }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
 }
 exports.MenuLinkItem = MenuLinkItem;
 const Wrapper = styled_components_1.default.span ``;

package/lib/components/Navbar/MobileUserProfile.js

@@ -11,6 +11,7 @@ const LogoutIcon_1 = require("../../icons/LogoutIcon");
 const Profile_1 = require("../../components/Profile/Profile");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function MobileUserProfile() {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { userData, handleLogout, loginUrl } = (0, useProfileProps_1.useProfileProps)();
@@ -20,12 +21,15 @@ function MobileUserProfile() {
     };
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) && !loginUrl)
         return null;
-    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn" }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(UserDataWrapper, null,
             react_1.default.createElement(ProfilePicture, null,
                 react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture })),
             react_1.default.createElement(UserName, null, userData.name)),
-        react_1.default.createElement(LogoutButton, { onClick: () => handleLogout() },
+        react_1.default.createElement(LogoutButton, { onClick: () => {
+                handleLogout();
+                telemetry_1.telemetry.send('logout_menu_item_clicked', {});
+            } },
             react_1.default.createElement(LogoutIcon_1.LogoutIcon, null))))));
 }
 exports.MobileUserProfile = MobileUserProfile;

package/lib/components/Navbar/NavbarItem.js

@@ -34,6 +34,7 @@ const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../mocks/utils");
 const hooks_1 = require("../../mocks/hooks");
 const utils_2 = require("../../utils");
+const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
@@ -43,7 +44,7 @@ function NavbarItem({ navItem, className }) {
         const item = navItem;
         const isActive = pathname ===
             (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
-        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
+        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'link' }) },
             react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
                 item.icon ? react_1.default.createElement(exports.NavbarIcon, { url: item.icon }) : null,
                 react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
@@ -53,7 +54,7 @@ function NavbarItem({ navItem, className }) {
         const groupItems = item.items;
         const groupItemsComponents = groupItems.map((item, index) => (react_1.default.createElement(Link_1.Link, { key: `${item.label}_${index}`, to: item.link }, translate(item.labelTranslationKey, item.label))));
         return (react_1.default.createElement(exports.NavbarMenuItemDropdown, { items: groupItemsComponents, triggerEvent: "hover" },
-            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
+            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'group' }) },
                 react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
                 react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
     }

package/lib/components/NavbarLogo/NavbarLogo.js

@@ -7,11 +7,12 @@ exports.NavbarLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
+const telemetry_1 = require("../../mocks/telemetry");
 function NavbarLogo({ logo, className }) {
     if (!logo.image) {
         return null;
     }
-    const img = (react_1.default.createElement(NavLogo, { className: className, src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo" }));
+    const img = (react_1.default.createElement(NavLogo, { className: className, src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo", onClick: () => telemetry_1.telemetry.send('logo_clicked', {}) }));
     return logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img;
 }
 exports.NavbarLogo = NavbarLogo;

package/lib/components/Profile/LoginLink.js

@@ -8,13 +8,16 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 function LoginLink({ href }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
     const translationKeys = {
         login: 'theme.profile.login',
     };
-    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
+    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login, onClick: () => {
+            telemetry_1.telemetry.send('login_button_clicked', {});
+        } }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
 }
 exports.LoginLink = LoginLink;
 const StyledLink = styled_components_1.default.a.attrs(() => ({

package/lib/components/Profile/UserProfile.js

@@ -33,6 +33,7 @@ const Profile_1 = require("../../components/Profile/Profile");
 const Link_1 = require("../../mocks/Link");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
+const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
 function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
@@ -51,7 +52,10 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
             menuItems.push(react_1.default.createElement(Link_1.Link, { external: item.external, key: item.label, to: item.link || '', separator: item === null || item === void 0 ? void 0 : item.separatorLine }, item.label));
         }
     }
-    menuItems.push(react_1.default.createElement(Logout, { onClick: () => handleLogout(), "data-translation-key": translationKeys.logout, role: "link" }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
+    menuItems.push(react_1.default.createElement(Logout, { onClick: () => {
+            handleLogout();
+            telemetry_1.telemetry.send('logout_menu_item_clicked', {});
+        }, "data-translation-key": translationKeys.logout, role: "link" }, translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
     return (react_1.default.createElement(ProfileDropdown, { items: menuItems },
         react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture, onClick: userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
 }

package/lib/components/Search/SearchItem.js

@@ -34,7 +34,7 @@ const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../components/Search/utils");
 const ProductTag_1 = require("../../components/Search/ProductTag");
 function SearchItem({ item, className, product }) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         var _a;
@@ -49,19 +49,16 @@ function SearchItem({ item, className, product }) {
             item.pathName ? (0, utils_1.highlight)(item.pathName) : null)) : null,
         react_1.default.createElement(Title, null, (0, utils_1.highlight)(item.title)),
         Array.isArray(item.text) ? react_1.default.createElement(Description, null, (0, utils_1.highlight)(item.text)) : null));
-    return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = item.parameters) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.default.Fragment, null, item.parameters.map((param, index) => {
-        var _a, _b;
-        const path = `${param.place} → ${((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : ''}`;
-        return (react_1.default.createElement(SearchLink, { className: className, key: `${item.id}-${index}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
-            header,
-            react_1.default.createElement(Place, null,
-                react_1.default.createElement("div", null,
-                    path,
-                    (0, utils_1.highlight)(param.name)),
-                react_1.default.createElement("div", null, (0, utils_1.highlight)(param.description)))));
-    }))) : (react_1.default.createElement(SearchLink, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    const itemParam = (_a = item.parameters) === null || _a === void 0 ? void 0 : _a[0];
+    return (react_1.default.createElement(react_1.default.Fragment, null, itemParam ? (react_1.default.createElement(SearchLink, { className: className, key: `${item.id}-${0}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
         header,
-        react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → '))))));
+        react_1.default.createElement(Place, null,
+            react_1.default.createElement("div", null,
+                `${itemParam.place} → ${((_b = itemParam.path) === null || _b === void 0 ? void 0 : _b.length) ? ((_c = itemParam.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : ''}`,
+                (0, utils_1.highlight)(itemParam.name)),
+            react_1.default.createElement("div", null, (0, utils_1.highlight)(itemParam.description))))) : (react_1.default.createElement(SearchLink, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        header,
+        react_1.default.createElement(Path, null, (_d = item.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))));
 }
 exports.SearchItem = SearchItem;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Sidebar/SidebarLayout.js

@@ -37,6 +37,7 @@ const MobileSidebarButton_1 = require("../../components/Sidebar/MobileSidebarBut
 const MenuContainer_1 = require("../../components/Menu/MenuContainer");
 const SidebarSearch_1 = require("../../components/Search/SidebarSearch");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
+const telemetry_1 = require("../../mocks/telemetry");
 const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
 const StyledFooterWrapper = (0, styled_components_1.default)(FooterWrapper_1.FooterWrapper) `
   display: none;
@@ -65,7 +66,7 @@ function SidebarLayout({ versions, menu, footer, header, growContent, collapsed,
             react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout", className: className },
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
-            header ? react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, null, header) : null,
+            header ? (react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, { onClick: () => telemetry_1.telemetry.send('back_to_catalog_button_clicked', {}) }, header)) : null,
             versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,
             react_1.default.createElement(MenuContainer_1.MenuContainer, { growContent: growContent }, menu),
             footer && !isOpen ? (react_1.default.createElement(FooterWrapper_1.FooterWrapper, { "data-component-name": "Sidebar/FooterWrapper" }, footer)) : null)))));

package/lib/components/SidebarActions/SidebarActions.js

@@ -9,6 +9,7 @@ const ChangeViewButton_1 = require("../../components/SidebarActions/ChangeViewBu
 const ToggleRightPanelButton_1 = require("../../components/SidebarActions/ToggleRightPanelButton");
 const CollapseSidebarButton_1 = require("../../components/SidebarActions/CollapseSidebarButton");
 const styled_1 = require("../../components/SidebarActions/styled");
+const telemetry_1 = require("../../mocks/telemetry");
 var LayoutVariant;
 (function (LayoutVariant) {
     LayoutVariant["STACKED"] = "stacked";
@@ -17,10 +18,21 @@ var LayoutVariant;
 const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
         isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
-            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
-            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),
+            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: () => {
+                    onChangeRightPanelViewClick();
+                    telemetry_1.telemetry.send('sidebar_samples_button_clicked', {});
+                } })),
+            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: () => {
+                    onChangeViewClick();
+                    telemetry_1.telemetry.send('change_layout_button_clicked', {});
+                } })))),
         !collapsedSidebar && requestAccessButton,
-        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: onChangeCollapseSidebarClick }))));
+        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: () => {
+                onChangeCollapseSidebarClick();
+                collapsedSidebar
+                    ? telemetry_1.telemetry.send('sidebar_item_expanded', {})
+                    : telemetry_1.telemetry.send('sidebar_item_collapsed', {});
+            } }))));
 };
 exports.SidebarActions = SidebarActions;
 //# sourceMappingURL=SidebarActions.js.map

package/lib/components/TableOfContent/TableOfContent.js

@@ -34,6 +34,7 @@ const useActiveHeading_1 = require("../../hooks/useActiveHeading");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 const utils_1 = require("../../components/TableOfContent/utils");
+const telemetry_1 = require("../../mocks/telemetry");
 function TableOfContent(props) {
     const { headings, contentWrapper, className } = props;
     const sidebar = React.useRef(null);
@@ -58,7 +59,7 @@ function TableOfContent(props) {
                         return null;
                     }
                     const href = '#' + heading.id;
-                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
+                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}`, onClick: () => telemetry_1.telemetry.send('toc_item_clicked', {}) }));
                 })))));
 }
 exports.TableOfContent = TableOfContent;

package/lib/config.d.ts

@@ -412,7 +412,7 @@ declare const scorecardConfigSchema: {
 declare const catalogSchema: {
     readonly type: "object";
     readonly additionalProperties: true;
-    readonly required: readonly ["slug", "filters", "groupByFirstFilter", "items"];
+    readonly required: readonly ["slug", "filters", "items"];
     readonly properties: {
         readonly slug: {
             readonly type: "string";
@@ -1662,7 +1662,7 @@ export declare const themeConfigSchema: {
                 readonly '.*': {
                     readonly type: "object";
                     readonly additionalProperties: true;
-                    readonly required: readonly ["slug", "filters", "groupByFirstFilter", "items"];
+                    readonly required: readonly ["slug", "filters", "items"];
                     readonly properties: {
                         readonly slug: {
                             readonly type: "string";

package/lib/config.js

@@ -321,7 +321,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
     type: 'object',
     additionalProperties: true,
-    required: ['slug', 'filters', 'groupByFirstFilter', 'items'],
+    required: ['slug', 'filters', 'items'],
     properties: {
         slug: { type: 'string' },
         filters: { type: 'array', items: catalogFilterSchema },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.0.1"
+    "@redocly/portal-types": "1.0.2"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export const Breadcrumb = (props: { label: string; link?: string; isActive: boolean }) => {
-  const { label, link, isActive } = props;
+export const Breadcrumb = (props: {
+  label: string;
+  link?: string;
+  isActive: boolean;
+  onClick?: () => void;
+}) => {
+  const { label, link, isActive, onClick } = props;
 
   return (
     <BreadcrumbWrapper
       data-component-name="Breadcrumbs/Breadcrumb"
       isLink={link != null}
       isActive={isActive}
+      onClick={onClick}
     >
       {link ? (
         <BreadcrumbLink to={link}>{label}</BreadcrumbLink>

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useBreadcrumbs } from '@portal/Sidebar/useBreadcrumbs';
+import { telemetry } from '@portal/telemetry';
 
 import { Breadcrumb } from './Breadcrumb';
 
@@ -18,7 +19,18 @@ export const Breadcrumbs = (props: { className?: string }) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (
           <React.Fragment key={idx}>
-            <Breadcrumb link={breadcrumb.link} label={breadcrumb.label} isActive={isLast} />
+            <Breadcrumb
+              link={breadcrumb.link}
+              label={breadcrumb.label}
+              isActive={isLast}
+              onClick={() => {
+                telemetry.send('breadcrumb_clicked', {
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  total_breadcrumbs: breadcrumbs.length,
+                });
+              }}
+            />
             {isLast ? null : <div>/</div>}
           </React.Fragment>
         );

package/src/components/Catalog/CatalogCard.tsx

@@ -6,6 +6,7 @@ import { Link } from '@portal/Link';
 import { Highlight } from '@theme/ui/Highlight';
 import { Tags } from '@theme/components/Tags';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   const { translate } = useTranslate();
@@ -14,7 +15,7 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   };
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
-      <StyledCard>
+      <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
         <CardTitle>
           <Highlight>{item.title}</Highlight>
         </CardTitle>

package/src/components/Catalog/useCatalog.ts

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import type { Location } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogItem,
@@ -45,6 +46,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       }
       return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
     });
+    telemetry.send('catalog_filter_changed', { type: 'toggle' });
     window.scrollTo(0, 0);
   }, []);
 
@@ -68,6 +70,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
             : f,
         );
       });
+      telemetry.send('catalog_filter_changed', { type: 'select' });
       window.scrollTo(0, 0);
     },
     [filtersWithOptions],
@@ -153,7 +156,16 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
         ? groupByFirstFilter(resolvedFilters, filteredItems)
         : [{ title: 'APIs', items: filteredItems }];
 
-    return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+    return {
+      groups,
+      filters: resolvedFilters,
+      setFilterTerm: (newTerm) => {
+        setFilterTerm(newTerm);
+
+        telemetry.send('catalog_filter_changed', { type: 'term' });
+      },
+      filterTerm,
+    };
   }, [
     filtersWithOptions,
     normalizedItems,

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { CodeBlockControlButton } from '@theme/components/CodeBlock';
 import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
 import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 import { CopyButton } from '../CopyButton';
 
@@ -68,7 +69,10 @@ export function CodeBlockControls({
             toasterDuration={copy.toasterDuration}
             buttonText={copy.label}
             tooltipText={copy.tooltipText}
-            onCopyClick={copy?.onClick}
+            onCopyClick={() => {
+              copy?.onClick;
+              telemetry.send('code_snippet_copied', {});
+            }}
           />
         ) : null}
 
@@ -139,6 +143,7 @@ export function CodeBlockControls({
             asIcon={controlsType === 'icon'}
             title={report.tooltipText}
             {...report.props}
+            onClick={() => telemetry.send('code_snippet_reported', {})}
           >
             {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
           </CodeBlockControlButton>

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
 import { useMount, useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 interface ColorModeSwitcherProps {
   className?: string;
@@ -34,6 +35,8 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
+
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
   };
 
   return (

package/src/components/EditPageButton/EditPageButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
+import { telemetry } from '@portal/telemetry';
 
 export interface EditPageButtonProps {
   text: string;
@@ -11,7 +12,7 @@ export interface EditPageButtonProps {
 
 export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
   return (
-    <EditButton to={to}>
+    <EditButton to={to} onClick={() => telemetry.send('edit_page_link_clicked', {})}>
       {icon ? <ButtonIcon src={icon} /> : null}
       <ButtonText>{text}</ButtonText>
     </EditButton>

package/src/components/Feedback/Feedback.tsx

@@ -6,6 +6,7 @@ import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedbac
 import { Rating, Sentiment, Comment } from '@theme/components/Feedback';
 import { useThemeConfig } from '@theme/hooks';
 import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+import { telemetry } from '@portal/telemetry';
 
 export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const { submitFeedback } = useSubmitFeedback();
@@ -20,7 +21,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Rating
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'rating', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'rating', values, path });
+                telemetry.send('feedback_sent', { type: 'rating' });
+              }}
             />
           </Wrapper>
         );
@@ -29,7 +33,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Sentiment
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'sentiment', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'sentiment', values, path });
+                telemetry.send('feedback_sent', { type: 'sentiment' });
+              }}
             />
           </Wrapper>
         );
@@ -38,7 +45,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Comment
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'comment', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'comment', values, path });
+                telemetry.send('feedback_sent', { type: 'comment' });
+              }}
             />
           </Wrapper>
         );

package/src/components/Feedback/Sentiment.tsx

@@ -69,10 +69,18 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'Was this page helpful?')}
       </Label>
-      <Vote onClick={() => setScore(1)}>
+      <Vote
+        onClick={() => {
+          setScore(1);
+        }}
+      >
         <ThumbUp text="Yes" />
       </Vote>
-      <Vote onClick={() => setScore(-1)}>
+      <Vote
+        onClick={() => {
+          setScore(-1);
+        }}
+      >
         <ThumbDown />
       </Vote>
     </Wrapper>

package/src/components/Footer/FooterColumn.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
@@ -35,6 +36,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
             external={columnItem.external}
             target={columnItem.target}
             data-cy={columnItem.label}
+            onClick={() => telemetry.send('footer_item_clicked', {})}
           >
             <FooterLinkIcon url={columnItem.icon} withIconPadding={hasIcon} />
             {translate(columnItem.labelTranslationKey, columnItem.label)}

package/src/components/Menu/MenuLinkItem.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { MenuLink } from '@theme/components/Menu/MenuLink';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { telemetry } from '@portal/telemetry';
 
 export function MenuLinkItem({
   item,
@@ -10,7 +11,11 @@ export function MenuLinkItem({
   className,
 }: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/MenuLinkItem" className={className}>
+    <Wrapper
+      data-component-name="Sidebar/MenuLinkItem"
+      className={className}
+      onClick={() => telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type })}
+    >
       {item.link ? (
         <MenuLink to={item.link} {...item}>
           {children}

package/src/components/Navbar/MobileUserProfile.tsx

@@ -6,6 +6,7 @@ import { LogoutIcon } from '@theme/icons/LogoutIcon';
 import { AvatarWrapper, ProfileWrapper, Profile } from '@theme/components/Profile/Profile';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
@@ -20,7 +21,11 @@ export function MobileUserProfile() {
   return (
     <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
       {!userData?.isAuthenticated ? (
-        <LoginButton href={loginUrl} data-cy="login-btn">
+        <LoginButton
+          href={loginUrl}
+          data-cy="login-btn"
+          onClick={() => telemetry.send('login_button_clicked', {})}
+        >
           {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
         </LoginButton>
       ) : (
@@ -31,7 +36,12 @@ export function MobileUserProfile() {
             </ProfilePicture>
             <UserName>{userData.name}</UserName>
           </UserDataWrapper>
-          <LogoutButton onClick={() => handleLogout()}>
+          <LogoutButton
+            onClick={() => {
+              handleLogout();
+              telemetry.send('logout_menu_item_clicked', {});
+            }}
+          >
             <LogoutIcon />
           </LogoutButton>
         </>

package/src/components/Navbar/NavbarItem.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@theme/types/portal';
 import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
+import { telemetry } from '@portal/telemetry';
 import { Dropdown } from '@theme/components/Dropdown';
 
 export interface NavbarItemProps {
@@ -34,6 +35,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         active={isActive}
         data-component-name="Navbar/NavbarItem"
         className={className}
+        onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'link' })}
       >
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           {item.icon ? <NavbarIcon url={item.icon} /> : null}
@@ -58,6 +60,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           active={false}
           data-component-name="Navbar/NavbarItem"
           className={className}
+          onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'group' })}
         >
           <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
+import { telemetry } from '@portal/telemetry';
 
 export type NavbarLogoProps = {
   logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
@@ -19,6 +20,7 @@ export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element |
       src={logo.image}
       alt={logo.altText}
       data-component-name="NavbarLogo/NavbarLogo"
+      onClick={() => telemetry.send('logo_clicked', {})}
     />
   );
   return logo.link ? <Link to={logo.link}>{img}</Link> : img;

package/src/components/Profile/LoginLink.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export interface LoginLinkProps {
   href: string;
@@ -16,7 +17,13 @@ export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   };
 
   return (
-    <StyledLink href={href} data-translation-key={translationKeys.login}>
+    <StyledLink
+      href={href}
+      data-translation-key={translationKeys.login}
+      onClick={() => {
+        telemetry.send('login_button_clicked', {});
+      }}
+    >
       {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
     </StyledLink>
   );

package/src/components/Profile/UserProfile.tsx

@@ -7,6 +7,7 @@ import { Profile } from '@theme/components/Profile/Profile';
 import { Link } from '@portal/Link';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 import { Dropdown, DropdownList, DropdownListItem } from '@theme/components/Dropdown';
 
 export function UserProfile({
@@ -49,7 +50,10 @@ export function UserProfile({
 
   menuItems.push(
     <Logout
-      onClick={() => handleLogout()}
+      onClick={() => {
+        handleLogout();
+        telemetry.send('logout_menu_item_clicked', {});
+      }}
       data-translation-key={translationKeys.logout}
       role="link"
     >

package/src/components/Search/SearchItem.tsx

@@ -37,35 +37,30 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
     </Wrapper>
   );
 
+  const itemParam = item.parameters?.[0];
+
   return (
     <>
-      {item.parameters?.length ? (
-        <>
-          {item.parameters.map((param, index) => {
-            const path = `${param.place} → ${
-              param.path?.length ? param.path?.join(' → ') + ' → ' : ''
-            }`;
-            return (
-              <SearchLink
-                className={className}
-                key={`${item.id}-${index}`}
-                to={item.url}
-                tabIndex={0}
-                innerRef={ref}
-                data-component-name="Search/SearchItem"
-              >
-                {header}
-                <Place>
-                  <div>
-                    {path}
-                    {highlight(param.name)}
-                  </div>
-                  <div>{highlight(param.description)}</div>
-                </Place>
-              </SearchLink>
-            );
-          })}
-        </>
+      {itemParam ? (
+        <SearchLink
+          className={className}
+          key={`${item.id}-${0}`}
+          to={item.url}
+          tabIndex={0}
+          innerRef={ref}
+          data-component-name="Search/SearchItem"
+        >
+          {header}
+          <Place>
+            <div>
+              {`${itemParam.place} → ${
+                itemParam.path?.length ? itemParam.path?.join(' → ') + ' → ' : ''
+              }`}
+              {highlight(itemParam.name)}
+            </div>
+            <div>{highlight(itemParam.description)}</div>
+          </Place>
+        </SearchLink>
       ) : (
         <SearchLink
           className={className}

package/src/components/Sidebar/SidebarLayout.tsx

@@ -9,6 +9,7 @@ import { MobileSidebarButton } from '@theme/components/Sidebar/MobileSidebarButt
 import { MenuContainer } from '@theme/components/Menu/MenuContainer';
 import { SidebarSearch } from '@theme/components/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { telemetry } from '@portal/telemetry';
 
 import { MobileSidebarIcon } from './MobileSidebarIcon';
 
@@ -81,7 +82,11 @@ export function SidebarLayout({
         <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
           {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
-            {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
+            {header ? (
+              <HeaderWrapper onClick={() => telemetry.send('back_to_catalog_button_clicked', {})}>
+                {header}
+              </HeaderWrapper>
+            ) : null}
             {versions ? <>{versions}</> : null}
             <MenuContainer growContent={growContent}>{menu}</MenuContainer>
             {footer && !isOpen ? (

package/src/components/SidebarActions/SidebarActions.tsx

@@ -7,6 +7,7 @@ import {
   ControlsWrap,
   ControlsWrapChangeLayoutButtons,
 } from '@theme/components/SidebarActions/styled';
+import { telemetry } from '@portal/telemetry';
 
 export enum LayoutVariant {
   STACKED = 'stacked',
@@ -54,11 +55,20 @@ export const SidebarActions = ({
           {initialShowRightPanelToggle && (
             <ToggleRightPanelButton
               showRightPanelToggle={showRightPanelToggle}
-              onClick={onChangeRightPanelViewClick}
+              onClick={() => {
+                onChangeRightPanelViewClick();
+                telemetry.send('sidebar_samples_button_clicked', {});
+              }}
             />
           )}
           {showChangeLayoutButton && showRightPanelToggle && (
-            <ChangeViewButton layout={layout} onClick={onChangeViewClick} />
+            <ChangeViewButton
+              layout={layout}
+              onClick={() => {
+                onChangeViewClick();
+                telemetry.send('change_layout_button_clicked', {});
+              }}
+            />
           )}
         </ControlsWrapChangeLayoutButtons>
       )}
@@ -66,7 +76,12 @@ export const SidebarActions = ({
       {!hideCollapseSidebarButton && (
         <CollapseSidebarButton
           initialValue={collapsedSidebar}
-          onClick={onChangeCollapseSidebarClick}
+          onClick={() => {
+            onChangeCollapseSidebarClick();
+            collapsedSidebar
+              ? telemetry.send('sidebar_item_expanded', {})
+              : telemetry.send('sidebar_item_collapsed', {});
+          }}
         />
       )}
     </ControlsWrap>

package/src/components/TableOfContent/TableOfContent.tsx

@@ -11,6 +11,7 @@ import {
   getDisplayedHeadings,
   getLeastDepth,
 } from '@theme/components/TableOfContent/utils';
+import { telemetry } from '@portal/telemetry';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -64,6 +65,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
                 className={activeHeadingId === heading.id ? 'active' : ''}
                 dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                 data-cy={`toc-${heading.value}`}
+                onClick={() => telemetry.send('toc_item_clicked', {})}
               />
             );
           })}

package/src/config.ts

@@ -362,7 +362,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
   type: 'object',
   additionalProperties: true,
-  required: ['slug', 'filters', 'groupByFirstFilter', 'items'],
+  required: ['slug', 'filters', 'items'],
   properties: {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },