Fix/merge issues

src/components/RequestEditor/ui/Controls.tsx

@@ -3,6 +3,7 @@ import { FC, HTMLAttributes } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
+import useLanguage from '@/shared/Context/hooks';
 import ROUTES from '@shared/constants/routes';
 import urlParams from '@shared/constants/urlParams';
 import cn from '@shared/lib/helpers/cn';
@@ -21,15 +22,21 @@ type ControlsProps = HTMLAttributes<HTMLUListElement> & {
 const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) => {
   const { readUrl } = useUrl();
   const screenType = useScreen();
+  const { translation } = useLanguage();
+  const {
+    controlsTooltips: { copy, play, prettify, openResp },
+    snackbar: { copy: copySnackbar },
+  } = translation.mainPage.requestEditor;
   const isAnimationsDisabled = screenType === 'tablet' || screenType === 'mobile';
+
   const { pathname } = useLocation();
 
   if (pathname.slice(1) !== ROUTES.MAIN) return null;
 
   const handleCopyText = async () => {
     const query = readUrl(urlParams.QUERY);
     await navigator.clipboard.writeText(query);
-    toast('Copied to clipboard');
+    toast(copySnackbar);
   };
 
   return (
@@ -43,7 +50,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <Fab data-testid="fab" variant="primary">
+        <Fab data-testid="fab" variant="primary" data-tooltip={play} className="tooltipElem">
           <Icon slot="icon">play_arrow</Icon>
         </Fab>
       </li>
@@ -53,7 +60,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="copy-text" onClick={handleCopyText}>
+        <FilledIconButton data-testid="copy-text" onClick={handleCopyText} data-tooltip={copy} className="tooltipElem">
           <Icon>content_copy</Icon>
         </FilledIconButton>
       </li>
@@ -63,7 +70,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="prettify">
+        <FilledIconButton data-testid="prettify" data-tooltip={prettify} className="tooltipElem">
           <Icon>mop</Icon>
         </FilledIconButton>
       </li>
@@ -73,7 +80,12 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="open-response" onClick={() => onResponseOpen?.((prevState) => !prevState)}>
+        <FilledIconButton
+          data-testid="open-response"
+          onClick={() => onResponseOpen?.((prevState) => !prevState)}
+          data-tooltip={openResp}
+          className="tooltipElem"
+        >
           <Icon>info</Icon>
         </FilledIconButton>
       </li>

src/components/SettingsPageComp/ClearStorageComp.tsx

@@ -4,7 +4,6 @@ import useLanguage from '@/shared/Context/hooks';
 import FilledTonalButton from '@/shared/ui/FilledTonalButton';
 
 import ConfirmModal from './ConfirmModal';
-import ConfirmOverlay from './ConfirmOverlay';
 
 const ClearStorageComp = () => {
   const [isModalShown, setIsModalShown] = useState(false);
@@ -21,12 +20,11 @@ const ClearStorageComp = () => {
           {translation.settingsPage.clear.btn}
         </FilledTonalButton>
       </div>
-      <ConfirmOverlay isShown={isModalShown} setIsShown={setIsModalShown}>
-        <ConfirmModal
-          setIsShown={setIsModalShown}
-          locales={{ ...translation.settingsPage.clear.modal, ...translation.settingsPage.clear.undo }}
-        />
-      </ConfirmOverlay>
+      <ConfirmModal
+        open={isModalShown}
+        setIsShown={setIsModalShown}
+        locales={{ ...translation.settingsPage.clear.modal, ...translation.settingsPage.clear.undo }}
+      />
     </>
   );
 };

src/components/SettingsPageComp/ClearUndo.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import { SNACKBAR_AUTO_HIDE_DURATION } from '@shared/constants/const';
+
 type UndoPropsType = {
   closeToast: () => void;
   title: string;
@@ -17,7 +19,7 @@ const ClearUndo = (props: UndoPropsType) => {
   useEffect(() => {
     const timeoutId = setTimeout(() => {
       dataClearance();
-    }, 2000);
+    }, SNACKBAR_AUTO_HIDE_DURATION);
 
     setDeleteDataTimeout(timeoutId);
 
@@ -32,9 +34,9 @@ const ClearUndo = (props: UndoPropsType) => {
   };
 
   return (
-    <div className="flex items-center justify-around text-sm">
+    <div className="flex items-center text-sm">
       <p className="font-[400] text-inverse-on-surface">{title}</p>
-      <button className="font-[500] text-inverse-primary" type="button" onClick={handleClick}>
+      <button className="absolute right-3 font-[500] text-inverse-primary" type="button" onClick={handleClick}>
         {btn}
       </button>
     </div>

src/components/SettingsPageComp/ConfirmModal.tsx

@@ -1,15 +1,18 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, SetStateAction, useRef } from 'react';
 
+import { MdDialog } from '@material/web/all';
 import { toast } from 'react-toastify';
 
 import FilledTonalButton from '@/shared/ui/FilledTonalButton';
 import Icon from '@/shared/ui/Icon';
 import TextButton from '@/shared/ui/TextButton';
+import Dialog from '@shared/ui/Dialog';
 
 import ClearUndo from './ClearUndo';
 
 type PropsType = {
   setIsShown: Dispatch<SetStateAction<boolean>>;
+  open: boolean;
   locales: {
     title: string;
     subtitle: string;
@@ -20,25 +23,35 @@ type PropsType = {
   };
 };
 
-const ConfirmModal: FC<PropsType> = ({ setIsShown, locales }) => {
+const ConfirmModal: FC<PropsType> = ({ open, setIsShown, locales }) => {
   const { title, subtitle, cancel, confirm, undoTitle, cancelBtn } = locales;
+  const dialogRef = useRef<MdDialog>(null);
+
   return (
-    <div className="w-[312px] rounded-4xl bg-surface-container-high p-6 text-center font-[500] text-on-surface">
-      <Icon>delete</Icon>
-      <h3 className="mt-4 text-2xl">{title}</h3>
-      <p className="mt-4 text-start text-sm text-on-surface-variant">{subtitle}</p>
-      <div className="mt-6 flex justify-end gap-2">
-        <TextButton onClick={() => setIsShown((prev) => !prev)}>{cancel}</TextButton>
+    <Dialog open={open} ref={dialogRef} className="max-w-[320px]" closed={() => setIsShown(false)}>
+      <div slot="headline">{title}</div>
+      <Icon slot="icon">delete_outline</Icon>
+      <form id="form" slot="content" method="dialog">
+        {subtitle}
+      </form>
+      <div slot="actions">
+        <TextButton
+          onClick={() => {
+            if (dialogRef.current) dialogRef.current.close();
+          }}
+        >
+          {cancel}
+        </TextButton>
         <FilledTonalButton
           onClick={() => {
             toast(<ClearUndo closeToast={() => {}} title={undoTitle} btn={cancelBtn} />);
-            setIsShown((prev) => !prev);
+            if (dialogRef.current) dialogRef.current.close();
           }}
         >
           {confirm}
         </FilledTonalButton>
       </div>
-    </div>
+    </Dialog>
   );
 };
 

src/layouts/MainLayout.tsx

@@ -6,6 +6,7 @@ import Header from '@components/Header/Header';
 import Nav from '@components/Nav/Nav';
 import Controls from '@components/RequestEditor/ui/Controls';
 import ViewProvider from '@components/ViewList/context/ViewProvider';
+import { SNACKBAR_AUTO_HIDE_DURATION } from '@shared/constants/const';
 import useScrollbar from '@shared/lib/hooks/useScrollbar';
 
 const SnackBarTransition = cssTransition({
@@ -39,15 +40,15 @@ const MainLayout = () => {
       <ToastContainer
         closeOnClick={false}
         closeButton={false}
-        autoClose={4000}
+        autoClose={SNACKBAR_AUTO_HIDE_DURATION}
         hideProgressBar
         pauseOnHover={false}
         draggable={false}
         limit={1}
         transition={SnackBarTransition}
         position="bottom-left"
         toastClassName="!text-inverse-on-surface origin-bottom !bg-inverse-surface !min-w-[336px] !pl-4 !min-h-[48px] text-left"
-        bodyClassName="text-sm font-normal [&>div]:origin-bottom [&>div]:animate-fade-in-snackbar-body [&>div]:truncate w-full [&>div]:pe-16"
+        bodyClassName="text-sm font-normal relative !p-0 [&>div]:origin-bottom [&>div]:animate-fade-in-snackbar-body [&>div]:truncate w-full [&>div]:pe-16"
       />
     </ViewProvider>
   );

src/locales/en.ts

@@ -79,7 +79,26 @@ const en = {
 			},
 		},
 	},
-	header: { h1: { h2: 'english' } },
+	mainPage: {
+		requestEditor: {
+			controlsTooltips: {
+				play: 'Execute query',
+				copy: 'Copy query',
+				prettify: 'Prettify query',
+				openResp: 'Open response',
+			},
+			snackbar: {
+				copy: 'Copied to clipboard',
+			},
+		},
+	},
+	mainLayout: {
+		header: {
+			tooltips: {
+				docs: 'Show docs',
+			},
+		},
+	},
 };
 
 export default en;

src/locales/ru.ts

@@ -84,10 +84,13 @@ const ru = {
 		requestEditor: {
 			controlsTooltips: {
 				play: 'Отправить запрос',
-				copy: 'Копир. текст',
-				prettify: 'Притификация',
+				copy: 'Скопировать запрос',
+				prettify: 'Форматировать запрос',
 				openResp: 'Открыть ответ',
 			},
+			snackbar: {
+				copy: 'Скопировано в буфер обмена',
+			},
 		},
 	},
 	mainLayout: {

src/shared/constants/const.ts

@@ -7,3 +7,4 @@ export const QUERY_PARAMS_INIT = {
 
 export const INTERPOLATION_START = 1;
 export const INTERPOLATION_END = 0.8;
+export const SNACKBAR_AUTO_HIDE_DURATION = 4000;

src/test/SettingsPage/SettingsPage.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import App from '@/app/App';
@@ -37,40 +37,6 @@ describe('Testing for settings page', () => {
     expect(await screen.findByText('Dark mode')).toBeInTheDocument();
     expect(await screen.findByText('Clear storage')).toBeInTheDocument();
   });
-  it('Should opened modal and close it with proper buttons', async () => {
-    render(<App />);
-    const clearDataBtn = screen.getByText('Clear data');
-    expect(screen.queryByTestId('overlay')).toBeNull();
-    await act(async () => {
-      fireEvent.click(clearDataBtn);
-    });
-    expect(await screen.findByTestId('overlay')).toBeInTheDocument();
-    const closeBtn = await screen.findByText('Cancel');
-    await act(async () => {
-      fireEvent.click(closeBtn);
-    });
-    waitForElementToBeRemoved(() => {
-      expect(screen.queryByTestId('overlay')).toBeNull();
-    }).catch(() => {});
-  });
-  it('Should open confirm modal and close it after clicking corresponding buttons', async () => {
-    render(<App />);
-    const clearDataBtn = screen.getByText('Clear data');
-    await act(async () => {
-      fireEvent.click(clearDataBtn);
-    });
-    const clearBtn = await screen.findByText('Clear');
-    await act(async () => {
-      fireEvent.click(clearBtn);
-    });
-    const undoBtn = await screen.findByText('Undo');
-    await act(async () => {
-      fireEvent.click(undoBtn);
-    });
-    waitForElementToBeRemoved(() => {
-      expect(undoBtn).toBeNull();
-    }).catch(() => {});
-  });
   it('Should change color theme after clicking on theme switcher', async () => {
     render(<App />);
     expect(document.body.getAttribute('data-user-theme')).toBeNull();