From 08031737481ce7ad1ad125d731a86bfb9e5dac13 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Fri, 6 Dec 2024 10:47:37 +0530 Subject: [PATCH 01/10] showing_progress_updater_info --- __mocks__/db/progresses.ts | 109 +++++++++++- .../LatestProgressUpdateCard.test.tsx | 37 ++++ .../ProgressUpdateCard.test.tsx | 101 +++++++++++ .../ProgressUpdateCardPresentation.test.tsx | 159 +++++++++++++++++- .../common/Tooltip/tooltip.module.scss | 2 +- .../LatestProgressUpdateCard.tsx | 6 +- .../LatestProgressUpdateCardPresentation.tsx | 45 ++++- .../ProgressUpdateCard/ProgressUpdateCard.tsx | 6 +- .../ProgressUpdateCardPresentation.tsx | 96 ++++++++--- .../latest-progress-update-card.module.scss | 26 +++ .../progress-update-card.module.scss | 40 +++++ .../progressUpdateCard.types.ts | 4 + src/interfaces/user.type.ts | 2 +- src/types/standup.type.ts | 4 +- 14 files changed, 605 insertions(+), 32 deletions(-) diff --git a/__mocks__/db/progresses.ts b/__mocks__/db/progresses.ts index 121e06554..64f6db891 100644 --- a/__mocks__/db/progresses.ts +++ b/__mocks__/db/progresses.ts @@ -10,7 +10,32 @@ export const mockGetTaskProgress = { completed: '1', planned: '1', type: 'task', - userId: 'K1X2iixQVx1lnE0WYCtH', + userData: { + id: 'xpHuUkihhxPeWYfNe38L', + incompleteUserDetails: false, + roles: { + archived: false, + super_user: false, + admin: false, + member: true, + }, + linkedin_id: 'muralidhar-akkireddy-91b673158', + last_name: 'Akkireddy', + yoe: 1, + github_display_name: 'Muralidhar', + github_id: 'Muralidhar22', + company: 'Tata Consultancy Services', + designation: 'Assistant Systems Engineer', + twitter_id: 'murali_14', + first_name: 'Muralidhar', + username: 'muralidhar', + status: 'idle', + picture: { + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', + publicId: + 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + }, + }, taskId: 'OxYqJgf6Tyl90uci1mzs', }, { @@ -21,7 +46,32 @@ export const mockGetTaskProgress = { completed: 'testig task progress', planned: 'plan to test', type: 'task', - userId: 'K1X2iixQVx1lnE0WYCtH', + userData: { + id: 'xpHuUkihhxPeWYfNe38L', + incompleteUserDetails: false, + roles: { + archived: false, + super_user: false, + admin: false, + member: true, + }, + linkedin_id: 'muralidhar-akkireddy-91b673158', + last_name: 'Akkireddy', + yoe: 1, + github_display_name: 'Muralidhar', + github_id: 'Muralidhar22', + company: 'Tata Consultancy Services', + designation: 'Assistant Systems Engineer', + twitter_id: 'murali_14', + first_name: 'Muralidhar', + username: 'muralidhar', + status: 'idle', + picture: { + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', + publicId: + 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + }, + }, taskId: 'OxYqJgf6Tyl90uci1mzs', }, { @@ -32,10 +82,34 @@ export const mockGetTaskProgress = { completed: 'progress 2', planned: 'something planned', type: 'task', - userId: 'K1X2iixQVx1lnE0WYCtH', + userData: { + id: 'xpHuUkihhxPeWYfNe38L', + incompleteUserDetails: false, + roles: { + archived: false, + super_user: false, + admin: false, + member: true, + }, + linkedin_id: 'muralidhar-akkireddy-91b673158', + last_name: 'Akkireddy', + yoe: 1, + github_display_name: 'Muralidhar', + github_id: 'Muralidhar22', + company: 'Tata Consultancy Services', + designation: 'Assistant Systems Engineer', + twitter_id: 'murali_14', + first_name: 'Muralidhar', + username: 'muralidhar', + status: 'idle', + picture: { + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', + publicId: + 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + }, + }, taskId: 'OxYqJgf6Tyl90uci1mzs', }, - { id: 'zJHdjzAsvH8K6wg7de07', date: 1685491203632, @@ -47,7 +121,32 @@ export const mockGetTaskProgress = { planned: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', type: 'task', - userId: 'demo-user-id-0', + userData: { + id: 'xpHuUkihhxPeWYfNe38L', + incompleteUserDetails: false, + roles: { + archived: false, + super_user: false, + admin: false, + member: true, + }, + linkedin_id: 'muralidhar-akkireddy-91b673158', + last_name: 'Akkireddy', + yoe: 1, + github_display_name: 'Muralidhar', + github_id: 'Muralidhar22', + company: 'Tata Consultancy Services', + designation: 'Assistant Systems Engineer', + twitter_id: 'murali_14', + first_name: 'Muralidhar', + username: 'muralidhar', + status: 'idle', + picture: { + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', + publicId: + 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + }, + }, taskId: 'demo-task-id-0', }, ], diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx index 9763bdaaa..f07437b2d 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx @@ -6,8 +6,45 @@ import { renderWithRouter } from '@/test_utils/createMockRouter'; import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import LatestProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard'; import { readMoreFormatter } from '@/utils/common'; +import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url'; +import { useRouter } from 'next/router'; +jest.mock('next/router', () => ({ + useRouter: jest.fn(), +})); describe('LatestProgressUpdateCard Component', () => { + it('should render the default avatar and username when userData is undefined', () => { + const mockRouter = { + query: { dev: 'true' }, + }; + (useRouter as jest.Mock).mockReturnValue(mockRouter); + + const mockDataWithNoUserData = { + ...mockGetTaskProgress.data[2], + userData: undefined, + }; + + renderWithRouter( + + + + ); + const userInfoContainer = screen.getByTestId( + 'latest-progress-update-card-user-info-container' + ); + expect(userInfoContainer).toBeInTheDocument(); + const usernameLink = screen.getByRole('link', { name: 'Avatar' }); + expect(usernameLink).toHaveAttribute( + 'href', + `${USER_MANAGEMENT_URL}?username=` + ); + + const profilePicture = screen.getByTestId( + 'latest-progress-update-card-profile-picture' + ); + expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR); + }); + it('should render the component with the passed data', () => { renderWithRouter( diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx index d006fc9ea..b74304a2d 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx @@ -5,6 +5,11 @@ import { store } from '@/app/store'; import { renderWithRouter } from '@/test_utils/createMockRouter'; import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import ProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard'; +import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url'; +import { useRouter } from 'next/router'; +jest.mock('next/router', () => ({ + useRouter: jest.fn(), +})); let mockedOpenDetailsFunction: jest.Mock]>; @@ -14,6 +19,102 @@ beforeEach(() => { }); describe('ProgressUpdateCard Component', () => { + it('should render the default avatar and username when userData is undefined', () => { + const mockRouter = { + query: { dev: 'true' }, + }; + (useRouter as jest.Mock).mockReturnValue(mockRouter); + + const mockDataWithNoUserData = { + ...mockGetTaskProgress.data[2], + userData: undefined, + }; + + renderWithRouter( + + + + ); + const userInfoContainer = screen.getByTestId( + 'progress-update-card-user-info-container' + ); + expect(userInfoContainer).toBeInTheDocument(); + const usernameLink = screen.getByRole('link', { name: 'Avatar' }); + expect(usernameLink).toHaveAttribute( + 'href', + `${USER_MANAGEMENT_URL}?username=` + ); + + const profilePicture = screen.getByTestId( + 'progress-update-card-profile-picture' + ); + expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR); + }); + + it('should toggle the expanded state when the card is clicked', () => { + renderWithRouter( + + + + ); + + const progressUpdateCardContainer = screen.getByTestId( + 'progress-update-card-container' + ); + + // Initial state + expect(progressUpdateCardContainer).not.toHaveClass('expand'); + + // Click to expand + fireEvent.click(progressUpdateCardContainer); + expect(progressUpdateCardContainer).toHaveClass('expand'); + + // Click to collapse + fireEvent.click(progressUpdateCardContainer); + expect(progressUpdateCardContainer).not.toHaveClass('expand'); + }); + + it('should check if the onCardClick function is called when user click on card', () => { + renderWithRouter( + + + + ); + const progressUpdateCardContainer = screen.getByTestId( + 'progress-update-card-container' + ); + fireEvent.click(progressUpdateCardContainer); + expect(progressUpdateCardContainer).toHaveClass( + 'progress-update-card__container expand' + ); + }); + + it('should toggle "Read More" state when the button is clicked', () => { + const mockLongCompletedData = { + ...mockGetTaskProgress.data[2], + completed: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia bibendum nisi at feugiat.', + }; + + renderWithRouter( + + + + ); + + const readMoreButton = screen.getByTestId( + 'progress-update-card-read-more-completed' + ); + expect(readMoreButton).toBeInTheDocument(); + expect(readMoreButton).toHaveTextContent('More'); + fireEvent.click(readMoreButton); + expect(readMoreButton).toHaveTextContent('Less'); + + fireEvent.click(readMoreButton); + + expect(readMoreButton).toHaveTextContent('More'); + }); + it('should render completed section string as title in card', () => { renderWithRouter( diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx index 3660fc1ae..2669b1625 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx @@ -2,11 +2,12 @@ import moment from 'moment'; import { MouseEvent } from 'react'; import { Provider } from 'react-redux'; import { fireEvent, screen } from '@testing-library/react'; - +import { useRouter } from 'next/router'; import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import { renderWithRouter } from '@/test_utils/createMockRouter'; import { readMoreFormatter } from '@/utils/common'; import { store } from '@/app/store'; +import { USER_MANAGEMENT_URL } from '@/constants/url'; import { ProgressUpdateCardPresentationProps, @@ -18,6 +19,9 @@ import ProgressUpdateCardPresentation from '@/components/taskDetails/ProgressUpd let initialProps: ProgressUpdateCardPresentationProps; const titleToShow = mockGetTaskProgress.data[1].completed; const momentDate = moment(mockGetTaskProgress.data[2].createdAt); +const username = 'mock-user-name'; +const userProfileImageUrl = + 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHe38L/ogirm51v.jpg'; const fullDate = momentDate.format('DD-MM-YY'); const time = momentDate.format('hh:mmA'); const tooltipString = `Updated at ${fullDate}, ${time}`; @@ -29,6 +33,9 @@ let mockedOnMoreOrLessButtonClick: jest.Mock< [React.MouseEvent] >; let mockedOnCardClick: jest.Mock]>; +jest.mock('next/router', () => ({ + useRouter: jest.fn(), +})); const charactersToShow = 70; const dataToShowState = [ { @@ -114,6 +121,8 @@ describe('ProgressUpdateCardPresentation Component', () => { jest.fn]>(); mockedOnCardClick = jest.fn]>(); initialProps = { + username: username, + userProfileImageUrl: userProfileImageUrl, titleToShow: titleToShow, isExpanded: false, dateInAgoFormat: dateInAgoFormat, @@ -123,7 +132,76 @@ describe('ProgressUpdateCardPresentation Component', () => { onCardClick: mockedOnCardClick, }; }); + + it('should rotate the angle icon when expanded', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + const props = { ...initialProps, isExpanded: true }; + renderWithRouter( + + + + ); + const angleIcon = screen.getByTestId('progress-update-card-angle-icon'); + expect(angleIcon).toHaveStyle('transform: rotate(90deg)'); + }); + it('should have respective classes on date container and date text', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + renderWithRouter( + + + + ); + const dateContainer = screen.getByTestId('progress-update-card-date'); + const dateText = screen.getByText(dateInAgoFormat); + + expect(dateContainer).toHaveClass( + 'progress-update-card__date-container' + ); + expect(dateText).toHaveClass('progress-update-card__date-text'); + }); + + it('should not rotate the angle icon when not expanded', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + const props = { ...initialProps, isExpanded: false }; + renderWithRouter( + + + + ); + const angleIcon = screen.getByTestId('progress-update-card-angle-icon'); + expect(angleIcon).toHaveStyle('transform: none'); + }); + + it('should prevent event propagation when clicking on the date container', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + renderWithRouter( + + + + ); + + const dateContainer = screen.getByTestId('progress-update-card-date'); + const stopPropagationMock = jest.fn(); + dateContainer.addEventListener( + 'click', + (event) => (event.stopPropagation = stopPropagationMock) + ); + fireEvent.click(dateContainer); + expect(stopPropagationMock).toHaveBeenCalled(); + }); + it('should render completed section string as title in card', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); renderWithRouter( @@ -135,6 +213,9 @@ describe('ProgressUpdateCardPresentation Component', () => { ); }); it('should render date with ago format', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); renderWithRouter( @@ -143,6 +224,82 @@ describe('ProgressUpdateCardPresentation Component', () => { const date = screen.getByTestId('progress-update-card-date'); expect(date).toHaveTextContent(dateInAgoFormat); }); + it('should render the name and profile picture of the updater', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + const props: ProgressUpdateCardPresentationProps = { + ...initialProps, + }; + renderWithRouter( + + + + ); + const usernameElement = screen.getByTestId( + 'progress-update-card-user-info-container' + ); + expect(usernameElement).toBeInTheDocument(); + expect(usernameElement.textContent).toContain('mock-user-name'); + const userProfileImageUrlElement = screen.getByTestId( + 'progress-update-card-profile-picture' + ); + + expect(userProfileImageUrlElement).toBeInTheDocument(); + expect(userProfileImageUrlElement).toHaveAttribute( + 'src', + userProfileImageUrl + ); + expect(userProfileImageUrlElement).toHaveAttribute('alt', 'Avatar'); + }); + it('should render the updater name as a link with the correct href', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + const props: ProgressUpdateCardPresentationProps = { + ...initialProps, + }; + renderWithRouter( + + + + ); + + const linkElement = screen + .getByTestId('progress-update-card-user-info-container') + .querySelector('a'); + expect(linkElement).toBeInTheDocument(); + expect(linkElement).toHaveAttribute( + 'href', + `${USER_MANAGEMENT_URL}?username=${username}` + ); + expect(linkElement?.textContent).toContain(username); + }); + it('should prevent event propagation when clicking on the user info container', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + + renderWithRouter( + + + + ); + + const userInfoContainer = screen.getByTestId( + 'progress-update-card-user-info-container' + ); + + const stopPropagationMock = jest.fn(); + + userInfoContainer.addEventListener( + 'click', + (event) => (event.stopPropagation = stopPropagationMock) + ); + + fireEvent.click(userInfoContainer); + expect(stopPropagationMock).toHaveBeenCalled(); + }); it('should not render the tooltip when isToolisTooltipVisible is false', () => { const props: ProgressUpdateCardPresentationProps = { diff --git a/src/components/common/Tooltip/tooltip.module.scss b/src/components/common/Tooltip/tooltip.module.scss index ec48ad4ef..21906382c 100644 --- a/src/components/common/Tooltip/tooltip.module.scss +++ b/src/components/common/Tooltip/tooltip.module.scss @@ -2,7 +2,7 @@ .tooltip { position: absolute; - width: 17rem; + width: 18rem; // position - top, bottom, right, left will come from props for reusability background-color: $theme-primary; border: 1px solid $theme-primary; diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index 564b5bd61..3385a702b 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -3,7 +3,7 @@ import React, { MouseEvent, useState } from 'react'; import { readMoreFormatter } from '@/utils/common'; import { ProgressDetailsData } from '@/types/standup.type'; import LatestProgressUpdateCardPresentation from './LatestProgressUpdateCardPresentation'; - +import { DEFAULT_AVATAR } from '@/constants/url'; type LatestProgressUpdateCardProps = { data: ProgressDetailsData; }; @@ -25,6 +25,8 @@ export default function LatestProgressUpdateCard({ const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); const tooltipText = `Updated at ${fullDate}`; const charactersToShow = 70; + const username = data.userData?.username ?? ''; + const userProfileImageUrl = data.userData?.picture?.url ?? DEFAULT_AVATAR; const dataToShow = [ { @@ -75,6 +77,8 @@ export default function LatestProgressUpdateCard({ return ( (
@@ -79,6 +88,38 @@ export default function LatestProgressUpdateCardPresentation({ + {isDevMode && ( + + by + + {'Avatar'} + {username} + + + )}
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx index 707938bb7..ad09a78dc 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx @@ -6,12 +6,14 @@ import { ProgressUpdateCardProps, ProgressUpdateDataToShow, } from './progressUpdateCard.types'; - +import { DEFAULT_AVATAR } from '@/constants/url'; export default memo(function ProgressUpdateCard({ data, }: ProgressUpdateCardProps) { const momentDate = moment(data?.createdAt); const dateInAgoFormat = momentDate.fromNow(); + const username = data.userData?.username ?? ''; + const userProfileImageUrl = data.userData?.picture?.url ?? DEFAULT_AVATAR; const charactersToShow = 70; const readMoreTitle = readMoreFormatter(data?.completed, charactersToShow); const titleToShow = readMoreTitle; @@ -74,6 +76,8 @@ export default memo(function ProgressUpdateCard({ (
{datum.isReadMoreEnabled ? 'Less' : 'More'} @@ -59,33 +66,84 @@ export default function ProgressUpdateCardPresentation({

{titleToShow}

- - event.stopPropagation()} - data-testid="progress-update-card-date" + content={tooltipString} > - event.stopPropagation()} + data-testid="progress-update-card-date" > - {dateInAgoFormat} + + + {dateInAgoFormat} + - - - + + + {isDevMode && ( + event.stopPropagation()} + > + by + + {'Avatar'}{' '} + {username} + + + )} + +
) => void; export type ProgressUpdateCardPresentationProps = { titleToShow: string; dateInAgoFormat: string; + username: string; + userProfileImageUrl: string; tooltipString: string; dataToShowState: ProgressUpdateDataToShow[]; onMoreOrLessButtonClick: ( @@ -22,6 +24,8 @@ export type ProgressUpdateCardPresentationProps = { export type LatestProgressUpdateCardPresentationProps = { dataToShowState: ProgressUpdateDataToShow[]; + username: string; + userProfileImageUrl: string; tooltipText: string; onMoreOrLessButtonClick: ( e: MouseEvent, diff --git a/src/interfaces/user.type.ts b/src/interfaces/user.type.ts index 3539164b1..c56229fec 100644 --- a/src/interfaces/user.type.ts +++ b/src/interfaces/user.type.ts @@ -16,7 +16,7 @@ export type userDataType = { archived: boolean; admin: boolean; super_user: boolean; - memeber: boolean; + member: boolean; }; designation?: string; profileURL?: string; diff --git a/src/types/standup.type.ts b/src/types/standup.type.ts index 81811bb81..2be6ea425 100644 --- a/src/types/standup.type.ts +++ b/src/types/standup.type.ts @@ -1,3 +1,5 @@ +import { userDataType } from '@/interfaces/user.type'; + export type standupUpdateType = { type: string; completed: string; @@ -23,7 +25,7 @@ export type ProgressDetailsData = { id: string; planned: string; type: string; - userId: string; + userData?: userDataType; taskId?: string; }; From bbb10b6041e2196f0abe6111d8cf326112e488b0 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Sun, 8 Dec 2024 14:57:10 +0530 Subject: [PATCH 02/10] ui updated --- .../LatestProgressUpdateCard.test.tsx | 24 ++--- .../ProgressUpdateCard.test.tsx | 16 +--- .../ProgressUpdateCardPresentation.test.tsx | 92 +++++-------------- .../common/Tooltip/tooltip.module.scss | 11 +-- .../LatestProgressUpdateCardPresentation.tsx | 20 ++-- .../ProgressUpdateCardPresentation.tsx | 25 ++--- .../latest-progress-update-card.module.scss | 11 +-- .../progress-update-card.module.scss | 4 - 8 files changed, 63 insertions(+), 140 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx index f07437b2d..a955391b8 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx @@ -1,5 +1,5 @@ import moment from 'moment'; -import { fireEvent, getAllByTestId, screen } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import { Provider } from 'react-redux'; import { store } from '@/app/store'; import { renderWithRouter } from '@/test_utils/createMockRouter'; @@ -29,10 +29,6 @@ describe('LatestProgressUpdateCard Component', () => { ); - const userInfoContainer = screen.getByTestId( - 'latest-progress-update-card-user-info-container' - ); - expect(userInfoContainer).toBeInTheDocument(); const usernameLink = screen.getByRole('link', { name: 'Avatar' }); expect(usernameLink).toHaveAttribute( 'href', @@ -83,30 +79,28 @@ describe('LatestProgressUpdateCard Component', () => { expect(date).toHaveTextContent(dateInAgoFormat); }); - - it('should render the tooltip on hover on the date and should not render on mouse out off date', () => { + it('should render the tooltip on hover on the date and should not render on mouse out of date', () => { renderWithRouter( ); - const momentDate = moment(mockGetTaskProgress.data[2].createdAt); - const fullDate = momentDate.format( - 'dddd, MMMM DD, YYYY, hh:mm A [GMT] Z' - ); - const tooltipString = `Updated at ${fullDate}`; - const dateElement = screen.getByTestId( 'latest-progress-update-card-date' ); fireEvent.mouseOver(dateElement); - const tooltip = screen.getByTestId('tooltip'); + const momentDate = moment(mockGetTaskProgress.data[2].createdAt); + const fullDate = momentDate.format( + 'dddd, MMMM DD, YYYY, hh:mm A [GMT] Z' + ); + const tooltipString = `Updated at ${fullDate}`; + const tooltip = screen.getByText(tooltipString); + expect(tooltip).toBeInTheDocument(); expect(tooltip).toHaveClass('fade-in'); - expect(tooltip).toHaveTextContent(tooltipString); fireEvent.mouseOut(dateElement); diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx index b74304a2d..300998f88 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx @@ -5,7 +5,7 @@ import { store } from '@/app/store'; import { renderWithRouter } from '@/test_utils/createMockRouter'; import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import ProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard'; -import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url'; +import { DEFAULT_AVATAR } from '@/constants/url'; import { useRouter } from 'next/router'; jest.mock('next/router', () => ({ useRouter: jest.fn(), @@ -19,7 +19,7 @@ beforeEach(() => { }); describe('ProgressUpdateCard Component', () => { - it('should render the default avatar and username when userData is undefined', () => { + it('should render the default avatar when userData is undefined', () => { const mockRouter = { query: { dev: 'true' }, }; @@ -35,16 +35,6 @@ describe('ProgressUpdateCard Component', () => { ); - const userInfoContainer = screen.getByTestId( - 'progress-update-card-user-info-container' - ); - expect(userInfoContainer).toBeInTheDocument(); - const usernameLink = screen.getByRole('link', { name: 'Avatar' }); - expect(usernameLink).toHaveAttribute( - 'href', - `${USER_MANAGEMENT_URL}?username=` - ); - const profilePicture = screen.getByTestId( 'progress-update-card-profile-picture' ); @@ -167,7 +157,7 @@ describe('ProgressUpdateCard Component', () => { fireEvent.mouseOver(dateElement); - const tooltip = screen.getByTestId('tooltip'); + const tooltip = screen.getByText(tooltipString); expect(tooltip).toHaveClass('fade-in'); expect(tooltip).toHaveTextContent(tooltipString); diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx index 2669b1625..3fe3ce342 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx @@ -7,7 +7,6 @@ import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import { renderWithRouter } from '@/test_utils/createMockRouter'; import { readMoreFormatter } from '@/utils/common'; import { store } from '@/app/store'; -import { USER_MANAGEMENT_URL } from '@/constants/url'; import { ProgressUpdateCardPresentationProps, @@ -198,6 +197,28 @@ describe('ProgressUpdateCardPresentation Component', () => { expect(stopPropagationMock).toHaveBeenCalled(); }); + it('should prevent event propagation when clicking on user avatar', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + renderWithRouter( + + + + ); + + const userInfoLink = screen.getByTestId( + 'progress-update-card-user-info-link' + ); + const stopPropagationMock = jest.fn(); + userInfoLink.addEventListener( + 'click', + (event) => (event.stopPropagation = stopPropagationMock) + ); + fireEvent.click(userInfoLink); + expect(stopPropagationMock).toHaveBeenCalled(); + }); + it('should render completed section string as title in card', () => { (useRouter as jest.Mock).mockReturnValue({ query: { dev: 'false' }, @@ -236,11 +257,7 @@ describe('ProgressUpdateCardPresentation Component', () => { ); - const usernameElement = screen.getByTestId( - 'progress-update-card-user-info-container' - ); - expect(usernameElement).toBeInTheDocument(); - expect(usernameElement.textContent).toContain('mock-user-name'); + const userProfileImageUrlElement = screen.getByTestId( 'progress-update-card-profile-picture' ); @@ -252,69 +269,6 @@ describe('ProgressUpdateCardPresentation Component', () => { ); expect(userProfileImageUrlElement).toHaveAttribute('alt', 'Avatar'); }); - it('should render the updater name as a link with the correct href', () => { - (useRouter as jest.Mock).mockReturnValue({ - query: { dev: 'true' }, - }); - const props: ProgressUpdateCardPresentationProps = { - ...initialProps, - }; - renderWithRouter( - - - - ); - - const linkElement = screen - .getByTestId('progress-update-card-user-info-container') - .querySelector('a'); - expect(linkElement).toBeInTheDocument(); - expect(linkElement).toHaveAttribute( - 'href', - `${USER_MANAGEMENT_URL}?username=${username}` - ); - expect(linkElement?.textContent).toContain(username); - }); - it('should prevent event propagation when clicking on the user info container', () => { - (useRouter as jest.Mock).mockReturnValue({ - query: { dev: 'true' }, - }); - - renderWithRouter( - - - - ); - - const userInfoContainer = screen.getByTestId( - 'progress-update-card-user-info-container' - ); - - const stopPropagationMock = jest.fn(); - - userInfoContainer.addEventListener( - 'click', - (event) => (event.stopPropagation = stopPropagationMock) - ); - - fireEvent.click(userInfoContainer); - expect(stopPropagationMock).toHaveBeenCalled(); - }); - - it('should not render the tooltip when isToolisTooltipVisible is false', () => { - const props: ProgressUpdateCardPresentationProps = { - ...initialProps, - }; - renderWithRouter( - - - - ); - - const tooltip = screen.getByTestId('tooltip'); - expect(tooltip).toHaveTextContent(tooltipString); - expect(tooltip).toHaveClass('tooltip fade-out'); - }); it('should have respective classes when element is expanded', () => { const props: ProgressUpdateCardPresentationProps = { diff --git a/src/components/common/Tooltip/tooltip.module.scss b/src/components/common/Tooltip/tooltip.module.scss index 21906382c..67e20ad59 100644 --- a/src/components/common/Tooltip/tooltip.module.scss +++ b/src/components/common/Tooltip/tooltip.module.scss @@ -18,14 +18,13 @@ &::before { content: ''; position: absolute; - transform: rotate(45deg); height: 12px; - bottom: -5px; - z-index: -1; - left: 8rem; - right: 8rem; - width: 13px; + width: 12px; background: $theme-primary; + bottom: -6px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + z-index: -1; } } diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index c9c575a13..8c53c379e 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -72,7 +72,7 @@ export default function LatestProgressUpdateCardPresentation({ content={tooltipText} tooltipPosition={ isDevMode - ? { top: '-3.8rem', right: '3rem' } + ? { top: '-3.2rem', right: '-2rem' } : { top: '-2.6rem', right: '-4rem' } } > @@ -89,15 +89,14 @@ export default function LatestProgressUpdateCardPresentation({ {isDevMode && ( - - by - {username} - + )}
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 49aa06225..83922d8f7 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -74,7 +74,7 @@ export default function ProgressUpdateCardPresentation({ {isDevMode && ( - event.stopPropagation()} > - by event.stopPropagation()} > {' '} - {username} + /> - + )} Date: Tue, 10 Dec 2024 09:44:16 +0530 Subject: [PATCH 03/10] only showing avatar if username not available --- .../LatestProgressUpdateCard.test.tsx | 8 +-- .../LatestProgressUpdateCardPresentation.tsx | 54 +++++++++------- .../ProgressUpdateCardPresentation.tsx | 62 +++++++++++-------- .../latest-progress-update-card.module.scss | 3 - .../progress-update-card.module.scss | 13 +--- 5 files changed, 72 insertions(+), 68 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx index a955391b8..a11065f6e 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx @@ -13,7 +13,7 @@ jest.mock('next/router', () => ({ })); describe('LatestProgressUpdateCard Component', () => { - it('should render the default avatar and username when userData is undefined', () => { + it('should render the default avatar when userProfileImage is undefined', () => { const mockRouter = { query: { dev: 'true' }, }; @@ -29,12 +29,6 @@ describe('LatestProgressUpdateCard Component', () => { ); - const usernameLink = screen.getByRole('link', { name: 'Avatar' }); - expect(usernameLink).toHaveAttribute( - 'href', - `${USER_MANAGEMENT_URL}?username=` - ); - const profilePicture = screen.getByTestId( 'latest-progress-update-card-profile-picture' ); diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index 8c53c379e..5fb298e56 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -88,36 +88,48 @@ export default function LatestProgressUpdateCardPresentation({ - {isDevMode && ( - - + ) : ( + - {'Avatar'} - - - )} + > + {'Avatar'} + + + ))} diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 83922d8f7..9f2163faa 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -101,40 +101,52 @@ export default function ProgressUpdateCardPresentation({ - {isDevMode && ( - - event.stopPropagation()} + /> + ) : ( + - {'Avatar'} - - - )} + data-testid="progress-update-card-user-info-link" + onClick={(event) => + event.stopPropagation() + } + > + {'Avatar'} + + + ))} Date: Thu, 12 Dec 2024 20:58:45 +0530 Subject: [PATCH 04/10] minor fix --- __mocks__/db/progresses.ts | 176 +++++++++++------- .../LatestProgressUpdateCardPresentation.tsx | 7 +- .../ProgressUpdateCardPresentation.tsx | 4 +- 3 files changed, 115 insertions(+), 72 deletions(-) diff --git a/__mocks__/db/progresses.ts b/__mocks__/db/progresses.ts index 64f6db891..a07d330eb 100644 --- a/__mocks__/db/progresses.ts +++ b/__mocks__/db/progresses.ts @@ -11,30 +11,40 @@ export const mockGetTaskProgress = { planned: '1', type: 'task', userData: { - id: 'xpHuUkihhxPeWYfNe38L', - incompleteUserDetails: false, + id: 'XAF7rSUvk4p0d098qWYS', + profileURL: 'https://my.realdevsquad.com/identity', + discordJoinedAt: '2020-02-01T08:33:38.278000+00:00', roles: { archived: false, - super_user: false, - admin: false, + in_discord: true, member: true, + super_user: true, + admin: true, }, - linkedin_id: 'muralidhar-akkireddy-91b673158', - last_name: 'Akkireddy', - yoe: 1, - github_display_name: 'Muralidhar', - github_id: 'Muralidhar22', - company: 'Tata Consultancy Services', - designation: 'Assistant Systems Engineer', - twitter_id: 'murali_14', - first_name: 'Muralidhar', - username: 'muralidhar', - status: 'idle', + created_at: 1693166951852, + yoe: '8', + github_created_at: 1341655281000, + updated_at: 1693224375990, + company: 'Amazon', + twitter_id: 'ankushdharkar', + first_name: 'Ankush', + ' instagram_id': 'ankushdharkar', + website: 'NA', + incompleteUserDetails: false, + discordId: '154585730465660929', + linkedin_id: 'ankushdharkar', + last_name: 'Dharkar', picture: { - url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', publicId: - 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + 'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe', + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg', }, + github_display_name: 'Ankush Dharkar', + company_name: 'Amazon', + github_id: 'ankushdharkar', + designation: 'SDE', + status: 'idle', + username: 'ankush', }, taskId: 'OxYqJgf6Tyl90uci1mzs', }, @@ -47,30 +57,40 @@ export const mockGetTaskProgress = { planned: 'plan to test', type: 'task', userData: { - id: 'xpHuUkihhxPeWYfNe38L', - incompleteUserDetails: false, + id: 'XAF7rSUvk4p0d098qWYS', + profileURL: 'https://my.realdevsquad.com/identity', + discordJoinedAt: '2020-02-01T08:33:38.278000+00:00', roles: { archived: false, - super_user: false, - admin: false, + in_discord: true, member: true, + super_user: true, + admin: true, }, - linkedin_id: 'muralidhar-akkireddy-91b673158', - last_name: 'Akkireddy', - yoe: 1, - github_display_name: 'Muralidhar', - github_id: 'Muralidhar22', - company: 'Tata Consultancy Services', - designation: 'Assistant Systems Engineer', - twitter_id: 'murali_14', - first_name: 'Muralidhar', - username: 'muralidhar', - status: 'idle', + created_at: 1693166951852, + yoe: '8', + github_created_at: 1341655281000, + updated_at: 1693224375990, + company: 'Amazon', + twitter_id: 'ankushdharkar', + first_name: 'Ankush', + ' instagram_id': 'ankushdharkar', + website: 'NA', + incompleteUserDetails: false, + discordId: '154585730465660929', + linkedin_id: 'ankushdharkar', + last_name: 'Dharkar', picture: { - url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', publicId: - 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + 'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe', + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg', }, + github_display_name: 'Ankush Dharkar', + company_name: 'Amazon', + github_id: 'ankushdharkar', + designation: 'SDE', + status: 'idle', + username: 'ankush', }, taskId: 'OxYqJgf6Tyl90uci1mzs', }, @@ -83,30 +103,40 @@ export const mockGetTaskProgress = { planned: 'something planned', type: 'task', userData: { - id: 'xpHuUkihhxPeWYfNe38L', - incompleteUserDetails: false, + id: 'XAF7rSUvk4p0d098qWYS', + profileURL: 'https://my.realdevsquad.com/identity', + discordJoinedAt: '2020-02-01T08:33:38.278000+00:00', roles: { archived: false, - super_user: false, - admin: false, + in_discord: true, member: true, + super_user: true, + admin: true, }, - linkedin_id: 'muralidhar-akkireddy-91b673158', - last_name: 'Akkireddy', - yoe: 1, - github_display_name: 'Muralidhar', - github_id: 'Muralidhar22', - company: 'Tata Consultancy Services', - designation: 'Assistant Systems Engineer', - twitter_id: 'murali_14', - first_name: 'Muralidhar', - username: 'muralidhar', - status: 'idle', + created_at: 1693166951852, + yoe: '8', + github_created_at: 1341655281000, + updated_at: 1693224375990, + company: 'Amazon', + twitter_id: 'ankushdharkar', + first_name: 'Ankush', + ' instagram_id': 'ankushdharkar', + website: 'NA', + incompleteUserDetails: false, + discordId: '154585730465660929', + linkedin_id: 'ankushdharkar', + last_name: 'Dharkar', picture: { - url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', publicId: - 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + 'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe', + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg', }, + github_display_name: 'Ankush Dharkar', + company_name: 'Amazon', + github_id: 'ankushdharkar', + designation: 'SDE', + status: 'idle', + username: 'ankush', }, taskId: 'OxYqJgf6Tyl90uci1mzs', }, @@ -122,30 +152,40 @@ export const mockGetTaskProgress = { 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', type: 'task', userData: { - id: 'xpHuUkihhxPeWYfNe38L', - incompleteUserDetails: false, + id: 'XAF7rSUvk4p0d098qWYS', + profileURL: 'https://my.realdevsquad.com/identity', + discordJoinedAt: '2020-02-01T08:33:38.278000+00:00', roles: { archived: false, - super_user: false, - admin: false, + in_discord: true, member: true, + super_user: true, + admin: true, }, - linkedin_id: 'muralidhar-akkireddy-91b673158', - last_name: 'Akkireddy', - yoe: 1, - github_display_name: 'Muralidhar', - github_id: 'Muralidhar22', - company: 'Tata Consultancy Services', - designation: 'Assistant Systems Engineer', - twitter_id: 'murali_14', - first_name: 'Muralidhar', - username: 'muralidhar', - status: 'idle', + created_at: 1693166951852, + yoe: '8', + github_created_at: 1341655281000, + updated_at: 1693224375990, + company: 'Amazon', + twitter_id: 'ankushdharkar', + first_name: 'Ankush', + ' instagram_id': 'ankushdharkar', + website: 'NA', + incompleteUserDetails: false, + discordId: '154585730465660929', + linkedin_id: 'ankushdharkar', + last_name: 'Dharkar', picture: { - url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg', publicId: - 'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v', + 'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe', + url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg', }, + github_display_name: 'Ankush Dharkar', + company_name: 'Amazon', + github_id: 'ankushdharkar', + designation: 'SDE', + status: 'idle', + username: 'ankush', }, taskId: 'demo-task-id-0', }, diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index 5fb298e56..412025887 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -72,8 +72,11 @@ export default function LatestProgressUpdateCardPresentation({ content={tooltipText} tooltipPosition={ isDevMode - ? { top: '-3.2rem', right: '-2rem' } - : { top: '-2.6rem', right: '-4rem' } + ? { bottom: '2rem', right: '-2rem' } + : { + bottom: '1.4rem', + right: '-5rem', + } } > diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 9f2163faa..0272bebfd 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -74,8 +74,8 @@ export default function ProgressUpdateCardPresentation({ From 2072bd690f973dfd42bb3438e36e125505d02068 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Sat, 14 Dec 2024 15:12:48 +0530 Subject: [PATCH 05/10] tooltip css change --- src/components/common/Tooltip/tooltip.module.scss | 4 ++-- .../LatestProgressUpdateCardPresentation.tsx | 4 ++-- .../ProgressUpdateCard/ProgressUpdateCardPresentation.tsx | 8 ++++---- .../latest-progress-update-card.module.scss | 1 + .../ProgressUpdateCard/progress-update-card.module.scss | 1 + 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/common/Tooltip/tooltip.module.scss b/src/components/common/Tooltip/tooltip.module.scss index 67e20ad59..508ba45ac 100644 --- a/src/components/common/Tooltip/tooltip.module.scss +++ b/src/components/common/Tooltip/tooltip.module.scss @@ -20,10 +20,10 @@ position: absolute; height: 12px; width: 12px; + bottom: 0; background: $theme-primary; - bottom: -6px; left: 50%; - transform: translateX(-50%) rotate(45deg); + transform: translateX(-50%) translateY(6px) rotate(45deg); z-index: -1; } } diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index 412025887..8d5a56a05 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -107,8 +107,8 @@ export default function LatestProgressUpdateCardPresentation({ diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 0272bebfd..1dad51501 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -74,8 +74,8 @@ export default function ProgressUpdateCardPresentation({ @@ -116,8 +116,8 @@ export default function ProgressUpdateCardPresentation({ ) : ( Date: Tue, 17 Dec 2024 17:45:03 +0530 Subject: [PATCH 06/10] fix some issues related to user avatar --- .../LatestProgressUpdateCard.test.tsx | 10 ++--- .../ProgressUpdateCard.test.tsx | 14 +++---- .../ProgressUpdateCardPresentation.test.tsx | 25 +++++------- .../common/UserAvatar/UserAvatar.tsx | 17 ++++++++ .../common/UserAvatar/userAvatar.module.scss | 11 +++++ .../LatestProgressUpdateCard.tsx | 11 ++++- .../LatestProgressUpdateCardPresentation.tsx | 25 ++++-------- .../ProgressUpdateCardPresentation.tsx | 40 ++++++++----------- .../latest-progress-update-card.module.scss | 16 +------- .../progress-update-card.module.scss | 20 ++++------ 10 files changed, 92 insertions(+), 97 deletions(-) create mode 100644 src/components/common/UserAvatar/UserAvatar.tsx create mode 100644 src/components/common/UserAvatar/userAvatar.module.scss diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx index a11065f6e..e3fc0cc8c 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx @@ -6,7 +6,7 @@ import { renderWithRouter } from '@/test_utils/createMockRouter'; import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import LatestProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard'; import { readMoreFormatter } from '@/utils/common'; -import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url'; +import { DEFAULT_AVATAR } from '@/constants/url'; import { useRouter } from 'next/router'; jest.mock('next/router', () => ({ useRouter: jest.fn(), @@ -29,10 +29,10 @@ describe('LatestProgressUpdateCard Component', () => { ); - const profilePicture = screen.getByTestId( - 'latest-progress-update-card-profile-picture' - ); - expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR); + const userAvatarImage = screen.getByAltText('Avatar'); + expect(userAvatarImage).toBeInTheDocument(); + const imageSrc = userAvatarImage.getAttribute('src'); + expect(imageSrc).toContain(DEFAULT_AVATAR); }); it('should render the component with the passed data', () => { diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx index 300998f88..2ec000fcd 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx @@ -7,6 +7,7 @@ import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import ProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard'; import { DEFAULT_AVATAR } from '@/constants/url'; import { useRouter } from 'next/router'; + jest.mock('next/router', () => ({ useRouter: jest.fn(), })); @@ -35,10 +36,10 @@ describe('ProgressUpdateCard Component', () => { ); - const profilePicture = screen.getByTestId( - 'progress-update-card-profile-picture' - ); - expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR); + const userAvatarImage = screen.getByAltText('Avatar'); + expect(userAvatarImage).toBeInTheDocument(); + const imageSrc = userAvatarImage.getAttribute('src'); + expect(imageSrc).toContain(DEFAULT_AVATAR); }); it('should toggle the expanded state when the card is clicked', () => { @@ -52,14 +53,9 @@ describe('ProgressUpdateCard Component', () => { 'progress-update-card-container' ); - // Initial state expect(progressUpdateCardContainer).not.toHaveClass('expand'); - - // Click to expand fireEvent.click(progressUpdateCardContainer); expect(progressUpdateCardContainer).toHaveClass('expand'); - - // Click to collapse fireEvent.click(progressUpdateCardContainer); expect(progressUpdateCardContainer).not.toHaveClass('expand'); }); diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx index 3fe3ce342..5d3ac6dbf 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx @@ -143,7 +143,9 @@ describe('ProgressUpdateCardPresentation Component', () => { ); const angleIcon = screen.getByTestId('progress-update-card-angle-icon'); - expect(angleIcon).toHaveStyle('transform: rotate(90deg)'); + expect(angleIcon).toHaveClass( + 'progress-update-card__angle-icon--expanded' + ); }); it('should have respective classes on date container and date text', () => { (useRouter as jest.Mock).mockReturnValue({ @@ -174,7 +176,9 @@ describe('ProgressUpdateCardPresentation Component', () => { ); const angleIcon = screen.getByTestId('progress-update-card-angle-icon'); - expect(angleIcon).toHaveStyle('transform: none'); + expect(angleIcon).not.toHaveClass( + 'progress-update-card__angle-icon--expanded' + ); }); it('should prevent event propagation when clicking on the date container', () => { @@ -245,7 +249,7 @@ describe('ProgressUpdateCardPresentation Component', () => { const date = screen.getByTestId('progress-update-card-date'); expect(date).toHaveTextContent(dateInAgoFormat); }); - it('should render the name and profile picture of the updater', () => { + it('should render user Image', () => { (useRouter as jest.Mock).mockReturnValue({ query: { dev: 'true' }, }); @@ -257,17 +261,10 @@ describe('ProgressUpdateCardPresentation Component', () => { ); - - const userProfileImageUrlElement = screen.getByTestId( - 'progress-update-card-profile-picture' - ); - - expect(userProfileImageUrlElement).toBeInTheDocument(); - expect(userProfileImageUrlElement).toHaveAttribute( - 'src', - userProfileImageUrl - ); - expect(userProfileImageUrlElement).toHaveAttribute('alt', 'Avatar'); + const userAvatarImage = screen.getByAltText('Avatar'); + expect(userAvatarImage).toBeInTheDocument(); + const imageSrc = userAvatarImage.getAttribute('src'); + expect(imageSrc).toContain(userProfileImageUrl); }); it('should have respective classes when element is expanded', () => { diff --git a/src/components/common/UserAvatar/UserAvatar.tsx b/src/components/common/UserAvatar/UserAvatar.tsx new file mode 100644 index 000000000..18e1ec8d4 --- /dev/null +++ b/src/components/common/UserAvatar/UserAvatar.tsx @@ -0,0 +1,17 @@ +import styles from './userAvatar.module.scss'; + +type UserAvatarProps = { + userProfileImageUrl: string; +}; + +const UserAvatar = ({ userProfileImageUrl }: UserAvatarProps) => { + return ( + Avatar + ); +}; + +export default UserAvatar; diff --git a/src/components/common/UserAvatar/userAvatar.module.scss b/src/components/common/UserAvatar/userAvatar.module.scss new file mode 100644 index 000000000..6a139edde --- /dev/null +++ b/src/components/common/UserAvatar/userAvatar.module.scss @@ -0,0 +1,11 @@ +@import '../../../styles/variables'; +.user-avatar { + width: 2rem; + height: 2rem; + border-radius: 50%; + object-fit: cover; + @media (width<=425px) { + width: 1.8rem; + height: 1.8rem; + } +} diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index 3385a702b..44d3471e8 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -25,8 +25,15 @@ export default function LatestProgressUpdateCard({ const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); const tooltipText = `Updated at ${fullDate}`; const charactersToShow = 70; - const username = data.userData?.username ?? ''; - const userProfileImageUrl = data.userData?.picture?.url ?? DEFAULT_AVATAR; + let username = ''; + let userProfileImageUrl = DEFAULT_AVATAR; + + if (data.userData) { + username = data.userData.username ?? ''; + if (data.userData.picture) { + userProfileImageUrl = data.userData.picture.url ?? DEFAULT_AVATAR; + } + } const dataToShow = [ { diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index 8d5a56a05..6c631dd4d 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -8,6 +8,7 @@ import { import Tooltip from '@/components/common/Tooltip/Tooltip'; import styles from './latest-progress-update-card.module.scss'; import { USER_MANAGEMENT_URL } from '@/constants/url'; +import UserAvatar from '@/components/common/UserAvatar/UserAvatar'; export default function LatestProgressUpdateCardPresentation({ dataToShowState, username, @@ -93,22 +94,15 @@ export default function LatestProgressUpdateCardPresentation({ {isDevMode && (username === '' ? ( - {'Avatar'} ) : ( @@ -120,14 +114,9 @@ export default function LatestProgressUpdateCardPresentation({ ] } > - {'Avatar'} diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 1dad51501..96c9df538 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -8,6 +8,7 @@ import { ProgressUpdateCardPresentationProps, ProgressUpdateDataToShow, } from './progressUpdateCard.types'; +import UserAvatar from '@/components/common/UserAvatar/UserAvatar'; export default function ProgressUpdateCardPresentation({ titleToShow, @@ -21,6 +22,7 @@ export default function ProgressUpdateCardPresentation({ isExpanded, }: ProgressUpdateCardPresentationProps) { const router = useRouter(); + console.log(isExpanded); const isDevMode = router.query.dev === 'true'; const progressInfoMapping = dataToShowState.map( (datum: ProgressUpdateDataToShow) => ( @@ -103,15 +105,8 @@ export default function ProgressUpdateCardPresentation({ {isDevMode && (username === '' ? ( - {'Avatar'} ) : ( - {'Avatar'} ))} + diff --git a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss index eba6ca1ad..31b323c4c 100644 --- a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss +++ b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss @@ -54,7 +54,7 @@ &:last-of-type { display: flex; justify-content: flex-end; - margin-right: 8px; + margin-right: 12px; } .latest-progress-update-card__more-less-button { @@ -70,22 +70,10 @@ display: flex; align-items: center; justify-content: start; - gap: 5px; + gap: 4px; z-index: 0; cursor: pointer; font-size: 0.934rem; } - - .latest-progress-update-card__profile-picture { - width: 32px; - height: 32px; - border-radius: 50%; - object-fit: cover; - margin-right: 4px; - @media (width<=425px) { - width: 28px; - height: 28px; - } - } } } diff --git a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss index 37b4fe56a..afed110b8 100644 --- a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss +++ b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss @@ -78,20 +78,9 @@ .progress-update-card__details-container { display: flex; direction: row; + gap: 4px; align-items: center; } - - .progress-update-card__profile-picture { - width: 32px; - height: 32px; - margin: 0 4px; - border-radius: 50%; - object-fit: cover; - @media (width<=425px) { - width: 28px; - height: 28px; - } - } } .hidden { @@ -118,6 +107,13 @@ transition: height 1s cubic-bezier(0.78, 0.2, 0.2, 1.1); } +.progress-update-card__angle-icon { + transition: transform 1s; +} +.progress-update-card__angle-icon--expanded { + transform: rotate(90deg); +} + .progress-update-card__info-container { font-size: 1rem; display: flex; From 8c82e762c552622a75626986aa57d5ce11a0d382 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Thu, 19 Dec 2024 09:25:18 +0530 Subject: [PATCH 07/10] fix flaky test --- .../Components/Calendar/UserSearchField.test.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx b/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx index 5fa0067ec..2f90e26f7 100644 --- a/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx +++ b/__tests__/Unit/Components/Calendar/UserSearchField.test.tsx @@ -46,9 +46,10 @@ describe('SearchField component', () => { const input = screen.getByPlaceholderText('Enter username'); userEvent.type(input, 'muhammadmusab'); + await waitFor(() => expect(input).toHaveValue('muhammadmusab')); - const listItems = screen.getAllByRole('listitem'); + const listItems = await screen.findAllByRole('listitem'); expect(listItems[0].innerHTML).toEqual('muhammadmusab'); const button = screen.getByRole('button', { name: 'Submit' }); @@ -177,16 +178,16 @@ describe('SearchField component', () => { userEvent.type(input, 'mu'); await waitFor(() => expect(input).toHaveValue('mu')); - const suggestionsAfterFirstTyping = await waitFor(() => - screen.queryAllByRole('listitem') + const suggestionsAfterFirstTyping = await screen.findAllByRole( + 'listitem' ); expect(suggestionsAfterFirstTyping.length).toBeGreaterThan(0); userEvent.type(input, 'hammad'); await waitFor(() => expect(input).toHaveValue('muhammad')); - const suggestionsAfterSecondTyping = await waitFor(() => - screen.queryAllByRole('listitem') + const suggestionsAfterSecondTyping = await screen.findAllByRole( + 'listitem' ); expect(suggestionsAfterSecondTyping.length).toBeGreaterThan(0); expect(suggestionsAfterSecondTyping.length).toBeLessThan( @@ -197,6 +198,6 @@ describe('SearchField component', () => { await waitFor(() => expect(input).toHaveValue('')); const noSuggestions = screen.queryAllByRole('listitem'); - expect(noSuggestions).toEqual([]); + expect(noSuggestions).toHaveLength(0); }); }); From 87dc5e157d4bc649f91b9d68ddff43588a466156 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Thu, 19 Dec 2024 20:52:59 +0530 Subject: [PATCH 08/10] using name export --- src/components/common/UserAvatar/UserAvatar.tsx | 4 +--- .../LatestProgressUpdateCardPresentation.tsx | 2 +- .../ProgressUpdateCard/ProgressUpdateCardPresentation.tsx | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/common/UserAvatar/UserAvatar.tsx b/src/components/common/UserAvatar/UserAvatar.tsx index 18e1ec8d4..7f67f32e8 100644 --- a/src/components/common/UserAvatar/UserAvatar.tsx +++ b/src/components/common/UserAvatar/UserAvatar.tsx @@ -4,7 +4,7 @@ type UserAvatarProps = { userProfileImageUrl: string; }; -const UserAvatar = ({ userProfileImageUrl }: UserAvatarProps) => { +export const UserAvatar = ({ userProfileImageUrl }: UserAvatarProps) => { return ( { /> ); }; - -export default UserAvatar; diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index 6c631dd4d..9b2284674 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -8,7 +8,7 @@ import { import Tooltip from '@/components/common/Tooltip/Tooltip'; import styles from './latest-progress-update-card.module.scss'; import { USER_MANAGEMENT_URL } from '@/constants/url'; -import UserAvatar from '@/components/common/UserAvatar/UserAvatar'; +import { UserAvatar } from '@/components/common/UserAvatar/UserAvatar'; export default function LatestProgressUpdateCardPresentation({ dataToShowState, username, diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 96c9df538..ed56f7892 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -8,7 +8,7 @@ import { ProgressUpdateCardPresentationProps, ProgressUpdateDataToShow, } from './progressUpdateCard.types'; -import UserAvatar from '@/components/common/UserAvatar/UserAvatar'; +import { UserAvatar } from '@/components/common/UserAvatar/UserAvatar'; export default function ProgressUpdateCardPresentation({ titleToShow, From c1dd839937803f5f887c4e227e92f6c202f1092a Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Fri, 27 Dec 2024 09:48:25 +0530 Subject: [PATCH 09/10] refactor progress update card presentation --- .../ProgressUpdateCard.test.tsx | 2 +- .../ProgressUpdateCardOverview.tsx | 92 +++++++++++++++ .../ProgressUpdateCardPresentation.tsx | 105 ++---------------- .../latest-progress-update-card.module.scss | 4 +- .../progress-update-card.module.scss | 2 +- .../progressUpdateCard.types.ts | 10 ++ 6 files changed, 117 insertions(+), 98 deletions(-) create mode 100644 src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardOverview.tsx diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx index 2ec000fcd..5caad7ad8 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx @@ -89,7 +89,7 @@ describe('ProgressUpdateCard Component', () => { ); const readMoreButton = screen.getByTestId( - 'progress-update-card-read-more-completed' + 'progress-update-read-more-toggle-button' ); expect(readMoreButton).toBeInTheDocument(); expect(readMoreButton).toHaveTextContent('More'); diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardOverview.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardOverview.tsx new file mode 100644 index 000000000..72c252814 --- /dev/null +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardOverview.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import { FaAngleRight, FaRegClock } from 'react-icons/fa6'; +import Tooltip from '@/components/common/Tooltip/Tooltip'; +import styles from './progress-update-card.module.scss'; +import { USER_MANAGEMENT_URL } from '@/constants/url'; +import { ProgressUpdateCardOverviewProps } from './progressUpdateCard.types'; +import { UserAvatar } from '@/components/common/UserAvatar/UserAvatar'; + +export default function ProgressUpdateCardOverview({ + titleToShow, + dateInAgoFormat, + username, + userProfileImageUrl, + tooltipString, + isDevMode, + isExpanded, +}: ProgressUpdateCardOverviewProps) { + return ( +
+

+ {titleToShow} +

+
+ + event.stopPropagation()} + data-testid="progress-update-card-date" + > + + + {dateInAgoFormat} + + + + + {isDevMode && + (username === '' ? ( + + ) : ( + + event.stopPropagation()} + > + + + + ))} + + +
+
+ ); +} diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index ed56f7892..dcc468dfe 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -1,14 +1,11 @@ import React from 'react'; import { useRouter } from 'next/router'; -import { FaAngleRight, FaRegClock } from 'react-icons/fa6'; -import Tooltip from '@/components/common/Tooltip/Tooltip'; import styles from './progress-update-card.module.scss'; -import { USER_MANAGEMENT_URL } from '@/constants/url'; import { ProgressUpdateCardPresentationProps, ProgressUpdateDataToShow, } from './progressUpdateCard.types'; -import { UserAvatar } from '@/components/common/UserAvatar/UserAvatar'; +import ProgressUpdateCardOverview from './ProgressUpdateCardOverview'; export default function ProgressUpdateCardPresentation({ titleToShow, @@ -22,7 +19,6 @@ export default function ProgressUpdateCardPresentation({ isExpanded, }: ProgressUpdateCardPresentationProps) { const router = useRouter(); - console.log(isExpanded); const isDevMode = router.query.dev === 'true'; const progressInfoMapping = dataToShowState.map( (datum: ProgressUpdateDataToShow) => ( @@ -45,7 +41,7 @@ export default function ProgressUpdateCardPresentation({ className={ styles['progress-update-card__more-less-button'] } - data-testid="progress-update-card-read-more-completed" + data-testid="progress-update-read-more-toggle-button" > {datum.isReadMoreEnabled ? 'Less' : 'More'} @@ -64,94 +60,15 @@ export default function ProgressUpdateCardPresentation({ data-testid="progress-update-card-container" onClick={onCardClick} > -
-

- {titleToShow} -

-
- - event.stopPropagation()} - data-testid="progress-update-card-date" - > - - - {dateInAgoFormat} - - - - - {isDevMode && - (username === '' ? ( - - ) : ( - - - event.stopPropagation() - } - > - - - - ))} - - -
-
+
Date: Fri, 27 Dec 2024 20:44:44 +0530 Subject: [PATCH 10/10] using rem --- src/components/common/Tooltip/tooltip.module.scss | 4 ++-- .../latest-progress-update-card.module.scss | 2 +- .../ProgressUpdateCard/progress-update-card.module.scss | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/common/Tooltip/tooltip.module.scss b/src/components/common/Tooltip/tooltip.module.scss index 508ba45ac..df6820fc1 100644 --- a/src/components/common/Tooltip/tooltip.module.scss +++ b/src/components/common/Tooltip/tooltip.module.scss @@ -18,8 +18,8 @@ &::before { content: ''; position: absolute; - height: 12px; - width: 12px; + height: 0.75rem; + width: 0.75rem; bottom: 0; background: $theme-primary; left: 50%; diff --git a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss index 70f50fa6d..2dd19acb7 100644 --- a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss +++ b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss @@ -70,7 +70,7 @@ display: flex; align-items: center; justify-content: flex-start; - gap: 4px; + gap: 0.25rem; z-index: 0; cursor: pointer; font-size: 0.934rem; diff --git a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss index 562445e9b..7301e6e2d 100644 --- a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss +++ b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss @@ -73,12 +73,12 @@ font-size: 1rem; display: flex; align-items: center; - gap: 4px; + gap: 0.25rem; } .progress-update-card__details-container { display: flex; direction: row; - gap: 4px; + gap: 0.25rem; align-items: center; } }