Catanie refactor to remove the duplicate pages for anonymous users

CI/ESS/styles.scss

@@ -3,9 +3,6 @@
 @use '~@angular/material' as mat;
 @use "./app/app-theme" as app;
 @use "./app/_layout/app-header/app-header-theme" as app-header;
-@use "./app/_layout/login-header/login-header-theme" as login-header;
-@use "./app/datasets/anonymous-details/anonymous-details-theme" as anonymous-details;
-@use "./app/datasets/anonymous-details-dashboard/anonymous-details-dashboard-theme" as anonymous-details-dashboard;
 @use "./app/datasets/batch-view/batch-view-theme" as batch-view;
 @use "./app/datasets/dashboard/dashboard-theme" as dashboard;
 @use "./app/datasets/datafiles/datafiles-theme" as datafiles;
@@ -255,9 +252,6 @@ $theme: custom-light-theme(
 @include mat.all-component-themes($theme);
 @include app.theme($theme);
 @include app-header.theme($theme);
-@include login-header.theme($theme);
-@include anonymous-details.theme($theme);
-@include anonymous-details-dashboard.theme($theme);
 @include batch-view.theme($theme);
 @include dashboard.theme($theme);
 @include datafiles.theme($theme);

CI/MAXIV/maxiv-theme.scss

@@ -3,9 +3,6 @@
 @use '~@angular/material' as mat;
 @use "./app/app-theme" as app;
 @use "./app/_layout/app-header/app-header-theme" as app-header;
-@use "./app/_layout/login-header/login-header-theme" as login-header;
-@use "./app/datasets/anonymous-details/anonymous-details-theme" as anonymous-details;
-@use "./app/datasets/anonymous-details-dashboard/anonymous-details-dashboard-theme" as anonymous-details-dashboard;
 @use "./app/datasets/batch-view/batch-view-theme" as batch-view;
 @use "./app/datasets/dashboard/dashboard-theme" as dashboard;
 @use "./app/datasets/datafiles/datafiles-theme" as datafiles;
@@ -301,9 +298,6 @@ $theme: custom-light-theme(
 @include mat.all-component-themes($theme);
 @include app.theme($theme);
 @include app-header.theme($theme);
-@include login-header.theme($theme);
-@include anonymous-details.theme($theme);
-@include anonymous-details-dashboard.theme($theme);
 @include batch-view.theme($theme);
 @include dashboard.theme($theme);
 @include datafiles.theme($theme);

CI/RFI/theme.scss

@@ -3,9 +3,6 @@
 @use '~@angular/material' as mat;
 @use "./app/app-theme" as app;
 @use "./app/_layout/app-header/app-header-theme" as app-header;
-@use "./app/_layout/login-header/login-header-theme" as login-header;
-@use "./app/datasets/anonymous-details/anonymous-details-theme" as anonymous-details;
-@use "./app/datasets/anonymous-details-dashboard/anonymous-details-dashboard-theme" as anonymous-details-dashboard;
 @use "./app/datasets/batch-view/batch-view-theme" as batch-view;
 @use "./app/datasets/dashboard/dashboard-theme" as dashboard;
 @use "./app/datasets/datafiles/datafiles-theme" as datafiles;
@@ -255,9 +252,6 @@ $theme: custom-light-theme(
 @include mat.all-component-themes($theme);
 @include app.theme($theme);
 @include app-header.theme($theme);
-@include login-header.theme($theme);
-@include anonymous-details.theme($theme);
-@include anonymous-details-dashboard.theme($theme);
 @include batch-view.theme($theme);
 @include dashboard.theme($theme);
 @include datafiles.theme($theme);

cypress/integration/datasets-public.spec.js

@@ -27,8 +27,9 @@ describe("Datasets", () => {
 
       cy.wait("@fetch");
 
-      cy.get(".mat-row")
-        .contains("Cypress Dataset")
+      cy.wait(5000);
+
+      cy.contains(".mat-row", "Cypress Dataset")
         .click();
 
       cy.wait("@fetch");

cypress/integration/users-login.spec.js

@@ -9,7 +9,7 @@ describe("Users Login", () => {
 
     cy.visit("/");
 
-    cy.url().should("include", "/anonymous/datasets");
+    cy.url().should("include", "/datasets");
 
     cy.wait(5000);
 
@@ -37,7 +37,7 @@ describe("Users Login", () => {
 
     cy.visit("/");
 
-    cy.url().should("include", "/anonymous/datasets");
+    cy.url().should("include", "/datasets");
 
     cy.wait(5000);
 

src/app/_layout/app-header/app-header.component.html

@@ -1,12 +1,12 @@
 <div class="header">
   <mat-menu #userMenu="matMenu">
     <button mat-menu-item routerLink="/datasets/">
-      <mat-icon> folder </mat-icon>
+      <mat-icon> folder</mat-icon>
       <span>Datasets</span>
     </button>
 
     <button mat-menu-item routerLink="/files/">
-      <mat-icon> text_snippet </mat-icon>
+      <mat-icon> text_snippet</mat-icon>
       <span>Files</span>
     </button>
 
@@ -17,61 +17,61 @@
 
     <ng-container *ngIf="appConfig.jobsEnabled">
       <button mat-menu-item routerLink="/user/jobs">
-        <mat-icon> transfer_within_a_station </mat-icon>
+        <mat-icon> transfer_within_a_station</mat-icon>
         <span>Jobs</span>
       </button>
     </ng-container>
 
     <ng-container *ngIf="appConfig.logbookEnabled">
       <button mat-menu-item routerLink="/logbooks/">
-        <mat-icon> book </mat-icon>
+        <mat-icon> book</mat-icon>
         <span>Logbooks</span>
       </button>
     </ng-container>
 
     <ng-container *ngIf="appConfig.policiesEnabled">
       <button mat-menu-item routerLink="/policies/">
-        <mat-icon> cloud_download </mat-icon>
+        <mat-icon> cloud_download</mat-icon>
         <span>Policies</span>
       </button>
     </ng-container>
 
     <button mat-menu-item routerLink="/proposals/">
-      <mat-icon> spa </mat-icon>
+      <mat-icon> spa</mat-icon>
       <span>Proposals</span>
     </button>
 
     <button mat-menu-item routerLink="/publishedDatasets/">
-      <mat-icon> chrome_reader_mode </mat-icon>
+      <mat-icon> chrome_reader_mode</mat-icon>
       <span>Published Data</span>
     </button>
 
     <button mat-menu-item routerLink="/samples/">
-      <mat-icon> center_focus_weak </mat-icon>
+      <mat-icon> center_focus_weak</mat-icon>
       <span>Samples</span>
     </button>
 
     <button mat-menu-item routerLink="/user/">
-      <mat-icon> settings </mat-icon>
+      <mat-icon> settings</mat-icon>
       <span>Settings</span>
     </button>
 
     <button mat-menu-item (click)="logout()">
-      <mat-icon> exit_to_app </mat-icon>
+      <mat-icon> exit_to_app</mat-icon>
       <span>Logout</span>
     </button>
   </mat-menu>
 
   <mat-toolbar class="mat-elevation-z1" color="primary">
     <a [routerLink]="['/datasets']">
-      <img class="logo" src="../../../assets/images/scicat-logo-white.png" />
+      <img class="logo" src="../../../assets/images/scicat-logo-white.png"/>
     </a>
     <a [routerLink]="['/datasets']">
       <ng-template [ngIf]="facility === 'ESS'" [ngIfElse]="otherFacility">
-        <img class="logo" src="../../../assets/images/esslogo-white.png" />
+        <img class="logo" src="../../../assets/images/esslogo-white.png"/>
       </ng-template>
       <ng-template #otherFacility>
-        <img class="logo" src="../../../assets/images/site-logo.png" />
+        <img class="logo" src="../../../assets/images/site-logo.png"/>
       </ng-template>
     </a>
     <a class="toplink" [routerLink]="['/datasets']">
@@ -96,29 +96,39 @@ <h6>
         >
       </h6>
     </span>
-
-    <span *ngIf="appConfig.shoppingCartOnHeader" [matMenuTriggerFor]="cartMenu">
-      <button
-        id="cartOnHeaderButton"
-        mat-icon-button
-        matBadge="{{ inBatchIndicator === '0' ? null : inBatchIndicator }}"
-        matBadgePosition="after"
-        matBadgeColor="accent"
-        matBadgeSize="medium"
-      >
-        <mat-icon> shopping_cart </mat-icon>
-      </button>
+    <span *ngIf="(this.loggedIn$ | async) === false;else userButton">
+      <h6>
+        <a class="toplink" [routerLink]="['/login']" data-cy="login-button">
+          <mat-icon> account_circle </mat-icon>
+          <span class="large-screen-text">Sign in</span>
+        </a>
+      </h6>
     </span>
+    <ng-template #userButton>
+      <span *ngIf="appConfig.shoppingCartOnHeader" [matMenuTriggerFor]="cartMenu">
+        <button
+          id="cartOnHeaderButton"
+          mat-icon-button
+          matBadge="{{ inBatchIndicator === '0' ? null : inBatchIndicator }}"
+          matBadgePosition="after"
+          matBadgeColor="accent"
+          matBadgeSize="medium"
+        >
+          <mat-icon> shopping_cart </mat-icon>
+        </button>
+      </span>
+
+        <mat-menu class="custom-menu" #cartMenu="matMenu">
+          <batch-card></batch-card>
+        </mat-menu>
+
+        <span>
+        <button mat-button class="user-button" [matMenuTriggerFor]="userMenu">
+          <img class="user-image" src="{{ profileImage }}"/>
+          <div class="large-screen-text">{{ username }}</div>
+        </button>
+      </span>
+    </ng-template>
 
-    <mat-menu class="custom-menu" #cartMenu="matMenu">
-      <batch-card></batch-card>
-    </mat-menu>
-
-    <span>
-      <button mat-button class="user-button" [matMenuTriggerFor]="userMenu">
-        <img class="user-image" src="{{ profileImage }}" />
-        <div class="large-screen-text">{{ username }}</div>
-      </button>
-    </span>
   </mat-toolbar>
 </div>

src/app/_layout/app-header/app-header.component.scss

@@ -5,20 +5,24 @@
   z-index: 1000;
 
   mat-toolbar {
-    height: 7vh;
+    height: 3.5rem;
 
-    .logo {
-      height: 4vh;
-      margin-right: 1em;
-      padding-top: 0.5vh;
+    a {
+      height: 2.5rem;
+      padding: 0.5rem;
+
+      .logo {
+        height: 100%;
+        margin-right: 0.5rem;
+      }
     }
 
     .spacer {
       flex: 1 1 auto;
     }
 
     .toplink {
-      padding: 10px;
+      padding: 0.5rem 1rem;
       font: bold;
       font-size: 11pt;
 
@@ -32,11 +36,11 @@
     }
 
     .user-button {
-      font-size: 11px;
-      line-height: 20px;
+      font-size: 0.75rem;
+      line-height: 1rem;
 
       .user-image {
-        height: 3vh;
+        height: 2rem;
       }
     }
   }

src/app/_layout/app-header/app-header.component.ts

@@ -9,7 +9,8 @@ import { Subscription } from "rxjs";
 import {
   getCurrentUserAccountType,
   getCurrentUser,
-  getProfile
+  getProfile,
+  getIsLoggedIn
 } from "state-management/selectors/user.selectors";
 import { getDatasetsInBatch } from "state-management/selectors/datasets.selectors";
 
@@ -29,6 +30,7 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   inBatchPids: string[] = [];
   inBatchCount = 0;
   inBatchIndicator = "";
+  loggedIn$ = this.store.pipe(select(getIsLoggedIn));
 
   constructor(
     private store: Store<any>,

src/app/_layout/app-layout/app-layout.component.html

@@ -1,10 +1,10 @@
 <div
   [class.dark-theme]="darkTheme$ | async"
   [class.light-theme]="(darkTheme$ | async) === false"
+  [ngClass]="{'anonymous-site' : (loggedIn$ | async) === false}"
 >
   <app-app-header></app-app-header>
   <div class="main">
-    <breadcrumb></breadcrumb>
     <router-outlet></router-outlet>
   </div>
 </div>

src/app/_layout/app-layout/app-layout.component.scss

@@ -1,4 +1,4 @@
 .main {
-  height: 95vh;
-  padding: 1.5em;
+  height: 100%;
+  min-height: calc(100vh - 3.5rem);
 }