From 049292456b9e0275ff1588f09f207f4627a63d56 Mon Sep 17 00:00:00 2001
From: Yi-Jacob <jacobyideveloper@gmail.com>
Date: Sat, 27 Jan 2024 21:24:16 -0600
Subject: [PATCH 1/5] Updated UI for API creation

---
 .../df-service-details.component.html         | 457 +++++++++++++-----
 .../df-service-details.component.scss         |  93 ++++
 .../df-service-details.component.ts           | 155 ++++++
 3 files changed, 589 insertions(+), 116 deletions(-)

diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index 49437856..6beb7d83 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -1,121 +1,346 @@
 <form [formGroup]="serviceForm" class="details-section" (ngSubmit)="save()">
-  <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
-    <mat-label>{{
-      'services.controls.serviceType.label' | transloco
-    }}</mat-label>
-    <mat-select formControlName="type">
-      <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
-        {{ type.label }}
-      </mat-option>
-    </mat-select>
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-form-field
-    subscriptSizing="dynamic"
-    class="dynamic-width"
-    *ngIf="!subscriptionRequired">
-    <mat-label>{{ 'services.controls.namespace.label' | transloco }}</mat-label>
-    <input matInput formControlName="name" />
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.namespace.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-form-field
-    subscriptSizing="dynamic"
-    class="dynamic-width"
-    *ngIf="!subscriptionRequired">
-    <mat-label>{{ 'services.controls.label.label' | transloco }}</mat-label>
-    <input matInput formControlName="label" />
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.label.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-form-field
-    subscriptSizing="dynamic"
-    class="full-width"
-    *ngIf="!subscriptionRequired">
-    <mat-label>{{
-      'services.controls.description.label' | transloco
-    }}</mat-label>
-    <textarea rows="1" matInput formControlName="description"></textarea>
-    <fa-icon
-      class="tool-tip-trigger"
-      matSuffix
-      [icon]="faCircleInfo"
-      [matTooltip]="'services.controls.description.tooltip' | transloco" />
-  </mat-form-field>
-  <mat-slide-toggle formControlName="isActive" *ngIf="!subscriptionRequired">{{
-    'active' | transloco
-  }}</mat-slide-toggle>
-  <ng-container *ngIf="viewSchema && !subscriptionRequired">
-    <ng-container formGroupName="config">
-      <mat-accordion class="full-width">
-        <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
-          <mat-expansion-panel-header
-            >{{ 'services.options' | transloco }}
-          </mat-expansion-panel-header>
-          <div class="details-section">
-            <ng-container *ngFor="let item of viewSchema">
-              <ng-container
-                *ngIf="
-                  item.type === 'text' && item.name === 'content';
-                  else dynamic
-                ">
-                <df-script-editor
-                  [type]="getControl('type')"
-                  [storageServiceId]="getConfigControl('storageServiceId')"
-                  [storagePath]="getConfigControl('storagePath')"
-                  [content]="getConfigControl('content')"
-                  [cache]="serviceData ? serviceData.name : ''"
-                  class="full-width"></df-script-editor>
-              </ng-container>
-              <ng-template #dynamic>
-                <df-dynamic-field
-                  *ngIf="
-                    [
-                      'integer',
-                      'password',
-                      'string',
-                      'text',
-                      'picklist',
-                      'multi_picklist',
-                      'boolean',
-                      'file_certificate'
-                    ].includes(item.type)
-                  "
-                  [schema]="item"
-                  [formControl]="getConfigControl(item.name)"
-                  [class.dynamic-width]="item.type !== 'file_certificate'"
-                  [class.full-width]="
-                    item.type === 'file_certificate'
-                  "></df-dynamic-field>
-                <df-array-field
-                  *ngIf="item.type === 'array' || item.type === 'object'"
-                  [schema]="item"
-                  [formControl]="getConfigControl(item.name)"
-                  class="full-width"></df-array-field>
-              </ng-template>
-            </ng-container>
+  <ng-container *ngIf="this.isDatabase; else notDatabase">
+    <mat-stepper linear #stepper>
+      <mat-step errorMessage="Service Type is required." [editable]="true">
+        <ng-template matStepLabel>
+          {{ 'services.controls.serviceType.label' | transloco }}</ng-template
+        >
+        <!-- <ng-template matStepperIcon="phone">
+          <mat-icon>call_end</mat-icon>
+        </ng-template> -->
+        <div class="details-section">
+          <div class="section-header">
+            <h3>
+              Select your
+              {{ 'services.controls.serviceType.label' | transloco }} to get
+              started
+              <fa-icon
+                class="tool-tip-trigger"
+                matSuffix
+                [icon]="faCircleInfo"
+                [matTooltip]="
+                  'services.controls.serviceType.tooltip' | transloco
+                " />
+            </h3>
+            <div>
+              <button mat-button matStepperNext type="button">Next</button>
+            </div>
           </div>
-        </mat-expansion-panel>
-      </mat-accordion>
-    </ng-container>
+          <mat-form-field class="dynamic-width" appearance="outline">
+            <mat-label>Search service types...</mat-label>
+            <input
+              matInput
+              [(ngModel)]="search"
+              placeholder="SQL..."
+              [ngModelOptions]="{ standalone: true }" />
+          </mat-form-field>
+          <mat-form-field class="dynamic-width" appearance="outline">
+            <mat-label>{{
+              'services.controls.serviceType.label' | transloco
+            }}</mat-label>
+            <mat-select formControlName="type">
+              <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
+                {{ type.label }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+          <div class="grid-wrapper grid-col-auto">
+            <label
+              class="radio-card"
+              *ngFor="let type of filteredServiceTypes; let i = index">
+              <input
+                formControlName="type"
+                type="radio"
+                [value]="type.name"
+                (input)="nextStep(stepper)" />
+              <div class="card-content-wrapper">
+                <span class="check-icon"></span>
+                <div class="card-content">
+                  <img
+                    class="card-icon"
+                    [src]="getBackgroundImage(type.name)"
+                    [alt]="type.label" />
+                  <h4 class="text-center">{{ type.label }}</h4>
+                </div>
+              </div>
+            </label>
+          </div>
+          <div>
+            <button mat-button matStepperNext type="button">Next</button>
+          </div>
+        </div>
+      </mat-step>
+      <mat-step>
+        <ng-template matStepLabel>Service Details</ng-template>
+        <br />
+        <div class="details-section">
+          <mat-form-field
+            subscriptSizing="dynamic"
+            class="dynamic-width"
+            *ngIf="!subscriptionRequired"
+            appearance="outline">
+            <mat-label>{{
+              'services.controls.namespace.label' | transloco
+            }}</mat-label>
+            <input matInput formControlName="name" />
+            <fa-icon
+              class="tool-tip-trigger"
+              matSuffix
+              [icon]="faCircleInfo"
+              [matTooltip]="
+                'services.controls.namespace.tooltip' | transloco
+              " />
+          </mat-form-field>
+          <mat-form-field
+            appearance="outline"
+            subscriptSizing="dynamic"
+            class="dynamic-width"
+            *ngIf="!subscriptionRequired">
+            <mat-label>{{
+              'services.controls.label.label' | transloco
+            }}</mat-label>
+            <input matInput formControlName="label" />
+            <fa-icon
+              class="tool-tip-trigger"
+              matSuffix
+              [icon]="faCircleInfo"
+              [matTooltip]="'services.controls.label.tooltip' | transloco" />
+          </mat-form-field>
+          <mat-form-field
+            appearance="outline"
+            subscriptSizing="dynamic"
+            class="full-width"
+            *ngIf="!subscriptionRequired">
+            <mat-label>{{
+              'services.controls.description.label' | transloco
+            }}</mat-label>
+            <textarea
+              rows="1"
+              matInput
+              formControlName="description"></textarea>
+            <fa-icon
+              class="tool-tip-trigger"
+              matSuffix
+              [icon]="faCircleInfo"
+              [matTooltip]="
+                'services.controls.description.tooltip' | transloco
+              " />
+          </mat-form-field>
+          <div class="action-container">
+            <mat-slide-toggle
+              formControlName="isActive"
+              *ngIf="!subscriptionRequired"
+              >{{ 'active' | transloco }}</mat-slide-toggle
+            >
+            <div>
+              <button mat-button matStepperPrevious type="button">Back</button>
+              <button mat-button matStepperNext type="button">Next</button>
+            </div>
+            <div></div>
+          </div>
+        </div>
+      </mat-step>
+      <mat-step>
+        <ng-template matStepLabel>Service Options</ng-template>
+        <br />
+        <ng-container *ngIf="viewSchema && !subscriptionRequired">
+          <ng-container formGroupName="config">
+            <mat-accordion class="full-width">
+              <div class="details-section">
+                <ng-container *ngFor="let item of viewSchema">
+                  <ng-container
+                    *ngIf="
+                      item.type === 'text' && item.name === 'content';
+                      else dynamic
+                    ">
+                    <df-script-editor
+                      [type]="getControl('type')"
+                      [storageServiceId]="getConfigControl('storageServiceId')"
+                      [storagePath]="getConfigControl('storagePath')"
+                      [content]="getConfigControl('content')"
+                      [cache]="serviceData ? serviceData.name : ''"
+                      class="full-width"></df-script-editor>
+                  </ng-container>
+                  <ng-template #dynamic>
+                    <df-dynamic-field
+                      *ngIf="
+                        [
+                          'integer',
+                          'password',
+                          'string',
+                          'text',
+                          'picklist',
+                          'multi_picklist',
+                          'boolean',
+                          'file_certificate'
+                        ].includes(item.type)
+                      "
+                      [schema]="item"
+                      [formControl]="getConfigControl(item.name)"
+                      [class.dynamic-width]="item.type !== 'file_certificate'"
+                      [class.full-width]="
+                        item.type === 'file_certificate'
+                      "></df-dynamic-field>
+                    <df-array-field
+                      *ngIf="item.type === 'array' || item.type === 'object'"
+                      [schema]="item"
+                      [formControl]="getConfigControl(item.name)"
+                      class="full-width"></df-array-field>
+                  </ng-template>
+                </ng-container>
+              </div>
+            </mat-accordion>
+          </ng-container>
+        </ng-container>
+        <div class="full-width action-bar" *ngIf="!subscriptionRequired">
+          <button mat-flat-button type="button" (click)="goBack()">
+            {{ 'cancel' | transloco }}
+          </button>
+          <button mat-flat-button color="primary">
+            {{ 'save' | transloco }}
+          </button>
+        </div>
+      </mat-step>
+      <!-- change default 'edit' & 'done' icon -->
+      <ng-template matStepperIcon="edit" let-index="index">
+        <ng-container [ngSwitch]="index">
+          <mat-icon *ngSwitchCase="0">1</mat-icon>
+          <mat-icon *ngSwitchCase="1">2</mat-icon>
+          <mat-icon *ngSwitchCase="2">3</mat-icon>
+        </ng-container>
+      </ng-template>
+      <ng-template matStepperIcon="done" let-index="index">
+        <ng-container [ngSwitch]="index">
+          <mat-icon *ngSwitchCase="0">1</mat-icon>
+          <mat-icon *ngSwitchCase="1">2</mat-icon>
+          <mat-icon *ngSwitchCase="2">3</mat-icon>
+        </ng-container>
+      </ng-template>
+    </mat-stepper>
   </ng-container>
-  <div class="full-width action-bar" *ngIf="!subscriptionRequired">
-    <button mat-flat-button type="button" (click)="goBack()">
-      {{ 'cancel' | transloco }}
-    </button>
-    <button mat-flat-button color="primary">
-      {{ 'save' | transloco }}
-    </button>
-  </div>
+  <ng-template #notDatabase>
+    <mat-form-field subscriptSizing="dynamic" class="dynamic-width">
+      <mat-label>{{
+        'services.controls.serviceType.label' | transloco
+      }}</mat-label>
+      <mat-select formControlName="type">
+        <mat-option *ngFor="let type of serviceTypes" [value]="type.name">
+          {{ type.label }}
+        </mat-option>
+      </mat-select>
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.serviceType.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      class="dynamic-width"
+      *ngIf="!subscriptionRequired">
+      <mat-label>{{
+        'services.controls.namespace.label' | transloco
+      }}</mat-label>
+      <input matInput formControlName="name" />
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.namespace.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      class="dynamic-width"
+      *ngIf="!subscriptionRequired">
+      <mat-label>{{ 'services.controls.label.label' | transloco }}</mat-label>
+      <input matInput formControlName="label" />
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.label.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-form-field
+      subscriptSizing="dynamic"
+      class="full-width"
+      *ngIf="!subscriptionRequired">
+      <mat-label>{{
+        'services.controls.description.label' | transloco
+      }}</mat-label>
+      <textarea rows="1" matInput formControlName="description"></textarea>
+      <fa-icon
+        class="tool-tip-trigger"
+        matSuffix
+        [icon]="faCircleInfo"
+        [matTooltip]="'services.controls.description.tooltip' | transloco" />
+    </mat-form-field>
+    <mat-slide-toggle
+      formControlName="isActive"
+      *ngIf="!subscriptionRequired"
+      >{{ 'active' | transloco }}</mat-slide-toggle
+    >
+    <ng-container *ngIf="viewSchema && !subscriptionRequired">
+      <ng-container formGroupName="config">
+        <mat-accordion class="full-width">
+          <mat-expansion-panel [expanded]="serviceForm.getRawValue().type">
+            <mat-expansion-panel-header
+              >{{ 'services.options' | transloco }}
+            </mat-expansion-panel-header>
+            <div class="details-section">
+              <ng-container *ngFor="let item of viewSchema">
+                <ng-container
+                  *ngIf="
+                    item.type === 'text' && item.name === 'content';
+                    else dynamic
+                  ">
+                  <df-script-editor
+                    [type]="getControl('type')"
+                    [storageServiceId]="getConfigControl('storageServiceId')"
+                    [storagePath]="getConfigControl('storagePath')"
+                    [content]="getConfigControl('content')"
+                    [cache]="serviceData ? serviceData.name : ''"
+                    class="full-width"></df-script-editor>
+                </ng-container>
+                <ng-template #dynamic>
+                  <df-dynamic-field
+                    *ngIf="
+                      [
+                        'integer',
+                        'password',
+                        'string',
+                        'text',
+                        'picklist',
+                        'multi_picklist',
+                        'boolean',
+                        'file_certificate'
+                      ].includes(item.type)
+                    "
+                    [schema]="item"
+                    [formControl]="getConfigControl(item.name)"
+                    [class.dynamic-width]="item.type !== 'file_certificate'"
+                    [class.full-width]="
+                      item.type === 'file_certificate'
+                    "></df-dynamic-field>
+                  <df-array-field
+                    *ngIf="item.type === 'array' || item.type === 'object'"
+                    [schema]="item"
+                    [formControl]="getConfigControl(item.name)"
+                    class="full-width"></df-array-field>
+                </ng-template>
+              </ng-container>
+            </div>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </ng-container>
+    </ng-container>
+    <div class="full-width action-bar" *ngIf="!subscriptionRequired">
+      <button mat-flat-button type="button" (click)="goBack()">
+        {{ 'cancel' | transloco }}
+      </button>
+      <button mat-flat-button color="primary">
+        {{ 'save' | transloco }}
+      </button>
+    </div>
+  </ng-template>
 </form>
 <df-paywall *ngIf="subscriptionRequired"></df-paywall>
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index e69de29b..6c3842c9 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/src/app/adf-services/df-service-details/df-service-details.component.scss
@@ -0,0 +1,93 @@
+.grid-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+	gap: 20px;
+}
+
+label.radio-card {
+	cursor: pointer;
+
+	.card-content-wrapper {
+		background: #fff;
+		border-radius: 5px;
+		max-width: 200px;
+		min-height: 200px;
+		padding: 12px;
+		display: grid;
+		box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
+        background-size: contain;
+        background-repeat: no-repeat;
+        opacity: 0.8;
+	}
+
+	.check-icon {
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		border: solid 2px #e3e3e3;
+		border-radius: 50%;
+		position: relative;
+
+		&:before {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
+			background-repeat: no-repeat;
+			background-size: 12px;
+			background-position: center center;
+			transform: scale(1.6);
+			opacity: 0;
+		}
+	}
+
+	input[type='radio'] {
+		appearance: none;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		&:checked {
+			+ .card-content-wrapper {
+				box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px;
+                opacity: 1;
+
+				.check-icon {
+					transform: scale(1.2);
+					&:before {
+						transform: scale(1);
+						opacity: 1;
+					}
+				}
+			}
+		}
+
+		&:focus {
+			+ .card-content-wrapper {
+				.check-icon {
+					box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
+					border-color: #3056d5;
+				}
+			}
+		}
+	}
+
+	.card-content {
+        width: 100%;
+		img {
+			margin-bottom: 10px;
+            width:100%
+		}
+	}
+}
+
+.details-section {
+    .section-header, .action-container {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+} 
+mat-icon{
+	display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts
index a30a6b6f..ff15178d 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.ts
+++ b/src/app/adf-services/df-service-details/df-service-details.component.ts
@@ -8,6 +8,7 @@ import {
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
+import { MatStepper, MatStepperModule } from '@angular/material/stepper';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -38,6 +39,8 @@ import {
   SILVER_SERVICES,
 } from 'src/app/shared/constants/services';
 import { DfPaywallComponent } from 'src/app/shared/components/df-paywall/df-paywall.component';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -66,15 +69,21 @@ import { DfPaywallComponent } from 'src/app/shared/components/df-paywall/df-payw
     MatButtonModule,
     DfScriptEditorComponent,
     DfPaywallComponent,
+    MatStepperModule,
+    CommonModule,
+    MatIconModule,
   ],
 })
 export class DfServiceDetailsComponent implements OnInit {
   edit = false;
+  isDatabase = false;
   serviceTypes: Array<ServiceType>;
   serviceForm: FormGroup;
   faCircleInfo = faCircleInfo;
   serviceData: Service;
   configSchema: Array<ConfigSchema>;
+  images: Array<ImageObject>;
+  search = '';
 
   systemEvents: Array<{ label: string; value: string }>;
 
@@ -97,6 +106,118 @@ export class DfServiceDetailsComponent implements OnInit {
     if (id) {
       this.edit = true;
     }
+    this.images = [
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc69_alloy-p-500.png',
+        alt: 'AlloyDB',
+        label: 'alloydb',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc60_API%2520Logo%2520Container-18-p-500.webp',
+        alt: 'aws_dynamodb',
+        label: 'aws_dynamodb',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf5_Redshift-p-500.jpg',
+        alt: 'aws_redshift_db',
+        label: 'aws_redshift_db',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6c_azure-p-500.png',
+        alt: 'azure_documentdb',
+        label: 'azure_documentdb',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6e_API%2520Logo%2520Container-p-500.png',
+        alt: 'azure_table',
+        label: 'azure_table',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf3_API%2520Logo%2520Container-p-500.webp',
+        alt: 'cassandra',
+        label: 'cassandra',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf2_API%2520Logo%2520Container-8-p-500.webp',
+        alt: 'couchdb',
+        label: 'couchdb',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf7_API%2520Logo%2520Container-14-p-500.webp',
+        alt: 'firebird',
+        label: 'firebird',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc63_API%2520Logo%2520Container-p-500.webp',
+        alt: 'ibmdb2',
+        label: 'ibmdb2',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6d_ibm-p-500.png',
+        alt: 'informix',
+        label: 'informix',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6a_mariaDB-p-500.png',
+        alt: 'mariadb',
+        label: 'mariadb',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb5d_API%2520Logo%2520Container-2-p-500.webp',
+        alt: 'memsql',
+        label: 'memsql',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf1_API%2520Logo%2520Container-21-p-500.webp',
+        alt: 'mongodb',
+        label: 'mongodb',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb7e_API%2520Logo%2520Container-3-p-500.webp',
+        alt: 'mysql',
+        label: 'mysql',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb01_API%2520Logo%2520Container-5-p-500.webp',
+        alt: 'oracle',
+        label: 'oracle',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb1a_API%2520Logo%2520Container-7-p-500.webp',
+        alt: 'pgsql',
+        label: 'pgsql',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc68_Salesforce-p-500.png',
+        alt: 'salesforce_db',
+        label: 'salesforce_db',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc66_Sap%2520SQL-p-500.png',
+        alt: 'sqlanywhere',
+        label: 'sqlanywhere',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbab_API%2520Logo%2520Container-11-p-500.webp',
+        alt: 'sqlite',
+        label: 'sqlite',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbd8_API%2520Logo%2520Container-27-p-500.webp',
+        alt: 'sqlsrv',
+        label: 'sqlsrv',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc67_API%2520Logo%2520Container-p-500.png',
+        alt: 'apache_hive',
+        label: 'apache_hive',
+      },
+      {
+        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb45_API%2520Logo%2520Container-9-p-500.webp',
+        alt: 'snowflake',
+        label: 'snowflake',
+      },
+    ];
   }
 
   ngOnInit(): void {
@@ -107,6 +228,9 @@ export class DfServiceDetailsComponent implements OnInit {
         )
       )
       .subscribe(({ env, route }) => {
+        if (route['groups'][0] === 'Database') {
+          this.isDatabase = true;
+        }
         const { data, serviceTypes, groups } = route;
         const licenseType = env.platform?.license;
         this.serviceTypes = serviceTypes;
@@ -138,6 +262,11 @@ export class DfServiceDetailsComponent implements OnInit {
           });
         }
       });
+    this.serviceForm.controls['type'].valueChanges.subscribe(value => {
+      this.serviceForm.patchValue({
+        label: value,
+      });
+    });
   }
 
   initializeConfig() {
@@ -234,4 +363,30 @@ export class DfServiceDetailsComponent implements OnInit {
   goBack() {
     this.router.navigate(['../'], { relativeTo: this.activatedRoute });
   }
+
+  getBackgroundImage(typeLable: string) {
+    const image = this.images.find(img => img.label == typeLable);
+    if (!image) {
+      return '';
+    }
+    return image ? image.src : '';
+  }
+
+  get filteredServiceTypes() {
+    return this.serviceTypes.filter(type =>
+      type.label
+        .replace(/\s/g, '')
+        .toLowerCase()
+        .includes(this.search.toLowerCase())
+    );
+  }
+
+  nextStep(stepper: MatStepper) {
+    stepper.next();
+  }
+}
+interface ImageObject {
+  alt: string;
+  src: string;
+  label: string;
 }

From 319248e01734dde745845796632a28886e69fdbb Mon Sep 17 00:00:00 2001
From: Yi-Jacob <jacobyideveloper@gmail.com>
Date: Sat, 27 Jan 2024 21:25:12 -0600
Subject: [PATCH 2/5] cleanup

---
 .../df-service-details.component.html         |   3 -
 .../df-service-details.component.scss         | 161 +++++++++---------
 2 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index 6beb7d83..cd72efc3 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -5,9 +5,6 @@
         <ng-template matStepLabel>
           {{ 'services.controls.serviceType.label' | transloco }}</ng-template
         >
-        <!-- <ng-template matStepperIcon="phone">
-          <mat-icon>call_end</mat-icon>
-        </ng-template> -->
         <div class="details-section">
           <div class="section-header">
             <h3>
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index 6c3842c9..30b30de2 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/src/app/adf-services/df-service-details/df-service-details.component.scss
@@ -1,93 +1,96 @@
 .grid-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-	gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 
 label.radio-card {
-	cursor: pointer;
+  cursor: pointer;
 
-	.card-content-wrapper {
-		background: #fff;
-		border-radius: 5px;
-		max-width: 200px;
-		min-height: 200px;
-		padding: 12px;
-		display: grid;
-		box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
-        background-size: contain;
-        background-repeat: no-repeat;
-        opacity: 0.8;
-	}
+  .card-content-wrapper {
+    background: #fff;
+    border-radius: 5px;
+    max-width: 200px;
+    min-height: 200px;
+    padding: 12px;
+    display: grid;
+    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
+    background-size: contain;
+    background-repeat: no-repeat;
+    opacity: 0.8;
+  }
 
-	.check-icon {
-		width: 20px;
-		height: 20px;
-		display: inline-block;
-		border: solid 2px #e3e3e3;
-		border-radius: 50%;
-		position: relative;
+  .check-icon {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    border: solid 2px #e3e3e3;
+    border-radius: 50%;
+    position: relative;
 
-		&:before {
-			content: '';
-			position: absolute;
-			inset: 0;
-			background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
-			background-repeat: no-repeat;
-			background-size: 12px;
-			background-position: center center;
-			transform: scale(1.6);
-			opacity: 0;
-		}
-	}
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
+      background-repeat: no-repeat;
+      background-size: 12px;
+      background-position: center center;
+      transform: scale(1.6);
+      opacity: 0;
+    }
+  }
 
-	input[type='radio'] {
-		appearance: none;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		&:checked {
-			+ .card-content-wrapper {
-				box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px;
-                opacity: 1;
+  input[type='radio'] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    &:checked {
+      + .card-content-wrapper {
+        box-shadow:
+          0 2px 4px 0 rgba(219, 215, 215, 0.5),
+          0 0 0 2px;
+        opacity: 1;
 
-				.check-icon {
-					transform: scale(1.2);
-					&:before {
-						transform: scale(1);
-						opacity: 1;
-					}
-				}
-			}
-		}
+        .check-icon {
+          transform: scale(1.2);
+          &:before {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      }
+    }
 
-		&:focus {
-			+ .card-content-wrapper {
-				.check-icon {
-					box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
-					border-color: #3056d5;
-				}
-			}
-		}
-	}
+    &:focus {
+      + .card-content-wrapper {
+        .check-icon {
+          box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
+          border-color: #3056d5;
+        }
+      }
+    }
+  }
 
-	.card-content {
-        width: 100%;
-		img {
-			margin-bottom: 10px;
-            width:100%
-		}
-	}
+  .card-content {
+    width: 100%;
+    img {
+      margin-bottom: 10px;
+      width: 100%;
+    }
+  }
 }
 
 .details-section {
-    .section-header, .action-container {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-    }
-} 
-mat-icon{
-	display: flex;
-    align-items: center;
-    justify-content: center;
-}
\ No newline at end of file
+  .section-header,
+  .action-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+mat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

From 4876fec57fa42b1f2aa29ab6b31c89cb020213c3 Mon Sep 17 00:00:00 2001
From: Yi-Jacob <jacobyideveloper@gmail.com>
Date: Mon, 29 Jan 2024 13:59:08 -0600
Subject: [PATCH 3/5] cleanup image files

---
 .../df-service-details.component.ts           | 121 ++----------------
 src/assets/img/databaseImages.json            | 112 ++++++++++++++++
 2 files changed, 120 insertions(+), 113 deletions(-)
 create mode 100644 src/assets/img/databaseImages.json

diff --git a/src/app/adf-services/df-service-details/df-service-details.component.ts b/src/app/adf-services/df-service-details/df-service-details.component.ts
index b9b7ebc9..59bb671f 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.ts
+++ b/src/app/adf-services/df-service-details/df-service-details.component.ts
@@ -41,6 +41,7 @@ import {
 import { DfPaywallComponent } from 'src/app/shared/components/df-paywall/df-paywall.component';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
+import { HttpClient } from '@angular/common/http';
 
 @UntilDestroy({ checkProperties: true })
 @Component({
@@ -93,7 +94,8 @@ export class DfServiceDetailsComponent implements OnInit {
     @Inject(SERVICES_SERVICE_TOKEN)
     private servicesService: DfBaseCrudService,
     private router: Router,
-    private systemConfigDataService: DfSystemConfigDataService
+    private systemConfigDataService: DfSystemConfigDataService,
+    private http: HttpClient
   ) {
     this.serviceForm = this.fb.group({
       type: ['', Validators.required],
@@ -106,121 +108,14 @@ export class DfServiceDetailsComponent implements OnInit {
     if (id) {
       this.edit = true;
     }
-    this.images = [
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc69_alloy-p-500.png',
-        alt: 'AlloyDB',
-        label: 'alloydb',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc60_API%2520Logo%2520Container-18-p-500.webp',
-        alt: 'aws_dynamodb',
-        label: 'aws_dynamodb',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf5_Redshift-p-500.jpg',
-        alt: 'aws_redshift_db',
-        label: 'aws_redshift_db',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6c_azure-p-500.png',
-        alt: 'azure_documentdb',
-        label: 'azure_documentdb',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6e_API%2520Logo%2520Container-p-500.png',
-        alt: 'azure_table',
-        label: 'azure_table',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf3_API%2520Logo%2520Container-p-500.webp',
-        alt: 'cassandra',
-        label: 'cassandra',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf2_API%2520Logo%2520Container-8-p-500.webp',
-        alt: 'couchdb',
-        label: 'couchdb',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf7_API%2520Logo%2520Container-14-p-500.webp',
-        alt: 'firebird',
-        label: 'firebird',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc63_API%2520Logo%2520Container-p-500.webp',
-        alt: 'ibmdb2',
-        label: 'ibmdb2',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6d_ibm-p-500.png',
-        alt: 'informix',
-        label: 'informix',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6a_mariaDB-p-500.png',
-        alt: 'mariadb',
-        label: 'mariadb',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb5d_API%2520Logo%2520Container-2-p-500.webp',
-        alt: 'memsql',
-        label: 'memsql',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf1_API%2520Logo%2520Container-21-p-500.webp',
-        alt: 'mongodb',
-        label: 'mongodb',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb7e_API%2520Logo%2520Container-3-p-500.webp',
-        alt: 'mysql',
-        label: 'mysql',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb01_API%2520Logo%2520Container-5-p-500.webp',
-        alt: 'oracle',
-        label: 'oracle',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb1a_API%2520Logo%2520Container-7-p-500.webp',
-        alt: 'pgsql',
-        label: 'pgsql',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc68_Salesforce-p-500.png',
-        alt: 'salesforce_db',
-        label: 'salesforce_db',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc66_Sap%2520SQL-p-500.png',
-        alt: 'sqlanywhere',
-        label: 'sqlanywhere',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbab_API%2520Logo%2520Container-11-p-500.webp',
-        alt: 'sqlite',
-        label: 'sqlite',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbd8_API%2520Logo%2520Container-27-p-500.webp',
-        alt: 'sqlsrv',
-        label: 'sqlsrv',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc67_API%2520Logo%2520Container-p-500.png',
-        alt: 'apache_hive',
-        label: 'apache_hive',
-      },
-      {
-        src: 'https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb45_API%2520Logo%2520Container-9-p-500.webp',
-        alt: 'snowflake',
-        label: 'snowflake',
-      },
-    ];
   }
 
   ngOnInit(): void {
+    this.http
+      .get<Array<ImageObject>>('assets/img/databaseImages.json')
+      .subscribe(images => {
+        this.images = images;
+      });
     this.systemConfigDataService.environment$
       .pipe(
         switchMap(env =>
diff --git a/src/assets/img/databaseImages.json b/src/assets/img/databaseImages.json
new file mode 100644
index 00000000..b570dc37
--- /dev/null
+++ b/src/assets/img/databaseImages.json
@@ -0,0 +1,112 @@
+[
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc69_alloy-p-500.png",
+      "alt": "AlloyDB",
+      "label": "alloydb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc60_API%2520Logo%2520Container-18-p-500.webp",
+      "alt": "aws_dynamodb",
+      "label": "aws_dynamodb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf5_Redshift-p-500.jpg",
+      "alt": "aws_redshift_db",
+      "label": "aws_redshift_db"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6c_azure-p-500.png",
+      "alt": "azure_documentdb",
+      "label": "azure_documentdb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6e_API%2520Logo%2520Container-p-500.png",
+      "alt": "azure_table",
+      "label": "azure_table"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf3_API%2520Logo%2520Container-p-500.webp",
+      "alt": "cassandra",
+      "label": "cassandra"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf2_API%2520Logo%2520Container-8-p-500.webp",
+      "alt": "couchdb",
+      "label": "couchdb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf7_API%2520Logo%2520Container-14-p-500.webp",
+      "alt": "firebird",
+      "label": "firebird"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc63_API%2520Logo%2520Container-p-500.webp",
+      "alt": "ibmdb2",
+      "label": "ibmdb2"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6d_ibm-p-500.png",
+      "alt": "informix",
+      "label": "informix"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc6a_mariaDB-p-500.png",
+      "alt": "mariadb",
+      "label": "mariadb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb5d_API%2520Logo%2520Container-2-p-500.webp",
+      "alt": "memsql",
+      "label": "memsql"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbf1_API%2520Logo%2520Container-21-p-500.webp",
+      "alt": "mongodb",
+      "label": "mongodb"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb7e_API%2520Logo%2520Container-3-p-500.webp",
+      "alt": "mysql",
+      "label": "mysql"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb01_API%2520Logo%2520Container-5-p-500.webp",
+      "alt": "oracle",
+      "label": "oracle"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb1a_API%2520Logo%2520Container-7-p-500.webp",
+      "alt": "pgsql",
+      "label": "pgsql"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc68_Salesforce-p-500.png",
+      "alt": "salesforce_db",
+      "label": "salesforce_db"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc66_Sap%2520SQL-p-500.png",
+      "alt": "sqlanywhere",
+      "label": "sqlanywhere"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbab_API%2520Logo%2520Container-11-p-500.webp",
+      "alt": "sqlite",
+      "label": "sqlite"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbbd8_API%2520Logo%2520Container-27-p-500.webp",
+      "alt": "sqlsrv",
+      "label": "sqlsrv"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbc67_API%2520Logo%2520Container-p-500.png",
+      "alt": "apache_hive",
+      "label": "apache_hive"
+    },
+    {
+      "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb45_API%2520Logo%2520Container-9-p-500.webp",
+      "alt": "snowflake",
+      "label": "snowflake"
+    }
+  ]
\ No newline at end of file

From be80c4abfc39cf006d57a0dd449d347f8c61bb2a Mon Sep 17 00:00:00 2001
From: Yi-Jacob <jacobyideveloper@gmail.com>
Date: Mon, 29 Jan 2024 20:05:20 -0600
Subject: [PATCH 4/5] updated bigquery logo

---
 .../df-service-details.component.html           |   4 ++--
 .../df-service-details.component.scss           |   1 +
 src/assets/img/bigquery.png                     | Bin 0 -> 17593 bytes
 src/assets/img/databaseImages.json              |   5 +++++
 4 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/img/bigquery.png

diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index 42b5590e..fec708ac 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -31,7 +31,7 @@ <h3>
               placeholder="SQL..."
               [ngModelOptions]="{ standalone: true }" />
           </mat-form-field>
-          <mat-form-field class="dynamic-width" appearance="outline">
+          <!-- <mat-form-field class="dynamic-width" appearance="outline">
             <mat-label>{{
               'services.controls.serviceType.label' | transloco
             }}</mat-label>
@@ -40,7 +40,7 @@ <h3>
                 {{ type.label }}
               </mat-option>
             </mat-select>
-          </mat-form-field>
+          </mat-form-field> -->
           <div class="grid-wrapper grid-col-auto">
             <label
               class="radio-card"
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index 30b30de2..95bf057f 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/src/app/adf-services/df-service-details/df-service-details.component.scss
@@ -77,6 +77,7 @@ label.radio-card {
     img {
       margin-bottom: 10px;
       width: 100%;
+	  height: 110px;
     }
   }
 }
diff --git a/src/assets/img/bigquery.png b/src/assets/img/bigquery.png
new file mode 100644
index 0000000000000000000000000000000000000000..e850369d56dac5a1b24445fed88521a2145c3d9c
GIT binary patch
literal 17593
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
E0A|qw-v9sr

literal 0
HcmV?d00001

diff --git a/src/assets/img/databaseImages.json b/src/assets/img/databaseImages.json
index b570dc37..c19bdc0f 100644
--- a/src/assets/img/databaseImages.json
+++ b/src/assets/img/databaseImages.json
@@ -108,5 +108,10 @@
       "src": "https://assets-global.website-files.com/64ed8da8a866be7a702fbafb/64ed8da8a866be7a702fbb45_API%2520Logo%2520Container-9-p-500.webp",
       "alt": "snowflake",
       "label": "snowflake"
+    },
+    {
+      "src": "assets/img/bigquery.png",
+      "alt": "bigquery",
+      "label": "bigquery"
     }
   ]
\ No newline at end of file

From d168abc73174ce5e8a752cd4c4261630ca82ea31 Mon Sep 17 00:00:00 2001
From: Yi-Jacob <jacobyideveloper@gmail.com>
Date: Mon, 29 Jan 2024 20:05:54 -0600
Subject: [PATCH 5/5] updated bigquery logo

---
 .../df-service-details/df-service-details.component.html        | 2 +-
 .../df-service-details/df-service-details.component.scss        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/adf-services/df-service-details/df-service-details.component.html b/src/app/adf-services/df-service-details/df-service-details.component.html
index fec708ac..8556541e 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.html
+++ b/src/app/adf-services/df-service-details/df-service-details.component.html
@@ -8,7 +8,7 @@
         <div class="details-section">
           <div class="section-header">
             <h3>
-              Select your
+              Search for your
               {{ 'services.controls.serviceType.label' | transloco }} to get
               started
               <fa-icon
diff --git a/src/app/adf-services/df-service-details/df-service-details.component.scss b/src/app/adf-services/df-service-details/df-service-details.component.scss
index 95bf057f..ce960eb2 100644
--- a/src/app/adf-services/df-service-details/df-service-details.component.scss
+++ b/src/app/adf-services/df-service-details/df-service-details.component.scss
@@ -77,7 +77,7 @@ label.radio-card {
     img {
       margin-bottom: 10px;
       width: 100%;
-	  height: 110px;
+      height: 110px;
     }
   }
 }