project-rules.component.html

<chef-page
  subheading="Resources that match the type and all conditions are included in the project."
  [attr.confirm-btn-text]=" saving ? 'Saving Rule...' : 'Save Rule' "
  [attr.heading]="getHeading()"
  [attr.disable-confirm]="!ruleForm.valid || !ruleForm.dirty"
  [attr.page-loading]="(isLoading$ | async)"
  [attr.confirm-loading]="saving"
  (confirm)="saveRule()"
  (close)="closePage()">
  <div *ngIf="!(isLoading$ | async)">
    <ng-container>
      <form id="ruleForm" [formGroup]="ruleForm" (ngSubmit)="saveRule()">

        <chef-form-field id="create-name">
          <label>
            <span class="label">Rule Name <span aria-hidden="true">*</span></span>
            <input chefInput formControlName="name" (keyup)="handleNameInput($event)" />
          </label>
          <chef-error
            *ngIf="( ruleForm.get('name').hasError('required') && ruleForm.get('name').touched ) || ( ruleForm.get('name').hasError('pattern') && ruleForm.get('name').dirty )"
          >Rule Name is required.</chef-error>
        </chef-form-field>

        <div *ngIf="modifyID || editingRule">
          <chef-form-field id="create-id">
            <label>
              <span class="label">Rule ID <span aria-hidden="true">*</span> </span>
              <input chefInput formControlName="id" (keyup)="handleIDInput($event)" />
            </label>
            <chef-error *ngIf="ruleForm.get('id').hasError('maxlength') && ruleForm.get('id').dirty">
              Rule ID must be 64 characters or less.
            </chef-error>
            <chef-error *ngIf="ruleForm.get('id').hasError('required') && ruleForm.get('id').dirty">
              Rule ID is required.
            </chef-error>
            <chef-error *ngIf="ruleForm.get('id').hasError('pattern') && ruleForm.get('id').dirty">
              Only lowercase letters, numbers, hyphens, and underscores are allowed.
            </chef-error>
            <chef-error *ngIf="conflictError">
              Rule ID "{{ ruleForm.get('id').value }}" already exists.
            </chef-error>
          </chef-form-field>
          <small class="help">Rule IDs are unique, permanent, and cannot be changed later.</small>
        </div>
        <div *ngIf="!modifyID && !editingRule" id="create-id-static">
          <span class="key-label">Rule ID:&nbsp;</span><span class="key-value">{{ this.ruleForm.value.id }}</span>
          <chef-toolbar>
            <chef-button tertiary (click)="modifyID=true;" data-cy="edit-id">Edit ID</chef-button>
          </chef-toolbar>
        </div>

        <chef-form-field id="create-type">
          <label>
            <span class="label">Resource Type <span aria-hidden="true">*</span></span>
            <span class="custom-dropdown">
              <select id="create-type-dropdown" formControlName="type">
                <option value='NODE'>Node</option>
                <option value='EVENT'>Event</option>
              </select>
            </span>
          </label>
          <chef-error
            *ngIf="ruleForm.get('type').hasError('required') && ruleForm.get('type').touched"
          >Resource Type is required.</chef-error>
        </chef-form-field>
        <small class="help">Resource types cannot be changed after the rule is created.</small>

        <div id="condition-section" *ngIf="ruleForm.get('type').value">
          <div class="label">Conditions</div>
          <small>All conditions must be true for the rule to be true.</small>
          <chef-button primary (click)="addCondition()">Add Condition</chef-button>

          <div id="condition-list" formArrayName="conditions">

            <div class="condition-item"
              [formGroupName]="i"
              *ngFor="let condition of conditionControls; let i = index">

              <chef-form-field class="attribute-field">
                <label>
                  <span class="label">{{ getAttributeLabel() }}</span>
                  <span class="custom-dropdown">
                    <select formControlName="attribute" data-cy="attribute-dropdown">
                      <option
                        *ngFor="let option of attributeList"
                        [value]="option.key"
                      >{{ option.value }}</option>
                    </select>
                  </span>
                </label>
                <chef-error
                  *ngIf="conditionControls[i].get('attribute').hasError('required') && conditionControls[i].get('attribute').touched"
                >Attribute is required.</chef-error>
              </chef-form-field>

              <chef-form-field class="operator-attribute-field">
                <label>
                  <span class="label">Operator</span>
                  <span class="custom-dropdown">
                    <select class="operator-dropdown" formControlName="operator" data-cy="operator-dropdown">
                      <option *ngFor="let operator of operators"
                        [value]="operator.key"
                      >{{ operator.value }}</option>
                    </select>
                  </span>
                </label>
                <chef-error
                  *ngIf="conditionControls[i].get('operator').hasError('required') && conditionControls[i].get('operator').touched"
                >Operator is required.</chef-error>
              </chef-form-field>

              <chef-form-field class="attribute-field">
                <label>
                  <span class="label">Value</span>
                  <input chefInput formControlName="values"
                        [value]="condition.controls.values.value" data-cy="rule-value"
                  />
                </label>
                <div>
                  <chef-error
                      *ngIf="( conditionControls[i].get('values').hasError('required') && conditionControls[i].get('values').touched )
                              || ( conditionControls[i].get('values').hasError('pattern') && conditionControls[i].get('values').dirty )"
                    >Value is required.</chef-error>
                </div>
                <small class="help"
                  *ngIf="condition.controls.operator.value === 'EQUALS'">
                    Case sensitive, must match exactly.
                </small>
                <small class="help"
                  *ngIf="condition.controls.operator.value === 'MEMBER_OF'">
                    Comma-separated list, at least one must match exactly.
                </small>
              </chef-form-field>

              <div class="end-row-items">
                <span *ngIf="showAndLabel(i)" class="label">AND</span>
                <chef-button tertiary *ngIf="showDelete()" (click)="deleteCondition(i)">
                  <chef-icon>delete</chef-icon>
                </chef-button>
              </div>

            </div>
          </div>
        </div>
      </form>
    </ng-container>
  </div>
</chef-page>