refactor(rest-explorer): use indexTitle when available

mrmodise · dhmlau · commit f6772950bd24 · 2021-07-13T21:55:38.000-04:00
Signed-off-by: mrmodise &lt;modisemorebodi@gmail.com&gt;
diff --git a/packages/rest-explorer/README.md b/packages/rest-explorer/README.md
@@ -44,6 +44,23 @@ this.bind(RestExplorerBindings.CONFIG).to({
 });
 ```
 
+Similarly, the index page title for the explorer can be customized via
+RestExplorer configuration as follows:
+
+```ts
+this.configure(RestExplorerBindings.COMPONENT).to({
+  indexTitle: 'My LoopBack API Explorer',
+});
+```
+
+Or:
+
+```ts
+this.bind(RestExplorerBindings.CONFIG).to({
+  indexTitle: 'My LoopBack API Explorer',
+});
+```
+
 ### Advanced Configuration and Reverse Proxies
 
 By default, the component will add an additional OpenAPI spec endpoint, in the
diff --git a/packages/rest-explorer/src/__tests__/acceptance/rest-explorer.acceptance.ts b/packages/rest-explorer/src/__tests__/acceptance/rest-explorer.acceptance.ts
@@ -184,6 +184,16 @@ describe('API Explorer (acceptance)', () => {
         .expect('content-type', /html/)
         .expect(/TEST LoopBack/);
     });
+
+    it('honors custom explorer title', async () => {
+      await givenAppWithCustomExplorerConfig(undefined, {
+        indexTitle: 'Custom LoopBack API Explorer',
+      });
+
+      await request
+        .get('/explorer/')
+        .expect(200, /<title>Custom LoopBack API Explorer/);
+    });
   });
 
   context('with custom basePath', () => {
diff --git a/packages/rest-explorer/src/rest-explorer.controller.ts b/packages/rest-explorer/src/rest-explorer.controller.ts
@@ -31,6 +31,7 @@ export class ExplorerController {
   private useSelfHostedSpec: boolean;
   private swaggerThemeFile: string;
   private indexTemplatePath: string;
+  private indexTemplateTitle: string;
 
   constructor(
     @inject(RestBindings.CONFIG, {optional: true})
@@ -48,6 +49,8 @@ export class ExplorerController {
     this.indexTemplatePath =
       explorerConfig.indexTemplatePath ??
       path.resolve(__dirname, '../templates/index.html.ejs');
+    this.indexTemplateTitle =
+      explorerConfig?.indexTitle ?? 'LoopBack API Explorer';
   }
 
   indexRedirect() {
@@ -65,6 +68,7 @@ export class ExplorerController {
   index() {
     const swaggerThemeFile = this.swaggerThemeFile;
     let openApiSpecUrl = this.openApiSpecUrl;
+    const indexTemplateTitle = this.indexTemplateTitle;
 
     // if using self-hosted openapi spec, then the path to use is always the
     // exact relative path, and no base path logic needs to be applied
@@ -87,6 +91,7 @@ export class ExplorerController {
     const data = {
       openApiSpecUrl,
       swaggerThemeFile,
+      indexTemplateTitle,
     };
 
     if (prevIndexTemplatePath !== this.indexTemplatePath) {
diff --git a/packages/rest-explorer/src/rest-explorer.types.ts b/packages/rest-explorer/src/rest-explorer.types.ts
@@ -37,4 +37,7 @@ export type RestExplorerConfig = {
   templates/index.html.ejs
   */
   indexTemplatePath?: string;
+
+  // Index page title
+  indexTitle?: string;
 };
diff --git a/packages/rest-explorer/templates/index.html.ejs b/packages/rest-explorer/templates/index.html.ejs
@@ -4,7 +4,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>LoopBack API Explorer</title>
+  <title><%- indexTemplateTitle %></title>
   <link rel="stylesheet" type="text/css" href="<%- swaggerThemeFile %>">
   <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
   <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
