feat(agora): migration News component (AG-1546)

apps/agora/app/src/app/app.routes.ts

@@ -5,6 +5,10 @@ export const routes: Route[] = [
     path: 'about',
     loadChildren: () => import('@sagebionetworks/agora/about').then((routes) => routes.routes),
   },
+  {
+    path: 'news',
+    loadChildren: () => import('@sagebionetworks/agora/news').then((routes) => routes.routes),
+  },
   {
     path: 'not-found',
     loadChildren: () => import('@sagebionetworks/agora/not-found').then((routes) => routes.routes),

libs/agora/news/.eslintrc.json

@@ -0,0 +1,40 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "env": {
+    "jest": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:jest/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "agora",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "agora",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/agora/news/.hintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["../../../.hintrc"]
+}

libs/agora/news/README.md

@@ -0,0 +1,7 @@
+# agora-news
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test agora-news` to execute the unit tests.

libs/agora/news/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'agora-news',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/libs/agora/news',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/agora/news/project.json

@@ -0,0 +1,35 @@
+{
+  "name": "agora-news",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/agora/news/src",
+  "prefix": "agora",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/agora/news"],
+      "options": {
+        "jestConfig": "libs/agora/news/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "lint-fix": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "fix": true
+      }
+    },
+    "lint-html": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["hint src/**/*.html"],
+        "cwd": "libs/agora/news",
+        "parallel": false
+      }
+    }
+  },
+  "tags": ["type:feature", "scope:agora", "language:typescript"],
+  "implicitDependencies": []
+}

libs/agora/news/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/news.routes';

libs/agora/news/src/lib/news.component.html

@@ -0,0 +1,16 @@
+<div class="section section-hero">
+  <div class="section-inner">
+    <div class="container-sm">
+      <h1 class="h2">Agora News</h1>
+    </div>
+  </div>
+</div>
+
+<div class="section">
+  <div class="section-inner">
+    <div class="container-sm">
+      <h2>What’s New in Agora</h2>
+      <agora-wiki [wikiId]="wikiId" [className]="className"></agora-wiki>
+    </div>
+  </div>
+</div>

libs/agora/news/src/lib/news.component.scss

@@ -0,0 +1,25 @@
+@import 'libs/agora/styles/src/lib/variables';
+@import 'libs/agora/styles/src/lib/mixins';
+
+.news-page-content {
+  h3 {
+    font-size: var(--font-size-md);
+    font-weight: 700;
+    line-height: var(--line-height-md);
+    color: var(--color-secondary);
+    margin-bottom: 0;
+
+    &:not(:first-child) {
+      border-top: 1px solid var(--color-separator);
+      padding-top: var(--spacing-xl);
+      margin-top: var(--spacing-xl);
+    }
+  }
+
+  h4 {
+    font-size: var(--font-size-h3);
+    line-height: var(--line-height-h3);
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+  }
+}

libs/agora/news/src/lib/news.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NewsComponent } from './news.component';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('NewsComponent', () => {
+  let component: NewsComponent;
+  let fixture: ComponentFixture<NewsComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [],
+      providers: [provideHttpClient()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewsComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have wiki component', () => {
+    expect(element.querySelector('agora-wiki')).toBeTruthy();
+  });
+});

libs/agora/news/src/lib/news.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { WikiComponent } from 'libs/agora/wiki/src/lib/wiki.component';
+
+@Component({
+  selector: 'agora-news',
+  standalone: true,
+  imports: [CommonModule, WikiComponent],
+  templateUrl: './news.component.html',
+  styleUrls: ['./news.component.scss'],
+})
+export class NewsComponent {
+  wikiId = '611426';
+  className = 'news-page-content';
+}

libs/agora/news/src/lib/news.routes.ts

@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+import { NewsComponent } from './news.component';
+
+export const routes: Routes = [{ path: '', component: NewsComponent }];

libs/agora/news/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

libs/agora/news/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "target": "es2020",
+    "esModuleInterop": true
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/agora/news/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
+  "include": ["**/*.ts"]
+}

libs/agora/news/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts", "jest.config.ts"]
+}

libs/agora/teams/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/teams/teams.routes';
 export * from './lib/team-list/team-list.routes';
+export * from './lib/team-member-list/team-member-list.routes';

libs/agora/teams/src/lib/teams/teams.component.spec.ts

@@ -6,8 +6,8 @@ describe('TeamListComponent', () => {
   let component: TeamsComponent;
   let fixture: ComponentFixture<TeamsComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(() => {
+    TestBed.configureTestingModule({
       imports: [],
       providers: [provideHttpClient()],
     }).compileComponents();

libs/agora/testing/src/lib/server/index.ts

@@ -0,0 +1 @@
+export * from './msw-server';

libs/agora/testing/src/lib/server/msw-server.ts

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node';
+import { synapseHandlers } from '../handlers/synapse-handlers';
+import { teamHandlers } from '../handlers/team-handlers';
+
+export const server = setupServer(...teamHandlers, ...synapseHandlers);

libs/agora/wiki/src/lib/wiki.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { WikiComponent } from './wiki.component';
 import { provideHttpClient } from '@angular/common/http';
-import { server } from 'libs/agora/testing/src/lib/node';
+import { server } from 'libs/agora/testing/src/lib/server/msw-server';
 import { synapseWikiMock } from '@sagebionetworks/agora/testing/mocks';
 import { http, HttpResponse } from 'msw';
 

libs/agora/wiki/src/test-setup.ts

@@ -1,6 +1,6 @@
 import 'jest-preset-angular/setup-jest';
 
-import { server } from 'libs/agora/testing/src/lib/node';
+import { server } from '@sagebionetworks/agora/testing/server';
 
 beforeAll(() => {
   // Enable API mocking before all the tests.

tsconfig.base.json

@@ -21,10 +21,12 @@
       "@sagebionetworks/agora/api-client-angular": ["libs/agora/api-client-angular/src/index.ts"],
       "@sagebionetworks/agora/config": ["libs/agora/config/src/index.ts"],
       "@sagebionetworks/agora/models": ["libs/agora/models/index.ts"],
+      "@sagebionetworks/agora/news": ["libs/agora/news/src/index.ts"],
       "@sagebionetworks/agora/not-found": ["libs/agora/not-found/src/index.ts"],
       "@sagebionetworks/agora/services": ["libs/agora/services/src/index.ts"],
       "@sagebionetworks/agora/teams": ["libs/agora/teams/src/index.ts"],
-      "@sagebionetworks/agora/testing/mocks": ["libs/agora/testing/src/lib/mocks"],
+      "@sagebionetworks/agora/testing/mocks": ["libs/agora/testing/src/lib/mocks/index.ts"],
+      "@sagebionetworks/agora/testing/server": ["libs/agora/testing/src/lib/server/index.ts"],
       "@sagebionetworks/agora/ui": ["libs/agora/ui/src/index.ts"],
       "@sagebionetworks/agora/util": ["libs/agora/util/src/index.ts"],
       "@sagebionetworks/model-ad/api-client-angular": [