fix(templates): show docker-compose app templates when in swarm mode [EE-2117] (#6177)

* fix(templates): EE-2117: show docker-compose app templates when in swarm mode and the user selects 'showContainers

Signed-off-by: Sven Dowideit <sven.dowideit@portainer.io>

* fix(templates): keep original behavior for standalone

* fix(templates): display all templates on Swarm

* refactor(templates): update method name

Co-authored-by: deviantony <anthony.lapenna@portainer.io>

app/portainer/components/template-list/template-list-controller.js

@@ -16,12 +16,26 @@ function TemplateListController($async, $state, DatatableService, Notifications,
     DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
   };
 
+  this.filterByTemplateType = function (item) {
+    switch (item.Type) {
+      case 1: // container
+        return ctrl.state.showContainerTemplates;
+      case 2: // swarm stack
+        return ctrl.showSwarmStacks;
+      case 3: // docker compose
+        return !ctrl.showSwarmStacks || (ctrl.showSwarmStacks && ctrl.state.showContainerTemplates);
+      case 4: // Edge stack templates
+        return false;
+    }
+    return false;
+  };
+
   this.updateCategories = function () {
     var availableCategories = [];
 
     for (var i = 0; i < ctrl.templates.length; i++) {
       var template = ctrl.templates[i];
-      if ((template.Type === 1 && ctrl.state.showContainerTemplates) || (template.Type === 2 && ctrl.showSwarmStacks) || (template.Type === 3 && !ctrl.showSwarmStacks)) {
+      if (this.filterByTemplateType(template)) {
         availableCategories = availableCategories.concat(template.Categories);
       }
     }
@@ -37,13 +51,6 @@ function TemplateListController($async, $state, DatatableService, Notifications,
     return _.includes(item.Categories, ctrl.state.selectedCategory);
   };
 
-  this.filterByType = function (item) {
-    if ((item.Type === 1 && ctrl.state.showContainerTemplates) || (item.Type === 2 && ctrl.showSwarmStacks) || (item.Type === 3 && !ctrl.showSwarmStacks)) {
-      return true;
-    }
-    return false;
-  };
-
   this.duplicateTemplate = duplicateTemplate.bind(this);
   this.duplicateTemplateAsync = duplicateTemplateAsync.bind(this);
   function duplicateTemplate(template) {

app/portainer/components/template-list/templateList.html

@@ -45,7 +45,7 @@
 
       <div class="blocklist">
         <template-item
-          ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
+          ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
           model="template"
           type-label="{{ template.Type === 1 ? 'container' : 'stack' }}"
           on-select="($ctrl.selectAction)"
@@ -55,7 +55,10 @@
           </template-item-actions>
         </template-item>
         <div ng-if="!$ctrl.templates" class="text-center text-muted"> Loading... </div>
-        <div ng-if="($ctrl.templates | filter: $ctrl.filterByType | filter: $ctrl.filterByCategory | filter: $ctrl.state.textFilter).length === 0" class="text-center text-muted">
+        <div
+          ng-if="($ctrl.templates | filter: $ctrl.filterByTemplateType | filter: $ctrl.filterByCategory | filter: $ctrl.state.textFilter).length === 0"
+          class="text-center text-muted"
+        >
           No templates available.
         </div>
       </div>

app/portainer/views/templates/templatesController.js

@@ -259,7 +259,7 @@ angular.module('portainer.app').controller('TemplatesController', [
           deployable = endpoint.mode.provider === DOCKER_SWARM_MODE;
           break;
         case 3:
-          deployable = endpoint.mode.provider === DOCKER_STANDALONE;
+          deployable = endpoint.mode.provider === DOCKER_SWARM_MODE || endpoint.mode.provider === DOCKER_STANDALONE;
           break;
       }
       return deployable;