Merge branch 'dev' into 'main'

настройка панелей переключания с списка вопросов на панель ветвления +...

See merge request frontend/squiz!104

src/pages/ContactFormPage/ContactFormPage.tsx

@@ -178,29 +178,21 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
             }}
             value={quiz.config.formContact.title}
             placeholder="Заголовок формы"
-            text={""}
+            maxLength={200}
           />
-          <TextField
+          <CustomTextField
             onChange={({ target }) => {
               updateQuiz(quiz.id, (quiz) => {
                 quiz.config.formContact.desc = target.value;
               });
             }}
             value={quiz.config.formContact.desc}
-            id="outlined-multiline-static"
-            multiline
             rows={8}
             placeholder="Дополнительный текст формы"
-            sx={{
+            sxForm={{
-              backgroundColor: theme.palette.background.default,
+              height: "287px",
-
-              "& .MuiInputBase-root": {
-                borderRadius: "10px",
-                alignItems: "start",
-                color: theme.palette.grey2.main,
-                color: "black",
-              },
             }}
+            maxLength={300}
           />
         </Box>
         <Divider

src/pages/DesignPage/DesignFilling.tsx

@@ -12,29 +12,29 @@ import { updateQuiz } from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { toggleQuizPreview } from "@root/quizPreview";
 import VisibilityIcon from "@mui/icons-material/Visibility";
-import React from "react";
 
+const ButtonsThemeLight = [
+  ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"],
+  ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"],
+  ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"],
+  ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"],
+  ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"],
+  ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"],
+  ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"],
+];
+const ButtonsThemeDark = [
+  ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"],
+  ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"],
+  ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
+  ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
+];
 export const DesignFilling = () => {
   const quiz = useCurrentQuiz();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(830));
-  const ButtonsThemeLight = [
+
-    ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"],
-    ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"],
-    ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"],
-    ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"],
-    ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"],
-    ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"],
-    ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"],
-  ];
-  const ButtonsThemeDark = [
-    ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"],
-    ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"],
-    ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
-    ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
-  ];
   return (
-    <Box sx={{ width: "100%", padding: "25px" }}>
+    <Box sx={{ width: "100%", padding: "25px", height: "calc(100vh - 80px)" }}>
       <Typography variant="h5" sx={{ marginBottom: "40px", color: "#333647" }}>
         Дизайн
       </Typography>
@@ -50,6 +50,8 @@ export const DesignFilling = () => {
           gap: "20px",
           borderRadius: "12px",
           flexWrap: "wrap",
+          height: "calc(100vh - 280px)",
+          overflow: "auto",
         }}
       >
         <Box

src/pages/DesignPage/DesignPage.tsx

@@ -1,52 +1,30 @@
 import { quizApi } from "@api/quiz";
-import { Box, IconButton, useMediaQuery, useTheme } from "@mui/material";
+import { Box, useMediaQuery, useTheme, Skeleton } from "@mui/material";
-import {
+import { setQuizes, setCurrentStep } from "@root/quizes/actions";
-  resetEditConfig,
-  setQuizes,
-  updateQuiz,
-  setCurrentStep,
-} from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import Sidebar from "@ui_kit/Sidebar";
-import { enqueueSnackbar } from "notistack";
+import { useEffect, useState } from "react";
-import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "../startPage/Sidebar/SidebarMobile";
+import { cleanQuestions, setQuestions } from "@root/questions/actions";
 import {
-  cleanQuestions,
-  createResult,
-  setQuestions,
-} from "@root/questions/actions";
-import {
-  updateCanCreatePublic,
   updateModalInfoWhyCantCreate,
   setShowConfirmLeaveModal,
   updateSomeWorkBackend,
 } from "@root/uiTools/actions";
-import { useQuestionsStore } from "@root/questions/store";
 import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";
 
-import { clearUserData } from "@root/user";
-import { clearAuthToken } from "@frontend/kitui";
-import { logout } from "@api/auth";
-import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
-import { ModalInfoWhyCantCreate } from "../startPage/ModalInfoWhyCantCreate";
 import { ConfirmLeaveModal } from "../startPage/ConfirmLeaveModal";
-import { checkQuestionHint } from "@utils/checkQuestionHint";
 import { Header } from "../startPage/Header";
 import { DesignFilling } from "./DesignFilling";
-import { toggleQuizPreview } from "@root/quizPreview";
-import VisibilityIcon from "@mui/icons-material/Visibility";
 import { createPortal } from "react-dom";
 import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
 
 export const DesignPage = () => {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
-  const { questions } = useQuestionsStore();
 
   useEffect(() => {
     const getData = async () => {
@@ -98,7 +76,10 @@ export const DesignPage = () => {
   };
 
   console.log(quiz);
-  if (!quiz) return <></>;
+  if (quiz === undefined)
+    return (
+      <Skeleton sx={{ width: "100vw", height: "100vh", transform: "none" }} />
+    );
   return (
     <>
       <Header setMobileSidebar={setMobileSidebar} />
@@ -111,7 +92,6 @@ export const DesignPage = () => {
         <DesignFilling />
         {createPortal(<QuizPreview />, document.body)}
       </Box>
-      <ModalInfoWhyCantCreate />
       <ConfirmLeaveModal
         open={showConfirmLeaveModal}
         follow={followNewPage}

src/pages/Questions/BranchingModal/Settings.tsx

@@ -361,13 +361,11 @@ const DateInputsType = ({
             ).toLocaleDateString(),
           )}
           onChange={(dateString) => {
-            const date = dateString
+            const date = dateString?.toDate().toLocaleDateString("ru-RU", {
-              ?.toDate()
+              year: "numeric",
-              .toLocaleDateString("ru-RU", {
+              month: "2-digit",
-                year: "numeric",
+              day: "2-digit",
-                month: "2-digit",
+            });
-                day: "2-digit",
-              });
             let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
             newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [
               date,

src/pages/Questions/BranchingPanel/index.tsx

@@ -10,7 +10,6 @@ import {
 } from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
-import { updateOpenBranchingPanel } from "@root/uiTools/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { useRef } from "react";
 import { useUiTools } from "@root/uiTools/store";
@@ -18,7 +17,6 @@ import { useUiTools } from "@root/uiTools/store";
 export const BranchingPanel = (sx?: SxProps<Theme>) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
-  const { openBranchingPanel } = useUiTools();
   const ref = useRef();
   return (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
@@ -35,8 +33,8 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
         }}
       >
         <Switch
-          checked={openBranchingPanel}
+          checked={true}
-          onChange={(e) => updateOpenBranchingPanel(e.target.checked)}
+          onChange={(e) => {}}
           sx={{
             width: 50,
             height: 30,
@@ -90,7 +88,7 @@ export const BranchingPanel = (sx?: SxProps<Theme>) => {
           </Typography>
         </Box>
       </Box>
-      {openBranchingPanel && <QuestionsList />}
+      <QuestionsList />
     </Box>
   );
 };

src/pages/Questions/ButtonsOptions.tsx

@@ -21,10 +21,7 @@ import {
   updateQuestion,
   getQuestionByContentId,
 } from "@root/questions/actions";
-import {
+import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
-  updateOpenBranchingPanel,
-  updateDesireToOpenABranchingModal,
-} from "@root/uiTools/actions";
 import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
 import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
 import Branching from "../../assets/icons/questionsPage/branching";
@@ -58,7 +55,6 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
   const [openDelete, setOpenDelete] = useState<boolean>(false);
 
   const openedModal = () => {
-    updateOpenBranchingPanel(true);
     updateDesireToOpenABranchingModal(question.content.id);
   };
 
@@ -99,7 +95,6 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
       title: "Ветвление",
       value: "branching",
       myFunc: (question) => {
-        updateOpenBranchingPanel(true);
         updateDesireToOpenABranchingModal(question.content.id);
       },
     },

src/pages/Questions/ButtonsOptionsAndPict.tsx

@@ -32,10 +32,7 @@ import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
 import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
 import { QuizQuestionVariant } from "@model/questionTypes/variant";
 import { updateOpenedModalSettingsId } from "@root/questions/actions";
-import {
+import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
-  updateOpenBranchingPanel,
-  updateDesireToOpenABranchingModal,
-} from "@root/uiTools/actions";
 import { useQuestionsStore } from "@root/questions/store";
 import { enqueueSnackbar } from "notistack";
 import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -208,7 +205,6 @@ export default function ButtonsOptionsAndPict({
             onMouseEnter={() => setButtonHover("branching")}
             onMouseLeave={() => setButtonHover("")}
             onClick={() => {
-              updateOpenBranchingPanel(true);
               updateDesireToOpenABranchingModal(question.content.id);
             }}
             sx={{

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -1,7 +1,5 @@
-import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
 import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
 import { CopyIcon } from "@icons/questionsPage/CopyIcon";
-import { OneIcon } from "@icons/questionsPage/OneIcon";
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
 import Answer from "@icons/questionsPage/answer";
 import Date from "@icons/questionsPage/date";
@@ -9,7 +7,6 @@ import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
 import Download from "@icons/questionsPage/download";
 import DropDown from "@icons/questionsPage/drop_down";
 import Emoji from "@icons/questionsPage/emoji";
-import { HideIcon } from "@icons/questionsPage/hideIcon";
 import Input from "@icons/questionsPage/input";
 import OptionsAndPict from "@icons/questionsPage/options_and_pict";
 import OptionsPict from "@icons/questionsPage/options_pict";
@@ -20,9 +17,7 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import {
   Box,
   Button,
-  Checkbox,
   FormControl,
-  FormControlLabel,
   IconButton,
   InputAdornment,
   Modal,
@@ -36,14 +31,11 @@ import {
   copyQuestion,
   createUntypedQuestion,
   deleteQuestion,
-  clearRuleForAll,
   toggleExpandQuestion,
   updateQuestion,
   updateUntypedQuestion,
-  getQuestionByContentId,
   deleteQuestionWithTimeout,
 } from "@root/questions/actions";
-import { updateRootContentId } from "@root/quizes/actions";
 import { useRef, useState } from "react";
 import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
 import { useDebouncedCallback } from "use-debounce";
@@ -58,7 +50,6 @@ import TypeQuestions from "../TypeQuestions";
 import { QuestionType } from "@model/question/question";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuestionsStore } from "@root/questions/store";
-import { updateSomeWorkBackend } from "@root/uiTools/actions";
 import { DeleteFunction } from "@utils/deleteFunc";
 
 interface Props {

src/pages/Questions/QuestionsPage.tsx

@@ -23,10 +23,7 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
 import BranchingQuestions from "./BranchingModal/BranchingQuestionsModal";
 import { QuestionSwitchWindowTool } from "./QuestionSwitchWindowTool";
 import { useQuestionsStore } from "@root/questions/store";
-import {
+import { updateEditSomeQuestion } from "@root/uiTools/actions";
-  updateOpenBranchingPanel,
-  updateEditSomeQuestion,
-} from "@root/uiTools/actions";
 import { useUiTools } from "@root/uiTools/store";
 
 interface Props {
@@ -39,11 +36,10 @@ export default function QuestionsPage({
   setOpenBranchingPage,
 }: Props) {
   const theme = useTheme();
-  const { openedModalSettingsId, openBranchingPanel } = useUiTools();
+  const { openedModalSettingsId } = useUiTools();
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const quiz = useCurrentQuiz();
   useLayoutEffect(() => {
-    updateOpenBranchingPanel(false);
     updateEditSomeQuestion();
   }, []);
 
@@ -68,7 +64,6 @@ export default function QuestionsPage({
         </Typography>
         <Button
           sx={{
-            display: openBranchingPanel ? "none" : "flex",
             fontSize: "16px",
             lineHeight: "19px",
             padding: 0,

src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx

@@ -9,7 +9,6 @@ import {
 } from "@model/questionTypes/shared";
 import { Pencil } from "../../startPage/Sidebar/icons/Pencil";
 import {
-  updateOpenBranchingPanel,
   updateEditSomeQuestion,
   updateDragQuestionContentId,
 } from "@root/uiTools/actions";

src/pages/Questions/SwitchBranchingPanel/index.tsx

@@ -8,11 +8,7 @@ import {
 } from "@mui/material";
 
 import { QuestionsList } from "./QuestionsList";
-import { updateOpenBranchingPanel } from "@root/uiTools/actions";
+import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph";
-import { useQuestionsStore } from "@root/questions/store";
-import { useRef } from "react";
-import { useUiTools } from "@root/uiTools/store";
-
 interface Props {
   openBranchingPage: boolean;
   setOpenBranchingPage: () => void;
@@ -25,77 +21,15 @@ export const SwitchBranchingPanel = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const isTablet = useMediaQuery(theme.breakpoints.down(1446));
-  const ref = useRef();
 
-  return !isTablet || openBranchingPage ? (
+  return openBranchingPage ? (
     <Box sx={{ userSelect: "none", maxWidth: "350px", width: "100%" }}>
-      <Box
+      {isTablet || (
-        sx={{
+        <PanelSwitchQuestionListGraph
-          display: "flex",
+          openBranchingPage={openBranchingPage}
-          alignItems: "center",
+          setOpenBranchingPage={setOpenBranchingPage}
-          gap: "15px",
-          padding: "18px",
-          background: "#fff",
-          borderRadius: "12px",
-          boxShadow: "0px 10px 30px #e7e7e7",
-        }}
-      >
-        <Switch
-          checked={openBranchingPage}
-          onChange={setOpenBranchingPage}
-          sx={{
-            width: 50,
-            height: 30,
-            padding: 0,
-            "& .MuiSwitch-switchBase": {
-              padding: 0,
-              margin: "2px",
-              transitionDuration: "300ms",
-              "&.Mui-checked": {
-                transform: "translateX(20px)",
-                color: theme.palette.brightPurple.main,
-                "& + .MuiSwitch-track": {
-                  backgroundColor: "#E8DCF9",
-                  opacity: 1,
-                  border: 0,
-                },
-                "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
-              },
-              "&.Mui-disabled .MuiSwitch-thumb": {
-                color:
-                  theme.palette.mode === "light"
-                    ? theme.palette.grey[100]
-                    : theme.palette.grey[600],
-              },
-              "&.Mui-disabled + .MuiSwitch-track": {
-                opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
-              },
-            },
-            "& .MuiSwitch-thumb": {
-              boxSizing: "border-box",
-              width: 25,
-              height: 25,
-            },
-            "& .MuiSwitch-track": {
-              borderRadius: 13,
-              backgroundColor:
-                theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
-              opacity: 1,
-              transition: theme.transitions.create(["background-color"], {
-                duration: 500,
-              }),
-            },
-          }}
         />
-        <Box>
+      )}
-          <Typography ref={ref} sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
-            Логика ветвления
-          </Typography>
-          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
-            Настройте связи между вопросами
-          </Typography>
-        </Box>
-      </Box>
       {openBranchingPage && (
         <QuestionsList setOpenBranchingPage={setOpenBranchingPage} />
       )}

src/pages/startPage/EditPage.tsx

@@ -1,42 +1,24 @@
 import { quizApi } from "@api/quiz";
-import { LogoutButton } from "@ui_kit/LogoutButton";
-import BackArrowIcon from "@icons/BackArrowIcon";
-import { Burger } from "@icons/Burger";
 import EyeIcon from "@icons/EyeIcon";
-import { PenaLogoIcon } from "@icons/PenaLogoIcon";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 
 import {
   Box,
   Button,
-  Container,
-  FormControl,
   IconButton,
   Switch,
-  TextField,
   Typography,
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import {
+import { setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
-  resetEditConfig,
-  setQuizes,
-  updateQuiz,
-  setCurrentStep,
-} from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
-import CustomAvatar from "@ui_kit/Header/Avatar";
-import NavMenuItem from "@ui_kit/Header/NavMenuItem";
-import PenaLogo from "@ui_kit/PenaLogo";
 import Sidebar from "@ui_kit/Sidebar";
 import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
-import { isAxiosError } from "axios";
+import { useEffect, useState } from "react";
-import { enqueueSnackbar } from "notistack";
-import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import useSWR from "swr";
 import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
 import {
@@ -45,23 +27,16 @@ import {
   setQuestions,
 } from "@root/questions/actions";
 import {
-  updateOpenBranchingPanel,
   updateCanCreatePublic,
   updateModalInfoWhyCantCreate,
   setShowConfirmLeaveModal,
   updateSomeWorkBackend,
 } from "@root/uiTools/actions";
-import { BranchingPanel } from "../Questions/BranchingPanel";
 import { Header } from "./Header";
 import { useQuestionsStore } from "@root/questions/store";
-import { useQuizes } from "@root/quizes/hooks";
 import { questionApi } from "@api/question";
 import { useUiTools } from "@root/uiTools/store";
 
-import Logotip from "../Landing/images/icons/QuizLogo";
-import { clearUserData } from "@root/user";
-import { clearAuthToken } from "@frontend/kitui";
-import { logout } from "@api/auth";
 import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
 import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
 import { ConfirmLeaveModal } from "./ConfirmLeaveModal";
@@ -69,10 +44,11 @@ import { checkQuestionHint } from "@utils/checkQuestionHint";
 import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
 import { toggleQuizPreview } from "@root/quizPreview";
 import { LinkSimple } from "@icons/LinkSimple";
-import { BackButtonIcon } from "@icons/BackButtonIcon";
+import { SmallSwitchQuestionListGraph } from "@ui_kit/Toolbars/SmallSwitchQuestionListGraph";
-import { TreeStructure } from "@icons/TreeStructure";
+import { PanelSwitchQuestionListGraph } from "@ui_kit/Toolbars/PanelSwitchQuestionListGraph";
+import { ButtonTestPublication } from "@ui_kit/Toolbars/ButtonTestPublication";
+import { ButtonRecallQuiz } from "@ui_kit/Toolbars/ButtonRecallQuiz";
 
-let init: () => void;
 export default function EditPage() {
   const quiz = useCurrentQuiz();
   const { editQuizId } = useQuizStore();
@@ -86,11 +62,9 @@ export default function EditPage() {
 
       if (editQuizId) {
         const questions = await questionApi.getList({ quiz_id: editQuizId });
-        console.log(questions);
+
         setQuestions(questions);
         //Всегда должен существовать хоть 1 резулт - "line"
-        // console.log("сейчас будем ворошиться в этих квешенах ", questions);
-
         if (
           !questions?.find(
             (q) =>
@@ -106,16 +80,10 @@ export default function EditPage() {
     getData();
   }, []);
 
-  const {
+  const { whyCantCreatePublic, showConfirmLeaveModal } = useUiTools();
-    openBranchingPanel,
-    whyCantCreatePublic,
-    canCreatePublic,
-    showConfirmLeaveModal,
-  } = useUiTools();
   const theme = useTheme();
   const navigate = useNavigate();
   const currentStep = useQuizStore((state) => state.currentStep);
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
   const isMobile = useMediaQuery(theme.breakpoints.down(660));
   const isLinkButton = useMediaQuery(theme.breakpoints.down(708));
@@ -123,11 +91,7 @@ export default function EditPage() {
   const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
   const [nextStep, setNextStep] = useState<number>(0);
   const quizConfig = quiz?.config;
-  const disableTest = quiz === undefined ? true : quiz.config.type === null;
   const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
-  const [buttonText, setButtonText] = useState(
-    quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
-  );
 
   const openBranchingPageHC = () => {
     if (!openBranchingPage) {
@@ -158,7 +122,6 @@ export default function EditPage() {
         updateQuiz(quiz?.id, (state) => {
           state.status = "stop";
         });
-        setButtonText("Опубликовать");
         updateCanCreatePublic(false);
       } else {
         updateCanCreatePublic(true);
@@ -179,28 +142,7 @@ export default function EditPage() {
   if (!quizConfig) return <></>;
 
   const isConditionMet =
-    [1].includes(currentStep) &&
+    [1].includes(currentStep) && quizConfig.type !== "form";
-    !openBranchingPanel &&
-    quizConfig.type !== "form";
-
-  const handleClickStatusQuiz = () => {
-    if (Object.keys(whyCantCreatePublic).length === 0) {
-      if (buttonText === "Опубликовать") {
-        setButtonText("Опубликовано");
-        setTimeout(() => {
-          setButtonText("Отозвать");
-        }, 1500);
-      } else {
-        setButtonText("Опубликовать");
-      }
-
-      updateQuiz(quiz?.id, (state) => {
-        state.status = quiz?.status === "start" ? "stop" : "start";
-      });
-    } else {
-      updateModalInfoWhyCantCreate(true);
-    }
-  };
 
   const changePage = (index: number) => {
     if (currentStep === 2) {
@@ -216,6 +158,7 @@ export default function EditPage() {
   return (
     <>
       <Header setMobileSidebar={setMobileSidebar} />
+
       <Box
         sx={{
           display: isMobile ? "block" : "flex",
@@ -227,6 +170,7 @@ export default function EditPage() {
         ) : (
           <Sidebar changePage={changePage} />
         )}
+
         <Box
           sx={{
             background: theme.palette.background.default,
@@ -248,7 +192,7 @@ export default function EditPage() {
               boxSizing: "border-box",
             }}
           >
-            {/* Выбор текущей страницы редактирования чего-либо находится здесь */}
+            {/* Выбор текущей страницы редактирования чего-либо - находится здесь */}
             {quizConfig && (
               <>
                 <Stepper activeStep={currentStep} />
@@ -263,6 +207,7 @@ export default function EditPage() {
               </>
             )}
           </Box>
+
           <Box
             sx={{
               width: "100%",
@@ -277,228 +222,27 @@ export default function EditPage() {
               alignItems: "center",
               gap: "15px",
               background: "#FFF",
+              borderTop: "#f2f3f7 2px solid",
             }}
           >
             {isConditionMet &&
               (isBranchingLogic ? (
-                <Box
+                <SmallSwitchQuestionListGraph
-                  sx={{
+                  openBranchingPage={openBranchingPage}
-                    width: "77px",
+                  setOpenBranchingPage={openBranchingPageHC}
-                    height: "51px",
+                />
-                    position: "fixed",
-                    zIndex: "99999",
-                    right: "0",
-                    top: "20%",
-                    background: "#333647",
-                    borderTopLeftRadius: "8px",
-                    borderBottomLeftRadius: "8px",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                  }}
-                >
-                  <Switch
-                    icon={<TreeStructure />}
-                    checkedIcon={<TreeStructure />}
-                    checked={openBranchingPage}
-                    onChange={openBranchingPageHC}
-                    sx={{
-                      width: 50,
-                      height: 30,
-                      padding: 0,
-                      "& .MuiSwitch-switchBase": {
-                        padding: 0,
-                        margin: "2px",
-                        width: "26px",
-                        height: "26px",
-                        background: "#fff",
-                        transitionDuration: "300ms",
-                        "&:hover": {
-                          backgroundColor: "#fff !important",
-                        },
-                        "&:active": {
-                          background: "#fff",
-                        },
-                        "&.Mui-checked": {
-                          transform: "translateX(20px)",
-                          color: theme.palette.brightPurple.main,
-                          "& + .MuiSwitch-track": {
-                            backgroundColor: "#7E2AEA",
-                            opacity: 1,
-                            border: 0,
-                          },
-                          "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
-                        },
-                        "&.Mui-disabled .MuiSwitch-thumb": {
-                          color:
-                            theme.palette.mode === "light"
-                              ? theme.palette.grey[100]
-                              : theme.palette.grey[600],
-                        },
-                        "&.Mui-disabled + .MuiSwitch-track": {
-                          opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
-                        },
-                      },
-                      "& .MuiSwitch-thumb": {
-                        boxSizing: "border-box",
-                        width: 25,
-                        height: 25,
-                      },
-                      "& .MuiSwitch-track": {
-                        backgroundColor: "rgba(217, 188, 255, 0.16)",
-                        borderRadius: 13,
-                        opacity: 1,
-                        transition: theme.transitions.create(
-                          ["background-color"],
-                          {
-                            duration: 500,
-                          },
-                        ),
-                      },
-                    }}
-                  />
-                </Box>
               ) : (
-                <Box
+                <PanelSwitchQuestionListGraph
-                  sx={{
+                  openBranchingPage={openBranchingPage}
-                    display: "flex",
+                  setOpenBranchingPage={openBranchingPageHC}
-                    alignItems: "center",
+                  hideText
-                    gap: "15px",
+                />
-                    padding: "18px",
-                    background: "#fff",
-                    borderRadius: "12px",
-                    boxShadow: "0px 10px 30px #e7e7e7",
-                  }}
-                >
-                  <Switch
-                    checked={openBranchingPage}
-                    onChange={openBranchingPageHC}
-                    sx={{
-                      width: 50,
-                      height: 30,
-                      padding: 0,
-                      "& .MuiSwitch-switchBase": {
-                        padding: 0,
-                        margin: "2px",
-                        transitionDuration: "300ms",
-                        "&.Mui-checked": {
-                          transform: "translateX(20px)",
-                          color: theme.palette.brightPurple.main,
-                          "& + .MuiSwitch-track": {
-                            backgroundColor: "#E8DCF9",
-                            opacity: 1,
-                            border: 0,
-                          },
-                          "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
-                        },
-                        "&.Mui-disabled .MuiSwitch-thumb": {
-                          color:
-                            theme.palette.mode === "light"
-                              ? theme.palette.grey[100]
-                              : theme.palette.grey[600],
-                        },
-                        "&.Mui-disabled + .MuiSwitch-track": {
-                          opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
-                        },
-                      },
-                      "& .MuiSwitch-thumb": {
-                        boxSizing: "border-box",
-                        width: 25,
-                        height: 25,
-                      },
-                      "& .MuiSwitch-track": {
-                        borderRadius: 13,
-                        backgroundColor:
-                          theme.palette.mode === "light"
-                            ? "#E9E9EA"
-                            : "#39393D",
-                        opacity: 1,
-                        transition: theme.transitions.create(
-                          ["background-color"],
-                          {
-                            duration: 500,
-                          },
-                        ),
-                      },
-                    }}
-                  />
-                  <Box>
-                    <Typography
-                      sx={{
-                        fontWeight: "bold",
-                        color: "#4D4D4D",
-                        whiteSpace: "nowrap",
-                      }}
-                    >
-                      Логика ветвления
-                    </Typography>
-                  </Box>
-                </Box>
               ))}
-
+            {/* Кнопка тестового просмотра  */}
-            <Box sx={{ display: isMobile ? "none" : "block" }}>
+            <ButtonTestPublication />
-              {!canCreatePublic && quiz.config.type !== "form" ? (
+            {/* Кнопка отозвать */}
-                <Button
+            <ButtonRecallQuiz />
-                  variant="contained"
+            {/* Ссылка */}
-                  // disabled
-                  sx={{
-                    fontSize: "14px",
-                    lineHeight: "18px",
-                    height: "34px",
-                    whiteSpace: "nowrap",
-                    minWidth: "130px",
-                  }}
-                  onClick={() =>
-                    Object.keys(whyCantCreatePublic).length === 0
-                      ? () => {}
-                      : updateModalInfoWhyCantCreate(true)
-                  }
-                >
-                  Тестовый просмотр
-                </Button>
-              ) : (
-                <a
-                  href={`/view`}
-                  target="_blank"
-                  rel="noreferrer"
-                  style={{ textDecoration: "none" }}
-                >
-                  <Button
-                    variant="contained"
-                    sx={{
-                      fontSize: "14px",
-                      whiteSpace: "nowrap",
-                      lineHeight: "18px",
-                      height: "34px",
-                    }}
-                  >
-                    Тестовый просмотр
-                  </Button>
-                </a>
-              )}
-            </Box>
-
-            <Button
-              variant="contained"
-              sx={{
-                fontSize: "14px",
-                lineHeight: "18px",
-                height: "34px",
-                background:
-                  buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
-                p: "0 18px",
-                minWidth: "120px",
-              }}
-              onClick={handleClickStatusQuiz}
-            >
-              {buttonText === "Отозвать" ? (
-                <Box sx={{ display: "flex", gap: "4px", alignItems: "center" }}>
-                  {buttonText} <BackButtonIcon />
-                </Box>
-              ) : (
-                buttonText
-              )}
-            </Button>
             {quiz?.status === "start" &&
               (!isLinkButton ? (
                 <Box
@@ -537,40 +281,7 @@ export default function EditPage() {
                   <LinkSimple />
                 </Box>
               ))}
-
+            {/* Маленькая кнопка ссылки */}
-            {isMobile ? (
-              <Button
-                onClick={toggleQuizPreview}
-                variant="outlined"
-                sx={{
-                  display: "flex",
-                  gap: "4px",
-                  fontSize: "14px",
-                  lineHeight: "18px",
-                  height: "34px",
-                  border: "1px solid #7E2AEA",
-                  color: "#7E2AEA",
-                  background: "white",
-                  p: "8px 14px",
-                }}
-              >
-                <EyeIcon />
-                Предпросмотр
-              </Button>
-            ) : (
-              <IconButton
-                onClick={toggleQuizPreview}
-                sx={{
-                  pointerEvents: "auto",
-                  marginLeft: "auto",
-                  position: "relative",
-                  zIndex: "999999",
-                }}
-              >
-                <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
-              </IconButton>
-            )}
-
             {isMobile && quiz?.status === "start" && (
               <Box
                 component={Link}
@@ -595,6 +306,7 @@ export default function EditPage() {
           </Box>
         </Box>
       </Box>
+
       <ModalInfoWhyCantCreate />
       <ConfirmLeaveModal
         open={showConfirmLeaveModal}

src/stores/uiTools/actions.ts

@@ -1,8 +1,5 @@
 import { useUiTools } from "./store";
 
-export const updateOpenBranchingPanel = (value: boolean) =>
-  useUiTools.setState({ openBranchingPanel: value });
-
 export const cleardragQuestionContentId = () => {
   useUiTools.setState({ dragQuestionContentId: null });
 };

src/stores/uiTools/store.ts

@@ -4,7 +4,6 @@ import { devtools } from "zustand/middleware";
 export type UiTools = {
   openedModalSettingsId: string | null;
   dragQuestionContentId: string | null;
-  openBranchingPanel: boolean;
   desireToOpenABranchingModal: string | null;
   editSomeQuestion: string | null;
   canCreatePublic: boolean;
@@ -23,7 +22,6 @@ export type WhyCantCreatePublic = {
 const initialState: UiTools = {
   openedModalSettingsId: null as null,
   dragQuestionContentId: null,
-  openBranchingPanel: false,
   desireToOpenABranchingModal: null as null,
   editSomeQuestion: null as null,
   canCreatePublic: false,

src/ui_kit/CustomTextField.tsx

@@ -5,6 +5,8 @@ import {
   TextField,
   Typography,
   useTheme,
+  Input,
+  InputLabel,
 } from "@mui/material";
 import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
 import type { InputProps, SxProps, Theme } from "@mui/material";
@@ -20,8 +22,10 @@ interface CustomTextFieldProps {
   text?: string;
   maxLength?: number;
   sx?: SxProps<Theme>;
+  sxForm?: SxProps<Theme>;
   InputProps?: Partial<InputProps>;
   type?: string;
+  rows?: number;
 }
 
 export default function CustomTextField({
@@ -37,6 +41,8 @@ export default function CustomTextField({
   InputProps,
   maxLength = 200,
   type = "",
+  rows = 0,
+  sxForm,
 }: CustomTextFieldProps) {
   const theme = useTheme();
 
@@ -74,39 +80,40 @@ export default function CustomTextField({
   };
 
   return (
-    <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
+    <FormControl fullWidth variant="standard" sx={{ p: 0, ...sxForm }}>
-      <TextField
+      {error && (
+        <InputLabel
+          sx={{
+            fontSize: "13.5px",
+            marginTop: "3px",
+          }}
+        >
+          {error}
+        </InputLabel>
+      )}
+      <Input
         defaultValue={text}
         fullWidth
         value={inputValue}
         placeholder={placeholder}
         onChange={handleInputChange}
         error={!!error || emptyError}
-        label={error}
         onFocus={handleInputFocus}
         onBlur={handleInputBlur}
         onKeyDown={onKeyDown}
+        multiline={rows > 0}
+        rows={rows}
+        disableUnderline
         sx={{
-          "& .MuiInputBase-root": {
-            backgroundColor: theme.palette.background.default,
-            height: "48px",
-            borderRadius: "10px",
-          },
-          "& .MuiInputLabel-root": {
-            fontSize: "13.5px",
-            marginTop: "3px",
-          },
-        }}
-        InputProps={InputProps}
-        inputProps={{
           maxLength: maxLength,
-          sx: {
+          borderRadius: "10px",
-            borderRadius: "10px",
+          fontSize: "18px",
-            fontSize: "18px",
+          lineHeight: "21px",
-            lineHeight: "21px",
+          p: "13px",
-            py: 0,
+          border: `${isInputActive ? "black 2px" : "#9A9AAF 1px"} solid`,
-            ...sx,
+          backgroundColor: theme.palette.background.default,
-          },
+          height: "48px",
+          ...sx,
         }}
         data-cy="textfield"
       />

src/ui_kit/Toolbars/ButtonRecallQuiz.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react";
+import { useCurrentQuiz } from "@root/quizes/hooks";
+import { useUiTools } from "@root/uiTools/store";
+import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
+import { updateQuiz } from "@root/quizes/actions";
+import { Button, Box } from "@mui/material";
+import { BackButtonIcon } from "@icons/BackButtonIcon";
+
+export const ButtonRecallQuiz = () => {
+  const quiz = useCurrentQuiz();
+  const { whyCantCreatePublic, canCreatePublic } = useUiTools();
+
+  console.log(quiz?.status);
+  const [buttonText, setButtonText] = useState(
+    quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
+  );
+  useEffect(() => {
+    if (!canCreatePublic) setButtonText("Опубликовать");
+  }, [canCreatePublic]);
+
+  const handleClickStatusQuiz = () => {
+    if (Object.keys(whyCantCreatePublic).length === 0) {
+      if (buttonText === "Опубликовать") {
+        setButtonText("Опубликовано");
+        setTimeout(() => {
+          setButtonText("Отозвать");
+        }, 1500);
+      } else {
+        setButtonText("Опубликовать");
+      }
+
+      updateQuiz(quiz?.id, (state) => {
+        state.status = quiz?.status === "start" ? "stop" : "start";
+      });
+    } else {
+      updateModalInfoWhyCantCreate(true);
+    }
+  };
+
+  return (
+    <Button
+      variant="contained"
+      sx={{
+        fontSize: "14px",
+        lineHeight: "18px",
+        height: "34px",
+        background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
+        p: "0 18px",
+        minWidth: "120px",
+      }}
+      onClick={handleClickStatusQuiz}
+    >
+      {buttonText === "Отозвать" ? (
+        <Box sx={{ display: "flex", gap: "4px", alignItems: "center" }}>
+          {buttonText} <BackButtonIcon />
+        </Box>
+      ) : (
+        buttonText
+      )}
+    </Button>
+  );
+};

src/ui_kit/Toolbars/ButtonTestPublication.tsx

@@ -0,0 +1,51 @@
+import { useUiTools } from "@root/uiTools/store";
+import { updateModalInfoWhyCantCreate } from "@root/uiTools/actions";
+import { Button } from "@mui/material";
+
+export const ButtonTestPublication = () => {
+  const { whyCantCreatePublic, canCreatePublic } = useUiTools();
+
+  if (canCreatePublic) {
+    return (
+      <a
+        href={`/view`}
+        target="_blank"
+        rel="noreferrer"
+        style={{ textDecoration: "none" }}
+      >
+        <Button
+          variant="contained"
+          sx={{
+            fontSize: "14px",
+            whiteSpace: "nowrap",
+            lineHeight: "18px",
+            height: "34px",
+          }}
+        >
+          Тестовый просмотр
+        </Button>
+      </a>
+    );
+  } else {
+    // disabled
+    return (
+      <Button
+        variant="contained"
+        sx={{
+          fontSize: "14px",
+          lineHeight: "18px",
+          height: "34px",
+          whiteSpace: "nowrap",
+          minWidth: "130px",
+        }}
+        onClick={() =>
+          Object.keys(whyCantCreatePublic).length === 0
+            ? () => {}
+            : updateModalInfoWhyCantCreate(true)
+        }
+      >
+        Тестовый просмотр
+      </Button>
+    );
+  }
+};

src/ui_kit/Toolbars/PanelSwitchQuestionListGraph.tsx

@@ -0,0 +1,92 @@
+import { Box, Switch, useTheme, Typography } from "@mui/material";
+
+interface Props {
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
+  hideText?: boolean;
+}
+
+export const PanelSwitchQuestionListGraph = ({
+  openBranchingPage,
+  setOpenBranchingPage,
+  hideText = false,
+}: Props) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: "15px",
+        padding: "18px",
+        background: "#fff",
+        borderRadius: "12px",
+        boxShadow: "0px 10px 30px #e7e7e7",
+      }}
+    >
+      <Switch
+        checked={openBranchingPage}
+        onChange={(e) => setOpenBranchingPage(e.target.checked)}
+        sx={{
+          width: 50,
+          height: 30,
+          padding: 0,
+          "& .MuiSwitch-switchBase": {
+            padding: 0,
+            margin: "2px",
+            transitionDuration: "300ms",
+            "&.Mui-checked": {
+              transform: "translateX(20px)",
+              color: theme.palette.brightPurple.main,
+              "& + .MuiSwitch-track": {
+                backgroundColor: "#E8DCF9",
+                opacity: 1,
+                border: 0,
+              },
+              "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+            },
+            "&.Mui-disabled .MuiSwitch-thumb": {
+              color:
+                theme.palette.mode === "light"
+                  ? theme.palette.grey[100]
+                  : theme.palette.grey[600],
+            },
+            "&.Mui-disabled + .MuiSwitch-track": {
+              opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+            },
+          },
+          "& .MuiSwitch-thumb": {
+            boxSizing: "border-box",
+            width: 25,
+            height: 25,
+          },
+          "& .MuiSwitch-track": {
+            borderRadius: 13,
+            backgroundColor:
+              theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+            opacity: 1,
+            transition: theme.transitions.create(["background-color"], {
+              duration: 500,
+            }),
+          },
+        }}
+      />
+      <Box>
+        <Typography
+          sx={{
+            fontWeight: "bold",
+            color: "#4D4D4D",
+            whiteSpace: "nowrap",
+          }}
+        >
+          Логика ветвления
+        </Typography>
+        {!hideText && (
+          <Typography sx={{ color: "#4D4D4D", fontSize: "12px" }}>
+            Настройте связи между вопросами
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  );
+};

src/ui_kit/Toolbars/SmallSwitchQuestionListGraph.tsx

@@ -0,0 +1,90 @@
+import { Box, Switch, useTheme } from "@mui/material";
+import { TreeStructure } from "@icons/TreeStructure";
+
+interface Props {
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
+}
+
+export const SmallSwitchQuestionListGraph = ({
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        width: "77px",
+        height: "51px",
+        position: "fixed",
+        zIndex: "99999",
+        right: "0",
+        top: "200px",
+        background: "#333647",
+        borderTopLeftRadius: "8px",
+        borderBottomLeftRadius: "8px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Switch
+        icon={<TreeStructure />}
+        checkedIcon={<TreeStructure />}
+        checked={openBranchingPage}
+        onChange={(e) => setOpenBranchingPage(e.target.checked)}
+        sx={{
+          width: 50,
+          height: 30,
+          padding: 0,
+          "& .MuiSwitch-switchBase": {
+            padding: 0,
+            margin: "2px",
+            width: "26px",
+            height: "26px",
+            background: "#fff",
+            transitionDuration: "300ms",
+            "&:hover": {
+              backgroundColor: "#fff !important",
+            },
+            "&:active": {
+              background: "#fff",
+            },
+            "&.Mui-checked": {
+              transform: "translateX(20px)",
+              color: theme.palette.brightPurple.main,
+              "& + .MuiSwitch-track": {
+                backgroundColor: "#7E2AEA",
+                opacity: 1,
+                border: 0,
+              },
+              "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+            },
+            "&.Mui-disabled .MuiSwitch-thumb": {
+              color:
+                theme.palette.mode === "light"
+                  ? theme.palette.grey[100]
+                  : theme.palette.grey[600],
+            },
+            "&.Mui-disabled + .MuiSwitch-track": {
+              opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
+            },
+          },
+          "& .MuiSwitch-thumb": {
+            boxSizing: "border-box",
+            width: 25,
+            height: 25,
+          },
+          "& .MuiSwitch-track": {
+            backgroundColor: "rgba(217, 188, 255, 0.16)",
+            borderRadius: 13,
+            opacity: 1,
+            transition: theme.transitions.create(["background-color"], {
+              duration: 500,
+            }),
+          },
+        }}
+      />
+    </Box>
+  );
+};