🛠 Fix scroll glitches and implement jump to message feature (#2113)

* Try to reduce glitches

* Fix rotation of thumbnails

* Still not working but at least virtuoso is updated

* Create use-highlight-message

* Ability to jump to message from url

* Super buggy but works

* Clean url if channel change

* Finaly something kind of working 🎉

* Duplicate work for threads

* Fix dependancies

* Implement "Go to last message" button

* Make sure we don't set time at wrong place

* Improving as we can

* Put back real time partially

* Update useEffect to useGlobalEffect

* Almost fully working !

* Fix load to top issue and realtime issue

* Put back thread initial message

* Fix frontend message duplicated

* Remove console.log

* Clean code

twake/backend/node/src/services/previews/services/processing/image.ts

@@ -21,7 +21,7 @@ export async function generatePreview(
       const inputMetadata = await sharp(inputPath).metadata();
       const outputFormat = computeNewFormat(inputMetadata, options);
 
-      result = await sharp(inputPath).resize(outputFormat).toFile(outputPath);
+      result = await sharp(inputPath).rotate().resize(outputFormat).toFile(outputPath);
       output.push({
         path: outputPath,
         width: result.width,

twake/frontend/package.json

@@ -103,6 +103,7 @@
     "anchorme": "1.1.2",
     "animated-scroll-to": "^2.0.12",
     "antd": "^4.18.5",
+    "await-lock": "^2.2.2",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
@@ -203,7 +204,7 @@
     "react-textarea-autosize": "^8.2.0",
     "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.22.2",
-    "react-virtuoso": "1.11.1",
+    "react-virtuoso": "2.10.2",
     "recoil": "^0.4.0",
     "redux": "^4.0.5",
     "resize-observer-polyfill": "^1.5.1",

twake/frontend/public/locales/en.json

@@ -540,7 +540,7 @@
     "scenes.apps.messages.message.reply_button": "Reply",
     "scenes.apps.messages.message.save_button": "Save",
     "scenes.apps.messages.message.show_button": "Display",
-    "scenes.apps.messages.message.show_responses_button": "View all answers",
+    "scenes.apps.messages.message.show_responses_button": "See previous answers",
     "scenes.apps.messages.message.types.first_channel_message_text": "This is the first message of the channel",
     "scenes.apps.messages.message.types.first_message_text": "This is the first message",
     "scenes.apps.messages.message.types.no_message_in_thread": "Nobody replied yet.",
@@ -877,8 +877,8 @@
     "scenes.app.popup.appsparameters.pages.application_creator.checkbox": "I understand that the owner and administrators of this company will be able to modify and publish this application.",
     "twake.application.access.title": "Select the right scopes for your application.",
     "twake.application.access.no_default_scopes_available'": "This integration doesn't have any {{$1}} access",
-    "scenes.app.popup.appsparameters.pages.application_editor.help_link":"the Twake API documentation",
-    "scenes.app.popup.appsparameters.pages.application_editor.help_text":"If you do not know how to fill these, go to ",
+    "scenes.app.popup.appsparameters.pages.application_editor.help_link": "the Twake API documentation",
+    "scenes.app.popup.appsparameters.pages.application_editor.help_text": "If you do not know how to fill these, go to ",
     "scenes.app.popup.appsparameters.pages.app.private_key": "Private key",
     "scenes.app.popup.appsparameters.pages.application_editor.application_removed": "Successfully removed application {{$1}} !",
     "scenes.app.popup.appsparameters.pages.application_editor.application_removed_error": "Error while removing application {{$1}} !",

twake/frontend/public/locales/fr.json

@@ -532,7 +532,7 @@
     "scenes.apps.messages.message.reply_button": "Répondre",
     "scenes.apps.messages.message.save_button": "Enregistrer",
     "scenes.apps.messages.message.show_button": "Afficher",
-    "scenes.apps.messages.message.show_responses_button": "Afficher toutes les réponses",
+    "scenes.apps.messages.message.show_responses_button": "Voir les réponses précédentes",
     "scenes.apps.messages.message.types.first_channel_message_text": "Ceci est le premier message de la chaîne",
     "scenes.apps.messages.message.types.first_message_text": "C'est le premier message",
     "scenes.apps.messages.message.types.no_message_in_thread": "Personne n'a répondu.",
@@ -877,8 +877,8 @@
     "scenes.app.popup.appsparameters.pages.application_creator.checkbox": "Je comprends que le propriétaire et les administrateurs de cette entreprise pourront modifier et publier cette application.",
     "twake.application.access.title": "Sélectionnez les portées adaptées à votre application.",
     "twake.application.access.no_default_scopes_available'": "Cette intégration n'a pas d'accès {{$1}}.",
-    "scenes.app.popup.appsparameters.pages.application_editor.help_link":"la documentation de l'API Twake.",
-    "scenes.app.popup.appsparameters.pages.application_editor.help_text":"Si vous ne savez pas comment les remplir, consultez ", 
+    "scenes.app.popup.appsparameters.pages.application_editor.help_link": "la documentation de l'API Twake.",
+    "scenes.app.popup.appsparameters.pages.application_editor.help_text": "Si vous ne savez pas comment les remplir, consultez ",
     "scenes.app.popup.appsparameters.pages.app.private_key": "Clé privée",
     "scenes.app.popup.appsparameters.pages.application_editor.application_removed": "L'application {{$1}} a été supprimée avec succès !",
     "scenes.app.popup.appsparameters.pages.application_editor.application_removed_error": "Erreur lors de la suppression de l'application {{$1}} !",

twake/frontend/src/app/components/file/file.scss

@@ -7,6 +7,7 @@
   flex-direction: column;
   justify-content: space-between;
   overflow: hidden;
+  min-height: 50px;
 
   &:hover {
     cursor: pointer;

twake/frontend/src/app/features/auth/provider/oidc/oidc-auth-provider-service.ts

@@ -79,6 +79,7 @@ export default class OIDCAuthProviderService
               'OIDC user loaded listener, error while getting the JWT from OIDC token',
               err,
             );
+            this.signinRedirect();
             // FIXME: Should we return?
             //return;
           }

twake/frontend/src/app/features/global/hooks/use-websocket.ts

@@ -14,23 +14,18 @@ const useWebSocket = () => {
     wsRef.current = WebSocketFactory.get();
 
     if (wsRef.current.isConnected()) {
-      logger.debug('WS is connected');
       setConnected(() => true);
     }
 
     wsRef.current.on(WebsocketEvents.Connected, (data: { url: string }) => {
-      logger.debug('WS is connected to', data.url);
       setConnected(() => true);
     });
 
     wsRef.current.on(WebsocketEvents.Disconnected, (data: { url: string }) => {
-      console.log('WS is disconnected from', data.url);
       setConnected(() => false);
     });
 
-    return () => {
-      logger.debug('WS Cleanup');
-    };
+    return () => {};
   }, []);
 
   return {

twake/frontend/src/app/features/messages/api/message-api-client.ts

@@ -4,6 +4,7 @@ import MessageViewAPIClient from './message-view-api-client';
 import MessageThreadAPIClient from './message-thread-api-client';
 import Api from 'app/features/global/framework/api-service';
 import { WebsocketRoom } from 'app/features/global/types/websocket-types';
+import Numbers from 'app/features/global/utils/Numbers';
 
 /**
  * This service is to get, update, create, list messages in a thread
@@ -32,7 +33,7 @@ class MessageAPIClient {
       `${this.prefixUrl}/companies/${companyId}/threads/${threadId}/messages?limit=${limit}&include_users=1&page_token=${pageToken}&direction=${direction}`,
     );
     this.realtime.set(threadId, response.websockets);
-    return response.resources;
+    return (response.resources || []).sort((a, b) => Numbers.compareTimeuuid(a.id, b.id));
   }
 
   async get(companyId: string, threadId: string, messageId: string) {

twake/frontend/src/app/features/messages/api/message-view-api-client.ts

@@ -2,6 +2,7 @@ import { MessageWithReplies } from 'app/features/messages/types/message';
 import { TwakeService } from 'app/features/global/framework/registry-decorator-service';
 import Api from 'app/features/global/framework/api-service';
 import { WebsocketRoom } from 'app/features/global/types/websocket-types';
+import Numbers from 'app/features/global/utils/Numbers';
 
 /**
  * This service is to get messages using views.
@@ -37,7 +38,9 @@ class MessageViewAPIClient {
       `${this.prefixUrl}/companies/${companyId}/workspaces/${workspaceId}/channels/${channelId}/feed?replies_per_thread=${repliesPerThread}&limit=${limit}&include_users=1&page_token=${pageToken}&direction=${direction}&websockets=1`,
     );
     this.realtime.set('feed-' + channelId, response.websockets);
-    return response.resources;
+    return (response.resources || []).sort((a, b) =>
+      Numbers.compareTimeuuid(a.thread_id, b.thread_id),
+    );
   }
 }
 

twake/frontend/src/app/features/messages/hooks/use-add-to-windowed-list.ts

@@ -21,6 +21,7 @@ export const getListWindow = (key: string) => {
   let window = windows.get(key) as WindowType;
 
   const updateWindowFromIds = (ids: string[]) => {
+    let window = windows.get(key) as WindowType;
     const min = ids.reduce((a, b) => Numbers.minTimeuuid(a, b), ids[0]);
     const max = ids.reduce((a, b) => Numbers.maxTimeuuid(a, b), ids[0]);
     if (max !== window.end || min !== window.start) {
@@ -45,13 +46,15 @@ export const getListWindow = (key: string) => {
   };
 
   const isInWindow = (id: string) => {
+    const window = windows.get(key) as WindowType;
     return (
       (Numbers.compareTimeuuid(id, window.start) >= 0 || !window.start) &&
       (Numbers.compareTimeuuid(id, window.end) <= 0 || !window.end)
     );
   };
 
   const setLoaded = (loaded: boolean = true) => {
+    const window = windows.get(key) as WindowType;
     windows.set(key, {
       ...window,
       loaded,
@@ -64,6 +67,8 @@ export const getListWindow = (key: string) => {
     reachEdge,
     isInWindow,
     setLoaded,
+    setWindow: (window: WindowType) => windows.set(key, window),
+    getWindow: () => windows.get(key) as WindowType,
   };
 };