Fix oppia#19167: Allow reviewers to undo most recent submitted transl…

…ation review. (oppia#19954)

* Implement Undo feature

* Add custom snackbar

* Fix non null assertion error

* Fix lint errors

* Fix CI

* Fix CI

* Fix CI

* Fix CI

* Fix CI

* Fix CI

* Fix conflicts

* Add unit tests for deleted tests

* Update translation-suggestion-review-modal.component.ts

* Fix CI checks

* Feature gate the undo feature

* Fix flaky behaviour of unit tests

* Address Review comments

* Address review comments

* Address review comments

* Update shared-component.module.ts

* Add custom snack bars to codeowner files

.github/CODEOWNERS

@@ -297,6 +297,7 @@
 /core/templates/components/common-layout-directives/common-elements/sharing-links.component.html @oppia/lace-frontend-reviewers
 /core/templates/components/common-layout-directives/common-elements/sharing-links.component*.ts @oppia/lace-frontend-reviewers
 /core/templates/components/common-layout-directives/common-elements/common-elements.module.ts @oppia/lace-frontend-reviewers
+/core/templates/components/custom-snackbar/ @oppia/lace-frontend-reviewers
 /core/templates/components/profile-link-directives/ @oppia/lace-frontend-reviewers
 /core/templates/components/summary-tile/ @oppia/lace-frontend-reviewers
 /core/templates/directives/angular-html-bind.directive*.ts @oppia/lace-frontend-reviewers

core/templates/components/custom-snackbar/undo-snackbar.component.html

@@ -0,0 +1,35 @@
+<div class="snackbar-container">
+  <div class="oppia-snackbar-message">
+    {{ message }}
+  </div>
+  <div class="oppia-action-buttons">
+    <button mat-button class="undo-button" (click)="onUndo()">Undo</button>
+    <button mat-button class="dismiss-button" (click)="onDismiss()">Dismiss</button>
+  </div>
+</div>
+<style>
+  .snackbar-container {
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .oppia-snackbar-message {
+    align-items: center;
+    display: flex;
+  }
+
+  .oppia-action-buttons {
+    display: flex;
+    gap: 16px;
+    justify-content: space-evenly;
+  }
+
+  .undo-button {
+    color: #27b8a7;
+  }
+
+  .dismiss-button {
+    color: #bdbdbd;
+  }
+</style>

core/templates/components/custom-snackbar/undo-snackbar.component.spec.ts

@@ -0,0 +1,59 @@
+// Copyright 2024 The Oppia Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS-IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @fileoverview Unit tests for Custom undo snackbar.
+ */
+
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatSnackBarRef} from '@angular/material/snack-bar';
+import {UndoSnackbarComponent} from './undo-snackbar.component';
+
+describe('CustomSnackbarComponent', () => {
+  let component: UndoSnackbarComponent;
+  let fixture: ComponentFixture<UndoSnackbarComponent>;
+  let mockSnackBarRef: jasmine.SpyObj<MatSnackBarRef<UndoSnackbarComponent>>;
+
+  beforeEach(async () => {
+    mockSnackBarRef = jasmine.createSpyObj('MatSnackBarRef', [
+      'dismiss',
+      'dismissWithAction',
+    ]);
+
+    await TestBed.configureTestingModule({
+      declarations: [UndoSnackbarComponent],
+      providers: [{provide: MatSnackBarRef, useValue: mockSnackBarRef}],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UndoSnackbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call dismissWithAction when onUndo is called', () => {
+    component.onUndo();
+    expect(mockSnackBarRef.dismissWithAction).toHaveBeenCalled();
+  });
+
+  it('should call dismiss when onDismiss is called', () => {
+    component.onDismiss();
+    expect(mockSnackBarRef.dismiss).toHaveBeenCalled();
+  });
+});

core/templates/components/custom-snackbar/undo-snackbar.component.ts

@@ -0,0 +1,38 @@
+// Copyright 2024 The Oppia Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS-IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @fileoverview Component for Custom undo snackbar.
+ */
+
+import {Component} from '@angular/core';
+import {MatSnackBarRef} from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'app-custom-snackbar',
+  templateUrl: './undo-snackbar.component.html',
+})
+export class UndoSnackbarComponent {
+  message!: string;
+
+  constructor(private snackBarRef: MatSnackBarRef<UndoSnackbarComponent>) {}
+
+  onUndo(): void {
+    this.snackBarRef.dismissWithAction();
+  }
+
+  onDismiss(): void {
+    this.snackBarRef.dismiss();
+  }
+}

core/templates/components/shared-component.module.ts

@@ -164,6 +164,7 @@ import {OppiaVisualizationFrequencyTableComponent} from 'visualizations/oppia-vi
 import {OppiaVisualizationEnumeratedFrequencyTableComponent} from 'visualizations/oppia-visualization-enumerated-frequency-table.directive';
 import {RandomSelectorComponent} from 'value_generators/templates/random-selector.component';
 import {CopierComponent} from 'value_generators/templates/copier.component';
+import {UndoSnackbarComponent} from './custom-snackbar/undo-snackbar.component';
 
 // Pipes.
 import {StringUtilityPipesModule} from 'filters/string-utility-filters/string-utility-pipes.module';
@@ -356,6 +357,7 @@ import {DirectivesModule} from 'directives/directives.module';
     ComponentOverviewComponent,
     VisualizationSortedTilesComponent,
     RteHelperModalComponent,
+    UndoSnackbarComponent,
   ],
 
   entryComponents: [
@@ -487,6 +489,7 @@ import {DirectivesModule} from 'directives/directives.module';
     CopierComponent,
     RandomSelectorComponent,
     RteHelperModalComponent,
+    UndoSnackbarComponent,
   ],
 
   exports: [
@@ -627,6 +630,7 @@ import {DirectivesModule} from 'directives/directives.module';
     TranslateModule,
     VisualizationSortedTilesComponent,
     RteHelperModalComponent,
+    UndoSnackbarComponent,
   ],
 })
 export class SharedComponentsModule {}