Fixed Workarea rendering empty containers (#385)

Co-authored-by: Sharma <[email protected]>
Co-authored-by: tumms2021389 <[email protected]>

Author: 3 people

packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.html

@@ -17,26 +17,24 @@
   </div>
 </div>
 <div class="psdk-case-view" id="case-view">
-  <div class="psdk-case-view-info">
-    <div *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
-      <mat-toolbar class="psdk-case-view-toolbar">
-        <mat-toolbar-row class="psdk-case-view-toolbar-row">
-          <div class="psdk-case-view-heading">
-            <div>
-              <h1 id="case-name">{{ heading$ }}</h1>
-            </div>
-            <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
-            <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
+  <div class="psdk-case-view-info" *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
+    <mat-toolbar class="psdk-case-view-toolbar">
+      <mat-toolbar-row class="psdk-case-view-toolbar-row">
+        <div class="psdk-case-view-heading">
+          <div>
+            <h1 id="case-name">{{ heading$ }}</h1>
           </div>
-        </mat-toolbar-row>
-      </mat-toolbar>
-      <div class="psdk-case-view-divider"></div>
-      <div class="psdk-case-view-summary">
-        <component-mapper
-          name="CaseSummaryFields"
-          [props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
-        ></component-mapper>
-      </div>
+          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
+        </div>
+      </mat-toolbar-row>
+    </mat-toolbar>
+    <div class="psdk-case-view-divider"></div>
+    <div class="psdk-case-view-summary">
+      <component-mapper
+        name="CaseSummaryFields"
+        [props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
+      ></component-mapper>
     </div>
   </div>
   <div class="psdk-case-view-main">
@@ -68,12 +66,10 @@ <h1 id="case-name">{{ heading$ }}</h1>
       </div>
     </div>
   </div>
-  <div class="psdk-case-view-utilities">
-    <div *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
-      <div *ngFor="let kid of arChildren$">
-        <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
-          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
-        </div>
+  <div class="psdk-case-view-utilities" *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
+    <div *ngFor="let kid of arChildren$">
+      <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
+        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       </div>
     </div>
   </div>

packages/angular-sdk-components/src/lib/_components/template/self-service-case-view/self-service-case-view.component.scss

@@ -56,7 +56,8 @@ h1 {
   flex-grow: 2;
   float: left;
   padding: 0rem 0.3125rem;
-  height: 100%; /* Should be removed. Only for demonstration */
+  height: 100%;
+  padding-left: 0;
 }
 
 .psdk-case-view-summary {