From cc8020d6a2ecaed6d9a8c932d2df036f3809eb44 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Tue, 16 Mar 2021 12:05:22 +0100 Subject: [PATCH 01/50] [#1255] Align name and id (#1256) closes #1256 --- .../Channels/ChannelsMainPage/SourceInfo/index.module.scss | 6 +++++- .../ConnectedChannelsList/ChannelListItem.module.scss | 5 ++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss index d8e9b1edce..88448a7698 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss @@ -85,6 +85,7 @@ .placeholderLogo { height: 24px; width: 24px; + margin-right: 4px; svg { height: 24px; width: 24px; @@ -93,17 +94,20 @@ .facebookImage { height: 20px; width: 20px; + margin-right: 4px; border-radius: 50%; } .connectedChannelName { min-width: 168px; - margin: 0 4px 0 4px; max-width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin-right: 7px; + &:empty { + display: none; + } } .channelId { diff --git a/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.module.scss b/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.module.scss index 838c2a8e03..b02d98a377 100644 --- a/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.module.scss +++ b/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.module.scss @@ -45,13 +45,16 @@ display: flex; align-items: center; padding-left: 16px; + padding-right: 16px; + &:empty { + padding-right: 0px; + } } .channelId { height: 50px; display: flex; align-items: center; - padding-left: 16px; } .imageUrlLogo { From 0c5fb20fe4de3299998b2f7b38df12c2344c56aa Mon Sep 17 00:00:00 2001 From: Kazeem Adetunji Date: Tue, 16 Mar 2021 13:36:37 +0100 Subject: [PATCH 02/50] Bump version to 0.14.0-alpha --- VERSION | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/VERSION b/VERSION index 54d1a4f2a4..948578a216 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.13.0 +0.14.0-alpha From 14c7e3de40b62a592c1fab2ec264710b4e04f6a7 Mon Sep 17 00:00:00 2001 From: Thorsten Date: Tue, 16 Mar 2021 13:49:16 +0100 Subject: [PATCH 03/50] [#1090] Add fallback image to channels (#1254) --- .../ChannelsMainPage/SourceInfo/index.module.scss | 1 - .../pages/Channels/ChannelsMainPage/SourceInfo/index.tsx | 4 ++++ .../Channels/ConnectedChannelsList/ChannelListItem.tsx | 9 ++++++++- frontend/ui/src/services/image/index.ts | 6 ++++++ 4 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 frontend/ui/src/services/image/index.ts diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss index 88448a7698..7d0c45174e 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss @@ -66,7 +66,6 @@ display: flex; align-items: center; margin: 4px; - align-items: flex-start; border: none; outline: none; background-color: inherit; diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx index d4b3a7ad8a..2e03ca5bd3 100644 --- a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx +++ b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {Channel} from 'httpclient'; import {LinkButton} from '@airyhq/components'; import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg'; +import {fallbackImage} from '../../../../services/image/index'; import styles from './index.module.scss'; type SourceInfoProps = { @@ -44,6 +45,9 @@ const SourceInfo = (props: SourceInfoProps) => { src={channel.metadata?.imageUrl} alt={channel.metadata?.name} className={styles.facebookImage} + onError={(event: React.SyntheticEvent) => { + fallbackImage(event, channel.source); + }} /> ) : (
{props.placeholderImage}
diff --git a/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.tsx b/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.tsx index 285d98897d..14dea58c8b 100644 --- a/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.tsx +++ b/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.tsx @@ -11,6 +11,7 @@ import {ReactComponent as AiryLogo} from 'assets/images/icons/airy_avatar.svg'; import {ReactComponent as CheckMark} from 'assets/images/icons/checkmark.svg'; import styles from './ChannelListItem.module.scss'; import {RouteComponentProps, withRouter} from 'react-router-dom'; +import {fallbackImage} from '../../../services/image/index'; type ChannelItemProps = { channel: Channel; @@ -53,7 +54,13 @@ const ChannelItem = (props: ChannelItemProps) => { const ChannelIcon = ({channel}: {channel: Channel}) => { if (channel?.metadata?.imageUrl) { - return ; + return ( + ) => fallbackImage(event, channel.source)} + className={styles.imageUrlLogo} + src={channel.metadata.imageUrl} + /> + ); } return getSourceLogo(channel); }; diff --git a/frontend/ui/src/services/image/index.ts b/frontend/ui/src/services/image/index.ts new file mode 100644 index 0000000000..1546345cfc --- /dev/null +++ b/frontend/ui/src/services/image/index.ts @@ -0,0 +1,6 @@ +import _, {SyntheticEvent} from 'react'; + +export const fallbackImage = (event: SyntheticEvent, source: string) => { + event.currentTarget.src = `https://s3.amazonaws.com/assets.airy.co/${source}_avatar.svg`; + event.currentTarget.alt = 'fallback image'; +}; From 92d1adeb11593ef462776ef4ee35f8ef6801e612 Mon Sep 17 00:00:00 2001 From: Pascal Holy <54705263+pascal-airy@users.noreply.github.com> Date: Tue, 16 Mar 2021 15:24:53 +0100 Subject: [PATCH 04/50] [#1050] Add test for filtering and creating a tag (#1252) Resolves #1050 --- frontend/ui/handles/index.ts | 16 +++++ frontend/ui/src/components/ColorSelector.tsx | 15 +++++ .../components/ResizableWindowList/index.tsx | 3 +- frontend/ui/src/components/SearchField.tsx | 4 +- .../Inbox/ConversationListHeader/index.tsx | 7 ++- .../Messenger/ConversationMetadata/index.tsx | 7 ++- frontend/ui/src/pages/Tags/index.tsx | 11 +++- .../chat-plugin/create_conversation.spec.ts | 4 +- integration/cypress.json | 4 +- integration/ui/create_tag.spec.ts | 29 +++++++++ integration/ui/filtering.spec.ts | 24 ++++++++ yarn.lock | 59 ++++++++++--------- 12 files changed, 142 insertions(+), 41 deletions(-) create mode 100644 integration/ui/create_tag.spec.ts create mode 100644 integration/ui/filtering.spec.ts diff --git a/frontend/ui/handles/index.ts b/frontend/ui/handles/index.ts index cedc6489af..8a560a8319 100644 --- a/frontend/ui/handles/index.ts +++ b/frontend/ui/handles/index.ts @@ -2,3 +2,19 @@ export const cyMessageList = 'messageList'; export const cyInputBar = 'inputBar'; export const cyMessageTextArea = 'messageTextArea'; export const cyMessageSendButton = 'messageSendButton'; + +export const cySearchButton = 'searchButton'; +export const cySearchField = 'searchField'; +export const cySearchFieldBackButton = 'searchFieldBackButton'; + +export const cyConversationList = 'conversationList'; + +export const cyShowTagsDialog = 'showTagsDialog'; +export const cyTagsDialogInput = 'tagsDialogInput'; +export const cyTagsDialogButton = 'tagsDialogButton'; +export const cyTagsDialogColorSelectorBlue = 'tagsDialogColorSelectorBlue'; +export const cyTagsDialogColorSelectorRed = 'tagsDialogColorSelectorRed'; +export const cyTagsDialogColorSelectorGreen = 'tagsDialogColorSelectorGreen'; +export const cyTagsDialogColorSelectorPurple = 'tagsDialogColorSelectorPurple'; +export const cyTagsSearchField = 'tagsSearchField'; +export const cyTagsTable = 'tagsTable'; diff --git a/frontend/ui/src/components/ColorSelector.tsx b/frontend/ui/src/components/ColorSelector.tsx index 8d58a63824..14443b5910 100644 --- a/frontend/ui/src/components/ColorSelector.tsx +++ b/frontend/ui/src/components/ColorSelector.tsx @@ -5,6 +5,13 @@ import {Settings} from '../reducers/data/settings'; import styles from './ColorSelector.module.scss'; +import { + cyTagsDialogColorSelectorBlue, + cyTagsDialogColorSelectorRed, + cyTagsDialogColorSelectorGreen, + cyTagsDialogColorSelectorPurple, +} from 'handles'; + type ColorSelectorProps = { handleUpdate: (event: React.ChangeEvent) => void; color: string; @@ -20,6 +27,10 @@ const ColorSelector = ({handleUpdate, color, editing, id, settings}: ColorSelect const getColorValue = useCallback((color: string) => (settings && settings.colors[color].default) || '1578D4', [ settings, ]); + const dataCyTagsDialogColorSelectorBlue = cyTagsDialogColorSelectorBlue; + const dataCyTagsDialogColorSelectorRed = cyTagsDialogColorSelectorRed; + const dataCyTagsDialogColorSelectorGreen = cyTagsDialogColorSelectorGreen; + const dataCyTagsDialogColorSelectorPurple = cyTagsDialogColorSelectorPurple; return (
@@ -32,6 +43,7 @@ const ColorSelector = ({handleUpdate, color, editing, id, settings}: ColorSelect id={`color-blue-${id}`} name={`color-blue-${id}`} value="tag-blue" + data-cy={dataCyTagsDialogColorSelectorBlue} />