From 8574dd2371c2b47f1e1cb002a7c4428b64e17795 Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Tue, 31 Jan 2023 10:03:21 +1300
Subject: [PATCH] fix(edge stacks): allow viewing existing kompose stacks
 [EE-4967] (#8405)

Co-authored-by: testa113 <testa113>
Co-authored-by: Matt Hook <hookenz@gmail.com>
---
 .../editEdgeStackForm.html                    | 10 +++++++--
 .../editEdgeStackFormController.js            | 21 +++++++++++++------
 app/edge/react/components/index.ts            |  1 +
 .../create/createApplication.html             | 13 +++++++++++-
 .../code-editor/codeEditorController.js       |  4 ++++
 .../EdgeStackDeploymentTypeSelector.tsx       |  4 +++-
 app/react/edge/edge-stacks/utils.ts           |  9 ++++++--
 7 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html b/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
index 8a47776f7..7bb2d9cf0 100644
--- a/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
+++ b/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html
@@ -9,13 +9,19 @@
       <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> There are no available deployment types when there is more than one type of environment in your edge group
       selection (e.g. Kubernetes and Docker environments). Please select edge groups that have environments of the same type.
     </p>
+    <p class="col-sm-12 vertical-center help-block small text-warning" ng-if="$ctrl.model.DeploymentType === $ctrl.EditorType.Compose && $ctrl.hasKubeEndpoint()">
+      <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Edge groups with kubernetes environments no longer support compose deployment types in Portainer. Please select
+      edge groups that only have docker environments when using compose deployment types.
+    </p>
   </div>
 
   <edge-stack-deployment-type-selector
+    allow-kube-to-select-compose="$ctrl.allowKubeToSelectCompose"
     value="$ctrl.model.DeploymentType"
     has-docker-endpoint="$ctrl.hasDockerEndpoint()"
     has-kube-endpoint="$ctrl.hasKubeEndpoint()"
     on-change="($ctrl.onChangeDeploymentType)"
+    read-only="$ctrl.state.readOnlyCompose"
   ></edge-stack-deployment-type-selector>
 
   <div class="flex gap-1 text-muted small" ng-show="!$ctrl.model.DeploymentType && $ctrl.hasKubeEndpoint()">
@@ -89,8 +95,8 @@
     <div class="col-sm-12">
       <button
         type="button"
-        class="btn btn-primary btn-sm"
-        ng-disabled="$ctrl.actionInProgress || !$ctrl.isFormValid()"
+        class="btn btn-primary btn-sm !ml-0"
+        ng-disabled="$ctrl.actionInProgress || !$ctrl.isFormValid() || (!$ctrl.model.DeploymentType && $ctrl.hasKubeEndpoint())"
         ng-click="$ctrl.submitAction()"
         button-spinner="$ctrl.actionInProgress"
       >
diff --git a/app/edge/components/edit-edge-stack-form/editEdgeStackFormController.js b/app/edge/components/edit-edge-stack-form/editEdgeStackFormController.js
index e5fdd469f..a34039713 100644
--- a/app/edge/components/edit-edge-stack-form/editEdgeStackFormController.js
+++ b/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();
   }
 }
diff --git a/app/edge/react/components/index.ts b/app/edge/react/components/index.ts
index 4d2e09586..a540b42f3 100644
--- a/app/edge/react/components/index.ts
+++ b/app/edge/react/components/index.ts
@@ -52,5 +52,6 @@ export const componentsModule = angular
       'onChange',
       'hasDockerEndpoint',
       'hasKubeEndpoint',
+      'allowKubeToSelectCompose',
     ])
   ).name;
diff --git a/app/kubernetes/views/applications/create/createApplication.html b/app/kubernetes/views/applications/create/createApplication.html
index 00d4cdb0b..7ee9c7014 100644
--- a/app/kubernetes/views/applications/create/createApplication.html
+++ b/app/kubernetes/views/applications/create/createApplication.html
@@ -35,8 +35,19 @@
   ng-if="ctrl.stack.IsComposeFormat"
   title="'View application'"
   breadcrumbs="[
+    { label:'Namespaces', link:'kubernetes.resourcePools' },
+    {
+      label:ctrl.application.ResourcePool,
+      link: 'kubernetes.resourcePools.resourcePool',
+      linkParams:{ id: ctrl.application.ResourcePool }
+    },
     { label:'Applications', link:'kubernetes.applications' },
-     'View application'
+    {
+      label:ctrl.application.Name,
+      link: 'kubernetes.applications.application',
+      linkParams:{ name: ctrl.application.Name, namespace: ctrl.application.ResourcePool }
+    },
+     'View',
      ]"
   reload="true"
 >
diff --git a/app/portainer/components/code-editor/codeEditorController.js b/app/portainer/components/code-editor/codeEditorController.js
index 2c7499b03..e50b3b411 100644
--- a/app/portainer/components/code-editor/codeEditorController.js
+++ b/app/portainer/components/code-editor/codeEditorController.js
@@ -5,6 +5,10 @@ angular.module('portainer.app').controller('CodeEditorController', function Code
     if (value && value.currentValue && ctrl.editor && ctrl.editor.getValue() !== value.currentValue) {
       ctrl.editor.setValue(value.currentValue);
     }
+
+    if (ctrl.editor) {
+      ctrl.editor.setOption('readOnly', ctrl.readOnly);
+    }
   };
 
   this.$onInit = function () {
diff --git a/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx b/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx
index da739f177..1ca5f83c7 100644
--- a/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx
+++ b/app/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector.tsx
@@ -12,6 +12,7 @@ interface Props {
   onChange(value: number): void;
   hasDockerEndpoint: boolean;
   hasKubeEndpoint: boolean;
+  allowKubeToSelectCompose?: boolean;
 }
 
 export function EdgeStackDeploymentTypeSelector({
@@ -19,12 +20,13 @@ export function EdgeStackDeploymentTypeSelector({
   onChange,
   hasDockerEndpoint,
   hasKubeEndpoint,
+  allowKubeToSelectCompose,
 }: Props) {
   const deploymentOptions: BoxSelectorOption<number>[] = [
     {
       ...compose,
       value: EditorType.Compose,
-      disabled: () => hasKubeEndpoint,
+      disabled: () => (allowKubeToSelectCompose ? false : hasKubeEndpoint),
       tooltip: () =>
         hasKubeEndpoint
           ? 'Cannot use this option with Edge Kubernetes environments'
diff --git a/app/react/edge/edge-stacks/utils.ts b/app/react/edge/edge-stacks/utils.ts
index 4dbb48345..82cbfec7b 100644
--- a/app/react/edge/edge-stacks/utils.ts
+++ b/app/react/edge/edge-stacks/utils.ts
@@ -4,10 +4,15 @@ import { EnvironmentType } from '@/react/portainer/environments/types';
 
 import { EditorType } from './types';
 
-export function getValidEditorTypes(endpointTypes: EnvironmentType[]) {
+export function getValidEditorTypes(
+  endpointTypes: EnvironmentType[],
+  allowKubeToSelectCompose?: boolean
+) {
   const right: Partial<Record<EnvironmentType, EditorType[]>> = {
     [EnvironmentType.EdgeAgentOnDocker]: [EditorType.Compose],
-    [EnvironmentType.EdgeAgentOnKubernetes]: [EditorType.Kubernetes],
+    [EnvironmentType.EdgeAgentOnKubernetes]: allowKubeToSelectCompose
+      ? [EditorType.Kubernetes, EditorType.Compose]
+      : [EditorType.Kubernetes],
   };
 
   return endpointTypes.length