[Home]: Separate homepage from datahub in two apps

.github/workflows/ci.yml

@@ -48,20 +48,24 @@ jobs:
       - name: Install dependencies
         run: npm i
 
-      - name: Run docker-build
+      - name: Run docker-build for datahub
         run: npx nx docker-build mel-datahub
 
+      - name: Run docker-build for home
+        run: npx nx docker-build home
+
       - uses: docker/login-action@v1
         name: Login to GitHub Container Registry
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: 'Pushing the image onto ghcr.io'
+      - name: 'Pushing the images onto ghcr.io'
         if: github.ref == 'refs/heads/main'
         run: |
-          docker push ghcr.io/camptocamp/mel-dataplatform/datahub:latest
+          docker push ghcr.io/camptocamp/mel-dataplatform/catalogue:latest
+          docker push ghcr.io/camptocamp/mel-dataplatform/accueil:latest
 
   cypress-run:
     name: End-to-end tests
@@ -86,9 +90,12 @@ jobs:
       - name: Install dependencies
         run: npm i
 
-      - name: Run tests
+      - name: Run tests for datahub
         run: npx nx e2e mel-datahub-e2e
 
+      - name: Run tests for home
+        run: npx nx e2e home-e2e
+
   agents:
     name: Nx Cloud - Agents
     uses: nrwl/ci/.github/workflows/[email protected]

apps/datahub/project.json

@@ -15,8 +15,15 @@
         "browser": "apps/datahub/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/datahub/tsconfig.app.json",
-        "assets": ["apps/datahub/src/favicon.ico", "apps/datahub/src/assets"],
-        "styles": ["apps/datahub/src/styles.css"],
+        "assets": [
+          "apps/datahub/src/favicon.ico",
+          {
+            "glob": "**/*",
+            "input": "resources/assets",
+            "output": "./assets"
+          }
+        ],
+        "styles": ["resources/styles.css"],
         "scripts": [],
         "preserveSymlinks": true,
         "allowedCommonJsDependencies": [
@@ -99,7 +106,7 @@
       "options": {
         "commands": [
           "nx build mel-datahub --base-href='/catalogue/'",
-          "docker build --build-arg APP_NAME=catalogue -f ./tools/docker/Dockerfile . -t ghcr.io/camptocamp/mel-dataplatform/datahub:latest"
+          "docker build --build-arg APP_NAME=catalogue -f ./tools/docker/Dockerfile . -t ghcr.io/camptocamp/mel-dataplatform/catalogue:latest"
         ],
         "parallel": false
       }

apps/datahub/src/app/app.module.ts

@@ -13,7 +13,6 @@ import {
   LOGIN_URL,
   provideGn4,
   provideRepositoryUrl,
-  RouterService,
   ThemeService,
   TRANSLATE_DEFAULT_CONFIG,
   UiElementsModule,
@@ -37,32 +36,12 @@ import { DatasetPageComponent } from './dataset/dataset-page/dataset-page.compon
 import { SearchHeaderComponent } from './search/search-header/search-header.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { SearchResultsComponent } from './search/search-results/search-results.component'
-import { HomePageComponent } from './home/home-page/home-page.component'
-import { AppRouterService } from './app.router.service'
-import { HomeHeaderComponent } from './home/home-header/home-header.component'
 import { MatIconModule } from '@angular/material/icon'
-import { MelEmbeddedTranslateLoader } from './common/embedded.translate.loader'
-import { ResultsListComponent } from './common/results-list/results-list.component'
-import { ResultsListItemComponent } from './common/results-list-item/results-list-item.component'
-import { ResultsListCarouselComponent } from './common/results-list/results-list-carousel/results-list-carousel.component'
-import { ResultsListGridComponent } from './common/results-list/results-list-grid/results-list-grid.component'
-import { ResultsCardFavoriteComponent } from './common/results-list-item/results-card-favorite/results-card-favorite.component'
-import { ResultsCardLastCreatedComponent } from './common/results-list-item/results-card-last-created/results-card-last-created.component'
-import { ResultsCardSearchComponent } from './common/results-list-item/results-card-search/results-card-search.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { DatasetApisComponent } from './dataset/dataset-apis/dataset-apis.component'
-import { MelDatahubMetadataQualityComponent } from './common/metadata-quality/mel-datahub-metadata-quality.component'
 import { DatasetHeaderComponent } from './dataset/dataset-header/dataset-header.component'
-import { ButtonComponent } from './common/button/button.component'
 import { DatasetDownloadsComponent } from './dataset/dataset-downloads/dataset-downloads.component'
-import { FavoriteHeartComponent } from './common/favorites/favorite-heart/favorite-heart.component'
-import { HeartToggleComponent } from './common/favorites/heart-toggle/heart-toggle.component'
-import { TextExpandComponent } from './common/text-expand/text-expand.component'
-import { MelDatahubFooterComponent } from './common/footer/mel-datahub-footer.component'
-import { CustomCarouselComponent } from './common/custom-carousel/custom-carousel.component'
 import { DatasetInformationComponent } from './dataset/dataset-information/dataset-information.component'
-import { MelFuzzySearchComponent } from './common/fuzzy-search/fuzzy-search.component'
-import { MelAutocompleteComponent } from './common/autocomplete/autocomplete.component'
 import { ReactiveFormsModule } from '@angular/forms'
 import { MatAutocompleteModule } from '@angular/material/autocomplete'
 import { SearchFormComponent } from './search/search-form/search-form.component'
@@ -80,37 +59,19 @@ import { DatasetVisualisationComponent } from './dataset/dataset-visualisation/d
 import { MelMapViewComponent } from './dataset/dataset-visualisation/map-view/map-view.component'
 import { MelDataViewComponent } from './dataset/dataset-visualisation/data-view/data-view.component'
 import { environment } from '../environments/environnment'
-import { StripHtmlPipe } from './common/strip-html.pipe'
+import { MelModule, MelEmbeddedTranslateLoader } from '@mel-dataplatform/mel'
 
 @NgModule({
   declarations: [
     AppComponent,
     SearchPageComponent,
     SearchHeaderComponent,
     SearchResultsComponent,
-    HomePageComponent,
-    HomeHeaderComponent,
-    ResultsListComponent,
-    ResultsListCarouselComponent,
-    ResultsListGridComponent,
-    ResultsListItemComponent,
-    ResultsCardFavoriteComponent,
-    ResultsCardLastCreatedComponent,
-    ResultsCardSearchComponent,
     DatasetPageComponent,
     DatasetApisComponent,
-    MelDatahubMetadataQualityComponent,
     DatasetHeaderComponent,
-    ButtonComponent,
     DatasetDownloadsComponent,
-    FavoriteHeartComponent,
-    HeartToggleComponent,
-    TextExpandComponent,
-    MelDatahubFooterComponent,
-    CustomCarouselComponent,
     DatasetInformationComponent,
-    MelFuzzySearchComponent,
-    MelAutocompleteComponent,
     SearchFormComponent,
     SearchFiltersComponent,
     MelFilterDropdownComponent,
@@ -122,9 +83,9 @@ import { StripHtmlPipe } from './common/strip-html.pipe'
     DatasetVisualisationComponent,
     MelMapViewComponent,
     MelDataViewComponent,
-    StripHtmlPipe,
   ],
   imports: [
+    MelModule,
     BrowserModule,
     BrowserAnimationsModule,
     UiWidgetsModule,
@@ -186,7 +147,6 @@ import { StripHtmlPipe } from './common/strip-html.pipe'
       provide: LOGIN_URL,
       useFactory: () => '${current_url}?login',
     },
-    { provide: RouterService, useClass: AppRouterService },
   ],
   bootstrap: [AppComponent],
 })

apps/datahub/tsconfig.editor.json

@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "../../libs/mel/src/lib/strip-html.pipe.ts"],
   "compilerOptions": {
     "types": ["jest", "node"]
   }

apps/home-e2e/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/home-e2e/cypress.config.ts

@@ -0,0 +1,10 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset'
+
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(__filename, { cypressDir: 'src' }),
+    baseUrl: 'http://localhost:4200',
+  },
+})

apps/home-e2e/project.json

@@ -0,0 +1,30 @@
+{
+  "name": "home-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/home-e2e/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/home-e2e/cypress.config.ts",
+        "testingType": "e2e",
+        "devServerTarget": "home:serve:development"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "home:serve:production"
+        },
+        "ci": {
+          "devServerTarget": "home:serve-static"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["home"]
+}

apps/datahub-e2e/src/e2e/home.cy.ts → apps/home-e2e/src/e2e/home.cy.ts

@@ -9,10 +9,9 @@ describe('home', () => {
       cy.get('mel-datahub-fuzzy-search').should('be.visible')
       cy.get('mel-datahub-autocomplete').should('have.length.gt', 0)
     })
-    it('should navigate to search and display results when executing a search', () => {
+    it('should create correct url to navigate to search', () => {
       cy.get('mel-datahub-fuzzy-search').type('test{enter}')
-      cy.url().should('include', 'search')
-      cy.get('mel-datahub-results-card-search').should('have.length.gt', 0)
+      cy.url().should('include', 'catalogue/search?q=test')
     })
   })
 
@@ -53,10 +52,16 @@ describe('home', () => {
           .first()
           .as('firstResult')
       })
-      it('should open the dataset page in the same application on click', () => {
+      it('should create correct url to open the dataset page in the same application on click', () => {
         cy.get('@firstResult').click()
-        cy.url().should('include', 'dataset')
-        cy.get('mel-datahub-dataset-page').should('be.visible')
+        cy.url().should(
+          'include',
+          'catalogue/dataset/9e1ea778-d0ce-4b49-90b7-37bc0e448300'
+        )
+      })
+      it('should create correct url to navigate to search on keyword click', () => {
+        cy.get('@firstResult').find('.mel-badge-button-primary').first().click()
+        cy.url().should('include', 'catalogue/search?q=administration')
       })
     })
   })

apps/home-e2e/src/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/home-e2e/src/support/app.po.ts

@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1')

apps/home-e2e/src/support/commands.ts

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password)
+})
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/home-e2e/src/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands'

apps/home-e2e/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "cypress.config.ts",
+    "**/*.cy.ts",
+    "**/*.cy.js",
+    "**/*.d.ts"
+  ]
+}