Merge pull request #443 from dreamfactorysoftware/claude-first-steps

Open Test API Authentication by default on API Docs

Author: thekevinm

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>

src/app/adf-home/df-dashboard/df-dashboard-card/df-dashboard-card.component.scss

@@ -178,24 +178,24 @@
 
   .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%);
     }
   }
 
   .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);
   }
-}
+}

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

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>

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 {