portainer/app/kubernetes/custom-templates/kube-create-custom-template-view/kube-create-custom-template-view.html

<page-header title="'Create Custom template'" breadcrumbs="[{label:'Custom Templates', link:'kubernetes.templates.custom'}, 'Create Custom template']"> </page-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.form">
          <custom-template-common-fields
            form-values="$ctrl.formValues"
            name-regex="$ctrl.state.templateNameRegex"
            name-regex-error="'This field must consist of lower-case alphanumeric characters, \'.\', \'_\' or \'-\', must start and end with an alphanumeric character and must be 63 characters or less (e.g. \'my-name\', or \'abc-123\').'"
          ></custom-template-common-fields>

          <!-- build-method -->
          <div class="col-sm-12 form-section-title"> Build method </div>
          <box-selector slim="true" radio-name="'method'" value="$ctrl.state.method" options="$ctrl.methodOptions" on-change="($ctrl.onChangeMethod)"></box-selector>

          <div class="mt-4">
            <web-editor-form
              ng-if="$ctrl.state.method === 'editor'"
              identifier="template-creation-editor"
              value="$ctrl.formValues.FileContent"
              on-change="($ctrl.onChangeFileContent)"
              ng-required="true"
              yml="true"
              placeholder="Define or paste the content of your manifest file here"
            >
              <editor-description>
                <p>Templates allow deploying any kind of Kubernetes resource (Deployment, Secret, ConfigMap...)</p>
                <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>

          <file-upload-form ng-if="$ctrl.state.method === 'upload'" file="$ctrl.formValues.File" on-change="($ctrl.onChangeFile)" ng-required="true">
            <file-upload-description> You can upload a Manifest file from your computer. </file-upload-description>
          </file-upload-form>

          <git-form deploy-method="kubernetes" ng-if="$ctrl.state.method === 'repository'" value="$ctrl.formValues" on-change="($ctrl.handleChange)"></git-form>

          <custom-templates-variables-definition-field
            ng-if="$ctrl.isTemplateVariablesEnabled"
            value="$ctrl.formValues.Variables"
            on-change="($ctrl.onVariablesChange)"
            is-variables-names-from-parent="$ctrl.state.method === 'editor'"
          ></custom-templates-variables-definition-field>

          <por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>

          <!-- 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 !ml-0"
                ng-disabled="!$ctrl.state.isTemplateValid ||$ctrl.state.actionInProgress || $ctrl.form.$invalid || ($ctrl.state.method === 'editor' && !$ctrl.formValues.FileContent)"
                ng-click="$ctrl.createCustomTemplate()"
                button-spinner="$ctrl.state.actionInProgress"
              >
                <span ng-hide="$ctrl.state.actionInProgress">Create custom template</span>
                <span ng-show="$ctrl.state.actionInProgress">Creation in progress...</span>
              </button>
              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
                {{ $ctrl.state.formValidationError }}
              </span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>