onTemplateSelected(service)}>
+
onTemplateSelected(service)}
+ data-cy='template-selector'
+ >
{service.name}
+ {service.validForm ? : }
)
}
@@ -58,17 +62,17 @@ function PluginSelector ({ onPluginSelected, service, plugin, pluginSelected })
onPluginSelected(service, plugin)}
+ data-cy='plugin-selector'
>
{plugin.name}
+ {plugin.validForm ? : }
+
)
}
-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 (
- {services.map(service => (
-
-
- {service.plugins.length > 0 &&
}
+ {configuredServices.map(configuredService => (
+
+
+ {configuredService.plugins.length > 0 &&
}
))}
@@ -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;