refactor(import-rule): enhance step indicators and improve rule display logic

Signed-off-by: Manuel Abascal <mjabascal10@gmail.com>

Author: mjabascal10

frontend/src/app/rule-management/app-rule/components/import-rules/import-rule.component.html

@@ -106,15 +106,15 @@
               </span>
 
               <span class="ml-2">
+                <i *ngIf="rule.status === 'error'" class="icon-warning2 font-size-sm mr-1"></i>
                 <strong>{{ rule.rule.name }}</strong>
                 <small>({{ rule.status }})</small>
               </span>
             </div>
 
             <div *ngIf="!rule.isLoading" class="d-flex">
               <div (click)="deleteRule(i)" class="cursor-pointer opacity-75 ml-2">
-                <i *ngIf="rule.status === 'valid'" class="icon-cross2 font-size-sm"></i>
-                <i *ngIf="rule.status === 'error'" class="icon-warning2 font-size-sm"></i>
+                <i *ngIf="rule.status === 'valid' || rule.status === 'error'" class="icon-cross2 font-size-sm"></i>
                 <i *ngIf="rule.status === 'saved'" class="icon-check2 font-size-sm"></i>
               </div>
             </div>
@@ -176,15 +176,15 @@
               </span>
 
             <span class="ml-2">
+               <i *ngIf="rule.status === 'error'" class="icon-warning2 font-size-sm"></i>
                 <strong>{{ rule.rule.name }}</strong>
                 <small>({{ rule.status }})</small>
               </span>
           </div>
 
           <div *ngIf="!rule.isLoading" class="d-flex">
             <div (click)="deleteRule(i)" class="cursor-pointer opacity-75 ml-2">
-              <i *ngIf="rule.status === 'valid'" class="icon-cross2 font-size-sm"></i>
-              <i *ngIf="rule.status === 'error'" class="icon-warning2 font-size-sm"></i>
+              <i *ngIf="rule.status === 'valid' || rule.status === 'error'" class="icon-cross2 font-size-sm"></i>
               <i *ngIf="rule.status === 'saved'" class="icon-check2 font-size-sm"></i>
             </div>
           </div>
@@ -218,7 +218,7 @@
     <!-- NEXT -->
     <button *ngIf="currentStep !== RULE_FORM.STEP2"
             (click)="next()"
-            [disabled]="loading"
+            [disabled]="loading || (currentStep === RULE_FORM.STEP1 && validRulesCount() !== rules.length)"
             class="btn utm-button utm-button-primary">
       Next <i class="icon-arrow-right32"></i>
     </button>