selectProject.html

<span ng-if="$ctrl.noProjectsCantCreate" class="no-projects-cant-create">
  <pf-empty-state config="$ctrl.noProjectsConfig"></pf-empty-state>
  <p ng-if="!$ctrl.noProjectsCantCreateMessage">
    A cluster admin can create a project for you by running the command:
    <div class="code-block">
      <code>oc adm <span class="command-arg">new-project</span> &lt;projectname&gt; <span class="command-arg">--admin={{$ctrl.user.metadata.name || '&lt;YourUsername&gt;'}}</span></code>
    </div>
  </p>
  <div ng-if="$ctrl.noProjectsCantCreateMessage" ng-bind-html="$ctrl.noProjectsCantCreateMessage | linky : '_blank'"></div>
</span>

<!-- Use `ng-show` instead of `ng-if` so that the form exists and the `canI` works when projects load. -->
<ng-form name="$ctrl.forms.selectProjectForm" ng-show="$ctrl.numProjectChoices >= 1">
  <div class="form-group" ng-class="{'has-error' : $ctrl.forms.selectProjectForm.selectProject.$error.cannotAddToProject ||
                                                   ($ctrl.forms.selectProjectForm.selectProject.$touched &&
                                                    $ctrl.forms.selectProjectForm.selectProject.$invalid)}">
    <h3 ng-if="$ctrl.canOnlyCreateProject()">Create Project</h3>
    <label ng-if="!$ctrl.canOnlyCreateProject() && !$ctrl.hideLabel" class="control-label required">Add to Project</label>
    <ui-select
        ng-if="!$ctrl.canOnlyCreateProject()"
        ng-disabled="$ctrl.numProjectChoices === 1"
        name="selectProject"
        ng-model="$ctrl.selectedProject"
        ng-change="$ctrl.onSelectProjectChange()"
        ng-required="$ctrl.isRequired"
        search-enabled="$ctrl.searchEnabled"
        uis-open-close="$ctrl.onOpenClose(isOpen)">
      <ui-select-match placeholder="{{$ctrl.placeholder}}">
        {{$select.selected | displayName}}
      </ui-select-match>
      <!-- refresh-delay must be set using ng-attr-refresh-delay to work as a dynamic value -->
      <ui-select-choices
          repeat="project in $ctrl.getProjectChoices() track by (project | uid)"
          refresh="$ctrl.refreshChoices($select.search)"
          ng-attr-refresh-delay="{{$ctrl.refreshDelay}}"
          group-by="$ctrl.groupChoicesBy">
        <span ng-bind-html="project | displayName | highlightKeywords : $select.search"></span>
        <span ng-if="project | displayName : true" class="small text-muted">
          <span ng-if="project.metadata.name">&ndash;</span>
          <span ng-bind-html="project.metadata.name | highlightKeywords : $select.search"></span>
        </span>
      </ui-select-choices>
    </ui-select>
    <div ng-if="$ctrl.forms.selectProjectForm.selectProject.$error.cannotAddToProject">
        <span class="help-block">
          You are not authorized to add to this project.
        </span>
    </div>
    <div class="has-error" ng-if="$ctrl.forms.selectProjectForm.selectProject.$error.required &&
                                  $ctrl.forms.selectProjectForm.selectProject.$touched">
      <span class="help-block">
        Please select <span ng-if="$ctrl.canCreate && !$ctrl.hideCreateProject">or create</span> a project.
      </span>
    </div>
  </div>
</ng-form>

<ng-form name="$ctrl.forms.createProjectForm"
    ng-if="$ctrl.isNewProject()">
  <div class="form-group">
    <label for="name" class="control-label required">Project Name</label>
    <div ng-class="{'has-error': ($ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched) ||
                                 $ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique}">
      <input class="form-control"
          name="name"
          id="name"
          placeholder="my-project"
          type="text"
          required
          take-focus
          minlength="2"
          maxlength="63"
          pattern="[a-z0-9]([-a-z0-9]*[a-z0-9])?"
          aria-describedby="nameHelp"
          ng-model="$ctrl.selectedProject.metadata.name"
          osc-unique="$ctrl.existingProjectNames"
          ng-model-options="{ updateOn: 'default blur' }"
          ng-change="$ctrl.onNewProjectNameChange()"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false">
    </div>
    <div class="help-block">A unique name for the project.</div>
    <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.minlength && $ctrl.forms.createProjectForm.name.$touched">
      <span id="nameHelp" class="help-block">
        Name must have at least two characters.
      </span>
    </div>
    <div class="has-error" ng-if="$ctrl.forms.createProjectForm.name.$error.pattern && $ctrl.forms.createProjectForm.name.$touched">
      <span id="nameHelp" class="help-block">
        Project names may only contain lower-case letters, numbers, and dashes.
        They may not start or end with a dash.
      </span>
    </div>
    <div class="has-error" ng-if="$ctrl.nameTaken || $ctrl.forms.createProjectForm.name.$error.oscUnique">
      <span class="help-block">
        This name is already in use. Please choose a different name.
      </span>
    </div>
  </div>

  <div class="form-group">
    <label for="displayName" class="control-label">Project Display Name</label>
    <input class="form-control"
      name="displayName"
      id="displayName"
      placeholder="My Project"
      type="text"
      ng-model="$ctrl.selectedProject.metadata.annotations['new-display-name']">
  </div>

  <div class="form-group">
    <label for="description" class="control-label">Project Description</label>
    <textarea class="form-control"
      name="description"
      id="description"
      placeholder="A short description."
      ng-model="$ctrl.selectedProject.metadata.annotations['openshift.io/description']"></textarea>
  </div>
</ng-form>
<div ng-if="!$ctrl.noProjectsCantCreate && $ctrl.showDivider" class="select-project-divider"></div>