apply changes from EE (#8406)

Co-authored-by: testa113 <testa113>

app/edge/components/edit-edge-stack-form/editEdgeStackFormController.js

@@ -7,6 +7,7 @@ export class EditEdgeStackFormController {
     this.$scope = $scope;
     this.state = {
       endpointTypes: [],
+      readOnlyCompose: false,
     };
 
     this.fileContents = {
@@ -26,6 +27,7 @@ export class EditEdgeStackFormController {
     this.removeLineBreaks = this.removeLineBreaks.bind(this);
     this.onChangeFileContent = this.onChangeFileContent.bind(this);
     this.onChangeUseManifestNamespaces = this.onChangeUseManifestNamespaces.bind(this);
+    this.selectValidDeploymentType = this.selectValidDeploymentType.bind(this);
   }
 
   onChangeUseManifestNamespaces(value) {
@@ -45,8 +47,9 @@ export class EditEdgeStackFormController {
   onChangeGroups(groups) {
     return this.$scope.$evalAsync(() => {
       this.model.EdgeGroups = groups;
-
-      this.checkEndpointTypes(groups);
+      this.setEnvironmentTypesInSelection(groups);
+      this.selectValidDeploymentType();
+      this.state.readOnlyCompose = this.hasKubeEndpoint();
     });
   }
 
@@ -54,14 +57,13 @@ export class EditEdgeStackFormController {
     return this.model.EdgeGroups.length && this.model.StackFileContent && this.validateEndpointsForDeployment();
   }
 
-  checkEndpointTypes(groups) {
+  setEnvironmentTypesInSelection(groups) {
     const edgeGroups = groups.map((id) => this.edgeGroups.find((e) => e.Id === id));
     this.state.endpointTypes = edgeGroups.flatMap((group) => group.EndpointTypes);
-    this.selectValidDeploymentType();
   }
 
   selectValidDeploymentType() {
-    const validTypes = getValidEditorTypes(this.state.endpointTypes);
+    const validTypes = getValidEditorTypes(this.state.endpointTypes, this.allowKubeToSelectCompose);
 
     if (!validTypes.includes(this.model.DeploymentType)) {
       this.onChangeDeploymentType(validTypes[0]);
@@ -101,7 +103,14 @@ export class EditEdgeStackFormController {
   }
 
   $onInit() {
-    this.checkEndpointTypes(this.model.EdgeGroups);
+    this.setEnvironmentTypesInSelection(this.model.EdgeGroups);
     this.fileContents[this.model.DeploymentType] = this.model.StackFileContent;
+
+    // allow kube to view compose if it's an existing kube compose stack
+    const initiallyContainsKubeEnv = this.hasKubeEndpoint();
+    const isComposeStack = this.model.DeploymentType === 0;
+    this.allowKubeToSelectCompose = initiallyContainsKubeEnv && isComposeStack;
+    this.state.readOnlyCompose = this.allowKubeToSelectCompose;
+    this.selectValidDeploymentType();
   }
 }