From 9076b7646d3a9437c955027b867ea7755f070bb4 Mon Sep 17 00:00:00 2001
From: Liana <samosha_yul@icloud.com>
Date: Mon, 13 May 2024 14:55:12 +0300
Subject: [PATCH] done all tasks

---
 .../components/Filters/FilteringWindow.tsx    |  8 +++--
 .../src/components/Filters/OrderingWindow.tsx |  8 +++--
 .../client/src/components/Header/Header.tsx   |  1 +
 .../src/components/Inputs/Select/Select.tsx   |  1 -
 .../Inputs/Select/customComponents.tsx        |  5 +--
 .../ListPropertiesModal.tsx                   | 11 +++++-
 .../src/components/LogInModal/steps/LogIn.tsx |  1 -
 .../ModalContainer/ModalContainer.module.scss |  2 +-
 .../components/SignUpModal/SignUpModal.tsx    |  1 -
 .../components/SignUpModal/steps/CoreInfo.tsx |  1 -
 .../SignUpModal/steps/EmailVerification.tsx   |  1 -
 .../src/constants/primitiveReportPathnames.ts |  2 +-
 web-app/client/src/graphql/client.ts          |  2 --
 web-app/client/src/hooks/useModal.tsx         |  1 -
 web-app/client/src/pages/_app.tsx             |  2 ++
 web-app/client/src/pages/_document.tsx        |  2 --
 .../client/src/pages/reports/dependencies.tsx | 17 +++++----
 .../src/pages/reports/metric-dependencies.tsx | 36 ++++++++-----------
 18 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/web-app/client/src/components/Filters/FilteringWindow.tsx b/web-app/client/src/components/Filters/FilteringWindow.tsx
index d4ba9eae0..580ed84fe 100644
--- a/web-app/client/src/components/Filters/FilteringWindow.tsx
+++ b/web-app/client/src/components/Filters/FilteringWindow.tsx
@@ -1,13 +1,15 @@
-import React, { FC, useState } from 'react';
+import React, { Dispatch, FC, SetStateAction, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { Checkbox } from '@components/Inputs';
 import ListPropertiesModal from '@components/ListPropertiesModal';
 
 type FilteringProps = {
-  setIsFilteringShown: (arg: boolean) => void;
+  isFilteringShown: boolean;
+  setIsFilteringShown: Dispatch<SetStateAction<boolean>>;
 };
 
 export const FilteringWindow: FC<FilteringProps> = ({
+  isFilteringShown,
   setIsFilteringShown,
 }) => {
   const { watch, setValue } = useFormContext();
@@ -16,6 +18,8 @@ export const FilteringWindow: FC<FilteringProps> = ({
 
   return (
     <ListPropertiesModal
+      isOpen={isFilteringShown}
+      setIsOpen={setIsFilteringShown}
       name="Filters"
       onClose={() => {
         setShowKeys(initialShowKeys);
diff --git a/web-app/client/src/components/Filters/OrderingWindow.tsx b/web-app/client/src/components/Filters/OrderingWindow.tsx
index 69ebf92a5..cb146ae65 100644
--- a/web-app/client/src/components/Filters/OrderingWindow.tsx
+++ b/web-app/client/src/components/Filters/OrderingWindow.tsx
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, { FC } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import { useForm, useFormContext } from 'react-hook-form';
 import { ControlledSelect } from '@components/Inputs/Select';
 import ListPropertiesModal from '@components/ListPropertiesModal';
@@ -8,11 +8,13 @@ import { OrderDirection, PrimitiveType } from 'types/globalTypes';
 import { FiltersFields } from './Filters';
 
 type OrderingProps = {
-  setIsOrderingShown: (arg: boolean) => void;
+  isOrderingShown: boolean;
+  setIsOrderingShown: Dispatch<SetStateAction<boolean>>;
   primitive: PrimitiveType;
 };
 
 export const OrderingWindow: FC<OrderingProps> = ({
+  isOrderingShown,
   setIsOrderingShown,
   primitive,
 }) => {
@@ -42,6 +44,8 @@ export const OrderingWindow: FC<OrderingProps> = ({
 
   return (
     <ListPropertiesModal
+      isOpen={isOrderingShown}
+      setIsOpen={setIsOrderingShown}
       name="Ordering"
       onClose={() => {
         reset();
diff --git a/web-app/client/src/components/Header/Header.tsx b/web-app/client/src/components/Header/Header.tsx
index 0a53e1229..9cb3fdab6 100644
--- a/web-app/client/src/components/Header/Header.tsx
+++ b/web-app/client/src/components/Header/Header.tsx
@@ -7,6 +7,7 @@ import { useAuthContext } from '@hooks/useAuthContext';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import styles from './Header.module.scss';
+import Link from 'next/link';
 
 const Header = () => {
   const { user, signOut } = useAuthContext();
diff --git a/web-app/client/src/components/Inputs/Select/Select.tsx b/web-app/client/src/components/Inputs/Select/Select.tsx
index f4bea6dc2..911f66ccf 100644
--- a/web-app/client/src/components/Inputs/Select/Select.tsx
+++ b/web-app/client/src/components/Inputs/Select/Select.tsx
@@ -55,7 +55,6 @@ const Select: ForwardRefRenderFunction<RefElement, Props> = (
         ref={ref}
         styles={{
           menuPortal: (base) => {
-            console.log(base);
             return { ...base, zIndex: 9999999 };
           },
         }}
diff --git a/web-app/client/src/components/Inputs/Select/customComponents.tsx b/web-app/client/src/components/Inputs/Select/customComponents.tsx
index 5e65865ae..e42b74902 100644
--- a/web-app/client/src/components/Inputs/Select/customComponents.tsx
+++ b/web-app/client/src/components/Inputs/Select/customComponents.tsx
@@ -76,14 +76,11 @@ const IndicatorsContainer: ComponentType<
 
 const Menu: ComponentType<MenuProps<OptionType, false> & InputPropsBase> = (
   innerProps,
-) => {
-  console.log(innerProps);
-  return (
+) => (
     <FloatingPortal>
       <components.Menu {...innerProps}></components.Menu>
     </FloatingPortal>
   );
-};
 
 export const Option: ComponentType<
   OptionProps<OptionType, false> & InputPropsBase
diff --git a/web-app/client/src/components/ListPropertiesModal/ListPropertiesModal.tsx b/web-app/client/src/components/ListPropertiesModal/ListPropertiesModal.tsx
index 3a503f21a..53d6fb2d9 100644
--- a/web-app/client/src/components/ListPropertiesModal/ListPropertiesModal.tsx
+++ b/web-app/client/src/components/ListPropertiesModal/ListPropertiesModal.tsx
@@ -2,20 +2,29 @@ import Button from '@components/Button';
 import ModalContainer, { ModalProps } from '@components/ModalContainer';
 import { FCWithChildren } from 'types/react';
 import styles from './ListPropertiesModal.module.scss';
+import { Dispatch, SetStateAction } from 'react';
 
 interface Props extends ModalProps {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
   name: string;
   onApply: () => void;
 }
 
 const ListPropertiesModal: FCWithChildren<Props> = ({
+  isOpen,
+  setIsOpen,
   name,
   onClose,
   onApply,
   children,
 }) => {
   return (
-    <ModalContainer onClose={onClose}>
+    <ModalContainer
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onClose={onClose}
+    >
       <h4 className={styles.title}>{name}</h4>
       <div className={styles.inputs}>{children}</div>
       <div className={styles.buttons}>
diff --git a/web-app/client/src/components/LogInModal/steps/LogIn.tsx b/web-app/client/src/components/LogInModal/steps/LogIn.tsx
index d3e635ed2..4dd4c9f95 100644
--- a/web-app/client/src/components/LogInModal/steps/LogIn.tsx
+++ b/web-app/client/src/components/LogInModal/steps/LogIn.tsx
@@ -78,7 +78,6 @@ const LogIn: FC<Props> = ({ onSuccess, onRecovery }) => {
             placeholder="admin1234"
             {...register('password', {
               required: 'Required',
-              validate: (value) => isStrongPassword(value) || 'Weak password',
             })}
             error={errors.password?.message}
           />
diff --git a/web-app/client/src/components/ModalContainer/ModalContainer.module.scss b/web-app/client/src/components/ModalContainer/ModalContainer.module.scss
index 2fd11a447..9c2f8152b 100644
--- a/web-app/client/src/components/ModalContainer/ModalContainer.module.scss
+++ b/web-app/client/src/components/ModalContainer/ModalContainer.module.scss
@@ -5,7 +5,7 @@
   background: $black-50;
   display: grid;
   place-items: center;
-  z-index: 99999;
+  z-index: 9999;
 }
 
 .dialog {
diff --git a/web-app/client/src/components/SignUpModal/SignUpModal.tsx b/web-app/client/src/components/SignUpModal/SignUpModal.tsx
index b634a220b..4f7ee6edc 100644
--- a/web-app/client/src/components/SignUpModal/SignUpModal.tsx
+++ b/web-app/client/src/components/SignUpModal/SignUpModal.tsx
@@ -18,7 +18,6 @@ const SignUpModal: FC<ModalProps> = ({ isOpen, setIsOpen }) => {
   };
   const onCloseSignUp = () => setIsOpen(false);
   const onCloseSuccessVerified = () => setIsOpenSuccessVerified(false);
-  console.log(stage, isOpen);
 
   return (
     <>
diff --git a/web-app/client/src/components/SignUpModal/steps/CoreInfo.tsx b/web-app/client/src/components/SignUpModal/steps/CoreInfo.tsx
index 97aaa1609..239e3e7d1 100644
--- a/web-app/client/src/components/SignUpModal/steps/CoreInfo.tsx
+++ b/web-app/client/src/components/SignUpModal/steps/CoreInfo.tsx
@@ -131,7 +131,6 @@ const CoreInfo: FC<Props> = ({ onSuccess }) => {
             {...register('password', {
               required: 'Required',
               validate: (value) => {
-                console.log(isStrongPassword(value));
                 return (
                   isStrongPassword(value) ||
                   'The password does not match the pattern (see tooltip)'
diff --git a/web-app/client/src/components/SignUpModal/steps/EmailVerification.tsx b/web-app/client/src/components/SignUpModal/steps/EmailVerification.tsx
index 14ddf337b..dfd5d41fe 100644
--- a/web-app/client/src/components/SignUpModal/steps/EmailVerification.tsx
+++ b/web-app/client/src/components/SignUpModal/steps/EmailVerification.tsx
@@ -47,7 +47,6 @@ const EmailVerification: FC<Props> = ({ onSuccess }) => {
 
   const onSubmit = handleSubmit(async (values) => {
     onSuccess();
-    return;
     try {
       const response = await verifyEmail({
         variables: {
diff --git a/web-app/client/src/constants/primitiveReportPathnames.ts b/web-app/client/src/constants/primitiveReportPathnames.ts
index a1626a60c..0eb4642a4 100644
--- a/web-app/client/src/constants/primitiveReportPathnames.ts
+++ b/web-app/client/src/constants/primitiveReportPathnames.ts
@@ -1,7 +1,7 @@
 import { PrimitiveType } from 'types/globalTypes';
 
 export const primitivePathnames: Record<PrimitiveType, string> = {
-  AR: 'reports/test',
+  AR: 'reports/dependencies',
   CFD: 'reports/dependencies',
   FD: 'reports/dependencies',
   MFD: 'reports/metric-dependencies',
diff --git a/web-app/client/src/graphql/client.ts b/web-app/client/src/graphql/client.ts
index a8fbc62de..b055eace2 100644
--- a/web-app/client/src/graphql/client.ts
+++ b/web-app/client/src/graphql/client.ts
@@ -26,6 +26,4 @@ const client = new ApolloClient({
   ]),
 });
 
-console.log(pathnameToLocalURL(serverProxyURL), serverProxyURL);
-
 export default client;
diff --git a/web-app/client/src/hooks/useModal.tsx b/web-app/client/src/hooks/useModal.tsx
index b60856762..9c677c992 100644
--- a/web-app/client/src/hooks/useModal.tsx
+++ b/web-app/client/src/hooks/useModal.tsx
@@ -16,7 +16,6 @@ const defaultOpenModalOptions: OpenModalOptions = {
 const useModal = <T extends ModalName>(name: T) => {
   const [visibleModals, setVisibleModals] = useAtom(visibleModalsAtom);
   const [isOpen, setIsOpen] = useState(true);
-  console.log(visibleModals);
   const callerId = useId();
   const Modal = useMemo(() => modals[name], [name]);
 
diff --git a/web-app/client/src/pages/_app.tsx b/web-app/client/src/pages/_app.tsx
index d074d6c3c..9d76de75b 100644
--- a/web-app/client/src/pages/_app.tsx
+++ b/web-app/client/src/pages/_app.tsx
@@ -7,6 +7,7 @@ import client from '@graphql/client';
 import '@styles/globals.scss';
 import { AppPropsWithLayout } from 'types/pageWithLayout';
 import 'react-toastify/dist/ReactToastify.css';
+import Portals from './portals';
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -16,6 +17,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <ErrorContextProvider>
         <AuthContextProvider>
           <Layout>{getLayout(<Component {...pageProps} />)}</Layout>
+          <Portals />
           <ToastContainer />
         </AuthContextProvider>
       </ErrorContextProvider>
diff --git a/web-app/client/src/pages/_document.tsx b/web-app/client/src/pages/_document.tsx
index 2ede65c3e..736132584 100644
--- a/web-app/client/src/pages/_document.tsx
+++ b/web-app/client/src/pages/_document.tsx
@@ -1,7 +1,6 @@
 import GoogleAnalytics from '@components/GoogleAnalytics';
 import { isGoogleAnalyticsEnabled } from '@utils/env';
 import { Html, Head, Main, NextScript } from 'next/document';
-import Portals from './portals';
 
 const MyDocument = () => {
   return (
@@ -26,7 +25,6 @@ const MyDocument = () => {
       <body>
         <Main />
         <NextScript />
-        <Portals />
       </body>
     </Html>
   );
diff --git a/web-app/client/src/pages/reports/dependencies.tsx b/web-app/client/src/pages/reports/dependencies.tsx
index b69cf5f6b..3c1fae498 100644
--- a/web-app/client/src/pages/reports/dependencies.tsx
+++ b/web-app/client/src/pages/reports/dependencies.tsx
@@ -10,6 +10,7 @@ import {
 } from '@components/Filters';
 import { Icon } from '@components/IconComponent';
 import { Text } from '@components/Inputs';
+import ModalContainer from '@components/ModalContainer';
 import Pagination from '@components/Pagination/Pagination';
 import ReportsLayout from '@components/ReportsLayout';
 import { TaskContextProvider, useTaskContext } from '@components/TaskContext';
@@ -26,7 +27,7 @@ import { convertDependencies } from '@utils/convertDependencies';
 import type { GetServerSideProps } from 'next';
 import { ReactElement, useEffect, useMemo, useState } from 'react';
 import { FormProvider } from 'react-hook-form';
-import { IntersectionFilter, OrderBy, PrimitiveType } from 'types/globalTypes';
+import { IntersectionFilter, OrderBy, OrderDirection, PrimitiveType } from 'types/globalTypes';
 import { NextPageWithLayout } from 'types/pageWithLayout';
 
 type Props = {
@@ -111,17 +112,19 @@ const ReportsDependencies: NextPageWithLayout<Props> = ({ defaultData }) => {
     <>
       <FormProvider {...methods}>
         {isOrderingShown && (
-          <OrderingWindow
-            {...{
-              setIsOrderingShown,
-              primitive: primitive || PrimitiveType.FD,
-            }}
-          />
+            <OrderingWindow
+              {...{
+                isOrderingShown,
+                setIsOrderingShown,
+                primitive: primitive || PrimitiveType.FD,
+              }}
+            />
         )}
 
         {isFilteringShown && (
           <FilteringWindow
             {...{
+              isFilteringShown,
               setIsFilteringShown,
             }}
           />
diff --git a/web-app/client/src/pages/reports/metric-dependencies.tsx b/web-app/client/src/pages/reports/metric-dependencies.tsx
index 56d3c5df8..36fcf13de 100644
--- a/web-app/client/src/pages/reports/metric-dependencies.tsx
+++ b/web-app/client/src/pages/reports/metric-dependencies.tsx
@@ -7,20 +7,6 @@ import ListPropertiesModal from '@components/ListPropertiesModal';
 import Pagination from '@components/Pagination/Pagination';
 import ReportsLayout from '@components/ReportsLayout';
 
-import { ScrollDirection } from '@components/ScrollableNodeTable';
-import { MFDTable } from '@components/ScrollableNodeTable/implementations/MFDTable';
-import useMFDHighlight from '@hooks/useMFDHighlight';
-import useMFDTask from '@hooks/useMFDTask';
-import styles from '@styles/MetricDependencies.module.scss';
-import { MFDHighlight } from '@atoms/MFDTaskAtom';
-import Button from '@components/Button';
-import { Icon } from '@components/IconComponent';
-import { ControlledSelect } from '@components/Inputs/Select';
-
-import ListPropertiesModal from '@components/ListPropertiesModal';
-import Pagination from '@components/Pagination/Pagination';
-import ReportsLayout from '@components/ReportsLayout';
-
 import { ScrollDirection } from '@components/ScrollableNodeTable';
 import { MFDTable } from '@components/ScrollableNodeTable/implementations/MFDTable';
 import useMFDHighlight from '@hooks/useMFDHighlight';
@@ -29,9 +15,11 @@ import styles from '@styles/MetricDependencies.module.scss';
 import _ from 'lodash';
 import { useRouter } from 'next/router';
 import React, {
+  Dispatch,
   FC,
   ReactElement,
   ReactNode,
+  SetStateAction,
   useCallback,
   useEffect,
   useRef,
@@ -39,7 +27,12 @@ import React, {
 } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { MFDSortBy, OrderBy } from 'types/globalTypes';
+import {
+  MFDOrderingParameter,
+  MFDSortBy,
+  OrderBy,
+  OrderDirection,
+} from 'types/globalTypes';
 
 import { NextPageWithLayout } from 'types/pageWithLayout';
 
@@ -144,7 +137,6 @@ const ReportsMFD: NextPageWithLayout = () => {
       });
     },
     [loadMFDHighlight, taskID, clusterIndex],
-    [loadMFDHighlight, taskID, clusterIndex],
   );
 
   const closeInsertedRow = useCallback(() => {
@@ -164,13 +156,13 @@ const ReportsMFD: NextPageWithLayout = () => {
       }
     },
     [data.cluster.highlightsTotalCount, limit],
-    [data.cluster.highlightsTotalCount, limit],
   );
 
   return (
     <>
       {isOrderingShown && (
         <OrderingWindow
+          isOrderingShown={isOrderingShown}
           setIsOrderingShown={setIsOrderingShown}
           setOrderingParameter={setOrderingParameter}
           setOrderDirection={setOrderDirection}
@@ -186,7 +178,6 @@ const ReportsMFD: NextPageWithLayout = () => {
               }
               description={'Try restarting the task with different parameters'}
               icon={<Icon name="lineArrowRight" />}
-              icon={<Icon name="lineArrowRight" />}
             />
           )}
           {!data.clustersTotalCount && !data.result && (
@@ -196,7 +187,6 @@ const ReportsMFD: NextPageWithLayout = () => {
               }
               description={'Try restarting the task with different parameters'}
               icon={<Icon name="lineArrowRightCrossed" />}
-              icon={<Icon name="lineArrowRightCrossed" />}
             />
           )}
           {data.clustersTotalCount !== 0 && !data.result && (
@@ -209,7 +199,6 @@ const ReportsMFD: NextPageWithLayout = () => {
                     variant="secondary"
                     size="md"
                     icon={<Icon name="ordering" />}
-                    icon={<Icon name="ordering" />}
                     onClick={() => setIsOrderingShown(true)}
                   >
                     Ordering
@@ -218,7 +207,6 @@ const ReportsMFD: NextPageWithLayout = () => {
                     variant="secondary"
                     size="md"
                     icon={<Icon name="eye" />}
-                    icon={<Icon name="eye" />}
                     onClick={() => setShowFullValue((e) => !e)}
                   >
                     {showFullValue ? 'Hide' : 'Show'} full value
@@ -282,7 +270,8 @@ const ReportFiller: FC<ReportFillerProps> = ({ title, description, icon }) => {
 };
 
 type OrderingProps = {
-  setIsOrderingShown: (arg: boolean) => void;
+  isOrderingShown: boolean;
+  setIsOrderingShown: Dispatch<SetStateAction<boolean>>;
   setOrderingParameter: (arg: MFDOrderingParameter) => void;
   setOrderDirection: (arg: OrderDirection) => void;
 };
@@ -293,6 +282,7 @@ type SortingProps = {
 };
 
 const OrderingWindow: FC<OrderingProps> = ({
+  isOrderingShown,
   setIsOrderingShown,
   setOrderingParameter,
   setOrderDirection,
@@ -323,6 +313,8 @@ const OrderingWindow: FC<OrderingProps> = ({
   // TODO: Fix "value.match..." error when changing form parameter (this error is present on deployed version, btw)
   return (
     <ListPropertiesModal
+      isOpen={isOrderingShown}
+      setIsOpen={setIsOrderingShown}
       name="Ordering"
       onClose={() => {
         reset();