From bb6bc681d488a59593879060ca3c9366337c0088 Mon Sep 17 00:00:00 2001 From: Oleg Vaskevich Date: Mon, 9 Oct 2023 13:53:55 +0300 Subject: [PATCH 1/7] test: mock use-places-autocomplite hook --- .../Cards/PersonalInfo/PersonalInfo.test.tsx | 14 ++++++++++++++ .../GeneralSection/GeneralSection.test.tsx | 14 ++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/client/src/modules/Registry/components/Cards/PersonalInfo/PersonalInfo.test.tsx b/client/src/modules/Registry/components/Cards/PersonalInfo/PersonalInfo.test.tsx index 666c4f5188..270f908a01 100644 --- a/client/src/modules/Registry/components/Cards/PersonalInfo/PersonalInfo.test.tsx +++ b/client/src/modules/Registry/components/Cards/PersonalInfo/PersonalInfo.test.tsx @@ -2,6 +2,20 @@ import { fireEvent, render, screen } from '@testing-library/react'; import { Form } from 'antd'; import { ERROR_MESSAGES, LABELS, PLACEHOLDERS } from 'modules/Registry/constants'; import { PersonalInfo } from './PersonalInfo'; +import usePlacesAutocomplete from 'use-places-autocomplete'; + +jest.mock('use-places-autocomplete'); + +(usePlacesAutocomplete as jest.Mock).mockImplementation(() => ({ + value: null, + suggestions: { + data: { + map: jest.fn(), + }, + loading: false, + }, + setValue: jest.fn(), +})); const mockValues = { firstName: 'John', diff --git a/client/src/modules/Registry/components/FormSections/GeneralSection/GeneralSection.test.tsx b/client/src/modules/Registry/components/FormSections/GeneralSection/GeneralSection.test.tsx index 29f8f452ca..ea6bfe2c90 100644 --- a/client/src/modules/Registry/components/FormSections/GeneralSection/GeneralSection.test.tsx +++ b/client/src/modules/Registry/components/FormSections/GeneralSection/GeneralSection.test.tsx @@ -3,6 +3,20 @@ import { Form } from 'antd'; import { CourseDto } from 'api'; import { CARD_TITLES } from 'modules/Registry/constants'; import { GeneralSection } from './GeneralSection'; +import usePlacesAutocomplete from 'use-places-autocomplete'; + +jest.mock('use-places-autocomplete'); + +(usePlacesAutocomplete as jest.Mock).mockImplementation(() => ({ + value: null, + suggestions: { + data: { + map: jest.fn(), + }, + loading: false, + }, + setValue: jest.fn(), +})); const renderGeneralSection = (courses?: CourseDto[]) => { render( From 2480788be84e47de56169ebac127e22b944cdffb Mon Sep 17 00:00:00 2001 From: Oleg Vaskevich Date: Mon, 9 Oct 2023 17:14:18 +0300 Subject: [PATCH 2/7] refactor: change overlay to menu on Dropdowns --- client/src/components/Header.tsx | 69 +++++++++++-------- .../MentorRegistryTableContainer.tsx | 49 +++++++------ .../AdditionalActions/AdditionalActions.tsx | 8 +-- 3 files changed, 66 insertions(+), 60 deletions(-) diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx index 32cef51f16..7f0b6a8277 100644 --- a/client/src/components/Header.tsx +++ b/client/src/components/Header.tsx @@ -1,7 +1,8 @@ import Link from 'next/link'; import { useRouter } from 'next/router'; -import { Fragment, useContext, useMemo } from 'react'; +import { useContext, useMemo } from 'react'; import { Button, Dropdown, Menu, Space } from 'antd'; +import type { MenuProps } from 'antd'; import { EyeOutlined, LogoutOutlined, @@ -14,17 +15,20 @@ import { SolidarityUkraine } from './SolidarityUkraine'; import { SessionContext } from 'modules/Course/contexts'; import { getNavigationItems } from 'modules/Home/data/links'; import { useActiveCourseContext } from 'modules/Course/contexts/ActiveCourseContext'; +import css from 'styled-jsx/css'; type Props = { showCourseName?: boolean; title?: string; }; +type MenuItem = Required['items'][number]; + const MENU_ITEMS = [ { link: '/profile', icon: , - title: 'View', + title: 'Profile', }, { link: '/profile/notifications', @@ -51,26 +55,29 @@ const MENU_ITEMS = [ export function Header({ title, showCourseName }: Props) { const { asPath: currentRoute } = useRouter(); - const menuActiveItemStyle = { backgroundColor: '#e0f2ff' }; const session = useContext(SessionContext); const { course } = useActiveCourseContext(); const courseLinks = useMemo(() => getNavigationItems(session, course ?? null), [course]); - const menu = ( - - {MENU_ITEMS.map(({ link, icon, title, target }, id, arr) => ( - - {id === arr.length - 1 ? : null} - - - - - ))} - - ); + const menuItems = useMemo((): MenuProps['items'] => { + const items = MENU_ITEMS.map(({ title, link, target, icon }) => { + const isActive = currentRoute === link; + + return { + key: title, + label: ( + + ), + }; + }); + + const lastItem = items.pop() as MenuItem; + + return [...items, { type: 'divider' }, lastItem]; + }, [currentRoute]); return (
{session.githubId && ( - + )}
- + ); } + +const styles = css` + :global(li:has(.menu-item-active)) { + background-color: #e0f2ff; + } + + @media all and (max-width: 768px) { + .title { + width: 100%; + order: 3; + text-align: center; + margin-top: 16px; + } + } +`; diff --git a/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx b/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx index f2880f1057..c8735ecccd 100644 --- a/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx +++ b/client/src/modules/MentorRegistry/components/MentorRegistryTableContainer.tsx @@ -7,7 +7,7 @@ import { Course } from 'services/models'; import CopyToClipboardButton from 'components/CopyToClipboardButton'; import { MentorsRegistryColumnKey, MentorsRegistryColumnName, TABS, MentorRegistryTabsMode } from '../constants'; import { FilterValue } from 'antd/lib/table/interface'; -import { Button, Dropdown, Menu, Tooltip, message } from 'antd'; +import { Button, Dropdown, Tooltip, message } from 'antd'; import { MoreOutlined, MessageTwoTone } from '@ant-design/icons'; import { ColumnType } from 'antd/lib/table'; import { DisciplineDto, MentorRegistryDto } from 'api'; @@ -140,31 +140,28 @@ export const MentorRegistryTableContainer = ({ const renderRestActions = (record: MentorRegistryDto) => { return ( handleModalDataChange(ModalDataMode.Resend, record), - disabled: !record.preselectedCourses.length, - } - : null, - { - key: 'delete', - label: 'Delete', - onClick: () => handleModalDataChange(ModalDataMode.Delete, record), - }, - { - key: 'comment', - label: record.comment ? 'Edit comment' : 'Add comment', - onClick: () => handleModalDataChange(ModalDataMode.Comment, record), - }, - ]} - > - } + menu={{ + items: [ + activeTab === MentorRegistryTabsMode.New + ? { + key: 'resend', + label: 'Re-send', + onClick: () => handleModalDataChange(ModalDataMode.Resend, record), + disabled: !record.preselectedCourses.length, + } + : null, + { + key: 'delete', + label: 'Delete', + onClick: () => handleModalDataChange(ModalDataMode.Delete, record), + }, + { + key: 'comment', + label: record.comment ? 'Edit comment' : 'Add comment', + onClick: () => handleModalDataChange(ModalDataMode.Comment, record), + }, + ], + }} >