🛠 Before go to production 21/04 fixes (#2105)

* Fix securirty issue

* Fix ensure badge is reachable

* Fix missing user name in mentions

* Fix channels bar load time and bold channels

* Fix search for start direct chat with user

* Fix #2083

Author: Romaric Mourgues

twake/backend/core/src/Twake/Drive/Services/DrivePreview.php

@@ -45,7 +45,6 @@ public function generatePreview($filename, $file, $path, $ext, $entity = null)
                 $filetype === 'image/gif' ||
                 $filetype === 'image/x-icon' ||
                 $filetype === 'image/jpeg' ||
-                $filetype === 'image/svg+xml' ||
                 $filetype === 'image/tiff' ||
                 $filetype === 'image/webp' ||
                 $this->isImage($ext)) {

twake/backend/node/src/services/notifications/services/badges/service.ts

@@ -162,7 +162,11 @@ export class UserNotificationBadgeService implements UserNotificationBadgeServic
         user: { id: channelMemberPk.user_id, server_request: true },
         channel: { id: channelId, ...channelMemberPk },
       };
-      const exists = await this.channelsService.members.get(channelMemberPk, context);
+      const exists =
+        (await this.channelsService.channels.get({
+          id: channelId,
+          ..._.pick(channelMemberPk, "company_id", "workspace_id"),
+        })) && (await this.channelsService.members.get(channelMemberPk, context));
       if (!exists) {
         for (const badge of badges.getEntities()) {
           if (badge.channel_id === channelId) this.removeUserChannelBadges(badge);
@@ -179,10 +183,15 @@ export class UserNotificationBadgeService implements UserNotificationBadgeServic
         continue;
       }
       try {
-        const exists = await this.userService.workspaces.getUser({
-          workspaceId,
-          userId,
-        });
+        const exists =
+          (await this.userService.workspaces.get({
+            id: workspaceId,
+            company_id: companyId,
+          })) &&
+          (await this.userService.workspaces.getUser({
+            workspaceId,
+            userId,
+          }));
         if (!exists) {
           await this.channelsService.members.ensureUserNotInWorkspaceIsNotInChannel(
             { id: userId },

twake/frontend/src/app/components/twacode/pseudo-markdown-dictionary.tsx

@@ -215,7 +215,7 @@ export const DynamicComponent = ({
           (data.full_width ? 'full_width ' : '')
         }
         defaultValue={data.content || ''}
-        placeholder={data.placeholder}
+        placeholder={data.placeholder || 'Write something...'}
         onChange={(evt: any) => {
           eventContainer.onAction(
             'interactive_change',

twake/frontend/src/app/components/ui/user-or-mail.tsx

@@ -27,12 +27,22 @@ const EmailRow = ({ email }: { email: string }): JSX.Element => {
 const UserRow = ({ id }: { id: string }): JSX.Element => {
   const user = useUser(id);
 
+  if (user) {
+    console.log(UsersService.getFullName(user));
+  } else {
+    console.log('user not found');
+  }
+
   return user ? (
     <>
       <Col className="icon">
         <Avatar size={20} src={UsersService.getThumbnail(user)} />
       </Col>
-      <Col className="text" flex="auto">
+      <Col
+        className="text"
+        flex="auto"
+        style={{ overflow: 'auto', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
+      >
         <Text strong>{UsersService.getFullName(user)}</Text>
         <Text>{user.email ? `, ${user.email}` : ''}</Text>
       </Col>

twake/frontend/src/app/components/user-list-manager/user-list-manager.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Button, Col, Row, Typography } from 'antd';
 import classNames from 'classnames';
 import TrashIcon from '@material-ui/icons/DeleteOutlined';
@@ -30,13 +30,18 @@ const UserListManager = (props: PropsType) => {
   const [input, setInput] = useState<string>('');
   const [editing, setEditing] = useState<boolean>(props.autoFocus ? props.autoFocus : false);
   const [usersIds, setUsersIds] = useState<string[]>([...props.users]);
+  const callback = useRef<Function>(() => {});
   let savedUserProps: string;
 
   useEffect(() => {
     updateStateFromProps(props, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    callback.current(result.map(u => u.id));
+  }, [result]);
+
   const updateStateFromProps = (props: PropsType, force?: boolean) => {
     let anti_duplicates: string[] = [];
 
@@ -54,23 +59,25 @@ const UserListManager = (props: PropsType) => {
     }
   };
 
-  const filter = (text: string, callback: (arr: any[]) => any) => {
+  const filter = (text: string, cb: (arr: any[]) => any) => {
     setInput(text);
     if ((text || '').indexOf('@') > 0) {
       if (
         props.allowMails &&
         Strings.verifyMail(text) &&
         usersIds.indexOf(text.toLocaleLowerCase()) < 0
       ) {
-        callback([{ email: text.toLocaleLowerCase() }]);
+        cb([{ email: text.toLocaleLowerCase() }]);
         return;
       }
-      callback([]);
+      cb([]);
       return;
     }
 
-    search(text);
-    callback([...result.map(u => u.id)]);
+    const tmp = search(text);
+    cb([...tmp.map(u => u.id)]);
+
+    callback.current = cb;
   };
 
   const renderLine = (item: any, added?: boolean): JSX.Element => {
@@ -139,7 +146,7 @@ const UserListManager = (props: PropsType) => {
         <div className={'users-list no-background'}>
           {usersIds.map((item: string, index: number) => (
             <div key={index} style={props.collapsed ? { display: 'inline-block' } : {}}>
-              <Row align="middle" gutter={[8, 8]}>
+              <Row align="middle" gutter={[8, 8]} style={{ flexFlow: 'nowrap' }}>
                 {renderLine(item, true)}
               </Row>
             </div>
@@ -182,7 +189,7 @@ const UserListManager = (props: PropsType) => {
               }
               render={(user: UserType) => (
                 <React.Suspense fallback={<></>}>
-                  <Row align="middle" gutter={[8, 8]}>
+                  <Row align="middle" gutter={[8, 8]} style={{ flexFlow: 'nowrap' }}>
                     <UserOrMail item={user} />
                   </Row>
                 </React.Suspense>

twake/frontend/src/app/deprecated/user/CurrentUser.ts

@@ -13,6 +13,7 @@ import JWTStorage from 'app/features/auth/jwt-storage-service';
 import Globals from 'app/features/global/services/globals-twake-app-service';
 import { useCurrentUser } from 'app/features/users/hooks/use-current-user';
 import UserAPIClient from '../../features/users/api/user-api-client';
+import { getUser } from 'app/features/users/hooks/use-user-list';
 
 class CurrentUser extends Observable {
   loading: boolean;
@@ -48,7 +49,7 @@ class CurrentUser extends Observable {
   start() {}
 
   get() {
-    return Collections.get('users').find(Login.currentUserId);
+    return getUser(Login.currentUserId);
   }
 
   updateUserStatus = (newStatus: string[]) => {

twake/frontend/src/app/features/messages/hooks/use-message.ts

@@ -5,9 +5,7 @@ import { useRecoilCallback, useRecoilState } from 'recoil';
 import { AtomMessageKey, MessageState } from '../state/atoms/messages';
 import { NodeMessage, NodeMessageSubType, ReactionType } from 'app/features/messages/types/message';
 import { messageToMessageWithReplies } from '../utils/message-with-replies';
-import { UserState } from 'app/features/users/state/atoms/user';
-import { setUserList, useSetUserList } from 'app/features/users/hooks/use-user-list';
-import { UserListState } from 'app/features/users/state/atoms/user-list';
+import { useSetUserList } from 'app/features/users/hooks/use-user-list';
 
 export const useMessage = (partialKey: AtomMessageKey) => {
   const key = {

twake/frontend/src/app/features/users/hooks/use-search-user-list.ts

@@ -7,6 +7,7 @@ import UserAPIClient, { SearchContextType } from '../api/user-api-client';
 import { delayRequest } from 'app/features/global/utils/managedSearchRequest';
 import Strings from 'app/features/global/utils/strings';
 import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
+import _ from 'lodash';
 
 export const searchBackend = async (
   query: string | undefined,
@@ -102,16 +103,19 @@ export const useSearchUserList = ({
 }: {
   scope: SearchContextType['scope'];
 }): {
-  search: (str?: string) => void;
+  search: (str?: string) => UserType[];
   result: UserType[];
 } => {
   const { set: setUserList } = useSetUserList('use-search-user-list');
   const [query, setQuery] = useState<string | undefined>();
-  const { userList } = useUserList();
+  let { userList } = useUserList();
+  userList = _.uniqBy(userList, 'id');
+
   const companyId = useRouterCompany();
   const workspaceId = useRouterWorkspace();
-  const search = async (str?: string) => {
+  const search = (str?: string) => {
     setQuery(str);
+    return searchFrontend(str, { workspaceId, scope, companyId, userList: userList || [] });
   };
 
   useEffect(() => {

twake/frontend/src/app/features/users/hooks/use-user-list.ts

@@ -1,13 +1,15 @@
 import { useEffect } from 'react';
 import { cloneDeep, concat, isEqual, uniqBy } from 'lodash';
-import { RecoilState, useRecoilCallback, useRecoilValueLoadable } from 'recoil';
+import { useRecoilCallback, useRecoilValueLoadable } from 'recoil';
 
 import useRouterCompany from 'app/features/router/hooks/use-router-company';
 import useRouterWorkspace from 'app/features/router/hooks/use-router-workspace';
 import { UserCompanyType, UserType, UserWorkspaceType } from 'app/features/users/types/user';
 import WorkspaceUserAPIClient from 'app/features/workspace-members/api/workspace-members-api-client';
 import { UserListState } from '../state/atoms/user-list';
 import Logger from 'app/features/global/framework/logger-service';
+import Collections from 'app/deprecated/CollectionsV1/Collections/Collections';
+import _ from 'lodash';
 
 export const usePreloadSomeUsers = () => {
   const companyId = useRouterCompany();
@@ -84,6 +86,7 @@ export function useSetUserList(key: string) {
 
       if (currentList && newList && !isEqual(currentList, newList)) {
         set(UserListState, newList);
+        newList.forEach(user => Collections.get('users').completeObject(_.cloneDeep(user)));
         currentUserList = newList;
       }
     }

twake/frontend/src/app/features/users/services/current-user-service.ts

@@ -5,6 +5,7 @@ import Languages from 'app/features/global/services/languages-service';
 import { UserType } from 'app/features/users/types/user';
 import { TwakeService } from 'app/features/global/framework/registry-decorator-service';
 import { addApiUrlIfNeeded, getAsFrontUrl } from 'app/features/global/utils/URLUtils';
+import { getUser } from '../hooks/use-user-list';
 
 type SearchQueryType = {
   searching: boolean;
@@ -29,7 +30,7 @@ class User {
   }
 
   getCurrentUser(): UserType & { id: string } {
-    return Collections.get('users').find(Login.currentUserId);
+    return getUser(Login.currentUserId) as UserType & { id: string };
   }
 
   getCurrentUserId(): string {
@@ -45,14 +46,9 @@ class User {
 
     if (user.deleted) {
       name = Languages.t('general.user.deleted');
-    }
-
-    if (user.first_name?.length) {
-      name = user.first_name;
-    }
-
-    if (user.first_name?.length && user.last_name?.length) {
-      name = `${user.first_name} ${user.last_name}`;
+    } else {
+      name = [user.first_name, user.last_name].filter(a => a).join(' ');
+      name = name || user.username;
     }
 
     return name.charAt(0).toUpperCase() + name.slice(1);