Feat: Changelog view

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
  - name: Setup node
  uses: actions/setup-node@v3
  with:
- node-version: 16.x
+ node-version: 18.x
 
  - name: Install dependencies
  run: yarn
@@ -37,7 +37,7 @@ jobs:
  - name: Setup node
  uses: actions/setup-node@v3
  with:
- node-version: 16.x
+ node-version: 18.x
  - name: Deploy to Vercel
  run: npx vercel --token ${{secrets.VERCEL_TOKEN}} --prod
  env:
@@ -56,7 +56,7 @@ jobs:
  - name: Setup node
  uses: actions/setup-node@v3
  with:
- node-version: 16.x
+ node-version: 18.x
  - name: Deploy to Heroku
  uses: akhileshns/[email protected]
  with:

.github/workflows/tests.yml

@@ -19,7 +19,7 @@ jobs:
  - name: Setup node
  uses: actions/setup-node@v3
  with:
- node-version: 16.x
+ node-version: 18.x
 
  - name: Install dependencies
  run: yarn

README.md

@@ -66,7 +66,7 @@ Currently, there are two types of actions in the repo, one for running tests whe
 
 [https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format)
 
-### Changelog: [CHANGELOG.md](https://github.com/ducktordanny/opres.help/blob/master/CHANGELOG.md)
+### Changelog: [CHANGELOG.md](https://github.com/ducktordanny/opres.help/blob/master/apps/backend/src/assets/CHANGELOG.md)
 
 ### Husky:
 

apps/backend/src/app/app.module.ts

@@ -1,12 +1,13 @@
 import {Module} from '@nestjs/common';
 
 import {AssignmentProblemModule} from './controllers/assignment-problem/assignment-problem.module';
+import {ChangelogModule} from './controllers/changelog/changelog.module';
 import {TransportProblemModule} from './controllers/transport-problem/transport-problem.module';
 import {TspModule} from './controllers/tsp/tsp.module';
 import {AppController} from './app.controller';
 
 @Module({
- imports: [TransportProblemModule, AssignmentProblemModule, TspModule],
+ imports: [ChangelogModule, TransportProblemModule, AssignmentProblemModule, TspModule],
  controllers: [AppController],
 })
 export class AppModule {}

apps/backend/src/app/controllers/changelog/changelog.controller.ts

@@ -0,0 +1,15 @@
+import {Controller, Get, Res} from '@nestjs/common';
+
+import {Response} from 'express';
+
+@Controller('changelog')
+export class ChangelogController {
+ @Get()
+ public getChangelogContentInMD(@Res() res: Response) {
+ res.sendFile(__dirname + '/assets/CHANGELOG.md', {
+ headers: {
+ 'Content-Type': 'text/markdown',
+ },
+ });
+ }
+}

apps/backend/src/app/controllers/changelog/changelog.module.ts

@@ -0,0 +1,8 @@
+import {Module} from '@nestjs/common';
+
+import {ChangelogController} from './changelog.controller';
+
+@Module({
+ controllers: [ChangelogController],
+})
+export class ChangelogModule {}

CHANGELOG.md → apps/backend/src/assets/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-> All notable changes to this project will be documented in this file.
+> All notable changes to this project will be documented and versioned here.
+
+## [0.10.0] - 2024-01-29
+
+- New page and endpoint for viewing Changelog in English
 
 ## [0.9.0] - 2024-01-26
 

apps/backend/src/main.ts

@@ -5,18 +5,20 @@
 
 import {Logger} from '@nestjs/common';
 import {NestFactory} from '@nestjs/core';
+import {NestExpressApplication} from '@nestjs/platform-express';
+
+import {join} from 'path';
 
 import {AppModule} from './app/app.module';
 
 async function bootstrap() {
- const app = await NestFactory.create(AppModule);
+ const app = await NestFactory.create<NestExpressApplication>(AppModule);
  const globalPrefix = 'api';
+ app.useStaticAssets(join(__dirname, 'assets'));
  app.setGlobalPrefix(globalPrefix);
  const port = process.env.PORT || 3333;
  await app.listen(port);
- Logger.log(
- `🚀 Application is running on: http://localhost:${port}/${globalPrefix}`,
- );
+ Logger.log(`🚀 Application is running on: http://localhost:${port}/${globalPrefix}`);
 }
 
 bootstrap();

apps/frontend/src/app/app.routing.ts

@@ -10,6 +10,11 @@ const routes: Routes = [
  path: 'home',
  loadChildren: () => import('./pages/home/home.module').then((module) => module.HomeModule),
  },
+ {
+ path: 'changelog',
+ loadChildren: () =>
+ import('./pages/changelog/changelog.module').then((module) => module.ChangelogPageModule),
+ },
  {
  path: 'public-api-docs',
  pathMatch: 'full',

apps/frontend/src/app/components/layout/layout.component.ts

@@ -35,6 +35,7 @@ export class LayoutComponent implements OnDestroy {
  public mobileQuery: MediaQueryList;
  public readonly ROUTES = [
  {path: '/home', title: 'SIDEBAR_MENU.HOME'},
+ {path: '/changelog', title: 'SIDEBAR_MENU.CHANGELOG'},
  {path: '/public-api-docs', title: 'SIDEBAR_MENU.API_DOCS'},
  {
  path: '/transport-problem',

apps/frontend/src/app/pages/changelog/changelog.module.ts

@@ -0,0 +1,24 @@
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {NgModule} from '@angular/core';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+
+import {MdPreviewModule} from '../../pipes/md-preview/md-preview.module';
+
+import {ChangelogPageComponent} from './changelog.page';
+import {ChangelogRouteModule} from './changelog.routing';
+import {ChangelogService} from './changelog.service';
+
+@NgModule({
+ declarations: [ChangelogPageComponent],
+ providers: [ChangelogService],
+ imports: [
+ ChangelogRouteModule,
+ CommonModule,
+ HttpClientModule,
+ MatSnackBarModule,
+ MdPreviewModule,
+ ],
+ exports: [],
+})
+export class ChangelogPageModule {}

apps/frontend/src/app/pages/changelog/changelog.page.ts

@@ -0,0 +1,47 @@
+import {AfterViewInit, ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatSnackBar} from '@angular/material/snack-bar';
+
+import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
+import {TranslateService} from '@ngx-translate/core';
+import {Observable} from 'rxjs';
+
+import {ChangelogService} from './changelog.service';
+
+@UntilDestroy()
+@Component({
+ templateUrl: './changelog.template.html',
+ styles: [
+ `
+ section {
+ padding: 16px;
+ }
+ `,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChangelogPageComponent implements AfterViewInit {
+ public changelogContent: Observable<string>;
+
+ constructor(
+ private changelogService: ChangelogService,
+ private snackBar: MatSnackBar,
+ private translateService: TranslateService,
+ ) {
+ this.changelogContent = this.changelogService.getChangelogContent();
+ }
+
+ public ngAfterViewInit(): void {
+ this.showLanguageInfo();
+ this.translateService.onLangChange
+ .pipe(untilDestroyed(this))
+ .subscribe(() => this.showLanguageInfo());
+ }
+
+ public showLanguageInfo(): void {
+ const snackBarContent = this.translateService.instant('CHANGELOG.INFO');
+ const actionContent = this.translateService.instant('CLOSE');
+ this.snackBar.open(snackBarContent, actionContent, {
+ duration: 5_000,
+ });
+ }
+}

apps/frontend/src/app/pages/changelog/changelog.routing.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+import {ChangelogPageComponent} from './changelog.page';
+
+const routes: Routes = [{path: '', component: ChangelogPageComponent}];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class ChangelogRouteModule {}

apps/frontend/src/app/pages/changelog/changelog.service.ts

@@ -0,0 +1,26 @@
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Injectable()
+export class ChangelogService {
+ constructor(private http: HttpClient) {}
+
+ public getChangelogContent(): Observable<string> {
+ const headers = new HttpHeaders();
+ headers.append('Access', 'text/markdown');
+ headers.append('Content-Type', 'text/markdown');
+
+ const request = this.http.get<ArrayBuffer>('/api/changelog', {
+ headers,
+ responseType: 'arraybuffer' as 'json',
+ });
+
+ return request.pipe(map(this.getContentFromArrayBuffer));
+ }
+
+ private getContentFromArrayBuffer = (arrbuffer: ArrayBuffer): string =>
+ new TextDecoder().decode(arrbuffer);
+}

apps/frontend/src/app/pages/changelog/changelog.template.html

@@ -0,0 +1,7 @@
+<section>
+ <p [innerHTML]="changelogContent | async | mdPreview"></p>
+ <a
+ href="https://github.com/ducktordanny/opres.help/blob/master/apps/backend/src/assets/CHANGELOG.md"
+ >See on GitHub.</a
+ >
+</section>

apps/frontend/src/app/pages/transport-problem/tests/transport-problem.service.spec.ts

@@ -2,19 +2,14 @@ import {HttpClient, HttpClientModule} from '@angular/common/http';
 import {TestBed} from '@angular/core/testing';
 import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
 
-import {
- tableMinimumFirstResultMock,
- tpDataFirstMock,
-} from '@opres/shared/data/mocks';
+import {tableMinimumFirstResultMock, tpDataFirstMock} from '@opres/shared/data/mocks';
 import {Epsilon} from '@opres/shared/types';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
 import {last} from 'lodash';
 import {of, throwError} from 'rxjs';
 
 import {ErrorHandlerService} from '../../../services/error-handler.service';
-import {
- transportProblemCacheBuster$,
- TransportProblemService,
-} from '../transport-problem.service';
+import {transportProblemCacheBuster$, TransportProblemService} from '../transport-problem.service';
 
 describe('TransportProblemService', () => {
  const epsilonMock: Epsilon = {value: 123};
@@ -26,15 +21,19 @@ describe('TransportProblemService', () => {
  let transportProblemService: TransportProblemService;
  let http: HttpClient;
  let snackbar: MatSnackBar;
+ let translateService: TranslateService;
 
  beforeEach(() => {
  TestBed.configureTestingModule({
- imports: [HttpClientModule, MatSnackBarModule],
- providers: [TransportProblemService, HttpClient, ErrorHandlerService],
+ imports: [HttpClientModule, MatSnackBarModule, TranslateModule.forRoot()],
+ providers: [TransportProblemService, TranslateService, HttpClient, ErrorHandlerService],
  });
  transportProblemService = TestBed.inject(TransportProblemService);
  http = TestBed.inject(HttpClient);
  snackbar = TestBed.inject(MatSnackBar);
+ translateService = TestBed.inject(TranslateService);
+
+ jest.spyOn(translateService, 'instant').mockReturnValue('Close');
  transportProblemCacheBuster$.next();
  });
 
@@ -47,12 +46,10 @@ describe('TransportProblemService', () => {
  .spyOn(transportProblemService, 'getEpsilonResult')
  .mockReturnValue(of(epsilonMock));
  const phaseMock = {steps: [], epsilon: epsilonMock};
- transportProblemService
- .getFullCalculationResult(tpDataFirstMock)
- .subscribe((value) => {
- expect(value.firstPhase).toEqual(phaseMock);
- expect(value.secondPhase).toEqual(phaseMock);
- });
+ transportProblemService.getFullCalculationResult(tpDataFirstMock).subscribe((value) => {
+ expect(value.firstPhase).toEqual(phaseMock);
+ expect(value.secondPhase).toEqual(phaseMock);
+ });
  done();
  expect(httpPostSpy).toHaveBeenCalledTimes(2);
  expect(epsilonSpy).toHaveBeenCalledTimes(2);
@@ -72,9 +69,7 @@ describe('TransportProblemService', () => {
  });
 
  it('should check epsilon result', () => {
- const httpPostSpy = jest
- .spyOn(http, 'post')
- .mockReturnValue(of(epsilonMock));
+ const httpPostSpy = jest.spyOn(http, 'post').mockReturnValue(of(epsilonMock));
  transportProblemService
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  .getEpsilonResult(last(tableMinimumFirstResultMock)!.transportation)

apps/frontend/src/app/pipes/md-preview/md-preview.module.ts

@@ -0,0 +1,9 @@
+import {NgModule} from '@angular/core';
+
+import {MdPreviewPipe} from './md-preview.pipe';
+
+@NgModule({
+ declarations: [MdPreviewPipe],
+ exports: [MdPreviewPipe],
+})
+export class MdPreviewModule {}

apps/frontend/src/app/pipes/md-preview/md-preview.pipe.ts

@@ -0,0 +1,23 @@
+import {Pipe, SecurityContext} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {PipeTransform} from '@nestjs/common';
+
+import {marked} from 'marked';
+
+@Pipe({
+ name: 'mdPreview',
+})
+export class MdPreviewPipe implements PipeTransform {
+ constructor(private sanitizer: DomSanitizer) {}
+
+ public transform(value: string | null): string {
+ if (value === null) {
+ console.error('mdPreview input value is null');
+ return '';
+ }
+ const rawPreview = marked.parse(value);
+ const preview = this.sanitizer.sanitize(SecurityContext.HTML, rawPreview);
+ if (preview === null) console.error('Cannot display HTML content because of security reasons.');
+ return preview ?? '';
+ }
+}

apps/frontend/src/app/services/error-handler.service.ts

@@ -1,18 +1,19 @@
 import {Injectable} from '@angular/core';
 import {MatSnackBar} from '@angular/material/snack-bar';
 
+import {TranslateService} from '@ngx-translate/core';
 import {EMPTY, Observable} from 'rxjs';
 
 import {APIError} from '../types/api.type';
 
 @Injectable()
 export class ErrorHandlerService {
- constructor(private snackbar: MatSnackBar) {}
+ constructor(private snackbar: MatSnackBar, private translateService: TranslateService) {}
 
  public showError = (value: {error: APIError}): Observable<never> => {
- const message =
-  value?.error?.message || value?.error?.error || 'Something went wrong';
- this.snackbar.open(message, 'Close');
+ const message = value?.error?.message || value?.error?.error || 'Something went wrong';
+ const action = this.translateService.instant('CLOSE');
+ this.snackbar.open(message, action);
  return EMPTY;
  };
 }