@finos/legend-application-marketplace
Version:
Legend Marketplace application core
195 lines • 12.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
* Copyright (c) 2025-present, Goldman Sachs
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useRef, useState } from 'react';
import { IconButton, Popover } from '@mui/material';
import { ChatIcon, StarIcon, SendIcon, TimesIcon, CheckCircleIcon, clsx, } from '@finos/legend-art';
import { assertErrorThrown, LogEvent } from '@finos/legend-shared';
import { useLegendMarketplaceBaseStore } from '../../application/providers/LegendMarketplaceFrameworkProvider.js';
import { LegendMarketplaceTelemetryHelper } from '../../__lib__/LegendMarketplaceTelemetryHelper.js';
import { LEGEND_MARKETPLACE_APP_EVENT } from '../../__lib__/LegendMarketplaceAppEvent.js';
import { LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN } from '../../__lib__/LegendMarketplaceNavigation.js';
const MAX_SUGGESTION_LENGTH = 1000;
const STAR_RATINGS = [1, 2, 3, 4, 5];
const AUTO_CLOSE_DELAY_MS = 5000;
const DRAG_THRESHOLD = 5;
var FeedbackWidgetState;
(function (FeedbackWidgetState) {
FeedbackWidgetState["IDLE"] = "IDLE";
FeedbackWidgetState["SUBMITTING"] = "SUBMITTING";
FeedbackWidgetState["SUCCESS"] = "SUCCESS";
FeedbackWidgetState["ERROR"] = "ERROR";
})(FeedbackWidgetState || (FeedbackWidgetState = {}));
export const FeedbackWidget = observer(() => {
const baseStore = useLegendMarketplaceBaseStore();
const applicationStore = baseStore.applicationStore;
const [isOpen, setIsOpen] = useState(false);
const [rating, setRating] = useState(0);
const [hoveredRating, setHoveredRating] = useState(0);
const [suggestion, setSuggestion] = useState('');
const [submissionState, setSubmissionState] = useState(FeedbackWidgetState.IDLE);
const autoCloseTimerRef = useRef(null);
const [position, setPosition] = useState(undefined);
const isDraggingRef = useRef(false);
const hasDraggedRef = useRef(false);
const dragStartRef = useRef({
mouseX: 0,
mouseY: 0,
});
const widgetRef = useRef(null);
const toggleRef = useRef(null);
const clearAutoCloseTimer = useCallback(() => {
if (autoCloseTimerRef.current) {
clearTimeout(autoCloseTimerRef.current);
autoCloseTimerRef.current = null;
}
}, []);
const handleMouseMove = useCallback((e) => {
if (!isDraggingRef.current) {
return;
}
const dx = e.clientX - dragStartRef.current.mouseX;
const dy = e.clientY - dragStartRef.current.mouseY;
if (!hasDraggedRef.current &&
Math.abs(dx) < DRAG_THRESHOLD &&
Math.abs(dy) < DRAG_THRESHOLD) {
return;
}
hasDraggedRef.current = true;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const toggleSize = 52;
const newX = Math.min(Math.max(0, e.clientX - toggleSize / 2), viewportWidth - toggleSize);
const newY = Math.min(Math.max(0, e.clientY - toggleSize / 2), viewportHeight - toggleSize);
setPosition({ x: newX, y: newY });
}, []);
const handleMouseUp = useCallback(() => {
isDraggingRef.current = false;
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
}, [handleMouseMove]);
const handleMouseDown = useCallback((e) => {
e.preventDefault();
isDraggingRef.current = true;
hasDraggedRef.current = false;
dragStartRef.current = { mouseX: e.clientX, mouseY: e.clientY };
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}, [handleMouseMove, handleMouseUp]);
useEffect(() => {
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [handleMouseMove, handleMouseUp]);
const resetForm = useCallback(() => {
setRating(0);
setHoveredRating(0);
setSuggestion('');
setSubmissionState(FeedbackWidgetState.IDLE);
clearAutoCloseTimer();
}, [clearAutoCloseTimer]);
const handleToggle = useCallback(() => {
if (hasDraggedRef.current) {
return;
}
if (isOpen) {
resetForm();
}
setIsOpen(!isOpen);
}, [isOpen, resetForm]);
const handleClose = useCallback(() => {
clearAutoCloseTimer();
resetForm();
setIsOpen(false);
}, [resetForm, clearAutoCloseTimer]);
useEffect(() => {
if (submissionState === FeedbackWidgetState.SUCCESS) {
autoCloseTimerRef.current = setTimeout(() => {
handleClose();
}, AUTO_CLOSE_DELAY_MS);
}
return () => {
clearAutoCloseTimer();
};
}, [submissionState, handleClose, clearAutoCloseTimer]);
const handleSubmit = useCallback(async () => {
if (rating === 0) {
return;
}
setSubmissionState(FeedbackWidgetState.SUBMITTING);
try {
const username = applicationStore.identityService.currentUser;
const originPage = window.location.pathname;
const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get(LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN.QUERY) ?? '';
const searchFilters = urlParams.get(LEGEND_MARKETPLACE_LAKEHOUSE_SEARCH_RESULTS_QUERY_PARAM_TOKEN.USE_PRODUCER_SEARCH) === 'true'
? 'useProducerSearch=true'
: '';
const feedbackRequest = {
username,
origin_page: originPage,
query: searchQuery,
filters: searchFilters,
rating,
suggestion: suggestion.trim(),
};
await baseStore.marketplaceServerClient.submitFeedback(feedbackRequest);
LegendMarketplaceTelemetryHelper.logEvent_SubmitFeedback(applicationStore.telemetryService, originPage, rating);
setSubmissionState(FeedbackWidgetState.SUCCESS);
}
catch (error) {
assertErrorThrown(error);
applicationStore.logService.error(LogEvent.create(LEGEND_MARKETPLACE_APP_EVENT.SUBMIT_FEEDBACK_FAILURE), error);
setSubmissionState(FeedbackWidgetState.ERROR);
}
}, [applicationStore, baseStore.marketplaceServerClient, rating, suggestion]);
const isSubmitDisabled = rating === 0 || submissionState === FeedbackWidgetState.SUBMITTING;
return (_jsxs("div", { ref: widgetRef, className: clsx('legend-marketplace-feedback-widget', {
'legend-marketplace-feedback-widget--dragged': position !== undefined,
}), style: position !== undefined
? { left: `${position.x}px`, top: `${position.y}px` }
: undefined, children: [_jsx(Popover, { open: isOpen, anchorEl: toggleRef.current, anchorOrigin: {
vertical: 'top',
horizontal: 'right',
}, transformOrigin: {
vertical: 'bottom',
horizontal: 'right',
}, onClose: handleClose, disableRestoreFocus: true, slotProps: {
paper: {
className: 'legend-marketplace-feedback-widget__popup',
},
}, sx: {
'& .MuiPopover-paper': {
overflow: 'hidden',
},
}, children: submissionState === FeedbackWidgetState.SUCCESS ? (_jsxs("div", { className: "legend-marketplace-feedback-widget__success", children: [_jsx("div", { className: "legend-marketplace-feedback-widget__success-progress", children: _jsx("div", { className: "legend-marketplace-feedback-widget__success-progress-bar" }) }), _jsx(CheckCircleIcon, { className: "legend-marketplace-feedback-widget__success-icon" }), _jsx("h3", { className: "legend-marketplace-feedback-widget__success-title", children: "Thank you!" }), _jsx("p", { className: "legend-marketplace-feedback-widget__success-message", children: "Your feedback has been submitted successfully." })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "legend-marketplace-feedback-widget__header", children: [_jsx("h3", { className: "legend-marketplace-feedback-widget__title", children: "Marketplace Feedback" }), _jsx(IconButton, { className: "legend-marketplace-feedback-widget__header-close", onClick: handleClose, size: "small", title: "Close feedback", children: _jsx(TimesIcon, {}) })] }), _jsxs("div", { className: "legend-marketplace-feedback-widget__body", children: [_jsxs("div", { className: "legend-marketplace-feedback-widget__rating-section", children: [_jsx("label", { className: "legend-marketplace-feedback-widget__label", children: "How would you rate your experience?" }), _jsx("div", { className: "legend-marketplace-feedback-widget__stars", children: STAR_RATINGS.map((star) => (_jsx("button", { className: clsx('legend-marketplace-feedback-widget__star', {
'legend-marketplace-feedback-widget__star--active': star <= (hoveredRating || rating),
}), onClick: () => setRating(star), onMouseEnter: () => setHoveredRating(star), onMouseLeave: () => setHoveredRating(0), children: _jsx(StarIcon, {}) }, star))) })] }), _jsxs("div", { className: "legend-marketplace-feedback-widget__text-section", children: [_jsx("label", { className: "legend-marketplace-feedback-widget__label", children: "Got ideas? We're all ears \uD83D\uDC42 (optional)" }), _jsx("textarea", { className: "legend-marketplace-feedback-widget__textarea", value: suggestion, onChange: (e) => {
if (e.target.value.length <= MAX_SUGGESTION_LENGTH) {
setSuggestion(e.target.value);
}
}, placeholder: "Spill the tea \u2615 \u2014 what would make Marketplace better?", rows: 4 }), _jsxs("span", { className: "legend-marketplace-feedback-widget__char-count", children: [suggestion.length, "/", MAX_SUGGESTION_LENGTH] })] }), submissionState === FeedbackWidgetState.ERROR && (_jsx("p", { className: "legend-marketplace-feedback-widget__error", children: "Failed to submit feedback. Please try again." }))] }), _jsx("div", { className: "legend-marketplace-feedback-widget__footer", children: _jsx("button", { className: clsx('legend-marketplace-feedback-widget__submit-btn', {
'legend-marketplace-feedback-widget__submit-btn--disabled': isSubmitDisabled,
}), onClick: () => {
// eslint-disable-next-line no-void
void handleSubmit();
}, disabled: isSubmitDisabled, children: submissionState === FeedbackWidgetState.SUBMITTING ? ('Submitting...') : (_jsxs(_Fragment, { children: [_jsx(SendIcon, {}), "Submit"] })) }) })] })) }), _jsx("button", { ref: toggleRef, className: clsx('legend-marketplace-feedback-widget__toggle', {
'legend-marketplace-feedback-widget__toggle--active': isOpen,
}), onClick: handleToggle, onMouseDown: handleMouseDown, "aria-label": "Send feedback", children: isOpen ? _jsx(TimesIcon, {}) : _jsx(ChatIcon, {}) })] }));
});
//# sourceMappingURL=FeedbackWidget.js.map