1 files changed, 30 insertions, 23 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
index f781e6c89b..01329b70d1 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
@@ -19,32 +19,39 @@
 -->
 
 <div class="substitution-filter">
+  <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
+  <div class="w-sdc-designer-sidebar-section">
+    <sdc-accordion [title]="'Substitution Filter Properties'" [arrow-direction]="'right'" [open]="true">
+      <div class="i-sdc-designer-sidebar-section-content-substitution-filter-section">
 
-  <div *ngIf="compositeService.isService()"
-       class="i-sdc-designer-sidebar-section-content-item-rules-section">
+        <div class="i-sdc-designer-sidebar-section-content-substitution-filter"
+             [ngClass]="{'hand': !readonly}"
+             *ngFor="let property of constraintProperties; let i = index">
+          <div class="rule-details" [ngClass]="{'readonly': readonly}">
+            <div class="rule-desc" (click)="!readonly && onSelectSubstitutionFilter(PROPERTIES, i)"
+                 tooltips
+                 tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
+             + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
+              {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
+            + ' '
+            + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
+            </div>
+            <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
+                  (click)="openDeleteModal(PROPERTIES, i)"
+                  data-tests-id="delete-input-button"></span>
+          </div>
+        </div>
 
-    <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}"
-         *ngFor="let constraint of constraintObjects; let i = index">
-      <div class="rule-details" [ngClass]="{'readonly': readonly}">
-        <div class="rule-desc" (click)="!readonly && onSelectFilter(i)" tooltips
-             tooltip="{{constraint.servicePropertyName + ' ' + getSymbol(constraint.constraintOperator) + ' '
-             + (constraint.sourceName ? constraint.sourceName + ':' : '') + constraint.value}}">
-          {{constraint.servicePropertyName + ' ' + getSymbol(constraint.constraintOperator) + ' '
-        + (constraint.sourceName ? constraint.sourceName + ':' : '') + constraint.value}}
+        <div class="w-sdc-designer-sidebar-section-substitution-filter-footer">
+          <button
+                  class="w-sdc-designer-sidebar-section-substitution-filter-footer-action add-rule-btn tlv-btn blue"
+                  data-tests-id="add-rule-button"
+                  (click)="onAddSubstitutionFilter(PROPERTIES)"
+                  [disabled]="readonly">
+            {{'ADD_SUBSTITUTION_FILTER' | translate}}
+          </button>
         </div>
-        <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
-              (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span>
       </div>
-    </div>
-
-    <div *ngIf="!isSubstitutionFilterSet()" class="w-sdc-designer-sidebar-section-footer">
-      <button
-          class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue"
-          data-tests-id="add-rule-button"
-          (click)="onAddSubstitutionFilter()"
-          [disabled]="readonly">
-        {{'ADD_SUBSTITUTION_FILTER' | translate}}
-      </button>
-    </div>
+    </sdc-accordion>
   </div>
 </div>