Merge branch 'master' into w2p-62769_Bitstream-format-registry

Conflicts: src/app/+admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts src/app/core/core.module.ts src/app/core/registry/registry-bitstreamformats-response.model.ts src/app/core/registry/registry.service.ts src/app/core/shared/bitstream-format.model.ts
2025-10-07 01:54:15 +00:00 · 2019-08-06 17:22:03 +02:00
parent 279b80b4de 0b4379abad
commit c325e6d61b
458 changed files with 4716 additions and 2583 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@
 /tsd_typings/
 npm-debug.log

+/build/
+
 /config/environment.dev.js
 /config/environment.prod.js

--- a/config/environment.default.js
+++ b/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: {
@@ -149,11 +149,39 @@ module.exports = {
    // Limit for years to display using jumps of five years (current year - fiveYearLimit)
    fiveYearLimit: 30,
    // The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
-    defaultLowerLimit: 1900
+    defaultLowerLimit: 1900,
+    // List of all the active Browse-By types
+    // Adding a type will activate their Browse-By page and add them to the global navigation menu, as well as community and collection pages
+    // Allowed fields and their purpose:
+    //    id:             The browse id to use for fetching info from the rest api
+    //    type:           The type of Browse-By page to display
+    //    metadataField:  The metadata-field used to create starts-with options (only necessary when the type is set to 'date')
+    types: [
+      {
+        id: 'title',
+        type: 'title'
+      },
+      {
+        id: 'dateissued',
+        type: 'date',
+        metadataField: 'dc.date.issued'
+      },
+      {
+        id: 'author',
+        type: 'metadata'
+      },
+      {
+        id: 'subject',
+        type: 'metadata'
+      }
+    ]
  },
  item: {
    edit: {
      undoTimeout: 10000 // 10 seconds
    }
+  },
+  theme: {
+    name: 'default',
  }
 };
--- a/package.json
+++ b/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:aot": "node ./webpack/run-webpack.js --env.aot --env.server --mode development && node ./webpack/run-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": "node ./scripts/webpack.js --progress --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": "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",
@@ -60,7 +62,9 @@
    "webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone --gecko false",
    "lint": "tslint \"src/**/*.ts\" && tslint \"e2e/**/*.ts\"",
    "docs": "typedoc --options typedoc.json ./src/",
-    "coverage": "http-server -c-1 -o -p 9875 ./coverage"
+    "coverage": "http-server -c-1 -o -p 9875 ./coverage",
+    "postinstall": "yarn run patch-protractor",
+    "patch-protractor": "ncp node_modules/webdriver-manager node_modules/protractor/node_modules/webdriver-manager"
  },
  "dependencies": {
    "@angular/animations": "^6.1.4",
@@ -94,6 +98,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",
@@ -117,10 +122,11 @@
    "ngx-moment": "^3.1.0",
    "ngx-pagination": "3.0.3",
    "nouislider": "^11.0.0",
-    "pem": "1.12.3",
+    "pem": "1.13.2",
    "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",
@@ -163,6 +169,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",
@@ -187,6 +194,7 @@
    "karma-sourcemap-loader": "0.3.7",
    "karma-webdriver-launcher": "1.0.5",
    "karma-webpack": "3.0.0",
+    "ncp": "^2.0.0",
    "ngrx-store-freeze": "^0.2.4",
    "node-sass": "^4.11.0",
    "nodemon": "^1.15.0",
@@ -199,7 +207,7 @@
    "postcss-loader": "^3.0.0",
    "postcss-responsive-type": "1.0.0",
    "postcss-smart-import": "0.7.6",
-    "protractor": "^5.3.0",
+    "protractor": "^5.4.2",
    "protractor-istanbul-plugin": "2.0.0",
    "raw-loader": "0.5.1",
    "resolve-url-loader": "^2.3.0",
@@ -213,17 +221,19 @@
    "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",
    "tslint": "5.11.0",
    "typedoc": "^0.9.0",
    "typescript": "^2.9.1",
+    "webdriver-manager": "^12.1.6",
    "webpack": "^4.17.1",
    "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"
  }
--- a/protractor.conf.js
+++ b/protractor.conf.js
@@ -73,7 +73,7 @@ exports.config = {
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
-    defaultTimeoutInterval: 30000,
+    defaultTimeoutInterval: 60000,
    print: function () {}
  },
  useAllAngular2AppRoots: true,
--- a/resources/i18n/en.json
+++ b/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": {
@@ -386,7 +396,10 @@
      "titleprefix": "Publication: ",
      "journal-title": "Journal Title",
      "journal-issn": "Journal ISSN",
-      "volume-title": "Volume Title"
+      "volume-title": "Volume Title",
+      "publisher": "Publisher",
+      "description": "Description"
+
    },
    "listelement": {
      "badge": "Publication"
@@ -609,6 +622,34 @@
        "birthDate": {
          "placeholder": "Birth Date",
          "head": "Birth Date"
+        },
+        "creativeWorkPublisher": {
+          "placeholder": "Publisher",
+          "head": "Publisher"
+        },
+        "creativeWorkEditor": {
+          "placeholder": "Editor",
+          "head": "Editor"
+        },
+        "creativeWorkKeywords": {
+          "placeholder": "Subject",
+          "head": "Subject"
+        },
+        "creativeDatePublished": {
+          "placeholder": "Date Published",
+          "head": "Date Published"
+        },
+        "organizationAddressCountry": {
+          "placeholder": "Country",
+          "head": "Country"
+        },
+        "organizationAddressLocality": {
+          "placeholder": "City",
+          "head": "City"
+        },
+        "organizationFoundingDate": {
+          "placeholder": "Date Founded",
+          "head": "Date Founded"
        }
      }
    }
@@ -839,7 +880,7 @@
      "control_panel": "Control Panel",
      "browse_global": "All of DSpace",
      "browse_global_communities_and_collections": "Communities & Collections",
-      "browse_global_by_issue_date": "By Issue Date",
+      "browse_global_by_dateissued": "By Issue Date",
      "browse_global_by_author": "By Author",
      "browse_global_by_title": "By Title",
      "browse_global_by_subject": "By Subject",
--- a/resources/images/banner.jpg
+++ b/resources/images/banner.jpg
--- a/resources/images/dspace-logo-monochrome.svg
+++ b/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>
--- a/scripts/sync-build-dir.js
+++ b/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);
--- a/webpack/run-webpack.js
+++ b/webpack/run-webpack.js
--- a/src/app/+admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/add-bitstream-format/add-bitstream-format.component.spec.ts
@@ -20,18 +20,15 @@ describe('AddBitstreamFormatComponent', () => {
  let comp: AddBitstreamFormatComponent;
  let fixture: ComponentFixture<AddBitstreamFormatComponent>;

-  const bitstreamFormat: BitstreamFormat = {
-    uuid: 'test-uuid',
-    id: 'test-uuid',
-    shortDescription: 'Adobe PDF',
-    description: 'Adobe Portable Document Format',
-    mimetype: 'application/pdf',
-    supportLevel: BitstreamFormatSupportLevel.Unknown,
-    internal: false,
-    extensions: ['pdf', 'also-pdf'],
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
+  const bitstreamFormat = new BitstreamFormat();
+  bitstreamFormat.uuid = 'test-uuid-1';
+  bitstreamFormat.id = 'test-uuid-1';
+  bitstreamFormat.shortDescription = 'Unknown';
+  bitstreamFormat.description = 'Unknown data format';
+  bitstreamFormat.mimetype = 'application/octet-stream';
+  bitstreamFormat.supportLevel = BitstreamFormatSupportLevel.Unknown;
+  bitstreamFormat.internal = false;
+  bitstreamFormat.extensions = null;

  let router;
  let notificationService: NotificationsServiceStub;
--- a/src/app/+admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/bitstream-formats.component.spec.ts
@@ -16,7 +16,6 @@ import { BitstreamFormatDataService } from '../../../core/data/bitstream-format-
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service-stub';
 import { BitstreamFormat } from '../../../core/shared/bitstream-format.model';
-import { ResourceType } from '../../../core/shared/resource-type';
 import { BitstreamFormatSupportLevel } from '../../../core/shared/bitstream-format-support-level';
 import { cold, getTestScheduler, hot } from 'jasmine-marbles';
 import { TestScheduler } from 'rxjs/testing';
@@ -28,54 +27,45 @@ describe('BitstreamFormatsComponent', () => {
  let scheduler: TestScheduler;
  let notificationsServiceStub;

-  const bitstreamFormat1: BitstreamFormat = {
-    uuid: 'test-uuid-1',
-    id: 'test-uuid-1',
-    shortDescription: 'Unknown',
-    description: 'Unknown data format',
-    mimetype: 'application/octet-stream',
-    supportLevel: BitstreamFormatSupportLevel.Unknown,
-    internal: false,
-    extensions: null,
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
-  const bitstreamFormat2: BitstreamFormat = {
-    uuid: 'test-uuid-2',
-    id: 'test-uuid-2',
-    shortDescription: 'License',
-    description: 'Item-specific license agreed upon to submission',
-    mimetype: 'text/plain; charset=utf-8',
-    supportLevel: BitstreamFormatSupportLevel.Known,
-    internal: true,
-    extensions: null,
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
-  const bitstreamFormat3: BitstreamFormat = {
-    uuid: 'test-uuid-3',
-    id: 'test-uuid-3',
-    shortDescription: 'CC License',
-    description: 'Item-specific Creative Commons license agreed upon to submission',
-    mimetype: 'text/html; charset=utf-8',
-    supportLevel: BitstreamFormatSupportLevel.Supported,
-    internal: true,
-    extensions: null,
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
-  const bitstreamFormat4: BitstreamFormat = {
-    uuid: 'test-uuid-4',
-    id: 'test-uuid-4',
-    shortDescription: 'Adobe PDF',
-    description: 'Adobe Portable Document Format',
-    mimetype: 'application/pdf',
-    supportLevel: BitstreamFormatSupportLevel.Unknown,
-    internal: false,
-    extensions: null,
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
+  const bitstreamFormat1 = new BitstreamFormat();
+  bitstreamFormat1.uuid = 'test-uuid-1';
+  bitstreamFormat1.id = 'test-uuid-1';
+  bitstreamFormat1.shortDescription = 'Unknown';
+  bitstreamFormat1.description = 'Unknown data format';
+  bitstreamFormat1.mimetype = 'application/octet-stream';
+  bitstreamFormat1.supportLevel = BitstreamFormatSupportLevel.Unknown;
+  bitstreamFormat1.internal = false;
+  bitstreamFormat1.extensions = null;
+
+  const bitstreamFormat2 = new BitstreamFormat();
+  bitstreamFormat2.uuid = 'test-uuid-2';
+  bitstreamFormat2.id = 'test-uuid-2';
+  bitstreamFormat2.shortDescription = 'License';
+  bitstreamFormat2.description = 'Item-specific license agreed upon to submission';
+  bitstreamFormat2.mimetype = 'text/plain; charset=utf-8';
+  bitstreamFormat2.supportLevel = BitstreamFormatSupportLevel.Known;
+  bitstreamFormat2.internal = true;
+  bitstreamFormat2.extensions = null;
+
+  const bitstreamFormat3 = new BitstreamFormat();
+  bitstreamFormat3.uuid = 'test-uuid-3';
+  bitstreamFormat3.id = 'test-uuid-3';
+  bitstreamFormat3.shortDescription = 'CC License';
+  bitstreamFormat3.description = 'Item-specific Creative Commons license agreed upon to submission';
+  bitstreamFormat3.mimetype = 'text/html; charset=utf-8';
+  bitstreamFormat3.supportLevel = BitstreamFormatSupportLevel.Supported;
+  bitstreamFormat3.internal = true;
+  bitstreamFormat3.extensions = null;
+
+  const bitstreamFormat4 = new BitstreamFormat();
+  bitstreamFormat4.uuid = 'test-uuid-4';
+  bitstreamFormat4.id = 'test-uuid-4';
+  bitstreamFormat4.shortDescription = 'Adobe PDF';
+  bitstreamFormat4.description = 'Adobe Portable Document Format';
+  bitstreamFormat4.mimetype = 'application/pdf';
+  bitstreamFormat4.supportLevel = BitstreamFormatSupportLevel.Unknown;
+  bitstreamFormat4.internal = false;
+  bitstreamFormat4.extensions = null;

  const mockFormatsList: BitstreamFormat[] = [
    bitstreamFormat1,
--- a/src/app/+admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/edit-bitstream-format/edit-bitstream-format.component.spec.ts
@@ -21,18 +21,15 @@ describe('EditBitstreamFormatComponent', () => {
  let comp: EditBitstreamFormatComponent;
  let fixture: ComponentFixture<EditBitstreamFormatComponent>;

-  const bitstreamFormat: BitstreamFormat = {
-    uuid: 'test-uuid',
-    id: 'test-uuid',
-    shortDescription: 'Adobe PDF',
-    description: 'Adobe Portable Document Format',
-    mimetype: 'application/pdf',
-    supportLevel: BitstreamFormatSupportLevel.Unknown,
-    internal: false,
-    extensions: ['pdf', 'also-pdf'],
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
+  const bitstreamFormat = new BitstreamFormat();
+  bitstreamFormat.uuid = 'test-uuid-1';
+  bitstreamFormat.id = 'test-uuid-1';
+  bitstreamFormat.shortDescription = 'Unknown';
+  bitstreamFormat.description = 'Unknown data format';
+  bitstreamFormat.mimetype = 'application/octet-stream';
+  bitstreamFormat.supportLevel = BitstreamFormatSupportLevel.Unknown;
+  bitstreamFormat.internal = false;
+  bitstreamFormat.extensions = null;

  const routeStub = {
    data: observableOf({
--- a/src/app/+admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/bitstream-formats/format-form/format-form.component.spec.ts
@@ -9,7 +9,6 @@ import { Router } from '@angular/router';
 import { FormatFormComponent } from './format-form.component';
 import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model';
 import { BitstreamFormatSupportLevel } from '../../../../core/shared/bitstream-format-support-level';
-import { ResourceType } from '../../../../core/shared/resource-type';
 import { DynamicCheckboxModel, DynamicFormArrayModel, DynamicInputModel } from '@ng-dynamic-forms/core';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { isEmpty } from '../../../../shared/empty.util';
@@ -20,18 +19,15 @@ describe('FormatFormComponent', () => {

  const router = new RouterStub();

-  const bitstreamFormat: BitstreamFormat = {
-    uuid: 'test-uuid',
-    id: 'test-uuid',
-    shortDescription: 'Adobe PDF',
-    description: 'Adobe Portable Document Format',
-    mimetype: 'application/pdf',
-    supportLevel: BitstreamFormatSupportLevel.Unknown,
-    internal: false,
-    extensions: ['pdf', 'also-pdf'],
-    type: ResourceType.BitstreamFormat,
-    self: 'self-link'
-  };
+  const bitstreamFormat = new BitstreamFormat();
+  bitstreamFormat.uuid = 'test-uuid-1';
+  bitstreamFormat.id = 'test-uuid-1';
+  bitstreamFormat.shortDescription = 'Unknown';
+  bitstreamFormat.description = 'Unknown data format';
+  bitstreamFormat.mimetype = 'application/octet-stream';
+  bitstreamFormat.supportLevel = BitstreamFormatSupportLevel.Unknown;
+  bitstreamFormat.internal = false;
+  bitstreamFormat.extensions = [];

  const submittedBitstreamFormat = new BitstreamFormat();
  submittedBitstreamFormat.id = bitstreamFormat.id;
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.actions.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.actions.ts
@@ -1,7 +1,7 @@
 import { Action } from '@ngrx/store';
 import { type } from '../../../shared/ngrx/type';
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
-import { MetadataField } from '../../../core/metadata/metadatafield.model';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
+import { MetadataField } from '../../../core/metadata/metadata-field.model';

 /**
 * For each action type in an action group, make a simple
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
  cursor: pointer;
 }
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.spec.ts
@@ -17,6 +17,7 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service-stub';
 import { RestResponse } from '../../../core/cache/response.models';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';

 describe('MetadataRegistryComponent', () => {
  let comp: MetadataRegistryComponent;
@@ -36,7 +37,7 @@ describe('MetadataRegistryComponent', () => {
      namespace: 'http://dspace.org/mockschema'
    }
  ];
-  const mockSchemas = observableOf(new RemoteData(false, false, true, undefined, new PaginatedList(null, mockSchemasList)));
+  const mockSchemas = createSuccessfulRemoteDataObject$(new PaginatedList(null, mockSchemasList));
  /* tslint:disable:no-empty */
  const registryServiceStub = {
    getMetadataSchemas: () => mockSchemas,
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.ts
@@ -3,7 +3,6 @@ import { RegistryService } from '../../../core/registry/registry.service';
 import { Observable, combineLatest as observableCombineLatest } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { map, take } from 'rxjs/operators';
 import { hasValue } from '../../../shared/empty.util';
@@ -12,6 +11,7 @@ import { zip } from 'rxjs/internal/observable/zip';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { Route, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';

@Component({
  selector: 'ds-metadata-registry',
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.reducers.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.reducers.spec.ts
@@ -7,8 +7,8 @@ import {
  MetadataRegistrySelectSchemaAction
 } from './metadata-registry.actions';
 import { metadataRegistryReducer, MetadataRegistryState } from './metadata-registry.reducers';
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
-import { MetadataField } from '../../../core/metadata/metadatafield.model';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
+import { MetadataField } from '../../../core/metadata/metadata-field.model';

 class NullAction extends MetadataRegistryEditSchemaAction {
  type = null;
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.reducers.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.reducers.ts
@@ -1,4 +1,3 @@
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
 import {
  MetadataRegistryAction,
  MetadataRegistryActionTypes,
@@ -9,7 +8,8 @@ import {
  MetadataRegistrySelectFieldAction,
  MetadataRegistrySelectSchemaAction
 } from './metadata-registry.actions';
-import { MetadataField } from '../../../core/metadata/metadatafield.model';
+import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';

 /**
 * The metadata registry state.
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.spec.ts
@@ -10,7 +10,7 @@ import { EnumKeysPipe } from '../../../../shared/utils/enum-keys-pipe';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { of as observableOf } from 'rxjs/internal/observable/of';
-import { MetadataSchema } from '../../../../core/metadata/metadataschema.model';
+import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';

 describe('MetadataSchemaFormComponent', () => {
  let component: MetadataSchemaFormComponent;
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-schema-form/metadata-schema-form.component.ts
@@ -9,9 +9,9 @@ import { FormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { take } from 'rxjs/operators';
-import { MetadataSchema } from '../../../../core/metadata/metadataschema.model';
 import { TranslateService } from '@ngx-translate/core';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
+import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';

@Component({
  selector: 'ds-metadata-schema-form',
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
@@ -3,7 +3,6 @@ import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing'
 import { MetadataFieldFormComponent } from './metadata-field-form.component';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { of as observableOf } from 'rxjs/internal/observable/of';
-import { MetadataField } from '../../../../core/metadata/metadatafield.model';
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
@@ -11,7 +10,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EnumKeysPipe } from '../../../../shared/utils/enum-keys-pipe';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { MetadataSchema } from '../../../../core/metadata/metadataschema.model';
+import { MetadataField } from '../../../../core/metadata/metadata-field.model';
+import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';

 describe('MetadataFieldFormComponent', () => {
  let component: MetadataFieldFormComponent;
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { MetadataSchema } from '../../../../core/metadata/metadataschema.model';
 import {
  DynamicFormControlModel,
  DynamicFormLayout,
@@ -8,10 +7,11 @@ import {
 import { FormGroup } from '@angular/forms';
 import { RegistryService } from '../../../../core/registry/registry.service';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { MetadataField } from '../../../../core/metadata/metadatafield.model';
 import { take } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
+import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
+import { MetadataField } from '../../../../core/metadata/metadata-field.model';

@Component({
  selector: 'ds-metadata-field-form',
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
  cursor: pointer;
 }
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
@@ -3,7 +3,6 @@ import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing'
 import { of as observableOf } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -21,6 +20,8 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../../shared/testing/notifications-service-stub';
 import { RestResponse } from '../../../core/cache/response.models';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';

 describe('MetadataSchemaComponent', () => {
  let comp: MetadataSchemaComponent;
@@ -74,12 +75,12 @@ describe('MetadataSchemaComponent', () => {
      schema: mockSchemasList[1]
    }
  ];
-  const mockSchemas = observableOf(new RemoteData(false, false, true, undefined, new PaginatedList(null, mockSchemasList)));
+  const mockSchemas = createSuccessfulRemoteDataObject$(new PaginatedList(null, mockSchemasList));
  /* tslint:disable:no-empty */
  const registryServiceStub = {
    getMetadataSchemas: () => mockSchemas,
-    getMetadataFieldsBySchema: (schema: MetadataSchema) => observableOf(new RemoteData(false, false, true, undefined, new PaginatedList(null, mockFieldsList.filter((value) => value.schema === schema)))),
-    getMetadataSchemaByName: (schemaName: string) => observableOf(new RemoteData(false, false, true, undefined, mockSchemasList.filter((value) => value.prefix === schemaName)[0])),
+    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList.filter((value) => value.schema === schema))),
+    getMetadataSchemaByName: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
    getActiveMetadataField: () => observableOf(undefined),
    getSelectedMetadataFields: () => observableOf([]),
    editMetadataField: (schema) => {},
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
@@ -4,8 +4,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Observable, combineLatest as observableCombineLatest } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { MetadataField } from '../../../core/metadata/metadatafield.model';
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
 import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { map, take } from 'rxjs/operators';
 import { hasValue } from '../../../shared/empty.util';
@@ -13,6 +11,8 @@ import { RestResponse } from '../../../core/cache/response.models';
 import { zip } from 'rxjs/internal/observable/zip';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';

@Component({
  selector: 'ds-metadata-schema',
--- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html
+++ b/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'),
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
+++ b/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;
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/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;
--- a/src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.spec.ts
@@ -18,6 +18,7 @@ import { Item } from '../../core/shared/item.model';
 import { ENV_CONFIG, GLOBAL_CONFIG } from '../../../config';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
 import { toRemoteData } from '../+browse-by-metadata-page/browse-by-metadata-page.component.spec';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';

 describe('BrowseByDatePageComponent', () => {
  let comp: BrowseByDatePageComponent;
@@ -48,11 +49,11 @@ describe('BrowseByDatePageComponent', () => {
  const mockBrowseService = {
    getBrowseEntriesFor: (options: BrowseEntrySearchOptions) => toRemoteData([]),
    getBrowseItemsFor: (value: string, options: BrowseEntrySearchOptions) => toRemoteData([firstItem]),
-    getFirstItemFor: () => observableOf(new RemoteData(false, false, true, undefined, firstItem))
+    getFirstItemFor: () => createSuccessfulRemoteDataObject$(firstItem)
  };

  const mockDsoService = {
-    findById: () => observableOf(new RemoteData(false, false, true, null, mockCommunity))
+    findById: () => createSuccessfulRemoteDataObject$(mockCommunity)
  };

  const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
--- a/src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.ts
+++ b/src/app/+browse-by/+browse-by-date-page/browse-by-date-page.component.ts
@@ -13,6 +13,7 @@ import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
+import { BrowseByType, rendersBrowseBy } from '../+browse-by-switcher/browse-by-decorator';

@Component({
  selector: 'ds-browse-by-date-page',
@@ -21,9 +22,10 @@ import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 })
 /**
 * Component for browsing items by metadata definition of type 'date'
- * A metadata definition is a short term used to describe one or multiple metadata fields.
+ * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
 * An example would be 'dateissued' for 'dc.date.issued'
 */
+@rendersBrowseBy(BrowseByType.Date)
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {

  /**
@@ -53,12 +55,12 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
        })
        .subscribe((params) => {
          const metadataField = params.metadataField || this.defaultMetadataField;
-          this.metadata = params.metadata || this.defaultMetadata;
+          this.browseId = params.id || this.defaultBrowseId;
          this.startsWith = +params.startsWith || params.startsWith;
-          const searchOptions = browseParamsToOptions(params, Object.assign({}), this.sortConfig, this.metadata);
+          const searchOptions = browseParamsToOptions(params, Object.assign({}), this.sortConfig, this.browseId);
          this.updatePageWithItems(searchOptions, this.value);
          this.updateParent(params.scope);
-          this.updateStartsWithOptions(this.metadata, metadataField, params.scope);
+          this.updateStartsWithOptions(this.browseId, metadataField, params.scope);
        }));
  }

@@ -78,8 +80,9 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
        let lowerLimit = this.config.browseBy.defaultLowerLimit;
        if (hasValue(firstItemRD.payload)) {
          const date = firstItemRD.payload.firstMetadataValue(metadataField);
-          if (hasValue(date) && hasValue(+date.split('-')[0])) {
-            lowerLimit = +date.split('-')[0];
+          if (hasValue(date)) {
+            const dateObj = new Date(date);
+            lowerLimit = dateObj.getFullYear();
          }
        }
        const options = [];
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -1,7 +1,7 @@
 <div class="container">
  <div class="browse-by-metadata w-100">
    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + metadata | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
+      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
      [paginationConfig]="paginationConfig"
      [sortConfig]="sortConfig"
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.spec.ts
@@ -20,6 +20,9 @@ import { Item } from '../../core/shared/item.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { Community } from '../../core/shared/community.model';
 import { MockRouter } from '../../shared/mocks/mock-router';
+import { ResourceType } from '../../core/shared/resource-type';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';
+import { BrowseEntry } from '../../core/shared/browse-entry.model';

 describe('BrowseByMetadataPageComponent', () => {
  let comp: BrowseByMetadataPageComponent;
@@ -39,21 +42,21 @@ describe('BrowseByMetadataPageComponent', () => {

  const mockEntries = [
    {
-      type: 'author',
+      type: BrowseEntry.type,
      authority: null,
      value: 'John Doe',
      language: 'en',
      count: 1
    },
    {
-      type: 'author',
+      type: BrowseEntry.type,
      authority: null,
      value: 'James Doe',
      language: 'en',
      count: 3
    },
    {
-      type: 'subject',
+      type: BrowseEntry.type,
      authority: null,
      value: 'Fake subject',
      language: 'en',
@@ -68,12 +71,12 @@ describe('BrowseByMetadataPageComponent', () => {
  ];

  const mockBrowseService = {
-    getBrowseEntriesFor: (options: BrowseEntrySearchOptions) => toRemoteData(mockEntries.filter((entry) => entry.type === options.metadataDefinition)),
+    getBrowseEntriesFor: (options: BrowseEntrySearchOptions) => toRemoteData(mockEntries),
    getBrowseItemsFor: (value: string, options: BrowseEntrySearchOptions) => toRemoteData(mockItems)
  };

  const mockDsoService = {
-    findById: () => observableOf(new RemoteData(false, false, true, null, mockCommunity))
+    findById: () => createSuccessfulRemoteDataObject$(mockCommunity)
  };

  const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
@@ -105,12 +108,6 @@ describe('BrowseByMetadataPageComponent', () => {
    fixture.detectChanges();
  });

-  it('should fetch the correct entries depending on the metadata definition', () => {
-    comp.browseEntries$.subscribe((result) => {
-      expect(result.payload.page).toEqual(mockEntries.filter((entry) => entry.type === 'author'));
-    });
-  });
-
  it('should not fetch any items when no value is provided', () => {
    expect(comp.items$).toBeUndefined();
  });
@@ -160,5 +157,5 @@ describe('BrowseByMetadataPageComponent', () => {
 });

 export function toRemoteData(objects: any[]): Observable<RemoteData<PaginatedList<any>>> {
-  return observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), objects)));
+  return createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), objects));
 }
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.ts
@@ -15,6 +15,7 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { take } from 'rxjs/operators';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
+import { BrowseByType, rendersBrowseBy } from '../+browse-by-switcher/browse-by-decorator';

@Component({
  selector: 'ds-browse-by-metadata-page',
@@ -23,9 +24,10 @@ import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 })
 /**
 * Component for browsing (items) by metadata definition
- * A metadata definition is a short term used to describe one or multiple metadata fields.
+ * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
 * An example would be 'author' for 'dc.contributor.*'
 */
+@rendersBrowseBy(BrowseByType.Metadata)
 export class BrowseByMetadataPageComponent implements OnInit {

  /**
@@ -63,14 +65,14 @@ export class BrowseByMetadataPageComponent implements OnInit {
  subs: Subscription[] = [];

  /**
-   * The default metadata definition to resort to when none is provided
+   * The default browse id to resort to when none is provided
   */
-  defaultMetadata = 'author';
+  defaultBrowseId = 'author';

  /**
-   * The current metadata definition
+   * The current browse id
   */
-  metadata = this.defaultMetadata;
+  browseId = this.defaultBrowseId;

  /**
   * The type of StartsWith options to render
@@ -112,10 +114,10 @@ export class BrowseByMetadataPageComponent implements OnInit {
          return Object.assign({}, params, queryParams);
        })
        .subscribe((params) => {
-          this.metadata = params.metadata || this.defaultMetadata;
+          this.browseId = params.id || this.defaultBrowseId;
          this.value = +params.value || params.value || '';
          this.startsWith = +params.startsWith || params.startsWith;
-          const searchOptions = browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.metadata);
+          const searchOptions = browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.browseId);
          if (isNotEmpty(this.value)) {
            this.updatePageWithItems(searchOptions, this.value);
          } else {
--- a/src/app/+browse-by/+browse-by-switcher/browse-by-decorator.spec.ts
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-decorator.spec.ts
@@ -0,0 +1,12 @@
+import { BrowseByType, rendersBrowseBy } from './browse-by-decorator';
+
+describe('BrowseByDecorator', () => {
+  const titleDecorator = rendersBrowseBy(BrowseByType.Title);
+  const dateDecorator = rendersBrowseBy(BrowseByType.Date);
+  const metadataDecorator = rendersBrowseBy(BrowseByType.Metadata);
+  it('should have a decorator for all types', () => {
+    expect(titleDecorator.length).not.toEqual(0);
+    expect(dateDecorator.length).not.toEqual(0);
+    expect(metadataDecorator.length).not.toEqual(0);
+  });
+});
--- a/src/app/+browse-by/+browse-by-switcher/browse-by-decorator.ts
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-decorator.ts
@@ -0,0 +1,37 @@
+import { hasNoValue } from '../../shared/empty.util';
+
+export enum BrowseByType {
+  Title = 'title',
+  Metadata = 'metadata',
+  Date = 'date'
+}
+
+export const DEFAULT_BROWSE_BY_TYPE = BrowseByType.Metadata;
+
+const map = new Map();
+
+/**
+ * Decorator used for rendering Browse-By pages by type
+ * @param browseByType  The type of page
+ */
+export function rendersBrowseBy(browseByType: BrowseByType) {
+  return function decorator(component: any) {
+    if (hasNoValue(map.get(browseByType))) {
+      map.set(browseByType, component);
+    } else {
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}"`);
+    }
+  };
+}
+
+/**
+ * Get the component used for rendering a Browse-By page by type
+ * @param browseByType  The type of page
+ */
+export function getComponentByBrowseByType(browseByType) {
+  const comp = map.get(browseByType);
+  if (hasNoValue(comp)) {
+    map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  return comp;
+}
--- a/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="browseByComponent | async"></ng-container>
--- a/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.spec.ts
@@ -0,0 +1,55 @@
+import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ENV_CONFIG, GLOBAL_CONFIG } from '../../../config';
+import { ActivatedRoute } from '@angular/router';
+import * as decorator from './browse-by-decorator';
+import createSpy = jasmine.createSpy;
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+
+describe('BrowseBySwitcherComponent', () => {
+  let comp: BrowseBySwitcherComponent;
+  let fixture: ComponentFixture<BrowseBySwitcherComponent>;
+
+  const types = ENV_CONFIG.browseBy.types;
+
+  const params = new BehaviorSubject(createParamsWithId('initialValue'));
+
+  const activatedRouteStub = {
+    params: params
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BrowseBySwitcherComponent ],
+      providers: [
+        { provide: GLOBAL_CONFIG, useValue: ENV_CONFIG },
+        { provide: ActivatedRoute, useValue: activatedRouteStub }
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(BrowseBySwitcherComponent);
+    comp = fixture.componentInstance;
+    spyOnProperty(decorator, 'getComponentByBrowseByType').and.returnValue(createSpy('getComponentByItemType'));
+  }));
+
+  types.forEach((type) => {
+    describe(`when switching to a browse-by page for "${type.id}"`, () => {
+      beforeEach(() => {
+        params.next(createParamsWithId(type.id));
+        fixture.detectChanges();
+      });
+
+      it(`should call getComponentByBrowseByType with type "${type.type}"`, () => {
+        expect(decorator.getComponentByBrowseByType).toHaveBeenCalledWith(type.type);
+      });
+    });
+  });
+});
+
+export function createParamsWithId(id) {
+  return { id: id };
+}
--- a/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
@@ -0,0 +1,40 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
+import { map, tap } from 'rxjs/operators';
+import { getComponentByBrowseByType } from './browse-by-decorator';
+
+@Component({
+  selector: 'ds-browse-by-switcher',
+  templateUrl: './browse-by-switcher.component.html'
+})
+/**
+ * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
+ */
+export class BrowseBySwitcherComponent implements OnInit {
+
+  /**
+   * Resolved browse-by component
+   */
+  browseByComponent: Observable<any>;
+
+  public constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+                     protected route: ActivatedRoute) {
+  }
+
+  /**
+   * Fetch the correct browse-by component by using the relevant config from environment.js
+   */
+  ngOnInit(): void {
+    this.browseByComponent = this.route.params.pipe(
+      map((params) => {
+        const id = params.id;
+        return this.config.browseBy.types.find((config: BrowseByTypeConfig) => config.id === id);
+      }),
+      map((config: BrowseByTypeConfig) => getComponentByBrowseByType(config.type))
+    );
+  }
+
+}
--- a/src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.spec.ts
+++ b/src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.spec.ts
@@ -17,6 +17,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import { MockRouter } from '../../shared/mocks/mock-router';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';

 describe('BrowseByTitlePageComponent', () => {
  let comp: BrowseByTitlePageComponent;
@@ -52,7 +53,7 @@ describe('BrowseByTitlePageComponent', () => {
  };

  const mockDsoService = {
-    findById: () => observableOf(new RemoteData(false, false, true, null, mockCommunity))
+    findById: () => createSuccessfulRemoteDataObject$(mockCommunity)
  };

  const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
--- a/src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.ts
+++ b/src/app/+browse-by/+browse-by-title-page/browse-by-title-page.component.ts
@@ -1,6 +1,5 @@
 import { combineLatest as observableCombineLatest } from 'rxjs';
 import { Component } from '@angular/core';
-import { ItemDataService } from '../../core/data/item-data.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { hasValue } from '../../shared/empty.util';
 import {
@@ -11,6 +10,7 @@ import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { BrowseByType, rendersBrowseBy } from '../+browse-by-switcher/browse-by-decorator';

@Component({
  selector: 'ds-browse-by-title-page',
@@ -20,6 +20,7 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 /**
 * Component for browsing items by title (dc.title)
 */
+@rendersBrowseBy(BrowseByType.Title)
 export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {

  public constructor(protected route: ActivatedRoute,
@@ -41,8 +42,8 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
          return Object.assign({}, params, queryParams, data);
        })
        .subscribe((params) => {
-          this.metadata = params.metadata || this.defaultMetadata;
-          this.updatePageWithItems(browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.metadata), undefined);
+          this.browseId = params.id || this.defaultBrowseId;
+          this.updatePageWithItems(browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.browseId), undefined);
          this.updateParent(params.scope)
        }));
    this.updateStartsWithTextOptions();
--- a/src/app/+browse-by/browse-by-guard.spec.ts
+++ b/src/app/+browse-by/browse-by-guard.spec.ts
@@ -1,6 +1,7 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
 import { of as observableOf } from 'rxjs';
+import { ENV_CONFIG } from '../../config';

 describe('BrowseByGuard', () => {
  describe('canActivate', () => {
@@ -11,20 +12,20 @@ describe('BrowseByGuard', () => {
    const name = 'An interesting DSO';
    const title = 'Author';
    const field = 'Author';
-    const metadata = 'author';
+    const id = 'author';
    const metadataField = 'dc.contributor';
    const scope = '1234-65487-12354-1235';
    const value = 'Filter';

    beforeEach(() => {
      dsoService = {
-        findById: (id: string) => observableOf({ payload: { name: name }, hasSucceeded: true })
+        findById: (dsoId: string) => observableOf({ payload: { name: name }, hasSucceeded: true })
      };

      translateService = {
        instant: () => field
      };
-      guard = new BrowseByGuard(dsoService, translateService);
+      guard = new BrowseByGuard(ENV_CONFIG, dsoService, translateService);
    });

    it('should return true, and sets up the data correctly, with a scope and value', () => {
@@ -34,7 +35,7 @@ describe('BrowseByGuard', () => {
          metadataField,
        },
        params: {
-          metadata,
+          id,
        },
        queryParams: {
          scope,
@@ -47,7 +48,7 @@ describe('BrowseByGuard', () => {
          (canActivate) => {
            const result = {
                title,
-                metadata,
+                id,
                metadataField,
                collection: name,
                field,
@@ -66,7 +67,7 @@ describe('BrowseByGuard', () => {
          metadataField,
        },
        params: {
-          metadata,
+          id,
        },
        queryParams: {
          scope
@@ -79,7 +80,7 @@ describe('BrowseByGuard', () => {
          (canActivate) => {
            const result = {
                title,
-                metadata,
+                id,
                metadataField,
                collection: name,
                field,
@@ -98,7 +99,7 @@ describe('BrowseByGuard', () => {
          metadataField,
        },
        params: {
-          metadata,
+          id,
        },
        queryParams: {
          value
@@ -110,7 +111,7 @@ describe('BrowseByGuard', () => {
          (canActivate) => {
            const result = {
                title,
-                metadata,
+                id,
                metadataField,
                collection: '',
                field,
--- a/src/app/+browse-by/browse-by-guard.ts
+++ b/src/app/+browse-by/browse-by-guard.ts
@@ -1,11 +1,12 @@
 import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
-import { hasValue } from '../shared/empty.util';
+import { hasNoValue, hasValue } from '../shared/empty.util';
 import { map } from 'rxjs/operators';
 import { getSucceededRemoteData } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../config';

@Injectable()
 /**
@@ -13,36 +14,43 @@ import { of as observableOf } from 'rxjs';
 */
 export class BrowseByGuard implements CanActivate {

-  constructor(protected dsoService: DSpaceObjectDataService,
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+              protected dsoService: DSpaceObjectDataService,
              protected translate: TranslateService) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const title = route.data.title;
-    const metadata = route.params.metadata || route.queryParams.metadata || route.data.metadata;
-    const metadataField = route.data.metadataField;
+    const id = route.params.id || route.queryParams.id || route.data.id;
+    let metadataField = route.data.metadataField;
+    if (hasNoValue(metadataField) && hasValue(id)) {
+      const config = this.config.browseBy.types.find((conf) => conf.id === id);
+      if (hasValue(config) && hasValue(config.metadataField)) {
+        metadataField = config.metadataField;
+      }
+    }
    const scope = route.queryParams.scope;
    const value = route.queryParams.value;
-    const metadataTranslated = this.translate.instant('browse.metadata.' + metadata);
+    const metadataTranslated = this.translate.instant('browse.metadata.' + id);
    if (hasValue(scope)) {
      const dsoAndMetadata$ = this.dsoService.findById(scope).pipe(getSucceededRemoteData());
      return dsoAndMetadata$.pipe(
        map((dsoRD) => {
          const name = dsoRD.payload.name;
-          route.data = this.createData(title, metadata, metadataField, name, metadataTranslated, value);
+          route.data = this.createData(title, id, metadataField, name, metadataTranslated, value);
          return true;
        })
      );
    } else {
-      route.data = this.createData(title, metadata, metadataField, '', metadataTranslated, value);
+      route.data = this.createData(title, id, metadataField, '', metadataTranslated, value);
      return observableOf(true);
    }
  }

-  private createData(title, metadata, metadataField, collection, field, value) {
+  private createData(title, id, metadataField, collection, field, value) {
    return {
      title: title,
-      metadata: metadata,
+      id: id,
      metadataField: metadataField,
      collection: collection,
      field: field,
--- a/src/app/+browse-by/browse-by-routing.module.ts
+++ b/src/app/+browse-by/browse-by-routing.module.ts
@@ -1,16 +1,12 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { BrowseByTitlePageComponent } from './+browse-by-title-page/browse-by-title-page.component';
-import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseByDatePageComponent } from './+browse-by-date-page/browse-by-date-page.component';
 import { BrowseByGuard } from './browse-by-guard';
+import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';

@NgModule({
  imports: [
    RouterModule.forChild([
-      { path: 'title', component: BrowseByTitlePageComponent, canActivate: [BrowseByGuard], data: { metadata: 'title', title: 'browse.title' } },
-      { path: 'dateissued', component: BrowseByDatePageComponent, canActivate: [BrowseByGuard], data: { metadata: 'dateissued', metadataField: 'dc.date.issued', title: 'browse.title' } },
-      { path: ':metadata', component: BrowseByMetadataPageComponent, canActivate: [BrowseByGuard], data: { title: 'browse.title' } }
+      { path: ':id', component: BrowseBySwitcherComponent, canActivate: [BrowseByGuard], data: { title: 'browse.title' } }
    ])
  ]
 })
--- a/src/app/+browse-by/browse-by.module.ts
+++ b/src/app/+browse-by/browse-by.module.ts
@@ -8,6 +8,7 @@ import { BrowseService } from '../core/browse/browse.service';
 import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './+browse-by-date-page/browse-by-date-page.component';
 import { BrowseByGuard } from './browse-by-guard';
+import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';

@NgModule({
  imports: [
@@ -18,12 +19,18 @@ import { BrowseByGuard } from './browse-by-guard';
  declarations: [
    BrowseByTitlePageComponent,
    BrowseByMetadataPageComponent,
-    BrowseByDatePageComponent
+    BrowseByDatePageComponent,
+    BrowseBySwitcherComponent
  ],
  providers: [
    ItemDataService,
    BrowseService,
    BrowseByGuard
+  ],
+  entryComponents: [
+    BrowseByTitlePageComponent,
+    BrowseByMetadataPageComponent,
+    BrowseByDatePageComponent
  ]
 })
 export class BrowseByModule {
--- a/src/app/+collection-page/collection-form/collection-form.component.ts
+++ b/src/app/+collection-page/collection-form/collection-form.component.ts
@@ -1,12 +1,9 @@
 import { Component, Input } from '@angular/core';
-import {
-  DynamicInputModel,
-  DynamicTextAreaModel
-} from '@ng-dynamic-forms/core';
+import { DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
-import { ResourceType } from '../../core/shared/resource-type';
 import { Collection } from '../../core/shared/collection.model';
 import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
+import { NormalizedCollection } from '../../core/cache/models/normalized-collection.model';

 /**
 * Form used for creating and editing collections
@@ -23,9 +20,9 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> {
  @Input() dso: Collection = new Collection();

  /**
-   * @type {ResourceType.Collection} This is a collection-type form
+   * @type {Collection.type} This is a collection-type form
   */
-  protected type = ResourceType.Collection;
+  protected type = Collection.type;

  /**
   * The dynamic form fields used for creating/editing a collection
--- a/src/app/+collection-page/collection-page.component.scss
+++ b/src/app/+collection-page/collection-page.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
--- a/src/app/+collection-page/create-collection-page/create-collection-page.guard.spec.ts
+++ b/src/app/+collection-page/create-collection-page/create-collection-page.guard.spec.ts
@@ -1,9 +1,11 @@
 import { CreateCollectionPageGuard } from './create-collection-page.guard';
 import { MockRouter } from '../../shared/mocks/mock-router';
-import { RemoteData } from '../../core/data/remote-data';
 import { Community } from '../../core/shared/community.model';
-import { of as observableOf } from 'rxjs';
 import { first } from 'rxjs/operators';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$
+} from '../../shared/testing/utils';

 describe('CreateCollectionPageGuard', () => {
  describe('canActivate', () => {
@@ -15,11 +17,11 @@ describe('CreateCollectionPageGuard', () => {
      communityDataServiceStub = {
        findById: (id: string) => {
          if (id === 'valid-id') {
-            return observableOf(new RemoteData(false, false, true, null, new Community()));
+            return createSuccessfulRemoteDataObject$(new Community());
          } else if (id === 'invalid-id') {
-            return observableOf(new RemoteData(false, false, true, null, undefined));
+            return createSuccessfulRemoteDataObject$(undefined);
          } else if (id === 'error-id') {
-            return observableOf(new RemoteData(false, false, false, null, new Community()));
+            return createFailedRemoteDataObject$(new Community());
          }
        }
      };
--- a/src/app/+community-page/community-form/community-form.component.ts
+++ b/src/app/+community-page/community-form/community-form.component.ts
@@ -20,9 +20,9 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
  @Input() dso: Community = new Community();

  /**
-   * @type {ResourceType.Community} This is a community-type form
+   * @type {Community.type} This is a community-type form
   */
-  protected type = ResourceType.Community;
+  protected type = Community.type;

  /**
   * The dynamic form fields used for creating/editing a community
--- a/src/app/+community-page/community-page.component.scss
+++ b/src/app/+community-page/community-page.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
--- a/src/app/+community-page/create-community-page/create-community-page.guard.spec.ts
+++ b/src/app/+community-page/create-community-page/create-community-page.guard.spec.ts
@@ -1,9 +1,11 @@
 import { CreateCommunityPageGuard } from './create-community-page.guard';
 import { MockRouter } from '../../shared/mocks/mock-router';
-import { RemoteData } from '../../core/data/remote-data';
 import { Community } from '../../core/shared/community.model';
-import { of as observableOf } from 'rxjs';
 import { first } from 'rxjs/operators';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$
+} from '../../shared/testing/utils';

 describe('CreateCommunityPageGuard', () => {
  describe('canActivate', () => {
@@ -15,11 +17,11 @@ describe('CreateCommunityPageGuard', () => {
      communityDataServiceStub = {
        findById: (id: string) => {
          if (id === 'valid-id') {
-            return observableOf(new RemoteData(false, false, true, null, new Community()));
+            return createSuccessfulRemoteDataObject$(new Community());
          } else if (id === 'invalid-id') {
-            return observableOf(new RemoteData(false, false, true, null, undefined));
+            return createSuccessfulRemoteDataObject$(undefined);
          } else if (id === 'error-id') {
-            return observableOf(new RemoteData(false, false, false, null, new Community()));
+            return createFailedRemoteDataObject$(new Community());
          }
        }
      };
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
--- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
+++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
--- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
+++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.spec.ts
@@ -11,6 +11,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {By} from '@angular/platform-browser';
 import {of as observableOf,  Observable } from 'rxjs';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/testing/utils';

 describe('SubCommunityList Component', () => {
  let comp: CommunityPageSubCommunityListComponent;
@@ -40,8 +41,7 @@ describe('SubCommunityList Component', () => {
        { language: 'en_US', value: 'Test title' }
      ]
    },
-    subcommunities: observableOf(new RemoteData(true, true, true,
-      undefined, new PaginatedList(new PageInfo(), [])))
+    subcommunities: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), []))
  });

  const mockCommunity = Object.assign(new Community(), {
@@ -50,8 +50,7 @@ describe('SubCommunityList Component', () => {
          { language: 'en_US', value: 'Test title' }
        ]
      },
-      subcommunities: observableOf(new RemoteData(true, true, true,
-        undefined, new PaginatedList(new PageInfo(), subcommunities)))
+      subcommunities: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), subcommunities))
    })
  ;

--- a/src/app/+home-page/home-news/home-news.component.scss
+++ b/src/app/+home-page/home-news/home-news.component.scss
@@ -1,16 +1,14 @@
-@import '../../../styles/variables.scss';
-
 :host {
-  display: block;
-  margin-top: -$content-spacing;
-  margin-bottom: -$content-spacing;
+    display: block;
+    margin-top: -$content-spacing;
+    margin-bottom: -$content-spacing;
 }

 .display-3 {
-  word-break: break-word;
+    word-break: break-word;
 }

 .dspace-logo {
-  height: 110px;
-  width: 110px;
-}
+    height: 110px;
+    width: 110px;
+}
--- a/src/app/+home-page/home-page.component.default.scss
+++ b/src/app/+home-page/home-page.component.default.scss
--- a/src/app/+home-page/home-page.component.scss
+++ b/src/app/+home-page/home-page.component.scss
@@ -1 +1,2 @@
-@import '../../styles/variables.scss';
+:host {
+}
--- a/src/app/+item-page/edit-item-page/edit-item-operators.spec.ts
+++ b/src/app/+item-page/edit-item-page/edit-item-operators.spec.ts
@@ -2,6 +2,10 @@ import {RemoteData} from '../../core/data/remote-data';
 import {hot} from 'jasmine-marbles';
 import {Item} from '../../core/shared/item.model';
 import {findSuccessfulAccordingTo} from './edit-item-operators';
+import {
+  createFailedRemoteDataObject,
+  createSuccessfulRemoteDataObject
+} from '../../shared/testing/utils';

 describe('findSuccessfulAccordingTo', () => {
  let mockItem1;
@@ -19,11 +23,11 @@ describe('findSuccessfulAccordingTo', () => {
  });
  it('should return first successful RemoteData Observable that complies to predicate', () => {
    const testRD = {
-      a: new RemoteData(false, false, true, null, undefined),
-      b: new RemoteData(false, false, false, null, mockItem1),
-      c: new RemoteData(false, false, true, null, mockItem2),
-      d: new RemoteData(false, false, true, null, mockItem1),
-      e: new RemoteData(false, false, true, null, mockItem2),
+      a: createSuccessfulRemoteDataObject(undefined),
+      b: createFailedRemoteDataObject(mockItem1),
+      c: createSuccessfulRemoteDataObject(mockItem2),
+      d: createSuccessfulRemoteDataObject(mockItem1),
+      e: createSuccessfulRemoteDataObject(mockItem2),
    };

    const source = hot('abcde', testRD);
--- a/src/app/+item-page/edit-item-page/edit-item-page.component.scss
+++ b/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;
 }
--- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
+++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
--- a/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-delete/item-delete.component.spec.ts
@@ -17,6 +17,7 @@ import { By } from '@angular/platform-browser';
 import { ItemDeleteComponent } from './item-delete.component';
 import { getItemEditPath } from '../../item-page-routing.module';
 import { RestResponse } from '../../../core/cache/response.models';
+import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';

 let comp: ItemDeleteComponent;
 let fixture: ComponentFixture<ItemDeleteComponent>;
@@ -49,7 +50,7 @@ describe('ItemDeleteComponent', () => {

    routeStub = {
      data: observableOf({
-        item: new RemoteData(false, false, true, null, mockItem)
+        item: createSuccessfulRemoteDataObject(mockItem)
      })
    };

--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
+++ b/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;
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.spec.ts
@@ -6,17 +6,18 @@ import { ObjectUpdatesService } from '../../../../core/data/object-updates/objec
 import { of as observableOf } from 'rxjs';
 import { RemoteData } from '../../../../core/data/remote-data';
 import { PaginatedList } from '../../../../core/data/paginated-list';
-import { MetadataField } from '../../../../core/metadata/metadatafield.model';
 import { By } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { SharedModule } from '../../../../shared/shared.module';
 import { getTestScheduler } from 'jasmine-marbles';
 import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 import { TestScheduler } from 'rxjs/testing';
-import { MetadataSchema } from '../../../../core/metadata/metadataschema.model';
 import { FieldChangeType } from '../../../../core/data/object-updates/object-updates.actions';
 import { TranslateModule } from '@ngx-translate/core';
 import { MetadatumViewModel } from '../../../../core/shared/metadata.models';
+import { MetadataSchema } from '../../../../core/metadata/metadata-schema.model';
+import { MetadataField } from '../../../../core/metadata/metadata-field.model';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/testing/utils';

 let comp: EditInPlaceFieldComponent;
 let fixture: ComponentFixture<EditInPlaceFieldComponent>;
@@ -59,7 +60,7 @@ describe('EditInPlaceFieldComponent', () => {
    paginatedMetadataFields = new PaginatedList(undefined, [mdField1, mdField2, mdField3]);

    metadataFieldService = jasmine.createSpyObj({
-      queryMetadataFields: observableOf(new RemoteData(false, false, true, undefined, paginatedMetadataFields)),
+      queryMetadataFields: createSuccessfulRemoteDataObject$(paginatedMetadataFields),
    });
    objectUpdatesService = jasmine.createSpyObj('objectUpdatesService',
      {
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
@@ -4,13 +4,13 @@ import { RegistryService } from '../../../../core/registry/registry.service';
 import { cloneDeep } from 'lodash';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { MetadataField } from '../../../../core/metadata/metadatafield.model';
 import { InputSuggestion } from '../../../../shared/input-suggestions/input-suggestions.model';
 import { FieldChangeType } from '../../../../core/data/object-updates/object-updates.actions';
 import { FieldUpdate } from '../../../../core/data/object-updates/object-updates.reducer';
 import { ObjectUpdatesService } from '../../../../core/data/object-updates/object-updates.service';
 import { NgModel } from '@angular/forms';
 import { MetadatumViewModel } from '../../../../core/shared/metadata.models';
+import { MetadataField } from '../../../../core/metadata/metadata-field.model';

@Component({
  // tslint:disable-next-line:component-selector
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
+++ b/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;
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
@@ -20,13 +20,16 @@ import { RouterStub } from '../../../shared/testing/router-stub';
 import { GLOBAL_CONFIG } from '../../../../config';
 import { Item } from '../../../core/shared/item.model';
 import { FieldChangeType } from '../../../core/data/object-updates/object-updates.actions';
-import { RemoteData } from '../../../core/data/remote-data';
 import { MetadatumViewModel } from '../../../core/shared/metadata.models';
 import { RegistryService } from '../../../core/registry/registry.service';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { MetadataSchema } from '../../../core/metadata/metadataschema.model';
-import { MetadataField } from '../../../core/metadata/metadatafield.model';
 import { Metadata } from '../../../core/shared/metadata.utils';
+import { MetadataSchema } from '../../../core/metadata/metadata-schema.model';
+import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import {
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$
+} from '../../../shared/testing/utils';

 let comp: ItemMetadataComponent;
 let fixture: ComponentFixture<ItemMetadataComponent>;
@@ -116,18 +119,18 @@ describe('ItemMetadataComponent', () => {
      )
      ;
      itemService = jasmine.createSpyObj('itemService', {
-        update: observableOf(new RemoteData(false, false, true, undefined, item)),
+        update: createSuccessfulRemoteDataObject$(item),
        commitUpdates: {}
      });
      routeStub = {
        parent: {
-          data: observableOf({ item: new RemoteData(false, false, true, null, item) })
+          data: observableOf({ item: createSuccessfulRemoteDataObject(item) })
        }
      };
      paginatedMetadataFields = new PaginatedList(undefined, [mdField1, mdField2, mdField3]);

      metadataFieldService = jasmine.createSpyObj({
-        getAllMetadataFields: observableOf(new RemoteData(false, false, true, undefined, paginatedMetadataFields))
+        getAllMetadataFields:createSuccessfulRemoteDataObject$(paginatedMetadataFields)
      });
      scheduler = getTestScheduler();
      objectUpdatesService = jasmine.createSpyObj('objectUpdatesService',
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -17,9 +17,9 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../../config';
 import { TranslateService } from '@ngx-translate/core';
 import { RegistryService } from '../../../core/registry/registry.service';
-import { MetadataField } from '../../../core/metadata/metadatafield.model';
 import { MetadatumViewModel } from '../../../core/shared/metadata.models';
 import { Metadata } from '../../../core/shared/metadata.utils';
+import { MetadataField } from '../../../core/metadata/metadata-field.model';

@Component({
  selector: 'ds-item-metadata',
--- a/src/app/+item-page/edit-item-page/item-private/item-private.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-private/item-private.component.spec.ts
@@ -16,6 +16,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ItemPrivateComponent } from './item-private.component';
 import { RestResponse } from '../../../core/cache/response.models';
+import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';

 let comp: ItemPrivateComponent;
 let fixture: ComponentFixture<ItemPrivateComponent>;
@@ -50,7 +51,7 @@ describe('ItemPrivateComponent', () => {

    routeStub = {
      data: observableOf({
-        item: new RemoteData(false, false, true, null, {
+        item: createSuccessfulRemoteDataObject({
          id: 'fake-id'
        })
      })
--- a/src/app/+item-page/edit-item-page/item-public/item-public.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-public/item-public.component.spec.ts
@@ -16,6 +16,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ItemPublicComponent } from './item-public.component';
 import { RestResponse } from '../../../core/cache/response.models';
+import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';

 let comp: ItemPublicComponent;
 let fixture: ComponentFixture<ItemPublicComponent>;
@@ -50,7 +51,7 @@ describe('ItemPublicComponent', () => {

    routeStub = {
      data: observableOf({
-        item: new RemoteData(false, false, true, null, {
+        item: createSuccessfulRemoteDataObject({
          id: 'fake-id'
        })
      })
--- a/src/app/+item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-reinstate/item-reinstate.component.spec.ts
@@ -16,6 +16,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ItemReinstateComponent } from './item-reinstate.component';
 import { RestResponse } from '../../../core/cache/response.models';
+import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';

 let comp: ItemReinstateComponent;
 let fixture: ComponentFixture<ItemReinstateComponent>;
@@ -50,7 +51,7 @@ describe('ItemReinstateComponent', () => {

    routeStub = {
      data: observableOf({
-        item: new RemoteData(false, false, true, null, {
+        item: createSuccessfulRemoteDataObject({
          id: 'fake-id'
        })
      })
--- a/src/app/+item-page/edit-item-page/item-status/item-status.component.html
+++ b/src/app/+item-page/edit-item-page/item-status/item-status.component.html
@@ -12,7 +12,7 @@
    {{'item.edit.tabs.status.labels.itemPage' | translate}}:
  </div>
  <div class="col-9 float-left status-data" id="status-itemPage">
-    <a href="{{getItemPage((itemRD$ | async)?.payload)}}">{{getItemPage((itemRD$ | async)?.payload)}}</a>
+    <a [routerLink]="getItemPage((itemRD$ | async)?.payload)">{{getItemPage((itemRD$ | async)?.payload)}}</a>
  </div>

  <div *ngFor="let operation of operations" class="w-100 pt-3">
--- a/src/app/+item-page/edit-item-page/item-status/item-status.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-status/item-status.component.spec.ts
@@ -11,7 +11,7 @@ import { Item } from '../../../core/shared/item.model';
 import { By } from '@angular/platform-browser';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { of as observableOf } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
+import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';

 describe('ItemStatusComponent', () => {
  let comp: ItemStatusComponent;
@@ -27,7 +27,7 @@ describe('ItemStatusComponent', () => {

  const routeStub = {
      parent: {
-        data: observableOf({ item: new RemoteData(false, false, true, null, mockItem) })
+        data: observableOf({ item: createSuccessfulRemoteDataObject(mockItem) })
      }
    };

--- a/src/app/+item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-withdraw/item-withdraw.component.spec.ts
@@ -16,6 +16,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ItemWithdrawComponent } from './item-withdraw.component';
 import { By } from '@angular/platform-browser';
 import { RestResponse } from '../../../core/cache/response.models';
+import { createSuccessfulRemoteDataObject } from '../../../shared/testing/utils';

 let comp: ItemWithdrawComponent;
 let fixture: ComponentFixture<ItemWithdrawComponent>;
@@ -50,7 +51,7 @@ describe('ItemWithdrawComponent', () => {

    routeStub = {
      data: observableOf({
-        item: new RemoteData(false, false, true, null, {
+        item: createSuccessfulRemoteDataObject({
          id: 'fake-id'
        })
      })
--- a/src/app/+item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/simple-item-action/abstract-simple-item-action.component.spec.ts
@@ -17,6 +17,10 @@ import { By } from '@angular/platform-browser';
 import { of as observableOf } from 'rxjs';
 import { getItemEditPath } from '../../item-page-routing.module';
 import { RestResponse } from '../../../core/cache/response.models';
+import {
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$
+} from '../../../shared/testing/utils';

 /**
 * Test component that implements the AbstractSimpleItemActionComponent used to test the
@@ -65,12 +69,12 @@ describe('AbstractSimpleItemActionComponent', () => {
    });

    mockItemDataService = jasmine.createSpyObj({
-      findById: observableOf(new RemoteData(false, false, true, undefined, mockItem))
+      findById: createSuccessfulRemoteDataObject$(mockItem)
    });

    routeStub = {
      data: observableOf({
-        item: new RemoteData(false, false, true, null, {
+        item: createSuccessfulRemoteDataObject({
          id: 'fake-id'
        })
      })
--- a/src/app/+item-page/field-components/collections/collections.component.spec.ts
+++ b/src/app/+item-page/field-components/collections/collections.component.spec.ts
@@ -9,6 +9,10 @@ import { Item } from '../../../core/shared/item.model';
 import { of as observableOf } from 'rxjs';
 import { RemoteData } from '../../../core/data/remote-data';
 import { TranslateModule } from '@ngx-translate/core';
+import {
+  createFailedRemoteDataObject$,
+  createSuccessfulRemoteDataObject$
+} from '../../../shared/testing/utils';

 let collectionsComponent: CollectionsComponent;
 let fixture: ComponentFixture<CollectionsComponent>;
@@ -24,8 +28,8 @@ const mockCollection1: Collection = Object.assign(new Collection(), {
  }
 });

-const succeededMockItem: Item = Object.assign(new Item(), {owningCollection: observableOf(new RemoteData(false, false, true, null, mockCollection1))});
-const failedMockItem: Item = Object.assign(new Item(), {owningCollection: observableOf(new RemoteData(false, false, false, null, mockCollection1))});
+const succeededMockItem: Item = Object.assign(new Item(), {owningCollection: createSuccessfulRemoteDataObject$(mockCollection1)});
+const failedMockItem: Item = Object.assign(new Item(), {owningCollection: createFailedRemoteDataObject$(mockCollection1)});

 describe('CollectionsComponent', () => {
  beforeEach(async(() => {
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
+++ b/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;
--- a/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
+++ b/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
--- a/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
+++ b/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
--- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
+++ b/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;
--- a/src/app/+item-page/full/full-item-page.component.scss
+++ b/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;
--- a/src/app/+item-page/full/full-item-page.component.spec.ts
+++ b/src/app/+item-page/full/full-item-page.component.spec.ts
@@ -17,9 +17,13 @@ import { RemoteData } from '../../core/data/remote-data';
 import { of as observableOf } from 'rxjs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
+import {
+  createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$
+} from '../../shared/testing/utils';

 const mockItem: Item = Object.assign(new Item(), {
-  bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
  metadata: {
      'dc.title': [
        {
@@ -30,7 +34,7 @@ const mockItem: Item = Object.assign(new Item(), {
    }
 });
 const routeStub = Object.assign(new ActivatedRouteStub(), {
-  data: observableOf({ item: new RemoteData(false, false, true, null, mockItem) })
+  data: observableOf({ item: createSuccessfulRemoteDataObject(mockItem) })
 });
 const metadataServiceStub = {
  /* tslint:disable:no-empty */
--- a/src/app/+item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
+++ b/src/app/+item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
@@ -11,6 +11,7 @@ import { ItemPageFieldComponent } from './item-page-field.component';
 import { MetadataValuesComponent } from '../../../field-components/metadata-values/metadata-values.component';
 import { of as observableOf } from 'rxjs';
 import { MetadataMap, MetadataValue } from '../../../../core/shared/metadata.models';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/testing/utils';

 let comp: ItemPageFieldComponent;
 let fixture: ComponentFixture<ItemPageFieldComponent>;
@@ -52,7 +53,7 @@ describe('ItemPageFieldComponent', () => {

 export function mockItemWithMetadataFieldAndValue(field: string, value: string): Item {
  const item = Object.assign(new Item(), {
-    bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
+    bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
    metadata: new MetadataMap()
  });
  item.metadata[field] = [{
--- a/src/app/+item-page/simple/item-page.component.spec.ts
+++ b/src/app/+item-page/simple/item-page.component.spec.ts
@@ -16,9 +16,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { createRelationshipsObservable } from './item-types/shared/item.component.spec';
 import { of as observableOf } from 'rxjs';
+import {
+  createFailedRemoteDataObject$, createPendingRemoteDataObject$, createSuccessfulRemoteDataObject,
+  createSuccessfulRemoteDataObject$
+} from '../../shared/testing/utils';

 const mockItem: Item = Object.assign(new Item(), {
-  bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
  metadata: [],
  relationships: createRelationshipsObservable()
 });
@@ -33,7 +37,7 @@ describe('ItemPageComponent', () => {
    /* tslint:enable:no-empty */
  };
  const mockRoute = Object.assign(new ActivatedRouteStub(), {
-    data: observableOf({ item: new RemoteData(false, false, true, null, mockItem) })
+    data: observableOf({ item: createSuccessfulRemoteDataObject(mockItem) })
  });

  beforeEach(async(() => {
@@ -66,7 +70,8 @@ describe('ItemPageComponent', () => {

  describe('when the item is loading', () => {
    beforeEach(() => {
-      comp.itemRD$ = observableOf(new RemoteData(true, true, true, null, undefined));
+      comp.itemRD$ = createPendingRemoteDataObject$(undefined);
+      // comp.itemRD$ = observableOf(new RemoteData(true, true, true, null, undefined));
      fixture.detectChanges();
    });

@@ -78,7 +83,7 @@ describe('ItemPageComponent', () => {

  describe('when the item failed loading', () => {
    beforeEach(() => {
-      comp.itemRD$ = observableOf(new RemoteData(false, false, false, null, undefined));
+      comp.itemRD$ = createFailedRemoteDataObject$(undefined);
      fixture.detectChanges();
    });

--- a/src/app/+item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.html
@@ -21,6 +21,10 @@
      [fields]="['journalvolume.identifier.name']"
      [label]="'publication.page.volume-title'">
    </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="item"
+      [fields]="['dc.publisher']"
+      [label]="'publication.page.publisher'">
+    </ds-generic-item-page-field>
  </div>
  <div class="col-xs-12 col-md-6">
    <ds-metadata-representation-list
@@ -40,6 +44,11 @@
      [label]="'relationships.isJournalIssueOf' | translate">
    </ds-related-items>
    <ds-item-page-abstract-field [item]="item"></ds-item-page-abstract-field>
+    <ds-generic-item-page-field [item]="item"
+      [fields]="['dc.description']"
+      [label]="'publication.page.description'">
+    </ds-generic-item-page-field>
+
    <ds-generic-item-page-field [item]="item"
      [fields]="['dc.subject']"
      [separator]="','"
--- a/src/app/+item-page/simple/item-types/publication/publication.component.spec.ts
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.spec.ts
@@ -17,9 +17,10 @@ import { createRelationshipsObservable } from '../shared/item.component.spec';
 import { PublicationComponent } from './publication.component';
 import { of as observableOf } from 'rxjs';
 import { MetadataMap } from '../../../../core/shared/metadata.models';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/testing/utils';

 const mockItem: Item = Object.assign(new Item(), {
-  bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
  metadata: new MetadataMap(),
  relationships: createRelationshipsObservable()
 });
--- a/src/app/+item-page/simple/item-types/publication/publication.component.ts
+++ b/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'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfPublication')
      );

      this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfPublication'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfPublication')
      );

      this.journalIssues$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalIssueOfPublication'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalIssueOfPublication')
      );

    }
--- a/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts
+++ b/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts
@@ -2,16 +2,15 @@ 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 { hasValue } from '../../../../shared/empty.util';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
+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, flatMap, map } from 'rxjs/operators';
+import { distinctUntilChanged, flatMap, map, switchMap } from 'rxjs/operators';
 import { of as observableOf, zip as observableZip, combineLatest as observableCombineLatest } from 'rxjs';
 import { ItemDataService } from '../../../../core/data/item-data.service';
 import { Item } from '../../../../core/shared/item.model';
-import { RemoteData } from '../../../../core/data/remote-data';

 /**
 * Operator for comparing arrays using a mapping function
@@ -43,23 +42,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]) =>
-        relsCurrentPage.filter((rel: Relationship, idx: number) =>
-          hasValue(relTypesCurrentPage[idx]) && (relTypesCurrentPage[idx].leftLabel === label ||
-          relTypesCurrentPage[idx].rightLabel === label)
-        )
-      ),
+      switchMap(([relsCurrentPage, relTypesCurrentPage]) => {
+        const relatedItems$ = observableZip(...relsCurrentPage.map((rel: Relationship) =>
+            observableCombineLatest(
+              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) =>
@@ -79,10 +91,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
--- a/src/app/+item-page/simple/item-types/shared/item.component.spec.ts
+++ b/src/app/+item-page/simple/item-types/shared/item.component.spec.ts
@@ -26,6 +26,7 @@ import { MetadatumRepresentation } from '../../../../core/shared/metadata-repres
 import { ItemMetadataRepresentation } from '../../../../core/shared/metadata-representation/item/item-metadata-representation.model';
 import { MetadataMap, MetadataValue } from '../../../../core/shared/metadata.models';
 import { compareArraysUsing, compareArraysUsingIds } from './item-relationships-utils';
+import { createSuccessfulRemoteDataObject$ } from '../../../../shared/testing/utils';

 /**
 * Create a generic test for an item-page-fields component using a mockItem and the type of component
@@ -102,11 +103,13 @@ export function containsFieldInput(fields: DebugElement[], metadataKey: string):
 }

 export function createRelationshipsObservable() {
-  return observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), [
+  return createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [
    Object.assign(new Relationship(), {
-      relationshipType: observableOf(new RemoteData(false, false, true, null, new RelationshipType()))
+      relationshipType: createSuccessfulRemoteDataObject$(new RelationshipType()),
+      leftItem: createSuccessfulRemoteDataObject$(new Item()),
+      rightItem: createSuccessfulRemoteDataObject$(new Item())
    })
-  ])));
+  ]));
 }
 describe('ItemComponent', () => {
  const arr1 = [
@@ -335,15 +338,15 @@ describe('ItemComponent', () => {
      uuid: '1',
      metadata: new MetadataMap()
    });
-    mockItem.relationships = observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), [
+    mockItem.relationships = createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [
      Object.assign(new Relationship(), {
        uuid: '123',
        id: '123',
-        leftItem: observableOf(new RemoteData(false, false, true, null, mockItem)),
-        rightItem: observableOf(new RemoteData(false, false, true, null, relatedItem)),
-        relationshipType: observableOf(new RemoteData(false, false, true, null, new RelationshipType()))
+        leftItem: createSuccessfulRemoteDataObject$(mockItem),
+        rightItem: createSuccessfulRemoteDataObject$(relatedItem),
+        relationshipType: createSuccessfulRemoteDataObject$(new RelationshipType())
      })
-    ])));
+    ]));
    mockItem.metadata[metadataField] = [
      {
        value: 'Second value',
@@ -367,7 +370,7 @@ describe('ItemComponent', () => {
    const mockItemDataService = Object.assign({
      findById: (id) => {
        if (id === relatedItem.id) {
-          return observableOf(new RemoteData(false, false, true, null, relatedItem))
+          return createSuccessfulRemoteDataObject$(relatedItem)
        }
      }
    }) as ItemDataService;
--- a/src/app/+item-page/simple/related-items/related-items.component.spec.ts
+++ b/src/app/+item-page/simple/related-items/related-items.component.spec.ts
@@ -8,14 +8,15 @@ import { PageInfo } from '../../../core/shared/page-info.model';
 import { By } from '@angular/platform-browser';
 import { createRelationshipsObservable } from '../item-types/shared/item.component.spec';
 import { of as observableOf } from 'rxjs';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/testing/utils';

 const mockItem1: Item = Object.assign(new Item(), {
-  bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
  metadata: [],
  relationships: createRelationshipsObservable()
 });
 const mockItem2: Item = Object.assign(new Item(), {
-  bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
+  bitstreams: createSuccessfulRemoteDataObject$(new PaginatedList(new PageInfo(), [])),
  metadata: [],
  relationships: createRelationshipsObservable()
 });
--- a/src/app/+login-page/login-page.component.scss
+++ b/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;
--- a/src/app/+my-dspace-page/my-dspace-page.component.spec.ts
+++ b/src/app/+my-dspace-page/my-dspace-page.component.spec.ts
@@ -29,6 +29,7 @@ import { RoleDirective } from '../shared/roles/role.directive';
 import { RoleService } from '../core/roles/role.service';
 import { MockRoleService } from '../shared/mocks/mock-role-service';
 import { SearchFixedFilterService } from '../+search-page/search-filters/search-filter/search-fixed-filter.service';
+import { createSuccessfulRemoteDataObject$ } from '../shared/testing/utils';

 describe('MyDSpacePageComponent', () => {
  let comp: MyDSpacePageComponent;
@@ -46,7 +47,7 @@ describe('MyDSpacePageComponent', () => {
  pagination.currentPage = 1;
  pagination.pageSize = 10;
  const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
-  const mockResults = observableOf(new RemoteData(false, false, true, null, ['test', 'data']));
+  const mockResults = createSuccessfulRemoteDataObject$(['test', 'data']);
  const searchServiceStub = jasmine.createSpyObj('SearchService', {
    search: mockResults,
    getSearchLink: '/mydspace',
--- a/src/app/+search-page/normalized-search-result.model.ts
+++ b/src/app/+search-page/normalized-search-result.model.ts
@@ -1,10 +1,12 @@
-import { autoserialize, autoserializeAs } from 'cerialize';
+import { autoserialize, inheritSerialization } from 'cerialize';
 import { MetadataMap } from '../core/shared/metadata.models';
 import { ListableObject } from '../shared/object-collection/shared/listable-object.model';
+import { NormalizedObject } from '../core/cache/models/normalized-object.model';

 /**
 * Represents a normalized version of a search result object of a certain DSpaceObject
 */
+@inheritSerialization(NormalizedObject)
 export class NormalizedSearchResult implements ListableObject {
  /**
   * The UUID of the DSpaceObject that was found
--- a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';

 .filters {
    .toggle-more-filters a {
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
@@ -1,9 +1,9 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
-                                                           [routerLink]="[getSearchLink()]"
-                                                           [queryParams]="addQueryParams" queryParamsHandling="merge">
-    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
-    <span class="filter-value px-1">{{filterValue.value}}</span>
-    <span class="float-right filter-value-count ml-auto">
+   [routerLink]="[getSearchLink()]"
+   [queryParams]="addQueryParams" queryParamsHandling="merge">
+  <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+  <span class="filter-value px-1">{{filterValue.value}}</span>
+  <span class="float-right filter-value-count ml-auto">
                        <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                    </span>
-</a>
+</a>
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
    color: $body-color;
    &:hover, &focus {
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
+++ b/src/app/+search-page/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="float-right filter-value-count ml-auto">
+  <span class="filter-value px-1">{{filterValue.label}}</span>
+  <span class="float-right filter-value-count ml-auto">
                        <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                    </span>
 </a>
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
+++ b/src/app/+search-page/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.scss';
-
 a {
    color: $link-color;
    &:hover {
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
@@ -18,6 +18,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',
 })

--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
+++ b/src/app/+search-page/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.scss';
-
 a {
    color: $body-color;
    &:hover, &focus {
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`@import '../../../../styles/variables.scss';`
				`@@ -0,0 +1 @@`
				`<ng-container *ngComponentOutlet="browseByComponent \| async"></ng-container>`