diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx index 7710b9330ad3c0..ee2c873e1d3944 100644 --- a/components/dashboard/src/Login.tsx +++ b/components/dashboard/src/Login.tsx @@ -22,6 +22,7 @@ import fresh from "./images/welcome/fresh.svg"; import prebuild from "./images/welcome/prebuild.svg"; import exclamation from "./images/exclamation.svg"; import { getURLHash } from "./App"; +import ErrorMessage from "./components/ErrorMessage"; function Item(props: { icon: string; iconSize?: string; text: string }) { const iconSize = props.iconSize || 28; @@ -225,17 +226,7 @@ export function Login() { )) )} - - {errorMessage && ( -
-
- -
-
-

{errorMessage}

-
-
- )} + {errorMessage && }
diff --git a/components/dashboard/src/components/ErrorMessage.tsx b/components/dashboard/src/components/ErrorMessage.tsx new file mode 100644 index 00000000000000..efbfdff2116b6d --- /dev/null +++ b/components/dashboard/src/components/ErrorMessage.tsx @@ -0,0 +1,30 @@ +/** + * Copyright (c) 2022 Gitpod GmbH. All rights reserved. + * Licensed under the GNU Affero General Public License (AGPL). + * See License-AGPL.txt in the project root for license information. + */ + +import FeedbackComponent from "../feedback-form/FeedbackComponent"; + +function ErrorMessage(props: { imgSrc: string; imgAlt?: string; message: string }) { + return ( + <> +
+
+ {props.imgAlt +
+
+

{props.message}

+
+
+ + + ); +} + +export default ErrorMessage; diff --git a/components/dashboard/src/feedback-form/FeedbackComponent.tsx b/components/dashboard/src/feedback-form/FeedbackComponent.tsx index 0438c95ecb36eb..8d2f50d569e3f0 100644 --- a/components/dashboard/src/feedback-form/FeedbackComponent.tsx +++ b/components/dashboard/src/feedback-form/FeedbackComponent.tsx @@ -11,12 +11,23 @@ import meh from "../images/feedback/meh-emoji.svg"; import crying from "../images/feedback/crying-emoji.svg"; import { trackEvent } from "../Analytics"; -function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; isModal: boolean }) { +function FeedbackComponent(props: { + onClose?: () => void; + isModal: boolean; + isError: boolean; + message?: string; + initialSize?: number; +}) { const [text, setText] = useState(""); const [selectedEmoji, setSelectedEmoji] = useState(); + const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState(false); - const height = props.isModal ? "300px" : ""; - + const onClose = () => { + if (props.onClose) { + props.onClose(); + } + setSelectedEmoji(undefined); + }; const onSubmit = () => { if (selectedEmoji) { const feedbackObj = { @@ -28,7 +39,7 @@ function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; i trackEvent("feedback_submitted", feedbackObj); } - props.onSubmit(); + setIsFeedbackSubmitted(true); }; const handleClick = (emojiScore: number) => { @@ -54,12 +65,33 @@ function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; i )); }; + + const minimisedFirstView = !selectedEmoji && !isFeedbackSubmitted; + const expandedWithTextView = selectedEmoji && !isFeedbackSubmitted; + return ( <> -

Send Feedback

- {selectedEmoji ? ( + {props.isModal && !isFeedbackSubmitted &&

Send Feedback

} + {minimisedFirstView && ( +
+

{props.message}

+ +
{emojiGroup(props.initialSize || 50)}
+
+ )} + {expandedWithTextView && ( <> -
+
{emojiGroup(24)}