Kf1.9(jupyter): fix i18n

frontend/common/kubeflow-common-lib/package.json

@@ -81,6 +81,9 @@
     "http-proxy-middleware": "2.0.7",
     "webpack-dev-middleware": "6.1.2",
     "undici": "6.21.1",
-    "webpack": "5.94.0"
+    "webpack": "5.94.0",
+    "@babel/runtime": "7.26.10",
+    "esbuild": "0.25.1",
+    "vite": "5.4"
   }
 }

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/conditions-table/config.ts

@@ -13,7 +13,7 @@ export function generateConfig(): TableConfig {
     theme: TABLE_THEME.FLAT,
     columns: [
       {
-        matHeaderCellDef: 'Status',
+        matHeaderCellDef: $localize`Status`,
         matColumnDef: 'status',
         style: { width: '40px' },
         value: new StatusValue({
@@ -23,7 +23,7 @@ export function generateConfig(): TableConfig {
         sort: true,
       },
       {
-        matHeaderCellDef: 'Type',
+        matHeaderCellDef: $localize`Type`,
         matColumnDef: 'type',
         style: { width: '150px' },
         value: new PropertyValue({
@@ -32,7 +32,7 @@ export function generateConfig(): TableConfig {
         sort: true,
       },
       {
-        matHeaderCellDef: 'Last Transition Time',
+        matHeaderCellDef: $localize`Last Transition Time`,
         matColumnDef: 'lastTransitionTime',
         style: { width: '150px' },
         value: new DateTimeValue({
@@ -41,7 +41,7 @@ export function generateConfig(): TableConfig {
         sort: true,
       },
       {
-        matHeaderCellDef: 'Reason',
+        matHeaderCellDef: $localize`Reason`,
         matColumnDef: 'reason',
         style: { width: '150px' },
         value: new PropertyValue({
@@ -50,7 +50,7 @@ export function generateConfig(): TableConfig {
         sort: true,
       },
       {
-        matHeaderCellDef: 'Message',
+        matHeaderCellDef: $localize`Message`,
         matColumnDef: 'message',
         style: { width: '150px' },
         value: new PropertyValue({

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/content-list-item/content-list-item.component.ts

@@ -11,7 +11,7 @@ export class ContentListItemComponent {
   @Input() topDivider = false;
   @Input() bottomDivider = true;
   @Input() keyMinWidth = '250px';
-  @Input() loadErrorMsg = 'Resources not available';
+  @Input() loadErrorMsg = $localize`Resources not available`;
 
   constructor() {}
 }

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/details-list/details-list-item/details-list-item.component.ts

@@ -30,7 +30,7 @@ export class DetailsListItemComponent {
     if (!this.copyValue) {
       const configWarning: SnackBarConfig = {
         data: {
-          msg: 'No value to copy to clipboard',
+          msg: $localize`No value to copy to clipboard`,
           snackType: SnackType.Warning,
         },
         duration: 2000,
@@ -41,7 +41,7 @@ export class DetailsListItemComponent {
 
     const configInfo: SnackBarConfig = {
       data: {
-        msg: 'Content copied to clipboard',
+        msg: $localize`Content copied to clipboard`,
         snackType: SnackType.Info,
       },
       duration: 2000,

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/advanced-options/advanced-options.component.html

@@ -2,7 +2,7 @@
   <div
     class="threadline"
     (click)="toggleClicked()"
-    matTooltip="Hide"
+    matTooltip="Hide this section"
     i18n-matTooltip
     matTooltipPosition="right"
   ></div>

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/name-namespace-inputs/name-input/name-input.component.html

@@ -1,5 +1,10 @@
 <mat-form-field class="wide" appearance="outline">
   <mat-label i18n>Name</mat-label>
-  <input matInput placeholder="Name" [formControl]="nameControl" />
+  <input
+    matInput
+    placeholder="Name"
+    [formControl]="nameControl"
+    i18n-placeholder
+  />
   <mat-error>{{ nameError() }}</mat-error>
 </mat-form-field>

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/section-image/section.image.component.html

@@ -6,6 +6,8 @@
   <a href="{{ link }}" target="_blank" style="text-decoration: none">
     {{ linkText }}
   </a>
-  <p *ngIf="readOnly">*The cluster admin has disabled setting this section!</p>
+  <p *ngIf="readOnly" i18n>
+    *The cluster admin has disabled setting this section!
+  </p>
   <ng-content></ng-content>
 </div>

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/section/section.component.html

@@ -15,8 +15,10 @@
   <a href="{{ link }}" target="_blank" style="text-decoration: none">
     {{ linkText }}
   </a>
-  <!--need to check if this change messes with the other things, else just restore old file-->
-  <p *ngIf="readOnly">*The cluster admin has disabled setting this section!</p>
+  <!--need to check if this change messes with the other things or just restore old file-->
+  <p *ngIf="readOnly" i18n>
+    *The cluster admin has disabled setting this section!
+  </p>
 
   <ng-content></ng-content>
 </div>

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/submit-bar/submit-bar.component.html

@@ -8,6 +8,7 @@
     (click)="create.emit(true)"
     [disabled]="createDisabled"
     data-cy-submit-bar-create
+    i18n
   >
     CREATE
   </button>
@@ -20,22 +21,28 @@
   >
     <div class="waiting-button-wrapper">
       <mat-spinner diameter="16"></mat-spinner>
-      <div>CREATING</div>
+      <div i18n>CREATING</div>
     </div>
   </button>
 
   <button
     mat-raised-button
     (click)="cancel.emit(true)"
     data-cy-submit-bar-cancel
+    i18n
   >
     CANCEL
   </button>
 
   <div class="flex text-area" *ngIf="allowYAMLEditing">
-    <button class="btn-link" (click)="yaml.emit(true)" data-cy-submit-bar-edit>
+    <button
+      class="btn-link"
+      (click)="yaml.emit(true)"
+      data-cy-submit-bar-edit
+      i18n
+    >
       Edit
     </button>
-    <span> and submit YAML</span>
+    <span i18n> and submit YAML</span>
   </div>
 </div>

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/utils.ts

@@ -9,7 +9,7 @@ export function updateNonDirtyControl(control: AbstractControl, value: any) {
 export function updateControlNonNullValue(
   control: AbstractControl,
   value: any,
-  msg = 'Can not update control with value null',
+  msg = $localize`Can not update control with value null`,
 ) {
   if (value === null) {
     console.warn(msg);

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/form/validators.ts

@@ -20,8 +20,8 @@ export const dns1123Validator: IValidator = {
   regex: '^' + dns1123LabelFmt + '(\\.' + dns1123LabelFmt + ')*' + '$',
   help:
     // prettier-ignore
-    'Name must consist of lowercase alphanumeric characters or \'-\', and"' +
-    ' must start and end with an alphanumeric character',
+    $localize `Name must consist of lowercase alphanumeric characters or '-',
+      and must start and end with an alphanumeric character`,
 };
 
 // TODO(kimwnasptd): We only use this validator, do we need the others?
@@ -30,12 +30,11 @@ export const dns1035Validator: IValidator = {
   help: $localize`Name must consist of lowercase alphanumeric characters or '-',
     start with an alphabetic character, and end with an alphanumeric character.`,
 };
-
+// aaw verify if i18n works
 export const volSizeValidator: IValidator = {
   regex: '^[0-9]+(E|Ei|P|Pi|T|Ti|G|Gi|M|Mi|K|Ki)?$',
-  help:
-    'Invalid volume size: Should be an integer, or integer followed ' +
-    'by a valid unit',
+  help: $localize`Invalid volume size: Should be an integer, 
+      or integer followed by a valid unit`,
 };
 
 export const memoryValidator: IValidator = {
@@ -45,17 +44,14 @@ export const memoryValidator: IValidator = {
     '|' +
     '(E|Ei|P|Pi|T|Ti|G|Gi|M|Mi|K|Ki)' +
     ')?$',
-  help:
-    'Invalid memory size: Should be an integer, or fixed-point integer' +
-    ' followed by a valid unit',
+  help: $localize`Invalid memory size: Should be an integer, 
+      or fixed-point integer followed by a valid unit`,
 };
 
 export const cpuValidator: IValidator = {
   regex: '^[0-9]*(m|[.][0-9]+)?$',
-  help:
-    'Invalid cpu limit: Should be a fixed-point integer or an integer ' +
-    // prettier-ignore
-    'followed by \'m\'',
+  help: $localize`Invalid cpu limit: Should be a fixed-point 
+    integer or an integer followed by 'm'`,
 };
 
 export const DEBOUNCE_TIME = 500;
@@ -95,7 +91,7 @@ export const MAX_NAME_LENGTH = 50;
 
 export function getNameError(nameCtrl: AbstractControl, resource: string) {
   if (nameCtrl.hasError('existingName')) {
-    return `${resource} "${nameCtrl.value}" already exists`;
+    return `${resource} "${nameCtrl.value}"` + $localize` already exists`;
   } else if (nameCtrl.hasError('pattern')) {
     // TODO: "pattern", is generic error, this might break in the future
     return dns1035Validator.help;

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/resource-table/types/chip-list.ts

@@ -16,7 +16,7 @@ export class ChipsListValue {
 
   private defaultValues: ChipsListConfig = {
     field: '',
-    noValueText: 'No items',
+    noValueText: $localize`No items`,
     maxVisibleChips: 3,
   };
 

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/services/backend/backend.service.ts

@@ -134,7 +134,7 @@ export class BackendService {
       return error.message;
     }
 
-    return `Unexpected error encountered`;
+    return $localize`Unexpected error encountered`;
   }
 
   public getSnackErrorMessage(

frontend/common/kubeflow-common-lib/projects/kubeflow/src/lib/variables-groups-table/variables-groups-table.component.ts

@@ -15,7 +15,7 @@ export class VariablesGroupsTableComponent {
   get envGroups() {
     return this.prvEnvGroups;
   }
-  @Input() loadErrorMsg = 'Resources not available';
+  @Input() loadErrorMsg = $localize`Resources not available`;
   @Input() loadCompleted = false;
 
   envGroupsEmpty(): boolean {

frontend/jupyter/cypress/e2e/notebook-details-page.cy.ts

@@ -39,16 +39,10 @@ describe('Notebook Details Page', () => {
       'lib-details-list-item[key="Type"] > .list-entry-row > .list-entry-value > div',
     ).should('have.text', ' JupyterLab\n');
     cy.get(
-      'lib-details-list-item[key="Minimum CPU"] > .list-entry-row > .list-entry-value > div',
+      'lib-details-list-item[key="Requested CPU"] > .list-entry-row > .list-entry-value > div',
     ).should('have.text', ' 500m\n');
     cy.get(
-      'lib-details-list-item[key="Maximum CPU"] > .list-entry-row > .list-entry-value > div',
-    ).should('have.text', ' 500m\n');
-    cy.get(
-      'lib-details-list-item[key="Minimum memory"] > .list-entry-row > .list-entry-value > div',
-    ).should('have.text', ' 2Gi\n');
-    cy.get(
-      'lib-details-list-item[key="Maximum memory"] > .list-entry-row > .list-entry-value > div',
+      'lib-details-list-item[key="Requested memory"] > .list-entry-row > .list-entry-value > div',
     ).should('have.text', ' 2Gi\n');
     cy.get(
       'lib-details-list-item[key="Image"] > .list-entry-row > .list-entry-value > div',