@redocly/theme 0.25.0 → 0.25.1

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -29,7 +29,7 @@ function CodeBlockControls({ children, className, title, controls, }) {
             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, { 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;
+            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;
     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/Feedback/Feedback.js

@@ -40,6 +40,7 @@ const Feedback = (props) => {
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
     const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), props);
     const renderFeedbackComponent = () => {
+        const { type, settings, path } = feedbackConf;
         switch (type) {
             case 'rating':
                 return (React.createElement(Wrapper, null,
@@ -70,7 +71,6 @@ const Feedback = (props) => {
                 break;
         }
     };
-    const { type, settings, path } = feedbackConf;
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
 };
 exports.Feedback = Feedback;

package/lib/components/Feedback/Mood.js

@@ -41,6 +41,7 @@ var MOOD_STATES;
 const Mood = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [score, setScore] = React.useState('');
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
@@ -72,11 +73,14 @@ const Mood = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for your feedback!'))));
     }

package/lib/components/Feedback/Rating.js

@@ -33,6 +33,7 @@ const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../mocks/hooks");
 const Rating = ({ settings, onSubmit, className }) => {
     const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
@@ -51,12 +52,15 @@ const Rating = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-            max: maxRating,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+                max: maxRating,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }

package/lib/components/Feedback/ReportDialog.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,14 +38,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportDialog = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const telemetry_1 = require("../../mocks/telemetry");
 const Comment_1 = require("../../components/Feedback/Comment");
 const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, }) => {
     const { label } = settings;
+    const { pathname } = (0, react_router_dom_1.useLocation)();
     return (React.createElement(Wrapper, { className: "modal" },
-        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => {
-                submitFeedback({ type: 'problem', values: value, path: location });
+        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(void 0, void 0, void 0, function* () {
+                yield submitFeedback({ type: 'problem', values: value, location, path: pathname });
+                telemetry_1.telemetry.send('code_snippet_reported', {});
                 onSubmit();
-            }, onCancel: onCancel })));
+            }), onCancel: onCancel })));
 };
 exports.ReportDialog = ReportDialog;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -34,6 +34,7 @@ const Thumbs_1 = require("../../components/Feedback/Thumbs");
 const hooks_1 = require("../../mocks/hooks");
 const Sentiment = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
@@ -56,11 +57,14 @@ const Sentiment = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }

package/lib/components/Feedback/types.d.ts

@@ -101,6 +101,6 @@ export type ReportDialogProps = {
     settings: {
         label?: string;
     };
-    submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+    submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
     className?: string;
 };

package/lib/components/Feedback/useReportDialog.js

@@ -4,11 +4,13 @@ exports.useReportDialog = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../../mocks/hooks");
 const hooks_2 = require("../../hooks");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
 function useReportDialog() {
     const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
     const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
     const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) === false; // TODO: report temporary disabled by default
     const { translate } = (0, hooks_1.useTranslate)();
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const translationKeys = {
         buttonText: 'theme.codeSnippet.report.buttonText',
         tooltipText: 'theme.codeSnippet.report.tooltipText',
@@ -32,6 +34,7 @@ function useReportDialog() {
         },
         onSubmit: hideReportDialog,
         onCancel: hideReportDialog,
+        submitFeedback,
     };
     return {
         reportDialog: { visible: isReportDialogShown, props: reportDialogProps },

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -4,6 +4,7 @@ export type SubmitFeedbackParams = {
     type: string;
     values: Record<string, unknown>;
     path?: string;
+    location?: string;
 };
 export type FeedbackProps = {
     type: FEEDBACK_TYPES;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -142,7 +142,6 @@ 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/Feedback/Feedback.tsx

@@ -15,6 +15,8 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const feedbackConf = { ...themeFeedbackConf, ...props };
 
   const renderFeedbackComponent = () => {
+    const { type, settings, path } = feedbackConf;
+
     switch (type) {
       case 'rating':
         return (
@@ -70,8 +72,6 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
     }
   };
 
-  const { type, settings, path } = feedbackConf;
-
   return <React.Fragment key={pathname}>{renderFeedbackComponent()}</React.Fragment>;
 };
 

package/src/components/Feedback/Mood.tsx

@@ -15,6 +15,7 @@ export enum MOOD_STATES {
 export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [score, setScore] = React.useState('');
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
@@ -68,11 +69,16 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+      });
+
+      setIsSubmitted(true);
+    }
+
     return (
       <Wrapper>
         <Label data-translation-key={translationKeys.submitText}>

package/src/components/Feedback/Rating.tsx

@@ -18,6 +18,7 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
     comment: commentSettings,
     reasons: reasonsSettings,
   } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
@@ -49,12 +50,16 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-      max: maxRating,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+        max: maxRating,
+      });
+      setIsSubmitted(true);
+    }
+
     return (
       <Wrapper>
         <Label data-translation-key={translationKeys.submitText}>

package/src/components/Feedback/ReportDialog.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import { Comment } from '@theme/components/Feedback/Comment';
 import type { ReportDialogProps } from '@theme/components/Feedback';
 
@@ -12,13 +14,15 @@ export const ReportDialog = ({
   submitFeedback,
 }: ReportDialogProps): JSX.Element => {
   const { label } = settings;
+  const { pathname } = useLocation();
 
   return (
     <Wrapper className="modal">
       <Comment
         settings={{ label }}
-        onSubmit={(value) => {
-          submitFeedback({ type: 'problem', values: value, path: location });
+        onSubmit={async (value) => {
+          await submitFeedback({ type: 'problem', values: value, location, path: pathname });
+          telemetry.send('code_snippet_reported', {});
           onSubmit();
         }}
         onCancel={onCancel}

package/src/components/Feedback/Sentiment.tsx

@@ -8,6 +8,7 @@ import { useTranslate } from '@portal/hooks';
 
 export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
@@ -47,11 +48,14 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+      });
+      setIsSubmitted(true);
+    }
     return (
       <Wrapper>
         <Label data-translation-key={translationKeys.submitText}>

package/src/components/Feedback/types.ts

@@ -90,6 +90,6 @@ export type ReportDialogProps = {
   settings: {
     label?: string;
   };
-  submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+  submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
   className?: string;
 };

package/src/components/Feedback/useReportDialog.ts

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import type { ReportDialogProps } from '@theme/components/Feedback/types';
 import { useTranslate } from '@portal/hooks';
 import { useThemeConfig } from '@theme/hooks';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
 
 export interface ReportButtonProps {
   onClick: () => void;
@@ -20,6 +21,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const [isReportDialogShown, setIsReportDialogShown] = useState(false);
   const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
   const { translate } = useTranslate();
+  const { submitFeedback } = useSubmitFeedback();
   const translationKeys = {
     buttonText: 'theme.codeSnippet.report.buttonText',
     tooltipText: 'theme.codeSnippet.report.tooltipText',
@@ -44,6 +46,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,
+    submitFeedback,
   };
 
   return {

package/src/types/portal/src/shared/types/feedback.ts

@@ -6,6 +6,7 @@ export type SubmitFeedbackParams = {
   type: string;
   values: Record<string, unknown>;
   path?: string;
+  location?: string;
 };
 
 export type FeedbackProps = {