fix(libcompose): apply same normalize name rule as libcompose on stack name (#3395)

api/http/handler/stacks/create_compose_stack.go

@@ -4,6 +4,7 @@ import (
 	"errors"
 	"net/http"
 	"path"
+	"regexp"
 	"strconv"
 	"strings"
 
@@ -15,6 +16,13 @@ import (
 	"github.com/portainer/portainer/api/http/security"
 )
 
+// this is coming from libcompose
+// https://github.com/portainer/libcompose/blob/master/project/context.go#L117-L120
+func normalizeStackName(name string) string {
+	r := regexp.MustCompile("[^a-z0-9]+")
+	return r.ReplaceAllString(strings.ToLower(name), "")
+}
+
 type composeStackFromFileContentPayload struct {
 	Name             string
 	StackFileContent string
@@ -25,6 +33,7 @@ func (payload *composeStackFromFileContentPayload) Validate(r *http.Request) err
 	if govalidator.IsNull(payload.Name) {
 		return portainer.Error("Invalid stack name")
 	}
+	payload.Name = normalizeStackName(payload.Name)
 	if govalidator.IsNull(payload.StackFileContent) {
 		return portainer.Error("Invalid stack file content")
 	}
@@ -103,6 +112,7 @@ func (payload *composeStackFromGitRepositoryPayload) Validate(r *http.Request) e
 	if govalidator.IsNull(payload.Name) {
 		return portainer.Error("Invalid stack name")
 	}
+	payload.Name = normalizeStackName(payload.Name)
 	if govalidator.IsNull(payload.RepositoryURL) || !govalidator.IsURL(payload.RepositoryURL) {
 		return portainer.Error("Invalid repository URL. Must correspond to a valid URL format")
 	}
@@ -193,7 +203,7 @@ func (payload *composeStackFromFileUploadPayload) Validate(r *http.Request) erro
 	if err != nil {
 		return portainer.Error("Invalid stack name")
 	}
-	payload.Name = name
+	payload.Name = normalizeStackName(name)
 
 	composeFileContent, _, err := request.RetrieveMultiPartFormFile(r, "file")
 	if err != nil {

app/portainer/views/stacks/create/createstack.html

@@ -14,7 +14,7 @@
           <div class="form-group">
             <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="stack_name" placeholder="e.g. myStack" auto-focus>
+              <input type="text" class="form-control" ng-model="formValues.Name" id="stack_name" placeholder="e.g. mystack" auto-focus>
             </div>
           </div>
           <!-- !name-input -->
@@ -24,6 +24,9 @@
             </span>
             <span class="col-sm-12 text-muted small" ng-if="state.StackType === 2">
               This stack will be deployed using the equivalent of <code>docker-compose</code>. Only Compose file format version <b>2</b> is supported at the moment.
+              <br/><br/>
+              <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+              Note: Due to a limitation of libcompose, the name of the stack will be standardized to remove all special characters and uppercase letters.
             </span>
           </div>
           <!-- build-method -->