Merge branch 'master' into w2p-62849_relationships-in-submission

.gitignore

@@ -5,6 +5,8 @@
 /tsd_typings/
 npm-debug.log
 
+/build/
+
 /config/environment.dev.js
 /config/environment.prod.js
 

config/environment.default.js

@@ -13,7 +13,7 @@ module.exports = {
     host: 'dspace7.4science.cloud',
     port: 443,
     // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
-    nameSpace: '/dspace-spring-rest/api'
+    nameSpace: '/server/api'
   },
   // Caching settings
   cache: {
@@ -180,5 +180,8 @@ module.exports = {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
+  },
+  theme: {
+    name: 'default',
   }
 };

package.json

@@ -17,15 +17,16 @@
     "clean:doc": "rimraf doc",
     "clean:log": "rimraf *.log*",
     "clean:json": "rimraf *.records.json",
+    "clean:bld": "rimraf build",
     "clean:node": "rimraf node_modules",
-    "clean:prod": "yarn run clean:coverage && yarn run clean:doc && yarn run clean:dist && yarn run clean:log && yarn run clean:json",
+    "clean:prod": "yarn run clean:coverage && yarn run clean:doc && yarn run clean:dist && yarn run clean:log && yarn run clean:json && yarn run clean:bld",
     "clean": "yarn run clean:prod && yarn run clean:node",
-    "prebuild": "yarn run clean:dist",
+    "prebuild": "yarn run clean:bld && yarn run clean:dist",
     "prebuild:aot": "yarn run prebuild",
     "prebuild:prod": "yarn run prebuild",
-    "build": "node ./webpack/run-webpack.js --progress --mode development",
+    "build": "node ./scripts/webpack.js --progress --mode development",
-    "build:aot": "node ./webpack/run-webpack.js --env.aot --env.server --mode development && node ./webpack/run-webpack.js --env.aot --env.client --mode development",
+    "build:aot": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
-    "build:prod": "node ./webpack/run-webpack.js --env.aot --env.server --mode production && node ./webpack/run-webpack.js --env.aot --env.client --mode production",
+    "build:prod": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
     "postbuild:prod": "yarn run rollup",
     "rollup": "rollup -c rollup.config.js",
     "prestart": "yarn run build:prod",
@@ -40,7 +41,8 @@
     "server": "node dist/server.js",
     "server:watch": "nodemon dist/server.js",
     "server:watch:debug": "nodemon --debug dist/server.js",
-    "webpack:watch": "node ./webpack/run-webpack.js -w --mode development",
+    "syncbuilddir": "node ./scripts/sync-build-dir.js",
+    "webpack:watch": "node ./scripts/webpack.js -w --mode development",
     "watch": "yarn run build && npm-run-all -p webpack:watch server:watch",
     "watch:debug": "yarn run build && npm-run-all -p webpack:watch server:watch:debug",
     "predebug": "yarn run build",
@@ -94,6 +96,7 @@
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
     "core-js": "^2.5.7",
+    "debug-loader": "^0.0.1",
     "express": "4.16.2",
     "express-session": "1.15.6",
     "fast-json-patch": "^2.0.7",
@@ -121,6 +124,7 @@
     "reflect-metadata": "0.1.12",
     "rxjs": "6.2.2",
     "rxjs-spy": "^7.5.1",
+    "sass-resources-loader": "^2.0.0",
     "sortablejs": "1.7.0",
     "text-mask-core": "5.0.1",
     "ts-loader": "^5.2.1",
@@ -164,6 +168,7 @@
     "codelyzer": "^4.4.4",
     "compression-webpack-plugin": "^1.1.6",
     "copy-webpack-plugin": "^4.4.1",
+    "copyfiles": "^2.1.0",
     "coveralls": "3.0.0",
     "css-loader": "1.0.0",
     "cssnano": "^4.1.10",
@@ -214,7 +219,7 @@
     "script-ext-html-webpack-plugin": "2.0.1",
     "source-map": "0.7.3",
     "source-map-loader": "0.2.4",
-    "string-replace-loader": "2.1.1",
+    "string-replace-loader": "^2.1.1",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
     "ts-node": "4.1.0",
@@ -225,6 +230,7 @@
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "3.2.0",
     "webpack-dev-server": "^3.1.5",
+    "webpack-import-glob-loader": "^1.6.3",
     "webpack-merge": "4.1.4",
     "webpack-node-externals": "1.7.2"
   }

resources/i18n/en.json

@@ -109,6 +109,16 @@
       "link": {
         "simple": "Simple item page",
         "full": "Full item page"
+      },
+      "journal": {
+        "search": {
+          "title": "Articles in this journal"
+        }
+      },
+      "person": {
+        "search": {
+          "title": "Articles by this author"
+        }
       }
     },
     "select": {

resources/images/dspace-logo-monochrome.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="231.893px" height="167.458px" viewBox="0 0 231.893 167.458" enable-background="new 0 0 231.893 167.458"
+	 xml:space="preserve">
+<path fill="#43515F" d="M51.733,143.32c0-1.94,1.65-3.202,4.562-3.202c3.303,0,6.798,1.115,9.419,3.543l3.835-5.146
+	c-3.202-2.963-7.476-4.516-12.621-4.516c-7.622,0-12.284,4.467-12.284,9.855c0,12.188,18.644,8.254,18.644,13.887
+	c0,1.893-1.797,3.592-5.632,3.592c-4.466,0-8.011-2.039-10.292-4.418l-3.787,5.39c3.058,3.059,7.525,5.153,13.788,5.153
+	c8.691,0,12.964-4.474,12.964-10.396C70.329,144.971,51.733,148.418,51.733,143.32z M100.682,134.484H85.534v32.386h6.895v-11.557
+	h8.254c6.99,0,10.875-4.759,10.875-10.391C111.558,139.243,107.722,134.484,100.682,134.484z M99.71,149.245h-7.283v-8.69h7.283
+	c2.72,0,4.808,1.651,4.808,4.368C104.518,147.592,102.43,149.245,99.71,149.245z M180.759,140.067c3.302,0,6.215,2.09,7.573,4.71
+	l5.923-2.913c-2.28-4.078-6.407-7.914-13.496-7.914c-9.759,0-17.283,6.75-17.283,16.75c0,9.954,7.524,16.76,17.283,16.76
+	c7.089,0,11.216-3.94,13.496-7.971l-5.923-2.865c-1.358,2.623-4.271,4.711-7.573,4.711c-5.924,0-10.194-4.517-10.194-10.635
+	C170.564,144.583,174.835,140.067,180.759,140.067z M131.958,134.484l-12.485,32.386h7.823l2.04-5.486h13.887l2.038,5.486h7.816
+	l-12.479-32.386H131.958z M131.228,155.313l5.05-13.936l5.05,13.936H131.228z M231.892,140.553v-6.069h-22.916v32.386h22.916v-6.07
+	H215.87v-7.379h15.684v-6.069H215.87v-6.797L231.892,140.553L231.892,140.553z"/>
+<path fill="#43515F" d="M29.956,150.652c0-9.71-7.04-16.168-17.187-16.168H0v32.386h12.817
+	C22.916,166.87,29.956,160.458,29.956,150.652z M12.769,160.799H6.894v-20.246h5.924c6.603,0,10.098,4.418,10.098,10.099
+	C22.916,156.187,19.177,160.799,12.769,160.799z"/>
+<path fill="#43515F" d="M120.726,58.569l0.109-0.006l0.116-0.01l0.106-0.013l0.11-0.01l0.11-0.023l0.109-0.019l0.106-0.023
+	l0.106-0.029l0.105-0.023l0.106-0.033l0.103-0.034l0.097-0.035l0.104-0.04l0.101-0.042l0.1-0.042v-0.001l0.096-0.045l0,0
+	l0.095-0.044l0.097-0.049l0.091-0.056v-0.001l0.094-0.05v-0.002l0.09-0.056v-0.001l0.093-0.06l0.083-0.056v-0.001l0.085-0.063
+	l0.088-0.065v-0.002l0.087-0.062v-0.001c0.816-0.683,1.393-1.646,1.561-2.738l0.013-0.104V54.72l0.014-0.101v-0.011l0.009-0.098
+	v-0.012l0.009-0.101V54.38l0.005-0.095v-0.016l0.002-0.105v-16.46l-0.002-0.105v-0.016l-0.005-0.095v-0.013l-0.009-0.101v-0.012
+	l-0.009-0.098v-0.011l-0.014-0.1v-0.01l-0.013-0.104c-0.167-1.092-0.744-2.057-1.561-2.738V34.3l-0.087-0.063v-0.002l-0.088-0.065
+	l-0.085-0.063v-0.001l-0.083-0.056l-0.093-0.061l0,0l-0.09-0.056V33.93l-0.094-0.05v-0.001l-0.091-0.056l-0.097-0.049l-0.095-0.043
+	V33.73l-0.096-0.045v-0.001l-0.1-0.043l-0.101-0.042l-0.104-0.04l-0.097-0.035l-0.103-0.031l-0.106-0.036l-0.105-0.023l-0.106-0.028
+	l-0.106-0.024l-0.109-0.019l-0.11-0.023l-0.11-0.009l-0.106-0.014l-0.116-0.01l-0.109-0.006l-0.114-0.005h-7.89
+	c-9.716,0-15.858-7.838-15.858-17.15V6.92c0-3.812-3.102-6.915-6.914-6.915H74.085c-3.813,0-6.92,3.106-6.92,6.915v16.682
+	c0,3.806,3.104,6.909,6.92,6.909h8.414c9.169,0,16.906,5.95,17.146,15.403v0.04c-0.24,9.453-7.978,15.402-17.146,15.402h-8.414
+	c-3.815,0-6.92,3.103-6.92,6.909v16.682c0,3.81,3.106,6.915,6.92,6.915H89.95c3.812,0,6.914-3.104,6.914-6.915v-9.223
+	c0-9.312,6.144-17.149,15.858-17.149h7.89L120.726,58.569z M154.772,9.956C148.631,3.814,140.15,0,130.816,0h-15.024v17.424h15.024
+	c4.526,0,8.647,1.858,11.64,4.849c2.99,2.99,4.849,7.112,4.849,11.639v24.042c0,4.538-1.853,8.665-4.832,11.655l-0.017-0.016
+	c-2.991,2.991-7.113,4.849-11.64,4.849h-15.024v17.424h15.024c9.333,0,17.814-3.814,23.956-9.956v-0.033
+	c6.142-6.143,9.955-14.614,9.955-23.923V33.912C164.727,24.578,160.914,16.097,154.772,9.956z"/>
+</svg>

scripts/sync-build-dir.js

@@ -0,0 +1,22 @@
+const syncBuildDir = require('copyfiles');
+const path = require('path');
+const {
+  projectRoot,
+  theme,
+  themePath,
+} = require('../webpack/helpers');
+
+const projectDepth = projectRoot('./').split(path.sep).length;
+
+let callback;
+
+if (theme !== null && theme !== undefined) {
+  callback = () => {
+    syncBuildDir([path.join(themePath, '**/*'), 'build'], { up: projectDepth + 2 }, () => {})
+  }
+}
+else {
+  callback = () => {};
+}
+
+syncBuildDir([projectRoot('src/**/*'), 'build'], { up: projectDepth + 1 }, callback);

src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }

src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }

src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+admin/admin-sidebar/admin-sidebar.component.html

@@ -1,4 +1,4 @@
-<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
+<nav @slideHorizontal class="navbar navbar-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
      value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),

src/app/+admin/admin-sidebar/admin-sidebar.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 $icon-z-index: 10;
 
 :host {
@@ -8,6 +6,7 @@ $icon-z-index: 10;
     height: 100vh;
     flex: 1 1 auto;
     nav {
+        background-color: $admin-sidebar-bg;
         height: 100%;
         flex-direction: column;
         > div {
@@ -44,7 +43,7 @@ $icon-z-index: 10;
                 .sidebar-section {
                     display: flex;
                     align-content: stretch;
-                    background-color: $dark;
+                    background-color: $admin-sidebar-bg;
                     .nav-item {
                         padding-top: $spacer;
                         padding-bottom: $spacer;

src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 ::ng-deep {
     .fa-chevron-right {
         padding-left: $spacer/2;

src/app/+collection-page/collection-page.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/+community-page/community-page.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/+home-page/home-news/home-news.component.scss

@@ -1,16 +1,14 @@
-@import '../../../styles/variables.scss';
-
 :host {
-  display: block;
+    display: block;
-  margin-top: -$content-spacing;
+    margin-top: -$content-spacing;
-  margin-bottom: -$content-spacing;
+    margin-bottom: -$content-spacing;
 }
 
 .display-3 {
-  word-break: break-word;
+    word-break: break-word;
 }
 
 .dspace-logo {
-  height: 110px;
+    height: 110px;
-  width: 110px;
+    width: 110px;
-}
+}

src/app/+home-page/home-page.component.scss

@@ -1 +1,2 @@
-@import '../../styles/variables.scss';
+:host {
+}

src/app/+item-page/edit-item-page/edit-item-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .btn {
     min-width: $edit-item-button-min-width;
 }

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss

@@ -1,4 +1,3 @@
-@import '../../../../../styles/variables.scss';
 .btn[disabled] {
     color: $gray-600;
     border-color: $gray-600;

src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .button-row {
     .btn {
         margin-right: 0.5 * $spacer;

src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 :host {
   .simple-view-element {
     margin-bottom: 15px;

src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/field-components/metadata-values/metadata-values.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';

src/app/+item-page/full/field-components/file-section/full-file-section.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-@import '../../../../../styles/mixins';
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;

src/app/+item-page/full/full-item-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 :host {
     div.simple-view-link {
         text-align: center;

src/app/+item-page/simple/item-types/publication/publication.component.ts

@@ -7,7 +7,7 @@ import {
 } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../shared/item.component';
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
-import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../shared/item-relationships-utils';
 
 @rendersItemType('Publication', ItemViewMode.Full)
 @rendersItemType(DEFAULT_ITEM_TYPE, ItemViewMode.Full)
@@ -46,18 +46,15 @@ export class PublicationComponent extends ItemComponent implements OnInit {
       this.authors$ = this.buildRepresentations('Person', 'dc.contributor.author');
 
       this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isProjectOfPublication'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfPublication')
-        relationsToItems(this.item.id)
       );
 
       this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfPublication'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfPublication')
-        relationsToItems(this.item.id)
       );
 
       this.journalIssues$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalIssueOfPublication'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalIssueOfPublication')
-        relationsToItems(this.item.id)
       );
 
     }

src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts

@@ -2,16 +2,19 @@ import { ItemMetadataRepresentation } from '../../../../core/shared/metadata-rep
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
 import { MetadatumRepresentation } from '../../../../core/shared/metadata-representation/metadatum/metadatum-representation.model';
 import { MetadataValue } from '../../../../core/shared/metadata.models';
-import { getSucceededRemoteData } from '../../../../core/shared/operators';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
-import { hasValue } from '../../../../shared/empty.util';
+import { hasNoValue, hasValue } from '../../../../shared/empty.util';
 import { Observable } from 'rxjs/internal/Observable';
 import { Relationship } from '../../../../core/shared/item-relationships/relationship.model';
 import { RelationshipType } from '../../../../core/shared/item-relationships/relationship-type.model';
-import { distinctUntilChanged, filter, flatMap, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, flatMap, map, switchMap } from 'rxjs/operators';
-import { of as observableOf, zip as observableZip, combineLatest as observableCombineLatest } from 'rxjs';
+import {
+  combineLatest as observableCombineLatest,
+  of as observableOf,
+  zip as observableZip
+} from 'rxjs';
 import { ItemDataService } from '../../../../core/data/item-data.service';
 import { Item } from '../../../../core/shared/item.model';
-import { RemoteData } from '../../../../core/data/remote-data';
 import { RelationshipService } from '../../../../core/data/relationship.service';
 
 /**
@@ -44,23 +47,36 @@ export const compareArraysUsingIds = <T extends { id: string }>() =>
 /**
  * Fetch the relationships which match the type label given
  * @param {string} label      Type label
+ * @param thisId              The item's id of which the relations belong to
  * @returns {(source: Observable<[Relationship[] , RelationshipType[]]>) => Observable<Relationship[]>}
  */
-export const filterRelationsByTypeLabel = (label: string) =>
+export const filterRelationsByTypeLabel = (label: string, thisId?: string) =>
   (source: Observable<[Relationship[], RelationshipType[]]>): Observable<Relationship[]> =>
     source.pipe(
-      map(([relsCurrentPage, relTypesCurrentPage]) =>
+      switchMap(([relsCurrentPage, relTypesCurrentPage]) => {
-        relsCurrentPage.filter((rel: Relationship, idx: number) =>
+        const relatedItems$ = observableZip(...relsCurrentPage.map((rel: Relationship) =>
-          hasValue(relTypesCurrentPage[idx]) && (relTypesCurrentPage[idx].leftLabel === label ||
+            observableCombineLatest(
-          relTypesCurrentPage[idx].rightLabel === label)
+              rel.leftItem.pipe(getSucceededRemoteData(), getRemoteDataPayload()),
-        )
+              rel.rightItem.pipe(getSucceededRemoteData(), getRemoteDataPayload()))
-      ),
+          )
+        );
+        return relatedItems$.pipe(
+          map((arr) => relsCurrentPage.filter((rel: Relationship, idx: number) =>
+            hasValue(relTypesCurrentPage[idx]) && (
+              (hasNoValue(thisId) && (relTypesCurrentPage[idx].leftLabel === label ||
+                relTypesCurrentPage[idx].rightLabel === label)) ||
+              (thisId === arr[idx][0].id && relTypesCurrentPage[idx].leftLabel === label) ||
+              (thisId === arr[idx][1].id && relTypesCurrentPage[idx].rightLabel === label)
+            )
+          ))
+        );
+      }),
       distinctUntilChanged(compareArraysUsingIds())
     );
 
 /**
  * Operator for turning a list of relationships into a list of the relevant items
- * @param {string} thisId           The item's id of which the relations belong to
+ * @param {string} thisId       The item's id of which the relations belong to
  * @returns {(source: Observable<Relationship[]>) => Observable<Item[]>}
  */
 export const relationsToItems = (thisId: string) =>
@@ -80,10 +96,25 @@ export const relationsToItems = (thisId: string) =>
             } else if (rightItem.payload.id === thisId) {
               return leftItem.payload;
             }
-          })),
+          })
+          .filter((item: Item) => hasValue(item))
+      ),
       distinctUntilChanged(compareArraysUsingIds()),
     );
 
+/**
+ * Operator for turning a list of relationships and their relationship-types into a list of relevant items by relationship label
+ * @param thisId  The item's id of which the relations belong to
+ * @param label   The label of the relationship-type to filter on
+ * @param side    Filter only on one side of the relationship (for example: child-parent relationships)
+ */
+export const getRelatedItemsByTypeLabel = (thisId: string, label: string) =>
+  (source: Observable<[Relationship[], RelationshipType[]]>): Observable<Item[]> =>
+    source.pipe(
+      filterRelationsByTypeLabel(label, thisId),
+      relationsToItems(thisId)
+    );
+
 /**
  * Operator for turning a list of relationships into a list of metadatarepresentations given the original metadata
  * @param parentId    The id of the parent item

src/app/+item-page/simple/item-types/shared/item.component.spec.ts

@@ -104,7 +104,9 @@ export function containsFieldInput(fields: DebugElement[], metadataKey: string):
 export function createRelationshipsObservable() {
   return observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), [
     Object.assign(new Relationship(), {
-      relationshipType: observableOf(new RemoteData(false, false, true, null, new RelationshipType()))
+      relationshipType: observableOf(new RemoteData(false, false, true, null, new RelationshipType())),
+      leftItem: observableOf(new RemoteData(false, false, true, null, new Item())),
+      rightItem: observableOf(new RemoteData(false, false, true, null, new Item()))
     })
   ])));
 }

src/app/+login-page/login-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 .login-logo {
   height: $login-logo-height;
   width: $login-logo-width;

src/app/+search-page/search-page.component.scss

@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
 
 @include media-breakpoint-down(md) {
     .container {

src/app/app.component.html

@@ -9,7 +9,6 @@
         <ds-notifications-board
                 [options]="config.notifications">
         </ds-notifications-board>
-
         <main class="main-content">
             <div class="container" *ngIf="isLoading">
                 <ds-loading message="{{'loading.default' | translate}}"></ds-loading>

src/app/app.component.scss

@@ -1,4 +1,3 @@
-@import '../styles/variables.scss';
 @import '../styles/helpers/font_awesome_imports.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
 @import '../../node_modules/nouislider/distribute/nouislider.min';
@@ -48,4 +47,3 @@ ds-admin-sidebar {
   position: fixed;
   z-index: $sidebar-z-index;
 }
-

src/app/app.component.ts

@@ -27,10 +27,10 @@ import variables from '../styles/_exposed_variables.scss';
 import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
 import { MenuService } from './shared/menu/menu.service';
 import { MenuID } from './shared/menu/initial-menus-state';
-import { Observable } from 'rxjs/internal/Observable';
+import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
 import { slideSidebarPadding } from './shared/animations/slide';
-import { combineLatest as combineLatestObservable } from 'rxjs';
 import { HostWindowService } from './shared/host-window.service';
+import { Theme } from '../config/theme.inferface';
 
 @Component({
   selector: 'ds-app',
@@ -46,6 +46,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   slideSidebarOver: Observable<boolean>;
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
+  theme: Observable<Theme> = of({} as any);
 
   constructor(
     @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
@@ -58,7 +59,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private router: Router,
     private cssService: CSSVariableService,
     private menuService: MenuService,
-    private windowService: HostWindowService
+    private windowService: HostWindowService,
   ) {
     // Load all the languages that are defined as active from the config file
     translate.addLangs(config.languages.filter((LangConfig) => LangConfig.active === true).map((a) => a.code));
@@ -82,6 +83,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
+
     const env: string = this.config.production ? 'Production' : 'Development';
     const color: string = this.config.production ? 'red' : 'green';
     console.info(`Environment: %c${env}`, `color: ${color}; font-weight: bold;`);

src/app/core/core.module.ts

@@ -59,6 +59,7 @@ import { HALEndpointService } from './shared/hal-endpoint.service';
 import { FacetValueResponseParsingService } from './data/facet-value-response-parsing.service';
 import { FacetValueMapResponseParsingService } from './data/facet-value-map-response-parsing.service';
 import { FacetConfigResponseParsingService } from './data/facet-config-response-parsing.service';
+import { ResourcePolicyService } from './data/resource-policy.service';
 import { RegistryService } from './registry/registry.service';
 import { RegistryMetadataschemasResponseParsingService } from './data/registry-metadataschemas-response-parsing.service';
 import { RegistryMetadatafieldsResponseParsingService } from './data/registry-metadatafields-response-parsing.service';
@@ -145,6 +146,7 @@ const PROVIDERS = [
   MetadataService,
   ObjectCacheService,
   PaginationComponentOptions,
+  ResourcePolicyService,
   RegistryService,
   NormalizedObjectBuildService,
   RemoteDataBuildService,

src/app/core/data/comcol-data.service.spec.ts

@@ -89,7 +89,7 @@ describe('ComColDataService', () => {
   function initMockCommunityDataService(): CommunityDataService {
     return jasmine.createSpyObj('responseCache', {
       getEndpoint: hot('--a-', { a: communitiesEndpoint }),
-      getIDHref: cold('b-', { b: communityEndpoint })
+      getIDHref: communityEndpoint
     });
   }
 

src/app/core/data/comcol-data.service.ts

@@ -31,7 +31,7 @@ export abstract class ComColDataService<T extends CacheableObject> extends DataS
       return this.halService.getEndpoint(linkPath);
     } else {
       const scopeCommunityHrefObs = this.cds.getEndpoint().pipe(
-        mergeMap((endpoint: string) => this.cds.getIDHref(endpoint, options.scopeID)),
+        map((endpoint: string) => this.cds.getIDHref(endpoint, options.scopeID)),
         filter((href: string) => isNotEmpty(href)),
         take(1),
         tap((href: string) => {

src/app/core/data/metadata-schema-data.service.ts

@@ -13,15 +13,38 @@ import { MetadataSchema } from '../metadata/metadataschema.model';
 import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
 import { HttpClient } from '@angular/common/http';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { ChangeAnalyzer } from './change-analyzer';
 import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
 
+/* tslint:disable:max-classes-per-file */
+class DataServiceImpl extends DataService<MetadataSchema> {
+  protected linkPath = 'metadataschemas';
+  protected forceBypassCache = false;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: ChangeAnalyzer<MetadataSchema>) {
+    super();
+  }
+
+  getBrowseEndpoint(options: FindAllOptions = {}, linkPath: string = this.linkPath): Observable<string> {
+    return this.halService.getEndpoint(linkPath);
+  }
+}
+
 /**
  * A service responsible for fetching/sending data from/to the REST API on the metadataschemas endpoint
  */
 @Injectable()
-export class MetadataSchemaDataService extends DataService<MetadataSchema> {
+export class MetadataSchemaDataService {
-  protected linkPath = 'metadataschemas';
+  private dataService: DataServiceImpl;
-  protected forceBypassCache = false;
 
   constructor(
     protected requestService: RequestService,
@@ -33,17 +56,6 @@ export class MetadataSchemaDataService extends DataService<MetadataSchema> {
     protected dataBuildService: NormalizedObjectBuildService,
     protected http: HttpClient,
     protected notificationsService: NotificationsService) {
-    super();
+    this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, null, objectCache, halService, notificationsService, http, comparator);
   }
-
-  /**
-   * Get the endpoint for browsing metadataschemas
-   * @param {FindAllOptions} options
-   * @returns {Observable<string>}
-   */
-  public getBrowseEndpoint(options: FindAllOptions = {}, linkPath: string = this.linkPath): Observable<string> {
-
-    return null;
-  }
-
 }

src/app/core/data/resource-policy.service.spec.ts

@@ -0,0 +1,77 @@
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { TestScheduler } from 'rxjs/testing';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ResourcePolicy } from '../shared/resource-policy.model';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { GetRequest } from './request.models';
+import { RequestService } from './request.service';
+import { ResourcePolicyService } from './resource-policy.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+
+describe('ResourcePolicyService', () => {
+  let scheduler: TestScheduler;
+  let service: ResourcePolicyService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  const testObject = {
+    uuid: '664184ee-b254-45e8-970d-220e5ccc060b'
+  } as ResourcePolicy;
+  const requestURL = `https://rest.api/rest/api/resourcepolicies/${testObject.uuid}`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    requestService = jasmine.createSpyObj('requestService', {
+      generateRequestId: requestUUID,
+      configure: true
+    });
+    rdbService = jasmine.createSpyObj('rdbService', {
+      buildSingle: cold('a', {
+        a: {
+          payload: testObject
+        }
+      })
+    });
+    objectCache = {} as ObjectCacheService;
+    const halService = {} as HALEndpointService;
+    const notificationsService = {} as NotificationsService;
+    const http = {} as HttpClient;
+    const comparator = {} as any;
+    const dataBuildService = {} as NormalizedObjectBuildService;
+
+    service = new ResourcePolicyService(
+      requestService,
+      rdbService,
+      dataBuildService,
+      objectCache,
+      halService,
+      notificationsService,
+      http,
+      comparator
+    )
+  });
+
+  describe('findByHref', () => {
+    it('should configure the proper GetRequest', () => {
+      scheduler.schedule(() => service.findByHref(requestURL));
+      scheduler.flush();
+
+      expect(requestService.configure).toHaveBeenCalledWith(new GetRequest(requestUUID, requestURL, null), false);
+    });
+
+    it('should return a RemoteData<ResourcePolicy> for the object with the given URL', () => {
+      const result = service.findByHref(requestURL);
+      const expected = cold('a', {
+        a: {
+          payload: testObject
+        }
+      });
+      expect(result).toBeObservable(expected);
+    });
+  });
+});

src/app/core/data/resource-policy.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { DataService } from '../data/data.service';
+import { RequestService } from '../data/request.service';
+import { FindAllOptions } from '../data/request.models';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { ResourcePolicy } from '../shared/resource-policy.model';
+import { RemoteData } from '../data/remote-data';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { CoreState } from '../core.reducers';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+import { ChangeAnalyzer } from './change-analyzer';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+import { HttpOptions } from '../dspace-rest-v2/dspace-rest-v2.service';
+
+/* tslint:disable:max-classes-per-file */
+class DataServiceImpl extends DataService<ResourcePolicy> {
+  protected linkPath = 'resourcepolicies';
+  protected forceBypassCache = false;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: ChangeAnalyzer<ResourcePolicy>) {
+    super();
+  }
+
+  getBrowseEndpoint(options: FindAllOptions = {}, linkPath: string = this.linkPath): Observable<string> {
+    return this.halService.getEndpoint(linkPath);
+  }
+}
+
+/**
+ * A service responsible for fetching/sending data from/to the REST API on the resourcepolicies endpoint
+ */
+@Injectable()
+export class ResourcePolicyService {
+  private dataService: DataServiceImpl;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer<ResourcePolicy>) {
+    this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, null, objectCache, halService, notificationsService, http, comparator);
+  }
+
+  findByHref(href: string, options?: HttpOptions): Observable<RemoteData<ResourcePolicy>> {
+    return this.dataService.findByHref(href, options);
+  }
+}

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts

@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('JournalIssue', ItemViewMode.Full)
 @Component({
@@ -34,12 +31,10 @@ export class JournalIssueComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.volumes$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalVolumeOfIssue'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalVolumeOfIssue')
-        relationsToItems(this.item.id)
       );
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfJournalIssue'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfJournalIssue')
-        relationsToItems(this.item.id)
       );
     }
   }

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts

@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('JournalVolume', ItemViewMode.Full)
 @Component({
@@ -34,12 +31,10 @@ export class JournalVolumeComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.journals$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalOfVolume'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalOfVolume')
-        relationsToItems(this.item.id)
       );
       this.issues$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isIssueOfJournalVolume'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isIssueOfJournalVolume')
-        relationsToItems(this.item.id)
       );
     }
   }

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts

@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('Journal', ItemViewMode.Full)
 @Component({
@@ -29,8 +26,7 @@ export class JournalComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.volumes$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isVolumeOfJournal'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isVolumeOfJournal')
-        relationsToItems(this.item.id)
       );
     }
   }

src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts

@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('OrgUnit', ItemViewMode.Full)
 @Component({
@@ -39,18 +36,15 @@ export class OrgunitComponent extends ItemComponent implements OnInit {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.people$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPersonOfOrgUnit'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isPersonOfOrgUnit')
-        relationsToItems(this.item.id)
       );
 
       this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isProjectOfOrgUnit'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfOrgUnit')
-        relationsToItems(this.item.id)
       );
 
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfOrgUnit'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfOrgUnit')
-        relationsToItems(this.item.id)
       );
     }
   }}

src/app/entity-groups/research-entities/item-pages/person/person.component.ts

@@ -1,14 +1,11 @@
 import { Component, Inject } from '@angular/core';
-import { Observable ,  of as observableOf } from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
 import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { ITEM } from '../../../../shared/items/switcher/item-type-switcher.component';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 import { getQueryByRelations } from '../../../../shared/utils/relation-query.utils';
 
 @rendersItemType('Person', ItemViewMode.Full)
@@ -56,18 +53,15 @@ export class PersonComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfAuthor'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfAuthor')
-        relationsToItems(this.item.id)
       );
 
       this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isProjectOfPerson'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfPerson')
-        relationsToItems(this.item.id)
       );
 
       this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfPerson'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfPerson')
-        relationsToItems(this.item.id)
       );
 
       this.fixedFilterQuery = getQueryByRelations('isAuthorOfPublication', this.item.id);

src/app/entity-groups/research-entities/item-pages/project/project.component.ts

@@ -5,10 +5,7 @@ import { MetadataRepresentation } from '../../../../core/shared/metadata-represe
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('Project', ItemViewMode.Full)
 @Component({
@@ -47,18 +44,15 @@ export class ProjectComponent extends ItemComponent implements OnInit {
       this.contributors$ = this.buildRepresentations('OrgUnit', 'project.contributor.other');
 
       this.people$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPersonOfProject'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isPersonOfProject')
-        relationsToItems(this.item.id)
       );
 
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfProject'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfProject')
-        relationsToItems(this.item.id)
       );
 
       this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfProject'),
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfProject')
-        relationsToItems(this.item.id)
       );
     }
   }

src/app/footer/footer.component.scss

@@ -1,4 +1,3 @@
-@import '../../styles/variables.scss';
 $footer-bg: $gray-100;
 $footer-border: 1px solid darken($footer-bg, 10%);
 $footer-padding: $spacer * 1.5;

src/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     :host.open {
         background-color: $white;

src/app/header/header.component.scss

@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 .navbar-brand img {
     height: $header-logo-height;
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .dropdown-menu {
     overflow: hidden;
     min-width: 100%;

src/app/navbar/navbar.component.scss

@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 nav.navbar {
     border-bottom: 1px $gray-400 solid;
     align-items: baseline;
@@ -34,6 +32,4 @@ nav.navbar {
         }
         padding: 0;
     }
-}
+}
-
-

src/app/navbar/navbar.component.ts

@@ -13,8 +13,8 @@ import { GLOBAL_CONFIG, GlobalConfig } from '../../config';
  */
 @Component({
   selector: 'ds-navbar',
-  styleUrls: ['navbar.component.scss'],
+  styleUrls: ['./navbar.component.scss'],
-  templateUrl: 'navbar.component.html',
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends MenuComponent implements OnInit {

src/app/pagenotfound/pagenotfound.component.scss

@@ -1 +0,0 @@
-@import '../../styles/variables.scss';

src/app/shared/chips/chips.component.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/variables";
-
 .chip-selected {
   background-color: map-get($theme-colors, info) !important;
 }

src/app/shared/comcol-page-content/comcol-page-content.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/shared/comcol-page-header/comcol-page-header.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/shared/comcol-page-logo/comcol-page-logo.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';

src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss

@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 .dropdown-toggle::after {
   display:none
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss

@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 /* style fa-spin */
 .fa-spin {
   pointer-events: none;

src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss

@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 :host /deep/ .dropdown-menu {
   width: 100% !important;
   max-height: $dropdown-menu-max-height;

src/app/shared/form/form.component.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .ds-form-input-addon {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;

src/app/shared/input-suggestions/input-suggestions.component.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .autocomplete {
     width: 100%;
     .dropdown-item {

src/app/shared/log-in/log-in.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .form-login .form-control:focus {
   z-index: 2;
 }

src/app/shared/notifications/notification/notification.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .alert {
   display: inline-block;
   min-width: $modal-sm;

src/app/shared/notifications/notifications-board/notifications-board.component.scss

@@ -1,6 +1,3 @@
-@import '../../../../styles/variables';
-@import '../../../../styles/mixins';
-
 .notifications-wrapper {
   z-index: $zindex-popover;
   text-align: right;

src/app/shared/object-collection/object-collection.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables';

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-grid/object-grid.component.scss

@@ -1,6 +1,3 @@
-@import '../../../styles/variables';
-@import '../../../styles/mixins';
-
 $ds-wrapper-grid-spacing: $spacer/2;
 
 ds-wrapper-grid-element ::ng-deep {

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../../styles/variables';

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../../styles/variables';
 

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-
 .card {
     a > div {
         position: relative;

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss

@@ -1,4 +1,3 @@
- @import '../../../../styles/variables';
 :host {
     /deep/ em {
         font-weight: bold;

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/collection-list-element/collection-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/community-list-element/community-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/item-list-element/item-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../styles/variables';

src/app/shared/object-list/object-list.component.scss

@@ -1 +0,0 @@
-@import '../../../styles/variables';

src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../../styles/variables';

src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../../styles/variables';

src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss

@@ -1 +0,0 @@
-@import '../../../../../styles/variables';

src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss

@@ -1,4 +1,3 @@
-@import '../../../../styles/variables';
 :host {
     ::ng-deep em {
         font-weight: bold;

src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss

@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 

src/app/shared/search-form/search-form.component.scss

@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;

src/app/shared/search-form/search-form.component.ts

@@ -16,6 +16,7 @@ import { currentPath } from '../utils/route.utils';
 @Component({
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
+  // templateUrl: './search-form.component.html',
   templateUrl: './search-form.component.html'
 })
 
@@ -46,6 +47,16 @@ export class SearchFormComponent {
    */
   @Input() scopes: DSpaceObject[];
 
+  /**
+   * Whether or not the search button should be displayed large
+   */
+  @Input() large = false;
+
+  /**
+   * The brand color of the search button
+   */
+  @Input() brandColor = 'primary';
+
   constructor(private router: Router, private searchService: SearchService) {
   }
 

src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss

@@ -1,6 +1,3 @@
-@import '../../../../../../styles/variables';
-@import '../../../../../../styles/mixins';
-
 .filters {
     .toggle-more-filters a {
         color: $link-color;

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -1,8 +1,8 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row" [routerLink]="[getSearchLink()]"
-                                                           [queryParams]="addQueryParams" queryParamsHandling="merge">
+   [queryParams]="addQueryParams" queryParamsHandling="merge">
-    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+  <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
-    <span class="filter-value px-1">{{filterValue.value}}</span>
+  <span class="filter-value px-1">{{filterValue.value}}</span>
-    <span class="float-right filter-value-count ml-auto">
+  <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                     </span>
-</a>
+</a>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../../styles/variables';
-
 a {
     color: $body-color;
     &:hover, &focus {

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html

@@ -1,8 +1,8 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
    [routerLink]="[getSearchLink()]"
    [queryParams]="changeQueryParams" queryParamsHandling="merge">
-    <span class="filter-value px-1">{{filterValue.label}}</span>
+  <span class="filter-value px-1">{{filterValue.label}}</span>
-    <span class="float-right filter-value-count ml-auto">
+  <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                     </span>
 </a>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../../styles/variables';
-
 a {
     color: $link-color;
     &:hover {

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts

@@ -19,6 +19,7 @@ const rangeDelimiter = '-';
 @Component({
   selector: 'ds-search-facet-range-option',
   styleUrls: ['./search-facet-range-option.component.scss'],
+  // templateUrl: './search-facet-range-option.component.html',
   templateUrl: './search-facet-range-option.component.html',
 })
 

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss

@@ -1,5 +1,3 @@
-@import '../../../../../../../styles/variables';
-
 a {
     color: $body-color;
     &:hover, &focus {