From 2a2abf556e7069619ee1a73a809fcda3b8a9f900 Mon Sep 17 00:00:00 2001
From: Antonio Sonis <anthonysonis@gmail.com>
Date: Thu, 30 Nov 2023 15:38:21 +0100
Subject: [PATCH] feat: adding check marks for validation of the form on
 template and already adding plugins

Signed-off-by: Antonio Sonis <anthonysonis@gmail.com>
---
 .../ConfigureEnvVarsTemplateAndPlugins.jsx    |  1 +
 .../configure-services/ConfigureServices.jsx  |  1 +
 .../TemplateAndPluginTreeSelector.jsx         | 33 ++++++++++++-------
 .../TemplateAndPluginTreeSelector.module.css  |  2 +-
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx b/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx
index 5e9d5709..006b2bbf 100644
--- a/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx
+++ b/src/renderer/src/components/steps/configure-services/ConfigureEnvVarsTemplateAndPlugins.jsx
@@ -57,6 +57,7 @@ function ConfigureEnvVarsTemplateAndPlugins ({
   return (
     <div className={`${commonStyles.mediumFlexRow} ${commonStyles.itemsStart} ${styles.scrollableSection}`}>
       <TemplateAndPluginTreeSelector
+        configuredServices={configuredServices}
         pluginSelected={pluginSelected}
         serviceSelected={serviceSelected}
         onTemplateSelected={onServiceSelected}
diff --git a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
index 73b67e13..1ad7db6c 100644
--- a/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
+++ b/src/renderer/src/components/steps/configure-services/ConfigureServices.jsx
@@ -59,6 +59,7 @@ const ConfigureServices = React.forwardRef(({ onNext }, ref) => {
         tmpObj.validations = { ...tmpTemplateValidations }
         tmpObj.validForm = tmpTemplateValidForm
         tmpObj.updatedAt = new Date().toISOString()
+        tmpObj.plugins = []
       })
       setConfiguredServices([...configuredServices, tmpObj])
     }
diff --git a/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx b/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx
index 4988ad54..47520f97 100644
--- a/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx
+++ b/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.jsx
@@ -1,23 +1,27 @@
 'use strict'
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { MEDIUM, SMALL, TRANSPARENT, WHITE } from '@platformatic/ui-components/src/components/constants'
+import { ERROR_RED, MAIN_GREEN, MEDIUM, SMALL, TRANSPARENT, WHITE } from '@platformatic/ui-components/src/components/constants'
 import Icons from '@platformatic/ui-components/src/components/icons'
 import typographyStyles from '~/styles/Typography.module.css'
 import styles from './TemplateAndPluginTreeSelector.module.css'
 import commonStyles from '~/styles/CommonStyles.module.css'
 import { BorderedBox, PlatformaticIcon } from '@platformatic/ui-components'
-import useStackablesStore from '~/useStackablesStore'
 
 function TemplateSelector ({ onTemplateSelected, service, serviceSelected }) {
   let className = `${typographyStyles.desktopHeadline5} ${typographyStyles.textWhite} ${styles.ellipsisTemplate}`
-  if (serviceSelected?.template !== service.template.name) {
+  if (serviceSelected?.template !== service.template) {
     className += ` ${typographyStyles.opacity70}`
   }
   return (
-    <div className={`${commonStyles.smallFlexRow} ${styles.cursorPointer} ${styles.overflowHidden}`} onClick={() => onTemplateSelected(service)}>
+    <div
+      className={`${commonStyles.smallFlexRow} ${styles.cursorPointer} ${styles.overflowHidden}`}
+      onClick={() => onTemplateSelected(service)}
+      data-cy='template-selector'
+    >
       <Icons.ServiceIcon color={WHITE} size={MEDIUM} />
       <h5 className={className}>{service.name}</h5>
+      {service.validForm ? <Icons.CircleCheckMarkIcon color={MAIN_GREEN} size={SMALL} /> : <Icons.AlertIcon color={ERROR_RED} size={SMALL} />}
     </div>
   )
 }
@@ -58,17 +62,17 @@ function PluginSelector ({ onPluginSelected, service, plugin, pluginSelected })
     <div
       className={`${commonStyles.smallFlexRow} ${commonStyles.fullWidth} ${styles.cursorPointer} ${styles.overflowHidden}`}
       onClick={() => onPluginSelected(service, plugin)}
+      data-cy='plugin-selector'
     >
       <Icons.StackablesPluginIcon color={WHITE} size={SMALL} />
       <span className={className} title={plugin.name}>{plugin.name}</span>
+      {plugin.validForm ? <Icons.CircleCheckMarkIcon color={MAIN_GREEN} size={SMALL} /> : <Icons.AlertIcon color={ERROR_RED} size={SMALL} />}
+
     </div>
   )
 }
 
-function TemplateAndPluginTreeSelector ({ onTemplateSelected, onPluginSelected, serviceSelected, pluginSelected }) {
-  const globalState = useStackablesStore()
-  const { services } = globalState
-
+function TemplateAndPluginTreeSelector ({ configuredServices, onTemplateSelected, onPluginSelected, serviceSelected, pluginSelected }) {
   function handlePluginSelected (service, plugin) {
     onPluginSelected(service, plugin)
   }
@@ -76,10 +80,10 @@ function TemplateAndPluginTreeSelector ({ onTemplateSelected, onPluginSelected,
   return (
     <BorderedBox color={WHITE} borderColorOpacity={30} backgroundColor={TRANSPARENT} classes={`${commonStyles.fullWidth} ${styles.container}`}>
       <div className={`${commonStyles.mediumFlexBlock} ${commonStyles.fullWidth}`}>
-        {services.map(service => (
-          <div className={`${commonStyles.smallFlexBlock} ${commonStyles.fullWidth} ${commonStyles.overflowHidden}`} key={service.name}>
-            <TemplateSelector onTemplateSelected={onTemplateSelected} service={{ ...service }} serviceSelected={serviceSelected} />
-            {service.plugins.length > 0 && <PluginsContainer service={service} onPluginSelected={handlePluginSelected} pluginSelected={pluginSelected} />}
+        {configuredServices.map(configuredService => (
+          <div className={`${commonStyles.smallFlexBlock} ${commonStyles.fullWidth} ${commonStyles.overflowHidden}`} key={configuredService.name}>
+            <TemplateSelector onTemplateSelected={onTemplateSelected} service={{ ...configuredService }} serviceSelected={serviceSelected} />
+            {configuredService.plugins.length > 0 && <PluginsContainer service={configuredService} onPluginSelected={handlePluginSelected} pluginSelected={pluginSelected} />}
           </div>
         ))}
       </div>
@@ -88,6 +92,11 @@ function TemplateAndPluginTreeSelector ({ onTemplateSelected, onPluginSelected,
 }
 
 TemplateAndPluginTreeSelector.propTypes = {
+  /**
+   * configuredServices
+    */
+  configuredServices: PropTypes.array.isRequired,
+  /**
   /**
    * onTemplateSelected
     */
diff --git a/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.module.css b/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.module.css
index 82ad7bf6..031f222b 100644
--- a/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.module.css
+++ b/src/renderer/src/components/template-and-plugins/TemplateAndPluginTreeSelector.module.css
@@ -10,7 +10,7 @@
 }
 .ellipsisTemplate {
   @apply truncate;
-  width: 12rem;
+  max-width: 10rem;
 }
 .ellipsisPlugin {
   @apply truncate;