feat: customizable footer message

Author: emigun

src/app/app-config.service.spec.ts

@@ -38,7 +38,6 @@ describe("AppConfigService", () => {
       accessDataHref: "test-access",
       accessInstructions: "test-instructions",
       scicatBaseUrl: "test-scicat",
-      showLogoBanner: true,
       logoBanner: "test-logo",
       lbBaseUrl: "test-lb",
       statusMessage: "test-status",
@@ -65,7 +64,6 @@ describe("AppConfigService", () => {
       accessDataHref: "test-access",
       accessInstructions: "test-instructions",
       scicatBaseUrl: "test-scicat",
-      showLogoBanner: true,
       logoBanner: "test-logo",
       lbBaseUrl: "test-lb",
     };

src/app/app-config.service.ts

@@ -17,14 +17,14 @@ export interface AppConfig {
   accessDataHref: string;
   accessInstructions: string;
   scicatBaseUrl: string;
-  showLogoBanner: boolean;
   logoBanner: string | null;
   logoWidth?: string;
   retrieveToEmail: RetrieveDestinations | undefined;
   lbBaseUrl: string | null;
   statusMessage: string;
   statusCode: "INFO" | "WARN" | "NONE";
   contactEmail: string;
+  footerMessage?: FooterMessage;
 }
 
 export class RetrieveDestinations {
@@ -34,6 +34,16 @@ export class RetrieveDestinations {
   confirmMessage: string | undefined;
 }
 
+export interface FooterMessage {
+  text: string;
+  links: FooterMessageLink[];
+}
+
+export interface FooterMessageLink {
+  label: string;
+  url: string;
+}
+
 @Injectable({ providedIn: "root" })
 export class AppConfigService {
   private appConfig: AppConfig = {} as AppConfig;

src/app/app.component.html

@@ -15,12 +15,15 @@
 <router-outlet></router-outlet>
 
 <footer class="footer">
-  <mat-toolbar class="logo-banner" *ngIf="config.showLogoBanner">
-    <img src="../assets/{{ config.logoBanner }}" width="{{ config.logoWidth }}" alt="logo_banner" />
-  </mat-toolbar>
-
   <address *ngIf="config.contactEmail">
     If you have any questions or need help, please contact <a href="mailto:{{ config.contactEmail }}">{{
       config.contactEmail }}</a>.
   </address>
+
+  <div class="footer-links" *ngIf="config.footerMessage as footerMessage">
+    <span *ngIf="footerMessage.text">{{ footerMessage.text }} </span>
+    <ng-container *ngFor="let link of footerMessage.links; let last = last">
+      <a [href]="link.url">{{ link.label }}</a><span *ngIf="!last"> | </span>
+    </ng-container>
+  </div>
 </footer>

src/app/app.component.scss

@@ -21,7 +21,7 @@
   background-color: var(--theme-primary-default-contrast);
 }
 
-address {
+.footer-links, address {
   font-size: 16px;
   padding: 0.5em;
   background-color: whitesmoke;

src/app/app.component.spec.ts

@@ -30,19 +30,19 @@ describe("AppComponent", () => {
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'ESS Public Data Repository test'`, () => {
+  it("should set the title from the configured facility", () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual("ESS Public Data Repository test");
+    expect(app.title).toEqual("THE_FACILITY Public Data Repository test");
   });
 
   it(`should test app config values'`, fakeAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     fixture.detectChanges();
-    expect(app.config.scicatBaseUrl).toEqual("https://scicat.esss.se");
-    expect(app.config.lbBaseUrl).toEqual("https://scicat.esss.se/api");
-    expect(LoopBackConfig.getPath()).toEqual("https://scicat.esss.se/api");
+    expect(app.config.scicatBaseUrl).toEqual("https://example.com/scicat");
+    expect(app.config.lbBaseUrl).toEqual("https://example.com/api");
+    expect(LoopBackConfig.getPath()).toEqual("https://example.com/api");
   }));
 
   it(`should navigate to home when clicking the title'`, () => {
@@ -58,4 +58,25 @@ describe("AppComponent", () => {
     titleEl.nativeElement.click();
     expect(navigateSpy).toHaveBeenCalledWith(["/"]);
   });
+
+  it("should render footer message links from config", () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+
+    const footerLinks = fixture.debugElement.query(By.css(".footer-links"));
+    const anchors = footerLinks.queryAll(By.css("a"));
+
+    expect(footerLinks.nativeElement.textContent).toContain(
+      "For more information visit:",
+    );
+    expect(anchors.length).toBe(2);
+    expect(anchors[0].nativeElement.textContent).toBe("Data policy");
+    expect(anchors[0].nativeElement.href).toBe(
+      "https://example.com/data-policy",
+    );
+    expect(anchors[1].nativeElement.textContent).toBe("Documentation");
+    expect(anchors[1].nativeElement.href).toBe(
+      "https://example.com/documentation",
+    );
+  });
 });

src/app/publisheddata-details/publisheddata-details.component.spec.ts

@@ -24,7 +24,7 @@ describe("PublisheddataDetailsComponent", () => {
   let component: PublisheddataDetailsComponent;
   let fixture: ComponentFixture<PublisheddataDetailsComponent>;
 
-  const scicatBaseUrl = "https://scicat.esss.se";
+  const scicatBaseUrl = "https://example.com/scicat";
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -87,8 +87,7 @@ describe("PublisheddataDetailsComponent", () => {
     });
 
     it("should return true if dataDescription is URL", () => {
-      const dataDescription =
-        "https://github.com/ess-dmsc/ess_file_formats/wiki/NeXus";
+      const dataDescription = "https://example.com/dataset-description";
 
       const isUrl = component.isUrl(dataDescription);
 

src/app/shared/MockStubs.ts

@@ -107,20 +107,32 @@ export class MockAppConfigService extends AppConfigService {
     production: false,
     accessDataHref: "someurl",
     directMongoAccess: true,
-    facility: "ess",
+    facility: "the_facility",
     accessInstructions:
       "Instructions: Login with brightness username and password",
-    scicatBaseUrl: "https://scicat.esss.se",
-    lbBaseUrl: "https://scicat.esss.se/api",
+    scicatBaseUrl: "https://example.com/scicat",
+    lbBaseUrl: "https://example.com/api",
     retrieveToEmail: {
       option: "URLs",
       username: "lp_service",
       title: "An email",
       confirmMessage: "aMessage",
     },
-    showLogoBanner: true,
     oaiProviderRoute: null,
     logoBanner: "",
+    footerMessage: {
+      text: "For more information visit:",
+      links: [
+        {
+          label: "Data policy",
+          url: "https://example.com/data-policy",
+        },
+        {
+          label: "Documentation",
+          url: "https://example.com/documentation",
+        },
+      ],
+    },
   };
 
   async loadAppConfig(): Promise<void> {}

src/assets/config.example.json

@@ -8,8 +8,20 @@
   "oaiProviderRoute": "http://localhost:3001",
   "production": false,
   "scicatBaseUrl": "http://localhost",
-  "showLogoBanner": true,
   "statusCode": "INFO",
   "statusMessage": "This is a customizable status message",
-  "contactEmail": "support@scicat.eu"
-}
+  "contactEmail": "support@scicat.eu",
+  "footerMessage": {
+    "text": "For more information visit:",
+    "links": [
+      {
+        "label": "Data policy",
+        "url": "https://example.com/data-policy"
+      },
+      {
+        "label": "Documentation",
+        "url": "https://example.com/documentation"
+      }
+    ]
+  }
+}

src/environments/environment.development.ts

@@ -15,5 +15,4 @@ export const environment = {
   oaiProviderRoute: "https://doi2.psi.ch/oaipmh/Publication",
   production: true,
   scicatBaseUrl: null,
-  showLogoBanner: false,
 };

src/environments/environment.dmsc.ts

@@ -13,5 +13,4 @@ export const environment = {
   oaiProviderRoute: null,
   production: false,
   scicatBaseUrl: "https://scicat.esss.se",
-  showLogoBanner: true,
 };