🛠 More fixes on collection and UX (#875)

* Fix frontend when no channel is selected * Multiple fix * Fix PHP errors * Fix socket unwanted leave issue * Do not leave channels if other tags are listening * Fix ctrl+K for joined workspace channels * Fix #814 (and previous commit was #864) * Snyk update requests #795 #796 #797 #798 #799
linagora · Feb 4, 2021 · 290ced1 · 290ced1
1 parent 4374e71
commit 290ced1
Show file tree

Hide file tree

Showing 15 changed files with 2,966 additions and 3,477 deletions.
diff --git a/twake/backend/core/src/Twake/Discussion/Services/MessageSystem.php b/twake/backend/core/src/Twake/Discussion/Services/MessageSystem.php
@@ -466,15 +466,19 @@ public function save($object, $options, $user = null, $application = null)
         } else {
 
             $channel = $this->em->getRepository("Twake\Core:CachedFromNode")->findOneBy(Array("company_id" => "unused", "type" => "channel", "key"=>$channel_id));
-            $this->sendToNode($channel, $message, $did_create);
+            if($channel){
+
+                $this->sendToNode($channel, $message, $did_create);
 
-            try {
-                $this->indexMessage($message, $channel->getData()["workspace_id"], $channel_id);
-            } catch (\Exception $e) {
-                error_log("ERROR WITH MESSAGE SAVE INSIDE A BLOC");
-            }
+                try {
+                    $this->indexMessage($message, $channel->getData()["workspace_id"], $channel_id);
+                } catch (\Exception $e) {
+                    error_log("ERROR WITH MESSAGE SAVE INSIDE A BLOC");
+                }
 
-            $this->em->flush();
+                $this->em->flush();
+
+            }
 
             if($channel){
                 //Notify connectors

diff --git a/twake/backend/core/src/Twake/Drive/Services/Storage/Adapter_OpenStack.php b/twake/backend/core/src/Twake/Drive/Services/Storage/Adapter_OpenStack.php
@@ -149,7 +149,7 @@ public function genPreview(Drivefile $file, $tmppath)
 
                         } else {
                             $res = false;
-                            error_log("FILE NOT GENERATED !" . $e->getMessage());
+                            error_log("PREVIEW NOT GENERATED !");
                         }
 
                     } catch (\Exception $e) {

diff --git a/twake/backend/node/package-lock.json b/twake/backend/node/package-lock.json
diff --git a/twake/backend/node/package.json b/twake/backend/node/package.json
@@ -84,20 +84,20 @@
     "class-transformer": "^0.3.1",
     "config": "^3.3.2",
     "deep-object-diff": "^1.1.0",
-    "fastify": "3.4.1",
+    "fastify": "3.9.2",
     "fastify-cors": "^4.1.0",
-    "fastify-jwt": "^2.1.3",
+    "fastify-jwt": "^2.2.0",
     "fastify-plugin": "^2.3.4",
     "fastify-sensible": "^3.0.1",
-    "fastify-websocket": "^2.0.7",
+    "fastify-websocket": "^2.0.11",
     "lodash": "^4.17.20",
     "mongodb": "^3.6.2",
-    "pino": "^6.6.1",
+    "pino": "^6.8.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
     "socket.io": "^2.3.0",
     "socket.io-redis": "^5.4.0",
     "socketio-jwt": "^4.6.2",
-    "uuid": "^8.3.1"
+    "uuid": "^8.3.2"
   }
 }
diff --git a/twake/frontend/src/app/scenes/Client/ChannelsBar/Modals/WorkspaceChannelList.tsx b/twake/frontend/src/app/scenes/Client/ChannelsBar/Modals/WorkspaceChannelList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Divider, Input, Row } from 'antd';
 
 import Languages from 'services/languages/languages.js';
@@ -30,6 +30,10 @@ export default () => {
   const channelsCollection = Collection.get(collectionPath, ChannelResource);
   const channels = channelsCollection.useWatcher({}, { limit: limit });
 
+  useEffect(() => {
+    channelsCollection.reload();
+  });
+
   const minePath = `/channels/v1/companies/${companyId}/workspaces/${workspaceId}/channels/::mine`;
   const mineCollection = Collection.get(minePath, ChannelResource);
   const mine = mineCollection.useWatcher({});
@@ -69,13 +73,15 @@ export default () => {
       >
         <div style={{ height: '240px' }}>
           {autoChannels
-            .filter(filterMineAutoChannels)
             .sort((a, b) => a.name.localeCompare(b.name))
             .filter(({ name }) => name.toUpperCase().indexOf(search.toUpperCase()) > -1)
             .map(autoChannel => {
               return (
                 <div key={`${autoChannel.channelResource.key}`}>
-                  <WorkspaceChannelRow channel={autoChannel.channelResource} />
+                  <WorkspaceChannelRow
+                    channel={autoChannel.channelResource}
+                    joined={filterMineAutoChannels(autoChannel)}
+                  />
                   <Divider style={{ margin: 0 }} />
                 </div>
               );

diff --git a/...end/src/app/scenes/Client/ChannelsBar/Modals/WorkspaceChannelList/WorkspaceChannelRow.tsx b/...end/src/app/scenes/Client/ChannelsBar/Modals/WorkspaceChannelList/WorkspaceChannelRow.tsx
@@ -13,9 +13,10 @@ import ModalManager from 'app/components/Modal/ModalManager';
 
 type PropsType = {
   channel: ChannelResource;
+  joined: boolean;
 };
 
-export default ({ channel }: PropsType) => {
+export default ({ channel, joined }: PropsType) => {
   const { companyId, workspaceId }: ClientStateType = RouterServices.useRouteState(
     ({ companyId, workspaceId }) => {
       return { companyId, workspaceId };
@@ -28,10 +29,11 @@ export default ({ channel }: PropsType) => {
     ChannelMemberResource,
   );
 
-  const member: ChannelMemberResource[] = channelMembersCollection.useWatcher({ user_id: userId });
-  const [isChannelMember, setIsChannelMember] = useState<boolean>(
-    member[0] !== undefined && member[0].data.id === userId ? true : false,
-  );
+  const minePath = `/channels/v1/companies/${companyId}/workspaces/${workspaceId}/channels/::mine`;
+  const mineCollection = Collection.get(minePath, ChannelResource);
+  const mine = mineCollection.useWatcher({ id: channel.id }).length > 0;
+
+  const isChannelMember = mine || channelMembersCollection.findOne({ user_id: userId });
 
   const joinChannel = (): void => {
     const collectionPath: string = `/channels/v1/companies/${companyId}/workspaces/${workspaceId}/channels/${channel.data.id}/members/`;
@@ -43,8 +45,6 @@ export default ({ channel }: PropsType) => {
         type: 'member',
       }),
     );
-
-    return setIsChannelMember(true);
   };
 
   const buttonStyle: { [key: string]: string } = {

diff --git a/twake/frontend/src/app/scenes/Client/ChannelsBar/Parts/Channel/ChannelIntermediate.tsx b/twake/frontend/src/app/scenes/Client/ChannelsBar/Parts/Channel/ChannelIntermediate.tsx
@@ -34,9 +34,6 @@ export default (props: Props): JSX.Element => {
   const notificationsCollection = Collection.get(
     '/notifications/v1/badges/' + props.channel.company_id,
     NotificationResource,
-    {
-      tag: 'thus_tag_should_no_be_needed', //TODO remove this
-    },
   );
   const notifications = notificationsCollection.useWatcher(
     { channel_id: props.channel.id },

diff --git a/twake/frontend/src/app/scenes/Client/ChannelsBar/Parts/Channel/ChannelMenu.tsx b/twake/frontend/src/app/scenes/Client/ChannelsBar/Parts/Channel/ChannelMenu.tsx
@@ -49,8 +49,6 @@ export default (props: Props): JSX.Element => {
     '/notifications/v1/badges/' + props.channel.data.company_id,
     NotificationResource,
   );
-  const notifications = notificationsCollection.useWatcher({ channel_id: props.channel.id });
-  const hasNotification = notifications.length > 0;
 
   const changeNotificationPreference = async (preference: 'all' | 'none' | 'mentions' | 'me') => {
     const channelMember: ChannelMemberType = props.channel.data.user_member || {};
@@ -111,10 +109,14 @@ export default (props: Props): JSX.Element => {
     {
       type: 'menu',
       text: Languages.t(
-        hasNotification ? 'scenes.app.channelsbar.read_sign' : 'scenes.app.channelsbar.unread_sign',
+        notificationsCollection.find({ channel_id: props.channel.id }).length > 0
+          ? 'scenes.app.channelsbar.read_sign'
+          : 'scenes.app.channelsbar.unread_sign',
       ),
       onClick: () => {
-        hasNotification ? Notifications.read(props.channel) : Notifications.unread(props.channel);
+        notificationsCollection.find({ channel_id: props.channel.id }).length > 0
+          ? Notifications.read(props.channel)
+          : Notifications.unread(props.channel);
       },
     },
     {

diff --git a/twake/frontend/src/app/scenes/Client/ChannelsBar/Parts/Header/MemberChannelRow.tsx b/twake/frontend/src/app/scenes/Client/ChannelsBar/Parts/Header/MemberChannelRow.tsx
@@ -12,6 +12,7 @@ import Icon from 'app/components/Icon/Icon';
 import AccessRightsService from 'app/services/AccessRightsService';
 import RouterServices from 'services/RouterService';
 import Collection from 'app/services/Collections/Collection';
+import UsersService from 'services/user/user.js';
 
 const { Text } = Typography;
 
@@ -29,6 +30,7 @@ export default (props: Props) => {
   const { workspaceId } = RouterServices.useRouteState(({ workspaceId }) => {
     return { workspaceId };
   });
+  const userId: string = UsersService.getCurrentUserId();
 
   const { avatar, name, users } = getUserParts({
     usersIds: [props.userId] || [],
@@ -114,7 +116,9 @@ export default (props: Props) => {
       <Col flex={4}>
         <Text strong>{name}</Text> @{users[0]?.username}
       </Col>
-      {AccessRightsService.hasLevel(workspaceId || '', 'member') && userEvents}
+      {AccessRightsService.hasLevel(workspaceId || '', 'member') &&
+        props.userId !== userId &&
+        userEvents}
     </Row>
   );
 };
diff --git a/twake/frontend/src/app/scenes/Client/ChannelsBar/Workspace/workspace.tsx b/twake/frontend/src/app/scenes/Client/ChannelsBar/Workspace/workspace.tsx
@@ -62,6 +62,9 @@ export function Workspace() {
 
   let groupsName: string[] = [];
   let groups: { name: string; channels: ChannelResource[] }[] = [];
+  let hasNonGroupWorkspaceChannels = !(
+    channelCategory.workspace.length === 0 && channelCategory.inGroup.length !== 0
+  );
 
   channelCategory.inGroup.map(channel => {
     if (channel.data.channel_group && channel.data.channel_group.length > 1) {
@@ -100,7 +103,7 @@ export function Workspace() {
           favorite
         />
       )}
-      {!(channelCategory.workspace.length === 0 && channelCategory.inGroup.length !== 0) && (
+      {hasNonGroupWorkspaceChannels && (
         <WorkspaceChannels
           directCollection={directChannelsCollection}
           collection={channelsCollection}
@@ -116,7 +119,7 @@ export function Workspace() {
           key={index}
           sectionTitle={group.name}
           channels={group.channels}
-          subgroup
+          subgroup={hasNonGroupWorkspaceChannels}
         />
       ))}
     </div>

diff --git a/twake/frontend/src/app/scenes/Client/MainView/MainHeader/ChannelHeader/ChannelHeader.tsx b/twake/frontend/src/app/scenes/Client/MainView/MainHeader/ChannelHeader/ChannelHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Col, Row, Typography } from 'antd';
 import Emojione from 'app/components/Emojione/Emojione';
 import { startCase } from 'lodash';
@@ -9,19 +9,16 @@ import MainViewService from 'app/services/AppView/MainViewService';
 import { Lock } from 'react-feather';
 import SearchInput from '../Search';
 import ChannelUsersHeader from './ChannelUsersHeader';
-import { StarFilled } from '@ant-design/icons';
 import PseudoMarkdownCompiler from 'services/Twacode/pseudoMarkdownCompiler.js';
 import { ChannelResource } from 'app/models/Channel';
 import ChannelAvatars from './ChannelAvatars';
 import { getUserParts, useUsersListener } from 'app/components/Member/UserParts';
 import Collections from 'app/services/CollectionsReact/Collections';
 import { ChannelMemberResource } from 'app/models/Channel';
-import { Search } from 'react-feather';
 import Languages from 'services/languages/languages.js';
-import SearchService from 'services/search/search.js';
+import ChannelsService from 'services/channels/channels.js';
 
 export default (): JSX.Element => {
-  const [hideSearchInput, setHideSearchInput] = useState<boolean>(true);
   const { companyId, workspaceId, channelId } = RouterServices.useRouteState(
     ({ companyId, workspaceId, channelId }) => {
       return { companyId, workspaceId, channelId };
@@ -37,7 +34,6 @@ export default (): JSX.Element => {
     .useWatcher({}, { limit: 10 })
     .map(i => i.data.user_id || '');
   useUsersListener(members);
-  const { avatar } = getUserParts({ usersIds: members, keepMyself: true, max: 10 });
 
   MainViewService.useWatcher(() => !!MainViewService.getViewCollection());
   const channelCollection = MainViewService.getViewCollection();

diff --git a/twake/frontend/src/app/scenes/Client/MainView/MainView.scss b/twake/frontend/src/app/scenes/Client/MainView/MainView.scss
@@ -78,12 +78,6 @@
   }
 }
 
-.main-view {
-  border-radius: var(--default-border-radius-large) var(--default-border-radius-large) 0 0;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  height: 100%;
-}
-
 .main-view,
 .main-view-content {
   flex: 1;

diff --git a/twake/frontend/src/app/services/Collections/Transport/CollectionTransport.ts b/twake/frontend/src/app/services/Collections/Transport/CollectionTransport.ts
@@ -18,6 +18,7 @@ export default class CollectionTransport<G extends Resource<any>> {
   private buffer: ServerAction[] = [];
   httpUsed: number = 0;
   private didFirstStart: boolean = false;
+  private stopTimeout: any = null;
 
   constructor(readonly collection: Collection<G>) {}
 
@@ -26,6 +27,7 @@ export default class CollectionTransport<G extends Resource<any>> {
    */
   start() {
     logger.log('Start looking for changes on ', this.collection.getPath());
+    if (this.stopTimeout) clearTimeout(this.stopTimeout);
     if (this.didFirstStart) {
       this.collection.reload('ontime');
     }
@@ -36,9 +38,12 @@ export default class CollectionTransport<G extends Resource<any>> {
    * This collection is not visible / used anymore, transport can stop
    */
   stop() {
-    logger.log('Stop looking for changes on ', this.collection.getPath());
+    logger.log('Will stop looking for changes in 60 seconds on ', this.collection.getPath());
     this.didFirstStart = true;
-    this.socketTransport.stop();
+    this.stopTimeout = setTimeout(() => {
+      logger.log('Stop looking for changes on ', this.collection.getPath());
+      this.socketTransport.stop();
+    }, 60 * 1000); //Keep socket for some time
   }
 
   async flushBuffer() {

diff --git a/twake/frontend/src/app/services/Collections/Transport/TransportSocket.ts b/twake/frontend/src/app/services/Collections/Transport/TransportSocket.ts
@@ -130,14 +130,16 @@ export default class TransportSocket {
 
   leave(path: string, tag: string) {
     path = path.replace(/\/$/, '');
-    logger.debug(`Leave room with name ${path} and tag: ${tag}`);
-    if (this.socket) {
-      this.socket.emit(WebsocketActions.Leave, { name: path });
-    }
 
     this.listeners[path] = this.listeners[path] || {};
     delete this.listeners[path][tag];
-    if (Object.keys(this.listeners[path]).length === 0) delete this.listeners[path];
+    if (Object.keys(this.listeners[path]).length === 0) {
+      if (this.socket) {
+        logger.debug(`Leave room with name ${path} and tag: ${tag}`);
+        this.socket.emit(WebsocketActions.Leave, { name: path });
+      }
+      delete this.listeners[path];
+    }
   }
 
   emit(path: string, data: any) {

diff --git a/twake/frontend/src/app/services/user/notifications.tsx b/twake/frontend/src/app/services/user/notifications.tsx
@@ -31,9 +31,7 @@ const openNotification = (n: any, callback: any) => {
   inAppNotificationKey++;
   notification.open({
     key: inAppNotificationKey.toString(),
-    message: PseudoMarkdownCompiler.compileToSimpleHTML(
-      PseudoMarkdownCompiler.compileToJSON(n.title),
-    ),
+    message: emojione.shortnameToUnicode(n.title),
     description: PseudoMarkdownCompiler.compileToSimpleHTML(
       PseudoMarkdownCompiler.compileToJSON(
         (n.text || '').substr(0, 120) + ((n.text || '').length > 120 ? '...' : ''),
@@ -253,6 +251,11 @@ class Notifications extends Observable {
 
   read(channel: ChannelResource) {
     channel.action('read', { value: true });
+    const notificationsCollection = Collection.get(
+      '/notifications/v1/badges/' + channel.data.company_id,
+      NotificationResource,
+    );
+    notificationsCollection.remove({ channel_id: channel.id }, { withoutBackend: true });
   }
 
   unread(channel: ChannelResource) {