From 3ac8720904a3b487cb76b079b240296a5b72868c Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 4 Oct 2023 16:40:22 +0300
Subject: [PATCH] fix: info icons tooltip

---
 .../Questions/DropDown/settingDropDown.tsx    |  49 ++-
 src/pages/Questions/UploadFile/UploadFile.tsx |   7 +-
 src/pages/Questions/branchingQuestions.tsx    | 303 +++++++++++-------
 3 files changed, 229 insertions(+), 130 deletions(-)

diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx
index 83062b31..cdc28e09 100644
--- a/src/pages/Questions/DropDown/settingDropDown.tsx
+++ b/src/pages/Questions/DropDown/settingDropDown.tsx
@@ -1,5 +1,11 @@
 import { useParams } from "react-router-dom";
-import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import CustomCheckbox from "@ui_kit/CustomCheckbox";
 import CustomTextField from "@ui_kit/CustomTextField";
 import { useDebouncedCallback } from "use-debounce";
@@ -38,6 +44,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
         sx={{
           position: "relative",
           display: "flex",
+          gap: "20px",
           width: "100%",
           justifyContent: "space-between",
           flexDirection: isMobile ? "column" : null,
@@ -56,7 +63,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
           }}
         >
           <Typography
-            sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
           >
             Настройки ответов
           </Typography>
@@ -72,7 +84,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               })
             }
           />
-          <Box sx={{ display: isMobile ? "none" : "block", mt: isMobile ? "11px" : "6px" }}>
+          <Box
+            sx={{
+              display: isMobile ? "none" : "block",
+              mt: isMobile ? "11px" : "6px",
+            }}
+          >
             <Typography
               sx={{
                 height: isMobile ? "18px" : "auto",
@@ -104,7 +121,12 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
           }}
         >
           <Typography
-            sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
+            sx={{
+              height: isMobile ? "18px" : "auto",
+              fontWeight: "500",
+              fontSize: "18px",
+              color: " #4D4D4D",
+            }}
           >
             Настройки вопросов
           </Typography>
@@ -117,7 +139,9 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
               });
             }}
           />
-          <Box sx={{ position: "relative", display: "flex", alignItems: "center" }}>
+          <Box
+            sx={{ position: "relative", display: "flex", alignItems: "center" }}
+          >
             <CustomCheckbox
               label={"Внутреннее название вопроса"}
               checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
@@ -134,13 +158,14 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
                 });
               }}
             />
-            <InfoIcon
-              sx={{
-                position: isMobile ? "absolute" : null,
-                display: "block",
-                right: isMobile ? "30px" : null,
-              }}
-            />
+            <Tooltip
+              title="Будет отображаться как заголовок вопроса в приходящих заявках."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
           </Box>
           <Box
             sx={{
diff --git a/src/pages/Questions/UploadFile/UploadFile.tsx b/src/pages/Questions/UploadFile/UploadFile.tsx
index 6652d8db..73680c4e 100644
--- a/src/pages/Questions/UploadFile/UploadFile.tsx
+++ b/src/pages/Questions/UploadFile/UploadFile.tsx
@@ -7,6 +7,7 @@ import {
   Select,
   SelectChangeEvent,
   Typography,
+  Tooltip,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
@@ -166,7 +167,11 @@ export default function UploadFile({ totalIndex }: Props) {
           >
             Пользователь может загрузить любой собственный файл
           </Typography>
-          <InfoIcon />
+          <Tooltip title="Можно загрузить файл в желаемом формате." placement="top">
+            <Box>
+              <InfoIcon />
+            </Box>
+          </Tooltip>
         </Box>
       </Box>
       <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx
index 7db88e1c..380d1cf0 100644
--- a/src/pages/Questions/branchingQuestions.tsx
+++ b/src/pages/Questions/branchingQuestions.tsx
@@ -11,10 +11,15 @@ import {
   Modal,
   Radio,
   RadioGroup,
+  Tooltip,
   Typography,
   useTheme,
 } from "@mui/material";
-import { questionStore, resetSomeField, updateQuestionsList } from "@root/questions";
+import {
+  questionStore,
+  resetSomeField,
+  updateQuestionsList,
+} from "@root/questions";
 import { Select } from "./Select";
 
 import RadioCheck from "@ui_kit/RadioCheck";
@@ -29,15 +34,22 @@ type BranchingQuestionsProps = {
 const ACTIONS = ["Показать", "Скрыть"];
 const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
 const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
-const CONDITIONS = ["Все условия обязательны", "Обязательно хотя бы одно условие"];
+const CONDITIONS = [
+  "Все условия обязательны",
+  "Обязательно хотя бы одно условие",
+];
 
-export default function BranchingQuestions({ totalIndex }: BranchingQuestionsProps) {
+export default function BranchingQuestions({
+  totalIndex,
+}: BranchingQuestionsProps) {
   const theme = useTheme();
   const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
   const quizId = Number(useParams().quizId);
   const { openedModalSettings, listQuestions } = questionStore();
   const titleRef = useRef<HTMLDivElement>(null);
-  const [title, setTitle] = useState<string>(listQuestions[quizId][totalIndex].title)
+  const [title, setTitle] = useState<string>(
+    listQuestions[quizId][totalIndex].title
+  );
 
   useEffect(() => {
     setTitleInputWidth(titleRef.current?.offsetWidth || 0);
@@ -74,9 +86,10 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
             sx={{
               boxSizing: "border-box",
               background: "#F2F3F7",
-              padding: "25px",
               height: "70px",
+              padding: "0 25px",
               display: "flex",
+              alignItems: "center",
             }}
           >
             <Box sx={{ color: "#9A9AAF" }}>
@@ -113,7 +126,14 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
               </Box>
               <Typography component="span">)</Typography>
             </Box>
-            <InfoIcon width={24} height={24} />
+            <Tooltip
+              title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
+              placement="top"
+            >
+              <Box>
+                <InfoIcon />
+              </Box>
+            </Tooltip>
           </Box>
           <Box
             sx={{
@@ -132,7 +152,9 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
             >
               <Select
                 items={ACTIONS}
-                activeItemIndex={listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1}
+                activeItemIndex={
+                  listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1
+                }
                 sx={{ maxWidth: "140px" }}
                 onChange={(action) => {
                   const clonContent = listQuestions[quizId][totalIndex].content;
@@ -142,126 +164,157 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                   });
                 }}
               />
-              <Typography sx={{ color: theme.palette.grey2.main }}>если в ответе на вопрос</Typography>
+              <Typography sx={{ color: theme.palette.grey2.main }}>
+                если в ответе на вопрос
+              </Typography>
             </Box>
-            {listQuestions[quizId][totalIndex].content.rule.reqs.map((request, index) => (
-              <Box
-                key={index}
-                sx={{
-                  padding: "20px",
-                  borderRadius: "8px",
-                  height: "100%",
-                  bgcolor: "#F2F3F7",
-                }}
-              >
+            {listQuestions[quizId][totalIndex].content.rule.reqs.map(
+              (request, index) => (
                 <Box
+                  key={index}
                   sx={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    pb: "5px",
+                    padding: "20px",
+                    borderRadius: "8px",
+                    height: "100%",
+                    bgcolor: "#F2F3F7",
                   }}
                 >
-                  <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Условие 1</Typography>
-                  <IconButton
-                    sx={{ borderRadius: "6px", padding: "2px" }}
-                    onClick={() => {
-                      const clonContent = listQuestions[quizId][totalIndex].content;
-
-                      clonContent.rule.reqs.splice(index, 1);
-                      updateQuestionsList(quizId, totalIndex, {
-                        content: clonContent,
-                      });
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      pb: "5px",
                     }}
                   >
-                    <DeleteIcon style={{ color: "#4D4D4D" }} />
-                  </IconButton>
-                </Box>
-                <Select
-                  empty
-                  activeItemIndex={request.id ? Number(request.id) : -1}
-                  items={STIPULATIONS}
-                  onChange={(stipulation) => {
-                    const clonContent = listQuestions[quizId][totalIndex].content;
-
-                    clonContent.rule.reqs[index] = {
-                      id: String(STIPULATIONS.findIndex((item) => item.includes(stipulation))),
-                      vars: request.vars,
-                    };
-
-                    updateQuestionsList(quizId, totalIndex, {
-                      content: clonContent,
-                    });
-                  }}
-                  sx={{ marginBottom: "15px" }}
-                />
-                {request.id && (
-                  <>
-                    <Box
-                      sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        pb: "10px",
-                      }}
-                    >
-                      <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>Дан ответ</Typography>
-                      <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
-                        (Укажите один или несколько вариантов)
-                      </Typography>
-                    </Box>
-                    <Select
-                      empty
-                      activeItemIndex={-1}
-                      items={ANSWERS}
-                      onChange={(answer) => {
-                        const clonContent = listQuestions[quizId][totalIndex].content;
-                        const answerItemIndex = ANSWERS.findIndex((answerItem) => answerItem === answer);
-
-                        if (!clonContent.rule.reqs[index].vars.includes(answerItemIndex)) {
-                          listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.push(answerItemIndex);
-                        }
+                    <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                      Условие 1
+                    </Typography>
+                    <IconButton
+                      sx={{ borderRadius: "6px", padding: "2px" }}
+                      onClick={() => {
+                        const clonContent =
+                          listQuestions[quizId][totalIndex].content;
 
+                        clonContent.rule.reqs.splice(index, 1);
                         updateQuestionsList(quizId, totalIndex, {
                           content: clonContent,
                         });
                       }}
-                      sx={{
-                        marginBottom: "10px",
-                        ".MuiSelect-select.MuiInputBase-input": {
-                          color: "transparent",
-                        },
-                      }}
-                    />
-                    <Box
-                      sx={{
-                        display: "flex",
-                        gap: "10px",
-                      }}
                     >
-                      {listQuestions[quizId][totalIndex].content.rule.reqs[index].vars.map((item, varIndex) => (
-                        <Chip
-                          key={varIndex}
-                          label={ANSWERS[item]}
-                          variant="outlined"
-                          onDelete={() => {
-                            const clonContent = listQuestions[quizId][totalIndex].content;
-                            const removedItemIndex = clonContent.rule.reqs[index].vars.findIndex(
-                              (varItem) => varItem === item
-                            );
+                      <DeleteIcon style={{ color: "#4D4D4D" }} />
+                    </IconButton>
+                  </Box>
+                  <Select
+                    empty
+                    activeItemIndex={request.id ? Number(request.id) : -1}
+                    items={STIPULATIONS}
+                    onChange={(stipulation) => {
+                      const clonContent =
+                        listQuestions[quizId][totalIndex].content;
 
-                            clonContent.rule.reqs[index].vars.splice(removedItemIndex, 1);
+                      clonContent.rule.reqs[index] = {
+                        id: String(
+                          STIPULATIONS.findIndex((item) =>
+                            item.includes(stipulation)
+                          )
+                        ),
+                        vars: request.vars,
+                      };
 
-                            updateQuestionsList(quizId, totalIndex, {
-                              content: clonContent,
-                            });
-                          }}
-                        />
-                      ))}
-                    </Box>
-                  </>
-                )}
-              </Box>
-            ))}
+                      updateQuestionsList(quizId, totalIndex, {
+                        content: clonContent,
+                      });
+                    }}
+                    sx={{ marginBottom: "15px" }}
+                  />
+                  {request.id && (
+                    <>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          alignItems: "center",
+                          pb: "10px",
+                        }}
+                      >
+                        <Typography
+                          sx={{ color: "#4D4D4D", fontWeight: "500" }}
+                        >
+                          Дан ответ
+                        </Typography>
+                        <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
+                          (Укажите один или несколько вариантов)
+                        </Typography>
+                      </Box>
+                      <Select
+                        empty
+                        activeItemIndex={-1}
+                        items={ANSWERS}
+                        onChange={(answer) => {
+                          const clonContent =
+                            listQuestions[quizId][totalIndex].content;
+                          const answerItemIndex = ANSWERS.findIndex(
+                            (answerItem) => answerItem === answer
+                          );
+
+                          if (
+                            !clonContent.rule.reqs[index].vars.includes(
+                              answerItemIndex
+                            )
+                          ) {
+                            listQuestions[quizId][totalIndex].content.rule.reqs[
+                              index
+                            ].vars.push(answerItemIndex);
+                          }
+
+                          updateQuestionsList(quizId, totalIndex, {
+                            content: clonContent,
+                          });
+                        }}
+                        sx={{
+                          marginBottom: "10px",
+                          ".MuiSelect-select.MuiInputBase-input": {
+                            color: "transparent",
+                          },
+                        }}
+                      />
+                      <Box
+                        sx={{
+                          display: "flex",
+                          gap: "10px",
+                        }}
+                      >
+                        {listQuestions[quizId][totalIndex].content.rule.reqs[
+                          index
+                        ].vars.map((item, varIndex) => (
+                          <Chip
+                            key={varIndex}
+                            label={ANSWERS[item]}
+                            variant="outlined"
+                            onDelete={() => {
+                              const clonContent =
+                                listQuestions[quizId][totalIndex].content;
+                              const removedItemIndex = clonContent.rule.reqs[
+                                index
+                              ].vars.findIndex((varItem) => varItem === item);
+
+                              clonContent.rule.reqs[index].vars.splice(
+                                removedItemIndex,
+                                1
+                              );
+
+                              updateQuestionsList(quizId, totalIndex, {
+                                content: clonContent,
+                              });
+                            }}
+                          />
+                        ))}
+                      </Box>
+                    </>
+                  )}
+                </Box>
+              )
+            )}
             <Box
               sx={{
                 display: "flex",
@@ -288,9 +341,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
               <FormControl>
                 <RadioGroup
                   aria-labelledby="demo-controlled-radio-buttons-group"
-                  value={listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0}
+                  value={
+                    listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0
+                  }
                   onChange={(_, value) => {
-                    const clonContent = listQuestions[quizId][totalIndex].content;
+                    const clonContent =
+                      listQuestions[quizId][totalIndex].content;
                     clonContent.rule.or = Boolean(Number(value));
                     updateQuestionsList(quizId, totalIndex, {
                       content: clonContent,
@@ -302,7 +358,12 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
                       key={index}
                       sx={{ color: theme.palette.grey2.main }}
                       value={index}
-                      control={<Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />}
+                      control={
+                        <Radio
+                          checkedIcon={<RadioCheck />}
+                          icon={<RadioIcon />}
+                        />
+                      }
                       label={condition}
                     />
                   ))}
@@ -310,10 +371,18 @@ export default function BranchingQuestions({ totalIndex }: BranchingQuestionsPro
               </FormControl>
             </Box>
             <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
-              <Button variant="outlined" onClick={handleClose} sx={{ width: "100%", maxWidth: "130px" }}>
+              <Button
+                variant="outlined"
+                onClick={handleClose}
+                sx={{ width: "100%", maxWidth: "130px" }}
+              >
                 Отмена
               </Button>
-              <Button variant="contained" sx={{ width: "100%", maxWidth: "130px" }} onClick={handleClose}>
+              <Button
+                variant="contained"
+                sx={{ width: "100%", maxWidth: "130px" }}
+                onClick={handleClose}
+              >
                 Готово
               </Button>
             </Box>