From 8b7687db7056833a5e0ef74ecc7b788cc552d114 Mon Sep 17 00:00:00 2001
From: Piotr Gawron <p.gawron@atcomp.pl>
Date: Thu, 23 May 2024 12:32:13 +0200
Subject: [PATCH] layout for error report modal
---
.../ErroReportModal.component.tsx | 140 +++++++++++++-----
src/redux/modal/modal.selector.ts | 5 +
src/shared/Input/Input.component.tsx | 4 +-
3 files changed, 107 insertions(+), 42 deletions(-)
diff --git a/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx b/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx
index 819ac4b3..7c293771 100644
--- a/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx
+++ b/src/components/FunctionalArea/Modal/ErrorReportModal/ErroReportModal.component.tsx
@@ -1,61 +1,119 @@
-import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+/* eslint-disable jsx-a11y/label-has-associated-control */
import { useAppSelector } from '@/redux/hooks/useAppSelector';
-import { getAllUserOverlaysByCreator } from '@/redux/overlays/overlays.thunks';
-import { loadingUserSelector } from '@/redux/user/user.selectors';
-import { login } from '@/redux/user/user.thunks';
import { Button } from '@/shared/Button';
import { Input } from '@/shared/Input';
import React from 'react';
+import { currentErrorDataSelector } from '@/redux/modal/modal.selector';
export const ErrorReportModal: React.FC = () => {
- const dispatch = useAppDispatch();
- const loadingUser = useAppSelector(loadingUserSelector);
- const isPending = loadingUser === 'pending';
- const [credentials, setCredentials] = React.useState({ login: '', password: '' });
+ const errorData = useAppSelector(currentErrorDataSelector);
+ function getValue(nullableVale: string | null | undefined): string {
+ if (!nullableVale) {
+ return '';
+ }
+ return nullableVale;
+ }
+
+ const url = getValue(errorData?.url);
+ const browser = getValue(errorData?.browser);
+ const comment = getValue(errorData?.comment);
+ const login = getValue(errorData?.login);
+ const email = getValue(errorData?.email);
+ const javaStacktrace = getValue(errorData?.javaStacktrace);
+ const stacktrace = getValue(errorData?.stacktrace);
+ const version = getValue(errorData?.version);
+ const message = getValue(errorData?.message);
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const [errorDataToSend, setValue] = React.useState(errorData);
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
const { name, value } = e.target;
- setCredentials(prevCredentials => ({ ...prevCredentials, [name]: value }));
+ setValue(errorData2 => {
+ // eslint-disable-next-line no-console
+ console.log(name);
+ // eslint-disable-next-line no-console
+ console.log(value);
+
+ return errorData2;
+ });
};
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>): Promise<void> => {
e.preventDefault();
- await dispatch(login(credentials));
- dispatch(getAllUserOverlaysByCreator());
};
return (
- <div className="w-[400px] border border-t-[#E1E0E6] bg-white p-[24px]">
- <form onSubmit={handleSubmit}>
- <label className="mb-5 block text-sm font-semibold" htmlFor="login">
- Hi there:
- <Input
- type="text"
- name="login"
- id="login"
- placeholder="Your login here.."
- value={credentials.login}
- onChange={handleChange}
- className="mt-2.5 text-sm font-medium text-font-400"
- />
+ <div className="w-[800px] border border-t-[#E1E0E6] bg-white">
+ <form onSubmit={handleSubmit} className="p-4">
+ <p className="my-4 font-bold"> {message}</p>
+ <p className="my-4">
+ If you agree to submit the following information to the minerva maintainers please uncheck
+ all boxes that might contain sensitive data.
+ </p>
+ <label className="mb-1 mt-4 block text-sm">
+ <span className="font-semibold">Add comment</span> (max 1000 characters):
</label>
- <label className="text-sm font-semibold" htmlFor="password">
- Hmm:
- <Input
- type="password"
- name="password"
- id="password"
- placeholder="Your password here.."
- value={credentials.password}
- onChange={handleChange}
- className="mt-2.5 text-sm font-medium text-font-400"
- />
- </label>
- <Button
- type="submit"
- className="w-full justify-center text-base font-medium"
- disabled={isPending}
- >
+ <Input type="textarea" value={comment} className="mb-4 text-sm font-medium text-font-400" />
+ <div className="grid grid-cols-[15px_743px] gap-2">
+ <label className="flex-1 text-sm font-semibold" htmlFor="url">
+ <Input
+ styleVariant="primaryWithoutFull"
+ type="checkbox"
+ checked
+ className="flex-1 align-bottom text-sm font-semibold"
+ />
+ </label>
+ <label className="block border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
+ {url}
+ </label>
+ <label className="block text-sm font-semibold">
+ <Input
+ styleVariant="primaryWithoutFull"
+ type="checkbox"
+ checked
+ className="flex-1 align-bottom text-sm font-semibold"
+ />
+ </label>
+ <label className="block border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
+ {browser}
+ </label>
+ <label className="block text-sm font-semibold">
+ <Input
+ type="checkbox"
+ styleVariant="primaryWithoutFull"
+ checked
+ className="flex-1 align-bottom text-sm font-semibold"
+ />
+ </label>
+ <label className="block border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
+ {login} (email: {email})
+ </label>
+ <label className="block text-sm font-semibold">
+ <Input
+ styleVariant="primaryWithoutFull"
+ type="checkbox"
+ checked
+ className="flex-1 align-bottom text-sm font-semibold"
+ />
+ </label>
+ <label className="block border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
+ Minerva {version}
+ </label>
+ </div>
+
+ <div className="my-4 block max-h-20 overflow-auto border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
+ Stacktrace:
+ <pre>{stacktrace}</pre>
+ </div>
+ <div className="my-4 block max-h-20 overflow-auto border border-transparent bg-cultured px-2 py-2.5 text-sm font-medium outline-none hover:border-greyscale-600 focus:border-greyscale-600">
+ Backend stacktrace:
+ <pre>{javaStacktrace}</pre>
+ </div>
+
+ <Button type="submit" className="w-full justify-center text-base font-medium">
Submit
</Button>
</form>
diff --git a/src/redux/modal/modal.selector.ts b/src/redux/modal/modal.selector.ts
index c77223ea..654dfb7a 100644
--- a/src/redux/modal/modal.selector.ts
+++ b/src/redux/modal/modal.selector.ts
@@ -20,3 +20,8 @@ export const currentEditedOverlaySelector = createSelector(
modalSelector,
modal => modal.editOverlayState,
);
+
+export const currentErrorDataSelector = createSelector(
+ modalSelector,
+ modal => modal?.errorReportState.errorData || undefined,
+);
diff --git a/src/shared/Input/Input.component.tsx b/src/shared/Input/Input.component.tsx
index 68cf9097..00f3e924 100644
--- a/src/shared/Input/Input.component.tsx
+++ b/src/shared/Input/Input.component.tsx
@@ -1,7 +1,7 @@
import React, { InputHTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';
-type StyleVariant = 'primary';
+type StyleVariant = 'primary' | 'primaryWithoutFull';
type SizeVariant = 'small' | 'medium';
type InputProps = {
@@ -13,6 +13,8 @@ type InputProps = {
const styleVariants = {
primary:
'w-full border border-transparent bg-cultured px-2 py-2.5 font-semibold outline-none hover:border-greyscale-600 focus:border-greyscale-600',
+ primaryWithoutFull:
+ 'border border-transparent bg-cultured px-2 py-2.5 font-semibold outline-none hover:border-greyscale-600 focus:border-greyscale-600',
} as const;
const sizeVariants = {
--
GitLab