portainer/app/edge/components/edit-edge-stack-form/editEdgeStackForm.html

<form class="form-horizontal">
  <div class="col-sm-12 form-section-title"> Edge Groups </div>
  <div class="form-group">
    <div class="col-sm-12">
      <edge-groups-selector value="$ctrl.model.EdgeGroups" items="$ctrl.edgeGroups" on-change="($ctrl.onChangeGroups)"></edge-groups-selector>
    </div>
  </div>

  <div class="form-group" ng-if="!$ctrl.validateEndpointsForDeployment()">
    <div class="col-sm-12">
      <div class="small text-muted space-right text-warning">
        <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
        One or more of the selected Edge group contains Edge Docker endpoints that cannot be used with a Kubernetes Edge stack.
      </div>
    </div>
  </div>

  <edge-stack-deployment-type-selector
    value="$ctrl.model.DeploymentType"
    has-docker-endpoint="$ctrl.hasDockerEndpoint"
    on-change="($ctrl.onChangeDeploymentType)"
  ></edge-stack-deployment-type-selector>

  <div class="form-group" ng-if="$ctrl.model.DeploymentType === 0 && $ctrl.hasKubeEndpoint()">
    <div class="col-sm-12">
      <div class="small text-muted space-right">
        <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
        Portainer uses <a href="https://kompose.io/" target="_blank">Kompose</a> to convert your Compose manifest to a Kubernetes compliant manifest. Be wary that not all the
        Compose format options are supported by Kompose at the moment.
      </div>
    </div>
  </div>

  <web-editor-form
    ng-if="$ctrl.model.DeploymentType === 0"
    value="$ctrl.model.StackFileContent"
    yml="true"
    identifier="compose-editor"
    placeholder="# Define or paste the content of your docker compose file here"
    on-change="($ctrl.onChangeComposeConfig)"
  >
    <editor-description>
      <div>
        You can get more information about Compose file format in the
        <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
        .
      </div>
    </editor-description>
  </web-editor-form>

  <div ng-if="$ctrl.model.DeploymentType === 1">
    <div class="form-group">
      <div class="col-sm-12">
        <por-switch-field
          label="'Use namespace(s) specified from manifest'"
          tooltip="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'"
          checked="$ctrl.formValues.UseManifestNamespaces"
          on-change="($ctrl.onChangeUseManifestNamespaces)"
        ></por-switch-field>
      </div>
    </div>

    <web-editor-form
      value="$ctrl.model.StackFileContent"
      yml="true"
      identifier="kube-manifest-editor"
      placeholder="# Define or paste the content of your manifest here"
      on-change="($ctrl.onChangeKubeManifest)"
    >
      <editor-description>
        <p>
          You can get more information about Kubernetes file format in the
          <a href="https://kubernetes.io/docs/concepts/overview/working-with-objects/kubernetes-objects/" target="_blank">official documentation</a>.
        </p>
      </editor-description>
    </web-editor-form>
  </div>

  <!-- actions -->
  <div class="col-sm-12 form-section-title"> Actions </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button
        type="button"
        class="btn btn-primary btn-sm"
        ng-disabled="$ctrl.actionInProgress || !$ctrl.isFormValid()"
        ng-click="$ctrl.submitAction()"
        button-spinner="$ctrl.actionInProgress"
      >
        <span ng-hide="$ctrl.actionInProgress">Update the stack</span>
        <span ng-show="$ctrl.actionInProgress">Update in progress...</span>
      </button>
    </div>
  </div>
  <!-- !actions -->
</form>