@thepalaceproject/circulation-admin 0.0.5 → 0.0.8

package/package.json

@@ -15,15 +15,16 @@
   "scripts": {
     "prepublish": "npm run prod",
     "lint": "tslint -c tslint.json src/*.ts src/*.tsx src/**/*.ts src/**/*.tsx src/**/**/*.ts src/**/**/*.tsx && sass-lint -c .sass-lint.yml -v -q",
-    "test": "npm run lint && tsc && cp -r src/stylesheets lib && mocha --require lib/testHelper.js lib/__tests__/*.js lib/**/__tests__/*.js lib/**/**/__tests__/*.js",
+    "test": "npm run lint && tsc && cp -r src/stylesheets lib && cp -r src/images lib && mocha --require lib/testHelper.js lib/__tests__/*.js lib/**/__tests__/*.js lib/**/**/__tests__/*.js",
     "test-list": "mocha --require lib/testHelper.js lib/__tests__/*.js lib/**/__tests__/*.js lib/**/**/__tests__/*.js --reporter ./testReporter.js",
-    "test-file": "npm run lint && tsc && cp -r src/stylesheets lib && mocha --require lib/testHelper.js",
+    "test-file": "npm run lint && tsc && cp -r src/stylesheets lib && cp -r src/images lib && mocha --require lib/testHelper.js",
     "test-browser": "npm run test-chrome && npm run test-firefox",
     "test-chrome": "node_modules/.bin/selenium-standalone install && nightwatch -e chrome",
     "test-firefox": "node_modules/.bin/selenium-standalone install && nightwatch -e firefox",
-    "dev": "webpack --watch --progress --display-modules --config webpack.dev.config",
+    "dev": "webpack --watch --progress --config webpack.dev.config",
+    "dev-server": "webpack serve --progress --hot --config webpack.dev-server.config",
     "dev-test-axe": "TEST_AXE=true npm run dev",
-    "prod": "webpack -p --progress --display-modules --config webpack.prod.config",
+    "prod": "webpack --progress --config webpack.prod.config",
     "build-docs": "typedoc --tsconfig tsconfig.json"
   },
   "dependencies": {
@@ -62,6 +63,7 @@
     "chai": "4.2.0",
     "clean-webpack-plugin": "^2.0.1",
     "colors-cli": "^1.0.27",
+    "copy-webpack-plugin": "6.4.0",
     "css-loader": "^5.2.4",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.12.1",
@@ -98,7 +100,8 @@
     "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "2.2.0",
     "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
+    "webpack-cli": "^4.9.0",
+    "webpack-dev-server": "^4.3.1",
     "webpack-merge": "^4.2.1"
   },
   "husky": {
@@ -111,5 +114,5 @@
     "*.{js,jsx,ts,tsx,css,md}": "prettier --write",
     "*.{js,css,md}": "prettier --write"
   },
-  "version": "0.0.5"
+  "version": "0.0.8"
 }

package/tests/browser/navigate.js

@@ -110,23 +110,23 @@ module.exports = {
             .verify.noError()
             .verify.urlEquals(bookUrl)
             .verify.containsText(bookTitleSelector, bookTitle)
-            
+
             // go to the edit tab
             .click(editTabSelector)
             .waitForElementPresent(titleInputSelector, 5000)
             .verify.urlContains("tab/edit")
             .verify.value(titleInputSelector, bookTitle)
-            
+
             // go to the classifications tab
             .click(classificationsTabSelector)
             .waitForElementPresent(genreInputSelector, 5000)
             .verify.urlContains("tab/classifications")
-            
+
             // go to the image cover tab
             .click(coverTabSelector)
             .waitForElementPresent(coverInputSelector, 5000)
             .verify.urlContains("tab/cover")
-            
+
             // go to the complaints tab
             .click(complaintsTabSelector)
             .waitForElementPresent(complaintInputSelector, 5000)
@@ -140,7 +140,7 @@ module.exports = {
             .click(listsTabSelector)
             .waitForElementPresent(listInputSelector, 5000)
             .verify.urlContains("tab/list")
-            
+
             // go back to the complaints tab
             .back()
             // go back to the cover tab
@@ -217,7 +217,7 @@ module.exports = {
       circulationAllStatsSelector,
     } = catalogPage.elements;
     const { nthBreadcrumbSelector } = catalogPage;
-    
+
     browser
       .goHome()
       .getAttribute(nthBreadcrumbSelector(1), "title", function(result) {
@@ -233,7 +233,7 @@ module.exports = {
               .assert.noError()
               .verify.elementPresent(circulationLibraryStatsSelector)
               .verify.elementPresent(circulationAllStatsSelector)
-              .verify.titleContains("Circulation Manager - Dashboard")
+              .verify.titleContains("Palace Collection Manager - Dashboard")
 
               // click the main navigation link
               .click(catalogSelector)
@@ -241,7 +241,7 @@ module.exports = {
               .assert.noError()
               .verify.elementPresent(nthBreadcrumbSelector(1))
               .verify.urlEquals(catalogUrl)
-              .verify.titleContains(`Circulation Manager - ${libraryName}`);
+              .verify.titleContains(`Palace Collection Manager - ${libraryName}`);
           });
         });
       });
@@ -291,4 +291,4 @@ module.exports = {
   after: (browser) => {
     browser.end();
   }
-};
+};

package/webpack.common.js

@@ -5,6 +5,7 @@ const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
 /* eslint-enable @typescript-eslint/no-var-requires */
 
 module.exports = {
@@ -29,6 +30,10 @@ module.exports = {
     new webpack.DefinePlugin({
       "process.env.TEST_AXE": JSON.stringify(process.env.TEST_AXE),
     }),
+    // Publish the logo to dist.
+    new CopyPlugin({
+      patterns: ["src/images/PalaceCollectionManagerLogo.svg"],
+    }),
   ],
   optimization: {
     minimizer: [new TerserPlugin({ terserOptions: { compress: false } })],

package/webpack.dev-server.config.js

@@ -0,0 +1,187 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+/**
+ * This webpack config establishes a proxy server to enable a local build of circulation-admin to
+ * connect to a remote Circulation Manager back-end. Requests for webpack assets are served from
+ * memory; other requests are proxied to the specified Circulation Manager.
+ *
+ * Usage:
+ *   npm run dev-server -- --env=backend=https://gorgon.tpp-qa.lyrasistechnology.org
+ * or
+ *   npx webpack serve --config webpack.dev-server.config --env=backend=https://gorgon.tpp-qa.lyrasistechnology.org
+ *
+ * This makes the circulation-admin webapp available at http://localhost:8080/admin.
+ */
+
+const {
+  createProxyMiddleware,
+  responseInterceptor,
+} = require("http-proxy-middleware");
+
+const merge = require("webpack-merge");
+const { URL } = require("url");
+const dev = require("./webpack.dev.config.js");
+
+/**
+ * The public path to local webpack assets. This is chosen to have low chance of collision with any
+ * path on the back-end (e.g., a library ID, or "/admin"). This should start and end with slashes.
+ */
+const devAssetsPublicPath = "/webpack-dev-assets/";
+
+/**
+ * Build the webpack configuration.
+ * See https://webpack.js.org/configuration/configuration-types/#exporting-a-function
+ *
+ * @param {object} env The environment.
+ * @returns The webpack configuration.
+ */
+module.exports = (env) => {
+  const { backend } = env;
+
+  if (!backend) {
+    console.error("Please specify the URL of a Circulation Manager back-end.");
+
+    console.error(
+      "Example: npm run dev-server -- --env=backend=https://gorgon.tpp-qa.lyrasistechnology.org"
+    );
+
+    throw "No back-end URL was specified.";
+  }
+
+  console.info(`Using Circulation Manager back-end: ${backend}`);
+
+  const backendUrl = new URL(backend);
+
+  /**
+   * Rewrite a location header (as received in a 3xx response). This changes back-end URLs to
+   * point to the local server instead. The CM may redirect to a URL that contains a "redirect"
+   * parameter that contains another URL. The "redirect" parameter is also rewritten.
+   *
+   * @param res The response.
+   * @param req The request.
+   */
+  const rewriteLocationHeader = (res, req) => {
+    const location = res.getHeader("location");
+
+    if (!location) {
+      return;
+    }
+
+    const locationUrl = new URL(location);
+
+    if (locationUrl.host !== backendUrl.host) {
+      return;
+    }
+
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return;
+    }
+
+    locationUrl.protocol = "http";
+    locationUrl.host = requestHost;
+
+    const redirectParam = locationUrl.searchParams.get("redirect");
+
+    if (redirectParam) {
+      const redirectUrl = new URL(redirectParam);
+
+      if (redirectUrl.host == backendUrl.host) {
+        redirectUrl.protocol = "http";
+        redirectUrl.host = requestHost;
+
+        locationUrl.searchParams.set("redirect", redirectUrl.href);
+      }
+    }
+
+    res.setHeader("location", locationUrl.href);
+  };
+
+  /**
+   * Rewrites an OPDS response. This changes back-end URLs in the feed to point to the local server
+   * instead. This is a simple find-and-replace.
+   *
+   * @param responseBuffer A buffer containing the response body.
+   * @param req The request.
+   * @returns
+   */
+  const rewriteOPDS = (responseBuffer, req) => {
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return responseBuffer;
+    }
+
+    const feed = responseBuffer.toString("utf8");
+
+    return feed.replace(
+      new RegExp(backendUrl.origin, "g"),
+      `http://${requestHost}`
+    );
+  };
+
+  /**
+   * Rewrites an HTML response. This changes jsdelivr CDN URLs in the page to point to the webpack
+   * assets on the local server instead. This is a simple find-and-replace.
+   *
+   * @param responseBuffer A buffer containing the response body.
+   * @param req The request.
+   * @returns
+   */
+  const rewriteHTML = (responseBuffer, req) => {
+    const requestHost = req.headers.host;
+
+    if (!requestHost) {
+      return responseBuffer;
+    }
+
+    const page = responseBuffer.toString("utf8");
+    const packageName = process.env.npm_package_name;
+    const cdnUrlPattern = `"https://cdn.jsdelivr.net/npm/${packageName}(@.*?)?/dist/(.*?)"`;
+
+    return page.replace(
+      new RegExp(cdnUrlPattern, "g"),
+      `"http://${requestHost}${devAssetsPublicPath}$2"`
+    );
+  };
+
+  const proxyMiddleware = createProxyMiddleware({
+    changeOrigin: true,
+    onProxyRes: responseInterceptor(
+      async (responseBuffer, proxyRes, req, res) => {
+        rewriteLocationHeader(res, req);
+
+        const contentType = res.getHeader("content-type");
+
+        if (contentType.startsWith("application/atom+xml")) {
+          return rewriteOPDS(responseBuffer, req);
+        }
+
+        if (contentType.startsWith("text/html")) {
+          return rewriteHTML(responseBuffer, req);
+        }
+
+        return responseBuffer;
+      }
+    ),
+    proxyTimeout: 5000,
+    secure: false,
+    selfHandleResponse: true,
+    target: backend,
+    timeout: 5000,
+  });
+
+  const config = merge(dev, {
+    devServer: {
+      onAfterSetupMiddleware: (devServer) => {
+        devServer.app.use("/", proxyMiddleware);
+      },
+    },
+    output: {
+      publicPath: devAssetsPublicPath,
+    },
+  });
+
+  return config;
+};

package/webpack.dev.config.js

@@ -3,7 +3,7 @@ const common = require('./webpack.common.js');
 
 var config = merge(common, {
   mode: "development",
-  devtool: "inline-source-map",
+  devtool: "eval-source-map",
 });
 
 module.exports = config;