diff --git a/package-lock.json b/package-lock.json index 28375ffb..c9627e99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,8 @@ "@fontsource/roboto": "^4.5.7", "@sentry/browser": "^6.17.7", "@tinymce/tinymce-react": "^3.13.0", - "@zextras/carbonio-design-system": "^0.3.10", - "@zextras/carbonio-ui-preview": "^0.1.5", + "@zextras/carbonio-design-system": "^0.4.0", + "@zextras/carbonio-ui-preview": "^0.2.0", "darkreader": "4.9.46", "history": "^5.2.0", "i18next": "21.6.10", @@ -3910,9 +3910,9 @@ "license": "Apache-2.0" }, "node_modules/@zextras/carbonio-design-system": { - "version": "0.3.10", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.3.10.tgz", - "integrity": "sha512-/YRpUFWXdFu9t8ryPnRUTIi42WoiCchshEOZoahMaoyzQBKHfAmME0ejBFaImmYRR5gy1uTpxqAjQ09eQ2PEKg==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.4.0.tgz", + "integrity": "sha512-Q1Gq73mWVoIogQc5r+Nxa/cb0g1owjeShunFIg0mGzAsw0IAOn/KuUsgUS0sYPQzejgeLLNf3jN4pLN3n3x5ag==", "dependencies": { "@popperjs/core": "2.11.0", "darkreader": "4.9.44", @@ -3971,29 +3971,21 @@ } }, "node_modules/@zextras/carbonio-ui-preview": { - "version": "0.1.5", - "license": "AGPL-3.0-only", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-0.2.0.tgz", + "integrity": "sha512-icbywHFDap2ZAqAkEVtw7oay1Ju1oCZ5gzUpO57Bbnd+n0jXGs1/WKUgZi5nZ8shy04XHB9EB9l4VGpIjjj9DQ==", "dependencies": { - "core-js": "3.19.1", - "react-pdf": "^5.7.1" + "core-js": "^3.19.1", + "react-pdf": "^5.7.2" }, "peerDependencies": { - "@zextras/carbonio-design-system": "^0.3.0", + "@zextras/carbonio-design-system": "^0.4.0", "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2", "styled-components": "^5.3.3" } }, - "node_modules/@zextras/carbonio-ui-preview/node_modules/core-js": { - "version": "3.19.1", - "hasInstallScript": true, - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/@zextras/carbonio-ui-sdk": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-sdk/-/carbonio-ui-sdk-1.3.1.tgz", @@ -5663,7 +5655,6 @@ }, "node_modules/core-js": { "version": "3.20.3", - "dev": true, "hasInstallScript": true, "license": "MIT", "funding": { @@ -17664,9 +17655,9 @@ "version": "4.2.2" }, "@zextras/carbonio-design-system": { - "version": "0.3.10", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.3.10.tgz", - "integrity": "sha512-/YRpUFWXdFu9t8ryPnRUTIi42WoiCchshEOZoahMaoyzQBKHfAmME0ejBFaImmYRR5gy1uTpxqAjQ09eQ2PEKg==", + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.4.0.tgz", + "integrity": "sha512-Q1Gq73mWVoIogQc5r+Nxa/cb0g1owjeShunFIg0mGzAsw0IAOn/KuUsgUS0sYPQzejgeLLNf3jN4pLN3n3x5ag==", "requires": { "@popperjs/core": "2.11.0", "darkreader": "4.9.44", @@ -17713,15 +17704,12 @@ } }, "@zextras/carbonio-ui-preview": { - "version": "0.1.5", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-0.2.0.tgz", + "integrity": "sha512-icbywHFDap2ZAqAkEVtw7oay1Ju1oCZ5gzUpO57Bbnd+n0jXGs1/WKUgZi5nZ8shy04XHB9EB9l4VGpIjjj9DQ==", "requires": { - "core-js": "3.19.1", - "react-pdf": "^5.7.1" - }, - "dependencies": { - "core-js": { - "version": "3.19.1" - } + "core-js": "^3.19.1", + "react-pdf": "^5.7.2" } }, "@zextras/carbonio-ui-sdk": { @@ -18786,8 +18774,7 @@ } }, "core-js": { - "version": "3.20.3", - "dev": true + "version": "3.20.3" }, "core-js-compat": { "version": "3.20.3", diff --git a/package.json b/package.json index 5d4b544e..d3f6c49b 100644 --- a/package.json +++ b/package.json @@ -101,8 +101,8 @@ "@fontsource/roboto": "^4.5.7", "@sentry/browser": "^6.17.7", "@tinymce/tinymce-react": "^3.13.0", - "@zextras/carbonio-design-system": "^0.3.10", - "@zextras/carbonio-ui-preview": "^0.1.5", + "@zextras/carbonio-design-system": "^0.4.0", + "@zextras/carbonio-ui-preview": "^0.2.0", "darkreader": "4.9.46", "history": "^5.2.0", "i18next": "21.6.10", diff --git a/src/globals.d.ts b/src/globals.d.ts index e12ba280..ef1bd215 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -35,7 +35,7 @@ type cliSettingsNamespace = { */ declare const devUtils: devUtilsNamespace | undefined; declare const cliSettings: cliSettingsNamespace | undefined; -declare module '@zextras/carbonio-design-system'; +// declare module '@zextras/carbonio-design-system'; declare module 'tinymce'; declare module '*.svg'; declare module '*.mp3'; diff --git a/src/reporting/feedback.tsx b/src/reporting/feedback.tsx index 589a1be9..1690b768 100644 --- a/src/reporting/feedback.tsx +++ b/src/reporting/feedback.tsx @@ -15,12 +15,14 @@ import React, { } from 'react'; import { Text, - Button, + ButtonOld as Button, Select, Container, Row, Icon, - SnackbarManagerContext + SnackbarManagerContext, + ContainerProps, + SelectItem } from '@zextras/carbonio-design-system'; import { Severity, Event } from '@sentry/browser'; import { filter, find, map } from 'lodash'; @@ -51,7 +53,7 @@ const TextArea = styled.textarea<{ size?: string }>` const TextContainer = styled(Container)` text-align: justify; - align-items: left; + align-items: flex-start; width: 80%; `; @@ -74,17 +76,23 @@ const TAContainer = styled(Container)` } `; -const SubHeadingText = styled(Text)` +const SubHeadingText = styled(Text)<{ lineHeight?: string }>` border-radius: 2px 2px 0 0; line-height: 21px; font-size: 14px; font-weight: 300; margin-top: 10px; - line-height: ${(props): string => props.lineHeight}; + line-height: ${({ lineHeight }): string => lineHeight ?? 'normal'}; `; -const LabelContainer = styled(Container)` - border-bottom: 1px solid ${(props): string => (props.disabled ? 'red' : '#cfd5dc')}; +interface LabelContainerProps extends ContainerProps { + disabled: boolean; +} + +const LabelContainer = styled(Container)` + border-bottom: 1px solid + ${({ theme, disabled }): string => + disabled ? theme.palette.error.regular : theme.palette.gray2.regular}; `; const emptyEvent: Event = { @@ -128,10 +136,11 @@ const getTopics = (t: TFunction): Array<{ label: string; value: string }> => [ const ModuleLabelFactory: FC<{ selected: Array<{ label: string; value: string }>; - label: string; + label?: string; open: boolean; focus: boolean; -}> = ({ selected, label, open, focus }) => ( + disabled: boolean; +}> = ({ selected, label, open, focus, disabled }) => ( @@ -309,7 +319,7 @@ const Feedback: FC = () => { - + {t('feedback.report_something', 'Do you want to report something?')} @@ -343,27 +353,30 @@ const Feedback: FC = () => { > - + Module ` +const SelectorContainer = styled(Container)<{ open?: boolean }>` border-right: 1px solid ${({ theme }): string => theme.palette.gray4.regular}; cursor: pointer; background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].regular}; + &:hover { background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].hover}; } @@ -67,7 +68,7 @@ const ModuleSelectorComponent: FC<{ app: string | undefined }> = ({ app }) => { orientation="horizontal" height={42} width="fit" - minWidth="150px" + minWidth={150} crossAlignment="center" mainAlignment="space-between" borderRadius="half" diff --git a/src/search/search-app-view.tsx b/src/search/search-app-view.tsx index 5286c1f4..83616133 100644 --- a/src/search/search-app-view.tsx +++ b/src/search/search-app-view.tsx @@ -28,7 +28,7 @@ const useDisableSearch = (): [boolean, Function] => const ResultsHeader: FC<{ label: string }> = ({ label }) => { const [t] = useTranslation(); const [query, updateQuery] = useQuery(); - const [disabled, setDisabled] = useDisableSearch(); + const [, setDisabled] = useDisableSearch(); const resetQuery = useCallback(() => { updateQuery([]); @@ -62,7 +62,7 @@ const ResultsHeader: FC<{ label: string }> = ({ label }) => { label={t('label.clear_search_query', 'CLEAR SEARCH')} icon="CloseOutline" color="primary" - size="large" + width="fill" type="ghost" onClick={resetQuery} /> diff --git a/src/search/search-bar.tsx b/src/search/search-bar.tsx index 4c00eb0d..edbb4762 100644 --- a/src/search/search-bar.tsx +++ b/src/search/search-bar.tsx @@ -12,7 +12,8 @@ import { Container, IconButton, Tooltip, - Padding + Padding, + ChipItem } from '@zextras/carbonio-design-system'; import { useTranslation } from 'react-i18next'; import { filter, find, map, reduce } from 'lodash'; @@ -61,7 +62,7 @@ type SearchLocalStorage = Array<{ }>; export const SearchBar: FC = () => { const [searchIsEnabled, setSearchIsEnabled] = useState(false); - const inputRef = useRef(); + const inputRef = useRef(null); const [t] = useTranslation(); const [storedValue, setStoredValue] = useLocalStorage( 'search_suggestions', @@ -77,7 +78,9 @@ export const SearchBar: FC = () => { const [isTyping, setIsTyping] = useState(false); // const [changedBySearchBar, setChangedBySearchBar] = useState(false); - const [options, setOptions] = useState>([]); + const [options, setOptions] = useState>( + [] + ); const [inputHasFocus, setInputHasFocus] = useState(false); @@ -107,7 +110,11 @@ export const SearchBar: FC = () => { if (inputTyped.length > 0) { const newInputState = [ ...inputState, - ...map(inputTyped?.split(' '), (item) => ({ label: item, hasAvatar: false })) + ...map(inputTyped?.split(' '), (label: string, id: number) => ({ + id: `${id}`, + label, + hasAvatar: false + })) ]; setInputState(newInputState); setInputTyped(''); @@ -240,7 +247,7 @@ export const SearchBar: FC = () => { }, [appSuggestions, module]); const [triggerSearch, setTriggerSearch] = useState(false); - const containerRef = useRef(); + const containerRef = useRef(null); const addFocus = useCallback(() => setInputHasFocus(true), []); const removeFocus = useCallback(() => setInputHasFocus(false), []); @@ -331,7 +338,7 @@ export const SearchBar: FC = () => { }, [t, searchIsEnabled, inputState.length, inputHasFocus, query.length]); const onChipAdd = useCallback( - (newChip: string) => { + (newChip: string | unknown): ChipItem => { setIsTyping(false); setInputTyped(''); if (module) { @@ -343,9 +350,9 @@ export const SearchBar: FC = () => { setOptions(suggestions); } return { - label: newChip.trim(), - hasAvatar: false, - avatarLabel: '' + label: typeof newChip === 'string' ? newChip : '', + value: newChip, + hasAvatar: false }; }, [appSuggestions, module] @@ -358,7 +365,7 @@ export const SearchBar: FC = () => { const disableClearButton = useMemo(() => (isTyping ? false : !showClear), [showClear, isTyping]); return ( - + { placeholder={placeholder} confirmChipOnBlur={false} confirmChipOnSpace={false} - separators={['Comma']} + separators={['Enter', 'NumpadEnter', 'Comma']} background={searchDisabled ? 'gray5' : 'gray6'} style={{ cursor: 'pointer', @@ -405,6 +412,11 @@ export const SearchBar: FC = () => { { placement="bottom" > 0)} backgroundColor="primary" diff --git a/src/settings/accounts-settings.tsx b/src/settings/accounts-settings.tsx index 11684d35..9d4df510 100644 --- a/src/settings/accounts-settings.tsx +++ b/src/settings/accounts-settings.tsx @@ -17,7 +17,7 @@ import AccountsList from './components/account-settings/accounts-list'; import PrimaryAccountSettings from './components/account-settings/primary-account-settings'; import SettingsSentMessages from './components/account-settings/settings-sent-messages'; import PasswordRecoverySettings from './components/account-settings/password-recovery-settings'; -import Delegates from './components/account-settings/delegates'; +import Delegates, { DelegateType } from './components/account-settings/delegates'; import PersonaSettings from './components/account-settings/persona-settings'; import PersonaUseSection from './components/account-settings/persona-use-section'; import SettingsHeader from './components/settings-header'; @@ -41,19 +41,12 @@ type AccountSettingsProps = { }; type UserRightsProps = { email: string; right: string }; - -type DelegateProps = { - id: string; - email: string; - right: string; -}; - export const AccountsSettings = ({ identitiesDefault, t }: AccountSettingsProps): ReactElement => { const [mods, setMods] = useState({}); const [activeDelegateView, setActiveDelegateView] = useState('0'); const [selectedIdentityId, setSelectedIdentityId] = useState(0); const [identities, setIdentities] = useState(identitiesDefault); - const [delegates, setDelegates] = useState([]); + const [delegates, setDelegates] = useState([]); const maxIdentities = useUserSettings().attrs.zimbraIdentityMaxNumEntries; const addMod = useCallback( diff --git a/src/settings/components/account-settings/accounts-list.tsx b/src/settings/components/account-settings/accounts-list.tsx index ddc1103d..6dffe003 100644 --- a/src/settings/components/account-settings/accounts-list.tsx +++ b/src/settings/components/account-settings/accounts-list.tsx @@ -12,12 +12,13 @@ import { Divider, Row, Padding, - Button, + ButtonOld as Button, Icon, - ModalManagerContext + ModalManagerContext, + ItemComponentProps } from '@zextras/carbonio-design-system'; import { TFunction } from 'i18next'; -import { map, filter, max } from 'lodash'; +import { map, filter, max, noop } from 'lodash'; import { IdentityProps, CreateIdentityProps } from '../../../../types'; type AccountsListProps = { @@ -30,16 +31,6 @@ type AccountsListProps = { createIdentities: (createList: { prefs: CreateIdentityProps }[]) => void; }; -type ListItemProps = { - active: boolean; - item: IdentityProps; - selected: boolean; - setSelected: () => void; - background: string; - selectedBackground: string; - activeBackground: string; -}; - const AccountsList = ({ t, selectedIdentityId, @@ -51,7 +42,7 @@ const AccountsList = ({ }: AccountsListProps): ReactElement => { const changeView = (value: number): void => setSelectedIdentityId(value); - const ListItem = ({ item }: ListItemProps): ReactElement => ( + const ListItem = ({ item }: ItemComponentProps): ReactElement => ( <> { @@ -228,8 +219,6 @@ const AccountsList = ({ ItemComponent={ListItem} active={identities[selectedIdentityId]?.id} height="fit" - selectedIdentityId={selectedIdentityId} - setSelectedIdentityId={setSelectedIdentityId} />