refactor(ui/button): remove duplicate data-cy

Co-authored-by: Chaim Lev-Ari <chaim.levi-ari@portaienr.io>

.eslintrc.yml

@@ -140,9 +140,11 @@ overrides:
       'react/jsx-no-constructed-context-values': off
       '@typescript-eslint/no-restricted-imports': off
       no-restricted-imports: off
+      'react/jsx-props-no-spreading': off
   - files:
       - app/**/*.stories.*
     rules:
       'no-alert': off
       '@typescript-eslint/no-restricted-imports': off
       no-restricted-imports: off
+      'react/jsx-props-no-spreading': off

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -93,6 +93,8 @@ body:
       description: We only provide support for the most recent version of Portainer and the previous 3 versions. If you are on an older version of Portainer we recommend [upgrading first](https://docs.portainer.io/start/upgrade) in case your bug has already been fixed.
       multiple: false
       options:
+        - '2.20.1'
+        - '2.20.0'
         - '2.19.4'
         - '2.19.3'
         - '2.19.2'

api/backup/restore.go

@@ -26,7 +26,7 @@ func RestoreArchive(archive io.Reader, password string, filestorePath string, ga
 	if password != "" {
 		archive, err = decrypt(archive, password)
 		if err != nil {
-			return errors.Wrap(err, "failed to decrypt the archive")
+			return errors.Wrap(err, "failed to decrypt the archive. Please ensure the password is correct and try again")
 		}
 	}
 

api/chisel/service_test.go

@@ -1,6 +1,7 @@
 package chisel
 
 import (
+	"context"
 	"net"
 	"net/http"
 	"testing"
@@ -28,12 +29,17 @@ func TestPingAgentPanic(t *testing.T) {
 	ln, err := net.ListenTCP("tcp", &net.TCPAddr{IP: net.IPv4(127, 0, 0, 1), Port: 0})
 	require.NoError(t, err)
 
+	srv := &http.Server{Handler: mux}
+
+	errCh := make(chan error)
 	go func() {
-		require.NoError(t, http.Serve(ln, mux))
+		errCh <- srv.Serve(ln)
 	}()
 
 	s.getTunnelDetails(endpointID)
 	s.tunnelDetailsMap[endpointID].Port = ln.Addr().(*net.TCPAddr).Port
 
 	require.Error(t, s.pingAgent(endpointID))
+	require.NoError(t, srv.Shutdown(context.Background()))
+	require.ErrorIs(t, <-errCh, http.ErrServerClosed)
 }

api/cli/cli.go

@@ -62,7 +62,7 @@ func (*Service) ParseFlags(version string) (*portainer.CLIFlags, error) {
 		MaxBatchDelay:             kingpin.Flag("max-batch-delay", "Maximum delay before a batch starts").Duration(),
 		SecretKeyName:             kingpin.Flag("secret-key-name", "Secret key name for encryption and will be used as /run/secrets/<secret-key-name>.").Default(defaultSecretKeyName).String(),
 		LogLevel:                  kingpin.Flag("log-level", "Set the minimum logging level to show").Default("INFO").Enum("DEBUG", "INFO", "WARN", "ERROR"),
-		LogMode:                   kingpin.Flag("log-mode", "Set the logging output mode").Default("PRETTY").Enum("PRETTY", "JSON"),
+		LogMode:                   kingpin.Flag("log-mode", "Set the logging output mode").Default("PRETTY").Enum("NOCOLOR", "PRETTY", "JSON"),
 	}
 
 	kingpin.Parse()

api/cmd/portainer/log.go

@@ -42,6 +42,13 @@ func setLoggingMode(mode string) {
 			TimeFormat:    "2006/01/02 03:04PM",
 			FormatMessage: formatMessage,
 		})
+	case "NOCOLOR":
+		log.Logger = log.Output(zerolog.ConsoleWriter{
+			Out:           os.Stderr,
+			TimeFormat:    "2006/01/02 03:04PM",
+			FormatMessage: formatMessage,
+			NoColor:       true,
+		})
 	case "JSON":
 		log.Logger = log.Output(os.Stderr)
 	}

api/crypto/aes.go

@@ -1,52 +1,216 @@
 package crypto
 
 import (
+	"bufio"
+	"bytes"
 	"crypto/aes"
 	"crypto/cipher"
+	"crypto/rand"
+	"errors"
+	"fmt"
 	"io"
 
+	"golang.org/x/crypto/argon2"
 	"golang.org/x/crypto/scrypt"
 )
 
-// NOTE: has to go with what is considered to be a simplistic in that it omits any
-// authentication of the encrypted data.
-// Person with better knowledge is welcomed to improve it.
-// sourced from https://golang.org/src/crypto/cipher/example_test.go
+const (
+	// AES GCM settings
+	aesGcmHeader    = "AES256-GCM" // The encrypted file header
+	aesGcmBlockSize = 1024 * 1024  // 1MB block for aes gcm
 
-var emptySalt []byte = make([]byte, 0)
+	// Argon2 settings
+	// Recommded settings lower memory hardware according to current OWASP recommendations
+	// Considering some people run portainer on a NAS I think it's prudent not to assume we're on server grade hardware
+	// https://cheatsheetseries.owasp.org/cheatsheets/Password_Storage_Cheat_Sheet.html#argon2id
+	argon2MemoryCost = 12 * 1024
+	argon2TimeCost   = 3
+	argon2Threads    = 1
+	argon2KeyLength  = 32
+)
 
-// AesEncrypt reads from input, encrypts with AES-256 and writes to the output.
-// passphrase is used to generate an encryption key.
+// AesEncrypt reads from input, encrypts with AES-256 and writes to output. passphrase is used to generate an encryption key
 func AesEncrypt(input io.Reader, output io.Writer, passphrase []byte) error {
-	// making a 32 bytes key that would correspond to AES-256
-	// don't necessarily need a salt, so just kept in empty
-	key, err := scrypt.Key(passphrase, emptySalt, 32768, 8, 1, 32)
+	err := aesEncryptGCM(input, output, passphrase)
 	if err != nil {
-		return err
-	}
-
-	block, err := aes.NewCipher(key)
-	if err != nil {
-		return err
-	}
-
-	// If the key is unique for each ciphertext, then it's ok to use a zero
-	// IV.
-	var iv [aes.BlockSize]byte
-	stream := cipher.NewOFB(block, iv[:])
-
-	writer := &cipher.StreamWriter{S: stream, W: output}
-	// Copy the input to the output, encrypting as we go.
-	if _, err := io.Copy(writer, input); err != nil {
-		return err
+		return fmt.Errorf("error encrypting file: %w", err)
 	}
 
 	return nil
 }
 
-// AesDecrypt reads from input, decrypts with AES-256 and returns the reader to a read decrypted content from.
-// passphrase is used to generate an encryption key.
+// AesDecrypt reads from input, decrypts with AES-256 and returns the reader to read the decrypted content from
 func AesDecrypt(input io.Reader, passphrase []byte) (io.Reader, error) {
+	// Read file header to determine how it was encrypted
+	inputReader := bufio.NewReader(input)
+	header, err := inputReader.Peek(len(aesGcmHeader))
+	if err != nil {
+		return nil, fmt.Errorf("error reading encrypted backup file header: %w", err)
+	}
+
+	if string(header) == aesGcmHeader {
+		reader, err := aesDecryptGCM(inputReader, passphrase)
+		if err != nil {
+			return nil, fmt.Errorf("error decrypting file: %w", err)
+		}
+
+		return reader, nil
+	}
+
+	// Use the previous decryption routine which has no header (to support older archives)
+	reader, err := aesDecryptOFB(inputReader, passphrase)
+	if err != nil {
+		return nil, fmt.Errorf("error decrypting legacy file backup: %w", err)
+	}
+
+	return reader, nil
+}
+
+// aesEncryptGCM reads from input, encrypts with AES-256 and writes to output. passphrase is used to generate an encryption key.
+func aesEncryptGCM(input io.Reader, output io.Writer, passphrase []byte) error {
+	// Derive key using argon2 with a random salt
+	salt := make([]byte, 16) // 16 bytes salt
+	if _, err := io.ReadFull(rand.Reader, salt); err != nil {
+		return err
+	}
+
+	key := argon2.IDKey(passphrase, salt, argon2TimeCost, argon2MemoryCost, argon2Threads, 32)
+	block, err := aes.NewCipher(key)
+	if err != nil {
+		return err
+	}
+
+	aesgcm, err := cipher.NewGCM(block)
+	if err != nil {
+		return err
+	}
+
+	// Generate nonce
+	nonce, err := NewRandomNonce(aesgcm.NonceSize())
+	if err != nil {
+		return err
+	}
+
+	// write the header
+	if _, err := output.Write([]byte(aesGcmHeader)); err != nil {
+		return err
+	}
+
+	// Write nonce and salt to the output file
+	if _, err := output.Write(salt); err != nil {
+		return err
+	}
+	if _, err := output.Write(nonce.Value()); err != nil {
+		return err
+	}
+
+	// Buffer for reading plaintext blocks
+	buf := make([]byte, aesGcmBlockSize) // Adjust buffer size as needed
+	ciphertext := make([]byte, len(buf)+aesgcm.Overhead())
+
+	// Encrypt plaintext in blocks
+	for {
+		n, err := io.ReadFull(input, buf)
+		if n == 0 {
+			break // end of plaintext input
+		}
+
+		if err != nil && !(errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF)) {
+			return err
+		}
+
+		// Seal encrypts the plaintext using the nonce returning the updated slice.
+		ciphertext = aesgcm.Seal(ciphertext[:0], nonce.Value(), buf[:n], nil)
+
+		_, err = output.Write(ciphertext)
+		if err != nil {
+			return err
+		}
+
+		nonce.Increment()
+	}
+
+	return nil
+}
+
+// aesDecryptGCM reads from input, decrypts with AES-256 and returns the reader to read the decrypted content from.
+func aesDecryptGCM(input io.Reader, passphrase []byte) (io.Reader, error) {
+	// Reader & verify header
+	header := make([]byte, len(aesGcmHeader))
+	if _, err := io.ReadFull(input, header); err != nil {
+		return nil, err
+	}
+
+	if string(header) != aesGcmHeader {
+		return nil, fmt.Errorf("invalid header")
+	}
+
+	// Read salt
+	salt := make([]byte, 16) // Salt size
+	if _, err := io.ReadFull(input, salt); err != nil {
+		return nil, err
+	}
+
+	key := argon2.IDKey(passphrase, salt, argon2TimeCost, argon2MemoryCost, argon2Threads, 32)
+
+	// Initialize AES cipher block
+	block, err := aes.NewCipher(key)
+	if err != nil {
+		return nil, err
+	}
+
+	// Create GCM mode with the cipher block
+	aesgcm, err := cipher.NewGCM(block)
+	if err != nil {
+		return nil, err
+	}
+
+	// Read nonce from the input reader
+	nonce := NewNonce(aesgcm.NonceSize())
+	if err := nonce.Read(input); err != nil {
+		return nil, err
+	}
+
+	// Initialize a buffer to store decrypted data
+	buf := bytes.Buffer{}
+	plaintext := make([]byte, aesGcmBlockSize)
+
+	// Decrypt the ciphertext in blocks
+	for {
+		// Read a block of ciphertext from the input reader
+		ciphertextBlock := make([]byte, aesGcmBlockSize+aesgcm.Overhead()) // Adjust block size as needed
+		n, err := io.ReadFull(input, ciphertextBlock)
+		if n == 0 {
+			break // end of ciphertext
+		}
+
+		if err != nil && !(errors.Is(err, io.EOF) || errors.Is(err, io.ErrUnexpectedEOF)) {
+			return nil, err
+		}
+
+		// Decrypt the block of ciphertext
+		plaintext, err = aesgcm.Open(plaintext[:0], nonce.Value(), ciphertextBlock[:n], nil)
+		if err != nil {
+			return nil, err
+		}
+
+		_, err = buf.Write(plaintext)
+		if err != nil {
+			return nil, err
+		}
+
+		nonce.Increment()
+	}
+
+	return &buf, nil
+}
+
+// aesDecryptOFB reads from input, decrypts with AES-256 and returns the reader to a read decrypted content from.
+// passphrase is used to generate an encryption key.
+// note: This function used to decrypt files that were encrypted without a header i.e. old archives
+func aesDecryptOFB(input io.Reader, passphrase []byte) (io.Reader, error) {
+	var emptySalt []byte = make([]byte, 0)
+
 	// making a 32 bytes key that would correspond to AES-256
 	// don't necessarily need a salt, so just kept in empty
 	key, err := scrypt.Key(passphrase, emptySalt, 32768, 8, 1, 32)
@@ -59,11 +223,9 @@ func AesDecrypt(input io.Reader, passphrase []byte) (io.Reader, error) {
 		return nil, err
 	}
 
-	// If the key is unique for each ciphertext, then it's ok to use a zero
-	// IV.
+	// If the key is unique for each ciphertext, then it's ok to use a zero IV.
 	var iv [aes.BlockSize]byte
 	stream := cipher.NewOFB(block, iv[:])
-
 	reader := &cipher.StreamReader{S: stream, R: input}
 
 	return reader, nil

api/crypto/aes_test.go

@@ -2,6 +2,7 @@ package crypto
 
 import (
 	"io"
+	"math/rand"
 	"os"
 	"path/filepath"
 	"testing"
@@ -9,7 +10,19 @@ import (
 	"github.com/stretchr/testify/assert"
 )
 
+const letterBytes = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
+
+func randBytes(n int) []byte {
+	b := make([]byte, n)
+	for i := range b {
+		b[i] = letterBytes[rand.Intn(len(letterBytes))]
+	}
+	return b
+}
+
 func Test_encryptAndDecrypt_withTheSamePassword(t *testing.T) {
+	const passphrase = "passphrase"
+
 	tmpdir := t.TempDir()
 
 	var (
@@ -18,17 +31,99 @@ func Test_encryptAndDecrypt_withTheSamePassword(t *testing.T) {
 		decryptedFilePath = filepath.Join(tmpdir, "decrypted")
 	)
 
-	content := []byte("content")
+	content := randBytes(1024*1024*100 + 523)
+	os.WriteFile(originFilePath, content, 0600)
+
+	originFile, _ := os.Open(originFilePath)
+	defer originFile.Close()
+
+	encryptedFileWriter, _ := os.Create(encryptedFilePath)
+
+	err := AesEncrypt(originFile, encryptedFileWriter, []byte(passphrase))
+	assert.Nil(t, err, "Failed to encrypt a file")
+	encryptedFileWriter.Close()
+
+	encryptedContent, err := os.ReadFile(encryptedFilePath)
+	assert.Nil(t, err, "Couldn't read encrypted file")
+	assert.NotEqual(t, encryptedContent, content, "Content wasn't encrypted")
+
+	encryptedFileReader, _ := os.Open(encryptedFilePath)
+	defer encryptedFileReader.Close()
+
+	decryptedFileWriter, _ := os.Create(decryptedFilePath)
+	defer decryptedFileWriter.Close()
+
+	decryptedReader, err := AesDecrypt(encryptedFileReader, []byte(passphrase))
+	assert.Nil(t, err, "Failed to decrypt file")
+
+	io.Copy(decryptedFileWriter, decryptedReader)
+
+	decryptedContent, _ := os.ReadFile(decryptedFilePath)
+	assert.Equal(t, content, decryptedContent, "Original and decrypted content should match")
+}
+
+func Test_encryptAndDecrypt_withStrongPassphrase(t *testing.T) {
+	const passphrase = "A strong passphrase with special characters: !@#$%^&*()_+"
+	tmpdir := t.TempDir()
+
+	var (
+		originFilePath    = filepath.Join(tmpdir, "origin2")
+		encryptedFilePath = filepath.Join(tmpdir, "encrypted2")
+		decryptedFilePath = filepath.Join(tmpdir, "decrypted2")
+	)
+
+	content := randBytes(500)
+	os.WriteFile(originFilePath, content, 0600)
+
+	originFile, _ := os.Open(originFilePath)
+	defer originFile.Close()
+
+	encryptedFileWriter, _ := os.Create(encryptedFilePath)
+
+	err := AesEncrypt(originFile, encryptedFileWriter, []byte(passphrase))
+	assert.Nil(t, err, "Failed to encrypt a file")
+	encryptedFileWriter.Close()
+
+	encryptedContent, err := os.ReadFile(encryptedFilePath)
+	assert.Nil(t, err, "Couldn't read encrypted file")
+	assert.NotEqual(t, encryptedContent, content, "Content wasn't encrypted")
+
+	encryptedFileReader, _ := os.Open(encryptedFilePath)
+	defer encryptedFileReader.Close()
+
+	decryptedFileWriter, _ := os.Create(decryptedFilePath)
+	defer decryptedFileWriter.Close()
+
+	decryptedReader, err := AesDecrypt(encryptedFileReader, []byte(passphrase))
+	assert.Nil(t, err, "Failed to decrypt file")
+
+	io.Copy(decryptedFileWriter, decryptedReader)
+
+	decryptedContent, _ := os.ReadFile(decryptedFilePath)
+	assert.Equal(t, content, decryptedContent, "Original and decrypted content should match")
+}
+
+func Test_encryptAndDecrypt_withTheSamePasswordSmallFile(t *testing.T) {
+	tmpdir := t.TempDir()
+
+	var (
+		originFilePath    = filepath.Join(tmpdir, "origin2")
+		encryptedFilePath = filepath.Join(tmpdir, "encrypted2")
+		decryptedFilePath = filepath.Join(tmpdir, "decrypted2")
+	)
+
+	content := randBytes(500)
 	os.WriteFile(originFilePath, content, 0600)
 
 	originFile, _ := os.Open(originFilePath)
 	defer originFile.Close()
 
 	encryptedFileWriter, _ := os.Create(encryptedFilePath)
-	defer encryptedFileWriter.Close()
 
 	err := AesEncrypt(originFile, encryptedFileWriter, []byte("passphrase"))
 	assert.Nil(t, err, "Failed to encrypt a file")
+	encryptedFileWriter.Close()
+
 	encryptedContent, err := os.ReadFile(encryptedFilePath)
 	assert.Nil(t, err, "Couldn't read encrypted file")
 	assert.NotEqual(t, encryptedContent, content, "Content wasn't encrypted")
@@ -57,7 +152,7 @@ func Test_encryptAndDecrypt_withEmptyPassword(t *testing.T) {
 		decryptedFilePath = filepath.Join(tmpdir, "decrypted")
 	)
 
-	content := []byte("content")
+	content := randBytes(1024 * 50)
 	os.WriteFile(originFilePath, content, 0600)
 
 	originFile, _ := os.Open(originFilePath)
@@ -96,7 +191,7 @@ func Test_decryptWithDifferentPassphrase_shouldProduceWrongResult(t *testing.T)
 		decryptedFilePath = filepath.Join(tmpdir, "decrypted")
 	)
 
-	content := []byte("content")
+	content := randBytes(1034)
 	os.WriteFile(originFilePath, content, 0600)
 
 	originFile, _ := os.Open(originFilePath)
@@ -117,11 +212,6 @@ func Test_decryptWithDifferentPassphrase_shouldProduceWrongResult(t *testing.T)
 	decryptedFileWriter, _ := os.Create(decryptedFilePath)
 	defer decryptedFileWriter.Close()
 
-	decryptedReader, err := AesDecrypt(encryptedFileReader, []byte("garbage"))
-	assert.Nil(t, err, "Should allow to decrypt with wrong passphrase")
-
-	io.Copy(decryptedFileWriter, decryptedReader)
-
-	decryptedContent, _ := os.ReadFile(decryptedFilePath)
-	assert.NotEqual(t, content, decryptedContent, "Original and decrypted content should NOT match")
+	_, err = AesDecrypt(encryptedFileReader, []byte("garbage"))
+	assert.NotNil(t, err, "Should not allow decrypt with wrong passphrase")
 }

api/crypto/nonce.go

@@ -0,0 +1,61 @@
+package crypto
+
+import (
+	"crypto/rand"
+	"errors"
+	"io"
+)
+
+type Nonce struct {
+	val []byte
+}
+
+func NewNonce(size int) *Nonce {
+	return &Nonce{val: make([]byte, size)}
+}
+
+// NewRandomNonce generates a new initial nonce with the lower byte set to a random value
+// This ensures there are plenty of nonce values availble before rolling over
+// Based on ideas from the Secure Programming Cookbook for C and C++ by John Viega, Matt Messier
+// https://www.oreilly.com/library/view/secure-programming-cookbook/0596003943/ch04s09.html
+func NewRandomNonce(size int) (*Nonce, error) {
+	randomBytes := 1
+	if size <= randomBytes {
+		return nil, errors.New("nonce size must be greater than the number of random bytes")
+	}
+
+	randomPart := make([]byte, randomBytes)
+	if _, err := rand.Read(randomPart); err != nil {
+		return nil, err
+	}
+
+	zeroPart := make([]byte, size-randomBytes)
+	nonceVal := append(randomPart, zeroPart...)
+	return &Nonce{val: nonceVal}, nil
+}
+
+func (n *Nonce) Read(stream io.Reader) error {
+	_, err := io.ReadFull(stream, n.val)
+	return err
+}
+
+func (n *Nonce) Value() []byte {
+	return n.val
+}
+
+func (n *Nonce) Increment() error {
+	// Start incrementing from the least significant byte
+	for i := len(n.val) - 1; i >= 0; i-- {
+		// Increment the current byte
+		n.val[i]++
+
+		// Check for overflow
+		if n.val[i] != 0 {
+			// No overflow, nonce is successfully incremented
+			return nil
+		}
+	}
+
+	// If we reach here, it means the nonce has overflowed
+	return errors.New("nonce overflow")
+}

api/datastore/test_data/output_24_to_latest.json

@@ -939,6 +939,6 @@
     }
   ],
   "version": {
-    "VERSION": "{\"SchemaVersion\":\"2.20.0\",\"MigratorCount\":2,\"Edition\":1,\"InstanceID\":\"463d5c47-0ea5-4aca-85b1-405ceefee254\"}"
+    "VERSION": "{\"SchemaVersion\":\"2.22.0\",\"MigratorCount\":0,\"Edition\":1,\"InstanceID\":\"463d5c47-0ea5-4aca-85b1-405ceefee254\"}"
   }
 }

api/http/handler/handler.go

@@ -85,7 +85,7 @@ type Handler struct {
 }
 
 // @title PortainerCE API
-// @version 2.20.0
+// @version 2.22.0
 // @description.markdown api-description.md
 // @termsOfService
 

api/http/handler/stacks/stack_list.go

@@ -92,25 +92,55 @@ func (handler *Handler) stackList(w http.ResponseWriter, r *http.Request) *httpe
 	return response.JSON(w, stacks)
 }
 
+// filterStacks refines a collection of Stack instances using specified criteria.
+// This function examines the provided filters: EndpointID, SwarmID, and IncludeOrphanedStacks.
+// - If both EndpointID is zero and SwarmID is an empty string, the function directly returns the original stack list without any modifications.
+// - If either filter is specified, it proceeds to selectively include stacks that match the criteria.
+
+// Key Points on Business Logic:
+// 1. Determining Inclusion of Orphaned Stacks:
+//    - The decision to include orphaned stacks is influenced by the user's role and usually set by the client (UI).
+//    - Administrators or environment administrators can include orphaned stacks by setting IncludeOrphanedStacks to true, reflecting their broader access rights.
+//    - For non-administrative users, this is typically set to false, limiting their visibility to only stacks within their purview.
+
+// 2. Inclusion Criteria for Orphaned Stacks:
+//    - When IncludeOrphanedStacks is true and an EndpointID is specified (not zero), the function selects:
+//      a) Stacks linked to the specified EndpointID.
+//      b) Orphaned stacks that don't have a naming conflict with any stack associated with the EndpointID.
+//    - This approach is designed to avoid name conflicts within Docker Compose, which restricts the creation of multiple stacks with the same name.
+
+// 3. Type Matching for Orphaned Stacks:
+//    - The function ensures that orphaned stacks are compatible with the environment's stack type (compose or swarm).
+//    - It filters out orphaned swarm stacks in Docker standalone environments
+//    - It filters out orphaned standalone stack in Docker swarm environments
+//    - This ensures that re-association respects the constraints of the environment and stack type.
+
+// The outcome is a new list of stacks that align with these filtering and business logic criteria.
 func filterStacks(stacks []portainer.Stack, filters *stackListOperationFilters, endpoints []portainer.Endpoint) []portainer.Stack {
 	if filters.EndpointID == 0 && filters.SwarmID == "" {
 		return stacks
 	}
 
 	filteredStacks := make([]portainer.Stack, 0, len(stacks))
+	uniqueStackNames := make(map[string]struct{})
 	for _, stack := range stacks {
-		if filters.IncludeOrphanedStacks && isOrphanedStack(stack, endpoints) {
-			if (stack.Type == portainer.DockerComposeStack && filters.SwarmID == "") || (stack.Type == portainer.DockerSwarmStack && filters.SwarmID != "") {
-				filteredStacks = append(filteredStacks, stack)
-			}
-			continue
-		}
-
 		if stack.Type == portainer.DockerComposeStack && stack.EndpointID == portainer.EndpointID(filters.EndpointID) {
 			filteredStacks = append(filteredStacks, stack)
+			uniqueStackNames[stack.Name] = struct{}{}
 		}
 		if stack.Type == portainer.DockerSwarmStack && stack.SwarmID == filters.SwarmID {
 			filteredStacks = append(filteredStacks, stack)
+			uniqueStackNames[stack.Name] = struct{}{}
+		}
+	}
+
+	for _, stack := range stacks {
+		if filters.IncludeOrphanedStacks && isOrphanedStack(stack, endpoints) {
+			if (stack.Type == portainer.DockerComposeStack && filters.SwarmID == "") || (stack.Type == portainer.DockerSwarmStack && filters.SwarmID != "") {
+				if _, exists := uniqueStackNames[stack.Name]; !exists {
+					filteredStacks = append(filteredStacks, stack)
+				}
+			}
 		}
 	}
 

api/http/handler/stacks/stack_list_test.go

@@ -0,0 +1,74 @@
+package stacks
+
+import (
+	"sort"
+	"testing"
+
+	portainer "github.com/portainer/portainer/api"
+	"github.com/stretchr/testify/assert"
+)
+
+func TestFilterStacks(t *testing.T) {
+	t.Run("filter stacks against particular endpoint and all orphaned stacks", func(t *testing.T) {
+		stacks := []portainer.Stack{
+			{ID: 1, EndpointID: 3, Name: "normal_stack", Type: portainer.DockerComposeStack},
+			{ID: 2, EndpointID: 4, Name: "orphaned_stack", Type: portainer.DockerComposeStack},
+			{ID: 3, EndpointID: 5, Name: "other_stack", Type: portainer.DockerComposeStack},
+		}
+		filters := &stackListOperationFilters{EndpointID: 3, IncludeOrphanedStacks: true}
+		endpoints := []portainer.Endpoint{{ID: 3}, {ID: 5}}
+
+		expectStacks := []portainer.Stack{{ID: 1}, {ID: 2}}
+		actualStacks := filterStacks(stacks, filters, endpoints)
+
+		isEqualStacks(t, expectStacks, actualStacks)
+	})
+
+	t.Run("filter unique stacks against particular endpoint and all orphaned stacks and an orphaned stack has the same name with normal stack", func(t *testing.T) {
+		stacks := []portainer.Stack{
+			{ID: 1, EndpointID: 3, Name: "normal_stack", Type: portainer.DockerComposeStack},
+			{ID: 2, EndpointID: 4, Name: "orphaned_stack", Type: portainer.DockerComposeStack},
+			{ID: 3, EndpointID: 5, Name: "other_stack", Type: portainer.DockerComposeStack},
+			{ID: 4, EndpointID: 4, Name: "normal_stack", Type: portainer.DockerComposeStack},
+		}
+		filters := &stackListOperationFilters{EndpointID: 3, IncludeOrphanedStacks: true}
+		endpoints := []portainer.Endpoint{{ID: 3}, {ID: 5}}
+
+		expectStacks := []portainer.Stack{{ID: 1}, {ID: 2}}
+		actualStacks := filterStacks(stacks, filters, endpoints)
+
+		isEqualStacks(t, expectStacks, actualStacks)
+	})
+
+	t.Run("only filter stacks against particular endpoint and no orphaned stacks", func(t *testing.T) {
+		stacks := []portainer.Stack{
+			{ID: 1, EndpointID: 3, Name: "normal_stack", Type: portainer.DockerComposeStack},
+			{ID: 2, EndpointID: 4, Name: "orphaned_stack", Type: portainer.DockerComposeStack},
+			{ID: 3, EndpointID: 5, Name: "other_stack", Type: portainer.DockerComposeStack},
+			{ID: 4, EndpointID: 4, Name: "normal_stack", Type: portainer.DockerComposeStack},
+		}
+		filters := &stackListOperationFilters{EndpointID: 3, IncludeOrphanedStacks: false}
+		endpoints := []portainer.Endpoint{{ID: 3}, {ID: 5}}
+
+		expectStacks := []portainer.Stack{{ID: 1}}
+		actualStacks := filterStacks(stacks, filters, endpoints)
+
+		isEqualStacks(t, expectStacks, actualStacks)
+	})
+}
+
+func isEqualStacks(t *testing.T, expectStacks, actualStacks []portainer.Stack) {
+	expectStackIDs := make([]int, len(expectStacks))
+	for i, stack := range expectStacks {
+		expectStackIDs[i] = int(stack.ID)
+	}
+	sort.Ints(expectStackIDs)
+
+	actualStackIDs := make([]int, len(actualStacks))
+	for i, stack := range actualStacks {
+		actualStackIDs[i] = int(stack.ID)
+	}
+	sort.Ints(actualStackIDs)
+
+	assert.Equal(t, expectStackIDs, actualStackIDs)
+}

api/http/handler/users/user_create_access_token.go

@@ -2,6 +2,7 @@ package users
 
 import (
 	"errors"
+	"fmt"
 	"net/http"
 
 	portainer "github.com/portainer/portainer/api"
@@ -20,9 +21,6 @@ type userAccessTokenCreatePayload struct {
 }
 
 func (payload *userAccessTokenCreatePayload) Validate(r *http.Request) error {
-	if govalidator.IsNull(payload.Password) {
-		return errors.New("invalid password: cannot be empty")
-	}
 	if govalidator.IsNull(payload.Description) {
 		return errors.New("invalid description: cannot be empty")
 	}
@@ -44,6 +42,7 @@ type accessTokenResponse struct {
 // @summary Generate an API key for a user
 // @description Generates an API key for a user.
 // @description Only the calling user can generate a token for themselves.
+// @description Password is required only for internal authentication.
 // @description **Access policy**: restricted
 // @tags users
 // @security jwt
@@ -94,9 +93,21 @@ func (handler *Handler) userCreateAccessToken(w http.ResponseWriter, r *http.Req
 		return httperror.InternalServerError("Unable to find a user with the specified identifier inside the database", err)
 	}
 
-	err = handler.CryptoService.CompareHashAndData(user.Password, payload.Password)
+	internalAuth, err := handler.usesInternalAuthentication(portainer.UserID(userID))
 	if err != nil {
-		return httperror.Forbidden("Current password doesn't match", errors.New("Current password does not match the password provided. Please try again"))
+		return httperror.InternalServerError("Unable to determine the authentication method", err)
+	}
+
+	if internalAuth {
+		// Internal auth requires the password field and must not be empty
+		if govalidator.IsNull(payload.Password) {
+			return httperror.BadRequest("Invalid request payload", errors.New("invalid password: cannot be empty"))
+		}
+
+		err = handler.CryptoService.CompareHashAndData(user.Password, payload.Password)
+		if err != nil {
+			return httperror.Forbidden("Current password doesn't match", errors.New("Current password does not match the password provided. Please try again"))
+		}
 	}
 
 	rawAPIKey, apiKey, err := handler.apiKeyService.GenerateApiKey(*user, payload.Description)
@@ -107,3 +118,18 @@ func (handler *Handler) userCreateAccessToken(w http.ResponseWriter, r *http.Req
 	w.WriteHeader(http.StatusCreated)
 	return response.JSON(w, accessTokenResponse{rawAPIKey, *apiKey})
 }
+
+func (handler *Handler) usesInternalAuthentication(userid portainer.UserID) (bool, error) {
+	// userid 1 is the admin user and always uses internal auth
+	if userid == 1 {
+		return true, nil
+	}
+
+	// otherwise determine the auth method from the settings
+	settings, err := handler.DataStore.Settings().Settings()
+	if err != nil {
+		return false, fmt.Errorf("unable to retrieve the settings from the database: %w", err)
+	}
+
+	return settings.AuthenticationMethod == portainer.AuthenticationInternal, nil
+}

api/kubernetes/cli/client.go

@@ -80,22 +80,31 @@ func (factory *ClientFactory) RemoveKubeClient(endpointID portainer.EndpointID)
 // GetKubeClient checks if an existing client is already registered for the environment(endpoint) and returns it if one is found.
 // If no client is registered, it will create a new client, register it, and returns it.
 func (factory *ClientFactory) GetKubeClient(endpoint *portainer.Endpoint) (*KubeClient, error) {
+	factory.mu.Lock()
+	key := strconv.Itoa(int(endpoint.ID))
+	if client, ok := factory.endpointClients[key]; ok {
+		factory.mu.Unlock()
+		return client, nil
+	}
+	factory.mu.Unlock()
+
+	// EE-6901: Do not lock
+	client, err := factory.createCachedAdminKubeClient(endpoint)
+	if err != nil {
+		return nil, err
+	}
+
 	factory.mu.Lock()
 	defer factory.mu.Unlock()
 
-	key := strconv.Itoa(int(endpoint.ID))
-	client, ok := factory.endpointClients[key]
-	if !ok {
-		var err error
-
-		client, err = factory.createCachedAdminKubeClient(endpoint)
-		if err != nil {
-			return nil, err
-		}
-
-		factory.endpointClients[key] = client
+	// The lock was released before the client was created,
+	// so we need to check again
+	if c, ok := factory.endpointClients[key]; ok {
+		return c, nil
 	}
 
+	factory.endpointClients[key] = client
+
 	return client, nil
 }
 
@@ -242,6 +251,10 @@ func (factory *ClientFactory) buildEdgeConfig(endpoint *portainer.Endpoint) (*re
 	}
 
 	signature, err := factory.signatureService.CreateSignature(portainer.PortainerAgentSignatureMessage)
+	if err != nil {
+		return nil, err
+	}
+
 	config.Insecure = true
 	config.QPS = DefaultKubeClientQPS
 	config.Burst = DefaultKubeClientBurst

api/portainer.go

@@ -1595,7 +1595,7 @@ type (
 
 const (
 	// APIVersion is the version number of the Portainer API
-	APIVersion = "2.20.0"
+	APIVersion = "2.22.0"
 	// Edition is what this edition of Portainer is called
 	Edition = PortainerCE
 	// ComposeSyntaxMaxVersion is a maximum supported version of the docker compose syntax

api/stacks/deployments/deploy_test.go

@@ -138,13 +138,14 @@ func agentServer(t *testing.T) string {
 		Handler: h,
 	}
 
+	errCh := make(chan error)
 	go func() {
-		err := s.Serve(l)
-		require.ErrorIs(t, err, http.ErrServerClosed)
+		errCh <- s.Serve(l)
 	}()
 
 	t.Cleanup(func() {
-		s.Shutdown(context.Background())
+		require.NoError(t, s.Shutdown(context.Background()))
+		require.ErrorIs(t, <-errCh, http.ErrServerClosed)
 	})
 
 	return "http://" + l.Addr().String()

app/agent/components/node-selector/nodeSelector.html

@@ -1,6 +1,6 @@
 <div class="form-group">
   <label for="target_node" class="col-sm-1 control-label text-left">Node</label>
   <div class="col-sm-11">
-    <select class="form-control" ng-model="$ctrl.model" ng-options="agent.NodeName as agent.NodeName for agent in $ctrl.agents"></select>
+    <select class="form-control" ng-model="$ctrl.model" ng-options="agent.NodeName as agent.NodeName for agent in $ctrl.agents" data-cy="target-node-c"></select>
   </div>
 </div>

app/assets/css/app.css

@@ -615,24 +615,6 @@ input[type='checkbox'] {
   font-weight: 600;
 }
 
-/* json-tree override */
-json-tree {
-  font-size: 13px;
-  color: var(--blue-5);
-}
-
-json-tree .key {
-  color: var(--blue-3);
-  padding-right: 5px;
-}
-
-json-tree .branch-preview {
-  font-style: normal;
-  font-size: 11px;
-  opacity: 0.5;
-}
-/* !json-tree override */
-
 /* uib-progressbar override */
 .progress-bar {
   color: var(--text-progress-bar-color);
@@ -729,3 +711,21 @@ input[style*='background-image: url("data:image/png'] {
 input:-webkit-autofill {
   @apply caret-[--grey-25] th-highcontrast:caret-white th-dark:caret-white;
 }
+
+/*
+rules for styling the progress bar on both chrome and firefox
+first rule is for firefox and the second rule is for chrome
+
+use the `.progress-filled` tailwind variant util to style the filled value of the progress bar, 
+and the usual styles to style the unfilled value.
+
+see app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/DeploymentCounter.tsx for an example
+*/
+
+progress {
+  appearance: none;
+}
+
+progress::-webkit-progress-bar {
+  background-color: transparent;
+}

app/assets/css/vendor-override.css

@@ -42,6 +42,10 @@
   z-index: unset;
 }
 
+.input-group-sm > .input-group-addon {
+  line-height: 1;
+}
+
 .text-danger {
   color: var(--ui-error-9);
 }
@@ -164,17 +168,6 @@ pre {
   background-color: var(--bg-pre-color);
   color: var(--text-pre-color);
 }
-json-tree .key {
-  color: var(--text-json-tree-color);
-}
-
-json-tree .leaf-value {
-  color: var(--text-json-tree-leaf-color);
-}
-
-json-tree .branch-preview {
-  color: var(--text-json-tree-branch-preview-color);
-}
 
 .progress {
   background-color: var(--bg-progress-color);

app/docker/__module.js

@@ -510,11 +510,10 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
 
     var templates = {
       name: 'docker.templates',
-      url: '/templates',
+      url: '/templates?template',
       views: {
         'content@': {
-          templateUrl: '~Portainer/views/templates/templates.html',
-          controller: 'TemplatesController',
+          component: 'appTemplatesView',
         },
       },
       data: {
@@ -603,7 +602,7 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
       url: '/registries',
       views: {
         'content@': {
-          component: 'endpointRegistriesView',
+          component: 'environmentRegistriesView',
         },
       },
       data: {
@@ -616,7 +615,7 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
       url: '/registries',
       views: {
         'content@': {
-          component: 'endpointRegistriesView',
+          component: 'environmentRegistriesView',
         },
       },
       data: {

app/docker/components/container-restart-policy/container-restart-policy.html

@@ -5,7 +5,8 @@
         <span>Name</span>
       </td>
       <td>
-        <select class="form-control" ng-model="$ctrl.state.editModel.name" disable-authorization="DockerContainerUpdate">
+        <select class="form-control" ng-model="$ctrl.state.editModel.name" disable-authorization="DockerContainerUpdate" data-cy="container-restart-policy-select">
+          >
           <option value="no">None</option>
           <option value="on-failure">On Failure</option>
           <option value="always">Always</option>
@@ -19,7 +20,7 @@
     <tr ng-if="$ctrl.state.editModel.name === 'on-failure'">
       <td class="col-md-3">Maximum Retry Count</td>
       <td colspan="2">
-        <input type="number" class="form-control" ng-model="$ctrl.state.editModel.maximumRetryCount" />
+        <input type="number" class="form-control" ng-model="$ctrl.state.editModel.maximumRetryCount" data-cy="container-restart-max-retry-input" />
       </td>
     </tr>
   </table>

app/docker/components/host-view-panels/node-availability-select/node-availability-select.html

@@ -1,5 +1,6 @@
 <div class="input-group input-group-sm">
-  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability" ng-change="$ctrl.onChange()">
+  <select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability" ng-change="$ctrl.onChange()" data-cy="node-availability-select">
+    >
     <option value="active">Active</option>
     <option value="pause">Pause</option>
     <option value="drain">Drain</option>

app/docker/components/host-view-panels/node-labels-table/node-labels-table.html

@@ -4,11 +4,18 @@
   <div ng-repeat="label in $ctrl.labels" class="mt-1">
     <div class="input-group col-sm-5 input-group-sm">
       <span class="input-group-addon">name</span>
-      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="$ctrl.updateLabel(label)" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="label.key"
+        placeholder="e.g. com.example.foo"
+        ng-change="$ctrl.updateLabel(label)"
+        data-cy="node-label-input_{{ $index }}"
+      />
     </div>
     <div class="input-group col-sm-5 input-group-sm">
       <span class="input-group-addon">value</span>
-      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" />
+      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" data-cy="node-label-value_{{ $index }}" />
     </div>
     <button class="btn btn-light" type="button" ng-click="$ctrl.removeLabel($index)">
       <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>

app/docker/components/imageRegistry/por-image-registry.html

@@ -4,6 +4,7 @@
     <label for="image_registry" class="control-label col-sm-3 col-lg-2 text-left" ng-class="$ctrl.labelClass"> Registry </label>
     <div ng-class="$ctrl.inputClass" class="col-sm-8">
       <select
+        data-cy="component-registrySelect"
         ng-options="registry as registry.Name for registry in $ctrl.registries track by registry.Id"
         ng-model="$ctrl.model.Registry"
         id="image_registry"
@@ -19,6 +20,7 @@
         <span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
         <input
           type="text"
+          data-cy="component-imageInput"
           class="form-control"
           aria-describedby="registry-name"
           uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
@@ -27,7 +29,6 @@
           placeholder="e.g. my-image:my-tag"
           ng-change="$ctrl.onImageChange()"
           required
-          data-cy="component-imageInput"
         />
         <span ng-if="$ctrl.isDockerHubRegistry()" class="input-group-btn">
           <a
@@ -51,7 +52,15 @@
       </span>
       <label for="image_name" ng-class="$ctrl.labelClass" class="control-label col-sm-3 col-lg-2 required text-left">Image </label>
       <div ng-class="$ctrl.inputClass" class="col-sm-8">
-        <input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/my-image:my-tag" required />
+        <input
+          type="text"
+          class="form-control"
+          ng-model="$ctrl.model.Image"
+          name="image_name"
+          placeholder="e.g. registry:port/my-image:my-tag"
+          required
+          data-cy="component-imageInput"
+        />
       </div>
     </div>
   </div>

app/docker/components/network-macvlan-form/networkMacvlanForm.html

@@ -19,6 +19,7 @@
         <div class="col-sm-9 col-lg-10">
           <input
             type="text"
+            data-cy="macvlan-network-card-input"
             class="form-control"
             name="network_card"
             ng-model="$ctrl.data.ParentNetworkCard"
@@ -69,6 +70,7 @@
             ng-model="$ctrl.data.SelectedNetworkConfig"
             name="config_network"
             ng-required="$ctrl.requiredConfigSelection()"
+            data-cy="macvlanConfigNetworkSelector"
           >
             <option selected disabled hidden value="">Select a network</option>
           </select>

app/docker/components/volumesCIFSForm/volumesCifsForm.html

@@ -6,7 +6,15 @@
     <div class="form-group col-md-12">
       <label for="cifs_address" class="col-sm-2 col-md-1 control-label required text-left">Address</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="cifs_address" placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx" required />
+        <input
+          type="text"
+          class="form-control"
+          ng-model="$ctrl.data.serverAddress"
+          name="cifs_address"
+          placeholder="e.g. my.cifs-server.com OR xxx.xxx.xxx.xxx"
+          required
+          data-cy="cifs-address-input"
+        />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_address.$invalid">
@@ -21,7 +29,7 @@
     <div class="form-group col-md-12">
       <label for="cifs_share" class="col-sm-2 col-md-1 control-label required text-left">Share</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.share" name="cifs_share" placeholder="e.g. /myshare" required data-cy="cifs-share-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_share.$invalid">
@@ -36,7 +44,14 @@
     <div class="form-group col-md-12">
       <label for="cifs_version" class="col-sm-2 col-md-1 control-label text-left">CIFS Version</label>
       <div class="col-sm-10 col-md-11">
-        <select class="form-control" ng-model="$ctrl.data.version" name="cifs_version" ng-options="version for version in $ctrl.data.versions" required></select>
+        <select
+          class="form-control"
+          ng-model="$ctrl.data.version"
+          name="cifs_version"
+          ng-options="version for version in $ctrl.data.versions"
+          required
+          data-cy="cifs-version-select"
+        ></select>
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_version.$invalid">
@@ -51,7 +66,7 @@
     <div class="form-group col-md-12">
       <label for="cifs_username" class="col-sm-2 col-md-1 control-label required text-left">Username</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.username" name="cifs_username" required data-cy="cifs-username-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.cifs_username.$invalid">
@@ -66,7 +81,7 @@
     <div class="form-group col-md-12">
       <label for="cifs_password" class="col-sm-2 col-md-1 control-label text-left">Password</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.password" name="cifs_password" required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.password" name="cifs_password" required data-cy="cifs-password-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="cifsInformationForm.password.$invalid">

app/docker/components/volumesNFSForm/volumesnfsForm.html

@@ -6,7 +6,15 @@
     <div class="form-group col-md-12">
       <label for="nfs_address" class="col-sm-2 col-md-1 control-label required text-left">Address</label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx" required />
+        <input
+          type="text"
+          class="form-control"
+          ng-model="$ctrl.data.serverAddress"
+          name="nfs_address"
+          placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx"
+          required
+          data-cy="nfs-address-input"
+        />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_address.$invalid">
@@ -21,7 +29,14 @@
     <div class="form-group col-md-12">
       <label for="nfs_version" class="col-sm-2 col-md-1 control-label text-left">NFS Version</label>
       <div class="col-sm-10 col-md-11">
-        <select class="form-control" ng-model="$ctrl.data.version" name="nfs_version" ng-options="version for version in $ctrl.data.versions" required></select>
+        <select
+          class="form-control"
+          ng-model="$ctrl.data.version"
+          name="nfs_version"
+          ng-options="version for version in $ctrl.data.versions"
+          required
+          data-cy="nfs-version-select"
+        ></select>
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_version.$invalid">
@@ -38,6 +53,7 @@
       <div class="col-sm-10 col-md-11">
         <input
           type="text"
+          data-cy="nfs-mountpoint-input"
           class="form-control"
           ng-model="$ctrl.data.mountPoint"
           name="nfs_mountpoint"
@@ -61,7 +77,7 @@
         <portainer-tooltip message="'Comma separated list of options'"></portainer-tooltip>
       </label>
       <div class="col-sm-10 col-md-11">
-        <input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..." required />
+        <input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..." required data-cy="nfs-options-input" />
       </div>
     </div>
     <div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_options.$invalid">

app/docker/models/image.js

@@ -14,7 +14,7 @@ export function ImageViewModel(data) {
     }
   }
 
-  this.VirtualSize = data.VirtualSize;
+  this.Size = data.Size;
   this.Used = data.Used;
 
   if (data.Portainer && data.Portainer.Agent && data.Portainer.Agent.NodeName) {

app/docker/models/imageDetails.js

@@ -6,15 +6,22 @@ export function ImageDetailsViewModel(data) {
   this.Created = data.Created;
   this.Checked = false;
   this.RepoTags = data.RepoTags;
-  this.VirtualSize = data.VirtualSize;
+  this.Size = data.Size;
   this.DockerVersion = data.DockerVersion;
   this.Os = data.Os;
   this.Architecture = data.Architecture;
   this.Author = data.Author;
   this.Command = data.Config.Cmd;
-  this.Entrypoint = data.ContainerConfig.Entrypoint ? data.ContainerConfig.Entrypoint : '';
-  this.ExposedPorts = data.ContainerConfig.ExposedPorts ? Object.keys(data.ContainerConfig.ExposedPorts) : [];
-  this.Volumes = data.ContainerConfig.Volumes ? Object.keys(data.ContainerConfig.Volumes) : [];
-  this.Env = data.ContainerConfig.Env ? data.ContainerConfig.Env : [];
-  this.Labels = data.ContainerConfig.Labels;
+
+  let config = {};
+  if (data.Config) {
+    config = data.Config; // this is part of OCI images-spec
+  } else if (data.ContainerConfig != null) {
+    config = data.ContainerConfig; // not OCI ; has been removed in Docker 26 (API v1.45) along with .Container
+  }
+  this.Entrypoint = config.Entrypoint ? config.Entrypoint : '';
+  this.ExposedPorts = config.ExposedPorts ? Object.keys(config.ExposedPorts) : [];
+  this.Volumes = config.Volumes ? Object.keys(config.Volumes) : [];
+  this.Env = config.Env ? config.Env : [];
+  this.Labels = config.Labels;
 }

app/docker/react/components/index.ts

@@ -26,6 +26,7 @@ import { servicesModule } from './services';
 import { networksModule } from './networks';
 import { swarmModule } from './swarm';
 import { volumesModule } from './volumes';
+import { templatesModule } from './templates';
 
 const ngModule = angular
   .module('portainer.docker.react.components', [
@@ -34,6 +35,7 @@ const ngModule = angular
     networksModule,
     swarmModule,
     volumesModule,
+    templatesModule,
   ])
   .component('dockerfileDetails', r2a(DockerfileDetails, ['image']))
   .component('dockerHealthStatus', r2a(HealthStatus, ['health']))

app/docker/react/components/services.ts

@@ -1,12 +1,19 @@
 import angular from 'angular';
+import { SchemaOf } from 'yup';
 
 import { r2a } from '@/react-tools/react2angular';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { ServicesDatatable } from '@/react/docker/services/ListView/ServicesDatatable';
 import { TasksDatatable } from '@/react/docker/services/ItemView/TasksDatatable';
+import {
+  PortsMappingField,
+  portsMappingUtils,
+  PortsMappingValues,
+} from '@/react/docker/services/ItemView/PortMappingField';
+import { withFormValidation } from '@/react-tools/withFormValidation';
 
-export const servicesModule = angular
+const ngModule = angular
   .module('portainer.docker.react.components.services', [])
   .component(
     'dockerServiceTasksDatatable',
@@ -25,4 +32,14 @@ export const servicesModule = angular
       'onRefresh',
       'titleIcon',
     ])
-  ).name;
+  );
+
+export const servicesModule = ngModule.name;
+
+withFormValidation(
+  ngModule,
+  withUIRouter(withCurrentUser(PortsMappingField)),
+  'dockerServicePortsMappingField',
+  ['disabled', 'readOnly', 'hasChanges', 'onReset', 'onSubmit'],
+  portsMappingUtils.validation as unknown as () => SchemaOf<PortsMappingValues>
+);

app/docker/react/components/templates.ts

@@ -0,0 +1,17 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { StackFromCustomTemplateFormWidget } from '@/react/docker/templates/StackFromCustomTemplateFormWidget';
+
+export const templatesModule = angular
+  .module('portainer.docker.react.components.templates', [])
+
+  .component(
+    'stackFromCustomTemplateFormWidget',
+    r2a(withUIRouter(withCurrentUser(StackFromCustomTemplateFormWidget)), [
+      'template',
+      'unselect',
+    ])
+  ).name;

app/docker/services/containerService.js

@@ -112,24 +112,6 @@ function ContainerServiceFactory($q, Container, $timeout) {
     return deferred.promise;
   };
 
-  service.createAndStartContainer = function (environmentId, configuration) {
-    var deferred = $q.defer();
-    var container;
-    service
-      .createContainer(environmentId, configuration)
-      .then(function success(data) {
-        container = data;
-        return service.startContainer(environmentId, container.Id);
-      })
-      .then(function success() {
-        deferred.resolve(container);
-      })
-      .catch(function error(err) {
-        deferred.reject(err);
-      });
-    return deferred.promise;
-  };
-
   service.createExec = function (environmentId, execConfig) {
     var deferred = $q.defer();
 

app/docker/services/volumeService.js

@@ -92,14 +92,6 @@ angular.module('portainer.docker').factory('VolumeService', [
       return $q.all(createVolumeQueries);
     };
 
-    service.createXAutoGeneratedLocalVolumes = function (x) {
-      var createVolumeQueries = [];
-      for (var i = 0; i < x; i++) {
-        createVolumeQueries.push(service.createVolume({ Driver: 'local' }));
-      }
-      return $q.all(createVolumeQueries);
-    };
-
     return service;
   },
 ]);

app/docker/views/configs/configsController.js

@@ -1,5 +1,4 @@
 import angular from 'angular';
-import { confirmDelete } from '@@/modals/confirm';
 
 class ConfigsController {
   /* @ngInject */
@@ -34,10 +33,6 @@ class ConfigsController {
   }
 
   async removeAction(selectedItems) {
-    const confirmed = await confirmDelete('Do you want to remove the selected config(s)?');
-    if (!confirmed) {
-      return null;
-    }
     return this.$async(this.removeActionAsync, selectedItems);
   }
 

app/docker/views/configs/create/createconfig.html

@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="config_name" class="col-sm-1 control-label text-left">Name</label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig" />
+              <input type="text" class="form-control" ng-model="ctrl.formValues.Name" id="config_name" placeholder="e.g. myConfig" data-cy="config-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -37,11 +37,11 @@
               <div ng-repeat="label in ctrl.formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
+                  <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" data-cy="config-label-input_{{ $index }}" />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="config-label-value_{{ $index }}" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="ctrl.removeLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>

app/docker/views/containers/console/exec.html

@@ -26,7 +26,7 @@
                     <pr-icon ng-if="imageOS == 'linux'" icon="'svg-linux'"></pr-icon>
                     <pr-icon ng-if="imageOS == 'windows'" icon="'layout-grid'"></pr-icon>
                   </span>
-                  <select class="form-control" ng-model="formValues.command" id="command">
+                  <select class="form-control" ng-model="formValues.command" id="command" data-cy="command-select">
                     <option value="ash" ng-if="imageOS == 'linux'">/bin/ash</option>
                     <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
                     <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
@@ -35,7 +35,15 @@
                     <option ng-repeat="command in containerCommands" value="{{ command.command }}">{{ command.title }}: {{ command.command }}</option>
                   </select>
                 </div>
-                <input class="form-control" ng-if="formValues.isCustomCommand" type="text" name="custom-command" ng-model="formValues.customCommand" placeholder="e.g. ps aux" />
+                <input
+                  class="form-control"
+                  ng-if="formValues.isCustomCommand"
+                  type="text"
+                  name="custom-command"
+                  ng-model="formValues.customCommand"
+                  placeholder="e.g. ps aux"
+                  data-cy="custom-command"
+                />
               </div>
             </div>
             <!-- !command-list -->
@@ -53,7 +61,7 @@
                 <portainer-tooltip message="'Format is one of: user, user:group, uid or uid:gid'"></portainer-tooltip>
               </label>
               <div class="col-lg-11 col-sm-10">
-                <input class="form-control" type="text" ng-model="formValues.user" placeholder="root" />
+                <input class="form-control" type="text" ng-model="formValues.user" placeholder="root" data-cy="container-exec-user" />
               </div>
             </div>
             <div class="form-group">
@@ -70,8 +78,8 @@
           </div>
           <div ng-if="state !== states.disconnected">
             <label
-              >Exec into container as <code class="!text-sm align-baseline">{{ ::formValues.user || 'default user' }}</code> using command
-              <code class="!text-sm align-baseline">{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code>
+              >Exec into container as <code class="align-baseline !text-sm">{{ ::formValues.user || 'default user' }}</code> using command
+              <code class="align-baseline !text-sm">{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code>
               <terminal-tooltip class="align-sub"> </terminal-tooltip>
             </label>
             <button type="button" class="btn btn-primary" ng-click="disconnect()">

app/docker/views/containers/edit/container.html

@@ -72,7 +72,7 @@
     <rd-widget>
       <rd-widget-header icon="box" title-text="Container status"></rd-widget-header>
       <rd-widget-body classes="no-padding">
-        <table class="table">
+        <table class="table" data-cy="container-status-table">
           <tbody>
             <tr>
               <td class="col-xs-6 col-sm-4 col-md-3 col-lg-3">ID</td>
@@ -88,7 +88,7 @@
               </td>
               <td ng-if="container.edit">
                 <form ng-submit="renameContainer()">
-                  <input type="text" class="containerNameInput" ng-model="container.newContainerName" />
+                  <input type="text" class="containerNameInput" ng-model="container.newContainerName" data-cy="containerNameInput" />
                   <a href="" ng-click="container.edit = false;">
                     <pr-icon icon="'x'"></pr-icon>
                   </a>
@@ -327,7 +327,7 @@
     <rd-widget>
       <rd-widget-header icon="database" title-text="Volumes"></rd-widget-header>
       <rd-widget-body classes="no-padding">
-        <table class="table">
+        <table class="table" data-cy="container-volumes-table">
           <thead>
             <tr>
               <th>Host/volume</th>

app/docker/views/containers/stats/containerstats.html

@@ -27,7 +27,7 @@
           <div class="form-group">
             <label for="refreshRate" class="col-sm-3 col-md-2 col-lg-2 margin-sm-top control-label text-left"> Refresh rate </label>
             <div class="col-sm-3 col-md-2">
-              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
+              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control" data-cy="docker-containers-stats-refresh-rate">
                 <option value="1">1s</option>
                 <option value="3">3s</option>
                 <option value="5">5s</option>

app/docker/views/dashboard/dashboardController.js

@@ -137,5 +137,5 @@ angular.module('portainer.docker').controller('DashboardController', [
 ]);
 
 function imagesTotalSize(images) {
-  return images.reduce((acc, image) => acc + image.VirtualSize, 0);
+  return images.reduce((acc, image) => acc + image.Size, 0);
 }

app/docker/views/images/build/buildimage.html

@@ -40,7 +40,15 @@
                         <!-- name-input -->
                         <div class="input-group col-sm-5 input-group-sm">
                           <span class="input-group-addon">name</span>
-                          <input type="text" class="form-control" ng-model="item.Name" ng-change="checkName($index)" placeholder="e.g. my-image:my-tag" auto-focus />
+                          <input
+                            type="text"
+                            class="form-control"
+                            ng-model="item.Name"
+                            ng-change="checkName($index)"
+                            placeholder="e.g. my-image:my-tag"
+                            auto-focus
+                            data-cy="image-name-input"
+                          />
                           <span class="input-group-addon" ng-if="!item.Valid">
                             <pr-icon icon="'x'" mode="'danger'"></pr-icon>
                           </span>
@@ -101,9 +109,7 @@
                       </span>
                     </div>
                     <button class="btn btn-sm btn-primary" ngf-select="selectAdditionalFiles($files)" ngf-multiple="true">Select files</button>
-                    <span ng-repeat="item in formValues.AdditionalFiles track by $index" class="mx-2">
-                      {{ item.name }}
-                    </span>
+                    <span ng-repeat="item in formValues.AdditionalFiles track by $index" class="mx-2"> {{ item.name }} </span>
                   </div>
                 </div>
               </div>
@@ -133,7 +139,7 @@
                   <div class="form-group">
                     <label for="image_path" class="col-sm-2 control-label text-left">Dockerfile path</label>
                     <div class="col-sm-10">
-                      <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" />
+                      <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" data-cy="image-path-input" />
                     </div>
                   </div>
                 </div>
@@ -156,6 +162,7 @@
                   <div class="col-sm-10">
                     <input
                       type="text"
+                      data-cy="image-url-input"
                       class="form-control"
                       ng-model="formValues.URL"
                       id="image_url"
@@ -172,7 +179,7 @@
                 <div class="form-group">
                   <label for="image_path" class="col-sm-2 control-label text-left">Dockerfile path</label>
                   <div class="col-sm-10">
-                    <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" />
+                    <input type="text" class="form-control" ng-model="formValues.Path" id="image_path" placeholder="Dockerfile" data-cy="image-path-input" />
                   </div>
                 </div>
               </div>

app/docker/views/images/edit/image.html

@@ -130,7 +130,7 @@
             </tr>
             <tr>
               <td>Size</td>
-              <td>{{ image.VirtualSize | humansize }}</td>
+              <td>{{ image.Size | humansize }}</td>
             </tr>
             <tr>
               <td>Created</td>

app/docker/views/networks/create/createnetwork.html

@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="network_name" class="col-sm-2 col-lg-1 control-label text-left">Name</label>
             <div class="col-sm-10 col-lg-11">
-              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork" />
+              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork" data-cy="network-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -18,10 +18,24 @@
           <div class="form-group">
             <label for="network_driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
             <div class="col-sm-10 col-lg-11">
-              <select class="form-control" ng-options="driver for driver in availableNetworkDrivers" ng-model="config.Driver" ng-if="availableNetworkDrivers.length > 0">
+              <select
+                class="form-control"
+                ng-options="driver for driver in availableNetworkDrivers"
+                ng-model="config.Driver"
+                ng-if="availableNetworkDrivers.length > 0"
+                data-cy="network-driver-select"
+              >
                 <option disabled hidden value="">Select a driver</option>
               </select>
-              <input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName" ng-if="availableNetworkDrivers.length === 0" />
+              <input
+                type="text"
+                class="form-control"
+                ng-model="config.Driver"
+                id="network_driver"
+                placeholder="e.g. driverName"
+                ng-if="availableNetworkDrivers.length === 0"
+                data-cy="network-driver-input"
+              />
             </div>
           </div>
           <!-- !driver-input -->
@@ -38,11 +52,17 @@
               <div ng-repeat="option in formValues.DriverOptions" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc" />
+                  <input
+                    type="text"
+                    class="form-control"
+                    ng-model="option.name"
+                    placeholder="e.g. com.docker.network.bridge.enable_icc"
+                    data-cy="network-driver-option-name-input"
+                  />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" />
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" data-cy="network-driver-option-value-input" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="removeDriverOption($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -64,11 +84,25 @@
             <div class="form-group">
               <label for="ipv4_network_subnet" class="col-sm-2 col-lg-1 control-label text-left">Subnet</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV4.Subnet" id="ipv4_network_subnet" placeholder="e.g. 172.20.0.0/16" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV4.Subnet"
+                  id="ipv4_network_subnet"
+                  placeholder="e.g. 172.20.0.0/16"
+                  data-cy="network-ipv4-subnet-input"
+                />
               </div>
               <label for="ipv4_network_gateway" class="col-sm-2 col-lg-1 control-label text-left">Gateway</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV4.Gateway" id="ipv4_network_gateway" placeholder="e.g. 172.20.10.11" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV4.Gateway"
+                  id="ipv4_network_gateway"
+                  placeholder="e.g. 172.20.10.11"
+                  data-cy="network-ipv4-gateway-input"
+                />
               </div>
             </div>
             <!-- !subnet-gateway-inputs -->
@@ -76,7 +110,14 @@
             <div class="form-group">
               <label for="ipv4_network_iprange" class="col-sm-2 col-lg-1 control-label text-left">IP range</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV4.IPRange" id="ipv4_network_iprange" placeholder="e.g. 172.20.10.128/25" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV4.IPRange"
+                  id="ipv4_network_iprange"
+                  placeholder="e.g. 172.20.10.128/25"
+                  data-cy="network-ipv4-iprange-input"
+                />
               </div>
             </div>
             <div ng-repeat="auxAddress in formValues.IPV4.AuxiliaryAddresses track by $index" class="form-group">
@@ -84,6 +125,7 @@
               <div class="col-sm-4 col-lg-5">
                 <input
                   type="text"
+                  data-cy="network-ipv4-auxaddr-input"
                   class="form-control"
                   ng-model="formValues.IPV4.AuxiliaryAddresses[$index]"
                   ng-change="checkIPV4AuxiliaryAddress($index)"
@@ -111,11 +153,25 @@
             <div class="form-group">
               <label for="ipv6_network_subnet" class="col-sm-2 col-lg-1 control-label text-left">Subnet</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV6.Subnet" id="ipv6_network_subnet" placeholder="e.g. 2001:db8::/48" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV6.Subnet"
+                  id="ipv6_network_subnet"
+                  placeholder="e.g. 2001:db8::/48"
+                  data-cy="network-ipv6-subnet-input"
+                />
               </div>
               <label for="ipv6_network_gateway" class="col-sm-2 col-lg-1 control-label text-left">Gateway</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV6.Gateway" id="ipv6_network_gateway" placeholder="e.g. 2001:db8::1" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV6.Gateway"
+                  id="ipv6_network_gateway"
+                  placeholder="e.g. 2001:db8::1"
+                  data-cy="network-ipv6-gateway-input"
+                />
               </div>
             </div>
             <!-- !subnet-gateway-inputs -->
@@ -123,7 +179,14 @@
             <div class="form-group">
               <label for="ipv6_network_iprange" class="col-sm-2 col-lg-1 control-label text-left">IP range</label>
               <div class="col-sm-4 col-lg-5">
-                <input type="text" class="form-control" ng-model="formValues.IPV6.IPRange" id="ipv6_network_iprange" placeholder="e.g. 2001:db8::/64" />
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="formValues.IPV6.IPRange"
+                  id="ipv6_network_iprange"
+                  placeholder="e.g. 2001:db8::/64"
+                  data-cy="network-ipv6-iprange-input"
+                />
               </div>
             </div>
             <div ng-repeat="auxAddress in formValues.IPV6.AuxiliaryAddresses track by $index" class="form-group">
@@ -131,6 +194,7 @@
               <div class="col-sm-4 col-lg-5">
                 <input
                   type="text"
+                  data-cy="network-ipv6-auxaddr-input"
                   class="form-control"
                   ng-model="formValues.IPV6.AuxiliaryAddresses[$index]"
                   ng-change="checkIPV6AuxiliaryAddress($index)"
@@ -160,11 +224,11 @@
               <div ng-repeat="label in formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="network-label-key-input" />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="network-label-value-input" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)"> <pr-icon icon="'trash-2'" size="'md'"></pr-icon> </button
                   ></span>

app/docker/views/networks/networksController.js

@@ -1,6 +1,5 @@
 import _ from 'lodash-es';
 import DockerNetworkHelper from '@/docker/helpers/networkHelper';
-import { confirmDelete } from '@@/modals/confirm';
 
 angular.module('portainer.docker').controller('NetworksController', [
   '$q',
@@ -13,10 +12,6 @@ angular.module('portainer.docker').controller('NetworksController', [
   'AgentService',
   function ($q, $scope, $state, NetworkService, Notifications, HttpRequestHelper, endpoint, AgentService) {
     $scope.removeAction = async function (selectedItems) {
-      const confirmed = await confirmDelete('Do you want to remove the selected network(s)?');
-      if (!confirmed) {
-        return null;
-      }
       var actionCount = selectedItems.length;
       angular.forEach(selectedItems, function (network) {
         HttpRequestHelper.setPortainerAgentTargetHeader(network.NodeName);

app/docker/views/secrets/create/createsecret.html

@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="secret_name" class="col-sm-2 control-label text-left">Name</label>
             <div class="col-sm-10">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="secret_name" placeholder="e.g. mySecret" />
+              <input type="text" class="form-control" ng-model="formValues.Name" id="secret_name" placeholder="e.g. mySecret" data-cy="createSecret-nameInput" />
             </div>
           </div>
           <!-- !name-input -->
@@ -17,7 +17,7 @@
           <div class="form-group">
             <label for="secret_data" class="col-sm-2 control-label text-left">Secret</label>
             <div class="col-sm-10">
-              <textarea class="form-control" rows="5" ng-model="formValues.Data" ng-trim="false"></textarea>
+              <textarea class="form-control" rows="5" ng-model="formValues.Data" ng-trim="false" data-cy="createSecret-secretDataInput"></textarea>
             </div>
           </div>
           <!-- !secret-data -->
@@ -45,11 +45,11 @@
               <div ng-repeat="label in formValues.Labels" class="mt-1">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                  <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="createSecret-labelNameInput" />
                 </div>
                 <div class="input-group col-sm-6 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                  <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="createSecret-labelValueInput" />
                   <span class="input-group-btn">
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>

app/docker/views/secrets/secretsController.js

@@ -1,4 +1,3 @@
-import { confirmDelete } from '@@/modals/confirm';
 angular.module('portainer.docker').controller('SecretsController', [
   '$scope',
   '$state',
@@ -6,10 +5,6 @@ angular.module('portainer.docker').controller('SecretsController', [
   'Notifications',
   function ($scope, $state, SecretService, Notifications) {
     $scope.removeAction = async function (selectedItems) {
-      const confirmed = await confirmDelete('Do you want to remove the selected secret(s)?');
-      if (!confirmed) {
-        return null;
-      }
       var actionCount = selectedItems.length;
       angular.forEach(selectedItems, function (secret) {
         SecretService.remove(secret.Id)

app/docker/views/services/create/createservice.html

@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="service_name" class="col-sm-2 control-label text-left">Name</label>
             <div class="col-sm-8">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService" />
+              <input type="text" class="form-control" ng-model="formValues.Name" id="service_name" placeholder="e.g. myService" data-cy="service-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -42,7 +42,7 @@
             <div>
               <label class="control-label col-sm-2 text-left"> Replicas </label>
               <div class="col-sm-8">
-                <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3" />
+                <input type="number" class="form-control" ng-model="formValues.Replicas" id="replicas" placeholder="e.g. 3" data-cy="docker-service-create-replica-count-input" />
               </div>
             </div>
           </div>
@@ -59,7 +59,7 @@
                 <!-- host-port -->
                 <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">host</span>
-                  <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" />
+                  <input type="text" class="form-control" ng-model="portBinding.PublishedPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)" data-cy="host-port-input" />
                 </div>
                 <!-- !host-port -->
                 <span style="margin: 0 10px 0 10px">
@@ -68,7 +68,7 @@
                 <!-- container-port -->
                 <div class="input-group col-sm-3 input-group-sm">
                   <span class="input-group-addon">container</span>
-                  <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80" />
+                  <input type="text" class="form-control" ng-model="portBinding.TargetPort" placeholder="e.g. 80" data-cy="container-port-input" />
                 </div>
                 <!-- !container-port -->
                 <!-- protocol-actions -->
@@ -159,7 +159,14 @@
               <div class="form-group">
                 <label for="service_command" class="col-sm-2 col-lg-1 control-label text-left">Command</label>
                 <div class="col-sm-9">
-                  <input type="text" class="form-control" ng-model="formValues.Command" id="service_command" placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf" />
+                  <input
+                    type="text"
+                    class="form-control"
+                    ng-model="formValues.Command"
+                    id="service_command"
+                    placeholder="e.g. /usr/bin/nginx -t -c /mynginx.conf"
+                    data-cy="service-command-input"
+                  />
                 </div>
               </div>
               <!-- !command-input -->
@@ -167,7 +174,14 @@
               <div class="form-group">
                 <label for="service_entrypoint" class="col-sm-2 col-lg-1 control-label text-left">Entrypoint</label>
                 <div class="col-sm-9">
-                  <input type="text" class="form-control" ng-model="formValues.EntryPoint" id="service_entrypoint" placeholder="e.g. /bin/sh -c" />
+                  <input
+                    type="text"
+                    class="form-control"
+                    ng-model="formValues.EntryPoint"
+                    id="service_entrypoint"
+                    placeholder="e.g. /bin/sh -c"
+                    data-cy="service-entrypoint-input"
+                  />
                 </div>
               </div>
               <!-- !entrypoint-input -->
@@ -175,11 +189,11 @@
               <div class="form-group">
                 <label for="service_workingdir" class="col-sm-2 col-lg-1 control-label text-left">Working Dir</label>
                 <div class="col-sm-4">
-                  <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp" />
+                  <input type="text" class="form-control" ng-model="formValues.WorkingDir" id="service_workingdir" placeholder="e.g. /myapp" data-cy="service-workingdir-input" />
                 </div>
                 <label for="service_user" class="col-sm-1 control-label text-left">User</label>
                 <div class="col-sm-4">
-                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx" />
+                  <input type="text" class="form-control" ng-model="formValues.User" id="service_user" placeholder="e.g. nginx" data-cy="service-user-input" />
                 </div>
               </div>
               <!-- !workdir-user-input -->
@@ -188,7 +202,7 @@
               <div class="form-group">
                 <label for="log-driver" class="col-sm-2 col-lg-1 control-label text-left">Driver</label>
                 <div class="col-sm-4">
-                  <select class="form-control" ng-model="formValues.LogDriverName" id="log-driver">
+                  <select class="form-control" ng-model="formValues.LogDriverName" id="log-driver" data-cy="service-creation-logging-driver">
                     <option selected value="">Default logging driver</option>
                     <option ng-repeat="driver in availableLoggingDrivers" ng-value="driver">{{ driver }}</option>
                     <option value="none">none</option>
@@ -226,11 +240,11 @@
                   <div ng-repeat="opt in formValues.LogDriverOpts" class="mt-1">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">option</span>
-                      <input type="text" class="form-control" ng-model="opt.name" placeholder="e.g. FOO" />
+                      <input type="text" class="form-control" ng-model="opt.name" placeholder="e.g. FOO" data-cy="service-creation-logging-driver-option" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" data-cy="service-creation-logging-driver-option-value" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLogDriverOpt($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -264,7 +278,13 @@
                         <div class="input-group col-sm-6">
                           <div class="input-group input-group-sm w-full">
                             <span class="input-group-addon">container</span>
-                            <input type="text" class="form-control" ng-model="volume.Target" placeholder="e.g. /path/in/container" />
+                            <input
+                              type="text"
+                              class="form-control"
+                              ng-model="volume.Target"
+                              placeholder="e.g. /path/in/container"
+                              data-cy="service-creation-volume-container-path"
+                            />
                           </div>
                           <div class="small text-warning" ng-show="!volume.Target"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Target is required. </div>
                         </div>
@@ -295,6 +315,7 @@
                               class="form-control"
                               ng-model="volume.Source"
                               ng-options="vol as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30)) for vol in availableVolumes"
+                              data-cy="volume-source-select"
                             >
                               <option selected disabled value="">Select a volume</option>
                             </select>
@@ -306,7 +327,7 @@
                         <div class="input-group input-group-sm col-sm-6" ng-if="volume.Type === 'bind'">
                           <div class="input-group input-group-sm w-full">
                             <span class="input-group-addon">host</span>
-                            <input type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host" />
+                            <input type="text" class="form-control" ng-model="volume.Source" placeholder="e.g. /path/on/host" data-cy="service-creation-volume-host-path" />
                           </div>
                           <div class="small text-warning" ng-show="!volume.Source"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Source is required. </div>
                         </div>
@@ -337,7 +358,7 @@
               <div class="form-group">
                 <label for="container_network" class="col-sm-2 col-lg-1 control-label text-left">Network</label>
                 <div class="col-sm-9">
-                  <select class="form-control" ng-model="formValues.Network">
+                  <select class="form-control" ng-model="formValues.Network" data-cy="create-service-network-select">
                     <option selected disabled hidden value="">Select a network</option>
                     <option ng-repeat="net in availableNetworks | orderBy: 'Name'" ng-value="net.Name">{{ net.Name }}</option>
                   </select>
@@ -356,7 +377,7 @@
                 <!-- network-input-list -->
                 <div class="col-sm-12 form-inline" style="margin-top: 10px">
                   <div ng-repeat="network in formValues.ExtraNetworks" style="margin-top: 2px">
-                    <select class="form-control" ng-model="network.Name">
+                    <select class="form-control" ng-model="network.Name" data-cy="create-service-extra-network-select-{{ $index }}">
                       <option selected disabled hidden value="">Select a network</option>
                       <option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
                     </select>
@@ -381,7 +402,7 @@
                   <div ng-repeat="variable in formValues.HostsEntries" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP" />
+                      <input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP" data-cy="service-creation-hosts-entry" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -421,11 +442,11 @@
                   <div ng-repeat="label in formValues.Labels" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="service-creation-label" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="service-creation-label-value" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -448,11 +469,11 @@
                   <div ng-repeat="label in formValues.ContainerLabels" style="margin-top: 2px">
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">name</span>
-                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
+                      <input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" data-cy="service-creation-container-label" />
                     </div>
                     <div class="input-group col-sm-5 input-group-sm">
                       <span class="input-group-addon">value</span>
-                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
+                      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" data-cy="service-creation-container-label-value" />
                     </div>
                     <button class="btn btn-dangerlight" type="button" ng-click="removeContainerLabel($index)">
                       <pr-icon icon="'trash-2'" size="'md'"></pr-icon>

app/docker/views/services/create/includes/config.html

@@ -14,7 +14,13 @@
       <div ng-repeat="config in formValues.Configs" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">config</span>
-          <select class="form-control" ng-change="checkIfConfigDuplicated()" ng-model="config.model" ng-options="config.Name for config in availableConfigs | orderBy: 'Name'">
+          <select
+            class="form-control"
+            ng-change="checkIfConfigDuplicated()"
+            ng-model="config.model"
+            ng-options="config.Name for config in availableConfigs | orderBy: 'Name'"
+            data-cy="docker-stack-configs-select"
+          >
             <option value="" selected="selected">Select a config</option>
           </select>
         </div>

app/docker/views/services/create/includes/resources-placement.html

@@ -4,10 +4,17 @@
   <div class="form-group">
     <label for="memory-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> Memory reservation </label>
     <div class="col-sm-3">
-      <slider model="formValues.MemoryReservation" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
+      <slider
+        model="formValues.MemoryReservation"
+        floor="0"
+        ceil="state.sliderMaxMemory"
+        step="256"
+        ng-if="state.sliderMaxMemory"
+        data-cy="docker-services-create-memory-reservation-slider"
+      ></slider>
     </div>
     <div class="col-sm-2">
-      <input type="number" min="0" class="form-control" ng-model="formValues.MemoryReservation" />
+      <input type="number" data-cy="docker-services-create-memory-reservation-input" min="0" class="form-control" ng-model="formValues.MemoryReservation" />
     </div>
     <div class="col-sm-4">
       <p class="small text-muted" style="margin-top: 7px"> Minimum memory available on a node to run a task (<b>MB</b>) </p>
@@ -18,10 +25,17 @@
   <div class="form-group">
     <label for="memory-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> Memory limit </label>
     <div class="col-sm-3">
-      <slider model="formValues.MemoryLimit" floor="0" ceil="state.sliderMaxMemory" step="256" ng-if="state.sliderMaxMemory"></slider>
+      <slider
+        model="formValues.MemoryLimit"
+        floor="0"
+        ceil="state.sliderMaxMemory"
+        step="256"
+        ng-if="state.sliderMaxMemory"
+        data-cy="docker-services-create-memory-limit-slider"
+      ></slider>
     </div>
     <div class="col-sm-2">
-      <input type="number" min="0" class="form-control" ng-model="formValues.MemoryLimit" />
+      <input type="number" data-cy="docker-services-create-memory-limit-input" min="0" class="form-control" ng-model="formValues.MemoryLimit" />
     </div>
     <div class="col-sm-4" style="margin-top: 7px">
       <p class="small text-muted"> Maximum memory usage per task (<b>MB</b>) </p>
@@ -32,7 +46,15 @@
   <div class="form-group">
     <label for="cpu-reservation" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> CPU reservation </label>
     <div class="col-sm-5">
-      <slider model="formValues.CpuReservation" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
+      <slider
+        model="formValues.CpuReservation"
+        floor="0"
+        ceil="state.sliderMaxCpu"
+        step="0.25"
+        precision="2"
+        ng-if="state.sliderMaxCpu"
+        data-cy="docker-services-create-cpu-reservation-slider"
+      ></slider>
     </div>
     <div class="col-sm-4" style="margin-top: 20px">
       <p class="small text-muted"> Minimum CPU available on a node to run a task </p>
@@ -43,7 +65,15 @@
   <div class="form-group">
     <label for="cpu-limit" class="col-sm-3 col-lg-2 control-label text-left" style="margin-top: 20px"> CPU limit </label>
     <div class="col-sm-5">
-      <slider model="formValues.CpuLimit" floor="0" ceil="state.sliderMaxCpu" step="0.25" precision="2" ng-if="state.sliderMaxCpu"></slider>
+      <slider
+        model="formValues.CpuLimit"
+        floor="0"
+        ceil="state.sliderMaxCpu"
+        step="0.25"
+        precision="2"
+        ng-if="state.sliderMaxCpu"
+        data-cy="docker-services-create-cpu-limit-slider"
+      ></slider>
     </div>
     <div class="col-sm-4" style="margin-top: 20px">
       <p class="small text-muted"> Maximum CPU usage per task </p>
@@ -63,17 +93,17 @@
       <div ng-repeat="constraint in formValues.PlacementConstraints" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">name</span>
-          <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role" />
+          <input type="text" class="form-control" ng-model="constraint.key" placeholder="e.g. node.role" data-cy="docker-services-create-placement-constraint-name-{{ $index }}" />
         </div>
         <div class="input-group col-sm-1 input-group-sm">
-          <select name="constraintOperator" class="form-control" ng-model="constraint.operator">
+          <select name="constraintOperator" class="form-control" ng-model="constraint.operator" data-cy="docker-services-create-placement-constraint-operator-">
             <option value="==">==</option>
             <option value="!=">!=</option>
           </select>
         </div>
         <div class="input-group col-sm-5 input-group-sm">
           <span class="input-group-addon">value</span>
-          <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" />
+          <input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" data-cy="docker-services-create-placement-constraint-value-{{ $index }}" />
         </div>
         <button class="btn btn-dangerlight" type="button" ng-click="removePlacementConstraint($index)">
           <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
@@ -94,11 +124,23 @@
       <div ng-repeat="preference in formValues.PlacementPreferences" style="margin-top: 2px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">strategy</span>
-          <input type="text" class="form-control" ng-model="preference.strategy" placeholder="e.g. spread" />
+          <input
+            type="text"
+            class="form-control"
+            ng-model="preference.strategy"
+            placeholder="e.g. spread"
+            data-cy="docker-services-create-placement-preference-strategy-{{ $index }}"
+          />
         </div>
         <div class="input-group col-sm-5 input-group-sm">
           <span class="input-group-addon">value</span>
-          <input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. node.labels.datacenter" />
+          <input
+            type="text"
+            class="form-control"
+            ng-model="preference.value"
+            placeholder="e.g. node.labels.datacenter"
+            data-cy="docker-services-create-placement-preference-value-{{ $index }}"
+          />
         </div>
         <button class="btn btn-dangerlight" type="button" ng-click="removePlacementPreference($index)">
           <pr-icon icon="'trash-2'" size="'md'"></pr-icon>

app/docker/views/services/create/includes/secret.html

@@ -20,7 +20,13 @@
       <div ng-repeat="secret in formValues.Secrets track by $index" style="margin-top: 4px">
         <div class="input-group col-sm-4 input-group-sm">
           <span class="input-group-addon">secret</span>
-          <select class="form-control" ng-model="secret.model" ng-change="checkIfSecretDuplicated()" ng-options="secret.Name for secret in availableSecrets | orderBy: 'Name'">
+          <select
+            class="form-control"
+            ng-model="secret.model"
+            ng-change="checkIfSecretDuplicated()"
+            ng-options="secret.Name for secret in availableSecrets | orderBy: 'Name'"
+            data-cy="docker-stack-secrets-select"
+          >
             <option value="" selected="selected">Select a secret</option>
           </select>
         </div>

app/docker/views/services/create/includes/update-restart.html

@@ -4,7 +4,7 @@
   <div class="form-group">
     <label for="parallelism" class="col-sm-3 col-lg-2 control-label text-left">Update parallelism</label>
     <div class="col-sm-4 col-lg-3">
-      <input type="number" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1" />
+      <input type="number" data-cy="docker-service-update-parallelism-input" class="form-control" ng-model="formValues.Parallelism" id="parallelism" placeholder="e.g. 1" />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Maximum number of tasks to be updated simultaneously (0 to update all at once). </p>
@@ -18,7 +18,15 @@
       <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
-      <input type="text" class="form-control" ng-model="formValues.UpdateDelay" id="update-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="formValues.UpdateDelay"
+        id="update-delay"
+        placeholder="e.g. 1m"
+        ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
+        data-cy="docker-service-update-delay-input"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Amount of time between updates expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 0s, 0 seconds. </p>
@@ -77,7 +85,15 @@
       <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
-      <input type="text" class="form-control" ng-model="formValues.RestartDelay" id="restart-delay" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="formValues.RestartDelay"
+        id="restart-delay"
+        placeholder="e.g. 1m"
+        ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
+        data-cy="docker-service-restart-delay-input"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Delay between restart attempts expressed by a number followed by unit (ns|us|ms|s|m|h). Default value is 5s, 5 seconds. </p>
@@ -88,7 +104,14 @@
   <div class="form-group">
     <label for="restart-max-attempts" class="col-sm-3 col-lg-2 control-label text-left">Restart max attempts</label>
     <div class="col-sm-4 col-lg-3">
-      <input type="number" class="form-control" ng-model="formValues.RestartMaxAttempts" id="restart-max-attempts" placeholder="e.g. 0" />
+      <input
+        type="number"
+        data-cy="docker-service-restart-max-attempts-input"
+        class="form-control"
+        ng-model="formValues.RestartMaxAttempts"
+        id="restart-max-attempts"
+        placeholder="e.g. 0"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted"> Maximum attempts to restart a given task before giving up (default value is 0, which means unlimited). </p>
@@ -102,7 +125,15 @@
       <portainer-tooltip message="'Supported format examples: 1h, 5m, 10s, 1000ms, 15us, 60ns.'"></portainer-tooltip>
     </label>
     <div class="col-sm-4 col-lg-3">
-      <input type="text" class="form-control" ng-model="formValues.RestartWindow" id="restart-window" placeholder="e.g. 1m" ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i" />
+      <input
+        type="text"
+        class="form-control"
+        ng-model="formValues.RestartWindow"
+        id="restart-window"
+        placeholder="e.g. 1m"
+        ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
+        data-cy="docker-service-restart-window-input"
+      />
     </div>
     <div class="col-sm-5">
       <p class="small text-muted">

app/docker/views/services/edit/includes/configs.html

@@ -4,7 +4,12 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a config:
-        <select class="form-control !h-[30px] !text-[13px]" ng-options="config.Name for config in filterConfigs(configs) | orderBy: 'Name'" ng-model="newConfig">
+        <select
+          class="form-control !h-[30px] !text-[13px]"
+          ng-options="config.Name for config in filterConfigs(configs) | orderBy: 'Name'"
+          ng-model="newConfig"
+          data-cy="service-configs-select"
+        >
           <option selected disabled hidden value="">Select a config</option>
         </select>
         <a class="btn btn-default btn-sm" ng-click="addConfig(service, newConfig)"> <pr-icon icon="'plus'"></pr-icon> add config </a>
@@ -57,7 +62,7 @@
         <div class="btn-group" role="group">
           <button type="submit" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServiceConfigs'])">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServiceConfigs'])">Reset changes</a></li>

app/docker/views/services/edit/includes/constraints.html

@@ -25,6 +25,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-constraint-key-input-{{ $index }}"
                   class="form-control"
                   ng-model="constraint.key"
                   placeholder="e.g. node.role"
@@ -43,6 +44,7 @@
                   ng-change="updatePlacementConstraint(service, constraint)"
                   ng-disabled="isUpdating"
                   disable-authorization="DockerServiceUpdate"
+                  data-cy="placement-constraint-operator=selectoer"
                 >
                   <option value="==">==</option>
                   <option value="!=">!=</option>
@@ -53,6 +55,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-constraint-value-input-{{ $index }}"
                   class="form-control"
                   ng-model="constraint.value"
                   placeholder="e.g. manager"
@@ -76,7 +79,7 @@
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServiceConstraints'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServiceConstraints'])">Reset changes</a></li>

app/docker/views/services/edit/includes/containerlabels.html

@@ -25,6 +25,7 @@
                 <span class="input-group-addon fit-text-size">name</span>
                 <input
                   type="text"
+                  data-cy="container-label-key-{{ $index }}"
                   class="form-control"
                   ng-model="label.key"
                   placeholder="e.g. com.example.foo"
@@ -39,6 +40,7 @@
                 <span class="input-group-addon fit-text-size">value</span>
                 <input
                   type="text"
+                  data-cy="container-label-value_{{ $index }}"
                   class="form-control"
                   ng-model="label.value"
                   placeholder="e.g. bar"
@@ -64,7 +66,7 @@
             >Apply changes</button
           >
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServiceContainerLabels'])">Reset changes</a></li>

app/docker/views/services/edit/includes/environmentvariables.html

@@ -11,9 +11,7 @@
       <p>There are no environment variables for this service.</p>
     </rd-widget-body>
     <rd-widget-body ng-if="service.EnvironmentVariables.length > 0">
-      <div class="form-group">
-        <environment-variables-fieldset values="service.EnvironmentVariables" on-change="(onChangeEnvVars)"></environment-variables-fieldset>
-      </div>
+      <environment-variables-fieldset values="service.EnvironmentVariables" on-change="(onChangeEnvVars)"></environment-variables-fieldset>
     </rd-widget-body>
     <rd-widget-footer authorization="DockerServiceUpdate">
       <div class="btn-toolbar" role="toolbar">
@@ -27,7 +25,7 @@
             Apply changes
           </button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['EnvironmentVariables'])">Reset changes</a></li>

app/docker/views/services/edit/includes/hosts.html

@@ -25,6 +25,7 @@
                 <input
                   type="text"
                   class="form-control"
+                  data-cy="hosts-entry-hostname-input-{{ $index }}"
                   ng-model="entry.hostname"
                   placeholder="e.g. example.com"
                   ng-change="updateHostsEntry(service, entry)"
@@ -37,6 +38,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="hosts-entry-ip-input-{{ $index }}"
                   class="form-control"
                   ng-model="entry.ip"
                   placeholder="e.g. 10.0.1.1"
@@ -60,7 +62,7 @@
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Hosts'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['Hosts'])">Reset changes</a></li>

app/docker/views/services/edit/includes/image.html

@@ -24,7 +24,7 @@
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Image'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['Image'])">Reset changes</a></li>

app/docker/views/services/edit/includes/logging.html

@@ -4,7 +4,13 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Driver:
-        <select class="form-control !h-[30px] !text-[13px]" ng-model="service.LogDriverName" ng-change="updateLogDriverName(service)" ng-disabled="isUpdating">
+        <select
+          class="form-control !h-[30px] !text-[13px]"
+          ng-model="service.LogDriverName"
+          ng-change="updateLogDriverName(service)"
+          ng-disabled="isUpdating"
+          data-cy="logging-driver-selector"
+        >
           <option selected value="">Default logging driver</option>
           <option ng-repeat="driver in availableLoggingDrivers" ng-value="driver">{{ driver }}</option>
           <option value="none">none</option>
@@ -25,7 +31,14 @@
             <td class="w-1/2">
               <div class="input-group input-group-sm">
                 <span class="input-group-addon fit-text-size">name</span>
-                <input type="text" class="form-control" ng-model="option.key" ng-disabled="option.added || isUpdating" placeholder="e.g. FOO" />
+                <input
+                  type="text"
+                  data-cy="service-logging-driver-option-name-input-{{ $index }}"
+                  class="form-control"
+                  ng-model="option.key"
+                  ng-disabled="option.added || isUpdating"
+                  placeholder="e.g. FOO"
+                />
               </div>
             </td>
             <td>
@@ -33,6 +46,7 @@
                 <span class="input-group-addon fit-text-size">value</span>
                 <input
                   type="text"
+                  data-cy="service-logging-driver-option-value-input-{{ $index }}"
                   class="form-control"
                   ng-model="option.value"
                   ng-change="updateLogDriverOpt(service, option)"
@@ -61,7 +75,7 @@
             >Apply changes</button
           >
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['LogDriverName', 'LogDriverOpts'])">Reset changes</a></li>

app/docker/views/services/edit/includes/mounts.html

@@ -24,6 +24,7 @@
             <td class="!pt-6 !align-top" ng-if="isAdmin || allowBindMounts">
               <select
                 name="mountType"
+                data-cy="mount-type-selector"
                 class="form-control !h-[30px] !text-[13px]"
                 ng-model="mount.Type"
                 ng-change="onChangeMountType(service, mount)"
@@ -43,11 +44,13 @@
                   ng-options="vol.Id as ((vol.Id|truncate:30) + ' - ' + (vol.Driver|truncate:30))  for vol in availableVolumes"
                   ng-if="mount.Type === 'volume'"
                   disable-authorization="DockerServiceUpdate"
+                  data-cy="volume-selector"
                 >
                   <option selected disabled hidden value="">Select a volume</option>
                 </select>
                 <input
                   type="text"
+                  data-cy="bind-mount-source-input-{{ index }}"
                   class="form-control !h-[30px] !text-[13px]"
                   name=""
                   ng-model="mount.Source"
@@ -64,6 +67,7 @@
             <td class="!pb-0 !pt-6 !align-top">
               <input
                 type="text"
+                data-cy="mount-target-input-{{ index }}"
                 class="form-control mb-6 !h-[30px] !text-[13px]"
                 ng-model="mount.Target"
                 placeholder="e.g. /tmp/portainer/data"
@@ -96,7 +100,7 @@
             Apply changes
           </button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServiceMounts'])">Reset changes</a></li>

app/docker/views/services/edit/includes/networks.html

@@ -29,6 +29,7 @@
                 ng-options="net.Id as net.Name for net in filterNetworks(swarmNetworks, network)"
                 disable-authorization="DockerServiceUpdate"
                 style="width: initial; min-width: 50%"
+                data-cy="network-selector_{{ network.Name }}"
               >
                 <option disabled value="" selected>Select a network</option>
               </select>
@@ -37,9 +38,7 @@
             <td>
               <a ui-sref="docker.networks.network({id: network.Id})">{{ network.Id }}</a>
             </td>
-            <td>
-              {{ network.Addr }}
-            </td>
+            <td> {{ network.Addr }} </td>
             <td ng-if="network.Editable" authorization="DockerServiceUpdate">
               <span class="input-group-btn">
                 <button class="btn btn-sm btn-dangerlight" type="button" ng-click="removeNetwork(service, $index)" ng-disabled="isUpdating">
@@ -59,7 +58,7 @@
             Apply changes
           </button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['Networks'])">Reset changes</a></li>

app/docker/views/services/edit/includes/placementPreferences.html

@@ -24,6 +24,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-preference-strategy-input-{{ $index }}"
                   class="form-control"
                   ng-model="preference.strategy"
                   placeholder="e.g. node.role"
@@ -37,6 +38,7 @@
               <div class="input-group input-group-sm">
                 <input
                   type="text"
+                  data-cy="placement-preference-value-input-{{ $index }}"
                   class="form-control"
                   ng-model="preference.value"
                   placeholder="e.g. manager"
@@ -60,7 +62,7 @@
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServicePreferences'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServicePreferences'])">Reset changes</a></li>

app/docker/views/services/edit/includes/ports.html

@@ -1,108 +0,0 @@
-<div>
-  <rd-widget>
-    <rd-widget-header icon="list" title-text="Published ports">
-      <div class="nopadding" authorization="DockerServiceUpdate">
-        <a class="btn btn-secondary btn-sm pull-right" ng-click="isUpdating ||addPublishedPort(service)" ng-disabled="isUpdating">
-          <pr-icon icon="'plus'"></pr-icon> port mapping
-        </a>
-      </div>
-    </rd-widget-header>
-    <rd-widget-body ng-if="!service.Ports || service.Ports.length === 0">
-      <p>This service has no ports published.</p>
-    </rd-widget-body>
-    <rd-widget-body ng-if="service.Ports && service.Ports.length > 0" classes="no-padding">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Host port</th>
-            <th>Container port</th>
-            <th>Protocol</th>
-            <th>Publish mode</th>
-            <th authorization="DockerServiceUpdate">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr ng-repeat="portBinding in service.Ports">
-            <td>
-              <div class="input-group input-group-sm">
-                <span class="input-group-addon !leading-none">host</span>
-                <input
-                  type="number"
-                  class="form-control"
-                  ng-model="portBinding.PublishedPort"
-                  placeholder="e.g. 8080"
-                  ng-change="updatePublishedPort(service, mapping)"
-                  ng-disabled="isUpdating"
-                  disable-authorization="DockerServiceUpdate"
-                />
-              </div>
-            </td>
-            <td>
-              <div class="input-group input-group-sm">
-                <span class="input-group-addon !leading-none">container</span>
-                <input
-                  type="number"
-                  class="form-control"
-                  ng-model="portBinding.TargetPort"
-                  placeholder="e.g. 80"
-                  ng-change="updatePublishedPort(service, mapping)"
-                  ng-disabled="isUpdating"
-                  disable-authorization="DockerServiceUpdate"
-                />
-              </div>
-            </td>
-            <td>
-              <div class="input-group input-group-sm">
-                <select
-                  class="selectpicker form-control !rounded"
-                  ng-model="portBinding.Protocol"
-                  ng-change="updatePublishedPort(service, mapping)"
-                  ng-disabled="isUpdating"
-                  disable-authorization="DockerServiceUpdate"
-                >
-                  <option value="tcp">tcp</option>
-                  <option value="udp">udp</option>
-                </select>
-              </div>
-            </td>
-            <td>
-              <div class="input-group input-group-sm">
-                <select
-                  class="selectpicker form-control !rounded"
-                  ng-model="portBinding.PublishMode"
-                  ng-change="updatePublishedPort(service, mapping)"
-                  ng-disabled="isUpdating"
-                  disable-authorization="DockerServiceUpdate"
-                >
-                  <option value="ingress">ingress</option>
-                  <option value="host">host</option>
-                </select>
-              </div>
-            </td>
-            <td authorization="DockerServiceUpdate">
-              <span class="input-group-btn">
-                <button class="btn btn-sm btn-dangerlight" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">
-                  <pr-icon icon="'trash-2'" size="'md'"></pr-icon>
-                </button>
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </rd-widget-body>
-    <rd-widget-footer authorization="DockerServiceUpdate">
-      <div class="btn-toolbar" role="toolbar">
-        <div class="btn-group" role="group">
-          <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Ports'])" ng-click="updateService(service)">Apply changes</button>
-          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a ng-click="cancelChanges(service, ['Ports'])">Reset changes</a></li>
-            <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
-          </ul>
-        </div>
-      </div>
-    </rd-widget-footer>
-  </rd-widget>
-</div>

app/docker/views/services/edit/includes/resources.html

@@ -10,6 +10,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-memory-reservation-input"
                 step="0.125"
                 min="0"
                 ng-model="service.ReservationMemoryBytes"
@@ -27,6 +28,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-memory-limit-input"
                 step="0.125"
                 min="0"
                 ng-model="service.LimitMemoryBytes"
@@ -44,6 +46,7 @@
             </td>
             <td>
               <slider
+                data-cy="docker-service-cpu-reservation-slider"
                 model="service.ReservationNanoCPUs"
                 floor="0"
                 ceil="state.sliderMaxCpu"
@@ -64,6 +67,7 @@
             </td>
             <td>
               <slider
+                data-cy="docker-service-cpu-limit-slider"
                 model="service.LimitNanoCPUs"
                 floor="0"
                 ceil="state.sliderMaxCpu"
@@ -92,7 +96,7 @@
             >Apply changes</button
           >
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['LimitNanoCPUs', 'LimitMemoryBytes', 'ReservationNanoCPUs', 'ReservationMemoryBytes'])">Reset changes</a></li>

app/docker/views/services/edit/includes/restart.html

@@ -10,6 +10,7 @@
               <div class="input-group input-group-sm">
                 <select
                   class="selectpicker form-control !rounded"
+                  data-cy="docker-service-restart-condition-select"
                   ng-model="service.RestartCondition"
                   ng-change="updateServiceAttribute(service, 'RestartCondition')"
                   disable-authorization="DockerServiceUpdate"
@@ -30,6 +31,7 @@
               <input
                 class="input-sm"
                 type="text"
+                data-cy="docker-service-restart-delay-input"
                 ng-model="service.RestartDelay"
                 ng-change="updateServiceAttribute(service, 'RestartDelay')"
                 ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
@@ -48,6 +50,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-restart-max-attempts-input"
                 ng-model="service.RestartMaxAttempts"
                 ng-change="updateServiceAttribute(service, 'RestartMaxAttempts')"
                 disable-authorization="DockerServiceUpdate"
@@ -63,6 +66,7 @@
               <input
                 class="input-sm"
                 type="text"
+                data-cy="docker-service-restart-window-input"
                 ng-model="service.RestartWindow"
                 ng-change="updateServiceAttribute(service, 'RestartWindow')"
                 ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
@@ -89,7 +93,7 @@
             >Apply changes</button
           >
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['RestartCondition', 'RestartDelay', 'RestartMaxAttempts', 'RestartWindow'])">Reset changes</a></li>

app/docker/views/services/edit/includes/secrets.html

@@ -4,7 +4,12 @@
     <rd-widget-body classes="no-padding">
       <div class="form-inline" style="padding: 10px" authorization="DockerServiceUpdate">
         Add a secret:
-        <select class="form-control !h-[30px] !text-[13px]" ng-options="secret.Name for secret in secrets | orderBy: 'Name'" ng-model="state.addSecret.secret">
+        <select
+          class="form-control !h-[30px] !text-[13px]"
+          ng-options="secret.Name for secret in secrets | orderBy: 'Name'"
+          ng-model="state.addSecret.secret"
+          data-cy="service-secrets-select"
+        >
           <option selected disabled hidden value="">Select a secret</option>
         </select>
         <div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.3 && state.addSecret.override">
@@ -54,7 +59,7 @@
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServiceSecrets'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServiceSecrets'])">Reset changes</a></li>

app/docker/views/services/edit/includes/servicelabels.html

@@ -23,6 +23,7 @@
                 <span class="input-group-addon fit-text-size">name</span>
                 <input
                   type="text"
+                  data-cy="service-label-key-{{ $index }}"
                   class="form-control"
                   ng-model="label.key"
                   placeholder="e.g. com.example.foo"
@@ -37,6 +38,7 @@
                 <span class="input-group-addon fit-text-size">value</span>
                 <input
                   type="text"
+                  data-cy="service-label-value_{{ $index }}"
                   class="form-control"
                   ng-model="label.value"
                   placeholder="e.g. bar"
@@ -60,7 +62,7 @@
         <div class="btn-group" role="group">
           <button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['ServiceLabels'])" ng-click="updateService(service)">Apply changes</button>
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['ServiceLabels'])">Reset changes</a></li>

app/docker/views/services/edit/includes/updateconfig.html

@@ -10,6 +10,7 @@
               <input
                 class="input-sm"
                 type="number"
+                data-cy="docker-service-update-parallelism-input"
                 ng-model="service.UpdateParallelism"
                 ng-change="updateServiceAttribute(service, 'UpdateParallelism')"
                 disable-authorization="DockerServiceUpdate"
@@ -25,6 +26,7 @@
               <input
                 class="input-sm"
                 type="text"
+                data-cy="docker-service-update-delay-input"
                 ng-model="service.UpdateDelay"
                 ng-change="updateServiceAttribute(service, 'UpdateDelay')"
                 ng-pattern="/^([0-9]+)(h|m|s|ms|us|ns)$/i"
@@ -43,6 +45,7 @@
                   <input
                     type="radio"
                     name="failure_action"
+                    data-cy="update-failure-action-continue"
                     ng-model="service.UpdateFailureAction"
                     value="continue"
                     ng-change="updateServiceAttribute(service, 'UpdateFailureAction')"
@@ -54,6 +57,7 @@
                   <input
                     type="radio"
                     name="failure_action"
+                    data-cy="update-failure-action-pause"
                     ng-model="service.UpdateFailureAction"
                     value="pause"
                     ng-change="updateServiceAttribute(service, 'UpdateFailureAction')"
@@ -75,6 +79,7 @@
                   <input
                     type="radio"
                     name="updateconfig_order"
+                    data-cy="update-order-start-first"
                     ng-model="service.UpdateOrder"
                     value="start-first"
                     ng-change="updateServiceAttribute(service, 'UpdateOrder')"
@@ -86,6 +91,7 @@
                   <input
                     type="radio"
                     name="updateconfig_order"
+                    data-cy="update-order-stop-first"
                     ng-model="service.UpdateOrder"
                     value="stop-first"
                     ng-change="updateServiceAttribute(service, 'UpdateOrder')"
@@ -113,7 +119,7 @@
             >Apply changes</button
           >
           <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            <span class="caret"></span>
+            <pr-icon icon="'chevron-down'"></pr-icon>
           </button>
           <ul class="dropdown-menu">
             <li><a ng-click="cancelChanges(service, ['UpdateFailureAction', 'UpdateDelay', 'UpdateParallelism', 'UpdateOrder'])">Reset changes</a></li>

app/docker/views/services/edit/service.html

@@ -18,17 +18,20 @@
             <tr>
               <td class="w-1/5">Name</td>
               <td ng-if="applicationState.endpoint.apiVersion <= 1.24">
-                <input type="text" class="form-control" ng-model="service.Name" ng-change="updateServiceAttribute(service, 'Name')" ng-disabled="isUpdating" />
-              </td>
-              <td ng-if="applicationState.endpoint.apiVersion >= 1.25">
-                {{ service.Name }}
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="service.Name"
+                  ng-change="updateServiceAttribute(service, 'Name')"
+                  ng-disabled="isUpdating"
+                  data-cy="docker-service-edit-name"
+                />
               </td>
+              <td ng-if="applicationState.endpoint.apiVersion >= 1.25"> {{ service.Name }} </td>
             </tr>
             <tr>
               <td>ID</td>
-              <td>
-                {{ service.Id }}
-              </td>
+              <td> {{ service.Id }} </td>
             </tr>
             <tr ng-if="service.CreatedAt">
               <td>Created at</td>
@@ -53,6 +56,7 @@
                   <input
                     class="input-sm"
                     type="number"
+                    data-cy="docker-service-edit-replicas-input"
                     ng-model="service.Replicas"
                     ng-change="updateServiceAttribute(service, 'Replicas')"
                     disable-authorization="DockerServiceUpdate"
@@ -164,7 +168,7 @@
               >Apply changes</button
             >
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <span class="caret"></span>
+              <pr-icon icon="'chevron-down'"></pr-icon>
             </button>
             <ul class="dropdown-menu">
               <li><a ng-click="cancelChanges(service, ['Mode', 'Replicas', 'Name'])">Reset changes</a></li>
@@ -231,7 +235,17 @@
   <div class="col-lg-12 col-md-12 col-xs-12">
     <h3 id="service-network-specs">Networks &amp; ports</h3>
     <div id="service-networks" class="padding-top" ng-include="'app/docker/views/services/edit/includes/networks.html'"></div>
-    <div id="service-published-ports" class="padding-top" ng-include="'app/docker/views/services/edit/includes/ports.html'"></div>
+
+    <docker-service-ports-mapping-field
+      id="service-published-ports"
+      class="block padding-top"
+      values="formValues.ports"
+      on-change="(onChangePorts)"
+      has-changes="hasChanges(service, ['Ports'])"
+      on-reset="(onResetPorts)"
+      on-submit="(onSubmit)"
+    ></docker-service-ports-mapping-field>
+
     <div id="service-hosts-entries" class="padding-top" ng-include="'app/docker/views/services/edit/includes/hosts.html'"></div>
   </div>
 </div>

app/docker/views/services/edit/serviceController.js

@@ -9,7 +9,6 @@ require('./includes/logging.html');
 require('./includes/mounts.html');
 require('./includes/networks.html');
 require('./includes/placementPreferences.html');
-require('./includes/ports.html');
 require('./includes/resources.html');
 require('./includes/restart.html');
 require('./includes/secrets.html');
@@ -27,6 +26,7 @@ import { confirm, confirmDelete } from '@@/modals/confirm';
 import { ModalType } from '@@/modals';
 import { buildConfirmButton } from '@@/modals/utils';
 import { convertServiceToConfig } from '@/react/docker/services/common/convertServiceToConfig';
+import { portsMappingUtils } from '@/react/docker/services/ItemView/PortMappingField';
 
 angular.module('portainer.docker').controller('ServiceController', [
   '$q',
@@ -108,6 +108,7 @@ angular.module('portainer.docker').controller('ServiceController', [
 
     $scope.formValues = {
       RegistryModel: new PorImageRegistryModel(),
+      ports: [],
     };
 
     $scope.tasks = [];
@@ -544,12 +545,8 @@ angular.module('portainer.docker').controller('ServiceController', [
         }
       }
 
-      if (service.Ports) {
-        service.Ports.forEach(function (binding) {
-          if (binding.PublishedPort === null || binding.PublishedPort === '') {
-            delete binding.PublishedPort;
-          }
-        });
+      if ($scope.hasChanges(service, ['Ports'])) {
+        service.Ports = portsMappingUtils.toRequest($scope.formValues.ports);
       }
 
       config.EndpointSpec = {
@@ -714,6 +711,25 @@ angular.module('portainer.docker').controller('ServiceController', [
       service.StopGracePeriod = service.StopGracePeriod ? ServiceHelper.translateNanosToHumanDuration(service.StopGracePeriod) : '';
     }
 
+    $scope.onChangePorts = function (ports) {
+      $scope.$evalAsync(() => {
+        $scope.formValues.ports = ports;
+        updateServiceArray($scope.service, 'Ports');
+      });
+    };
+
+    $scope.onResetPorts = function (all = false) {
+      $scope.$evalAsync(() => {
+        $scope.formValues.ports = portsMappingUtils.toViewModel($scope.service.Model.Spec.EndpointSpec.Ports);
+
+        $scope.cancelChanges($scope.service, all ? undefined : ['Ports']);
+      });
+    };
+
+    $scope.onSubmit = function () {
+      $scope.updateService($scope.service);
+    };
+
     function initView() {
       var apiVersion = $scope.applicationState.endpoint.apiVersion;
       var agentProxy = $scope.applicationState.endpoint.mode.agentProxy;
@@ -727,6 +743,8 @@ angular.module('portainer.docker').controller('ServiceController', [
             $scope.lastVersion = service.Version;
           }
 
+          $scope.formValues.ports = portsMappingUtils.toViewModel(service.Model.Spec.EndpointSpec.Ports);
+
           transformResources(service);
           translateServiceArrays(service);
           transformDurations(service);

app/docker/views/swarm/visualizer/swarmvisualizer.html

@@ -57,7 +57,7 @@
               <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" size="'sm'" style="display: none"></pr-icon>
             </label>
             <div class="col-sm-2">
-              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
+              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control" data-cy="swarm-refreshRate-select">
                 <option value="5">5s</option>
                 <option value="10">10s</option>
                 <option value="30">30s</option>
@@ -97,9 +97,7 @@
               <div class="node_labels" ng-if="node.Labels.length > 0 && state.DisplayNodeLabels">
                 <div>Labels</div>
                 <div class="node_label" ng-repeat="label in node.Labels">
-                  <span class="label_key">
-                    {{ label.key }}
-                  </span>
+                  <span class="label_key"> {{ label.key }} </span>
                   <span class="label_value" ng-if="label.value"> = {{ label.value }} </span>
                 </div>
               </div>

app/docker/views/volumes/create/createvolume.html

@@ -9,7 +9,7 @@
           <div class="form-group">
             <label for="volume_name" class="col-sm-2 col-md-1 control-label text-left">Name</label>
             <div class="col-sm-10 col-md-11">
-              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume" />
+              <input type="text" class="form-control" ng-model="formValues.Name" id="volume_name" placeholder="e.g. myVolume" data-cy="volume-name-input" />
             </div>
           </div>
           <!-- !name-input -->
@@ -18,10 +18,24 @@
           <div class="form-group">
             <label for="volume_driver" class="col-sm-2 col-md-1 control-label text-left">Driver</label>
             <div class="col-sm-10 col-md-11">
-              <select class="form-control" ng-options="driver for driver in availableVolumeDrivers" ng-model="formValues.Driver" ng-if="availableVolumeDrivers.length > 0">
+              <select
+                class="form-control"
+                ng-options="driver for driver in availableVolumeDrivers"
+                ng-model="formValues.Driver"
+                ng-if="availableVolumeDrivers.length > 0"
+                data-cy="volume-driver-select"
+              >
                 <option disabled hidden value="">Select a driver</option>
               </select>
-              <input type="text" class="form-control" ng-model="formValues.Driver" id="volume_driver" placeholder="e.g. driverName" ng-if="availableVolumeDrivers.length === 0" />
+              <input
+                type="text"
+                class="form-control"
+                ng-model="formValues.Driver"
+                id="volume_driver"
+                placeholder="e.g. driverName"
+                ng-if="availableVolumeDrivers.length === 0"
+                data-cy="volume-driver-input"
+              />
             </div>
           </div>
           <!-- !driver-input -->
@@ -41,11 +55,11 @@
               <div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px">
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">name</span>
-                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint" />
+                  <input type="text" class="form-control" ng-model="option.name" placeholder="e.g. mountpoint" data-cy="driver-option-name-input" />
                 </div>
                 <div class="input-group col-sm-5 input-group-sm">
                   <span class="input-group-addon">value</span>
-                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host" />
+                  <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. /path/on/host" data-cy="driver-option-value-input" />
                 </div>
                 <button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)">
                   <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>

app/docker/views/volumes/volumesController.js

@@ -1,5 +1,3 @@
-import { confirmDelete } from '@@/modals/confirm';
-
 angular.module('portainer.docker').controller('VolumesController', [
   '$q',
   '$scope',
@@ -13,28 +11,24 @@ angular.module('portainer.docker').controller('VolumesController', [
   'endpoint',
   function ($q, $scope, $state, VolumeService, ServiceService, VolumeHelper, Notifications, HttpRequestHelper, Authentication, endpoint) {
     $scope.removeAction = function (selectedItems) {
-      confirmDelete('Do you want to remove the selected volume(s)?').then((confirmed) => {
-        if (confirmed) {
-          var actionCount = selectedItems.length;
-          angular.forEach(selectedItems, function (volume) {
-            HttpRequestHelper.setPortainerAgentTargetHeader(volume.NodeName);
-            VolumeService.remove(volume)
-              .then(function success() {
-                Notifications.success('Volume successfully removed', volume.Id);
-                var index = $scope.volumes.indexOf(volume);
-                $scope.volumes.splice(index, 1);
-              })
-              .catch(function error(err) {
-                Notifications.error('Failure', err, 'Unable to remove volume');
-              })
-              .finally(function final() {
-                --actionCount;
-                if (actionCount === 0) {
-                  $state.reload();
-                }
-              });
+      var actionCount = selectedItems.length;
+      angular.forEach(selectedItems, function (volume) {
+        HttpRequestHelper.setPortainerAgentTargetHeader(volume.NodeName);
+        VolumeService.remove(volume)
+          .then(function success() {
+            Notifications.success('Volume successfully removed', volume.Id);
+            var index = $scope.volumes.indexOf(volume);
+            $scope.volumes.splice(index, 1);
+          })
+          .catch(function error(err) {
+            Notifications.error('Failure', err, 'Unable to remove volume');
+          })
+          .finally(function final() {
+            --actionCount;
+            if (actionCount === 0) {
+              $state.reload();
+            }
           });
-        }
       });
     };
 

app/edge/__module.js

@@ -154,7 +154,7 @@ angular
       url: '/templates?template',
       views: {
         'content@': {
-          component: 'edgeAppTemplatesView',
+          component: 'appTemplatesView',
         },
       },
       data: {

app/edge/components/edge-job-form/edgeJobForm.html

@@ -6,6 +6,7 @@
     <div class="col-sm-10">
       <input
         type="text"
+        data-cy="edgejob-name-input"
         class="form-control"
         ng-model="$ctrl.model.Name"
         ng-pattern="/^[a-zA-Z0-9][a-zA-Z0-9_.-]+$/"
@@ -43,7 +44,9 @@
     <div class="form-group">
       <label for="recurring" class="col-sm-2 control-label text-left">Recurring Edge job</label>
       <div class="col-sm-10">
-        <label class="switch"><input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" /><span class="slider round"></span></label>
+        <label class="switch"
+          ><input type="checkbox" name="recurring" ng-model="$ctrl.model.Recurring" data-cy="recurring-edge-job-checkbox" /><span class="slider round"></span
+        ></label>
       </div>
     </div>
     <!-- not-recurring -->
@@ -51,7 +54,7 @@
       <div class="form-group">
         <label for="edgejob_cron" class="col-sm-2 control-label text-left">Schedule date</label>
         <div class="col-sm-10">
-          <input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" />
+          <input class="form-control" moment-picker ng-model="$ctrl.formValues.datetime" format="YYYY-MM-DD HH:mm" data-cy="edge-job-date-time-picker" />
         </div>
         <div class="col-sm-12 small text-muted mt-2.5"> Time should be set according to the chosen environments' timezone. </div>
         <div ng-show="edgeJobForm.datepicker.$invalid">
@@ -73,6 +76,7 @@
         <div class="col-sm-10">
           <select
             id="edgejob_value"
+            data-cy="edge-job-time-select"
             name="edgejob_value"
             class="form-control"
             ng-model="$ctrl.formValues.scheduleValue"
@@ -101,6 +105,7 @@
       <div class="col-sm-10">
         <input
           type="text"
+          data-cy="edge-job-cron-input"
           class="form-control"
           ng-model="$ctrl.model.CronExpression"
           id="edgejob_cron"
@@ -193,9 +198,7 @@
         <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
         <span ng-show="$ctrl.actionInProgress">In progress...</span>
       </button>
-      <span class="text-danger space-left" ng-if="$ctrl.state.formValidationError">
-        {{ $ctrl.state.formValidationError }}
-      </span>
+      <span class="text-danger space-left" ng-if="$ctrl.state.formValidationError"> {{ $ctrl.state.formValidationError }} </span>
     </div>
   </div>
   <!-- !actions -->

app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.css

@@ -1,3 +0,0 @@
-.edge-job-results-datatable thead th {
-  width: 50%;
-}

app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html

@@ -1,70 +0,0 @@
-<div class="datatable edge-job-results-datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <span><pr-icon icon="$ctrl.titleIcon"></pr-icon></span>
-          {{ $ctrl.titleText }}
-        </div>
-        <div class="searchBar">
-          <span><pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon></span>
-          <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover table-filters nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <a ng-click="$ctrl.changeOrderBy('Endpoint')">
-                  Environment
-                  <span><pr-icon icon="'arrow-down'" ng-if="$ctrl.state.orderBy === 'Endpoint' && !$ctrl.state.reverseOrder"></pr-icon></span>
-                  <span><pr-icon icon="'arrow-up'" ng-if="$ctrl.state.orderBy === 'Endpoint' && $ctrl.state.reverseOrder"></pr-icon></span>
-                </a>
-              </th>
-              <th> Actions </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-            >
-              <td>
-                {{ item.Endpoint.Name }}
-              </td>
-              <td>
-                <button ng-if="item.LogsStatus === 0 || item.LogsStatus === 1" class="btn btn-sm btn-primary" ng-click="$ctrl.collectLogs(item.EndpointId)"> Retrieve logs </button>
-                <button ng-if="item.LogsStatus === 3" class="btn btn-sm btn-primary" ng-click="$ctrl.onDownloadLogsClick(item.EndpointId)"> Download logs </button>
-                <button ng-if="item.LogsStatus === 3" class="btn btn-sm btn-primary" ng-click="$ctrl.onClearLogsClick(item.EndpointId)"> Clear logs </button>
-                <span ng-if="item.LogsStatus === 2"> Logs marked for collection, please wait until the logs are available. </span>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="9" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="9" class="text-muted text-center">No result available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span class="mr-1"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>

app/edge/components/edge-job-results-datatable/edgeJobResultsDatatableController.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-import _ from 'lodash-es';
-
-export class EdgeJobResultsDatatableController {
-  /* @ngInject */
-  constructor($controller, $scope, $state) {
-    this.$state = $state;
-    angular.extend(this, $controller('GenericDatatableController', { $scope }));
-  }
-
-  collectLogs(...args) {
-    this.settings.repeater.autoRefresh = true;
-    this.settings.repeater.refreshRate = '5';
-    this.onSettingsRepeaterChange();
-    this.onCollectLogsClick(...args);
-  }
-
-  $onChanges({ dataset }) {
-    if (dataset && dataset.currentValue) {
-      this.onDatasetChange(dataset.currentValue);
-    }
-  }
-
-  onDatasetChange(dataset) {
-    const anyCollecting = _.some(dataset, (item) => item.LogsStatus === 2);
-    this.settings.repeater.autoRefresh = anyCollecting;
-    this.settings.repeater.refreshRate = '5';
-    this.onSettingsRepeaterChange();
-  }
-}

app/edge/components/edge-job-results-datatable/index.js

@@ -1,21 +0,0 @@
-import angular from 'angular';
-
-import { EdgeJobResultsDatatableController } from './edgeJobResultsDatatableController';
-import './edgeJobResultsDatatable.css';
-
-angular.module('portainer.edge').component('edgeJobResultsDatatable', {
-  templateUrl: './edgeJobResultsDatatable.html',
-  controller: EdgeJobResultsDatatableController,
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    onDownloadLogsClick: '<',
-    onCollectLogsClick: '<',
-    onClearLogsClick: '<',
-    refreshCallback: '<',
-  },
-});

app/edge/components/edge-jobs-datatable/edgeJobsDatatable.html

@@ -1,108 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-          {{ $ctrl.titleText }}
-        </div>
-
-        <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" class-name="'icon'"></pr-icon>
-          <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
-        </div>
-        <div class="actionBar">
-          <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
-            <pr-icon icon="'trash-2'"></pr-icon>Remove
-          </button>
-          <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.jobs.new"> <pr-icon icon="'plus'"></pr-icon>Add Edge job </button>
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <div class="vertical-center">
-                  <span class="md-checkbox">
-                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                    <label for="select_all"></label>
-                  </span>
-                  <table-column-header
-                    col-title="'Name'"
-                    can-sort="true"
-                    is-sorted="$ctrl.state.orderBy === 'Name'"
-                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                    ng-click="$ctrl.changeOrderBy('Name')"
-                  ></table-column-header>
-                </div>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'CronExpression'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'CronExpression'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'CronExpression' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('CronExpression')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Created'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Created'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Created')"
-                ></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>
-                <span class="md-checkbox">
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                <a ui-sref="edge.jobs.job({id: item.Id})">{{ item.Name }}</a>
-              </td>
-              <td>
-                {{ item.CronExpression }}
-              </td>
-              <td>{{ item.Created | getisodatefromtimestamp }}</td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-muted text-center">No Edge job available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span class="mr-1"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>

app/edge/components/edge-jobs-datatable/index.js

@@ -1,15 +0,0 @@
-import angular from 'angular';
-
-angular.module('portainer.edge').component('edgeJobsDatatable', {
-  templateUrl: './edgeJobsDatatable.html',
-  controller: 'GenericDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    removeAction: '<',
-  },
-});

app/edge/components/group-form/groupForm.html

@@ -4,13 +4,13 @@
     <div class="col-sm-9 col-lg-10">
       <input
         type="text"
+        data-cy="edgeGroupCreate-groupNameInput"
         class="form-control"
         id="group_name"
         name="group_name"
         ng-model="$ctrl.model.Name"
         required
         auto-focus
-        data-cy="edgeGroupCreate-groupNameInput"
         placeholder="e.g. mygroup"
       />
       <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">

app/edge/react/components/edge-jobs.ts

@@ -0,0 +1,18 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { ResultsDatatable } from '@/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable';
+
+export const edgeJobsModule = angular
+  .module('portainer.edge.react.components.edge-jobs', [])
+  .component(
+    'edgeJobResultsDatatable',
+    r2a(withUIRouter(ResultsDatatable), [
+      'dataset',
+      'onClearLogs',
+      'onCollectLogs',
+      'onDownloadLogs',
+      'onRefresh',
+    ])
+  ).name;

app/edge/react/components/index.ts

@@ -15,8 +15,10 @@ import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/Asso
 import { EnvironmentsDatatable } from '@/react/edge/edge-stacks/ItemView/EnvironmentsDatatable';
 import { TemplateFieldset } from '@/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateFieldset';
 
+import { edgeJobsModule } from './edge-jobs';
+
 const ngModule = angular
-  .module('portainer.edge.react.components', [])
+  .module('portainer.edge.react.components', [edgeJobsModule])
   .component(
     'edgeStackEnvironmentsDatatable',
     r2a(withUIRouter(withReactQuery(EnvironmentsDatatable)), [])

app/edge/react/views/index.ts

@@ -9,9 +9,10 @@ import { ListView as EdgeStacksListView } from '@/react/edge/edge-stacks/ListVie
 import { ListView as EdgeGroupsListView } from '@/react/edge/edge-groups/ListView';
 
 import { templatesModule } from './templates';
+import { jobsModule } from './jobs';
 
 export const viewsModule = angular
-  .module('portainer.edge.react.views', [templatesModule])
+  .module('portainer.edge.react.views', [templatesModule, jobsModule])
   .component(
     'waitingRoomView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(WaitingRoomView))), [])

app/edge/react/views/jobs.ts

@@ -0,0 +1,13 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { ListView } from '@/react/edge/edge-jobs/ListView';
+
+export const jobsModule = angular
+  .module('portainer.edge.react.views.jobs', [])
+  .component(
+    'edgeJobsView',
+    r2a(withUIRouter(withCurrentUser(ListView)), [])
+  ).name;

app/edge/react/views/templates.ts

@@ -4,25 +4,10 @@ import { r2a } from '@/react-tools/react2angular';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { ListView } from '@/react/edge/templates/custom-templates/ListView';
-import { AppTemplatesView } from '@/react/edge/templates/AppTemplatesView';
-import { CreateView } from '@/react/portainer/templates/custom-templates/CreateView';
-import { EditView } from '@/react/portainer/templates/custom-templates/EditView';
 
 export const templatesModule = angular
-  .module('portainer.app.react.components.templates', [])
-  .component(
-    'edgeAppTemplatesView',
-    r2a(withCurrentUser(withUIRouter(AppTemplatesView)), [])
-  )
+  .module('portainer.edge.react.views.templates', [])
   .component(
     'edgeCustomTemplatesView',
     r2a(withCurrentUser(withUIRouter(ListView)), [])
-  )
-  .component(
-    'createCustomTemplatesView',
-    r2a(withCurrentUser(withUIRouter(CreateView)), [])
-  )
-  .component(
-    'editCustomTemplatesView',
-    r2a(withCurrentUser(withUIRouter(EditView)), [])
   ).name;

app/edge/views/edge-jobs/edgeJob/edgeJob.html

@@ -30,17 +30,13 @@
             </uib-tab-heading>
 
             <edge-job-results-datatable
+              class="mt-4 block"
               ng-if="$ctrl.results"
-              title-text="Results"
-              title-icon="list"
               dataset="$ctrl.results"
-              table-key="edge-job-results"
-              order-by="Status"
-              reverse-order="true"
-              refresh-callback="$ctrl.refresh"
-              on-download-logs-click="($ctrl.downloadLogs)"
-              on-collect-logs-click="($ctrl.collectLogs)"
-              on-clear-logs-click="($ctrl.clearLogs)"
+              on-refresh="($ctrl.refresh)"
+              on-download-logs="($ctrl.downloadLogs)"
+              on-collect-logs="($ctrl.collectLogs)"
+              on-clear-logs="($ctrl.clearLogs)"
             ></edge-job-results-datatable>
           </uib-tab>
         </uib-tabset>

app/edge/views/edge-jobs/edgeJob/edgeJobController.js

@@ -86,8 +86,14 @@ export class EdgeJobController {
   async collectLogsAsync(endpointId) {
     try {
       await this.EdgeJobService.collectLogs(this.edgeJob.Id, endpointId);
-      const result = _.find(this.results, (result) => result.EndpointId === endpointId);
-      result.LogsStatus = 2;
+      this.results = this.results.map((result) =>
+        result.EndpointId === endpointId
+          ? {
+              ...result,
+              LogsStatus: 2,
+            }
+          : result
+      );
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to collect logs');
     }
@@ -99,8 +105,14 @@ export class EdgeJobController {
   async clearLogsAsync(endpointId) {
     try {
       await this.EdgeJobService.clearLogs(this.edgeJob.Id, endpointId);
-      const result = _.find(this.results, (result) => result.EndpointId === endpointId);
-      result.LogsStatus = 1;
+      this.results = this.results.map((result) =>
+        result.EndpointId === endpointId
+          ? {
+              ...result,
+              LogsStatus: 1,
+            }
+          : result
+      );
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to clear logs');
     }

app/edge/views/edge-jobs/edgeJobsView/edgeJobsView.html

@@ -1,20 +0,0 @@
-<page-header title="'Edge Jobs'" breadcrumbs="['Edge Jobs']" reload="true"> </page-header>
-
-<information-panel title-text="Information">
-  <span class="small">
-    <p class="text-muted">Edge Jobs requires Docker Standalone and a cron implementation that reads jobs from <code>/etc/cron.d</code></p>
-  </span>
-</information-panel>
-
-<div class="row">
-  <div class="col-sm-12">
-    <edge-jobs-datatable
-      title-text="Edge jobs"
-      title-icon="clock"
-      dataset="$ctrl.edgeJobs"
-      table-key="edgeJobs"
-      order-by="Name"
-      remove-action="$ctrl.removeAction"
-    ></edge-jobs-datatable>
-  </div>
-</div>

app/edge/views/edge-jobs/edgeJobsView/edgeJobsViewController.js

@@ -1,53 +0,0 @@
-import _ from 'lodash-es';
-import { confirmDelete } from '@@/modals/confirm';
-
-export class EdgeJobsViewController {
-  /* @ngInject */
-  constructor($async, $state, EdgeJobService, Notifications) {
-    this.$async = $async;
-    this.$state = $state;
-    this.EdgeJobService = EdgeJobService;
-    this.Notifications = Notifications;
-
-    this.removeAction = this.removeAction.bind(this);
-    this.deleteJobsAsync = this.deleteJobsAsync.bind(this);
-    this.deleteJobs = this.deleteJobs.bind(this);
-  }
-
-  removeAction(selectedItems) {
-    confirmDelete('Do you want to remove the selected Edge job(s)?').then((confirmed) => {
-      if (!confirmed) {
-        return;
-      }
-      this.deleteJobs(selectedItems);
-    });
-  }
-
-  deleteJobs(edgeJobs) {
-    return this.$async(this.deleteJobsAsync, edgeJobs);
-  }
-
-  async deleteJobsAsync(edgeJobs) {
-    for (let edgeJob of edgeJobs) {
-      try {
-        await this.EdgeJobService.remove(edgeJob.Id);
-        this.Notifications.success('Edge job successfully removed', edgeJob.Name);
-        _.remove(this.edgeJobs, edgeJob);
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to remove Edge job ' + edgeJob.Name);
-      }
-    }
-
-    this.$state.reload();
-  }
-
-  async $onInit() {
-    try {
-      const edgeJobs = await this.EdgeJobService.edgeJobs();
-      this.edgeJobs = edgeJobs;
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to retrieve Edge jobs');
-      this.edgeJobs = [];
-    }
-  }
-}

app/edge/views/edge-jobs/edgeJobsView/index.js

@@ -1,7 +0,0 @@
-import angular from 'angular';
-import { EdgeJobsViewController } from './edgeJobsViewController';
-
-angular.module('portainer.edge').component('edgeJobsView', {
-  templateUrl: './edgeJobsView.html',
-  controller: EdgeJobsViewController,
-});

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js

@@ -17,7 +17,7 @@ import { getInitialTemplateValues } from '@/react/edge/edge-stacks/CreateView/Te
 import { getAppTemplates } from '@/react/portainer/templates/app-templates/queries/useAppTemplates';
 import { fetchFilePreview } from '@/react/portainer/templates/app-templates/queries/useFetchTemplateFile';
 import { TemplateViewModel } from '@/react/portainer/templates/app-templates/view-model';
-import { getDefaultValues as getAppVariablesDefaultValues } from '@/react/edge/edge-stacks/CreateView/TemplateFieldset/EnvVarsFieldset';
+import { getDefaultValues as getAppVariablesDefaultValues } from '@/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset';
 
 export default class CreateEdgeStackViewController {
   /* @ngInject */
@@ -345,7 +345,7 @@ export default class CreateEdgeStackViewController {
       RepositoryUsername: this.formValues.RepositoryUsername,
       RepositoryPassword: this.formValues.RepositoryPassword,
       TLSSkipVerify: this.formValues.TLSSkipVerify,
-      CreatedFromCustomTemplateID: this.state.templateValues.template.Id,
+      CreatedFromCustomTemplateID: this.state.templateValues.template && this.state.templateValues.template.Id,
     };
     return this.EdgeStackService.createStackFromGitRepository(
       {

app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html

@@ -11,6 +11,7 @@
             <div class="col-sm-11">
               <input
                 type="text"
+                data-cy="edgeStackCreate-nameInput"
                 class="form-control"
                 ng-model="$ctrl.formValues.Name"
                 id="stack_name"
@@ -19,7 +20,6 @@
                 placeholder="e.g. mystack"
                 auto-focus
                 required
-                data-cy="edgeStackCreate-nameInput"
               />
               <div class="help-block" ng-show="$ctrl.form.$invalid">
                 <div class="small text-warning">
@@ -90,9 +90,7 @@
                 <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
                 <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
               </button>
-              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
-                {{ $ctrl.state.formValidationError }}
-              </span>
+              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px"> {{ $ctrl.state.formValidationError }} </span>
             </div>
           </div>
           <!-- !actions -->

app/kubernetes/__module.js

@@ -518,7 +518,7 @@ angular.module('portainer.kubernetes', ['portainer.app', registriesModule, custo
       url: '/registries',
       views: {
         'content@': {
-          component: 'endpointRegistriesView',
+          component: 'environmentRegistriesView',
         },
       },
       data: {

app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.controller.js

@@ -1,12 +0,0 @@
-import { KubernetesConfigurationKinds } from 'Kubernetes/models/configuration/models';
-
-export default class {
-  $onInit() {
-    const secrets = (this.configurations || [])
-      .filter((config) => config.Data && config.Kind === KubernetesConfigurationKinds.SECRET)
-      .flatMap((config) => Object.entries(config.Data))
-      .map(([key, value]) => ({ key, value }));
-
-    this.state = { secrets };
-  }
-}

app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.html

@@ -1,10 +0,0 @@
-<div class="col-xs-12 !px-0 !py-1 text-[13px]"> Secrets </div>
-<table style="width: 50%">
-  <tbody>
-    <tr>
-      <td>
-        <sensitive-details ng-repeat="secret in $ctrl.state.secrets" key="{{ secret.key }}" value="{{ secret.value }}"> </sensitive-details>
-      </td>
-    </tr>
-  </tbody>
-</table>

app/kubernetes/components/datatables/applications-datatable-details/applications-datatable-details.js

@@ -1,10 +0,0 @@
-import angular from 'angular';
-import controller from './applications-datatable-details.controller';
-
-angular.module('portainer.kubernetes').component('kubernetesApplicationsDatatableDetails', {
-  templateUrl: './applications-datatable-details.html',
-  controller,
-  bindings: {
-    configurations: '<',
-  },
-});

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.css

@@ -1,22 +0,0 @@
-.secondary-heading {
-  background-color: transparent;
-}
-
-.secondary-body {
-  background-color: transparent;
-}
-
-.datatable-wide {
-  width: 55px;
-}
-
-.published-url-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 3fr;
-  padding-top: 10px;
-  padding-bottom: 5px;
-}
-
-.publish-url-link {
-  width: min-content;
-}

app/kubernetes/components/datatables/applications-datatable/applicationsDatatable.html

@@ -1,385 +0,0 @@
-<div class="datatable">
-  <!-- toolbar header actions and settings -->
-  <div ng-if="$ctrl.isPrimary">
-    <div class="toolBar">
-      <div class="toolBarTitle vertical-center">
-        <div class="widget-icon space-right">
-          <pr-icon icon="'box'"></pr-icon>
-        </div>
-        Applications
-      </div>
-      <!-- use row reverse to make the left most items wrap first to the right side in the next line -->
-      <div class="inline-flex flex-row-reverse flex-wrap !gap-x-5 gap-y-3">
-        <div class="settings" data-cy="k8sApp-tableSettings">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle aria-label="Settings">
-              <pr-icon icon="'more-vertical'" class-name="'!mr-0 !h-4'"></pr-icon>
-            </span>
-            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader"> Table settings </div>
-                <div class="menuContent">
-                  <div>
-                    <div class="md-checkbox" ng-if="$ctrl.isAdmin">
-                      <input id="applications_setting_show_system" type="checkbox" ng-model="$ctrl.settings.showSystem" ng-change="$ctrl.onSettingsShowSystemChange()" />
-                      <label for="applications_setting_show_system">Show system resources</label>
-                    </div>
-                    <div class="md-checkbox">
-                      <input
-                        id="setting_auto_refresh"
-                        type="checkbox"
-                        ng-model="$ctrl.settings.repeater.autoRefresh"
-                        ng-change="$ctrl.onSettingsRepeaterChange()"
-                        data-cy="k8sApp-autoRefreshCheckbox"
-                      />
-                      <label for="setting_auto_refresh">Auto refresh</label>
-                    </div>
-                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
-                      <label for="settings_refresh_rate"> Refresh rate </label>
-                      <select
-                        id="settings_refresh_rate"
-                        ng-model="$ctrl.settings.repeater.refreshRate"
-                        ng-change="$ctrl.onSettingsRepeaterChange()"
-                        class="small-select"
-                        data-cy="k8sApp-refreshRateDropdown"
-                      >
-                        <option value="10">10s</option>
-                        <option value="30">30s</option>
-                        <option value="60">1min</option>
-                        <option value="120">2min</option>
-                        <option value="300">5min</option>
-                      </select>
-                      <span>
-                        <pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.settings.open = false;" data-cy="k8sApp-tableSettingsCloseButton">Close</a>
-                </div>
-              </div>
-            </div>
-          </span>
-        </div>
-
-        <div class="actionBar !mr-0 !gap-3">
-          <button
-            ng-if="$ctrl.isPrimary"
-            type="button"
-            class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
-            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-            data-cy="k8sApp-removeAppButton"
-          >
-            <pr-icon icon="'trash-2'"></pr-icon>
-            Remove
-          </button>
-          <button
-            ng-if="$ctrl.isPrimary"
-            hide-deployment-option="form"
-            type="button"
-            class="btn btn-sm btn-secondary vertical-center !ml-0 h-fit"
-            ui-sref="kubernetes.applications.new"
-            data-cy="k8sApp-addApplicationButton"
-          >
-            <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Add with form
-          </button>
-          <button
-            ng-if="$ctrl.isPrimary"
-            type="button"
-            class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
-            ui-sref="kubernetes.deploy({ referrer: 'kubernetes.applications' })"
-            data-cy="k8sApp-deployFromManifestButton"
-          >
-            <pr-icon icon="'plus'" class-name="'!h-3'"></pr-icon>Create from manifest
-          </button>
-        </div>
-
-        <div class="searchBar">
-          <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
-          <input
-            type="text"
-            class="searchInput"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search..."
-            auto-focus
-            ng-model-options="{ debounce: 300 }"
-            data-cy="k8sApp-searchApplicationsInput"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="toolBar !pt-0">
-      <div class="w-full">
-        <div class="form-group float-right !h-[30px] min-w-[140px] mr-2">
-          <div class="input-group">
-            <span class="input-group-addon">
-              <div className="flex items-center gap-1">
-                <pr-icon icon="'filter'" size="'sm'"></pr-icon>
-                Namespace
-              </div>
-            </span>
-            <select
-              class="form-control !h-[30px] !py-1"
-              ng-model="$ctrl.state.namespace"
-              ng-change="$ctrl.onChangeNamespace()"
-              data-cy="component-namespaceSelect"
-              ng-options="o.Value as (o.Name + (o.IsSystem ? ' - system' : '')) for o in $ctrl.state.namespaces"
-            >
-            </select>
-          </div>
-        </div>
-
-        <div class="space-y-2">
-          <div class="flex flex-row" authorization="K8sAccessSystemNamespaces" ng-if="$ctrl.isAdmin && !$ctrl.settings.showSystem">
-            <span class="small vertical-center text-xs">
-              <pr-icon icon="'info'" mode="'primary'"></pr-icon>
-              <span class="text-muted">System resources are hidden, this can be changed in the table settings.</span>
-            </span>
-          </div>
-          <div class="w-fit">
-            <helm-insights-box></helm-insights-box>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- data table content -->
-  <div ng-class="{ 'table-responsive': $ctrl.isPrimary, 'inner-datatable': !$ctrl.isPrimary }">
-    <table class="table-hover table-filters nowrap-cells table" data-cy="k8sApp-appTable">
-      <thead ng-class="{ 'secondary-heading': !$ctrl.isPrimary }">
-        <tr role="row">
-          <th role="columnheader" class="datatable-wide dropdown">
-            <div ng-if="$ctrl.isPrimary" class="no-wrap flex min-w-max">
-              <span class="md-checkbox vertical-center">
-                <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" data-cy="k8sApp-selectAllCheckbox" />
-                <label for="select_all"></label>
-              </span>
-              <div class="vertical-center cursor-pointer" ng-click="$ctrl.expandAll()">
-                <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'"></pr-icon>
-                <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'"></pr-icon>
-              </div>
-            </div>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Name'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'Name'"
-              is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('Name')"
-            ></table-column-header>
-          </th>
-          <th ng-if="!$ctrl.hideStacksFunctionality">
-            <table-column-header
-              col-title="'Stack'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'StackName'"
-              is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('StackName')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Namespace'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'ResourcePool'"
-              is-sorted-desc="$ctrl.state.orderBy === 'ResourcePool' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('ResourcePool')"
-            ></table-column-header>
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Image'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'Image'"
-              is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('Image')"
-            ></table-column-header>
-          </th>
-          <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
-            <div class="no-wrap flex flex-row gap-2">
-              <table-column-header
-                col-title="'Application Type'"
-                can-sort="true"
-                is-sorted="$ctrl.state.orderBy === 'ApplicationType'"
-                is-sorted-desc="$ctrl.state.orderBy === 'ApplicationType' && $ctrl.state.reverseOrder"
-                ng-click="$ctrl.changeOrderBy('ApplicationType')"
-              ></table-column-header>
-              <div class="no-wrap flex flex-row items-center gap-1" uib-dropdown-toggle>
-                <span class="table-filter">Filters</span>
-                <pr-icon ng-if="!$ctrl.filters.state.enabled" icon="'filter'"></pr-icon>
-                <pr-icon ng-if="$ctrl.filters.state.enabled" icon="'check'"></pr-icon>
-              </div>
-              <div class="dropdown-menu" uib-dropdown-menu>
-                <div class="tableMenu">
-                  <div class="menuHeader"> Filter by application type </div>
-                  <div class="menuContent">
-                    <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                      <input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
-                      <label for="filter_state_{{ $index }}">{{ filter.type }}</label>
-                    </div>
-                  </div>
-                  <div>
-                    <a type="button" class="btn btn-sm btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </th>
-          <th>
-            <table-column-header col-title="'Status'" can-sort="false"></table-column-header>
-            <!-- Status -->
-          </th>
-          <th>
-            <table-column-header col-title="'Published'" can-sort="false"></table-column-header>
-            <!-- Published -->
-          </th>
-          <th>
-            <table-column-header
-              col-title="'Created'"
-              can-sort="true"
-              is-sorted="$ctrl.state.orderBy === 'CreationDate'"
-              is-sorted-desc="$ctrl.state.orderBy === 'CreationDate' && $ctrl.state.reverseOrder"
-              ng-click="$ctrl.changeOrderBy('CreationDate')"
-            ></table-column-header>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          ng-show="!$ctrl.isAppsLoading"
-          ng-click="$ctrl.expandItem(item, !$ctrl.isItemExpanded(item))"
-          dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.applyFilters | filter:$ctrl.state.textFilter | filter:$ctrl.isDisplayed | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit: $ctrl.tableKey))"
-          ng-class="{ active: item.Checked, interactive: $ctrl.isExpandable(item), 'secondary-body': !$ctrl.isPrimary }"
-          pagination-id="$ctrl.tableKey"
-        >
-          <td class="h-[50px]">
-            <span ng-if="$ctrl.isPrimary" class="md-checkbox vertical-center">
-              <input
-                id="select_{{ $index }}"
-                type="checkbox"
-                ng-model="item.Checked"
-                ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()"
-                ng-disabled="$ctrl.isSystemNamespace(item)"
-              />
-              <label for="select_{{ $index }}"></label>
-            </span>
-            <div ng-if="$ctrl.isExpandable(item)" class="vertical-center">
-              <pr-icon ng-if="$ctrl.isItemExpanded(item)" icon="'chevron-down'"></pr-icon>
-              <pr-icon ng-if="!$ctrl.isItemExpanded(item)" icon="'chevron-right'"></pr-icon>
-            </div>
-          </td>
-          <td>
-            <a
-              ng-if="item.KubernetesApplications"
-              ui-sref="kubernetes.helm({ name: item.Name, namespace: item.ResourcePool })"
-              ng-click="$event.stopPropagation()"
-              class="hyperlink"
-              >{{ item.Name }}
-            </a>
-            <a
-              ng-if="!item.KubernetesApplications"
-              ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool, 'resource-type': item.ApplicationType })"
-              ng-click="$event.stopPropagation()"
-              class="hyperlink"
-              >{{ item.Name }}
-            </a>
-            <span class="label label-info image-tag label-margins" ng-if="$ctrl.isSystemNamespace(item)">system</span>
-            <span class="label label-primary image-tag label-margins" ng-if="!$ctrl.isSystemNamespace(item) && $ctrl.isExternalApplication(item)">external</span>
-          </td>
-          <td ng-if="!$ctrl.hideStacksFunctionality">{{ item.StackName || '-' }}</td>
-          <td>
-            <a ui-sref="kubernetes.resourcePools.resourcePool({ id: item.ResourcePool })" ng-click="$event.stopPropagation()">{{ item.ResourcePool }}</a>
-          </td>
-          <td title="{{ item.Image }}"
-            >{{ item.Image | truncate: 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
-          >
-          <td>{{ item.ApplicationType }}</td>
-          <td ng-if="item.ApplicationType !== $ctrl.KubernetesApplicationTypes.Pod">
-            <status-indicator ok="(item.TotalPodsCount > 0 && item.TotalPodsCount === item.RunningPodsCount) || item.Status === 'Ready'"></status-indicator>
-            <span ng-if="item.DeploymentType === $ctrl.KubernetesApplicationDeploymentTypes.Replicated">Replicated</span>
-            <span ng-if="item.DeploymentType === $ctrl.KubernetesApplicationDeploymentTypes.Global">Global</span>
-            <span ng-if="item.RunningPodsCount >= 0 && item.TotalPodsCount >= 0"
-              ><code>{{ item.RunningPodsCount }}</code> / <code>{{ item.TotalPodsCount }}</code></span
-            >
-            <span ng-if="item.KubernetesApplications">{{ item.Status }}</span>
-          </td>
-          <td ng-if="item.ApplicationType === $ctrl.KubernetesApplicationTypes.Pod">
-            {{ item.Pods[0].Status }}
-          </td>
-          <td>
-            <span>
-              {{ item.Services.length === 0 ? 'No' : 'Yes' }}
-            </span>
-          </td>
-          <td>{{ item.CreationDate | getisodate }} {{ item.ApplicationOwner ? 'by ' + item.ApplicationOwner : '' }}</td>
-        </tr>
-        <tr dir-paginate-end ng-show="$ctrl.isExpandable(item) && $ctrl.isItemExpanded(item)" ng-class="{ 'secondary-body': $ctrl.isPrimary && !item.KubernetesApplications }">
-          <td></td>
-          <td colspan="8" class="datatable-padding-vertical">
-            <span ng-if="item.KubernetesApplications">
-              <kubernetes-applications-datatable
-                dataset="item.KubernetesApplications"
-                table-key="{{ item.Id }}_table"
-                settings-key="{{ $ctrl.tableKey }}"
-                order-by="Name"
-                remove-action="$ctrl.removeAction"
-                refresh-callback="$ctrl.refreshCallback"
-                on-publishing-mode-click="($ctrl.onPublishingModeClick)"
-                is-primary="false"
-                hide-stacks-functionality="$ctrl.hideStacksFunctionality"
-              >
-              </kubernetes-applications-datatable>
-            </span>
-            <span ng-if="!item.KubernetesApplications">
-              <div class="published-url-container">
-                <div>
-                  <div class="text-muted"> Published URL(s) </div>
-                </div>
-                <div>
-                  <div ng-repeat="url in $ctrl.getPublishedUrls(item)">
-                    <a ng-href="{{ url }}" target="_blank" class="publish-url-link vertical-center">
-                      <pr-icon icon="'external-link'"></pr-icon>
-                      {{ url }}
-                    </a>
-                  </div>
-                </div>
-              </div>
-              <kubernetes-applications-datatable-details
-                ng-if="$ctrl.hasConfigurationSecrets(item)"
-                configurations="item.Configurations"
-              ></kubernetes-applications-datatable-details>
-            </span>
-          </td>
-        </tr>
-        <tr ng-if="$ctrl.isAppsLoading">
-          <td colspan="8" class="text-muted text-center">Loading...</td>
-        </tr>
-        <tr ng-if="$ctrl.state.filteredDataSet.length === 0 && !$ctrl.isAppsLoading">
-          <td colspan="8" class="text-muted text-center">No application available.</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div class="footer pl-5" ng-if="$ctrl.isPrimary && $ctrl.dataset">
-    <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-    <div class="paginationControls">
-      <form class="form-inline">
-        <span class="limitSelector">
-          <span class="mr-1"> Items per page </span>
-          <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-            <option value="0">All</option>
-            <option value="10">10</option>
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-          </select>
-        </span>
-        <dir-pagination-controls max-size="5" pagination-id="$ctrl.tableKey"></dir-pagination-controls>
-      </form>
-    </div>
-  </div>
-</div>