From 7c60637cabbf7968d8a934da62561ae7de92cfbb Mon Sep 17 00:00:00 2001 From: Julien Tant <785518+JulienTant@users.noreply.github.com> Date: Wed, 19 Apr 2023 14:52:21 -0700 Subject: [PATCH] [MM-51805 + MM-51806 + MM-51041] Work template: multiple UI fixes (#22862) --- .../work_templates/components/customize.tsx | 3 +- .../work_templates/components/preview.tsx | 13 ++-- .../components/preview/accordion.tsx | 3 +- .../components/preview/section.tsx | 61 ++++++++++++++----- webapp/channels/src/i18n/en.json | 3 + 5 files changed, 62 insertions(+), 21 deletions(-) diff --git a/webapp/channels/src/components/work_templates/components/customize.tsx b/webapp/channels/src/components/work_templates/components/customize.tsx index 6d5639308c..07569122e9 100644 --- a/webapp/channels/src/components/work_templates/components/customize.tsx +++ b/webapp/channels/src/components/work_templates/components/customize.tsx @@ -165,7 +165,8 @@ const StyledCustomized = styled(Customize)` border-radius: 4px; border: 1px solid rgba(var(--center-channel-text-rgb), 0.16); &:focus { - border: 2px solid var(--button-bg); + border: 1px solid var(--button-bg); + box-shadow: inset 0 0 0 1px var(--button-bg); } } diff --git a/webapp/channels/src/components/work_templates/components/preview.tsx b/webapp/channels/src/components/work_templates/components/preview.tsx index 9e7ab6438e..14ea11265d 100644 --- a/webapp/channels/src/components/work_templates/components/preview.tsx +++ b/webapp/channels/src/components/work_templates/components/preview.tsx @@ -51,7 +51,8 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => { const [integrations, setIntegrations] = useState(); - const plugins: MarketplacePlugin[] = useSelector((state: GlobalState) => state.views.marketplace.plugins); + const marketplacePlugins: MarketplacePlugin[] = useSelector((state: GlobalState) => state.views.marketplace.plugins); + const loadedPlugins = useSelector((state: GlobalState) => state.plugins.plugins); const [illustrationDetails, setIllustrationDetails] = useState(() => { const defaultIllustration = getTemplateDefaultIllustration(template); @@ -130,13 +131,14 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => { const intg = availableIntegrations?. flatMap((integration) => { - return plugins.reduce((acc: Integration[], curr) => { + return marketplacePlugins.reduce((acc: Integration[], curr) => { if (curr.manifest.id === integration.id) { + const installed = Boolean(loadedPlugins[integration.id]); acc.push({ ...integration, name: curr.manifest.name, icon: curr.icon_data, - installed: curr.installed_version !== '', + installed, }); return acc; @@ -149,7 +151,7 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => { if (intg?.length) { setIntegrations(intg); } - }, [plugins, availableIntegrations, pluginsEnabled]); + }, [marketplacePlugins, availableIntegrations, loadedPlugins, pluginsEnabled]); // building accordion items const accordionItemsData: AccordionItemType[] = []; @@ -204,7 +206,7 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => { )], }); } - if (integrations?.length && pluginsEnabled) { + if (pluginsEnabled && integrations?.length) { accordionItemsData.push({ id: 'integrations', icon: , @@ -303,6 +305,7 @@ const StyledPreview = styled(Preview)` width: 387px; height: 416px; padding-right: 32px; + margin-top: 17px; } strong { diff --git a/webapp/channels/src/components/work_templates/components/preview/accordion.tsx b/webapp/channels/src/components/work_templates/components/preview/accordion.tsx index 41394b9dc4..02be467269 100644 --- a/webapp/channels/src/components/work_templates/components/preview/accordion.tsx +++ b/webapp/channels/src/components/work_templates/components/preview/accordion.tsx @@ -12,6 +12,7 @@ const Accordion = styled(LibAccordion)` .accordion-card { margin-bottom: 8px; border-radius: 4px; + border: 1px solid transparent; color: var(--center-channel-color); .accordion-card-header { @@ -46,7 +47,7 @@ const Accordion = styled(LibAccordion)` } &.active { - border: 1px solid var(--denim-button-bg); + border-color: var(--denim-button-bg); .accordion-card-header { color: var(--denim-button-bg); diff --git a/webapp/channels/src/components/work_templates/components/preview/section.tsx b/webapp/channels/src/components/work_templates/components/preview/section.tsx index 00ee7e8f13..3514da9b09 100644 --- a/webapp/channels/src/components/work_templates/components/preview/section.tsx +++ b/webapp/channels/src/components/work_templates/components/preview/section.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {ReactNode, useEffect, useState} from 'react'; +import React, {ReactNode, useCallback, useEffect, useState} from 'react'; import {useIntl} from 'react-intl'; import classnames from 'classnames'; import styled from 'styled-components'; @@ -110,6 +110,28 @@ const IntegrationsPreview = ({items, categoryId}: IntegrationPreviewSectionProps id: 'work_templates.preview.integrations.admin_install.notify', defaultMessage: 'Notify admin to install integrations.', }); + + const makeIntegrationSubtext = useCallback((integration: IntegrationPreviewSectionItemsProps) => { + if (integration.installed) { + return formatMessage({ + id: 'work_templates.preview.integrations.already_installed', + defaultMessage: 'Already installed', + }); + } + + if (!pluginInstallationPossible) { + return formatMessage({ + id: 'work_templates.preview.integrations.app_install', + defaultMessage: 'App Install', + }); + } + + return formatMessage({ + id: 'work_templates.preview.integrations.to_be_installed', + defaultMessage: 'To be installed', + }); + }, [pluginInstallationPossible, formatMessage]); + return (
@@ -119,15 +141,17 @@ const IntegrationsPreview = ({items, categoryId}: IntegrationPreviewSectionProps key={item.id} className={classnames('preview-integrations-plugins-item', {'preview-integrations-plugins-item__readonly': !item.installed && !pluginInstallationPossible})} > -
+
- {item.name} + {item.name}
+ + {makeIntegrationSubtext(item)} +
{item.installed && -
} - {!item.installed &&
} +
}
); })}
@@ -205,6 +229,7 @@ const StyledPreviewSection = styled(PreviewSection)` &-item { display: flex; + align-items: center; width: 128px; height: 48px; flex-basis: 45%; @@ -215,7 +240,7 @@ const StyledPreviewSection = styled(PreviewSection)` opacity: 65%; } - &__icon { + &__illustration { display: flex; width: 24px; height: 24px; @@ -227,22 +252,30 @@ const StyledPreviewSection = styled(PreviewSection)` width: 100%; height: 100%; } - - &_blue { - color: var(--denim-button-bg); - } } &__name { flex-grow: 2; - margin-top: 8px; color: var(--center-channel-text); font-family: 'Open Sans'; font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0.02em; - line-height: 22px; + line-height: 16px; + &-sub { + color: rgba(var(--center-channel-color-rgb), 0.72); + font-weight: 400; + font-size: 10px; + } + } + + &__icon { + align-self: flex-start; + + &_blue { + color: var(--denim-button-bg); + } } } } @@ -264,8 +297,8 @@ const StyledPreviewSection = styled(PreviewSection)` } .icon-check-circle::before { - margin-top: 8px; - margin-right: 8px; + margin-top: 2px; + margin-right: 2px; } .icon-download-outline::before { diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 88de5a0b7c..c5af857223 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -5784,6 +5784,9 @@ "work_templates.preview.integrations.admin_install.multiple_plugin": "Integrations will not be added until admin installs them.", "work_templates.preview.integrations.admin_install.notify": "Notify admin to install integrations", "work_templates.preview.integrations.admin_install.single_plugin": "{plugin} will not be added until admin installs it.", + "work_templates.preview.integrations.already_installed": "Already installed", + "work_templates.preview.integrations.app_install": "App Install", + "work_templates.preview.integrations.to_be_installed": "To be installed", "work_templates.preview.modal_cancel_button": "Back", "work_templates.preview.modal_next_button": "Next", "work_templates.preview.modal_title": "Preview {useCase}",