From 04bab14c4bac8f1851326d742a78c1bb256919e6 Mon Sep 17 00:00:00 2001
From: thekevinm <kevinmcgahey1114@gmail.com>
Date: Wed, 13 Aug 2025 00:08:21 +0000
Subject: [PATCH] Open Test API Authentication by default on API Docs

---
 .../df-dashboard-card.component.html           |  4 +++-
 .../df-dashboard-card.component.scss           | 12 ++++++------
 .../df-api-tester/df-api-tester.component.html |  2 +-
 .../df-celebration-dialog.component.html       | 12 ++++++++----
 .../df-celebration-dialog.component.scss       | 18 +++++++++++-------
 5 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html
index 3ca831db..721bca58 100644
--- a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html
+++ b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.html
@@ -20,7 +20,9 @@
     <div class="card-body">
       <h3 class="card-title">{{ title }}</h3>
       <div class="card-value" *ngIf="!isZero">{{ value }}</div>
-      <div class="card-value zero-state-cta" *ngIf="isZero">{{ zeroStateText }}</div>
+      <div class="card-value zero-state-cta" *ngIf="isZero">
+        {{ zeroStateText }}
+      </div>
       <p class="card-subtitle" *ngIf="subtitle && !isZero">{{ subtitle }}</p>
       <ng-content></ng-content>
     </div>
diff --git a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss
index 952f70d0..45c2ccda 100644
--- a/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss
+++ b/src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss
@@ -178,16 +178,16 @@
 
   .icon-container {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
-    
+
     // Keep original colors for each icon type
     &.icon-primary {
       background: linear-gradient(135deg, #7f11e0 0%, #5c239a 100%);
     }
-    
+
     &.icon-success {
       background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
     }
-    
+
     &.icon-info {
       background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
     }
@@ -195,7 +195,7 @@
 
   .card-value.zero-state-cta {
     position: relative;
-    
+
     &::after {
       content: '→';
       position: absolute;
@@ -227,7 +227,7 @@
 
     .card-value.zero-state-cta {
       transform: translateX(-5px);
-      
+
       &::after {
         opacity: 1;
         right: -30px;
@@ -312,4 +312,4 @@
     color: #aaa;
     background: rgba(255, 255, 255, 0.04);
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/shared/components/df-api-tester/df-api-tester.component.html b/src/app/shared/components/df-api-tester/df-api-tester.component.html
index a2da995e..6d81366b 100644
--- a/src/app/shared/components/df-api-tester/df-api-tester.component.html
+++ b/src/app/shared/components/df-api-tester/df-api-tester.component.html
@@ -1,4 +1,4 @@
-<mat-expansion-panel *ngIf="availableEndpoints.length > 0">
+<mat-expansion-panel *ngIf="availableEndpoints.length > 0" expanded>
   <mat-expansion-panel-header>
     <mat-panel-title style="font-size: 18px">
       Test API Authentication
diff --git a/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.html b/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.html
index e03bdb43..34f9bc04 100644
--- a/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.html
+++ b/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.html
@@ -60,13 +60,11 @@ <h4 class="step-title">{{ step.title | transloco }}</h4>
       </div>
     </div>
 
-
     <!-- API Connection Details -->
     <div
       class="api-connection-section"
       *ngIf="data.apiKey && allStepsRevealed"
       [@slideUp]>
-      
       <!-- Example Endpoint -->
       <div class="endpoint-preview">
         <div class="endpoint-label">
@@ -75,7 +73,9 @@ <h4 class="step-title">{{ step.title | transloco }}</h4>
         </div>
         <div class="endpoint-display">
           <code>{{ baseUrl }}/api/v2/{{ data.serviceName }}/_table</code>
-          <span class="endpoint-hint">{{ 'services.celebration.endpointHint' | transloco }}</span>
+          <span class="endpoint-hint">{{
+            'services.celebration.endpointHint' | transloco
+          }}</span>
         </div>
       </div>
 
@@ -90,7 +90,11 @@ <h4 class="step-title">{{ step.title | transloco }}</h4>
           <button
             mat-icon-button
             (click)="copyApiKey()"
-            [matTooltip]="apiKeyCopied ? ('services.celebration.keyCopied' | transloco) : ('services.celebration.copyKey' | transloco)">
+            [matTooltip]="
+              apiKeyCopied
+                ? ('services.celebration.keyCopied' | transloco)
+                : ('services.celebration.copyKey' | transloco)
+            ">
             <fa-icon [icon]="apiKeyCopied ? faCheck : faCopy"></fa-icon>
           </button>
         </div>
diff --git a/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.scss b/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.scss
index a910e9fd..164b2894 100644
--- a/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.scss
+++ b/src/app/shared/components/df-celebration-dialog/df-celebration-dialog.component.scss
@@ -181,20 +181,20 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
   overflow-x: hidden;
   flex: 1;
   max-height: calc(85vh - 40px);
-  
+
   /* Custom scrollbar */
   &::-webkit-scrollbar {
     width: 6px;
   }
-  
+
   &::-webkit-scrollbar-track {
     background: rgba(127, 17, 224, 0.05);
   }
-  
+
   &::-webkit-scrollbar-thumb {
     background: rgba(127, 17, 224, 0.2);
     border-radius: 3px;
-    
+
     &:hover {
       background: rgba(127, 17, 224, 0.3);
     }
@@ -478,7 +478,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 
   button {
     transition: all 0.2s ease;
-    
+
     fa-icon {
       font-size: 16px;
       color: #666;
@@ -540,7 +540,7 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
 .explore-later-button {
   font-size: 14px;
   color: #666;
-  
+
   &:hover {
     background: rgba(0, 0, 0, 0.04);
   }
@@ -617,7 +617,11 @@ $df-purple-palette: mat.define-palette(theme.$df-purple-palette);
   }
 
   .api-connection-section {
-    background: linear-gradient(135deg, rgba(127, 17, 224, 0.05) 0%, rgba(255, 255, 255, 0.03) 100%);
+    background: linear-gradient(
+      135deg,
+      rgba(127, 17, 224, 0.05) 0%,
+      rgba(255, 255, 255, 0.03) 100%
+    );
     border-color: rgba(127, 17, 224, 0.2);
 
     code {