Added senario for empty feature flag table (#1587)

* added senario for empty feature flag table and style changes for table * added color to table header --------- Co-authored-by: danoswaltCL <[email protected]>
CarnegieLearningWeb · May 29, 2024 · 4d2ac33 · 4d2ac33
1 parent 47856ec
commit 4d2ac33
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/.../feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html b/.../feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
@@ -65,7 +65,7 @@
           {{ flag.context[0] }}
         </td>
       </ng-container>
-      
+
       <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.TAGS">
         <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
           <span [matTooltip]="FLAG_TRANSLATION_KEYS.TAGS | translate" matTooltipPosition="above">{{ FLAG_TRANSLATION_KEYS.TAGS | translate | uppercase }}</span>
@@ -88,6 +88,11 @@
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      <tr *matNoDataRow>
+        <td class="no-data-row" [attr.colspan]="displayedColumns.length">
+          {{ 'feature-flags.no-flags-in-table.text' | translate }}
+        </td>
+      </tr>
     </table>
   </div>
 </div>
diff --git a/.../feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss b/.../feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
@@ -31,12 +31,14 @@
     .mat-mdc-cell,
     .mat-mdc-header-cell {
       padding: 10px 5px;
+      padding-left: 20px;
       width: 10%;
       word-break: break-word;
     }
 
     .mat-mdc-header-cell {
-      padding-left: 5px;
+      background-color: var(--zircon);
+      margin-bottom: 10px;
     }
 
     .flag {
@@ -54,4 +56,11 @@
       width: 40%;
     }
   }
+
+  .no-data-row {
+    text-align: center;
+    font-size: 16px;
+    color: var(--dark-grey);
+    padding: 16px;
+  }
 }
diff --git a/...page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.scss b/...page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.scss
@@ -1,4 +1,3 @@
 .full-width {
   width: 100%; // TODO try not to set here, should be in the common parent...
-  padding: 10px;
 }
diff --git a/...component-lib/components/common-section-card-list/common-section-card-list.component.scss b/...component-lib/components/common-section-card-list/common-section-card-list.component.scss
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: 20px;
   margin: 0;
 }
 

diff --git a/frontend/projects/upgrade/src/assets/i18n/en.json b/frontend/projects/upgrade/src/assets/i18n/en.json
@@ -349,6 +349,7 @@
   "feature-flags.subtitle.text": "Create and manage feature flags",
   "feature-flags.link.text": "featureflags",
   "feature-flags.no-flags.text": "Welcome! <br> Let's start by creating a new flag!",
+  "feature-flags.no-flags-in-table.text": "No feature flags is defined. Create a new feature flag.",
   "feature-flags.delete-flag.message.text": "Type the name of feature flag to confirm deletion:",
   "feature-flags.delete-flag.input-placeholder.text": "Feature flag name",
   "feature-flags.add-flag.text": "ADD FLAG",