[MM-51805 + MM-51806 + MM-51041] Work template: multiple UI fixes (#22862)

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);
         }
     }
 

webapp/channels/src/components/work_templates/components/preview.tsx

@@ -51,7 +51,8 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => {
 
     const [integrations, setIntegrations] = useState<Integration[]>();
 
-    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<IllustrationAnimations>(() => {
         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: <i className='icon-power-plug-outline'/>,
@@ -303,6 +305,7 @@ const StyledPreview = styled(Preview)`
         width: 387px;
         height: 416px;
         padding-right: 32px;
+        margin-top: 17px;
     }
 
     strong {

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);

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 (
         <div className='preview-integrations'>
             <div className='preview-integrations-plugins'>
@@ -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})}
                         >
-                            <div className='preview-integrations-plugins-item__icon'>
+                            <div className='preview-integrations-plugins-item__illustration'>
                                 <img src={item.icon}/>
                             </div>
                             <div className='preview-integrations-plugins-item__name'>
-                                {item.name}
+                                {item.name}<br/>
+                                <span className='preview-integrations-plugins-item__name-sub'>
+                                    {makeIntegrationSubtext(item)}
+                                </span>
                             </div>
                             {item.installed &&
-                                <div className='icon-check-circle preview-integrations-plugins-item__icon_blue'/>}
+                                <div className='preview-integrations-plugins-item__icon icon-check-circle preview-integrations-plugins-item__icon_blue'/>}
-                            {!item.installed && <div className='icon-download-outline'/>}
                         </div>);
                 })}
             </div>
@@ -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-top: 2px;
-        margin-right: 8px;
+        margin-right: 2px;
     }
 
     .icon-download-outline::before {

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}",