Skip to content

Commit 196c5e7

Browse files
author
Laurie T. Malau
committed
Feedback modal
1 parent e148325 commit 196c5e7

File tree

6 files changed

+94
-45
lines changed

6 files changed

+94
-45
lines changed

‎components/dashboard/src/Login.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import fresh from "./images/welcome/fresh.svg";
2222
import prebuild from "./images/welcome/prebuild.svg";
2323
import exclamation from "./images/exclamation.svg";
2424
import { getURLHash } from "./App";
25+
import ErrorMessage from "./components/ErrorMessage";
2526

2627
function Item(props: { icon: string; iconSize?: string; text: string }) {
2728
const iconSize = props.iconSize || 28;
@@ -225,17 +226,7 @@ export function Login() {
225226
))
226227
)}
227228
</div>
228-
229-
{errorMessage && (
230-
<div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
231-
<div className="pr-3 self-center w-6">
232-
<img src={exclamation} />
233-
</div>
234-
<div className="flex-1 flex flex-col">
235-
<p className="text-gitpod-red text-sm">{errorMessage}</p>
236-
</div>
237-
</div>
238-
)}
229+
{errorMessage && <ErrorMessage imgSrc={exclamation} message={errorMessage} />}
239230
</div>
240231
</div>
241232
<div className="flex-none mx-auto h-20 text-center">

‎components/dashboard/src/components/ErrorMessage.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* Copyright (c) 2022 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License-AGPL.txt in the project root for license information.
5+
*/
6+
7+
import FeedbackComponent from "../feedback-form/FeedbackComponent";
8+
9+
function ErrorMessage(props: { imgSrc: string; imgAlt?: string; message: string }) {
10+
return (
11+
<>
12+
<div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
13+
<div className="pr-3 self-center w-6">
14+
<img src={props.imgSrc} alt={props.imgAlt || "An error message"} />
15+
</div>
16+
<div className="flex-1 flex flex-col">
17+
<p className="text-gitpod-red text-sm">{props.message}</p>
18+
</div>
19+
</div>
20+
<FeedbackComponent
21+
message={"Was this error message helpful?"}
22+
initialSize={24}
23+
isError={true}
24+
isModal={false}
25+
/>
26+
</>
27+
);
28+
}
29+
30+
export default ErrorMessage;

‎components/dashboard/src/feedback-form/FeedbackComponent.tsx

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,23 @@ import meh from "../images/feedback/meh-emoji.svg";
1111
import crying from "../images/feedback/crying-emoji.svg";
1212
import { trackEvent } from "../Analytics";
1313

14-
function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; isModal: boolean }) {
14+
function FeedbackComponent(props: {
15+
onClose?: () => void;
16+
isModal: boolean;
17+
isError: boolean;
18+
message?: string;
19+
initialSize?: number;
20+
}) {
1521
const [text, setText] = useState<string>("");
1622
const [selectedEmoji, setSelectedEmoji] = useState<number | undefined>();
23+
const [isFeedbackSubmitted, setIsFeedbackSubmitted] = useState<boolean>(false);
1724

18-
const height = props.isModal ? "300px" : "";
19-
25+
const onClose = () => {
26+
if (props.onClose) {
27+
props.onClose();
28+
}
29+
setSelectedEmoji(undefined);
30+
};
2031
const onSubmit = () => {
2132
if (selectedEmoji) {
2233
const feedbackObj = {
@@ -28,7 +39,7 @@ function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; i
2839
trackEvent("feedback_submitted", feedbackObj);
2940
}
3041

31-
props.onSubmit();
42+
setIsFeedbackSubmitted(true);
3243
};
3344

3445
const handleClick = (emojiScore: number) => {
@@ -54,12 +65,33 @@ function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; i
5465
</button>
5566
));
5667
};
68+
69+
const minimisedFirstView = !selectedEmoji && !isFeedbackSubmitted;
70+
const expandedWithTextView = selectedEmoji && !isFeedbackSubmitted;
71+
5772
return (
5873
<>
59-
<h3 className="mb-4">Send Feedback</h3>
60-
{selectedEmoji ? (
74+
{props.isModal && !isFeedbackSubmitted && <h3 className="mb-4">Send Feedback</h3>}
75+
{minimisedFirstView && (
76+
<div
77+
className={
78+
"flex flex-col justify-center px-6 py-4 border-t border-gray-200 dark:border-gray-800 " +
79+
(props.isError ? "mt-6" : "")
80+
}
81+
>
82+
<p className="text-center text-lg mb-3 text-gray-500 dark:text-gray-400">{props.message}</p>
83+
84+
<div className="flex items-center justify-center w-full">{emojiGroup(props.initialSize || 50)}</div>
85+
</div>
86+
)}
87+
{expandedWithTextView && (
6188
<>
62-
<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">
89+
<div
90+
className={
91+
"flex flex-col px-6 py-4 border-t border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 " +
92+
(props.isError ? "w-96 mt-6" : "")
93+
}
94+
>
6395
<div className="relative">
6496
<div className="absolute flex bottom-5 right-5 -space-x-3">{emojiGroup(24)}</div>
6597
<textarea
@@ -83,25 +115,19 @@ function FeedbackComponent(props: { onClose: () => void; onSubmit: () => void; i
83115
</p>
84116
</div>
85117
</div>
86-
<div className="flex justify-end mt-6">
87-
<button className="secondary" onClick={props.onClose}>
118+
<div className={"flex justify-end mt-6 " + (props.isError ? "mb-6" : "")}>
119+
<button className="secondary" onClick={onClose}>
88120
Cancel
89121
</button>
90122
<button className="ml-2" onClick={onSubmit}>
91123
Send Feedback
92124
</button>
93125
</div>
94126
</>
95-
) : (
96-
<div
97-
className="flex flex-col justify-center -mx-6 px-6 py-4 border-t border-gray-200 dark:border-gray-800"
98-
style={{ height: height }}
99-
>
100-
<p className="text-center text-lg mb-8 text-gray-500 dark:text-gray-400">
101-
We'd love to know what you think!
102-
</p>
103-
104-
<div className="flex items-center justify-center w-full space-x-3">{emojiGroup(50)}</div>
127+
)}
128+
{isFeedbackSubmitted && (
129+
<div className="flex flex-col mt-6 px-6 py-4 border-gray-200 dark:border-gray-800">
130+
<h4 className="text-center text-xl">Thanks for your feedback, we appreciate it.</h4>
105131
</div>
106132
)}
107133
</>

‎components/dashboard/src/feedback-form/FeedbackModal.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ function FeedbackFormModal(props: { onClose: () => void }) {
1212
props.onClose();
1313
};
1414

15-
const onSubmit = () => {
16-
props.onClose();
17-
};
18-
1915
return (
2016
<Modal visible={true} onClose={onClose}>
21-
<FeedbackComponent onClose={onClose} onSubmit={onSubmit} isModal={true} />
17+
<FeedbackComponent
18+
onClose={onClose}
19+
isModal={true}
20+
isError={false}
21+
message="We'd love to know what you think!"
22+
/>
2223
</Modal>
2324
);
2425
}

‎components/dashboard/src/projects/NewProject.tsx

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import moment from "moment";
1919
import { UserContext } from "../user-context";
2020
import { trackEvent } from "../Analytics";
2121
import exclamation from "../images/exclamation.svg";
22+
import ErrorMessage from "../components/ErrorMessage";
2223

2324
export default function NewProject() {
2425
const location = useLocation();
@@ -744,16 +745,7 @@ function GitProviders(props: {
744745
})}
745746
</div>
746747

747-
{errorMessage && (
748-
<div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
749-
<div className="pr-3 self-center w-6">
750-
<img src={exclamation} />
751-
</div>
752-
<div className="flex-1 flex flex-col">
753-
<p className="text-gitpod-red text-sm">{errorMessage}</p>
754-
</div>
755-
</div>
756-
)}
748+
{errorMessage && <ErrorMessage imgSrc={exclamation} message={errorMessage} />}
757749
</div>
758750
</div>
759751
);

‎components/dashboard/src/start/CreateWorkspace.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { SelectAccountPayload } from "@gitpod/gitpod-protocol/lib/auth";
2323
import { SelectAccountModal } from "../settings/SelectAccountModal";
2424
import { watchHeadlessLogs } from "../components/PrebuildLogs";
2525
import CodeText from "../components/CodeText";
26+
import FeedbackComponent from "../feedback-form/FeedbackComponent";
2627

2728
const WorkspaceLogs = React.lazy(() => import("../components/WorkspaceLogs"));
2829

@@ -432,6 +433,14 @@ function RepositoryNotFoundView(p: { error: StartWorkspaceError }) {
432433
<CodeText>{repoFullName}</CodeText>
433434
</p>
434435
{statusMessage}
436+
{p.error && (
437+
<FeedbackComponent
438+
isModal={false}
439+
message={"Was this error message helpful?"}
440+
isError={true}
441+
initialSize={24}
442+
/>
443+
)}
435444
</StartPage>
436445
);
437446
}

0 commit comments

Comments
 (0)