Feedback modal

gitpod-io · May 23, 2022 · 196c5e7 · 196c5e7
1 parent e148325
commit 196c5e7
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 45 deletions.
diff --git 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() {
                                     ))
                                 )}
                             </div>
-
-                            {errorMessage && (
-                                <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
-                                    <div className="pr-3 self-center w-6">
-                                        <img src={exclamation} />
-                                    </div>
-                                    <div className="flex-1 flex flex-col">
-                                        <p className="text-gitpod-red text-sm">{errorMessage}</p>
-                                    </div>
-                                </div>
-                            )}
+                            {errorMessage && <ErrorMessage imgSrc={exclamation} message={errorMessage} />}
                         </div>
                     </div>
                     <div className="flex-none mx-auto h-20 text-center">

diff --git a/components/dashboard/src/components/ErrorMessage.tsx 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 (
+        <>
+            <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
+                <div className="pr-3 self-center w-6">
+                    <img src={props.imgSrc} alt={props.imgAlt || "An error message"} />
+                </div>
+                <div className="flex-1 flex flex-col">
+                    <p className="text-gitpod-red text-sm">{props.message}</p>
+                </div>
+            </div>
+            <FeedbackComponent
+                message={"Was this error message helpful?"}
+                initialSize={24}
+                isError={true}
+                isModal={false}
+            />
+        </>
+    );
+}
+
+export default ErrorMessage;
diff --git 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<string>("");
     const [selectedEmoji, setSelectedEmoji] = useState<number | undefined>();
+    const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState<boolean>(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
             </button>
         ));
     };
+
+    const minimisedFirstView = !selectedEmoji && !isFeedbackSubmitted;
+    const expandedWithTextView = selectedEmoji && !isFeedbackSubmitted;
+
     return (
         <>
-            <h3 className="mb-4">Send Feedback</h3>
-            {selectedEmoji ? (
+            {props.isModal && !isFeedbackSubmitted && <h3 className="mb-4">Send Feedback</h3>}
+            {minimisedFirstView && (
+                <div
+                    className={
+                        "flex flex-col justify-center px-6 py-4 border-t border-gray-200 dark:border-gray-800 " +
+                        (props.isError ? "mt-6" : "")
+                    }
+                >
+                    <p className="text-center text-lg mb-3 text-gray-500 dark:text-gray-400">{props.message}</p>
+
+                    <div className="flex items-center justify-center w-full">{emojiGroup(props.initialSize || 50)}</div>
+                </div>
+            )}
+            {expandedWithTextView && (
                 <>
-                    <div className="flex flex-col -mx-6 px-6 py-4 border-t border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+                    <div
+                        className={
+                            "flex flex-col px-6 py-4 border-t border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 " +
+                            (props.isError ? "w-96 mt-6" : "")
+                        }
+                    >
                         <div className="relative">
                             <div className="absolute flex bottom-5 right-5 -space-x-3">{emojiGroup(24)}</div>
                             <textarea
@@ -83,25 +115,19 @@ function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; i
                             </p>
                         </div>
                     </div>
-                    <div className="flex justify-end mt-6">
-                        <button className="secondary" onClick={props.onClose}>
+                    <div className={"flex justify-end mt-6 " + (props.isError ? "mb-6" : "")}>
+                        <button className="secondary" onClick={onClose}>
                             Cancel
                         </button>
                         <button className="ml-2" onClick={onSubmit}>
                             Send Feedback
                         </button>
                     </div>
                 </>
-            ) : (
-                <div
-                    className="flex flex-col justify-center -mx-6 px-6 py-4 border-t border-gray-200 dark:border-gray-800"
-                    style={{ height: height }}
-                >
-                    <p className="text-center text-lg mb-8 text-gray-500 dark:text-gray-400">
-                        We'd love to know what you think!
-                    </p>
-
-                    <div className="flex items-center justify-center w-full space-x-3">{emojiGroup(50)}</div>
+            )}
+            {isFeedbackSubmitted && (
+                <div className="flex flex-col mt-6 px-6 py-4 border-gray-200 dark:border-gray-800">
+                    <h4 className="text-center text-xl">Thanks for your feedback, we appreciate it.</h4>
                 </div>
             )}
         </>

diff --git a/components/dashboard/src/feedback-form/FeedbackModal.tsx b/components/dashboard/src/feedback-form/FeedbackModal.tsx
@@ -12,13 +12,14 @@ function FeedbackFormModal(props: { onClose: () => void }) {
         props.onClose();
     };
 
-    const onSubmit = () => {
-        props.onClose();
-    };
-
     return (
         <Modal visible={true} onClose={onClose}>
-            <FeedbackComponent onClose={onClose} onSubmit={onSubmit} isModal={true} />
+            <FeedbackComponent
+                onClose={onClose}
+                isModal={true}
+                isError={false}
+                message="We'd love to know what you think!"
+            />
         </Modal>
     );
 }

diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
@@ -19,6 +19,7 @@ import moment from "moment";
 import { UserContext } from "../user-context";
 import { trackEvent } from "../Analytics";
 import exclamation from "../images/exclamation.svg";
+import ErrorMessage from "../components/ErrorMessage";
 
 export default function NewProject() {
     const location = useLocation();
@@ -744,16 +745,7 @@ function GitProviders(props: {
                     })}
                 </div>
 
-                {errorMessage && (
-                    <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
-                        <div className="pr-3 self-center w-6">
-                            <img src={exclamation} />
-                        </div>
-                        <div className="flex-1 flex flex-col">
-                            <p className="text-gitpod-red text-sm">{errorMessage}</p>
-                        </div>
-                    </div>
-                )}
+                {errorMessage && <ErrorMessage imgSrc={exclamation} message={errorMessage} />}
             </div>
         </div>
     );

diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -23,6 +23,7 @@ import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
 import { SelectAccountModal } from "../settings/SelectAccountModal";
 import { watchHeadlessLogs } from "../components/PrebuildLogs";
 import CodeText from "../components/CodeText";
+import FeedbackComponent from "../feedback-form/FeedbackComponent";
 
 const WorkspaceLogs = React.lazy(() => import("../components/WorkspaceLogs"));
 
@@ -432,6 +433,14 @@ function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
                 <CodeText>{repoFullName}</CodeText>
             </p>
             {statusMessage}
+            {p.error && (
+                <FeedbackComponent
+                    isModal={false}
+                    message={"Was this error message helpful?"}
+                    isError={true}
+                    initialSize={24}
+                />
+            )}
         </StartPage>
     );
 }