From c812e545f91ef83408a08be902c36cc95cf7ad88 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 6 Jan 2020 19:22:06 -0300 Subject: [PATCH 01/14] Update some Fuselage form components --- .../settings/inputs/ActionSettingInput.js | 16 ++- .../settings/inputs/AssetSettingInput.js | 40 +++--- .../inputs/AssetSettingInput.stories.js | 6 +- .../settings/inputs/BooleanSettingInput.js | 28 ++-- .../admin/settings/inputs/CodeSettingInput.js | 12 +- .../inputs/CodeSettingInput.stories.js | 4 +- .../settings/inputs/ColorSettingInput.js | 126 ++++++++---------- .../admin/settings/inputs/FontSettingInput.js | 34 ++--- .../settings/inputs/GenericSettingInput.js | 34 ++--- .../admin/settings/inputs/IntSettingInput.js | 36 ++--- .../settings/inputs/LanguageSettingInput.js | 42 +++--- .../settings/inputs/PasswordSettingInput.js | 34 ++--- .../inputs/RelativeUrlSettingInput.js | 16 +-- .../settings/inputs/RoomPickSettingInput.js | 12 +- .../settings/inputs/SelectSettingInput.js | 39 +++--- .../settings/inputs/StringSettingInput.js | 59 ++++---- package-lock.json | 18 +-- package.json | 2 +- 18 files changed, 275 insertions(+), 283 deletions(-) diff --git a/client/components/admin/settings/inputs/ActionSettingInput.js b/client/components/admin/settings/inputs/ActionSettingInput.js index 50febda864db8..6e35e6397bab5 100644 --- a/client/components/admin/settings/inputs/ActionSettingInput.js +++ b/client/components/admin/settings/inputs/ActionSettingInput.js @@ -28,13 +28,15 @@ export function ActionSettingInput({ }; return <> - - :
{t('Select_file')} - -
} + ?
+ :
} +
+ {value.url + ? + :
{t('Select_file')} + +
} +
- + ; } diff --git a/client/components/admin/settings/inputs/AssetSettingInput.stories.js b/client/components/admin/settings/inputs/AssetSettingInput.stories.js index b22ff72608cba..6bbda12a7886f 100644 --- a/client/components/admin/settings/inputs/AssetSettingInput.stories.js +++ b/client/components/admin/settings/inputs/AssetSettingInput.stories.js @@ -7,7 +7,11 @@ export default { title: 'admin/settings/inputs/AssetSettingInput', component: AssetSettingInput, decorators: [ - (storyFn) => {storyFn()}, + (storyFn) =>
+
+ {storyFn()} +
+
, ], }; diff --git a/client/components/admin/settings/inputs/BooleanSettingInput.js b/client/components/admin/settings/inputs/BooleanSettingInput.js index a81d83f8745e6..165ba6d0fbb47 100644 --- a/client/components/admin/settings/inputs/BooleanSettingInput.js +++ b/client/components/admin/settings/inputs/BooleanSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - ToggleSwitch, -} from '@rocket.chat/fuselage'; +import { Field, ToggleSwitch } from '@rocket.chat/fuselage'; import React from 'react'; import { ResetSettingButton } from '../ResetSettingButton'; @@ -12,7 +8,6 @@ export function BooleanSettingInput({ label, disabled, readonly, - autocomplete, value, hasResetButton, onChangeValue, @@ -24,17 +19,16 @@ export function BooleanSettingInput({ }; return - + + {label} {hasResetButton && } ; } diff --git a/client/components/admin/settings/inputs/CodeSettingInput.js b/client/components/admin/settings/inputs/CodeSettingInput.js index 7daa59f424a26..2685ac71a2e40 100644 --- a/client/components/admin/settings/inputs/CodeSettingInput.js +++ b/client/components/admin/settings/inputs/CodeSettingInput.js @@ -1,4 +1,4 @@ -import { Button, Field, Label } from '@rocket.chat/fuselage'; +import { Box, Button, Field, Flex } from '@rocket.chat/fuselage'; import { useToggle } from '@rocket.chat/fuselage-hooks'; import React, { useEffect, useRef, useState } from 'react'; @@ -113,10 +113,12 @@ export function CodeSettingInput({ }; return <> - - + + + {label} + {hasResetButton && } + +
{storyFn()}, + (storyFn) =>
+ {storyFn()} +
, ], }; diff --git a/client/components/admin/settings/inputs/ColorSettingInput.js b/client/components/admin/settings/inputs/ColorSettingInput.js index 4e424fba44aa8..5a7e7ab44cabf 100644 --- a/client/components/admin/settings/inputs/ColorSettingInput.js +++ b/client/components/admin/settings/inputs/ColorSettingInput.js @@ -1,7 +1,10 @@ import { + Box, Field, + Flex, InputBox, - Label, + Margins, + MarginsWrapper, SelectInput, TextInput, } from '@rocket.chat/fuselage'; @@ -37,76 +40,55 @@ export function ColorSettingInput({ }; return <> -
- - - - - - - {allowedTypes && allowedTypes.map((allowedType) => - {t(allowedType)}, - )} - - -
- - Variable name: {_id.replace(/theme-color-/, '@')} - + + + {label} + {hasResetButton && } + + + + + + + {editor === 'color' && } + {editor === 'expression' && } + + + {allowedTypes && allowedTypes.map((allowedType) => + {t(allowedType)}, + )} + + + + + Variable name: {_id.replace(/theme-color-/, '@')} ; } diff --git a/client/components/admin/settings/inputs/FontSettingInput.js b/client/components/admin/settings/inputs/FontSettingInput.js index 875164ebccefa..44fe707c4821a 100644 --- a/client/components/admin/settings/inputs/FontSettingInput.js +++ b/client/components/admin/settings/inputs/FontSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - TextInput, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, TextInput } from '@rocket.chat/fuselage'; import React from 'react'; import { ResetSettingButton } from '../ResetSettingButton'; @@ -24,19 +20,23 @@ export function FontSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - ; } diff --git a/client/components/admin/settings/inputs/GenericSettingInput.js b/client/components/admin/settings/inputs/GenericSettingInput.js index 6e32f3aa655b9..58787f38bb559 100644 --- a/client/components/admin/settings/inputs/GenericSettingInput.js +++ b/client/components/admin/settings/inputs/GenericSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - TextInput, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, TextInput } from '@rocket.chat/fuselage'; import React from 'react'; import { ResetSettingButton } from '../ResetSettingButton'; @@ -24,19 +20,23 @@ export function GenericSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - ; } diff --git a/client/components/admin/settings/inputs/IntSettingInput.js b/client/components/admin/settings/inputs/IntSettingInput.js index b047a1db22ae3..fc652e2a09d90 100644 --- a/client/components/admin/settings/inputs/IntSettingInput.js +++ b/client/components/admin/settings/inputs/IntSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - InputBox, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, InputBox } from '@rocket.chat/fuselage'; import React from 'react'; import { ResetSettingButton } from '../ResetSettingButton'; @@ -24,20 +20,24 @@ export function IntSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - ; } diff --git a/client/components/admin/settings/inputs/LanguageSettingInput.js b/client/components/admin/settings/inputs/LanguageSettingInput.js index f930bf4b37d57..380079db1489d 100644 --- a/client/components/admin/settings/inputs/LanguageSettingInput.js +++ b/client/components/admin/settings/inputs/LanguageSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - SelectInput, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, SelectInput } from '@rocket.chat/fuselage'; import React from 'react'; import { useLanguages } from '../../../../contexts/TranslationContext'; @@ -27,23 +23,27 @@ export function LanguageSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - - {languages.map(({ key, name }) => - {name}, - )} - ; } diff --git a/client/components/admin/settings/inputs/PasswordSettingInput.js b/client/components/admin/settings/inputs/PasswordSettingInput.js index c0c58f5952e3a..fef6cf1e26b02 100644 --- a/client/components/admin/settings/inputs/PasswordSettingInput.js +++ b/client/components/admin/settings/inputs/PasswordSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - PasswordInput, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, PasswordInput } from '@rocket.chat/fuselage'; import React from 'react'; import { ResetSettingButton } from '../ResetSettingButton'; @@ -24,19 +20,23 @@ export function PasswordSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - ; } diff --git a/client/components/admin/settings/inputs/RelativeUrlSettingInput.js b/client/components/admin/settings/inputs/RelativeUrlSettingInput.js index 80a29cfa81519..173c55cb8a223 100644 --- a/client/components/admin/settings/inputs/RelativeUrlSettingInput.js +++ b/client/components/admin/settings/inputs/RelativeUrlSettingInput.js @@ -1,8 +1,4 @@ -import { - Field, - Label, - UrlInput, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, UrlInput } from '@rocket.chat/fuselage'; import React from 'react'; import { useAbsoluteUrl } from '../../../../contexts/ServerContext'; @@ -27,10 +23,12 @@ export function RelativeUrlSettingInput({ }; return <> - - + + + {label} + {hasResetButton && } + + - - + + + {label} + {hasResetButton && } + +
    {value.map(({ _id, name }) => diff --git a/client/components/admin/settings/inputs/SelectSettingInput.js b/client/components/admin/settings/inputs/SelectSettingInput.js index 620b4d94957e1..9d93cf642d1ba 100644 --- a/client/components/admin/settings/inputs/SelectSettingInput.js +++ b/client/components/admin/settings/inputs/SelectSettingInput.js @@ -1,6 +1,7 @@ import { + Box, Field, - Label, + Flex, SelectInput, } from '@rocket.chat/fuselage'; import React from 'react'; @@ -28,23 +29,27 @@ export function SelectSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - - {values.map(({ key, i18nLabel }) => - {t(i18nLabel)}, - )} - ; } diff --git a/client/components/admin/settings/inputs/StringSettingInput.js b/client/components/admin/settings/inputs/StringSettingInput.js index 17c9b1e451d6f..e044f0dfc01a6 100644 --- a/client/components/admin/settings/inputs/StringSettingInput.js +++ b/client/components/admin/settings/inputs/StringSettingInput.js @@ -1,9 +1,4 @@ -import { - Field, - Label, - TextAreaInput, - TextInput, -} from '@rocket.chat/fuselage'; +import { Box, Field, Flex, TextAreaInput, TextInput } from '@rocket.chat/fuselage'; import React from 'react'; import { ResetSettingButton } from '../ResetSettingButton'; @@ -26,31 +21,35 @@ export function StringSettingInput({ }; return <> + + + {label} + {hasResetButton && } + + - - {multiline - ? - : } ; } diff --git a/package-lock.json b/package-lock.json index bad6d31ef7f29..e6db458c8cfda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "Rocket.Chat", - "version": "2.4.0-develop", + "version": "2.5.0-develop", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2674,12 +2674,12 @@ } }, "@rocket.chat/fuselage": { - "version": "0.2.0-dev.67", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.2.0-dev.67.tgz", - "integrity": "sha512-3wxlbd3vOurF8fKAZfksF2cmvrMGGDbA99BP4vYYG87TmWcCwlY59MmEBKNtAavae00n+8/Z2XMPtk6CbB14Dw==", + "version": "0.2.0-dev.71", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.2.0-dev.71.tgz", + "integrity": "sha512-jkRGwyFD2F99USdeTanDoTOD2V61KlRBofG0Y3qOCrp3k5URgvbKLJykvq3JcQTy2jdHxTIgM3i2++FAmAF+Ww==", "requires": { - "@rocket.chat/fuselage-tokens": "^0.2.0-alpha.15", - "@rocket.chat/icons": "^0.2.0-alpha.16" + "@rocket.chat/fuselage-tokens": "^0.2.0-dev.71+5a9aa82", + "@rocket.chat/icons": "^0.2.0-alpha.18" } }, "@rocket.chat/fuselage-hooks": { @@ -2688,9 +2688,9 @@ "integrity": "sha512-58SuGnso0EvZlmSMjwm6Mhuv27VYdGtPV4RfU7MKtPLzgfzW5VFxLdHBCfiHLIvMlu4hQKEKsfk544Eob5ztag==" }, "@rocket.chat/fuselage-tokens": { - "version": "0.2.0-alpha.15", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.2.0-alpha.15.tgz", - "integrity": "sha512-vMaBpfFCYJFe4oS1YhYhOJfTNMxwwkv2Rl0KDo2OuWp4kRyNhfQG2sEDvGTM/EcZsCh0//mcbJ6neufh3jA4iQ==" + "version": "0.2.0-dev.71", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.2.0-dev.71.tgz", + "integrity": "sha512-Cjr96LWpwSRQ9ci5SupR+480QXPRg2RDRPxqK5qnxxwQXd1nHqd1zdtWpfVE8ozFSzgRqTHtz75mLDo7wLHv9w==" }, "@rocket.chat/icons": { "version": "0.2.0-dev.49", diff --git a/package.json b/package.json index 82625d5d864de..f422ffa411916 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "@google-cloud/storage": "^2.3.1", "@google-cloud/vision": "^0.23.0", "@rocket.chat/apps-engine": "^1.11.0", - "@rocket.chat/fuselage": "^0.2.0-dev.67", + "@rocket.chat/fuselage": "^0.2.0-dev.71", "@rocket.chat/fuselage-hooks": "^0.2.0-dev.50", "@rocket.chat/icons": "^0.2.0-dev.49", "@slack/client": "^4.8.0", From 0534c41999a9165954085a78df52343b6b67f635 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 7 Jan 2020 00:34:40 -0300 Subject: [PATCH 02/14] Simplify ResetSettingButton --- .../admin/settings/ResetSettingButton.js | 13 ++----- client/components/admin/settings/Setting.js | 34 +++++++++++-------- .../admin/settings/Setting.stories.js | 15 ++++++++ 3 files changed, 38 insertions(+), 24 deletions(-) create mode 100644 client/components/admin/settings/Setting.stories.js diff --git a/client/components/admin/settings/ResetSettingButton.js b/client/components/admin/settings/ResetSettingButton.js index f5b570b8df880..58f96cffa8874 100644 --- a/client/components/admin/settings/ResetSettingButton.js +++ b/client/components/admin/settings/ResetSettingButton.js @@ -1,27 +1,20 @@ import { Button, Icon } from '@rocket.chat/fuselage'; import React from 'react'; -import styled from 'styled-components'; import { useTranslation } from '../../../contexts/TranslationContext'; -// TODO: get rid of it -const StyledResetSettingButton = styled(Button)` - padding-block: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important; -`; - export function ResetSettingButton(props) { const t = useTranslation(); - return - ; + ; } diff --git a/client/components/admin/settings/Setting.js b/client/components/admin/settings/Setting.js index 39b7dbf5db271..2a5c96605c1e1 100644 --- a/client/components/admin/settings/Setting.js +++ b/client/components/admin/settings/Setting.js @@ -1,6 +1,6 @@ -import { Callout, Field, InputBox, Label, Margins, Skeleton } from '@rocket.chat/fuselage'; +import { Callout, Field, Flex, InputBox, Margins, Skeleton } from '@rocket.chat/fuselage'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState, useCallback } from 'react'; import { MarkdownText } from '../../basic/MarkdownText'; import { RawText } from '../../basic/RawText'; @@ -77,19 +77,19 @@ export function Setting({ settingId }) { setEditor(contextEditor); }, [contextEditor]); - const onChangeValue = (value) => { + const onChangeValue = useCallback((value) => { setValue(value); setContextValue(value); - }; + }, []); - const onChangeEditor = (editor) => { + const onChangeEditor = useCallback((editor) => { setEditor(editor); setContextEditor(editor); - }; + }, []); - const onResetButtonClick = () => { + const onResetButtonClick = useCallback(() => { setting.reset(); - }; + }, [setting.reset]); const { _id, @@ -123,11 +123,17 @@ export function Setting({ settingId }) { />; } -Setting.Skeleton = function SettingSkeleton() { +export function SettingSkeleton() { return - - + + + + + + + + ; -}; +} + +Setting.Skeleton = SettingSkeleton; diff --git a/client/components/admin/settings/Setting.stories.js b/client/components/admin/settings/Setting.stories.js new file mode 100644 index 0000000000000..db8871b77df02 --- /dev/null +++ b/client/components/admin/settings/Setting.stories.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import { Setting } from './Setting'; +import { SettingsState } from './SettingsState'; + +export default { + title: 'admin/settings/Setting', + component: Setting, + decorators: [ + (storyFn) => {storyFn()}, + ], +}; + +export const skeleton = () => + ; From 5b035589420ae868d122086509e3171074d939bc Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 7 Jan 2020 02:11:46 -0300 Subject: [PATCH 03/14] Add stories for Setting --- client/components/admin/settings/Setting.js | 60 +++++++++---------- .../admin/settings/Setting.stories.js | 15 +++++ 2 files changed, 45 insertions(+), 30 deletions(-) diff --git a/client/components/admin/settings/Setting.js b/client/components/admin/settings/Setting.js index 2a5c96605c1e1..d460c4eeda591 100644 --- a/client/components/admin/settings/Setting.js +++ b/client/components/admin/settings/Setting.js @@ -1,6 +1,6 @@ import { Callout, Field, Flex, InputBox, Margins, Skeleton } from '@rocket.chat/fuselage'; import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; -import React, { useEffect, useMemo, useState, useCallback } from 'react'; +import React, { memo, useEffect, useMemo, useState, useCallback } from 'react'; import { MarkdownText } from '../../basic/MarkdownText'; import { RawText } from '../../basic/RawText'; @@ -21,36 +21,34 @@ import { AssetSettingInput } from './inputs/AssetSettingInput'; import { RoomPickSettingInput } from './inputs/RoomPickSettingInput'; import { useSetting } from './SettingsState'; -const getInputComponentByType = (type) => ({ - boolean: BooleanSettingInput, - string: StringSettingInput, - relativeUrl: RelativeUrlSettingInput, - password: PasswordSettingInput, - int: IntSettingInput, - select: SelectSettingInput, - language: LanguageSettingInput, - color: ColorSettingInput, - font: FontSettingInput, - code: CodeSettingInput, - action: ActionSettingInput, - asset: AssetSettingInput, - roomPick: RoomPickSettingInput, -})[type] || GenericSettingInput; - -const MemoizedSetting = React.memo(function MemoizedSetting({ +export const MemoizedSetting = memo(function MemoizedSetting({ type, hint, callout, ...inputProps }) { - const InputComponent = getInputComponentByType(type); + const InputComponent = { + boolean: BooleanSettingInput, + string: StringSettingInput, + relativeUrl: RelativeUrlSettingInput, + password: PasswordSettingInput, + int: IntSettingInput, + select: SelectSettingInput, + language: LanguageSettingInput, + color: ColorSettingInput, + font: FontSettingInput, + code: CodeSettingInput, + action: ActionSettingInput, + asset: AssetSettingInput, + roomPick: RoomPickSettingInput, + }[type] || GenericSettingInput; return {hint && {hint}} - - {callout && } - + {callout && + {callout} + } ; }); @@ -58,38 +56,39 @@ export function Setting({ settingId }) { const { value: contextValue, editor: contextEditor, + update, + reset, ...setting } = useSetting(settingId); const t = useTranslation(); const [value, setValue] = useState(contextValue); - const setContextValue = useDebouncedCallback((value) => setting.update({ value }), 70, []); + const [editor, setEditor] = useState(contextEditor); useEffect(() => { setValue(contextValue); }, [contextValue]); - const [editor, setEditor] = useState(contextEditor); - const setContextEditor = useDebouncedCallback((editor) => setting.update({ editor }), 70, []); - useEffect(() => { setEditor(contextEditor); }, [contextEditor]); + const updateContext = useDebouncedCallback(() => update({ value, editor }), 70, [update, value, editor]); + const onChangeValue = useCallback((value) => { setValue(value); - setContextValue(value); + updateContext(); }, []); const onChangeEditor = useCallback((editor) => { setEditor(editor); - setContextEditor(editor); + updateContext(); }, []); const onResetButtonClick = useCallback(() => { - setting.reset(); - }, [setting.reset]); + reset(); + }, [reset]); const { _id, @@ -136,4 +135,5 @@ export function SettingSkeleton() { ; } +Setting.Memoized = MemoizedSetting; Setting.Skeleton = SettingSkeleton; diff --git a/client/components/admin/settings/Setting.stories.js b/client/components/admin/settings/Setting.stories.js index db8871b77df02..f6c2ef92934a8 100644 --- a/client/components/admin/settings/Setting.stories.js +++ b/client/components/admin/settings/Setting.stories.js @@ -11,5 +11,20 @@ export default { ], }; +export const _default = () => + ; + +export const withCallout = () => + ; + export const skeleton = () => ; From 36fb77a30f3525ed327b761ca9286c706287ca57 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 7 Jan 2020 14:07:25 -0300 Subject: [PATCH 04/14] Add more stories for Setting --- client/components/admin/settings/Setting.js | 26 +++++-- .../admin/settings/Setting.stories.js | 69 ++++++++++++++++++- package-lock.json | 26 +++++++ 3 files changed, 113 insertions(+), 8 deletions(-) diff --git a/client/components/admin/settings/Setting.js b/client/components/admin/settings/Setting.js index d460c4eeda591..53df874e3ea5f 100644 --- a/client/components/admin/settings/Setting.js +++ b/client/components/admin/settings/Setting.js @@ -25,6 +25,10 @@ export const MemoizedSetting = memo(function MemoizedSetting({ type, hint, callout, + value, + editor, + onChangeValue = () => {}, + onChangeEditor = () => {}, ...inputProps }) { const InputComponent = { @@ -44,7 +48,13 @@ export const MemoizedSetting = memo(function MemoizedSetting({ }[type] || GenericSettingInput; return - + {hint && {hint}} {callout && {callout} @@ -74,21 +84,23 @@ export function Setting({ settingId }) { setEditor(contextEditor); }, [contextEditor]); - const updateContext = useDebouncedCallback(() => update({ value, editor }), 70, [update, value, editor]); + const updateContext = useDebouncedCallback((props) => update(props), 70, [update]); const onChangeValue = useCallback((value) => { setValue(value); - updateContext(); - }, []); + updateContext({ value }); + }, [updateContext]); const onChangeEditor = useCallback((editor) => { setEditor(editor); - updateContext(); - }, []); + updateContext({ editor }); + }, [updateContext]); const onResetButtonClick = useCallback(() => { + setValue(contextValue); + setEditor(contextEditor); reset(); - }, [reset]); + }, [contextValue, contextEditor, reset]); const { _id, diff --git a/client/components/admin/settings/Setting.stories.js b/client/components/admin/settings/Setting.stories.js index f6c2ef92934a8..63dbb3dd91bc5 100644 --- a/client/components/admin/settings/Setting.stories.js +++ b/client/components/admin/settings/Setting.stories.js @@ -1,3 +1,4 @@ +import { Field, FieldGroup } from '@rocket.chat/fuselage'; import React from 'react'; import { Setting } from './Setting'; @@ -7,7 +8,13 @@ export default { title: 'admin/settings/Setting', component: Setting, decorators: [ - (storyFn) => {storyFn()}, + (storyFn) => +
    +
    + {storyFn()} +
    +
    +     , ], }; @@ -26,5 +33,65 @@ export const withCallout = () => callout='Callout text' />; +export const types = () => + + + + + + + + + + + + + ; + export const skeleton = () => ; diff --git a/package-lock.json b/package-lock.json index e6db458c8cfda..07b5befa0f4ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19039,6 +19039,18 @@ "hoek": "2.x.x", "joi": "6.x.x", "wreck": "5.x.x" + }, + "dependencies": { + "wreck": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/wreck/-/wreck-5.6.1.tgz", + "integrity": "sha1-r/ADBAATiJ11YZtccYcN0qjdBpo=", + "dev": true, + "requires": { + "boom": "2.x.x", + "hoek": "2.x.x" + } + } } }, "heavy": { @@ -19050,6 +19062,20 @@ "boom": "2.x.x", "hoek": "2.x.x", "joi": "5.x.x" + }, + "dependencies": { + "joi": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/joi/-/joi-5.1.0.tgz", + "integrity": "sha1-FSrQfbjunGQBmX/1/SwSiWBwv1g=", + "dev": true, + "requires": { + "hoek": "^2.2.x", + "isemail": "1.x.x", + "moment": "2.x.x", + "topo": "1.x.x" + } + } } }, "hoek": { From 39551b9cd720af69e4eea3f8b54c49634577e316 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 7 Jan 2020 18:09:49 -0300 Subject: [PATCH 05/14] Optimize prop passing --- client/components/admin/settings/GroupPage.js | 24 ++++++++++--------- .../admin/settings/GroupPage.stories.js | 16 +++++++------ .../admin/settings/GroupSelector.js | 22 +++++++++-------- client/components/admin/settings/Section.js | 6 +++-- .../admin/settings/groups/AssetsGroupPage.js | 10 ++++---- .../admin/settings/groups/GenericGroupPage.js | 10 ++++---- .../admin/settings/groups/OAuthGroupPage.js | 12 +++++----- 7 files changed, 54 insertions(+), 46 deletions(-) diff --git a/client/components/admin/settings/GroupPage.js b/client/components/admin/settings/GroupPage.js index f8cbc00cf967b..b12e770f30a67 100644 --- a/client/components/admin/settings/GroupPage.js +++ b/client/components/admin/settings/GroupPage.js @@ -12,25 +12,25 @@ const Wrapper = styled.div` max-width: 590px; `; -export function GroupPage({ children, group, headerButtons }) { +export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) { const t = useTranslation(); const handleSubmit = (event) => { event.preventDefault(); - group.save(); + save(); }; const handleCancelClick = (event) => { event.preventDefault(); - group.cancel(); + cancel(); }; const handleSaveClick = (event) => { event.preventDefault(); - group.save(); + save(); }; - if (!group) { + if (!_id) { return
    @@ -38,13 +38,13 @@ export function GroupPage({ children, group, headerButtons }) { } return
    -
    +
    - {group.changed && } + {changed && }
    ; -}; +} + +GroupPage.Skeleton = GroupPageSkeleton; diff --git a/client/components/admin/settings/GroupPage.stories.js b/client/components/admin/settings/GroupPage.stories.js index 1db9b4cb1e6a4..1b1fa4a7093a7 100644 --- a/client/components/admin/settings/GroupPage.stories.js +++ b/client/components/admin/settings/GroupPage.stories.js @@ -7,18 +7,20 @@ export default { title: 'admin/settings/GroupPage', component: GroupPage, decorators: [ - (storyFn) => {storyFn()}, + (storyFn) => + {storyFn()} + , ], }; -export const _default = () => ; +export const _default = () => + ; export const withGroup = () => ; -export const skeleton = () => ; +export const skeleton = () => + ; diff --git a/client/components/admin/settings/GroupSelector.js b/client/components/admin/settings/GroupSelector.js index a07d54709e640..6cbd557b740ed 100644 --- a/client/components/admin/settings/GroupSelector.js +++ b/client/components/admin/settings/GroupSelector.js @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React from 'react'; import { AssetsGroupPage } from './groups/AssetsGroupPage'; import { OAuthGroupPage } from './groups/OAuthGroupPage'; @@ -9,15 +9,17 @@ import { useGroup } from './SettingsState'; export function GroupSelector({ groupId }) { const group = useGroup(groupId); - const children = useMemo(() => { - if (!group) { - return ; - } + if (!group) { + return ; + } - return (group._id === 'Assets' && ) - || (group._id === 'OAuth' && ) - || ; - }, [group]); + if (groupId === 'Assets') { + return ; + } - return children; + if (groupId === 'OAuth') { + return ; + } + + return ; } diff --git a/client/components/admin/settings/Section.js b/client/components/admin/settings/Section.js index f747bf682ac35..bf05f3b385719 100644 --- a/client/components/admin/settings/Section.js +++ b/client/components/admin/settings/Section.js @@ -38,7 +38,7 @@ export function Section({ children, groupId, hasReset = true, help, sectionName, ; } -Section.Skeleton = function SectionSkeleton() { +export function SectionSkeleton() { return } @@ -51,4 +51,6 @@ Section.Skeleton = function SectionSkeleton() { {Array.from({ length: 10 }).map((_, i) => )} ; -}; +} + +Section.Skeleton = SectionSkeleton; diff --git a/client/components/admin/settings/groups/AssetsGroupPage.js b/client/components/admin/settings/groups/AssetsGroupPage.js index d2de2408a0782..7405b9301b059 100644 --- a/client/components/admin/settings/groups/AssetsGroupPage.js +++ b/client/components/admin/settings/groups/AssetsGroupPage.js @@ -7,8 +7,8 @@ import { useTranslation } from '../../../../contexts/TranslationContext'; import { GroupPage } from '../GroupPage'; import { Section } from '../Section'; -export function AssetsGroupPage({ group }) { - const solo = group.sections.length === 1; +export function AssetsGroupPage({ _id, sections, ...group }) { + const solo = sections.length === 1; const t = useTranslation(); const refreshClients = useMethod('refreshClients'); @@ -23,12 +23,12 @@ export function AssetsGroupPage({ group }) { } }; - return + return }> - {group.sections.map((sectionName) =>
    - {group.sections.map((sectionName) =>
    + {sections.map((sectionName) =>
    )} diff --git a/client/components/admin/settings/groups/OAuthGroupPage.js b/client/components/admin/settings/groups/OAuthGroupPage.js index 5cd993a9a7faf..d64e9a296f254 100644 --- a/client/components/admin/settings/groups/OAuthGroupPage.js +++ b/client/components/admin/settings/groups/OAuthGroupPage.js @@ -10,8 +10,8 @@ import { useModal } from '../../../../hooks/useModal'; import { GroupPage } from '../GroupPage'; import { Section } from '../Section'; -export function OAuthGroupPage({ group }) { - const solo = group.sections.length === 1; +export function OAuthGroupPage({ _id, sections, ...group }) { + const solo = sections.length === 1; const t = useTranslation(); const sectionIsCustomOAuth = (sectionName) => sectionName && /^Custom OAuth:\s.+/.test(sectionName); @@ -63,11 +63,11 @@ export function OAuthGroupPage({ group }) { }); }; - return + return }> - {group.sections.map((sectionName) => { + {sections.map((sectionName) => { if (sectionIsCustomOAuth(sectionName)) { const id = s.strRight(sectionName, 'Custom OAuth: ').toLowerCase(); @@ -91,7 +91,7 @@ export function OAuthGroupPage({ group }) { return
    {t('Custom_oauth_helper', callbackURL(sectionName))}} sectionName={sectionName} solo={solo} @@ -102,7 +102,7 @@ export function OAuthGroupPage({ group }) {
    ; } - return
    ; + return
    ; })} ; } From 7c444a68019b392fabe647c668a828a065745049 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Tue, 7 Jan 2020 19:05:07 -0300 Subject: [PATCH 06/14] Split some hooks --- client/components/admin/settings/Setting.js | 11 ++--- .../admin/settings/SettingsState.js | 47 +++++++++++-------- 2 files changed, 31 insertions(+), 27 deletions(-) diff --git a/client/components/admin/settings/Setting.js b/client/components/admin/settings/Setting.js index 53df874e3ea5f..612daff12b0f2 100644 --- a/client/components/admin/settings/Setting.js +++ b/client/components/admin/settings/Setting.js @@ -1,5 +1,4 @@ import { Callout, Field, Flex, InputBox, Margins, Skeleton } from '@rocket.chat/fuselage'; -import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; import React, { memo, useEffect, useMemo, useState, useCallback } from 'react'; import { MarkdownText } from '../../basic/MarkdownText'; @@ -84,17 +83,15 @@ export function Setting({ settingId }) { setEditor(contextEditor); }, [contextEditor]); - const updateContext = useDebouncedCallback((props) => update(props), 70, [update]); - const onChangeValue = useCallback((value) => { setValue(value); - updateContext({ value }); - }, [updateContext]); + update({ value }); + }, [update]); const onChangeEditor = useCallback((editor) => { setEditor(editor); - updateContext({ editor }); - }, [updateContext]); + update({ editor }); + }, [update]); const onResetButtonClick = useCallback(() => { setValue(contextValue); diff --git a/client/components/admin/settings/SettingsState.js b/client/components/admin/settings/SettingsState.js index 11701023af144..a92495c3f070a 100644 --- a/client/components/admin/settings/SettingsState.js +++ b/client/components/admin/settings/SettingsState.js @@ -1,3 +1,4 @@ +import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks'; import { Mongo } from 'meteor/mongo'; import { Tracker } from 'meteor/tracker'; import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react'; @@ -346,31 +347,22 @@ export const useSection = (groupId, sectionName) => { }; }; -export const useSetting = (_id) => { - const { stateRef, hydrate, isDisabled } = useContext(SettingsContext); - - const selectSetting = (settings) => settings.find((setting) => setting._id === _id); - - const setting = useSelector((state) => selectSetting(state.settings)); - const sectionChanged = useSelector((state) => state.settings.some(({ section, changed }) => section === setting.section && changed)); - const disabled = useReactiveValue(() => isDisabled(setting), [setting.blocked, setting.enableQuery]); - - const update = useEventCallback((selectSetting, { current: state }, hydrate, data) => { - const setting = { ...selectSetting(state.settings), ...data }; - const persistedSetting = selectSetting(state.persistedSettings); +export const usePersistedSettingActions = (persistedSetting) => { + const { hydrate } = useContext(SettingsContext); + const update = useDebouncedCallback(({ value = persistedSetting.value, editor = persistedSetting.editor }) => { const changes = [{ - _id: setting._id, - value: setting.value, - editor: setting.editor, - changed: (setting.value !== persistedSetting.value) || (setting.editor !== persistedSetting.editor), + _id: persistedSetting._id, + value, + editor, + changed: (value !== persistedSetting.value) || (editor !== persistedSetting.editor), }]; hydrate(changes); - }, selectSetting, stateRef, hydrate); + }, 70, [persistedSetting]); - const reset = useEventCallback((selectSetting, { current: state }, hydrate) => { - const { _id, value, packageValue, editor } = selectSetting(state.persistedSettings); + const reset = useDebouncedCallback(() => { + const { _id, value, packageValue, editor } = persistedSetting; const changes = [{ _id, @@ -380,7 +372,22 @@ export const useSetting = (_id) => { }]; hydrate(changes); - }, selectSetting, stateRef, hydrate); + }, 70, [persistedSetting]); + + return { update, reset }; +}; + +export const useSetting = (_id) => { + const { isDisabled } = useContext(SettingsContext); + + const selectSetting = (settings) => settings.find((setting) => setting._id === _id); + + const setting = useSelector((state) => selectSetting(state.settings)); + const persistedSetting = useSelector((state) => selectSetting(state.persistedSettings)); + const sectionChanged = useSelector((state) => state.settings.some(({ section, changed }) => section === setting.section && changed)); + const disabled = useReactiveValue(() => isDisabled(setting), [setting.blocked, setting.enableQuery]); + + const { update, reset } = usePersistedSettingActions(persistedSetting); return { ...setting, From ac0a3876489a74e2f9a7a55c19b92993c3be73df Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 8 Jan 2020 14:05:41 -0300 Subject: [PATCH 07/14] Pass section changed state through props --- client/components/admin/settings/Section.js | 6 +++-- client/components/admin/settings/Setting.js | 3 ++- .../admin/settings/SettingsState.js | 24 +++++++++++-------- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/client/components/admin/settings/Section.js b/client/components/admin/settings/Section.js index bf05f3b385719..68a8ef5cc88a5 100644 --- a/client/components/admin/settings/Section.js +++ b/client/components/admin/settings/Section.js @@ -3,10 +3,12 @@ import React from 'react'; import { useTranslation } from '../../../contexts/TranslationContext'; import { Setting } from './Setting'; -import { useSection } from './SettingsState'; +import { useSection, useSectionChangedState } from './SettingsState'; export function Section({ children, groupId, hasReset = true, help, sectionName, solo }) { const section = useSection(groupId, sectionName); + const changed = useSectionChangedState(groupId, sectionName); + const t = useTranslation(); const handleResetSectionClick = () => { @@ -23,7 +25,7 @@ export function Section({ children, groupId, hasReset = true, help, sectionName, } - {section.settings.map((settingId) => )} + {section.settings.map((settingId) => )} {hasReset && section.canReset && - } -
    + } + -
    + {alertOplogForMultipleInstances && @@ -58,6 +58,6 @@ export function InformationPage({ {canViewStatistics && } -
    -
    ; + + ; } diff --git a/client/components/admin/settings/GroupPage.js b/client/components/admin/settings/GroupPage.js index b12e770f30a67..dda4c13abad5e 100644 --- a/client/components/admin/settings/GroupPage.js +++ b/client/components/admin/settings/GroupPage.js @@ -1,16 +1,9 @@ -import { Accordion, Button, Paragraph, Skeleton } from '@rocket.chat/fuselage'; -import React from 'react'; -import styled from 'styled-components'; +import { Accordion, Box, Button, ButtonGroup, Paragraph, Skeleton } from '@rocket.chat/fuselage'; +import React, { useMemo } from 'react'; -import { Header } from '../../header/Header'; import { useTranslation } from '../../../contexts/TranslationContext'; import { Section } from './Section'; - -const Wrapper = styled.div` - margin: 0 auto; - width: 100%; - max-width: 590px; -`; +import { Page } from '../../basic/Page'; export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabel, i18nDescription, changed }) { const t = useTranslation(); @@ -31,15 +24,15 @@ export function GroupPage({ children, headerButtons, save, cancel, _id, i18nLabe }; if (!_id) { - return
    -
    -
    -
    ; + return + + + ; } - return
    -
    - + return + + {changed && }
    + + -
    - + + ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}> {t.has(i18nDescription) && {t(i18nDescription)}} {children} - -
    -
    ; + + + ; } export function GroupPageSkeleton() { const t = useTranslation(); - return
    -
    }> - + return + }> +
    + + -
    - + + ({ margin: '0 auto', width: '100%', maxWidth: '590px' }), [])}> - -
    -
    ; + + + ; } GroupPage.Skeleton = GroupPageSkeleton; diff --git a/client/components/admin/settings/NotAuthorizedPage.js b/client/components/admin/settings/NotAuthorizedPage.js index 4cfea29a85207..cf62068ed5551 100644 --- a/client/components/admin/settings/NotAuthorizedPage.js +++ b/client/components/admin/settings/NotAuthorizedPage.js @@ -1,13 +1,15 @@ +import { Paragraph } from '@rocket.chat/fuselage'; import React from 'react'; import { useTranslation } from '../../../contexts/TranslationContext'; +import { Page } from '../../basic/Page'; export function NotAuthorizedPage() { const t = useTranslation(); - return
    -
    -

    {t('You_are_not_authorized_to_view_this_page')}

    -
    -
    ; + return + + {t('You_are_not_authorized_to_view_this_page')} + + ; } diff --git a/client/components/admin/settings/Setting.stories.js b/client/components/admin/settings/Setting.stories.js index 63dbb3dd91bc5..5b92b613ca32a 100644 --- a/client/components/admin/settings/Setting.stories.js +++ b/client/components/admin/settings/Setting.stories.js @@ -1,4 +1,4 @@ -import { Field, FieldGroup } from '@rocket.chat/fuselage'; +import { FieldGroup } from '@rocket.chat/fuselage'; import React from 'react'; import { Setting } from './Setting'; diff --git a/client/components/header/BurgerMenuButton.css b/client/components/basic/BurgerMenuButton.css similarity index 100% rename from client/components/header/BurgerMenuButton.css rename to client/components/basic/BurgerMenuButton.css diff --git a/client/components/header/BurgerMenuButton.js b/client/components/basic/BurgerMenuButton.js similarity index 100% rename from client/components/header/BurgerMenuButton.js rename to client/components/basic/BurgerMenuButton.js diff --git a/client/components/header/BurgerMenuButton.stories.js b/client/components/basic/BurgerMenuButton.stories.js similarity index 100% rename from client/components/header/BurgerMenuButton.stories.js rename to client/components/basic/BurgerMenuButton.stories.js diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js new file mode 100644 index 0000000000000..edfb477ecdfe5 --- /dev/null +++ b/client/components/basic/Page.js @@ -0,0 +1,35 @@ +import { Box, Flex, Margins, Scrollable } from '@rocket.chat/fuselage'; +import React, { useMemo } from 'react'; + +import { BurgerMenuButton } from './BurgerMenuButton'; + +export function Page(props) { + return + ({ height: '100vh' }), [])} {...props} /> + ; +} + +export function PageHeader({ children, title, ...props }) { + return + + + + + + + {title} + + {children} + + + ; +} + +export function PageContent(props) { + return + ({ padding: '1rem' }), [])} {...props} /> + ; +} + +Page.Header = PageHeader; +Page.Content = PageContent; diff --git a/client/components/basic/Page.stories.js b/client/components/basic/Page.stories.js new file mode 100644 index 0000000000000..d161832540349 --- /dev/null +++ b/client/components/basic/Page.stories.js @@ -0,0 +1,36 @@ +import { Button, ButtonGroup, Margins, Tile } from '@rocket.chat/fuselage'; +import React from 'react'; + +import { Page } from './Page'; + +export default { + title: 'basic/Page', + component: Page, + decorators: [ + (fn) =>
    {fn()}
    , + ], +}; + +export const _default = () => + + + + + {Array.from({ length: 60 }, (_, i) => )} + + + ; + +export const withButtonsAtTheHeader = () => + + + + + + + + + {Array.from({ length: 60 }, (_, i) => )} + + + ; diff --git a/client/components/header/Header.js b/client/components/header/Header.js deleted file mode 100644 index 93d9b76eb644b..0000000000000 --- a/client/components/header/Header.js +++ /dev/null @@ -1,35 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import React from 'react'; - -import { useTranslation } from '../../contexts/TranslationContext'; -import { BurgerMenuButton } from './BurgerMenuButton'; - -export function Header({ - children, - hideHelp, - rawSectionName, - sectionName, -}) { - const t = useTranslation(); - return
    -
    -
    - -
    - - - - {rawSectionName || t(sectionName)} - - - - {children} - - {!hideHelp &&
    } -
    -
    ; -} - -Header.ActionBlock = (props) =>
    ; - -Header.ButtonSection = (props) =>
    ; diff --git a/client/components/header/Header.stories.js b/client/components/header/Header.stories.js deleted file mode 100644 index 68142c7c47bb0..0000000000000 --- a/client/components/header/Header.stories.js +++ /dev/null @@ -1,32 +0,0 @@ -import { boolean, text } from '@storybook/addon-knobs/react'; -import React from 'react'; - -import { Button } from '../basic/Button'; -import { Header } from './Header'; - -export default { - title: 'header/Header', - component: Header, -}; - -export const _default = () => -
    ; - -export const withRawSectionName = () => -
    ; - -export const withSectionName = () => -
    ; - -export const withButton = () => -
    - - - -
    ; From 2f4b163a552e03ad04dfb547420326959563a4e8 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 8 Jan 2020 16:55:25 -0300 Subject: [PATCH 09/14] Move story --- .../basic/BurgerMenuButton.stories.js | 2 +- package-lock.json | 26 ------------------- 2 files changed, 1 insertion(+), 27 deletions(-) diff --git a/client/components/basic/BurgerMenuButton.stories.js b/client/components/basic/BurgerMenuButton.stories.js index d34738ab17983..d143ba49050e7 100644 --- a/client/components/basic/BurgerMenuButton.stories.js +++ b/client/components/basic/BurgerMenuButton.stories.js @@ -7,7 +7,7 @@ import { SidebarContext } from '../../contexts/SidebarContext'; import { SessionContext } from '../../contexts/SessionContext'; export default { - title: 'header/BurgerMenuButton', + title: 'basic/BurgerMenuButton', component: BurgerMenuButton, decorators: [(fn) =>
    {fn()}
    ], parameters: { diff --git a/package-lock.json b/package-lock.json index 07b5befa0f4ff..e6db458c8cfda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19039,18 +19039,6 @@ "hoek": "2.x.x", "joi": "6.x.x", "wreck": "5.x.x" - }, - "dependencies": { - "wreck": { - "version": "5.6.1", - "resolved": "https://registry.npmjs.org/wreck/-/wreck-5.6.1.tgz", - "integrity": "sha1-r/ADBAATiJ11YZtccYcN0qjdBpo=", - "dev": true, - "requires": { - "boom": "2.x.x", - "hoek": "2.x.x" - } - } } }, "heavy": { @@ -19062,20 +19050,6 @@ "boom": "2.x.x", "hoek": "2.x.x", "joi": "5.x.x" - }, - "dependencies": { - "joi": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/joi/-/joi-5.1.0.tgz", - "integrity": "sha1-FSrQfbjunGQBmX/1/SwSiWBwv1g=", - "dev": true, - "requires": { - "hoek": "^2.2.x", - "isemail": "1.x.x", - "moment": "2.x.x", - "topo": "1.x.x" - } - } } }, "hoek": { From 9caa5c484f3176e46144d9060ed442cda1e989de Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 8 Jan 2020 17:44:10 -0300 Subject: [PATCH 10/14] Update Setup Wizard components --- .../steps/AdminUserInformationStep.js | 83 +++++++++-------- .../components/setupWizard/steps/FinalStep.js | 2 +- .../setupWizard/steps/RegisterServerStep.js | 76 +++++++++------ .../setupWizard/steps/SettingsBasedStep.js | 92 ++++++++++--------- 4 files changed, 144 insertions(+), 109 deletions(-) diff --git a/client/components/setupWizard/steps/AdminUserInformationStep.js b/client/components/setupWizard/steps/AdminUserInformationStep.js index ef5a816ac9765..c7cbab2160ba3 100644 --- a/client/components/setupWizard/steps/AdminUserInformationStep.js +++ b/client/components/setupWizard/steps/AdminUserInformationStep.js @@ -3,7 +3,6 @@ import { Field, FieldGroup, Icon, - Label, Margins, PasswordInput, TextInput, @@ -128,51 +127,59 @@ export function AdminUserInformationStep({ step, title, active }) { - - - - diff --git a/client/components/setupWizard/steps/FinalStep.js b/client/components/setupWizard/steps/FinalStep.js index 061b8d614498a..92c921e3fa47f 100644 --- a/client/components/setupWizard/steps/FinalStep.js +++ b/client/components/setupWizard/steps/FinalStep.js @@ -15,7 +15,7 @@ export function FinalStep() { }; return - + diff --git a/client/components/setupWizard/steps/RegisterServerStep.js b/client/components/setupWizard/steps/RegisterServerStep.js index 5d52da495a986..770c6aeca44b1 100644 --- a/client/components/setupWizard/steps/RegisterServerStep.js +++ b/client/components/setupWizard/steps/RegisterServerStep.js @@ -1,11 +1,11 @@ import { Box, CheckBox, - Label, + Field, Margins, RadioButton, } from '@rocket.chat/fuselage'; -import { useMergedRefs } from '@rocket.chat/fuselage-hooks'; +import { useMergedRefs, useUniqueId } from '@rocket.chat/fuselage-hooks'; import React, { useRef, useState } from 'react'; import { useMethod } from '../../../contexts/ServerContext'; @@ -23,6 +23,7 @@ import './RegisterServerStep.css'; const Option = React.forwardRef(({ children, label, selected, disabled, ...props }, ref) => { const innerRef = useRef(); const mergedRef = useMergedRefs(ref, innerRef); + const id = useUniqueId(); return - + + + + {label} + + {children} ; }); @@ -117,6 +121,9 @@ export function RegisterServerStep({ step, title, active }) { const autoFocusRef = useFocus(active); + const agreeTermsAndPrivacyId = useUniqueId(); + const optInMarketingEmailsId = useUniqueId(); + return @@ -143,17 +150,24 @@ export function RegisterServerStep({ step, title, active }) { {t('Register_Server_Registered_OAuth')} {t('Register_Server_Registered_Marketplace')} - + + + { + setOptInMarketingEmails(checked); + }} + /> + {t('Register_Server_Opt_In')} + + + + + - + + + + { + setAgreeTermsAndPrivacy(checked); + }} + /> + + {t('Register_Server_Registered_I_Agree')} {t('Terms')} & {t('Privacy_Policy')} + + + +
    diff --git a/client/components/setupWizard/steps/SettingsBasedStep.js b/client/components/setupWizard/steps/SettingsBasedStep.js index 6a3ad4d302820..f3e8d46bc4ba4 100644 --- a/client/components/setupWizard/steps/SettingsBasedStep.js +++ b/client/components/setupWizard/steps/SettingsBasedStep.js @@ -1,8 +1,8 @@ import { Field, FieldGroup, + Flex, InputBox, - Label, Margins, SelectInput, Skeleton, @@ -93,7 +93,11 @@ export function SettingsBasedStep({ step, title, active }) { {Array.from({ length: 5 }, (_, i) => - )} @@ -108,47 +112,49 @@ export function SettingsBasedStep({ step, title, active }) { {fields.map(({ _id, type, i18nLabel, value, values }, i) => - , )} From a4e65f1839d16a3673cc0e47eff6f99d6486c517 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Mon, 13 Jan 2020 17:28:34 -0300 Subject: [PATCH 11/14] Update Fuselage --- client/components/admin/info/InformationPage.js | 2 +- client/components/admin/settings/Setting.js | 2 +- .../admin/settings/inputs/ColorSettingInput.js | 7 +++---- client/components/basic/Page.js | 4 ++-- client/components/basic/Page.stories.js | 4 ++-- client/components/pageNotFound/PageNotFound.js | 4 ++-- client/components/setupWizard/SetupWizardPage.js | 2 +- client/components/setupWizard/SideBar.js | 2 +- .../steps/AdminUserInformationStep.js | 2 +- client/components/setupWizard/steps/FinalStep.js | 4 ++-- .../setupWizard/steps/RegisterServerStep.js | 4 ++-- .../setupWizard/steps/SettingsBasedStep.js | 8 ++++---- package-lock.json | 16 ++++++++-------- package.json | 2 +- 14 files changed, 31 insertions(+), 32 deletions(-) diff --git a/client/components/admin/info/InformationPage.js b/client/components/admin/info/InformationPage.js index f11adba19edb0..e2ca645e85379 100644 --- a/client/components/admin/info/InformationPage.js +++ b/client/components/admin/info/InformationPage.js @@ -39,7 +39,7 @@ export function InformationPage({ {alertOplogForMultipleInstances - && + &&

    {t('Error_RocketChat_requires_oplog_tailing_when_running_in_multiple_instances_details')} diff --git a/client/components/admin/settings/Setting.js b/client/components/admin/settings/Setting.js index 619016fe1dfc2..b5564aace18db 100644 --- a/client/components/admin/settings/Setting.js +++ b/client/components/admin/settings/Setting.js @@ -55,7 +55,7 @@ export const MemoizedSetting = memo(function MemoizedSetting({ {...inputProps} /> {hint && {hint}} - {callout && + {callout && {callout} } ; diff --git a/client/components/admin/settings/inputs/ColorSettingInput.js b/client/components/admin/settings/inputs/ColorSettingInput.js index 5a7e7ab44cabf..cb8fe5f70431b 100644 --- a/client/components/admin/settings/inputs/ColorSettingInput.js +++ b/client/components/admin/settings/inputs/ColorSettingInput.js @@ -4,7 +4,6 @@ import { Flex, InputBox, Margins, - MarginsWrapper, SelectInput, TextInput, } from '@rocket.chat/fuselage'; @@ -46,9 +45,9 @@ export function ColorSettingInput({ {hasResetButton && } - + - + {editor === 'color' && - + Variable name: {_id.replace(/theme-color-/, '@')} ; } diff --git a/client/components/basic/Page.js b/client/components/basic/Page.js index edfb477ecdfe5..ddf01872c4022 100644 --- a/client/components/basic/Page.js +++ b/client/components/basic/Page.js @@ -10,10 +10,10 @@ export function Page(props) { } export function PageHeader({ children, title, ...props }) { - return + return - + diff --git a/client/components/basic/Page.stories.js b/client/components/basic/Page.stories.js index d161832540349..549fc272d1d2f 100644 --- a/client/components/basic/Page.stories.js +++ b/client/components/basic/Page.stories.js @@ -15,7 +15,7 @@ export const _default = () => - + {Array.from({ length: 60 }, (_, i) => )} @@ -29,7 +29,7 @@ export const withButtonsAtTheHeader = () => - + {Array.from({ length: 60 }, (_, i) => )} diff --git a/client/components/pageNotFound/PageNotFound.js b/client/components/pageNotFound/PageNotFound.js index 04a1a558f980d..bd7b2f9487513 100644 --- a/client/components/pageNotFound/PageNotFound.js +++ b/client/components/pageNotFound/PageNotFound.js @@ -27,7 +27,7 @@ export function PageNotFound() { - + 404 @@ -39,7 +39,7 @@ export function PageNotFound() { - + diff --git a/client/components/setupWizard/SetupWizardPage.js b/client/components/setupWizard/SetupWizardPage.js index 24faf8ff97b64..455ea3455df09 100644 --- a/client/components/setupWizard/SetupWizardPage.js +++ b/client/components/setupWizard/SetupWizardPage.js @@ -45,7 +45,7 @@ export function SetupWizardPage({ currentStep = 1 }) { /> - + diff --git a/client/components/setupWizard/SideBar.js b/client/components/setupWizard/SideBar.js index 88ab4141abbb9..eafda8739506e 100644 --- a/client/components/setupWizard/SideBar.js +++ b/client/components/setupWizard/SideBar.js @@ -21,7 +21,7 @@ export function SideBar({ {t('Setup_Wizard')} - + {t('Setup_Wizard_Info')} diff --git a/client/components/setupWizard/steps/AdminUserInformationStep.js b/client/components/setupWizard/steps/AdminUserInformationStep.js index c7cbab2160ba3..6e359c32a6212 100644 --- a/client/components/setupWizard/steps/AdminUserInformationStep.js +++ b/client/components/setupWizard/steps/AdminUserInformationStep.js @@ -124,7 +124,7 @@ export function AdminUserInformationStep({ step, title, active }) { return - + {t('Name')} diff --git a/client/components/setupWizard/steps/FinalStep.js b/client/components/setupWizard/steps/FinalStep.js index 92c921e3fa47f..c56e786e3a196 100644 --- a/client/components/setupWizard/steps/FinalStep.js +++ b/client/components/setupWizard/steps/FinalStep.js @@ -16,12 +16,12 @@ export function FinalStep() { return - + {t('Launched_successfully')} - + {t('Your_workspace_is_ready')} {t('Your_server_link')} diff --git a/client/components/setupWizard/steps/RegisterServerStep.js b/client/components/setupWizard/steps/RegisterServerStep.js index 770c6aeca44b1..46cccdf4c563a 100644 --- a/client/components/setupWizard/steps/RegisterServerStep.js +++ b/client/components/setupWizard/steps/RegisterServerStep.js @@ -127,7 +127,7 @@ export function RegisterServerStep({ step, title, active }) { return - +

    {t('Register_Server_Info')}

    @@ -189,7 +189,7 @@ export function RegisterServerStep({ step, title, active }) { - + - + {Array.from({ length: 5 }, (_, i) => @@ -108,7 +108,7 @@ export function SettingsBasedStep({ step, title, active }) { return - + {fields.map(({ _id, type, i18nLabel, value, values }, i) => @@ -151,8 +151,8 @@ export function SettingsBasedStep({ step, title, active }) { > {Object.entries(languages) .map(([key, { name }]) => ({ label: name, value: key })) - .sort((a, b) => a.key - b.key) - .map(({ label, value }) => {label})} + .sort((a, b) => a.value - b.value) + .map(({ label, value }) => {label})} } , diff --git a/package-lock.json b/package-lock.json index e6db458c8cfda..332008d417c4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2674,12 +2674,12 @@ } }, "@rocket.chat/fuselage": { - "version": "0.2.0-dev.71", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.2.0-dev.71.tgz", - "integrity": "sha512-jkRGwyFD2F99USdeTanDoTOD2V61KlRBofG0Y3qOCrp3k5URgvbKLJykvq3JcQTy2jdHxTIgM3i2++FAmAF+Ww==", + "version": "0.2.0-alpha.19", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage/-/fuselage-0.2.0-alpha.19.tgz", + "integrity": "sha512-E1B9IiorcJADK2kX8SA2Sta1cbojqEKAPlH3Pue5tfZuQUNE0q//CbP90IHnvyrmY4uvYZLEkv0Fhq5PqIRwNQ==", "requires": { - "@rocket.chat/fuselage-tokens": "^0.2.0-dev.71+5a9aa82", - "@rocket.chat/icons": "^0.2.0-alpha.18" + "@rocket.chat/fuselage-tokens": "^0.2.0-alpha.19", + "@rocket.chat/icons": "^0.2.0-alpha.19" } }, "@rocket.chat/fuselage-hooks": { @@ -2688,9 +2688,9 @@ "integrity": "sha512-58SuGnso0EvZlmSMjwm6Mhuv27VYdGtPV4RfU7MKtPLzgfzW5VFxLdHBCfiHLIvMlu4hQKEKsfk544Eob5ztag==" }, "@rocket.chat/fuselage-tokens": { - "version": "0.2.0-dev.71", - "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.2.0-dev.71.tgz", - "integrity": "sha512-Cjr96LWpwSRQ9ci5SupR+480QXPRg2RDRPxqK5qnxxwQXd1nHqd1zdtWpfVE8ozFSzgRqTHtz75mLDo7wLHv9w==" + "version": "0.2.0-alpha.19", + "resolved": "https://registry.npmjs.org/@rocket.chat/fuselage-tokens/-/fuselage-tokens-0.2.0-alpha.19.tgz", + "integrity": "sha512-N7T7c2Dqas9N7RZukUwYPuFsUt8GERk/4UeS9YR366sQXTNS0YpDtULvTZOEUP0LTmzuwMlYF237Vmh62XW9Kw==" }, "@rocket.chat/icons": { "version": "0.2.0-dev.49", diff --git a/package.json b/package.json index f422ffa411916..23f071b9278f6 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "@google-cloud/storage": "^2.3.1", "@google-cloud/vision": "^0.23.0", "@rocket.chat/apps-engine": "^1.11.0", - "@rocket.chat/fuselage": "^0.2.0-dev.71", + "@rocket.chat/fuselage": "^0.2.0-alpha.19", "@rocket.chat/fuselage-hooks": "^0.2.0-dev.50", "@rocket.chat/icons": "^0.2.0-dev.49", "@slack/client": "^4.8.0", From f69c62c1641ae061023f8b46235a30682d320d2b Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Mon, 13 Jan 2020 19:04:34 -0300 Subject: [PATCH 12/14] fix tests --- tests/end-to-end/ui/11-admin.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tests/end-to-end/ui/11-admin.js b/tests/end-to-end/ui/11-admin.js index 3ab04b3bc13f2..dac4b2797d2e1 100644 --- a/tests/end-to-end/ui/11-admin.js +++ b/tests/end-to-end/ui/11-admin.js @@ -555,6 +555,7 @@ describe('[Administration]', () => { }); it('it should show the force SSL toggle', () => { + admin.generalForceSSL.$('..').waitForVisible(5000); admin.generalForceSSL.$('..').isVisible().should.be.true; }); @@ -574,6 +575,7 @@ describe('[Administration]', () => { }); it('it should show google tag id field', () => { + admin.generalGoogleTagId.waitForVisible(5000); admin.generalGoogleTagId.isVisible().should.be.true; }); @@ -591,6 +593,7 @@ describe('[Administration]', () => { }); it.skip('it should show bugsnag key field', () => { + admin.generalBugsnagKey.waitForVisible(5000); admin.generalBugsnagKey.isVisible().should.be.true; }); From df4d77acffc495a02f1d7d0db15bde46326c4aa9 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Mon, 13 Jan 2020 23:33:53 -0300 Subject: [PATCH 13/14] ... --- tests/end-to-end/ui/11-admin.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tests/end-to-end/ui/11-admin.js b/tests/end-to-end/ui/11-admin.js index dac4b2797d2e1..2e22c73dd8a4c 100644 --- a/tests/end-to-end/ui/11-admin.js +++ b/tests/end-to-end/ui/11-admin.js @@ -555,6 +555,7 @@ describe('[Administration]', () => { }); it('it should show the force SSL toggle', () => { + admin.generalForceSSL.$('..').scroll(); admin.generalForceSSL.$('..').waitForVisible(5000); admin.generalForceSSL.$('..').isVisible().should.be.true; }); @@ -566,7 +567,7 @@ describe('[Administration]', () => { }); it('it should show the reset button', () => { - admin.generalForceSSLReset.waitForVisible(5000); + admin.generalForceSSLReset.$('..').scroll(); admin.generalForceSSLReset.isVisible().should.be.true; }); @@ -575,6 +576,7 @@ describe('[Administration]', () => { }); it('it should show google tag id field', () => { + admin.generalGoogleTagId.scroll(); admin.generalGoogleTagId.waitForVisible(5000); admin.generalGoogleTagId.isVisible().should.be.true; }); @@ -584,6 +586,7 @@ describe('[Administration]', () => { }); it('it should show the reset button', () => { + admin.generalGoogleTagIdReset.scroll(); admin.generalGoogleTagIdReset.waitForVisible(5000); admin.generalGoogleTagIdReset.isVisible().should.be.true; }); @@ -593,6 +596,7 @@ describe('[Administration]', () => { }); it.skip('it should show bugsnag key field', () => { + admin.generalGoogleTagIdReset.scroll(); admin.generalBugsnagKey.waitForVisible(5000); admin.generalBugsnagKey.isVisible().should.be.true; }); @@ -602,6 +606,7 @@ describe('[Administration]', () => { }); it.skip('it should show the reset button', () => { + admin.generalBugsnagKeyReset.scroll(); admin.generalBugsnagKeyReset.waitForVisible(5000); admin.generalBugsnagKeyReset.isVisible().should.be.true; }); From f88bfda246b816334a776ce1b3bebb27fab8ddd7 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 14 Jan 2020 01:11:15 -0300 Subject: [PATCH 14/14] sad --- tests/end-to-end/ui/11-admin.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/tests/end-to-end/ui/11-admin.js b/tests/end-to-end/ui/11-admin.js index 2e22c73dd8a4c..7ecf533b06bff 100644 --- a/tests/end-to-end/ui/11-admin.js +++ b/tests/end-to-end/ui/11-admin.js @@ -555,8 +555,8 @@ describe('[Administration]', () => { }); it('it should show the force SSL toggle', () => { - admin.generalForceSSL.$('..').scroll(); - admin.generalForceSSL.$('..').waitForVisible(5000); + browser.pause(500); + admin.generalForceSSL.moveToObject(); admin.generalForceSSL.$('..').isVisible().should.be.true; }); @@ -567,7 +567,8 @@ describe('[Administration]', () => { }); it('it should show the reset button', () => { - admin.generalForceSSLReset.$('..').scroll(); + browser.pause(500); + admin.generalForceSSLReset.moveToObject(); admin.generalForceSSLReset.isVisible().should.be.true; }); @@ -769,6 +770,7 @@ describe('[Administration]', () => { it('it should show the mobile notifications select field', () => { admin.accountsMobileNotifications.click(); admin.accountsMobileNotifications.isVisible().should.be.true; + admin.accountsMobileNotifications.click(); }); it('the mobile notifications field value should be all', () => { admin.accountsMobileNotifications.getValue().should.equal('all'); @@ -823,7 +825,7 @@ describe('[Administration]', () => { }); it('it should show the hide usernames field', () => { - admin.accountsHideUsernames.$('..').scroll(); + admin.accountsHideUsernames.scroll(); admin.accountsHideUsernames.$('..').isVisible().should.be.true; }); it('the hide usernames field value should be false', () => { @@ -831,24 +833,28 @@ describe('[Administration]', () => { }); it('it should show the hide roles field', () => { - admin.accountsHideRoles.$('..').scroll(); - admin.accountsHideRoles.$('..').isVisible().should.be.true; + admin.accountsHideRoles.moveToObject(); + admin.accountsHideRoles.waitForVisible(5000); + admin.accountsHideRoles.isVisible().should.be.true; }); + it('the hide roles field value should be false', () => { admin.accountsHideRoles.isSelected().should.be.false; }); it('it should show the hide right sidebar with click field', () => { - admin.accountsHideFlexTab.$('..').scroll(); - admin.accountsHideFlexTab.$('..').isVisible().should.be.true; + admin.accountsHideFlexTab.moveToObject(); + admin.accountsHideFlexTab.waitForVisible(5000); + admin.accountsHideFlexTab.isVisible().should.be.true; }); it('the hide right sidebar with click field value should be false', () => { admin.accountsHideFlexTab.isSelected().should.be.false; }); it('it should show the hide avatars field', () => { - admin.accountsHideAvatars.$('..').scroll(); - admin.accountsHideAvatars.$('..').isVisible().should.be.true; + admin.accountsHideAvatars.scroll(); + admin.accountsHideAvatars.waitForVisible(5000); + admin.accountsHideAvatars.isVisible().should.be.true; }); it('the hide avatars field value should be false', () => { admin.accountsHideAvatars.isSelected().should.be.false; @@ -865,6 +871,7 @@ describe('[Administration]', () => { it('it should show the messagebox view mode field', () => { admin.accountsMessageViewMode.moveToObject(); + admin.accountsMessageViewMode.waitForVisible(5000); admin.accountsMessageViewMode.click(); admin.accountsMessageViewMode.isVisible().should.be.true; });