ZanelleKM · ZanelleKM · Aug 29, 2024 · Sep 15, 2022 · Sep 16, 2022 · Sep 27, 2022
diff --git a/Dockerfile b/Dockerfile
@@ -1,7 +1,7 @@
 # This image will be published as dspace/dspace-angular
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details
 
-FROM node:14-alpine
+FROM harbor.sdp.kat.ac.za/dockerhub_proxy/library/node:14-alpine
 WORKDIR /app
 ADD . /app/
 EXPOSE 4000

diff --git a/README.md b/README.md
@@ -227,6 +227,21 @@ After building the app for production, it can be started by running:
 yarn run serve:ssr
 ```
 
+### Building an image and pushing to harbor
+NOTE: we want to build a docker image with the new UI and push it to harbor.
+
+``` bash
+  # first login to harbor or verify that you are logged in:
+  docker login harbor.sdp.kat.ac.za
+
+  #build image and tag (-t) it, note the . at the end which means to use the Dockerfile in the local directory
+  docker build -t harbor.sdp.kat.ac.za/sdp-services/dspace-angular .
+
+  # push image to harbor
+  docker push harbor.sdp.kat.ac.za/sdp-services/dspace-angular
+
+```
+
 ### Running the application with Docker
 NOTE: At this time, we do not have production-ready Docker images for DSpace.
 That said, we do have quick-start Docker Compose scripts for development or testing purposes.
@@ -330,9 +345,9 @@ All E2E tests must be created under the `./cypress/integration/` folder, and mus
 * In the [Cypress Test Runner](https://docs.cypress.io/guides/core-concepts/test-runner), you'll Cypress automatically visit the page.  This first test will succeed, as all you are doing is making sure the _page exists_.
 * From here, you can use the [Selector Playground](https://docs.cypress.io/guides/core-concepts/test-runner#Selector-Playground) in the Cypress Test Runner window to determine how to tell Cypress to interact with a specific HTML element on that page.
     * Most commands start by telling Cypress to [get()](https://docs.cypress.io/api/commands/get) a specific element, using a CSS or jQuery style selector
-      * It's generally best not to rely on attributes like `class` and `id` in tests, as those are likely to change later on. Instead, you can add a `data-test` attribute to makes it clear that it's required for a test. 
+      * It's generally best not to rely on attributes like `class` and `id` in tests, as those are likely to change later on. Instead, you can add a `data-test` attribute to makes it clear that it's required for a test.
     * Cypress can then do actions like [click()](https://docs.cypress.io/api/commands/click) an element, or [type()](https://docs.cypress.io/api/commands/type) text in an input field, etc.
-      * When running with server-side rendering enabled, the client first receives HTML without the JS; only once the page is rendered client-side do some elements (e.g. a button that toggles a Bootstrap dropdown) become fully interactive. This can trip up Cypress in some cases as it may try to `click` or `type` in an element that's not fully loaded yet, causing tests to fail. 
+      * When running with server-side rendering enabled, the client first receives HTML without the JS; only once the page is rendered client-side do some elements (e.g. a button that toggles a Bootstrap dropdown) become fully interactive. This can trip up Cypress in some cases as it may try to `click` or `type` in an element that's not fully loaded yet, causing tests to fail.
       * To work around this issue, define the attributes you use for Cypress selectors as `[attr.data-test]="'button' | ngBrowserOnly"`. This will only show the attribute in CSR HTML, forcing Cypress to wait until CSR is complete before interacting with the element.
     * Cypress can also validate that something occurs, using [should()](https://docs.cypress.io/api/commands/should) assertions.
 * Any time you save your test file, the Cypress Test Runner will reload & rerun it. This allows you can see your results quickly as you write the tests & correct any broken tests rapidly.

diff --git a/angular.json b/angular.json
@@ -22,7 +22,10 @@
               "path": "./webpack/webpack.browser.ts",
               "mergeStrategies": {
                 "loaders": "prepend"
-              }
+              },
+              "allowedCommonJsDependencies": [
+                "@grapecity/gcpdfviewer"
+              ]
             },
             "allowedCommonJsDependencies": [
               "angular2-text-mask",
@@ -96,8 +99,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "3mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "8mb",
+                  "maximumError": "10mb"
                 },
                 {
                   "type": "anyComponentStyle",

diff --git a/config/config.yml b/config/config.yml
@@ -1,12 +1,12 @@
 rest:
-  ssl: false
-  host: dspace7.sdp.kat.ac.za
-  port: 8080
-  nameSpace: /server
   # ssl: false
   # host: dspace7.sdp.kat.ac.za
   # port: 8080
   # nameSpace: /server
+  ssl: false
+  host: dspace7.sdp.kat.ac.za
+  port: 8080
+  nameSpace: /server
   # ssl: true
   # host: api7.dspace.org
   # port: 443

diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
   },
   "private": true,
   "resolutions": {
+    "@types/react": "^18.0.20",
     "minimist": "^1.2.5",
     "webdriver-manager": "^12.1.8",
     "ts-node": "10.2.1"
@@ -112,10 +113,12 @@
     "ng-mocks": "^13.1.1",
     "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.3",
+    "ng2-pdf-viewer": "^9.1.2",
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
     "ngx-sortablejs": "^11.1.0",
+    "ngx-ui-switch": "^11.0.1",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^9.1.0",
@@ -128,8 +131,7 @@
     "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5",
-    "ngx-ui-switch": "^11.0.1"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~13.1.0",
@@ -139,7 +141,7 @@
     "@angular-eslint/eslint-plugin-template": "13.1.0",
     "@angular-eslint/schematics": "13.1.0",
     "@angular-eslint/template-parser": "13.1.0",
-    "@angular/cli": "~13.2.6",
+    "@angular/cli": "^14.2.3",
     "@angular/compiler-cli": "~13.2.6",
     "@angular/language-service": "~13.2.6",
     "@cypress/schematic": "^1.5.0",

diff --git a/src/app/about-page/about-page.module.ts b/src/app/about-page/about-page.module.ts
@@ -3,11 +3,6 @@ import { NgModule } from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
 import { AboutPageComponent } from './about-page.component';
 import { AboutPageRoutingModule } from './about-page.routing.module';
-// import { CommunityListPageRoutingModule } from './community-list-page.routing.module';
-// import { CommunityListComponent } from './community-list/community-list.component';
-// import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
-// import { ThemedCommunityListComponent } from './community-list/themed-community-list.component';
-
 
 const DECLARATIONS = [
   AboutPageComponent,

diff --git a/src/app/about-page/themed-about-page.component.ts b/src/app/about-page/themed-about-page.component.ts
@@ -2,9 +2,6 @@ import { Component } from '@angular/core';
 import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { AboutPageComponent } from './about-page.component';
 
-/**
- * Themed wrapper for CommunityListPageComponent
- */
 @Component({
   selector: 'ds-themed-about-page',
   styleUrls: [],
@@ -22,5 +19,4 @@ export class ThemedAboutPageComponent extends ThemedComponent<AboutPageComponent
   protected importUnthemedComponent(): Promise<any> {
     return import(`./about-page.component`);
   }
-
 }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -78,6 +78,12 @@ import { ThemedPageErrorComponent } from './page-error/themed-page-error.compone
               .then((m) => m.AboutPageModule),
             canActivate: [EndUserAgreementCurrentUserGuard]
           },
+          {
+            path: 'help',
+            loadChildren: () => import('./help-guide/help-guide.module')
+              .then((m) => m.HelpPageModule),
+            canActivate: [EndUserAgreementCurrentUserGuard]
+          },
           {
             path: 'id',
             loadChildren: () => import('./lookup-by-id/lookup-by-id.module')

diff --git a/src/app/help-guide/help-guide.component.html b/src/app/help-guide/help-guide.component.html
@@ -0,0 +1,4 @@
+<div >
+    <iframe src="assets/pdf/helpGuide.pdf" type="application/pdf" width="100%" height="100%" style="overflow: auto;">
+    </iframe>
+</div>
diff --git a/src/app/help-guide/help-guide.component.scss b/src/app/help-guide/help-guide.component.scss
@@ -0,0 +1,3 @@
+body, iframe {
+  height:100vh;
+}
diff --git a/src/app/help-guide/help-guide.component.ts b/src/app/help-guide/help-guide.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'viewer',
+  styleUrls: ['help-guide.component.scss'],
+  templateUrl: './help-guide.component.html',
+})
+export class HelpPageComponent {
+}
diff --git a/src/app/help-guide/help-guide.module.ts b/src/app/help-guide/help-guide.module.ts
@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { HelpPageComponent } from './help-guide.component';
+import { HelpPageRoutingModule } from './help-guide.routing.module';
+import { PdfViewerModule } from 'ng2-pdf-viewer'
+
+const DECLARATIONS = [
+  HelpPageComponent,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    HelpPageRoutingModule,
+    PdfViewerModule
+  ],
+  declarations: [
+    ...DECLARATIONS
+  ],
+  exports: [
+    ...DECLARATIONS,
+  ],
+})
+export class HelpPageModule {
+
+}
diff --git a/src/app/help-guide/help-guide.routing.module.ts b/src/app/help-guide/help-guide.routing.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CdkTreeModule } from '@angular/cdk/tree';
+
+import { ThemedHelpPageComponent } from './themed-help-guide.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+
+/**
+ * RouterModule to help navigate to the page with the community list tree
+ */
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: ThemedHelpPageComponent,
+        pathMatch: 'full',
+        resolve: {
+          breadcrumb: I18nBreadcrumbResolver
+        },
+        data: { title: 'help.tabTitle', breadcrumbKey: 'help' }
+      }
+    ]),
+    CdkTreeModule,
+  ],
+})
+export class HelpPageRoutingModule {
+}
diff --git a/src/app/help-guide/themed-help-guide.component.ts b/src/app/help-guide/themed-help-guide.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { HelpPageComponent } from './help-guide.component';
+
+@Component({
+  selector: 'ds-themed-help-page',
+  styleUrls: [],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHelpPageComponent extends ThemedComponent<HelpPageComponent> {
+  protected getComponentName(): string {
+    return 'HelpPageComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/help-guide/help-guide.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./help-guide.component`);
+  }
+}
diff --git a/src/app/menu.resolver.ts b/src/app/menu.resolver.ts
@@ -112,6 +112,17 @@ export class MenuResolver implements Resolve<boolean> {
           text: `menu.section.browse_global_about`,
           link: `/about`
         } as LinkMenuItemModel
+      },
+      {
+        id: `browse_global_help`,
+        active: false,
+        visible: true,
+        index: 0,
+        model: {
+          type: MenuItemType.LINK,
+          text: `menu.section.browse_global_help`,
+          link: `/help`
+        } as LinkMenuItemModel
       }
     ];
     // Read the different Browse-By types from config and add them to the browse menu

diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
@@ -2581,6 +2581,8 @@
 
   "menu.section.browse_global_about": "About Us",
 
+  "menu.section.browse_global_help": "Help Guide",
+
   "menu.section.browse_global_by_author": "By Author",
 
   "menu.section.browse_global_by_dateissued": "By Issue Date",
@@ -2705,6 +2707,8 @@
 // About Us Menu option
   "menu.section.about": "About Us",
 
+  "menu.section.help": "Help Guide",
+
   "menu.section.about_task": "Statistics Task",
 
 
@@ -3662,6 +3666,10 @@
 
   "about.breadcrumbs": "About Us",
 
+  "help.title": "Help Guide",
+
+  "help.breadcrumbs": "Help Guide",
+
   // "statistics.table.title.TotalVisitsPerMonth": "Total visits per month",
   //
   // "statistics.table.title.TotalDownloads": "File Visits",

diff --git a/src/assets/pdf/helpGuide.pdf b/src/assets/pdf/helpGuide.pdf
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
@@ -7,16 +7,11 @@
     </div>
     <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
       <ds-search-navbar class="navbar-search"></ds-search-navbar>
-      <!-- <ds-lang-switch></ds-lang-switch> -->
-      <!-- <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu> -->
-      <!-- <ds-impersonate-navbar></ds-impersonate-navbar> -->
-      <!-- <div class="pl-2"> -->
         <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
                 aria-controls="collapsingNav"
                 aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
           <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
         </button>
-      <!-- </div> -->
     </div>
   </nav>
   <ds-themed-navbar></ds-themed-navbar>

diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.scss b/src/themes/dspace/app/home-page/home-news/home-news.component.scss
@@ -47,8 +47,6 @@
       left: 0;
       width: 100%;
       height: 100%;
-      // object-fit: cover;
-      // object-position: top;
     }
 
     .title {
@@ -80,7 +78,6 @@
       &:before {
         background: linear-gradient(to left, var(--ds-banner-content-background), transparent);
         left: calc(-1 * var(--ds-banner-background-gradient-width));
-
       }
 
       &:after {