Apply correct colors/styles when dark mode is active

openziti · Jan 21, 2025 · 561972b · 561972b
1 parent 3ea761e
commit 561972b
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 8 deletions.
diff --git a/projects/app-ziti-console/src/styles.scss b/projects/app-ziti-console/src/styles.scss
@@ -1,4 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
+d/* You can add global styles to this file, and also import other style files */
 @import 'ag-grid-community/styles/ag-grid.css';
 @import 'ag-grid-community/styles/ag-theme-alpine.css';
 @import './assets/styles/tables.scss';

diff --git a/projects/ziti-console-lib/src/lib/assets/styles/dark.css b/projects/ziti-console-lib/src/lib/assets/styles/dark.css
@@ -13,11 +13,21 @@ body {
 	--background: #18191D;
 	--placeholder: #2A2B31;
 	--text: #FFF;
+    --tableText: #FFF;
     --subText: #97a0b2;
     --shadow: 0rem 0rem 0.5rem 0.125rem rgba(255,255,255,0.08);
     --shadowColor: rgba(255,255,255,0.08);
     --transition: 0.5s;
     --offWhite: #2A2B31;
+
+    // vanilla json editor dark theming
+    --jse-key-color: var(--tableText);
+    --jse-background-color: var(--navigation);
+    --jse-panel-background: var(--background);
+    --jse-panel-border: var(--inputBorder);
+    --jse-main-border: var(--inputBorder);
+    --jse-delimiter-color: var(--tableText);
+    --jse-key-color: var(--tableText);
 }
 
 .filters .navigate {

diff --git a/projects/ziti-console-lib/src/lib/assets/styles/ziti.css b/projects/ziti-console-lib/src/lib/assets/styles/ziti.css
@@ -26,25 +26,31 @@ body {
     --formBase: #919ca5;
     --formGroup: #232f3e;
     --formSubGroup: #707985;
+
     --modalBorderRadius: 0.9375rem;
+
     --paddingSmall: 0.3125rem;
     --paddingMedium: 0.625rem;
     --paddingLarge: 0.625rem;
     --paddingXL: 0.9375rem;
     --paddingXXL: 1.25rem;
+
     --marginSmall: 0.3125rem;
     --marginMedium: 0.625rem;
     --marginLarge: 0.625rem;
     --marginXL: 0.9375rem;
     --marginXXL: 1.25rem;
+
     --gapSmall: 0.3125rem;
     --gapMedium: 0.625rem;
     --gapLarge: 0.625rem;
     --gapXL: 0.9375rem;
+
     --defaultInputHeight: 2.6875rem;
     --defaultLineHeight: 0.9375rem;
     --inputBorderRadius: 0.4375rem;
     --inputBorderWidth: 0.125rem;
+
     --spinnerSizeMedium: 1.25rem;
     --spinerBorderTopMedium: 0.125rem solid var(--stroke);
     --spinerBorderRightMedium: 0.125rem solid var(--stroke);
@@ -122,7 +128,7 @@ body {
 }
 
 a {
-    color: var(--menu);
+    color: var(--tableText);
     font-weight: bold;
     transition: var(--transition);
 }
@@ -590,7 +596,7 @@ aside .icon {
     font-size: 1.5rem;
     line-height: 26.875rem;
     margin-top: 4.6875rem;
-    color: var(--menu);
+    color: var(--tableText);
 }
 
 .data {

diff --git a/projects/ziti-console-lib/src/lib/features/messaging/growler.component.scss b/projects/ziti-console-lib/src/lib/features/messaging/growler.component.scss
@@ -21,7 +21,7 @@
   min-height: 6.5625rem;
   min-width: 20.875rem;
   font-size: 1rem;
-  color: #000;
+  color: var(--tableText);
   text-align: left;
   border-radius: 0.375rem;
   -webkit-box-shadow: 0 0.75rem 1.4375rem 0 rgba(0, 0, 0, 0.2);

diff --git a/projects/ziti-console-lib/src/lib/pages/configurations/configurations-page.component.ts b/projects/ziti-console-lib/src/lib/pages/configurations/configurations-page.component.ts
@@ -21,6 +21,7 @@ import {TabNameService} from "../../services/tab-name.service";
 import {ListPageComponent} from "../../shared/list-page-component.class";
 import {ConsoleEventsService} from "../../services/console-events.service";
 import {MatDialog} from "@angular/material/dialog";
+import {ConfirmComponent} from "../../features/confirm/confirm.component";
 
 
 @Component({
@@ -62,8 +63,14 @@ export class ConfigurationsPageComponent extends ListPageComponent implements On
                 const selectedItems = this.rowData.filter((row) => {
                     return row.selected;
                 });
-                const label = selectedItems.length > 1 ? 'configurations' : 'configuration';
-                this.openBulkDelete(selectedItems, label);
+                this.svc.checkForAssociatedServices(selectedItems).then((configsWithAssociations) => {
+                    const label = selectedItems.length > 1 ? 'configurations' : 'configuration';
+                    if (configsWithAssociations.length > 0) {
+                        this.confirmAssociatedDelete(configsWithAssociations, selectedItems, label);
+                    } else {
+                        this.openBulkDelete(selectedItems, label);
+                    }
+                });
                 break;
             default:
         }
@@ -109,4 +116,30 @@ export class ConfigurationsPageComponent extends ListPageComponent implements On
     dataChanged(event) {
         this.formDataChanged = event;
     }
+
+    confirmAssociatedDelete(configsWithAssociations, selectedItems, label) {
+        const configNames = configsWithAssociations.map((item) => {
+            return item.name;
+        });
+        const data = {
+            appendId: 'DeleteConfigsWithAssociations',
+            title: 'Configs In Use',
+            message: `The following configs are still in use by a service:`,
+            submessage: 'Deleting these configs may cause disruption to those services. Would you still like to continue?',
+            bulletList: configNames,
+            confirmLabel: 'Yes',
+            cancelLabel: 'Oops, no get me out of here',
+            imageUrl: '../../assets/svgs/Growl_Warning.svg',
+            showCancelLink: true
+        };
+        this.dialogRef = this.dialogForm.open(ConfirmComponent, {
+            data: data,
+            autoFocus: false,
+        });
+        this.dialogRef.afterClosed().subscribe((result) => {
+            if (result?.confirmed) {
+                this.openBulkDelete(selectedItems, label);
+            }
+        });
+    }
 }
diff --git a/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss b/projects/ziti-console-lib/src/lib/shared-assets/styles/global.scss
@@ -1,3 +1,5 @@
+@import 'node_modules/vanilla-jsoneditor/themes/jse-theme-dark.css';
+
 body {
   --highlighted: #f5a93d;
   --red: #ff104b;
@@ -27,29 +29,35 @@ body {
   --formBase: #919ca5;
   --formGroup: #232f3e;
   --formSubGroup: #707985;
+
   --buttonHeightSmall: 1.5625rem;
   --buttonImageSizeSmall: 1.25rem;
   --buttonImagePaddingSmall: 2.1875rem;
   --buttonImagePositionSmall: left calc(var(--paddingSmall) + 0.1875rem) center;
   --modalBorderRadius: 0.9375rem;
+
   --paddingSmall: 0.3125rem;
   --paddingMedium: 0.625rem;
   --paddingLarge: 0.625rem;
   --paddingXL: 0.9375rem;
   --paddingXXL: 1.25rem;
+
   --marginSmall: 0.3125rem;
   --marginMedium: 0.625rem;
   --marginLarge: 0.625rem;
   --marginXL: 0.9375rem;
   --marginXXL: 1.25rem;
+
   --gapSmall: 0.3125rem;
   --gapMedium: 0.625rem;
   --gapLarge: 0.625rem;
   --gapXL: 0.9375rem;
+
   --defaultInputHeight: 2.6875rem;
   --defaultLineHeight: 0.9375rem;
   --inputBorderRadius: 0.4375rem;
   --inputBorderWidth: 0.125rem;
+
   --spinnerSizeMedium: 1.25rem;
   --spinerBorderTopMedium: 0.125rem solid var(--stroke);
   --spinerBorderRightMedium: 0.125rem solid var(--stroke);
@@ -96,7 +104,7 @@ input {
 }
 
 .cell-name-renderer strong {
-  color: var(--menu);
+  color: var(--tableText);
 }
 
 .mat-mdc-dialog-surface {
@@ -150,6 +158,10 @@ input {
   }
 }
 
+.ag-overlay-no-rows-center {
+  color: var(--tableText);
+}
+
 .header-text-container.text-input-filter {
   font-size: 0.875rem;
   font-weight: 600;
@@ -1334,6 +1346,7 @@ p-dropdown {
       width: 100%;
       padding: 0;
       border-width: var(--inputBorderWidth);
+      background-color: var(--navigation);
       height: fit-content;
       gap: 0;
 
@@ -1369,7 +1382,7 @@ p-dropdown {
     margin-top: 0.3125rem;
     margin-bottom: 0.3125rem;
     background: var(--primary);
-    color: var(--white);
+    color: var(--tableText);
     border-radius: var(--inputBorderRadius);
     cursor: default;
     display: inline-flex;

diff --git a/projects/ziti-console-lib/src/lib/shared/list-page-component.class.ts b/projects/ziti-console-lib/src/lib/shared/list-page-component.class.ts
@@ -163,6 +163,7 @@ export abstract class ListPageComponent {
             this.isLoading = false;
         })
     }
+
     protected openBulkDelete(selectedItems: any[], entityTypeLabel = 'item(s)', ) {
         const selectedIds = selectedItems.map((row) => {
             return row.id;

diff --git a/projects/ziti-console-lib/src/lib/shared/list-page-service.class.ts b/projects/ziti-console-lib/src/lib/shared/list-page-service.class.ts
@@ -204,6 +204,23 @@ export abstract class ListPageServiceClass {
         });
     }
 
+    checkForAssociatedServices(configs) {
+        const configsWithAssociations = [];
+        const promises = [];
+        configs.forEach((config) => {
+            const prom = this.dataService.getSubdata('configs', config.id, 'services').then((result: any) => {
+                const services = result.data || [];
+                if (services.length > 0) {
+                    configsWithAssociations.push(config);
+                }
+            });
+            promises.push(prom);
+        });
+        return Promise.all(promises).then(() => {
+            return configsWithAssociations;
+        });
+    }
+
     removeItems(ids: string[]) {
         const promises = [];
         ids.forEach((id) => {