From c2479dffbfbb282ed0fd185493bfab95f5185a4e Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Wed, 9 Dec 2020 14:43:42 +0300
Subject: [PATCH] Fixed styles&& user selector

---
 .../review/submit-review-modal.tsx            |  4 +-
 cvat-ui/src/components/task-page/styles.scss  |  4 +-
 .../src/components/task-page/task-page.tsx    |  8 ++-
 .../components/task-page/user-selector.tsx    | 54 +++++++++++--------
 4 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx b/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
index b8238145..7bbfeecf 100644
--- a/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
+++ b/cvat-ui/src/components/annotation-page/review/submit-review-modal.tsx
@@ -120,10 +120,10 @@ export default function SubmitReviewModal(): JSX.Element | null {
                             </Radio.Group>
                             {reviewStatus === ReviewStatus.REVIEW_FURTHER && (
                                 <Row align='middle' justify='start'>
-                                    <Col>
+                                    <Col span={7}>
                                         <Text type='secondary'>Reviewer: </Text>
                                     </Col>
-                                    <Col offset={1}>
+                                    <Col span={16} offset={1}>
                                         <UserSelector value={reviewer} onSelect={setReviewer} />
                                     </Col>
                                 </Row>
diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss
index e39461cb..6288ca77 100644
--- a/cvat-ui/src/components/task-page/styles.scss
+++ b/cvat-ui/src/components/task-page/styles.scss
@@ -117,7 +117,9 @@
 }
 
 .cvat-job-item-status {
-    .cvat-job-annotation-color {
+    .cvat-job-annotation-color,
+    .cvat-job-validation-color,
+    .cvat-job-completed-color {
         span {
             margin-left: $grid-unit-size;
         }
diff --git a/cvat-ui/src/components/task-page/task-page.tsx b/cvat-ui/src/components/task-page/task-page.tsx
index e4811a23..d516abcd 100644
--- a/cvat-ui/src/components/task-page/task-page.tsx
+++ b/cvat-ui/src/components/task-page/task-page.tsx
@@ -37,7 +37,13 @@ class TaskPageComponent extends React.PureComponent<Props> {
     }
 
     public componentDidUpdate(): void {
-        const { deleteActivity, history } = this.props;
+        const {
+            deleteActivity, history, task, fetching, getTask,
+        } = this.props;
+
+        if (task === null && !fetching) {
+            getTask();
+        }
 
         if (deleteActivity) {
             history.replace('/tasks');
diff --git a/cvat-ui/src/components/task-page/user-selector.tsx b/cvat-ui/src/components/task-page/user-selector.tsx
index f5c223a7..4f54e023 100644
--- a/cvat-ui/src/components/task-page/user-selector.tsx
+++ b/cvat-ui/src/components/task-page/user-selector.tsx
@@ -45,47 +45,55 @@ const searchUsers = debounce(
 export default function UserSelector(props: Props): JSX.Element {
     const { value, className, onSelect } = props;
     const [searchPhrase, setSearchPhrase] = useState('');
-
+    const [initialUsers, setInitialUsers] = useState<User[]>([]);
     const [users, setUsers] = useState<User[]>([]);
     const autocompleteRef = useRef<RefSelectProps | null>(null);
 
+    useEffect(() => {
+        core.users.get({ limit: 10 }).then((result: User[]) => {
+            if (result) {
+                setInitialUsers(result);
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        setUsers(initialUsers);
+    }, [initialUsers]);
+
     const handleSearch = (searchValue: string): void => {
         if (searchValue) {
             searchUsers(searchValue, setUsers);
         } else {
-            setUsers([]);
+            setUsers(initialUsers);
         }
         setSearchPhrase(searchValue);
     };
 
-    const handleFocus = (open: boolean): void => {
-        if (!users.length && open) {
-            core.users.get({ limit: 10 }).then((result: User[]) => {
-                if (result) {
-                    setUsers(result);
-                }
-            });
-        }
-        if (!open && searchPhrase !== value?.username) {
-            setSearchPhrase('');
-            if (value) {
-                onSelect(null);
-            }
+    const onBlur = (): void => {
+        if (!searchPhrase && value) {
+            onSelect(null);
         }
     };
 
     const handleSelect = (_value: SelectValue): void => {
         setSearchPhrase(users.filter((user) => user.id === +_value)[0].username);
-        onSelect(_value ? users.filter((user) => user.id === +_value)[0] : null);
+        const user = _value ? users.filter((_user) => _user.id === +_value)[0] : null;
+        if ((user?.id || null) !== (value?.id || null)) {
+            onSelect(user);
+        }
     };
 
     useEffect(() => {
-        if (value && !users.filter((user) => user.id === value.id).length) {
-            core.users.get({ id: value.id }).then((result: User[]) => {
-                const [user] = result;
-                setUsers([...users, user]);
-                setSearchPhrase(user.username);
-            });
+        if (value) {
+            if (!users.filter((user) => user.id === value.id).length) {
+                core.users.get({ id: value.id }).then((result: User[]) => {
+                    const [user] = result;
+                    setUsers([...users, user]);
+                });
+            }
+
+            setSearchPhrase(value.username);
         }
     }, [value]);
 
@@ -97,8 +105,8 @@ export default function UserSelector(props: Props): JSX.Element {
             placeholder='Select a user'
             onSearch={handleSearch}
             onSelect={handleSelect}
+            onBlur={onBlur}
             className={combinedClassName}
-            onDropdownVisibleChange={handleFocus}
             options={users.map((user) => ({
                 value: user.id.toString(),
                 label: user.username,