UI changes for check constraint support (#979)

* UI changes for check constraint support * removed url changed for testing * Check UI cmt (#29) * remove the block which will not execute * refactor the code 1. remove the unreachable code 2. remvoe the node-sql-parser package * refactor the code 1. rename the generateId method --------- Co-authored-by: Vivek Yadav <[email protected]> * updated the dist file and package.lock file * Develop (#36) * verification API and dump flow changes to support MySQL CHECK CONSTRAINTS (#978) (#30) * verification ap and dump flow changes * fixed IT issue * Check constraints verificartion api v2 (#24) * handled function not found * added unhandled error * updated the error msg --------- * fix IT issue * comment addressed (#27) * comment addressed 1. rename the functionNotFound 2. added condition to call verification api * spell checked --------- * refactor the DbDumpImpl struct (#28) * refactor the DbDumpImpl struct * remove the GenerateCheckConstrainstExprId method --------- * fixed if condition --------- Co-authored-by: Taher Lakdawala <[email protected]> Co-authored-by: taherkl <[email protected]> Co-authored-by: Vivek Yadav <[email protected]> Co-authored-by: Vivek Yadav <[email protected]> * Replace ReadOnlyTransaction() with Single() (#984) (#35) Co-authored-by: Manit Gupta <[email protected]> --------- Co-authored-by: Taher Lakdawala <[email protected]> Co-authored-by: Akash Thawait <[email protected]> Co-authored-by: taherkl <[email protected]> Co-authored-by: Vivek Yadav <[email protected]> Co-authored-by: Manit Gupta <[email protected]> --------- Co-authored-by: taherkl <[email protected]> Co-authored-by: Akash Thawait <[email protected]> Co-authored-by: Vivek Yadav <[email protected]> Co-authored-by: Vivek Yadav <[email protected]> Co-authored-by: Manit Gupta <[email protected]>
GoogleCloudPlatform · Jan 7, 2025 · 6892b44 · 6892b44
1 parent 1a751d7
commit 6892b44
Show file tree

Hide file tree

Showing 23 changed files with 973 additions and 55 deletions.
diff --git a/ui/dist/ui/index.html b/ui/dist/ui/index.html
diff --git a/ui/dist/ui/main.7d3a46641d0b6df2.js b/ui/dist/ui/main.7d3a46641d0b6df2.js
diff --git a/ui/dist/ui/main.fec05b021cd4ee86.js b/ui/dist/ui/main.fec05b021cd4ee86.js
diff --git a/ui/dist/ui/polyfills.a7813c59798a2f34.js b/ui/dist/ui/polyfills.a7813c59798a2f34.js
diff --git a/ui/dist/ui/polyfills.c2c201edf5092294.js b/ui/dist/ui/polyfills.c2c201edf5092294.js
diff --git a/ui/dist/ui/runtime.3323ee76cbdea448.js → ui/dist/ui/runtime.30e542cf552662e5.js b/ui/dist/ui/runtime.3323ee76cbdea448.js → ui/dist/ui/runtime.30e542cf552662e5.js
diff --git a/ui/package.json b/ui/package.json
@@ -44,4 +44,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
 import { FormsModule } from '@angular/forms'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { MatChipsModule } from '@angular/material/chips'
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { AppComponent } from './app.component'
 import { HeaderComponent } from './components/header/header.component'
@@ -113,7 +114,8 @@ import { AddNewSequenceComponent } from './components/add-new-sequence/add-new-s
     MatRadioModule,
     ClipboardModule,
     MatProgressSpinnerModule,
-    MatChipsModule
+    MatChipsModule,
+    MatTooltipModule,
   ],
   providers: [
     {

diff --git a/ui/src/app/components/direct-connection/direct-connection.component.ts b/ui/src/app/components/direct-connection/direct-connection.component.ts
@@ -98,7 +98,7 @@ export class DirectConnectionComponent implements OnInit {
           localStorage.setItem(PersistedFormValues.IsConnectionSuccessful, "true")
           this.clickEvent.closeDatabaseLoader()
         },
-        error: (e) => { 
+        error: (e) => {
           this.isTestConnectionSuccessful = false
           this.snackbarService.openSnackBar(e.error, 'Close')
           localStorage.setItem(PersistedFormValues.IsConnectionSuccessful, "false")

diff --git a/ui/src/app/components/object-detail/object-detail.component.html b/ui/src/app/components/object-detail/object-detail.component.html
@@ -169,15 +169,15 @@ <h3 class="title">
             <ng-container matColumnDef="srcDefaultValue" *ngIf="mySqlSource">
               <th mat-header-cell class="table_header" *matHeaderCellDef>Default Value</th>
               <td mat-cell *matCellDef="let element">
-                <div 
-                  class="trimmed-text" 
-                  matTooltip="{{ element.get('srcDefaultValue').value }}" 
+                <div
+                  class="trimmed-text"
+                  matTooltip="{{ element.get('srcDefaultValue').value }}"
                   matTooltipPosition="above">
                   {{ element.get('srcDefaultValue').value }}
                 </div>
               </td>
-            </ng-container>            
- 
+            </ng-container>
+
             <tr mat-header-row *matHeaderRowDef="['srcDatabase']"></tr>
             <tr mat-header-row *matHeaderRowDef="srcDisplayedColumns"></tr>
             <tr mat-row [ngClass]="{ 'scr-column-data-edit-mode': isEditMode }"
@@ -281,7 +281,7 @@ <h3 class="title">
                         </ng-container>
                       </mat-select>
                     </mat-form-field>
-                  </ng-container>                  
+                  </ng-container>
                   <ng-container *ngIf="!isEditMode">
                     <p>{{ element.get('spAutoGen').value.Name !== '' ? element.get('spAutoGen').value.Name : 'None' }}</p>
                   </ng-container>
@@ -409,7 +409,7 @@ <h3 class="title">
       <div class="pk-tab-container">
         <table mat-table [dataSource]="pkDataSource">
           <ng-container matColumnDef="srcDatabase">
-            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="5">{{ srcDbName }}</th>
+            <th mat-header-cell class="db_name" *matHeaderCellDef colspan="6">{{ srcDbName }}</th>
           </ng-container>
 
           <ng-container matColumnDef="spDatabase">
@@ -769,6 +769,127 @@ <h3 class="title">
       </div>
     </mat-tab>
 
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <span>CHECK CONSTRAINTS</span>
+      </ng-template>
+      <div class="cc-tab-container">
+        <table mat-table [dataSource]="ccDataSource">
+          <ng-container matColumnDef="srcDatabase">
+            <th mat-header-cell class="db_name" *matHeaderCellDef [attr.colspan]="3">{{ srcDbName }}</th>
+          </ng-container>
+
+          <ng-container matColumnDef="spDatabase">
+            <th mat-header-cell *matHeaderCellDef class="db_name" [attr.colspan]="4" >
+              <div class="spanner_edit-button">
+                <span>Spanner</span>
+                <div *ngIf="
+                    !isCcEditMode &&
+                    currentObject!.isSpannerNode &&
+                    !currentObject.isDeleted
+                  ">
+                  <button mat-stroked-button color="primary" (click)="toggleCcEdit()">
+                    <mat-icon class="edit-icon">edit</mat-icon>
+                    EDIT
+                  </button>
+                </div>
+              </div>
+            </th>
+          </ng-container>
+
+          <ng-container matColumnDef="srcSno">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>S. No.</th>
+            <td mat-cell *matCellDef="let element"  >
+              <span *ngIf="element.get('srcSno').value != 0">
+              {{ element.get('srcSno').value }}
+             </span>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="srcConstraintName">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
+            <td mat-cell *matCellDef="let element">
+              {{ element.get('srcConstraintName').value }}
+            </td>
+
+          </ng-container>
+
+          <ng-container matColumnDef="srcCondition">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
+            <td mat-cell *matCellDef="let element" matTooltip="{{ element.get('srcCondition').value }}"
+            matTooltipPosition="above" class="overflow-cell">
+
+              {{ element.get('srcCondition').value }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spSno">
+            <th mat-header-cell class="table_header" *matHeaderCellDef>S. No.</th>
+            <td mat-cell *matCellDef="let element">
+              {{ element.get('spSno').value }}
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spConstraintName">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Constraint Name</th>
+            <td mat-cell *matCellDef="let element">
+              <div *ngIf="isCcEditMode">
+                <input
+                  matInput
+                  class="name_input"
+                  type="text"
+                  [formControl]="element.get('spConstraintName')"
+                  matTooltip="No special characters allowed except underscore."
+                   />
+              </div>
+              <p *ngIf="!isCcEditMode">{{ element.get('spConstraintName').value }}</p>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="spConstraintCondition">
+            <th class="table_header" mat-header-cell *matHeaderCellDef>Condition</th>
+            <td mat-cell *matCellDef="let element" >
+              <div *ngIf="isCcEditMode">
+                   <textarea name="spConstraintCondition"  matInput
+                   class="condition_input" [formControl]="element.get('spConstraintCondition')"
+                   matTooltip="Enter valid clause for CHECK constraints" id="spConstraintCondition"></textarea>
+              </div>
+              <p *ngIf="!isCcEditMode" matTooltip="{{ element.get('spConstraintCondition').value }}"
+              matTooltipPosition="above" class="overflow-cell">{{ element.get('spConstraintCondition').value }}</p>
+            </td>
+          </ng-container>
+
+          <ng-container matColumnDef="dropButton">
+            <th mat-header-cell class="table_header" *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let element" [ngClass]="{ 'drop-button-left-border': isCcEditMode }">
+              <div class="actions" *ngIf="
+                isCcEditMode && currentObject!.isSpannerNode
+                ">
+                <mat-icon [matMenuTriggerFor]="menu">more_vert</mat-icon>
+                <mat-menu #menu="matMenu" xPosition="before">
+                  <button [disabled]="!isCcEditMode" mat-menu-item (click)="dropCc(element)">
+                    <span>Remove constraint</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="['srcDatabase', 'spDatabase']"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedCCColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedCCColumns"></tr>
+        </table>
+
+        <div *ngIf="isCcEditMode" class="add-cc-column">
+          <button mat-button color="primary" class="add-column-btn" type="button" (click)="addCcColumn()">
+            <mat-icon>add</mat-icon>
+            Add Constraint
+          </button>
+        </div>
+
+      </div>
+    </mat-tab>
+
     <mat-tab *ngIf="currentObject!.isSpannerNode && !currentObject!.isDeleted">
       <ng-template mat-tab-label>
         <span>SQL</span>
@@ -929,7 +1050,7 @@ <h3 class="title">
             </ng-container>
           </div>
         </td>
-      </ng-container>      
+      </ng-container>
       <ng-container matColumnDef="spSkipRangeMin">
         <th mat-header-cell class="table_header" *matHeaderCellDef>Skip Range Min</th>
         <td mat-cell *matCellDef="let element">
@@ -980,7 +1101,7 @@ <h3 class="title">
       <tr mat-header-row *matHeaderRowDef="sequenceDisplayedColumns"></tr>
       <tr mat-row class="sequence-data-row" *matRowDef="let row; columns: sequenceDisplayedColumns"></tr>
     </table>
-    
+
   </div>
 
   <div class="save-edits">
@@ -1004,6 +1125,15 @@ <h3 class="title">
         CANCEL
       </button>
     </div>
+    <div class="save-button" *ngIf="isCcEditMode && (interleaveParentName !== null ? currentTabIndex === 4:currentTabIndex === 3)">
+      <button mat-raised-button color="primary" (click)="saveCc()" [disabled]="!ccArray.valid" >
+        SAVE & CONVERT
+      </button>
+      <button class="cancel-button" mat-raised-button color="primary" (click)="toggleCcEdit()"
+        *ngIf="currentObject!.isSpannerNode">
+        CANCEL
+      </button>
+    </div>
     <div class="save-button" *ngIf="isFkEditMode && currentTabIndex === 2">
       <button mat-raised-button color="primary" (click)="saveFk()">SAVE & CONVERT</button>
       <button class="cancel-button" mat-raised-button color="primary" (click)="toggleFkEdit()"
@@ -1028,4 +1158,4 @@ <h3 class="title">
       </button>
     </div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/components/object-detail/object-detail.component.scss b/ui/src/app/components/object-detail/object-detail.component.scss
@@ -88,6 +88,7 @@
   }
 }
 .add-pk-column,
+.add-cc-column,
 .add-column {
   margin-left: 50%;
   padding: 10px;
@@ -106,6 +107,7 @@
 .column-tab-container,
 .fk-tab-container,
 .pk-tab-container,
+.cc-tab-container,
 .index-tab-container,
 .sequence-tab-container {
   height: 84%;
@@ -209,7 +211,7 @@
   .mat-column-srcColMaxLength {
     min-width: 100px;
   }
-  
+
   .mat-column-spSequenceKind{
     min-width: 250px;
   }
@@ -329,4 +331,11 @@ tr.mat-mdc-row {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+.overflow-cell {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,4 +44,4 @@ @@
         "karma-jasmine-html-reporter": "~2.1.0",
         "typescript": "^5.3.3"
       }
-    }
+    }