Skip to content

Commit

Permalink
Fix: Assignee text box alignment (#1225)
Browse files Browse the repository at this point in the history 
* fix: assign text box alignment it would be be appearing where the name is

* feat: Update TaskDetails component and fix test for assignee input

- Updated TaskDetails component to include assignee input with a data-testid of 'assignee-input'.
- Modified the test for rendering the assignee dropdown to correctly identify the assignee input field using the updated test ID.
- Ensured the test checks for the presence of the assignee input field in edit mode.

* refactor: make the superuser to false on test files

* refactor: Reintroduce getExtensionRequestLink function to TaskDetails component

- Added back the getExtensionRequestLink function to handle the extension request URL generation.
- Updated the assignee handling in the render method to include suggestions for editing.
- Maintained the isEditing and isUserAuthorized checks for showing the assignee input field.
- Ensured the task extension request link is correctly generated and displayed in the Dates section.

* fix: Resolve duplicate input field and suggestion box issues in TaskDetails

- Fixed issue with duplicate input fields appearing in the Assignee section.
- Ensured the suggestion box appears correctly below the Assignee input field.
- Applied consistent styling to the Assignee input field and suggestion box.
- Linked the label to the input field using the  attribute.
- Refactored the Assignee input and suggestion box to use the Suggestions component properly.

* fix: classname to be more generic

* refactor: test cases to use those old values

* fix: Ensure consistent width for suggestion box and refactor styles

- Updated suggestion box styles to maintain a consistent width relative to the input field
- Ensured suggestion box width is set to 100% of its parent container
- Adjusted styles for better visual consistency
  • Loading branch information
@Achintya-Chatterjee
Achintya-Chatterjee authored Aug 5, 2024
1 parent bc0652c commit 937f872
Show file tree
Hide file tree
Showing 4 changed files with 98 additions and 89 deletions.
18 changes: 6 additions & 12 deletions __tests__/Unit/Components/Tasks/TaskDetails.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import Details from '@/components/taskDetails/Details';
import { taskRequestErrorHandler } from '../../../../__mocks__/handlers/task-request.handler';
import { taskDetailsHandler } from '../../../../__mocks__/handlers/task-details.handler';
import { superUserSelfHandler } from '../../../../__mocks__/handlers/self.handler';
import DevFeature from '@/components/DevFeature';
import convertTimeStamp from '@/helperFunctions/convertTimeStamp';
const details = {
url: 'https://realdevsquad.com/tasks/6KhcLU3yr45dzjQIVm0J/details',
Expand Down Expand Up @@ -471,14 +470,13 @@ describe('Update Progress button', () => {
});

describe('Task details Edit mode ', () => {
test('Should be able to edit stated on ', async () => {
test('Should be able to edit ends on ', async () => {
server.use(superUserSelfHandler);

renderWithRouter(
<Provider store={store()}>
<TaskDetails taskID={details.taskID} />
</Provider>,
{ query: { dev: 'true' } }
</Provider>
);
await waitFor(() => {
const editBtn = screen.getByRole('button', {
Expand All @@ -504,8 +502,7 @@ describe('Task details Edit mode ', () => {
renderWithRouter(
<Provider store={store()}>
<TaskDetails taskID={details.taskID} />
</Provider>,
{ query: { dev: 'true' } }
</Provider>
);
await waitFor(() => {
expect(screen.queryByText('UPDATE')).toBeInTheDocument();
Expand All @@ -517,8 +514,7 @@ describe('Task details Edit mode ', () => {
renderWithRouter(
<Provider store={store()}>
<TaskDetails taskID={details.taskID} />
</Provider>,
{ query: { dev: 'true' } }
</Provider>
);
await waitFor(() => {
const editBtn = screen.getByRole('button', {
Expand All @@ -537,12 +533,10 @@ describe('Task details Edit mode ', () => {
{ query: { dev: 'true' } }
);
await waitFor(() => {
const editBtn = screen.getByRole('button', {
name: /Edit/i,
});
const editBtn = screen.getByRole('button', { name: /Edit/i });
fireEvent.click(editBtn);
expect(screen.getByTestId('assignee-input')).toBeInTheDocument();
});
expect(screen.getByTestId('assignee-input')).toBeInTheDocument();
});
});

Expand Down
145 changes: 68 additions & 77 deletions src/components/taskDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { useGetProgressDetailsQuery } from '@/app/services/progressesApi';
import { ProgressDetailsData } from '@/types/standup.type';
import Progress from '../ProgressCard';
import ProgressContainer from '../tasks/card/progressContainer';
import DevFeature from '../DevFeature';
import Suggestions from '../tasks/SuggestionBox/Suggestions';
import task, { taskStatusUpdateHandleProp } from '@/interfaces/task.type';
import { TASK_EXTENSION_REQUEST_URL } from '@/constants/url';
Expand All @@ -42,6 +41,7 @@ export function Button(props: ButtonProps) {
</button>
);
}

export function Textarea(props: TextAreaProps) {
const { name, value, onChange, testId, placeholder } = props;

Expand All @@ -61,13 +61,10 @@ type Props = {
url?: string;
taskID: string;
};

const TaskDetails: FC<Props> = ({ taskID }) => {
const router = useRouter();
const { dev } = router.query;
const isDevMode = dev === 'true';

const { isUserAuthorized } = useUserData();

const [newEndOnDate, setNewEndOnDate] = useState('');
const [isEditing, setIsEditing] = useState<boolean>(false);
const { data, isError, isLoading, isFetching } =
Expand Down Expand Up @@ -99,6 +96,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
const handleAssignment = (e: React.ChangeEvent<HTMLInputElement>) => {
setAssigneeName(e.target.value);
setShowSuggestion(Boolean(e.target.value));
setEditedTaskDetails((prev) => ({ ...prev, assignee: e.target.value }));
};
const handleAssigneSelect = async (userName: string) => {
inputRef.current?.focus();
Expand Down Expand Up @@ -128,6 +126,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
...data?.taskData,
id: taskID,
} as task);
setAssigneeName(data?.taskData?.assignee || '');
}
}, [data]);

Expand Down Expand Up @@ -308,27 +307,19 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
detailType={'Priority'}
value={taskDetailsData?.priority}
/>
<DevFeature>
{isEditing && (
<TaskDropDown
isDevMode={true}
onChange={
handleTaskStatusUpdate
}
oldStatus={
taskDetailsData?.status
}
oldProgress={
taskDetailsData?.percentCompleted
}
/>
)}
</DevFeature>
{isEditing && (
<TaskDropDown
onChange={handleTaskStatusUpdate}
oldStatus={taskDetailsData?.status}
oldProgress={
taskDetailsData?.percentCompleted
}
/>
)}
<Details
detailType={'Status'}
value={beautifyStatus(
taskDetailsData?.status,
isDevMode
taskDetailsData?.status
)}
/>
<Details
Expand Down Expand Up @@ -367,27 +358,21 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
title="Participants"
hasImg={true}
>
<Details
detailType={'Assignee'}
value={
taskDetailsData?.type === 'feature'
? taskDetailsData?.assignee
: taskDetailsData?.participants?.join(
' , '
)
}
/>
<DevFeature>
{isEditing && isUserAuthorized && (
<div
className={`${styles.assigneeSuggestionInput} ${styles.assignedToSection}`}
>
<div className={styles.inputContainer}>
<label
htmlFor="assigneeInput"
className={styles.detailType}
>
Assignee:
</label>
<div className={styles.inputContainer}>
{isEditing && isUserAuthorized ? (
<Suggestions
assigneeName={assigneeName}
showSuggestion={showSuggestion}
handleClick={
handleAssigneSelect
}
assigneeName={assigneeName}
showSuggestion={showSuggestion}
handleAssignment={
handleAssignment
}
Expand All @@ -396,13 +381,24 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
}
ref={inputRef}
/>
</div>
)}
</DevFeature>
<Details
detailType={'Reporter'}
value={'Ankush'}
/>
) : (
<span
className={styles.detailValue}
>
{assigneeName ||
taskDetailsData?.assignee}
</span>
)}
</div>
</div>
<div className={styles.inputContainer}>
<label className={styles.detailType}>
Reporter:
</label>
<span className={styles.detailValue}>
Ankush
</span>
</div>
</TaskContainer>
<TaskContainer
src="/calendar-icon.png"
Expand All @@ -415,37 +411,32 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
taskDetailsData?.startedOn
)}
/>
<Details
detailType={'Ends On'}
value={getEndsOn(taskDetailsData?.endsOn)}
url={getExtensionRequestLink(
taskDetailsData.id,
isExtensionRequestPending
)}
/>

<DevFeature>
{isEditing && (
<>
<label htmlFor="endsOnTaskDetails">
Ends On:
</label>
<input
id="endsOnTaskDetails"
type="date"
name="endsOn"
onChange={(e) => {
setNewEndOnDate(
e.target.value
);
}}
onBlur={handleBlurOfEndsOn}
value={newEndOnDate}
data-testid="endsOnTaskDetails"
/>
</>
<div className={styles.inputContainer}>
<Details
detailType={'Ends On'}
value={getEndsOn(
taskDetailsData?.endsOn
)}
url={getExtensionRequestLink(
taskDetailsData.id,
isExtensionRequestPending
)}
/>
{isEditing && isUserAuthorized && (
<input
id="endsOnTaskDetails"
type="date"
name="endsOn"
onChange={(e) =>
setNewEndOnDate(e.target.value)
}
onBlur={handleBlurOfEndsOn}
value={newEndOnDate}
data-testid="endsOnTaskDetails"
className={styles.inputField}
/>
)}
</DevFeature>
</div>
</TaskContainer>
<TaskContainer
hasImg={false}
Expand Down
23 changes: 23 additions & 0 deletions src/components/taskDetails/task-details.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,3 +170,26 @@
flex-wrap: wrap;
}
}

.inputContainer {
display: flex;
align-items: center;
gap: 0.5rem;
}

.inputField {
width: auto;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
}

.assigneeSuggestionInput {
position: relative;
}

.extensionLink {
margin-top: 0.5rem;
display: block;
color: $theme-primary;
}
1 change: 1 addition & 0 deletions src/components/tasks/SuggestionBox/suggestion.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
top: 40px;
border-radius: 5px;
z-index: 100;
width: 100%;
li {
padding: 0.5rem;
display: flex;
Expand Down

0 comments on commit 937f872

Please sign in to comment.