feat: Support for UUID UI (#819)

* feat: uuid changes * changes * linting * test cases * fixes tests tests tests test fix * fixes * changes * changes * changes * merge changes * changes * changes * changes * changes
GoogleCloudPlatform · May 6, 2024 · 82ecfec · 82ecfec
1 parent 2995e95
commit 82ecfec
Show file tree

Hide file tree

Showing 18 changed files with 209 additions and 23 deletions.
diff --git a/ui/dist/ui/index.html b/ui/dist/ui/index.html
diff --git a/ui/dist/ui/main.e05c00d26c028177.js b/ui/dist/ui/main.e05c00d26c028177.js
diff --git a/ui/dist/ui/main.e121cee446134240.js b/ui/dist/ui/main.e121cee446134240.js
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/app/components/add-new-column/add-new-column.component.html b/ui/src/app/components/add-new-column/add-new-column.component.html
@@ -21,6 +21,28 @@ <h2>Column Details</h2>
             </mat-form-field>
             <br>
         </div>
+        <div *ngIf="selectedDatatype != '' && autoGenMap[selectedDatatype].length > 1 && autGenSupported">
+            <mat-form-field class="full-width" appearance="outline">
+                <mat-label>Auto Generated</mat-label>
+                <mat-select [(ngModel)]="selectedAutoGen" class="input-field" formControlName="autoGen">
+                    <ng-container *ngFor="let autoGen of autoGenMap[selectedDatatype]">
+                        <mat-option *ngIf="autoGen.GenerationType === ''" [value]="autoGen">
+                            {{ autoGen.Name !== '' ? autoGen.Name : 'None' }}
+                        </mat-option>
+                    </ng-container>
+                    <ng-container *ngIf="processedAutoGenMap[selectedDatatype] as types">
+                        <ng-container *ngFor="let type of types | keyvalue">
+                            <mat-optgroup *ngIf="type.key !== ''" [label]="type.key">
+                                <mat-option *ngFor="let autoGen of type.value" [value]="autoGen">
+                                    {{ autoGen.Name }}
+                                </mat-option>
+                            </mat-optgroup>
+                        </ng-container>
+                    </ng-container>
+                </mat-select>
+            </mat-form-field>
+            <br>
+        </div>                     
         <mat-form-field appearance="outline">
             <mat-label>IsNullable</mat-label>
             <mat-select [(ngModel)]="selectedNull" formControlName="isNullable" required="true">

diff --git a/ui/src/app/components/add-new-column/add-new-column.component.ts b/ui/src/app/components/add-new-column/add-new-column.component.ts
@@ -1,10 +1,12 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { ColLength, DataTypes, Dialect } from 'src/app/app.constants';
-import { IAddColumnProps } from 'src/app/model/edit-table';
+import { ColLength, DataTypes, Dialect, StorageKeys } from 'src/app/app.constants';
+import { AutoGen, IAddColumnProps } from 'src/app/model/edit-table';
 import { IAddColumn } from 'src/app/model/update-table';
 import { DataService } from 'src/app/services/data/data.service';
+import { FetchService } from 'src/app/services/fetch/fetch.service'
+import { GroupedAutoGens, processAutoGens } from 'src/app/utils/utils';
 @Component({
   selector: 'app-add-new-column',
   templateUrl: './add-new-column.component.html',
@@ -19,9 +21,19 @@ export class AddNewColumnComponent implements OnInit {
   tableId: string = ""
   selectedNull: boolean = true
   dataTypesWithColLen: string[] = ColLength.DataTypes
+  autoGenMap : any = {}
+  selectedAutoGen: AutoGen = {
+    Name: '',
+    GenerationType: ''
+  }
+  processedAutoGenMap: GroupedAutoGens = {};
+  srcDbName: string = localStorage.getItem(StorageKeys.SourceDbName) as string
+  autoGenSupportedDbs: string[] = ['MySQL']
+  autGenSupported: boolean = false
   constructor(
     private formBuilder: FormBuilder,
     private dataService: DataService,
+    private fetchSerice: FetchService,
     private dialogRef: MatDialogRef<AddNewColumnComponent>,
     @Inject(MAT_DIALOG_DATA) public data: IAddColumnProps) {
     this.dialect = data.dialect
@@ -31,7 +43,18 @@ export class AddNewColumnComponent implements OnInit {
       datatype: ['', Validators.required],
       length: ['',Validators.pattern('^[0-9]+$')],
       isNullable: [],
+      autoGen: [{
+        Name: "",
+        GenerationType: ""
+      }],
     })
+    this.fetchSerice.getAutoGenMap().subscribe(
+      (autoGen: any) => {
+        this.autoGenMap = autoGen;
+        this.processedAutoGenMap = processAutoGens(this.autoGenMap)
+      }
+    );
+    this.autGenSupported = this.autoGenSupportedDbs.includes(this.srcDbName)
   }
 
 
@@ -65,7 +88,8 @@ export class AddNewColumnComponent implements OnInit {
       Name: formValue.name,
       Datatype: this.selectedDatatype,
       Length: parseInt(formValue.length),
-      IsNullable: this.selectedNull
+      IsNullable: this.selectedNull,
+      AutoGen: this.selectedAutoGen
     }
     this.dataService.addColumn(this.tableId, payload)
     this.dialogRef.close()

diff --git a/ui/src/app/components/object-detail/object-detail.component.html b/ui/src/app/components/object-detail/object-detail.component.html
@@ -224,6 +224,36 @@ <h3 class="title">
               </td>
             </ng-container>
 
+            <ng-container matColumnDef="spAutoGen" *ngIf="autGenSupported">
+              <th mat-header-cell class="table_header" *matHeaderCellDef>Auto-Generated</th>
+              <td mat-cell *matCellDef="let element; let i = index">
+                <div class="sp-autogen-data-cells">
+                  <ng-container *ngIf="isEditMode && element.get('srcId').value !== ''">
+                    <mat-form-field appearance="outline" class="w-100">
+                      <mat-select #matSelectsAutoGen [formControl]="element.get('spAutoGen')" [compareWith]="compareAutoGen">
+                        <ng-container *ngFor="let autoGen of autoGenMap[element.get('spDataType').value]">
+                          <mat-option *ngIf="autoGen.GenerationType === ''" [value]="autoGen">
+                            {{ autoGen.Name !== '' ? autoGen.Name : 'None' }}
+                          </mat-option>
+                        </ng-container>
+                        <ng-container *ngIf="element.get('spDataType').value as spDataType">
+                          <ng-container *ngFor="let typeGroup of (processedAutoGenMap[spDataType] | keyvalue)">
+                            <mat-optgroup *ngIf="typeGroup.key !== ''" [label]="typeGroup.key">
+                              <mat-option *ngFor="let autoGen of typeGroup.value" [value]="autoGen">
+                                {{ autoGen.Name }}
+                              </mat-option>
+                            </mat-optgroup>
+                          </ng-container>
+                        </ng-container>
+                      </mat-select>
+                    </mat-form-field>
+                  </ng-container>                  
+                  <ng-container *ngIf="!isEditMode">
+                    <p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
+                  </ng-container>
+                </div>
+              </td>
+            </ng-container>
             <ng-container matColumnDef="spColMaxLength">
               <th mat-header-cell class="table_header" *matHeaderCellDef>Max Length</th>
               <td mat-cell *matCellDef="let element">
@@ -333,7 +363,7 @@ <h3 class="title">
           </ng-container>
 
           <ng-container matColumnDef="spDatabase">
-            <th mat-header-cell *matHeaderCellDef class="db_name" colspan="6">
+            <th mat-header-cell *matHeaderCellDef class="db_name" colspan=spColspan>
               <div class="spanner_edit-button">
                 <span>Spanner</span>
                 <div *ngIf="

diff --git a/ui/src/app/components/object-detail/object-detail.component.spec.ts b/ui/src/app/components/object-detail/object-detail.component.spec.ts
@@ -51,7 +51,11 @@ describe('ObjectDetailComponent', () => {
         srcId: '1',
         spId: '1',
         srcColMaxLength: 50,
-        spColMaxLength: 50
+        spColMaxLength: 50,
+        spAutoGen: {
+          Name: '',
+          GenerationType: ''
+        }
       },
       {
         spOrder: 2,
@@ -67,7 +71,11 @@ describe('ObjectDetailComponent', () => {
         srcId: '2',
         spId: '2',
         srcColMaxLength: 50,
-        spColMaxLength: 50
+        spColMaxLength: 50,
+        spAutoGen: {
+          Name: '',
+          GenerationType: ''
+        }
       },
     ]
     component.fkData = [

diff --git a/ui/src/app/components/object-detail/object-detail.component.ts b/ui/src/app/components/object-detail/object-detail.component.ts
@@ -4,10 +4,10 @@ import IUpdateTable from '../../model/update-table'
 import { DataService } from 'src/app/services/data/data.service'
 import { MatDialog } from '@angular/material/dialog'
 import { InfodialogComponent } from '../infodialog/infodialog.component'
-import IColumnTabData, { IIndexData } from '../../model/edit-table'
+import IColumnTabData, { AutoGen, IIndexData } from '../../model/edit-table'
 import { SnackbarService } from 'src/app/services/snackbar/snackbar.service'
 import IFkTabData from 'src/app/model/fk-tab-data'
-import { ColLength, Dialect, ObjectDetailNodeType, ObjectExplorerNodeType, StorageKeys } from 'src/app/app.constants'
+import { ColLength, Dialect, ObjectDetailNodeType, ObjectExplorerNodeType, SourceDbNames, StorageKeys } from 'src/app/app.constants'
 import FlatNode from 'src/app/model/schema-object-node'
 import { Subscription, take } from 'rxjs'
 import { MatTabChangeEvent } from '@angular/material/tabs/'
@@ -22,6 +22,7 @@ import { DropIndexOrTableDialogComponent } from '../drop-index-or-table-dialog/d
 import { SidenavService } from 'src/app/services/sidenav/sidenav.service'
 import { TableUpdatePubSubService } from 'src/app/services/table-update-pub-sub/table-update-pub-sub.service'
 import { AddNewColumnComponent } from '../add-new-column/add-new-column.component'
+import { GroupedAutoGens, processAutoGens } from 'src/app/utils/utils'
 
 @Component({
   selector: 'app-object-detail',
@@ -43,12 +44,13 @@ export class ObjectDetailComponent implements OnInit {
   @Input() currentObject: FlatNode | null = null
   @Input() typeMap: any = {}
   @Input() defaultTypeMap: any = {}
+  @Input() autoGenMap: any = {}
   @Input() ddlStmts: any = {}
   @Input() fkData: IFkTabData[] = []
   @Input() tableData: IColumnTabData[] = []
   @Input() currentDatabase: string = 'spanner'
   @Input() indexData: IIndexData[] = []
-  @Input() srcDbName: String = localStorage.getItem(StorageKeys.SourceDbName) as string
+  @Input() srcDbName: string = localStorage.getItem(StorageKeys.SourceDbName) as string
   @Output() updateSidebar = new EventEmitter<boolean>()
   ObjectExplorerNodeType = ObjectExplorerNodeType
   conv: IConv = {} as IConv
@@ -59,13 +61,17 @@ export class ObjectDetailComponent implements OnInit {
   localIndexData: IIndexData[] = []
   isMiddleColumnCollapse: boolean = false
   isPostgreSQLDialect: boolean = false
+  processedAutoGenMap: GroupedAutoGens = {};
+  autoGenSupportedDbs: string[] = ['MySQL']
+  autGenSupported: boolean = false
   ngOnInit(): void {
     this.data.conv.subscribe({
       next: (res: IConv) => {
         this.conv = res
         this.isPostgreSQLDialect = this.conv.SpDialect === Dialect.PostgreSQLDialect
       },
     })
+    this.autGenSupported = this.autoGenSupportedDbs.includes(this.srcDbName)
   }
 
   srcDisplayedColumns = ['srcOrder', 'srcColName', 'srcDataType', 'srcColMaxLength', 'srcIsPk', 'srcIsNotNull']
@@ -141,6 +147,7 @@ export class ObjectDetailComponent implements OnInit {
   })
   pkObj: IPrimaryKey = {} as IPrimaryKey
   dataTypesWithColLen: string[] = ColLength.DataTypes
+  spColspan : number = 6
 
   ngOnChanges(changes: SimpleChanges): void {
     this.fkData = changes['fkData']?.currentValue || this.fkData
@@ -167,6 +174,11 @@ export class ObjectDetailComponent implements OnInit {
     this.localTableData = JSON.parse(JSON.stringify(this.tableData))
     this.localIndexData = JSON.parse(JSON.stringify(this.indexData))
 
+    if (this.srcDbName == SourceDbNames.MySQL && !this.spDisplayedColumns.includes("spAutoGen")) {
+      this.spDisplayedColumns.splice(2, 0, "spAutoGen");
+      this.spColspan++;
+    }
+
     if (this.currentObject?.type === ObjectExplorerNodeType.Table) {
       this.checkIsInterleave()
 
@@ -183,6 +195,7 @@ export class ObjectDetailComponent implements OnInit {
       this.setFkRows()
       this.updateSpTableSuggestion()
       this.setShardIdColumn()
+      this.processedAutoGenMap = processAutoGens(this.autoGenMap)
     } else if (this.currentObject?.type === ObjectExplorerNodeType.Index) {
       this.indexOrderValidation()
       this.setIndexRows()
@@ -213,6 +226,7 @@ export class ObjectDetailComponent implements OnInit {
           srcId: new FormControl(row.srcId),
           spColMaxLength: new FormControl(row.spColMaxLength, [
             Validators.required]),
+          spAutoGen: new FormControl(row.spAutoGen),
         })
         if (this.dataTypesWithColLen.indexOf(row.spDataType.toString()) > -1) {
           fb.get('spColMaxLength')?.setValidators([Validators.required, Validators.pattern('([1-9][0-9]*|MAX)')])
@@ -259,6 +273,7 @@ export class ObjectDetailComponent implements OnInit {
             spId: new FormControl(col.spId),
             srcId: new FormControl(col.srcId),
             spColMaxLength: new FormControl(col.spColMaxLength),
+            spAutoGen: new FormControl(col.spAutoGen),
           })
         )
       } else {
@@ -278,6 +293,7 @@ export class ObjectDetailComponent implements OnInit {
             spIsPk: new FormControl(col.srcIsPk),
             spIsNotNull: new FormControl(col.srcIsNotNull),
             spColMaxLength: new FormControl(col.srcColMaxLength),
+            spAutoGen: new FormControl(col.spAutoGen)
           })
         )
       }
@@ -340,7 +356,8 @@ export class ObjectDetailComponent implements OnInit {
             NotNull: col.spIsNotNull ? 'ADDED' : 'REMOVED',
             Removed: false,
             ToType: (this.conv.SpDialect === Dialect.PostgreSQLDialect) ? (standardDataType === undefined ? col.spDataType : standardDataType) : col.spDataType,
-            MaxColLength: col.spColMaxLength
+            MaxColLength: col.spColMaxLength,
+            AutoGen: col.spAutoGen
           }
           break
         }
@@ -351,7 +368,8 @@ export class ObjectDetailComponent implements OnInit {
             NotNull: col.spIsNotNull ? 'ADDED' : 'REMOVED',
             Removed: false,
             ToType: (this.conv.SpDialect === Dialect.PostgreSQLDialect) ? (standardDataType === undefined ? col.spDataType : standardDataType) : col.spDataType,
-            MaxColLength: col.spColMaxLength
+            MaxColLength: col.spColMaxLength,
+            AutoGen: col.spAutoGen
           }
         }
       }
@@ -365,6 +383,10 @@ export class ObjectDetailComponent implements OnInit {
         Removed: true,
         ToType: '',
         MaxColLength: '',
+        AutoGen: {
+          Name : '',
+          GenerationType : ''
+        }
       }
     })
 
@@ -418,6 +440,7 @@ export class ObjectDetailComponent implements OnInit {
     this.localTableData[index].spIsPk = this.droppedColumns[addedRowIndex].spIsPk
     this.localTableData[index].spIsNotNull = this.droppedColumns[addedRowIndex].spIsNotNull
     this.localTableData[index].spColMaxLength = this.droppedColumns[addedRowIndex].spColMaxLength
+    this.localTableData[index].spAutoGen = this.droppedColumns[addedRowIndex].spAutoGen
     let ind = this.droppedColumns
       .map((col: IColumnTabData) => col.spColName)
       .indexOf(this.addedColumnName)
@@ -512,6 +535,10 @@ export class ObjectDetailComponent implements OnInit {
         col.spIsPk = false
         col.spOrder = ''
         col.spColMaxLength = ''
+        col.spAutoGen = {
+          Name : '',
+          GenerationType : ''
+        }
       }
     })
     this.setSpTableRows()
@@ -541,6 +568,10 @@ export class ObjectDetailComponent implements OnInit {
     this.spTableSuggestion[index] = brief
   }
 
+  compareAutoGen(t1: any, t2: any): boolean {
+    return t1 && t2 ? t1.Name === t2.Name && t1.GenerationType === t2.GenerationType : t1 === t2;
+  }
+
   setPkRows() {
     this.pkArray = this.fb.array([])
     this.pkOrderValidation()
@@ -565,6 +596,7 @@ export class ObjectDetailComponent implements OnInit {
           spIsPk: row.spIsPk,
           spOrder: row.spOrder,
           spId: row.spId,
+          spAutoGen: row.spAutoGen
         })
       }
     })
@@ -590,6 +622,7 @@ export class ObjectDetailComponent implements OnInit {
           spIsPk: new FormControl(spArr[i].spIsPk),
           spIsNotNull: new FormControl(spArr[i].spIsNotNull),
           spId: new FormControl(spArr[i].spId),
+          spAutoGen: new FormControl(spArr[i].spAutoGen),
         })
       )
     }
@@ -609,6 +642,7 @@ export class ObjectDetailComponent implements OnInit {
             spIsPk: new FormControl(false),
             spIsNotNull: new FormControl(false),
             spId: new FormControl(''),
+            spAutoGen: new FormControl(spArr[i].spAutoGen),
           })
         )
       }
@@ -628,6 +662,7 @@ export class ObjectDetailComponent implements OnInit {
             spIsPk: new FormControl(spArr[i].spIsPk),
             spIsNotNull: new FormControl(spArr[i].spIsNotNull),
             spId: new FormControl(spArr[i].spId),
+            spAutoGenGen: new FormControl(spArr[i].spAutoGen)
           })
         )
       }

diff --git a/ui/src/app/components/workspace/workspace.component.html b/ui/src/app/components/workspace/workspace.component.html
@@ -80,6 +80,7 @@
         [tableData]="tableData"
         [indexData]="indexData"
         [typeMap]="typeMap"
+        [autoGenMap]="autoGenMap"
         [ddlStmts]="ddlStmts"
         [fkData]="fkData"
         [currentDatabase]="currentDatabase"