From 8064fbe073c452922392c7edcf43b73ee6a74790 Mon Sep 17 00:00:00 2001 From: Guilherme Jun Grillo <48109548+guijun13@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:31:07 -0300 Subject: [PATCH 1/2] [FIX] User avatar reseting and getting random image (#25603) ## Proposed changes (including videos or screenshots) - resolve user avatar not being saved after editing the user profile issue - resolve user avatar not getting another user picture due to database deletion error ## Issue(s) ## Steps to test or reproduce 1. As a user log in to the app 2. Click on Avatar/My account 3. Change the username 4. Click on `Save changes` -> Should not change the avatar image 6. Logout and create a new user on the same server 7. Repeat steps 1 to 4 -> Should not change the avatar image as well ## Further comments Co-authored-by: Filipe Marins <9275105+filipemarins@users.noreply.github.com> Co-authored-by: Matheus Barbosa Silva <36537004+matheusbsilva137@users.noreply.github.com> --- apps/meteor/app/lib/server/functions/deleteUser.ts | 2 +- apps/meteor/app/lib/server/functions/saveUserIdentity.ts | 8 ++++++-- apps/meteor/client/hooks/useUpdateAvatar.ts | 7 ++++--- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/apps/meteor/app/lib/server/functions/deleteUser.ts b/apps/meteor/app/lib/server/functions/deleteUser.ts index 63339692bb5d..056b3750a2d5 100644 --- a/apps/meteor/app/lib/server/functions/deleteUser.ts +++ b/apps/meteor/app/lib/server/functions/deleteUser.ts @@ -75,7 +75,7 @@ export async function deleteUser(userId: string, confirmRelinquish = false): Pro } // removes user's avatar - if (user.avatarOrigin === 'upload' || user.avatarOrigin === 'url') { + if (user.avatarOrigin === 'upload' || user.avatarOrigin === 'url' || user.avatarOrigin === 'rest') { FileUpload.getStore('Avatars').deleteByName(user.username); } diff --git a/apps/meteor/app/lib/server/functions/saveUserIdentity.ts b/apps/meteor/app/lib/server/functions/saveUserIdentity.ts index a5d6313b1be3..7ba891c38a35 100644 --- a/apps/meteor/app/lib/server/functions/saveUserIdentity.ts +++ b/apps/meteor/app/lib/server/functions/saveUserIdentity.ts @@ -70,9 +70,13 @@ export function saveUserIdentity({ LivechatDepartmentAgents.replaceUsernameOfAgentByUserId(user._id, username); const fileStore = FileUpload.getStore('Avatars'); - const file = fileStore.model.findOneByName(previousUsername); + const previousFile = Promise.await(fileStore.model.findOneByName(previousUsername)); + const file = Promise.await(fileStore.model.findOneByName(username)); if (file) { - fileStore.model.updateFileNameById(file._id, username); + fileStore.model.deleteFile(file._id); + } + if (previousFile) { + fileStore.model.updateFileNameById(previousFile._id, username); } } diff --git a/apps/meteor/client/hooks/useUpdateAvatar.ts b/apps/meteor/client/hooks/useUpdateAvatar.ts index fdcac425c928..a1735c241be7 100644 --- a/apps/meteor/client/hooks/useUpdateAvatar.ts +++ b/apps/meteor/client/hooks/useUpdateAvatar.ts @@ -19,10 +19,11 @@ type AvatarServiceObject = { type AvatarObject = AvatarReset | AvatarUrlObj | FormData | AvatarServiceObject; -const isAvatarReset = (avatarObj: AvatarObject): avatarObj is AvatarReset => typeof avatarObj === 'string'; -const isServiceObject = (avatarObj: AvatarObject): avatarObj is AvatarServiceObject => !isAvatarReset(avatarObj) && 'service' in avatarObj; +const isAvatarReset = (avatarObj: AvatarObject): avatarObj is AvatarReset => avatarObj === 'reset'; +const isServiceObject = (avatarObj: AvatarObject): avatarObj is AvatarServiceObject => + !isAvatarReset(avatarObj) && typeof avatarObj === 'object' && 'service' in avatarObj; const isAvatarUrl = (avatarObj: AvatarObject): avatarObj is AvatarUrlObj => - !isAvatarReset(avatarObj) && 'service' && 'avatarUrl' in avatarObj; + !isAvatarReset(avatarObj) && typeof avatarObj === 'object' && 'service' && 'avatarUrl' in avatarObj; export const useUpdateAvatar = (avatarObj: AvatarObject, userId: IUser['_id']): (() => void) => { const t = useTranslation(); From 66c5a77c18d221e27f325a0ec6b55f4cfc9217b4 Mon Sep 17 00:00:00 2001 From: Tiago Evangelista Pinto Date: Tue, 14 Jun 2022 12:41:44 -0300 Subject: [PATCH 2/2] Chore: Broken Storybook (#25714) ## Proposed changes (including videos or screenshots) There is another small improvement on the way we got storybook files. ## Issue(s) ## Steps to test or reproduce ## Further comments Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com> --- apps/meteor/.storybook/main.js | 20 +- apps/meteor/client/definitions/css.d.ts | 3 + .../admin/settings/inputs/CodeMirror.tsx | 22 +- apps/meteor/package.json | 10 +- packages/livechat/.storybook/main.js | 1 + packages/livechat/.storybook/preview.js | 1 - .../livechat/.storybook/webpack.config.js | 6 +- packages/livechat/package.json | 40 +- .../livechat/src/components/Footer/index.js | 1 - .../Messages/AudioAttachment/stories.js | 2 +- .../components/Messages/Message/stories.js | 9 - .../Messages/VideoAttachment/stories.js | 2 +- .../livechat/src/components/Sound/stories.js | 4 +- .../uiKit/message/actions.stories.js | 2 - packages/livechat/tsconfig.json | 1 - packages/livechat/webpack.config.js | 4 +- yarn.lock | 4593 +++++------------ 17 files changed, 1305 insertions(+), 3416 deletions(-) create mode 100644 apps/meteor/client/definitions/css.d.ts diff --git a/apps/meteor/.storybook/main.js b/apps/meteor/.storybook/main.js index afb264d66851..71d317a497ca 100644 --- a/apps/meteor/.storybook/main.js +++ b/apps/meteor/.storybook/main.js @@ -3,8 +3,24 @@ const { resolve, relative, join } = require('path'); const webpack = require('webpack'); module.exports = { - stories: ['../app/**/*.stories.{js,tsx}', '../client/**/*.stories.{js,tsx}', '../ee/**/*.stories.{js,tsx}'], - addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-postcss'], + stories: [ + '../client/**/*.stories.{js,tsx}', + '../app/**/*.stories.{js,tsx}', + '../ee/app/**/*.stories.{js,tsx}', + '../ee/client/**/*.stories.{js,tsx}', + ], + addons: [ + '@storybook/addon-essentials', + '@storybook/addon-interactions', + { + name: '@storybook/addon-postcss', + options: { + postcssLoaderOptions: { + implementation: require('postcss'), + }, + }, + }, + ], webpackFinal: async (config) => { const cssRule = config.module.rules.find(({ test }) => test.test('index.css')); diff --git a/apps/meteor/client/definitions/css.d.ts b/apps/meteor/client/definitions/css.d.ts new file mode 100644 index 000000000000..14e83a9be358 --- /dev/null +++ b/apps/meteor/client/definitions/css.d.ts @@ -0,0 +1,3 @@ +declare module '*.css' { + export = undefined; +} diff --git a/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx b/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx index 500a55fc1d47..71a10765aa0d 100644 --- a/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx +++ b/apps/meteor/client/views/admin/settings/inputs/CodeMirror.tsx @@ -1,4 +1,5 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; +import type { Editor, EditorFromTextArea } from 'codemirror'; import React, { ReactElement, useEffect, useRef, useState } from 'react'; const defaultGutters = ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']; @@ -44,7 +45,7 @@ function CodeMirror({ const [value, setValue] = useState(valueProp || defaultValue); const textAreaRef = useRef(null); - const editorRef = useRef(null); + const editorRef = useRef(null); const handleChange = useMutableCallback(onChange); useEffect(() => { @@ -53,11 +54,16 @@ function CodeMirror({ } const setupCodeMirror = async (): Promise => { - const jsPath = 'codemirror/lib/codemirror.js'; - const CodeMirror = await import(jsPath); - await import('../../../../../app/ui/client/lib/codeMirror/codeMirror'); - const cssPath = 'codemirror/lib/codemirror.css'; - await import(cssPath); + const CodeMirror = await import('codemirror'); + await Promise.all([ + import('../../../../../app/ui/client/lib/codeMirror/codeMirror'), + import('codemirror/addon/edit/matchbrackets'), + import('codemirror/addon/edit/closebrackets'), + import('codemirror/addon/edit/matchtags'), + import('codemirror/addon/edit/trailingspace'), + import('codemirror/addon/search/match-highlighter'), + import('codemirror/lib/codemirror.css'), + ]); if (!textAreaRef.current) { return; @@ -77,7 +83,7 @@ function CodeMirror({ readOnly, }); - editorRef?.current?.on('change', (doc: HTMLFormElement) => { + editorRef.current.on('change', (doc: Editor) => { const value = doc.getValue(); setValue(value); handleChange(value); @@ -119,7 +125,7 @@ function CodeMirror({ } if (value !== editorRef.current.getValue()) { - editorRef.current.setValue(value); + editorRef.current.setValue(value ?? ''); } }, [textAreaRef, value]); diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 018ee275e36e..f73336794d10 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -71,11 +71,11 @@ "@rocket.chat/eslint-config": "workspace:^", "@rocket.chat/livechat": "workspace:^", "@settlin/spacebars-loader": "^1.0.9", - "@storybook/addon-essentials": "~6.4.22", - "@storybook/addon-interactions": "~6.4.22", + "@storybook/addon-essentials": "~6.5.8", + "@storybook/addon-interactions": "~6.5.8", "@storybook/addon-postcss": "^2.0.0", - "@storybook/addons": "~6.4.22", - "@storybook/react": "~6.4.22", + "@storybook/addons": "~6.5.8", + "@storybook/react": "~6.5.8", "@storybook/testing-library": "0.0.11", "@testing-library/react": "~12.1.5", "@testing-library/user-event": "^13.5.0", @@ -89,6 +89,7 @@ "@types/chai-dom": "0.0.12", "@types/chai-spies": "^1.0.3", "@types/clipboard": "^2.0.7", + "@types/codemirror": "^5", "@types/cookie-parser": "^1.4.2", "@types/dompurify": "^2.2.2", "@types/ejson": "^2.2.0", @@ -318,6 +319,7 @@ "prometheus-gc-stats": "^0.6.3", "proxy-from-env": "^1.1.0", "psl": "^1.8.0", + "query-string": "^7.1.1", "queue-fifo": "^0.2.6", "rc-scrollbars": "^1.1.3", "react": "~17.0.2", diff --git a/packages/livechat/.storybook/main.js b/packages/livechat/.storybook/main.js index dd5ca2c73ae3..e012921b1352 100644 --- a/packages/livechat/.storybook/main.js +++ b/packages/livechat/.storybook/main.js @@ -7,6 +7,7 @@ module.exports = { } }, '@storybook/addon-knobs', + '@storybook/addon-postcss' ], stories: [ '../src/**/stories.js', diff --git a/packages/livechat/.storybook/preview.js b/packages/livechat/.storybook/preview.js index 104f5955b236..0815e7123c98 100644 --- a/packages/livechat/.storybook/preview.js +++ b/packages/livechat/.storybook/preview.js @@ -1,5 +1,4 @@ import { addDecorator, addParameters } from '@storybook/react'; -import 'loki/configure-react'; import 'emoji-mart/css/emoji-mart.css'; import '../src/styles/index.scss'; diff --git a/packages/livechat/.storybook/webpack.config.js b/packages/livechat/.storybook/webpack.config.js index 2912e86ad557..d0c7942071fb 100644 --- a/packages/livechat/.storybook/webpack.config.js +++ b/packages/livechat/.storybook/webpack.config.js @@ -1,8 +1,10 @@ module.exports = ({ config }) => { config.resolve.alias = { ...config.resolve.alias, - react: require.resolve('preact/compat'), - 'react-dom': require.resolve('preact/compat'), + "react": "preact/compat", + "react-dom/test-utils": "preact/test-utils", + "react-dom": "preact/compat", + "react/jsx-runtime": "preact/jsx-runtime", [require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit'), }; diff --git a/packages/livechat/package.json b/packages/livechat/package.json index a7135de9f2bb..942c461d5a13 100644 --- a/packages/livechat/package.json +++ b/packages/livechat/package.json @@ -8,7 +8,8 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/RocketChat/Rocket.Chat.Livechat" + "url": "https://github.com/RocketChat/Rocket.Chat", + "directory": "packages/livechat" }, "scripts": { "clean": "rimraf dist", @@ -18,25 +19,20 @@ "eslint": "eslint src", "stylelint": "stylelint 'src/**/*.scss'", "storybook": "start-storybook -p 9001 -c .storybook", - "loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static", - "loki:test-ci": "loki test --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static", - "loki:update": "loki update --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static", - "build-storybook": "build-storybook", - "build-storybook:loki": "cross-env NODE_ENV=loki build-storybook", - "update-storybook": "cross-env NODE_ENV=loki run-s build-storybook loki:update" + "build-storybook": "build-storybook" }, "devDependencies": { "@babel/preset-env": "^7.11.5", "@rocket.chat/eslint-config": "^0.4.0", - "@storybook/addon-actions": "^6.0.12", - "@storybook/addon-backgrounds": "^6.0.12", - "@storybook/addon-essentials": "^6.0.16", - "@storybook/addon-knobs": "^6.0.12", - "@storybook/addon-viewport": "^6.0.12", - "@storybook/react": "^6.0.12", - "@storybook/storybook-deployer": "^2.8.6", - "@storybook/theming": "^6.0.12", - "@types/react-dom": "^18", + "@storybook/addon-actions": "^6.5.8", + "@storybook/addon-backgrounds": "^6.5.8", + "@storybook/addon-essentials": "^6.5.8", + "@storybook/addon-knobs": "^6.4.0", + "@storybook/addon-postcss": "^2.0.0", + "@storybook/addon-viewport": "^6.5.8", + "@storybook/react": "^6.5.8", + "@storybook/theming": "^6.5.8", + "@types/react-dom": "^17", "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", @@ -55,7 +51,6 @@ "husky": "^4.2.5", "if-env": "^1.0.4", "image-webpack-loader": "^6.0.0", - "loki": "^0.24.0", "lorem-ipsum": "^2.0.3", "mini-css-extract-plugin": "^0.11.0", "npm-run-all": "^4.1.5", @@ -66,7 +61,7 @@ "postcss-loader": "^3.0.0", "postcss-logical": "^4.0.2", "postcss-selector-not": "^4.0.0", - "react-dom": "^18.1.0", + "react-dom": "~17", "rimraf": "^3.0.2", "sass": "^1.49.10", "sass-loader": "^9.0.2", @@ -113,14 +108,5 @@ "updateFiles": [ "package.json" ] - }, - "loki": { - "configurations": { - "chrome": { - "target": "chrome.docker", - "width": 365, - "height": 500 - } - } } } diff --git a/packages/livechat/src/components/Footer/index.js b/packages/livechat/src/components/Footer/index.js index 98d21cb95f5c..1d011199456a 100644 --- a/packages/livechat/src/components/Footer/index.js +++ b/packages/livechat/src/components/Footer/index.js @@ -5,7 +5,6 @@ import { PopoverMenu } from '../Menu'; import { createClassName } from '../helpers'; import styles from './styles.scss'; - export const Footer = ({ children, className, ...props }) => (