Merge branch 'develop' into fix/api-calls-with-empty-data

Real-Dev-Squad · Nov 2, 2023 · 4e8ea6f · 4e8ea6f
2 parents 590e7ce + 83518f8
commit 4e8ea6f
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 14 deletions.
diff --git a/__tests__/Unit/Components/Issues/ActionForm.test.tsx b/__tests__/Unit/Components/Issues/ActionForm.test.tsx
@@ -63,11 +63,13 @@ describe('Issues Action Form Component', () => {
         const submitButton = screen.getByRole('button', {
             name: /Assign Task/i,
         });
-        const assignee = screen.getByPlaceholderText('Assignee');
+        const assigneeLabel = screen.getByTestId('assignee-label');
+        const assignee = screen.getByPlaceholderText('Type to search Assignee');
         const endsOn = screen.getByLabelText(/Ends on:/);
         const status = screen.getByLabelText(/Status:/);
         const options = screen.getAllByRole('option');
         expect(submitButton).toBeInTheDocument();
+        expect(assigneeLabel).toBeInTheDocument();
         expect(assignee).toBeInTheDocument();
         expect(endsOn).toBeInTheDocument();
         expect(status).toBeInTheDocument();
@@ -85,7 +87,7 @@ describe('Issues Action Form Component', () => {
             />
         );
         const assignee = screen.getByPlaceholderText(
-            'Assignee'
+            'Type to search Assignee'
         ) as HTMLInputElement;
         const status = screen.getByLabelText(/Status:/) as HTMLSelectElement;
         const options = screen.getAllByRole(
@@ -117,7 +119,7 @@ describe('Issues Action Form Component', () => {
             />
         );
         const assignee = screen.getByPlaceholderText(
-            'Assignee'
+            'Type to search Assignee'
         ) as HTMLInputElement;
         let notFoundTextNode = null;
         fireEvent.change(assignee, { target: { value: 123 } });

diff --git a/src/components/issues/ActionForm.tsx b/src/components/issues/ActionForm.tsx
@@ -30,9 +30,11 @@ type ActionFormProps = {
 
 const taskStatus = Object.entries(BACKEND_TASK_STATUS);
 const endTimeStamp: number = getDateRelativeToToday(2, 'timestamp') as number;
+const startTimeStamp: number = getDateRelativeToToday(0, 'timestamp') as number;
+
 const initialState = {
     assignee: '',
-    startedOn: undefined,
+    startedOn: startTimeStamp,
     endsOn: endTimeStamp,
     status: 'ASSIGNED',
 };
@@ -138,10 +140,18 @@ const ActionForm: FC<ActionFormProps> = ({
                                 : styles.suggestions_container
                         }
                     >
+                        <label
+                            htmlFor="assignee"
+                            className={styles.assign_label}
+                            data-testid="assignee-label"
+                        >
+                            Assignee:
+                        </label>
                         <Suggestions
                             assigneeName={state.assignee}
                             showSuggestion={showSuggestion}
                             handleClick={handleAssignment}
+                            placeholderText="Type to search Assignee"
                             handleAssignment={(e) => {
                                 setShowSuggestion(true);
                                 dispatch({
@@ -167,6 +177,10 @@ const ActionForm: FC<ActionFormProps> = ({
                                 id="started-on"
                                 className={` ${styles.assign} ${styles.input_date}`}
                                 type="date"
+                                defaultValue={getDateRelativeToToday(
+                                    0,
+                                    'formattedDate'
+                                )}
                                 onChange={(e) => {
                                     dispatch({
                                         type: 'startedOn',

diff --git a/src/components/issues/Card.module.scss b/src/components/issues/Card.module.scss
@@ -51,7 +51,15 @@ $card-text: #78716c;
     min-height: 22rem;
     width: 20rem;
 }
-
+.successContainer {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    min-height: 22rem;
+    width: 20rem;
+    align-items: center;
+    gap: 1rem;
+}
 .form_container {
     display: flex;
     flex-direction: column;
@@ -67,13 +75,15 @@ $card-text: #78716c;
     border-radius: 2px;
     min-height: 5rem;
     height: 6rem;
+    font: inherit;
+    font-size: 0.8rem;
     border: none;
     resize: none;
 }
 
 .assign_label {
     line-height: 1rem;
-    margin-bottom: 0;
+    margin-bottom: 2px;
     font-size: 0.8rem;
     color: #a9a9a9;
     font-weight: 700;
@@ -121,7 +131,9 @@ $card-text: #78716c;
 }
 .suggestions_container {
     position: relative;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 }
 
 .suggestions_container_disabled {

diff --git a/src/components/tasks/SuggestionBox/Suggestions.tsx b/src/components/tasks/SuggestionBox/Suggestions.tsx
@@ -17,6 +17,7 @@ const Suggestions = forwardRef<HTMLInputElement, SuggestionsProps>(
             showSuggestion,
             handleAssignment,
             setShowSuggestion,
+            placeholderText = 'Assignee',
         },
         ref
     ) => {
@@ -87,7 +88,7 @@ const Suggestions = forwardRef<HTMLInputElement, SuggestionsProps>(
                     data-testid="assignee-input"
                     ref={ref}
                     value={assigneeName}
-                    placeholder="Assignee"
+                    placeholder={placeholderText}
                     className={classNames.suggestionsInput}
                     onChange={(e) => handleAssignment(e)}
                     onKeyDown={handelKeyboardInput}

diff --git a/src/components/tasks/SuggestionBox/suggestion.module.scss b/src/components/tasks/SuggestionBox/suggestion.module.scss
@@ -1,3 +1,5 @@
+$black-border-color: #1f1f1f;
+
 .suggestions {
     border: 1px solid #999;
     list-style: none;
@@ -43,14 +45,18 @@
 .suggestionDiv {
     position: relative;
     display: inline-block;
+    width: 100%;
 }
 
 .suggestionsInput {
-    font-size: 1.3rem;
     font-weight: 400;
-    width: 7rem;
-    height: 2.5rem;
+    width: 100%;
     display: inline-block;
+    padding: 0 4px 0 4px;
+    height: 2rem;
+    border: 1px solid $black-border-color;
+    border-radius: 4px;
+    outline: none;
 }
 
 .suggestions-selected {
@@ -60,7 +66,7 @@
 .no-suggestions {
     color: #f84040;
     position: absolute;
-    top: 40px;
     z-index: 100;
     min-width: 5rem;
+    font-size: 0.8rem;
 }
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
@@ -449,3 +449,7 @@ $progressTextAnimation: #9babb8;
 .statusText {
     margin-left: 0.5rem;
 }
+
+.assigneeSuggestionInput {
+    width: 7rem;
+}
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
@@ -603,7 +603,9 @@ const Card: FC<CardProps> = ({
                 </span>
                 {isEditable
                     ? isUserAuthorized && (
-                          <div className={classNames.assignedToSection}>
+                          <div
+                              className={`${classNames.assigneeSuggestionInput} ${classNames.assignedToSection}`}
+                          >
                               <Suggestions
                                   assigneeName={assigneeName}
                                   showSuggestion={showSuggestion}

diff --git a/src/interfaces/suggestionBox.type.ts b/src/interfaces/suggestionBox.type.ts
@@ -22,4 +22,5 @@ export type SuggestionsProps = {
     handleAssignment: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleClick: (userName: string) => void;
     setShowSuggestion: (value: boolean) => void;
+    placeholderText?: string;
 };
diff --git a/src/utils/time.ts b/src/utils/time.ts
@@ -5,7 +5,6 @@ export const getDateRelativeToToday = (
     const today = new Date();
     const calculatedDate = new Date(today);
     calculatedDate.setDate(today.getDate() + daysFromToday);
-    calculatedDate.setHours(5, 30, 0, 0);
     if (format === 'timestamp') {
         return calculatedDate.getTime() / 1000;
     } else if (format === 'formattedDate') {