From d3426a2c6b9ebb73df979716a15c52b1644e29a6 Mon Sep 17 00:00:00 2001 From: Bilge Date: Fri, 7 Oct 2022 15:21:12 +0200 Subject: [PATCH 01/39] Bump version to 0.51.0-alpha --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 564edf82dd..691619926a 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.50.0 +0.51.0-alpha From 4a1da54c2349aae5b914437709bb7a1c101cf872 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Fri, 7 Oct 2022 18:48:27 +0200 Subject: [PATCH 02/39] [#3800] Minor fixes (#3803) --- .../src/components/TopBar/index.tsx | 16 ++++--- .../src/pages/Catalog/CatalogCard/index.tsx | 4 +- .../CatalogSearchBar/CatalogSearchBar.tsx | 7 +-- .../FilterCatalogModal/FilterCatalogModal.tsx | 3 +- .../src/pages/Catalog/index.module.scss | 2 + .../pages/Connectors/ChannelCard/index.tsx | 22 +++------- .../SetConfigInputs/SetConfigInputs.tsx | 3 +- .../ConnectedChannelsList/index.module.scss | 9 +++- .../ConnectedChannelsList/index.tsx | 31 +++++++------ .../Connectors/ConnectorConfig/index.tsx | 43 ++++++++----------- .../sections/ConnectNewChatPlugin.tsx | 18 +++++--- .../Facebook/Messenger/FacebookConnect.tsx | 3 +- .../WhatsappBusinessCloud/WhatsappConnect.tsx | 1 + .../inbox/src/components/TopBar/index.tsx | 16 ++++--- .../Contacts/ContactInformation/index.tsx | 3 +- .../Messenger/ConversationMetadata/index.tsx | 1 - .../components/cta/SmartButton/index.tsx | 21 ++------- .../components/inputs/Input/index.tsx | 4 +- .../components/inputs/Input/style.module.scss | 2 +- .../components/tooltip/index.module.scss | 1 - lib/typescript/translations/translations.ts | 8 +++- 21 files changed, 104 insertions(+), 114 deletions(-) diff --git a/frontend/control-center/src/components/TopBar/index.tsx b/frontend/control-center/src/components/TopBar/index.tsx index 851674cc9f..4cc977b31f 100644 --- a/frontend/control-center/src/components/TopBar/index.tsx +++ b/frontend/control-center/src/components/TopBar/index.tsx @@ -39,7 +39,9 @@ const TopBar = (props: TopBarProps & ConnectedProps) => { const [isFaqDropdownOn, setFaqDropdownOn] = useState(false); const [isLanguageDropdownOn, setLanguageDropdownOn] = useState(false); const [darkTheme, setDarkTheme] = useState(localStorage.getItem('theme') === 'dark' ? true : false); - const [animationAction, setAnimationAction] = useState(false); + const [animationActionFaq, setAnimationActionFaq] = useState(false); + const [animationActionLanguage, setAnimationActionLanguage] = useState(false); + const [animationActionAccount, setAnimationActionAccount] = useState(false); const [chevronAnim, setChevronAnim] = useState(false); const [chevronLanguageAnim, setChevronLanguageAnim] = useState(false); const [currentLanguage, setCurrentLanguage] = useState(localStorage.getItem('language') || Language.english); @@ -52,16 +54,16 @@ const TopBar = (props: TopBarProps & ConnectedProps) => { const toggleAccountDropdown = useCallback(() => { setChevronAnim(!chevronAnim); - useAnimation(isAccountDropdownOn, setAccountDropdownOn, setAnimationAction, 300); + useAnimation(isAccountDropdownOn, setAccountDropdownOn, setAnimationActionAccount, 300); }, [setAccountDropdownOn, isAccountDropdownOn]); const toggleFaqDropdown = useCallback(() => { - useAnimation(isFaqDropdownOn, setFaqDropdownOn, setAnimationAction, 300); + useAnimation(isFaqDropdownOn, setFaqDropdownOn, setAnimationActionFaq, 300); }, [setFaqDropdownOn, isFaqDropdownOn]); const toggleLanguageDropdown = useCallback(() => { setChevronLanguageAnim(!chevronLanguageAnim); - useAnimation(isLanguageDropdownOn, setLanguageDropdownOn, setAnimationAction, 300); + useAnimation(isLanguageDropdownOn, setLanguageDropdownOn, setAnimationActionLanguage, 300); }, [setLanguageDropdownOn, isLanguageDropdownOn]); const toggleDarkTheme = () => { @@ -120,7 +122,7 @@ const TopBar = (props: TopBarProps & ConnectedProps) => {
?
-
+
{isFaqDropdownOn && (
@@ -165,7 +167,7 @@ const TopBar = (props: TopBarProps & ConnectedProps) => {
-
+
{isLanguageDropdownOn && (
@@ -220,7 +222,7 @@ const TopBar = (props: TopBarProps & ConnectedProps) => {
-
+
{isAccountDropdownOn && (
diff --git a/frontend/control-center/src/pages/Catalog/CatalogCard/index.tsx b/frontend/control-center/src/pages/Catalog/CatalogCard/index.tsx index 1f1e4bbc39..3e322e2a86 100644 --- a/frontend/control-center/src/pages/Catalog/CatalogCard/index.tsx +++ b/frontend/control-center/src/pages/Catalog/CatalogCard/index.tsx @@ -129,7 +129,7 @@ const CatalogCard = (props: CatalogCardProps) => { } buttonRef={installButtonCard} > - {t('open').toUpperCase()} + {t('openCatalog').toUpperCase()} ); } @@ -137,7 +137,7 @@ const CatalogCard = (props: CatalogCardProps) => { return ( { className={currentFilter !== FilterTypes.all ? styles.filterIcon : ''} onClick={toggleShowFilter} /> -
+
{showFilter && ( )} diff --git a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/FilterCatalogModal/FilterCatalogModal.tsx b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/FilterCatalogModal/FilterCatalogModal.tsx index d5367340ea..06859c7631 100644 --- a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/FilterCatalogModal/FilterCatalogModal.tsx +++ b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/FilterCatalogModal/FilterCatalogModal.tsx @@ -15,6 +15,7 @@ type FilterCatalogModalProps = { currentFilter: FilterTypes; setCurrentFilter: Dispatch>; setShowFilter: Dispatch>; + animation: string; }; export const FilterCatalogModal = (props: FilterCatalogModalProps) => { @@ -35,7 +36,7 @@ export const FilterCatalogModal = (props: FilterCatalogModalProps) => { }; return ( -
+

{t('searchByType')}

props.setShowFilter(false)} /> diff --git a/frontend/control-center/src/pages/Catalog/index.module.scss b/frontend/control-center/src/pages/Catalog/index.module.scss index 278b13a7b0..1ac01061c5 100644 --- a/frontend/control-center/src/pages/Catalog/index.module.scss +++ b/frontend/control-center/src/pages/Catalog/index.module.scss @@ -36,10 +36,12 @@ flex-direction: column; h1 { @include font-l; + color: var(--color-text-contrast); font-weight: bold; } span { @include font-m; + color: var(--color-text-gray); } } diff --git a/frontend/control-center/src/pages/Connectors/ChannelCard/index.tsx b/frontend/control-center/src/pages/Connectors/ChannelCard/index.tsx index c42ab0239c..1f4aa933d3 100644 --- a/frontend/control-center/src/pages/Connectors/ChannelCard/index.tsx +++ b/frontend/control-center/src/pages/Connectors/ChannelCard/index.tsx @@ -7,7 +7,7 @@ import {useTranslation} from 'react-i18next'; import {ConfigStatusButton} from '../ConfigStatusButton'; import {ComponentStatus} from 'model'; import {cyAddChannelButton} from 'handles'; -import {getConnectedRouteForComponent, getNewChannelRouteForComponent} from '../../../services'; +import {getConnectedRouteForComponent} from '../../../services'; import {Connector} from 'model'; type ChannelCardProps = { @@ -20,25 +20,17 @@ export const ChannelCard = (props: ChannelCardProps) => { const {componentInfo, channelsToShow, componentStatus} = props; const {t} = useTranslation(); const navigate = useNavigate(); - const CONFIGURATION_ROUTE = getConnectedRouteForComponent( + const route = getConnectedRouteForComponent( componentInfo.source, componentInfo.isChannel, - componentStatus !== ComponentStatus.notConfigured - ); - - const CONFIGURATION_ROUTE_NEW = getNewChannelRouteForComponent( - componentInfo.source, - componentInfo?.isChannel, - componentStatus !== ComponentStatus.notConfigured + componentInfo.connectedChannels > 0, + componentInfo.isConfigured ); return (
{ - event.stopPropagation(), - channelsToShow > 0 - ? navigate(CONFIGURATION_ROUTE, {state: {from: 'connected'}}) - : navigate(CONFIGURATION_ROUTE_NEW, {state: {from: 'new'}}); + event.stopPropagation(), navigate(route); }} className={styles.container} data-cy={cyAddChannelButton} @@ -49,9 +41,7 @@ export const ChannelCard = (props: ChannelCardProps) => { {componentInfo.displayName}
- {componentStatus && ( - - )} + {componentStatus && } {channelsToShow} {channelsToShow === 1 ? t('channel') : t('channels')} diff --git a/frontend/control-center/src/pages/Connectors/ConfigureConnector/SetConfigInputs/SetConfigInputs.tsx b/frontend/control-center/src/pages/Connectors/ConfigureConnector/SetConfigInputs/SetConfigInputs.tsx index 0ac55c7bee..c8bb4b5064 100644 --- a/frontend/control-center/src/pages/Connectors/ConfigureConnector/SetConfigInputs/SetConfigInputs.tsx +++ b/frontend/control-center/src/pages/Connectors/ConfigureConnector/SetConfigInputs/SetConfigInputs.tsx @@ -34,11 +34,12 @@ export const SetConfigInputs = (props: SetConfigInputsProps) => { const isUrl = label.includes('Url'); const hasSteps = source === Source.dialogflow && replacedKey.includes('Level'); const stepPlaceholder = `0.1 ${t('to')} 0.9`; + const sensitive = label.includes('Token') || label.includes('Password') || label.includes('Secret'); inputArr.push(
{ } }; - const showSearchFieldToggle = () => { + const showSearchFieldToggle = useCallback(() => { useAnimation(showingSearchField, setShowingSearchField, setAnimationAction, 300); setSearchText(''); - }; + }, [showingSearchField, setShowingSearchField]); return (
-
+
-
- {showingSearchField && ( - setSearchText(value)} - autoFocus={true} - style={{height: '32px', borderRadius: '32px'}} - resetClicked={() => setSearchText('')} - /> - )} -
+ {showingSearchField && ( + setSearchText(value)} + autoFocus={true} + style={{height: '32px', borderRadius: '32px'}} + resetClicked={() => setSearchText('')} + /> + )}
diff --git a/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx b/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx index 3b87169494..2a176f48ea 100644 --- a/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx +++ b/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx @@ -26,7 +26,6 @@ const mapDispatchToProps = { }; const mapStateToProps = (state: StateModel) => ({ - components: state.data.config.components, connectors: getMergedConnectors(state), }); @@ -37,7 +36,7 @@ type LocationState = { const connector = connect(mapStateToProps, mapDispatchToProps); const ConnectorConfig = (props: ConnectedProps) => { - const {components, connectors, getConnectorsConfiguration, listComponents} = props; + const {connectors, getConnectorsConfiguration, listComponents} = props; const {t} = useTranslation(); const params = useParams(); const navigate = useNavigate(); @@ -47,14 +46,12 @@ const ConnectorConfig = (props: ConnectedProps) => { const connectedChannels = params['*'] === 'connected'; const configurePath = params['*'] === 'configure'; const connectorInfo = useCurrentComponentForSource(source as Source); - const [isEnabled, setIsEnabled] = useState(null); const [lineTitle, setLineTitle] = useState(''); const [lineTitleRoute, setLineTitleRoute] = useState(''); const configValues = connectorInfo.source === source && connectorInfo.configurationValues; const parsedConfigValues = configValues && JSON.parse(configValues); const pageContentRef = useRef(null); const [offset, setOffset] = useState(pageContentRef?.current?.offsetTop); - const isAiryInternalConnector = source === Source.chatPlugin; const previousPath = (location.state as LocationState)?.from; const currentPath = params['*']; const navigateNew = `${CONNECTORS_ROUTE}/${source}/new`; @@ -65,6 +62,7 @@ const ConnectorConfig = (props: ConnectedProps) => { const hasConnectedChannels = connectors[removePrefix(connectorInfo?.name)].connectedChannels > 0; const isChannel = connectors[removePrefix(connectorInfo?.name)].isChannel; const isConfigured = connectors[removePrefix(connectorInfo?.name)].isConfigured; + const isEnabled = connectors[removePrefix(connectorInfo.name)]?.isEnabled; useLayoutEffect(() => { setOffset(pageContentRef?.current?.offsetTop); @@ -80,11 +78,6 @@ const ConnectorConfig = (props: ConnectedProps) => { if (connectorInfo) determineLineTitle(); }, [connectorInfo]); - useEffect(() => { - if (components && connectorInfo && connectorInfo?.name) - setIsEnabled(components[removePrefix(connectorInfo.name)]?.enabled); - }, [connectorInfo, components]); - const determineLineTitle = () => { const newAiryChatPluginPage = newChannel && source === Source.chatPlugin; @@ -146,21 +139,19 @@ const ConnectorConfig = (props: ConnectedProps) => { return ( <> - {!(source === Source.chatPlugin && (newChannel || channelId)) && ( -
+
+ {!(source === Source.chatPlugin && (newChannel || channelId)) && (
- {(!isConfigured || isAiryInternalConnector || !isChannel) && ( - isChannel && navigate(lineTitleRoute, {state: {from: currentPath}})} - > - {lineTitle} - - )} + isChannel && navigate(lineTitleRoute, {state: {from: currentPath}})} + > + {lineTitle} + {((source !== Source.chatPlugin && connectorInfo.isChannel) || (notConfigured && isChannel)) && ( ) => { )}
-
-
- )} + )} +
+
{ const {modal, connectNew, connectChatPlugin} = props; const [displayName, setDisplayName] = useState(''); const [imageUrl, setImageUrl] = useState(''); + const [isPending, setIsPending] = useState(false); const {t} = useTranslation(); const navigate = useNavigate(); const CHAT_PLUGIN_ROUTE = `${CONNECTORS_ROUTE}/chatplugin`; const createNewConnection = (displayName: string, imageUrl?: string) => { + setIsPending(true); connectChatPlugin({ name: displayName, ...(imageUrl.length > 0 && { @@ -39,6 +41,9 @@ const ConnectNewChatPlugin = (props: ConnectNewChatPluginProps) => { }) .catch((error: Error) => { console.error(error); + }) + .finally(() => { + setIsPending(false); }); }; @@ -76,19 +81,20 @@ const ConnectNewChatPlugin = (props: ConnectNewChatPluginProps) => { fontClass="font-base" />
- + /> ); }; diff --git a/frontend/control-center/src/pages/Connectors/Providers/Facebook/Messenger/FacebookConnect.tsx b/frontend/control-center/src/pages/Connectors/Providers/Facebook/Messenger/FacebookConnect.tsx index 133b68d03e..e232b38ded 100644 --- a/frontend/control-center/src/pages/Connectors/Providers/Facebook/Messenger/FacebookConnect.tsx +++ b/frontend/control-center/src/pages/Connectors/Providers/Facebook/Messenger/FacebookConnect.tsx @@ -107,6 +107,7 @@ const FacebookConnect = (props: FacebookConnectProps) => { fontClass="font-base" /> { type="submit" styleVariant="normal" disabled={buttonStatus() || isPending} - onClick={() => connectNewChannel()} + onClick={connectNewChannel} /> {modal && {connectError}}
diff --git a/frontend/control-center/src/pages/Connectors/Providers/WhatsappBusinessCloud/WhatsappConnect.tsx b/frontend/control-center/src/pages/Connectors/Providers/WhatsappBusinessCloud/WhatsappConnect.tsx index 017d57c287..82ed33b94b 100644 --- a/frontend/control-center/src/pages/Connectors/Providers/WhatsappBusinessCloud/WhatsappConnect.tsx +++ b/frontend/control-center/src/pages/Connectors/Providers/WhatsappBusinessCloud/WhatsappConnect.tsx @@ -104,6 +104,7 @@ const WhatsappConnect = (props: WhatsappConnectProps) => { fontClass="font-base" /> ) => { const [isFaqDropdownOn, setFaqDropdownOn] = useState(false); const [isLanguageDropdownOn, setLanguageDropdownOn] = useState(false); const [darkTheme, setDarkTheme] = useState(localStorage.getItem('theme') === 'dark' ? true : false); - const [animationAction, setAnimationAction] = useState(false); + const [animationActionFaq, setAnimationActionFaq] = useState(false); + const [animationActionLanguage, setAnimationActionLanguage] = useState(false); + const [animationActionAccount, setAnimationActionAccount] = useState(false); const [chevronAnim, setChevronAnim] = useState(false); const [chevronLanguageAnim, setChevronLanguageAnim] = useState(false); const [currentLanguage, setCurrentLanguage] = useState(localStorage.getItem('language') || Language.english); @@ -52,16 +54,16 @@ const TopBar = (props: TopBarProps & ConnectedProps) => { const toggleAccountDropdown = useCallback(() => { setChevronAnim(!chevronAnim); - useAnimation(isAccountDropdownOn, setAccountDropdownOn, setAnimationAction, 300); + useAnimation(isAccountDropdownOn, setAccountDropdownOn, setAnimationActionAccount, 300); }, [setAccountDropdownOn, isAccountDropdownOn]); const toggleFaqDropdown = useCallback(() => { - useAnimation(isFaqDropdownOn, setFaqDropdownOn, setAnimationAction, 300); + useAnimation(isFaqDropdownOn, setFaqDropdownOn, setAnimationActionFaq, 300); }, [setFaqDropdownOn, isFaqDropdownOn]); const toggleLanguageDropdown = useCallback(() => { setChevronLanguageAnim(!chevronLanguageAnim); - useAnimation(isLanguageDropdownOn, setLanguageDropdownOn, setAnimationAction, 300); + useAnimation(isLanguageDropdownOn, setLanguageDropdownOn, setAnimationActionLanguage, 300); }, [setLanguageDropdownOn, isLanguageDropdownOn]); const toggleDarkTheme = () => { @@ -124,7 +126,7 @@ const TopBar = (props: TopBarProps & ConnectedProps) => { ?
-
+
{isFaqDropdownOn && (
@@ -169,7 +171,7 @@ const TopBar = (props: TopBarProps & ConnectedProps) => {
-
+
{isLanguageDropdownOn && (
@@ -223,7 +225,7 @@ const TopBar = (props: TopBarProps & ConnectedProps) => {
-
+
{isAccountDropdownOn && (
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx index 577fdfa0be..47192d2d94 100644 --- a/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx +++ b/frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx @@ -55,7 +55,7 @@ const ContactInformation = (props: ContactInformationProps) => { } = props; const {t} = useTranslation(); const [showEditDisplayName, setShowEditDisplayName] = useState(false); - const [displayName, setDisplayName] = useState(contact?.displayName); + const [displayName, setDisplayName] = useState(contact?.displayName || ''); const [fade, setFade] = useState(true); const [isEditing, setIsEditing] = useState(false); const [editingCanceled, setEditingCanceled] = useState(false); @@ -91,7 +91,6 @@ const ContactInformation = (props: ContactInformationProps) => { }; const toggleEditDisplayName = useCallback(() => { - setDisplayName(contact?.displayName); useAnimation(showEditDisplayName, setShowEditDisplayName, setFade, 400); }, [showEditDisplayName, setShowEditDisplayName]); diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx index b2b6778046..9f5da41801 100644 --- a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx +++ b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx @@ -162,7 +162,6 @@ const ConversationMetadata = (props: ConnectedProps) => { }, [showTagsDialog, setShowTagsDialog]); const toggleEditDisplayName = useCallback(() => { - setDisplayName(conversation.metadata.contact.displayName); useAnimation(showEditDisplayName, setShowEditDisplayName, setFade, 400); }, [showEditDisplayName, setShowEditDisplayName]); diff --git a/lib/typescript/components/cta/SmartButton/index.tsx b/lib/typescript/components/cta/SmartButton/index.tsx index 85e971b6a5..dda16e6748 100644 --- a/lib/typescript/components/cta/SmartButton/index.tsx +++ b/lib/typescript/components/cta/SmartButton/index.tsx @@ -1,4 +1,4 @@ -import React, {CSSProperties, useEffect, useRef, useState} from 'react'; +import React, {CSSProperties} from 'react'; import {ReactComponent as RefreshIcon} from 'assets/images/icons/refreshIcon.svg'; import styles from './index.module.scss'; @@ -48,13 +48,6 @@ export const SmartButton = ({ height, width, }: ButtonProps) => { - const [buttonWidth, setButtonWidth] = useState(0); - const ref = useRef(null); - - useEffect(() => { - setButtonWidth(ref?.current?.offsetWidth); - }, [ref?.current]); - const styleFor = (variant: styleVariantType) => { switch (variant) { case 'extra-small': @@ -86,17 +79,9 @@ export const SmartButton = ({ return (
- - + hoverElementWidth={16} + hoverElementHeight={16} + tooltipContent={t('editChannel')} + direction="left" + /> + } + hoverElementWidth={18} + hoverElementHeight={18} + tooltipContent={t('disconnectChannel')} + direction="topLeft" + />
diff --git a/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx b/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx index 81d05a98d3..c3d6d6e623 100644 --- a/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx +++ b/frontend/control-center/src/pages/Connectors/ConnectorConfig/index.tsx @@ -59,9 +59,9 @@ const ConnectorConfig = (props: ConnectedProps) => { const navigateConfigure = `${CONNECTORS_ROUTE}/${source}/configure`; const navigateChannelId = `${CONNECTORS_ROUTE}/${source}/${channelId || previousPath}`; const notConfigured = previousPath === 'connectors' || previousPath === 'status' || previousPath === 'catalog'; - const hasConnectedChannels = connectors[connectorInfo?.name].connectedChannels > 0; - const isChannel = connectors[connectorInfo?.name].isChannel; - const isConfigured = connectors[connectorInfo?.name].isConfigured; + const hasConnectedChannels = connectors[connectorInfo?.name]?.connectedChannels > 0; + const isChannel = connectors[connectorInfo?.name]?.isChannel; + const isConfigured = connectors[connectorInfo?.name]?.isConfigured; const isEnabled = connectors[connectorInfo.name]?.isEnabled; const [notification, setNotification] = useState(null); diff --git a/frontend/control-center/src/pages/Connectors/ConnectorWrapper/index.tsx b/frontend/control-center/src/pages/Connectors/ConnectorWrapper/index.tsx index 090fec3866..f1606a261b 100644 --- a/frontend/control-center/src/pages/Connectors/ConnectorWrapper/index.tsx +++ b/frontend/control-center/src/pages/Connectors/ConnectorWrapper/index.tsx @@ -98,7 +98,10 @@ const ConnectorWrapper = (props: ConnectorWrapperProps) => { ); const connectorSourceInfoArr: [string, ComponentInfo] = connectorSourceInfo[0]; - const connectorSourceInfoFormatted = {name: connectorSourceInfoArr[0], ...connectorSourceInfoArr[1]}; + const connectorSourceInfoFormatted = connectorSourceInfoArr && { + name: connectorSourceInfoArr[0], + ...connectorSourceInfoArr[1], + }; const connectorHasChannels = connectorSourceInfoFormatted?.isChannel; diff --git a/lib/typescript/components/tooltip/index.module.scss b/lib/typescript/components/tooltip/index.module.scss index 2a64bef069..ef727c266a 100644 --- a/lib/typescript/components/tooltip/index.module.scss +++ b/lib/typescript/components/tooltip/index.module.scss @@ -29,6 +29,34 @@ width: 100%; } +.tooltipContainer.topLeft { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 100%; +} + +.tooltipContainer.topRight { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; +} + +.tooltipContainer.bottomLeft { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 100%; +} + +.tooltipContainer.bottomRight { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; +} + .tooltipContent { @include font-s-bold; display: none; @@ -68,6 +96,34 @@ margin-right: 12px; } +.hoverElement:hover ~ .tooltipContent.topLeft { + display: flex; + line-height: 14px; + white-space: nowrap; + bottom: 32px; +} + +.hoverElement:hover ~ .tooltipContent.topRight { + display: flex; + line-height: 14px; + white-space: nowrap; + bottom: 32px; +} + +.hoverElement:hover ~ .tooltipContent.bottomLeft { + display: flex; + line-height: 14px; + white-space: nowrap; + top: 32px; +} + +.hoverElement:hover ~ .tooltipContent.bottomRight { + display: flex; + line-height: 14px; + white-space: nowrap; + top: 32px; +} + .hoverElement ~ .tooltipContent.top::after { content: ''; position: absolute; @@ -109,3 +165,44 @@ border-style: solid; border-color: transparent transparent transparent var(--color-tooltip-gray); } + +.hoverElement ~ .tooltipContent.topLeft::after { + content: ''; + position: absolute; + top: 100%; + right: 10px; + border-width: 5px; + border-style: solid; + border-color: var(--color-tooltip-gray) transparent transparent transparent; +} + +.hoverElement ~ .tooltipContent.topRight::after { + content: ''; + position: absolute; + top: 100%; + left: 10px; + border-width: 5px; + border-style: solid; + border-color: var(--color-tooltip-gray) transparent transparent transparent; +} + +.hoverElement ~ .tooltipContent.bottomLeft::after { + content: ''; + position: absolute; + bottom: 100%; + right: 10px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--color-tooltip-gray) transparent; +} + +.hoverElement ~ .tooltipContent.bottomRight::after { + content: ''; + position: absolute; + bottom: 100%; + left: 10px; + margin-top: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--color-tooltip-gray) transparent; +} diff --git a/lib/typescript/components/tooltip/index.tsx b/lib/typescript/components/tooltip/index.tsx index 4c458ee668..b0f0329a24 100644 --- a/lib/typescript/components/tooltip/index.tsx +++ b/lib/typescript/components/tooltip/index.tsx @@ -7,13 +7,16 @@ type TooltipProps = { hoverElementHeight?: number; hoverElementWidth: number; tooltipContent: string; - direction: 'top' | 'right' | 'bottom' | 'left'; + direction: 'top' | 'right' | 'bottom' | 'left' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; navigateTo?: string; }; export const Tooltip = (props: TooltipProps) => { const {hoverElement, hoverElementHeight, hoverElementWidth, tooltipContent, direction, navigateTo} = props; const navigate = useNavigate(); + const left = direction === 'bottomLeft' || direction === 'topLeft'; + const right = direction === 'bottomRight' || direction === 'topRight'; + const margin = hoverElementWidth + 5; const handleOnClick = (event: React.MouseEvent) => { event.stopPropagation(); @@ -32,7 +35,12 @@ export const Tooltip = (props: TooltipProps) => { > {hoverElement}
- {tooltipContent} + + {tooltipContent} +
); }; diff --git a/lib/typescript/translations/translations.ts b/lib/typescript/translations/translations.ts index 2c1bd18f77..cf74527d69 100644 --- a/lib/typescript/translations/translations.ts +++ b/lib/typescript/translations/translations.ts @@ -174,6 +174,7 @@ const resources = { channelsCapital: 'Channels', addChannel: 'Add Channel', disconnectChannel: 'Disconnect Channel', + editChannel: 'Edit Channel', confirmDisconnectChannelTitle: 'Confirm Channel Disconnection', confirmDisconnectChannelText: 'You are about to disconnect a channel. You will not receive any new messages in Airy or be able to send messages anymore.', @@ -724,6 +725,7 @@ const resources = { addChannel: 'Kanal hinzufügen', channelsCapital: 'Kanäle', disconnectChannel: 'Kanal entfernen', + editChannel: 'Kanal bearbeiten', confirmDisconnectChannelTitle: 'Bestätigung der Kanaltrennung', confirmDisconnectChannelText: 'Sie sind dabei, die Verbindung zu einem Kanal zu trennen. Sie werden keine neuen Nachrichten in Airy erhalten und können keine Nachrichten mehr senden.', @@ -1265,6 +1267,7 @@ const resources = { addChannel: 'Ajouter un canal', channelsCapital: 'Canaux', disconnectChannel: 'Déconnecter du canal', + editChannel: 'Éditer le canal', confirmDisconnectChannelTitle: 'Confirmer la déconnexion du canal', confirmDisconnectChannelText: 'Vous êtes sur le point de déconnecter un canal. Vous ne recevrez plus de nouveaux messages dans Airy et ne pourrez plus envoyer de messages.', @@ -1812,6 +1815,7 @@ const resources = { addChannel: 'Añadir canal', channelsCapital: 'Canales', disconnectChannel: 'Desconectar el canal', + editChannel: 'Editar el canal', confirmDisconnectChannelTitle: 'Confirmar la desconexión del canal', confirmDisconnectChannelText: 'Estás a punto de desconectar un canal. No recibirás ningún mensaje nuevo en Airy ni podrás volver a enviar mensajes.', From c5770c551cff2de4cc7cf44ee4a7bcf6569069c1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 19 Oct 2022 15:43:20 +0200 Subject: [PATCH 30/39] Bump react-redux from 8.0.2 to 8.0.4 (#3772) --- frontend/inbox/src/pages/Inbox/Messenger/index.tsx | 5 ++--- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/frontend/inbox/src/pages/Inbox/Messenger/index.tsx b/frontend/inbox/src/pages/Inbox/Messenger/index.tsx index bd4924d4cb..b22b0c0082 100644 --- a/frontend/inbox/src/pages/Inbox/Messenger/index.tsx +++ b/frontend/inbox/src/pages/Inbox/Messenger/index.tsx @@ -12,11 +12,10 @@ import {allConversations} from '../../../selectors/conversations'; import {usePrevious} from '../../../services/hooks/usePrevious'; const mapStateToProps = (state: StateModel) => ({ - loading: state.data.conversations.all.paginationData.loading, conversations: allConversations(state), }); -const connector = connect(mapStateToProps); +const connector = connect(mapStateToProps, null); const Messenger = (props: ConnectedProps) => { const {conversations} = props; @@ -40,7 +39,7 @@ const Messenger = (props: ConnectedProps) => { )} - + ); }; diff --git a/package.json b/package.json index 674b6b66ea..b6bac45793 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "react-i18next": "^11.18.6", "react-markdown": "^8.0.2", "react-modal": "^3.14.4", - "react-redux": "8.0.2", + "react-redux": "8.0.4", "react-refresh": "^0.14.0", "react-router-dom": "6.4.1", "redux": "^4.2.0", diff --git a/yarn.lock b/yarn.lock index 7a6e774bfb..362ad7a9b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7206,10 +7206,10 @@ react-modal@^3.14.4: react-lifecycles-compat "^3.0.0" warning "^4.0.3" -react-redux@8.0.2: - version "8.0.2" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.2.tgz#bc2a304bb21e79c6808e3e47c50fe1caf62f7aad" - integrity sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA== +react-redux@8.0.4: + version "8.0.4" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.4.tgz#80c31dffa8af9526967c4267022ae1525ff0e36a" + integrity sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ== dependencies: "@babel/runtime" "^7.12.1" "@types/hoist-non-react-statics" "^3.3.1" From 88128aab96bd5b760b0299bd457f9fcf6806f208 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Thu, 20 Oct 2022 14:12:07 +0200 Subject: [PATCH 31/39] [#3862] Fixed icons and improved animations (#3863) --- .../src/components/TopBar/index.module.scss | 2 +- .../CatalogSearchBar.module.scss | 37 +++++--------- .../CatalogSearchBar/CatalogSearchBar.tsx | 14 ++++-- .../ConnectedChannelsList/index.module.scss | 15 ++---- .../ConnectedChannelsList/index.tsx | 23 +++++---- .../src/components/TopBar/index.module.scss | 2 +- .../ContactInformation/index.module.scss | 2 +- .../ConversationListHeader/index.module.scss | 22 +++++---- .../Inbox/ConversationListHeader/index.tsx | 48 +++++++++---------- .../ConversationMetadata/index.module.scss | 2 +- lib/typescript/assets/scss/animations.scss | 27 +++++++++-- .../components/inputs/SearchField/index.tsx | 4 +- 12 files changed, 104 insertions(+), 94 deletions(-) diff --git a/frontend/control-center/src/components/TopBar/index.module.scss b/frontend/control-center/src/components/TopBar/index.module.scss index ad46613001..2c62c3ede5 100644 --- a/frontend/control-center/src/components/TopBar/index.module.scss +++ b/frontend/control-center/src/components/TopBar/index.module.scss @@ -269,5 +269,5 @@ } .animateOut { - animation: topbarDropdownOut 300ms ease; + animation: topbarDropdownOut 300ms forwards; } diff --git a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.module.scss b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.module.scss index 3a6e39f3f3..c35e9452c5 100644 --- a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.module.scss +++ b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.module.scss @@ -1,5 +1,6 @@ @import 'assets/scss/fonts.scss'; @import 'assets/scss/colors.scss'; +@import 'assets/scss/animations.scss'; .container { display: flex; @@ -32,39 +33,17 @@ } .searchField { - width: 200px; + width: 300px; background: var(--color-background-white); border: 1px solid var(--color-airy-blue); border-radius: 4px; + height: 32px; svg { color: black; } } -@keyframes animateFilterModalIn { - 0% { - transform: translateX(200px); - opacity: 0; - } - - 100% { - transform: translateX(0px); - opacity: 1; - } -} - -@keyframes animateFilterModalOut { - 0% { - transform: translateX(0px); - opacity: 1; - } - 100% { - transform: translateX(200px); - opacity: 0; - } -} - .filterModal { position: absolute; top: 170px; @@ -75,5 +54,13 @@ animation: animateFilterModalIn 500ms ease; } .filterModalAnimOut { - animation: animateFilterModalOut 500ms ease; + animation: animateFilterModalOut 500ms forwards; +} + +.animateIn { + animation: searchfieldAnimIn 300ms ease; +} + +.animateOut { + animation: searchfieldAnimOut 300ms forwards; } diff --git a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.tsx b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.tsx index b929c6e662..4f1da8b8ea 100644 --- a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.tsx +++ b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.tsx @@ -20,24 +20,30 @@ export const CatalogSearchBar = (props: CatalogSearchBarProps) => { const [showSearchField, setShowingSearchField] = useState(false); const [showFilter, setShowFilter] = useState(false); const [animationAction, setAnimationAction] = useState(false); + const [animationActionSearchfield, setAnimationActionSearchfield] = useState(false); const toggleShowFilter = useCallback(() => { useAnimation(showFilter, setShowFilter, setAnimationAction, 500); }, [showFilter, setShowFilter]); + const showSearchFieldToggle = useCallback(() => { + useAnimation(showSearchField, setShowingSearchField, setAnimationActionSearchfield, 300); + setQuery(''); + props.setQuery(''); + }, [showSearchField, setShowingSearchField]); + useEffect(() => { props.setCurrentFilter(currentFilter); }, [currentFilter]); - const handleSearchClick = () => setShowingSearchField(!showSearchField); - return (
{showSearchField ? ( - + { /> ) : ( - + )} {
-
- {showingSearchField && ( - setSearchText(value)} - autoFocus={true} - resetClicked={() => setSearchText('')} - /> - )} -
+ {showingSearchField && ( + setSearchText(value)} + autoFocus={true} + resetClicked={() => setSearchText('')} + /> + )}
-
- -
+ setSearchText('')} + autoFocus={true} + dataCy={cySearchField} + />
) : (
-