From 6e55f5254ba4a8d962a3f3f80ad8fbf8ede34b72 Mon Sep 17 00:00:00 2001
From: Yann Tavernier <yann.tavernier@graviteesource.com>
Date: Wed, 17 Feb 2021 16:17:03 +0100
Subject: [PATCH] feat: global markdown template pages

---
 src/assets/logo_markdown_template.svg         | 10 ++++
 src/assets/logo_markdown_template_old2.svg    |  6 +++
 src/assets/logo_markdown_templateold.svg      | 24 +++++++++
 .../documentation-management.component.ts     | 17 +++++-
 .../documentation-management.html             | 18 +++++--
 .../documentation/edit-page.component.ts      | 15 +++++-
 src/components/documentation/edit-page.html   | 27 +++++-----
 .../documentation/new-page.component.ts       | 53 ++++++++++++++++++-
 src/components/documentation/new-page.html    | 45 +++++++++++-----
 src/components/documentation/page/_page.scss  |  9 ++++
 .../page/page-editormarkdown.component.ts     | 10 ++++
 .../page/page-editormarkdown.html             |  2 +-
 .../documentation/page/page.component.ts      |  5 ++
 src/components/documentation/page/page.html   |  5 +-
 src/index.scss                                |  4 ++
 src/services/documentation.service.ts         | 29 +++++++---
 src/services/environment.service.ts           | 18 +++----
 17 files changed, 240 insertions(+), 57 deletions(-)
 create mode 100644 src/assets/logo_markdown_template.svg
 create mode 100644 src/assets/logo_markdown_template_old2.svg
 create mode 100644 src/assets/logo_markdown_templateold.svg

diff --git a/src/assets/logo_markdown_template.svg b/src/assets/logo_markdown_template.svg
new file mode 100644
index 0000000000..865a71372e
--- /dev/null
+++ b/src/assets/logo_markdown_template.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<g style="fill:#000">
+	<path d="M451.8,128.4c3.4,3.4,5.4,8.1,5.4,12.9v352.4c0,10.1-8.2,18.3-18.3,18.3H73.1c-10.1,0-18.3-8.2-18.3-18.3V18.3
+		C54.9,8.2,63,0,73.1,0h242.7c4.9,0,9.5,1.9,13,5.4L451.8,128.4z M415,149.7L307.4,42.2v107.5H415z M206.9,306.8l33.8,76
+		c1.5,3.3,4.7,5.4,8.4,5.4h13.7c3.6,0,6.9-2.1,8.4-5.4l33.8-76.2v90c0,5,4.1,9.1,9.1,9.1h0h15.6c5,0,9.1-4.1,9.1-9.1V241.1
+		c0-5-4.1-9.1-9.1-9.1h-19.9c-3.6,0-6.9,2.2-8.4,5.5l-45.4,104.3l-45.4-104.3c-1.5-3.3-4.7-5.5-8.4-5.5h-20c-5,0-9.1,4.1-9.1,9.1
+		v155.4c0,5,4.1,9.1,9.1,9.1h15.5c5,0,9.1-4.1,9.1-9.1V306.8z"/>
+</g>
+</svg>
diff --git a/src/assets/logo_markdown_template_old2.svg b/src/assets/logo_markdown_template_old2.svg
new file mode 100644
index 0000000000..9175aef11e
--- /dev/null
+++ b/src/assets/logo_markdown_template_old2.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <rect style="fill:#000;stroke:#000;stroke-width:10" width="198" height="118" x="5" y="5" ry="10"/>
+  <path style="fill:#fff" d="m 30,98 0,-68 20,0 20,25 20,-25 20,0 0,68 -20,0 0,-39 -20,25 -20,-25 0,39 z"/>
+  <path style="fill:#fff" d="m 155,98 -30,-33 20,0 0,-35 20,0 0,35 20,0 z"/>
+</svg>
diff --git a/src/assets/logo_markdown_templateold.svg b/src/assets/logo_markdown_templateold.svg
new file mode 100644
index 0000000000..d173cbec65
--- /dev/null
+++ b/src/assets/logo_markdown_templateold.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+<g>
+	<g>
+		<path d="M491.383,0H20.617C9.23,0,0,9.23,0,20.617v470.765C0,502.77,9.23,512,20.617,512h470.765
+			C502.77,512,512,502.77,512,491.383V20.617C512,9.23,502.77,0,491.383,0z M470.765,470.765H41.235V41.235h429.53V470.765z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="20.617" y="173.187" width="471.452" height="41.235"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="298.266" y="193.804" width="41.235" height="298.266"/>
+	</g>
+</g>
+<g>
+	<g>
+		<rect x="20.617" y="318.196" width="298.266" height="41.235"/>
+	</g>
+</g>
+</svg>
diff --git a/src/components/documentation/documentation-management.component.ts b/src/components/documentation/documentation-management.component.ts
index d5c2efe4b6..a6430ce965 100644
--- a/src/components/documentation/documentation-management.component.ts
+++ b/src/components/documentation/documentation-management.component.ts
@@ -15,7 +15,12 @@
  */
 
 import NotificationService from '../../services/notification.service';
-import DocumentationService, {DocumentationQuery, FolderSituation, SystemFolderName} from '../../services/documentation.service';
+import DocumentationService, {
+  DocumentationQuery,
+  FolderSituation,
+  PageType,
+  SystemFolderName
+} from '../../services/documentation.service';
 import {StateService} from '@uirouter/core';
 import _ = require('lodash');
 import {IScope} from 'angular';
@@ -53,12 +58,20 @@ const DocumentationManagementComponent: ng.IComponentOptions = {
       this.systemFoldersById = _.keyBy(this.systemFolders, 'id');
 
       this.currentFolder = this.getFolder(this.rootDir);
-      this.supportedTypes = DocumentationService.supportedTypes(this.getFolderSituation(this.rootDir));
+      this.supportedTypes = DocumentationService
+                              .supportedTypes(this.getFolderSituation(this.rootDir))
+                              .filter(type => !this.apiId || type !== PageType.MARKDOWN_TEMPLATE);
       this.breadcrumb = this.generateBreadcrumb();
       $scope.renameFolder = false;
       $scope.translateFolder = false;
     };
 
+    this.isFolder = (type: string): boolean => PageType.FOLDER === type;
+    this.isLink = (type: string): boolean => PageType.LINK === type;
+    this.isSwagger = (type: string): boolean => PageType.SWAGGER === type;
+    this.isMarkdown = (type: string): boolean => PageType.MARKDOWN === type;
+    this.isMarkdownTemplate = (type: string): boolean => PageType.MARKDOWN_TEMPLATE === type;
+
     this.getFolderSituation = (folderId: string) => {
       if (!folderId) {
         return FolderSituation.ROOT;
diff --git a/src/components/documentation/documentation-management.html b/src/components/documentation/documentation-management.html
index a89e250b8e..cc6ba77b60 100644
--- a/src/components/documentation/documentation-management.html
+++ b/src/components/documentation/documentation-management.html
@@ -110,7 +110,7 @@ <h2>
                     </tbody>
                 </table>
             </md-table-container>
-            
+
             <div style="text-align: right">
                 <md-button permission permission-only="['environment-documentation-u', 'api-documentation-u']"
                     type="button"
@@ -219,15 +219,23 @@ <h2>
                             </ng-md-icon>
                         </td>
                         <td md-cell width="48px">
-                            <ng-md-icon ng-if="!page.published && page.type !== 'LINK'" icon="cloud_queue" ng-click="$ctrl.togglePublish(page)"
+                            <ng-md-icon ng-if="!page.published && !$ctrl.isLink(page.type)"
+                                        icon="{{$ctrl.isMarkdownTemplate(page.type) ? 'check_box_outline_blank' : 'cloud_queue'}}"
+                                        ng-click="$ctrl.togglePublish(page)"
                                         style="font-size: 24px; height: 24px;"
                                         permission permission-only="['environment-documentation-u', 'api-documentation-u']">
-                                <md-tooltip md-direction="top" md-visible="false">Publish this page</md-tooltip>
+                                <md-tooltip md-direction="top" md-visible="false">
+                                  {{$ctrl.isMarkdownTemplate(page.type) ? 'Make template available' : 'Publish this page'}}
+                                </md-tooltip>
                             </ng-md-icon>
-                            <ng-md-icon ng-if="page.published && page.type !== 'LINK'" icon="cloud_done" ng-click="$ctrl.togglePublish(page)"
+                            <ng-md-icon ng-if="page.published && !$ctrl.isLink(page.type)"
+                                        icon="{{$ctrl.isMarkdownTemplate(page.type) ? 'check_box' : 'cloud_done'}}"
+                                        ng-click="$ctrl.togglePublish(page)"
                                         style="font-size: 24px; height: 24px;"
                                         permission permission-only="['environment-documentation-u', 'api-documentation-u']">
-                                <md-tooltip md-direction="top" md-visible="false">Unpublish this page</md-tooltip>
+                                <md-tooltip md-direction="top" md-visible="false">
+                                  {{$ctrl.isMarkdownTemplate(page.type) ? 'Make template unavailable' : 'Unpublish this page'}}
+                                </md-tooltip>
                             </ng-md-icon>
                         </td>
                         <td md-cell width="76px" nowrap>
diff --git a/src/components/documentation/edit-page.component.ts b/src/components/documentation/edit-page.component.ts
index e1b7b45588..6341c48bb3 100644
--- a/src/components/documentation/edit-page.component.ts
+++ b/src/components/documentation/edit-page.component.ts
@@ -15,7 +15,11 @@
  */
 
 import NotificationService from '../../services/notification.service';
-import DocumentationService, { FolderSituation, SystemFolderName } from '../../services/documentation.service';
+import DocumentationService, {
+  FolderSituation,
+  PageType,
+  SystemFolderName
+} from '../../services/documentation.service';
 import { StateService } from '@uirouter/core';
 import { IScope } from 'angular';
 import UserService from '../../services/user.service';
@@ -126,6 +130,13 @@ const EditPageComponent: ng.IComponentOptions = {
 
     };
 
+    this.isFolder = (): boolean => PageType.FOLDER === this.page.type;
+    this.isLink = (): boolean => PageType.LINK === this.page.type;
+    this.isSwagger = (): boolean => PageType.SWAGGER === this.page.type;
+    this.isMarkdown = (): boolean => PageType.MARKDOWN === this.page.type;
+    this.isMarkdownTemplate = (): boolean => PageType.MARKDOWN_TEMPLATE === this.page.type;
+
+
     this.usedAsGeneralConditions = () => {
       return this.page.generalConditions;
     };
@@ -143,7 +154,7 @@ const EditPageComponent: ng.IComponentOptions = {
         parentId: this.page.id,
         configuration: {}
       };
-      if (this.page.type === 'MARKDOWN' || this.page.type === 'SWAGGER') {
+      if (this.isMarkdown() || this.isSwagger() || this.isMarkdownTemplate()) {
         this.currentTranslation.configuration.inheritContent = 'true';
       }
     };
diff --git a/src/components/documentation/edit-page.html b/src/components/documentation/edit-page.html
index e07a823774..76dc1e7c05 100644
--- a/src/components/documentation/edit-page.html
+++ b/src/components/documentation/edit-page.html
@@ -20,7 +20,7 @@
         <div>
             <md-icon md-svg-src="assets/logo_{{$ctrl.page.type | lowercase}}.svg" style="margin: 0 8px 12px 0;"></md-icon>
             <h1>{{$ctrl.page.name}}</h1>
-            <sup ng-if="('LINK' === $ctrl.page.type && $ctrl.page.configuration.inherit && $ctrl.page.configuration.inherit === 'true')">
+            <sup ng-if="($ctrl.isLink() && $ctrl.page.configuration.inherit && $ctrl.page.configuration.inherit === 'true')">
                 <ng-md-icon icon="lock" size="12" style="fill: black;">
                     <md-tooltip>Inherited</md-tooltip>
                 </ng-md-icon>
@@ -35,7 +35,7 @@ <h1>{{$ctrl.page.name}}</h1>
                        class="md-raised md-primary"
                        ng-click="$ctrl.toggleRename()"
                        aria-label="Rename"
-                       ng-if="'LINK' !== $ctrl.page.type || ('LINK' === $ctrl.page.type && (!$ctrl.page.configuration.inherit || $ctrl.page.configuration.inherit === 'false')) ">
+                       ng-if="!$ctrl.isLink() || ($ctrl.isLink() && (!$ctrl.page.configuration.inherit || $ctrl.page.configuration.inherit === 'false')) ">
                 Rename
             </md-button>
             <md-button ng-if="$ctrl.page.metadata.edit_url" type="button" style="padding: 0 6px;"
@@ -69,7 +69,7 @@ <h1>{{$ctrl.page.name}}</h1>
     </div>
 
     <!-- LINK-->
-    <div class="gv-form" ng-if="'LINK' === $ctrl.page.type">
+    <div class="gv-form" ng-if="$ctrl.isLink()">
         <h2></h2>
         <div class="gv-form-content" layout="column">
             <md-tabs md-dynamic-height md-selected="$ctrl.selectedTab">
@@ -250,7 +250,7 @@ <h2></h2>
     </div>
 
     <!-- SWAGGER or MARKDOWN-->
-    <div class="gv-form" ng-if="'FOLDER' !== $ctrl.page.type && 'LINK' !== $ctrl.page.type">
+    <div class="gv-form" ng-if="!$ctrl.isFolder() && !$ctrl.isLink()">
         <h2></h2>
         <div class="gv-form-content" layout="column">
 
@@ -266,7 +266,7 @@ <h2></h2>
                     <md-tab-body>
                         <div ng-if="$ctrl.currentTab === 'content'">
                             <!-- edit SWAGGER inline -->
-                            <div ng-if="'SWAGGER' === $ctrl.page.type" style="display: inline-block; width: 100%;">
+                            <div ng-if="$ctrl.isSwagger()" style="display: inline-block; width: 100%;">
                                 <div layout="row" style="max-height: 900px; overflow: auto;">
                                     <md-input-container class="md-block" flex="50" ng-if="$ctrl.canUpdate">
                                     <textarea
@@ -283,7 +283,7 @@ <h2></h2>
                             </div>
 
                             <!-- edit MARKDOWN inline -->
-                            <div ng-if="'MARKDOWN' === $ctrl.page.type" style="display: inline-block; width: 100%;">
+                            <div ng-if="$ctrl.isMarkdown() || $ctrl.isMarkdownTemplate()" style="display: inline-block; width: 100%;">
                                 <div class="md-block">
                                   <gv-page-editor-markdown ng-if="$ctrl.canUpdate" page="$ctrl.page" pages-to-link="$ctrl.pagesToLink"></gv-page-editor-markdown>
                                   <gv-page-markdown ng-if="!$ctrl.canUpdate" page="$ctrl.page"></gv-page-markdown>
@@ -373,7 +373,7 @@ <h4>Select a file to import:</h4>
 
                             <div ng-if="$ctrl.currentTranslation.configuration.inheritContent === 'false'">
                                 <!-- edit SWAGGER inline -->
-                                <div ng-if="'SWAGGER' === $ctrl.page.type" style="display: inline-block; width: 100%;">
+                                <div ng-if="$ctrl.isSwagger()" style="display: inline-block; width: 100%;">
                                     <div layout="row" style="max-height: 900px; overflow: auto;">
                                         <md-input-container class="md-block" flex="50" ng-if="$ctrl.canUpdate">
                                         <textarea
@@ -389,7 +389,7 @@ <h4>Select a file to import:</h4>
                                 </div>
 
                                 <!-- edit MARKDOWN inline -->
-                                <div ng-if="'MARKDOWN' === $ctrl.page.type" style="display: inline-block; width: 100%;">
+                                <div ng-if="$ctrl.isMarkdown() || $ctrl.isMarkdownTemplate()" style="display: inline-block; width: 100%;">
                                     <md-input-container class="md-block">
                                         <gv-page-editor-markdown ng-if="$ctrl.canUpdate" page="$ctrl.currentTranslation"></gv-page-editor-markdown>
                                         <gv-page-markdown ng-if="!$ctrl.canUpdate" page="$ctrl.currentTranslation"></gv-page-markdown>
@@ -406,7 +406,7 @@ <h4>Select a file to import:</h4>
                     <md-tab-label>Configuration</md-tab-label>
                     <md-tab-body>
                         <h3>General</h3>
-                        <md-input-container class="md-block">
+                        <md-input-container ng-if="!$ctrl.isMarkdownTemplate()" class="md-block">
                             <md-checkbox ng-model="$ctrl.page.homepage"
                                          aria-label="set as homepage"
                                          class="md-align-top-left"
@@ -416,15 +416,16 @@ <h3>General</h3>
                         </md-input-container>
                         <md-input-container class="md-block">
                             <md-checkbox ng-model="$ctrl.page.published"
-                                         aria-label="Published"
+                                         aria-label="{{!$ctrl.isMarkdownTemplate() ? 'Published' : 'Available'}}"
                                          class="md-align-top-left"
                                          flex
                                          ng-disabled="$ctrl.usedAsGeneralConditions()">
-                                {{($ctrl.usedAsGeneralConditions() ? 'Publish this page (Used as general conditions, publishing actions are disabled)' : 'Publish this page')}}
+                                {{($ctrl.usedAsGeneralConditions() ? 'Publish this page (Used as general conditions, publishing actions are disabled)'
+                                  : !$ctrl.isMarkdownTemplate() ? 'Publish this page' : 'Make template available')}}
                             </md-checkbox>
                         </md-input-container>
                         <!-- SWAGGER Configuration -->
-                        <div ng-if="$ctrl.page.type === 'SWAGGER'" layout="column">
+                        <div ng-if="$ctrl.isSwagger()" layout="column">
 
                             <div ng-if="$ctrl.shouldShowOpenApiDocFormat">
                                 <h3>OpenAPI documentation viewer: </h3>
@@ -525,7 +526,7 @@ <h3>Groups Authorizations</h3>
                 </md-tab>
 
                 <!-- Attached resources -->
-                <md-tab md-on-select="$ctrl.selectTab(5)" ng-if="$ctrl.canUpdate && $ctrl.page.type === 'MARKDOWN'">
+                <md-tab md-on-select="$ctrl.selectTab(5)" ng-if="$ctrl.canUpdate && $ctrl.isMarkdown()">
                     <md-tab-label>Attached resources</md-tab-label>
                     <md-tab-body>
                         <md-table-container>
diff --git a/src/components/documentation/new-page.component.ts b/src/components/documentation/new-page.component.ts
index 4f939aaaa3..fa83920d35 100644
--- a/src/components/documentation/new-page.component.ts
+++ b/src/components/documentation/new-page.component.ts
@@ -15,7 +15,13 @@
  */
 
 import NotificationService from '../../services/notification.service';
-import DocumentationService, { FolderSituation, SystemFolderName } from '../../services/documentation.service';
+import DocumentationService, {
+  DocumentationQuery,
+  FolderSituation,
+  Page,
+  PageType,
+  SystemFolderName
+} from '../../services/documentation.service';
 import { StateService } from '@uirouter/core';
 import { IScope } from 'angular';
 import _ = require('lodash');
@@ -60,7 +66,6 @@ const NewPageComponent: ng.IComponentOptions = {
       mode: 'javascript'
     };
 
-
     this.$onInit = () => {
       this.foldersById = _.keyBy(this.folders, 'id');
       this.systemFoldersById = _.keyBy(this.systemFolders, 'id');
@@ -72,6 +77,27 @@ const NewPageComponent: ng.IComponentOptions = {
         $state.go('management.settings.documentation', {parent: $state.params.parent});
       }
 
+      const q = new DocumentationQuery();
+      q.type = PageType.MARKDOWN_TEMPLATE;
+      q.published = true;
+      q.translated = true;
+      DocumentationService.search(q, null)
+        .then(response => {
+          this.templates = response.data;
+
+          if (this.templates.length > 0) {
+            const emptyPage: Page = {
+              name: 'Empty page',
+              content: '',
+              type: PageType.MARKDOWN_TEMPLATE,
+              parentId: ''
+            };
+            this.templates.unshift(emptyPage);
+            this.selectedTemplate = emptyPage;
+          }
+
+        });
+
       this.emptyFetcher = {
         'type': 'object',
         'id': 'empty',
@@ -89,6 +115,25 @@ const NewPageComponent: ng.IComponentOptions = {
 
     };
 
+    this.getPageName = (): string => {
+      switch (this.page.type) {
+        case PageType.FOLDER:
+          return 'New Folder';
+        case PageType.LINK:
+          return 'New Link';
+        case PageType.MARKDOWN_TEMPLATE:
+          return 'New Markdown Template';
+        default:
+          return 'New Page';
+      }
+    };
+
+    this.isFolder = (): boolean => PageType.FOLDER === this.page.type;
+    this.isLink = (): boolean => PageType.LINK === this.page.type;
+    this.isSwagger = (): boolean => PageType.SWAGGER === this.page.type;
+    this.isMarkdown = (): boolean => PageType.MARKDOWN === this.page.type;
+    this.isMarkdownTemplate = (): boolean => PageType.MARKDOWN_TEMPLATE === this.page.type;
+
     this.buildPageList = (pagesToFilter: any[], withRootFolder?: boolean) => {
       let pageList = _
         .filter(pagesToFilter, (p) => p.type === 'MARKDOWN' || p.type === 'SWAGGER' || (p.type === 'FOLDER' && this.getFolderSituation(p.id) !== FolderSituation.FOLDER_IN_SYSTEM_FOLDER))
@@ -187,6 +232,10 @@ const NewPageComponent: ng.IComponentOptions = {
       }
     };
 
+    this.onChangeMarkdownTemplate = () => {
+      this.page = {...this.page, content: this.selectedTemplate.content};
+    };
+
     this.save = () => {
       this.error = null;
       DocumentationService.create(this.page, this.apiId)
diff --git a/src/components/documentation/new-page.html b/src/components/documentation/new-page.html
index b4f9ff747e..62a32e824b 100644
--- a/src/components/documentation/new-page.html
+++ b/src/components/documentation/new-page.html
@@ -17,14 +17,12 @@
 -->
 <div class="gv-forms gv-forms-fluid" layout="column">
     <div>
-        <h1 ng-if="'FOLDER' !== $ctrl.page.type && 'LINK' !== $ctrl.page.type">New Page</h1>
-        <h1 ng-if="'FOLDER' === $ctrl.page.type">New Folder</h1>
-        <h1 ng-if="'LINK' === $ctrl.page.type">New Link</h1>
+        <h1>{{$ctrl.getPageName()}}</h1>
         <a ng-click="$ctrl.cancel()">Back to Documentation</a>
     </div>
 
     <!-- FOLDER -->
-    <div class="gv-form" ng-if="'FOLDER' === $ctrl.page.type">
+    <div class="gv-form" ng-if="$ctrl.isFolder()">
         <h2></h2>
         <div class="gv-form-content" layout="column">
             <form name="$ctrl.formNewFolder" ng-submit="$ctrl.save()" novalidate>
@@ -42,7 +40,7 @@ <h2></h2>
     </div>
 
     <!-- LINK -->
-    <div class="gv-form" ng-if="'LINK' === $ctrl.page.type">
+    <div class="gv-form" ng-if="$ctrl.isLink()">
         <h2></h2>
         <div class="gv-form-content" layout="column">
             <form name="$ctrl.formNewLink" ng-submit="$ctrl.save()" novalidate>
@@ -147,8 +145,8 @@ <h2></h2>
         </div>
     </div>
 
-    <!-- SWAGGER or MARKDOWN-->
-    <div class="gv-form" ng-if="'FOLDER' !== $ctrl.page.type && 'LINK' !== $ctrl.page.type">
+    <!-- SWAGGER, MARKDOWN or MARKDOWN_TEMPLATE-->
+    <div class="gv-form" ng-if="!$ctrl.isFolder() && !$ctrl.isLink()">
         <h2></h2>
         <div class="gv-form-content" layout="column">
             <div layout="row">
@@ -158,7 +156,7 @@ <h2></h2>
                     <input ng-model="$ctrl.page.name" required>
                 </md-input-container>
             </div>
-            <md-input-container class="md-block">
+            <md-input-container ng-if="!$ctrl.isMarkdownTemplate()" class="md-block gv-input-container-dense">
                 <md-checkbox ng-model="$ctrl.page.homepage"
                              aria-label="set as homepage"
                              class="md-warn md-align-top-left"
@@ -166,12 +164,12 @@ <h2></h2>
                     Set as homepage
                 </md-checkbox>
             </md-input-container>
-            <md-input-container class="md-block">
+            <md-input-container class="md-block gv-input-container-dense">
                 <md-checkbox ng-model="$ctrl.page.published"
-                                aria-label="Published"
+                                aria-label="{{!$ctrl.isMarkdownTemplate() ? 'Published' : 'Available'}}"
                                 class="md-align-top-left"
                                 flex>
-                    Publish this page
+                    {{!$ctrl.isMarkdownTemplate() ? 'Publish this page' : 'Make template available'}}
                 </md-checkbox>
             </md-input-container>
             <h3>How to get the content ?</h3>
@@ -182,7 +180,7 @@ <h3>How to get the content ?</h3>
             </md-radio-group>
 
             <!-- edit SWAGGER inline -->
-            <div ng-if="'inline' === getContentMode && 'SWAGGER' === $ctrl.page.type" style="display: inline-block; width: 100%;">
+            <div ng-if="'inline' === getContentMode && $ctrl.isSwagger()" style="display: inline-block; width: 100%;">
                 <h3>Type your documentation here:</h3>
                 <md-input-container class="md-block">
                         <textarea
@@ -196,8 +194,29 @@ <h3>Type your documentation here:</h3>
                 </md-input-container>
             </div>
 
+            <div layout-gt-sm="row">
+              <md-input-container ng-if="($ctrl.isMarkdown() || $ctrl.isMarkdownTemplate()) && $ctrl.templates.length > 0" flex-gt-xs>
+                <label>Template</label>
+                <md-select ng-model="$ctrl.selectedTemplate" ng-change="$ctrl.onChangeMarkdownTemplate()">
+                  <md-option  ng-repeat="template in $ctrl.templates"
+                              ng-value="template">
+                    <md-icon md-svg-src="assets/logo_{{template.type | lowercase}}.svg"></md-icon>
+                    <span style="font-style: italic; opacity: 0.5;">{{ template.parentPath }}</span>/{{ template.name }}
+                  </md-option>
+                </md-select>
+                <div class="hint">
+                  Choose a template
+                </div>
+              </md-input-container>
+            </div>
+
+            <div class="gv-page-info-banner" ng-hide="!$ctrl.page.content">
+              <ng-md-icon icon="info" class="gv-info"></ng-md-icon>
+              Selecting a template will override the current documentation.
+            </div>
+
             <!-- edit MARKDOWN inline -->
-            <div ng-if="'inline' === getContentMode && 'MARKDOWN' === $ctrl.page.type" style="display: inline-block; width: 100%;">
+            <div ng-if="'inline' === getContentMode && ($ctrl.isMarkdown() || $ctrl.isMarkdownTemplate())" style="display: inline-block; width: 100%;">
                 <h3>Type your documentation here:</h3>
                 <div class="md-block">
                     <gv-page-editor-markdown page="$ctrl.page" pages-to-link="$ctrl.pagesToLink"></gv-page-editor-markdown>
diff --git a/src/components/documentation/page/_page.scss b/src/components/documentation/page/_page.scss
index 41fb59e5c0..044968c46b 100644
--- a/src/components/documentation/page/_page.scss
+++ b/src/components/documentation/page/_page.scss
@@ -140,6 +140,15 @@
   }
 }
 
+.gv-page-info-banner {
+  $color: #45aed6;
+  border: 1px solid #eee;
+  border-left: 5px solid #45aed6;
+  border-radius: 3px;
+  color: $color;
+  padding: 2px 10px 10px 10px;
+}
+
 .gv-page-draft-banner {
   $color: #ce4844;
   border: 1px solid #eee;
diff --git a/src/components/documentation/page/page-editormarkdown.component.ts b/src/components/documentation/page/page-editormarkdown.component.ts
index 394f8570bc..36485a8b41 100644
--- a/src/components/documentation/page/page-editormarkdown.component.ts
+++ b/src/components/documentation/page/page-editormarkdown.component.ts
@@ -17,6 +17,7 @@ import { StateService } from '@uirouter/core';
 import * as codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
 import hljs from 'highlight.js';
 import NotificationService from '../../../services/notification.service';
+import { PageType } from '../../../services/documentation.service';
 
 class ComponentCtrl implements ng.IComponentController {
 
@@ -159,6 +160,15 @@ class ComponentCtrl implements ng.IComponentController {
     });
 
   }
+
+  getBannerMessage(): string {
+    return this.isMarkdownTemplate() ? 'This page is not available for users yet' :
+      'This page is not published yet and will not be visible to other users';
+  }
+
+  isMarkdownTemplate(): boolean {
+    return this.page.type === PageType.MARKDOWN_TEMPLATE;
+  }
 }
 
 const PageEditorMarkdownComponent: ng.IComponentOptions = {
diff --git a/src/components/documentation/page/page-editormarkdown.html b/src/components/documentation/page/page-editormarkdown.html
index 5c4491880a..08fc7808ea 100644
--- a/src/components/documentation/page/page-editormarkdown.html
+++ b/src/components/documentation/page/page-editormarkdown.html
@@ -18,7 +18,7 @@
 <div>
     <div class="gv-page-draft-banner" ng-if="!$ctrl.page.published">
         <ng-md-icon icon="warning" class="gv-warning"></ng-md-icon>
-        This page is not published yet and will not be visible to other users
+        {{ $ctrl.getBannerMessage() }}
     </div>
     <div id="editSection"></div>
 </div>
diff --git a/src/components/documentation/page/page.component.ts b/src/components/documentation/page/page.component.ts
index ae293f9c66..072a32e763 100644
--- a/src/components/documentation/page/page.component.ts
+++ b/src/components/documentation/page/page.component.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import * as _ from 'lodash';
+import { PageType } from '../../../services/documentation.service';
 const PageComponent: ng.IComponentOptions = {
 
   controller: class {
@@ -30,6 +31,10 @@ const PageComponent: ng.IComponentOptions = {
       }
     }
 
+    isMarkdownTemplate(): boolean {
+      return this.type() === PageType.MARKDOWN_TEMPLATE;
+    }
+
     logoAvailable(fetcherName: string): boolean {
       return _.includes(this.fetchersWithSvg, fetcherName);
     }
diff --git a/src/components/documentation/page/page.html b/src/components/documentation/page/page.html
index e931768f9b..0cc7d2b82a 100644
--- a/src/components/documentation/page/page.html
+++ b/src/components/documentation/page/page.html
@@ -19,9 +19,10 @@
   <div id="page-content" layout-padding ng-switch="$ctrl.type()" flex="{{ $ctrl.sidenav ? 75 : 100 }}">
     <div class="gv-page-draft-banner" ng-if="!$ctrl.edit && !$ctrl.page.published">
       <ng-md-icon icon="warning" class="gv-warning" ></ng-md-icon>
-      This page is not published yet and will not be visible to other users
+      {{$ctrl.isMarkdownTemplate() ? 'This page is not available for users yet' :
+        'This page is not published yet and will not be visible to other users' }}
     </div>
-    
+
     <md-button ng-if="$ctrl.page.metadata.edit_url" type="button" style="margin: 25px 6px;float: right;"
                target="_blank" href="{{$ctrl.page.metadata.edit_url}}"
                aria-label="Edit">
diff --git a/src/index.scss b/src/index.scss
index f2efba9e7b..2a01dd823b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -656,6 +656,10 @@ md-progress-circular {
     right: 320px !important;
   }
 }
+.gv-info {
+  fill: #45aed6;
+}
+
 
 .gv-warning {
   fill: #ce4844;
diff --git a/src/services/documentation.service.ts b/src/services/documentation.service.ts
index fe71d34dd6..9a3a1bc37c 100644
--- a/src/services/documentation.service.ts
+++ b/src/services/documentation.service.ts
@@ -25,6 +25,7 @@ export class DocumentationQuery {
   published?: boolean;
   parent: string;
   root?: boolean;
+  translated?: boolean;
 }
 
 export class ImportPageEntity {
@@ -36,6 +37,14 @@ export class ImportPageEntity {
   excluded_groups: string[];
 }
 
+export class Page {
+  id?: string;
+  content: string;
+  name: string;
+  parentId: string;
+  type: PageType;
+}
+
 export enum SystemFolderName {
   HEADER = 'Header',
   TOPFOOTER = 'TopFooter',
@@ -43,6 +52,14 @@ export enum SystemFolderName {
   ASIDE = 'Aside'
 }
 
+export enum PageType {
+  FOLDER = 'FOLDER',
+  LINK = 'LINK',
+  SWAGGER = 'SWAGGER',
+  MARKDOWN = 'MARKDOWN',
+  MARKDOWN_TEMPLATE = 'MARKDOWN_TEMPLATE'
+}
+
 export enum FolderSituation {
   SYSTEM_FOLDER,
   SYSTEM_FOLDER_WITH_FOLDERS,
@@ -71,15 +88,15 @@ class DocumentationService {
   supportedTypes = (folderSituation: FolderSituation): string[] => {
     switch (folderSituation) {
       case FolderSituation.ROOT:
-        return ['SWAGGER', 'MARKDOWN', 'FOLDER'];
+        return [PageType.SWAGGER, PageType.MARKDOWN, PageType.MARKDOWN_TEMPLATE, PageType.FOLDER];
       case FolderSituation.SYSTEM_FOLDER:
-        return ['LINK'];
+        return [PageType.LINK];
       case FolderSituation.SYSTEM_FOLDER_WITH_FOLDERS:
-        return ['FOLDER', 'LINK'];
+        return [PageType.FOLDER, PageType.LINK];
       case FolderSituation.FOLDER_IN_FOLDER:
-        return ['SWAGGER', 'MARKDOWN', 'FOLDER'];
+        return [PageType.SWAGGER, PageType.MARKDOWN, PageType.MARKDOWN_TEMPLATE, PageType.FOLDER];
       case FolderSituation.FOLDER_IN_SYSTEM_FOLDER:
-        return ['LINK'];
+        return [PageType.LINK];
     }
   }
 
@@ -89,7 +106,7 @@ class DocumentationService {
     return this.$http.patch(this.url(apiId, pageId), prop);
   }
 
-  search = (q: DocumentationQuery, apiId?: string, translated?: boolean): IHttpPromise<any> => {
+  search = (q: DocumentationQuery, apiId?: string, translated?: boolean): IHttpPromise<Page[]> => {
     let url: string = this.url(apiId);
     if (q || translated) {
       // add query parameters
diff --git a/src/services/environment.service.ts b/src/services/environment.service.ts
index aa6374899f..b420651fef 100644
--- a/src/services/environment.service.ts
+++ b/src/services/environment.service.ts
@@ -20,20 +20,16 @@ import { IHttpResponse } from 'angular';
 import { IEnvironmentPermissions } from '../entities/IEnvironmentPermissions';
 
 class EnvironmentService {
-  private environmentsURL: string;
-  private environmentURL: string;
 
   constructor(private $http, private Constants, private $q) {
     'ngInject';
-    this.environmentsURL = `${Constants.org.baseURL}/environments`;
-    this.environmentURL = Constants.env.baseURL;
   }
 
   /*
    * Analytics
    */
   analytics(request) {
-    var url = this.environmentURL + '/analytics?';
+    let url = this.Constants.env.baseURL + '/analytics?';
     var keys = Object.keys(request);
     _.forEach(keys, function (key) {
       var val = request[key];
@@ -51,27 +47,27 @@ class EnvironmentService {
   }
 
   list() {
-    return this.$http.get(this.environmentsURL);
+    return this.$http.get(`${this.Constants.org.baseURL}/environments`);
   }
 
   getCurrent(): ng.IPromise<any> {
-    return this.$http.get(this.environmentURL);
+    return this.$http.get(this.Constants.env.baseURL);
   }
 
   listEnvironmentIdentities(envId: string) {
-    return this.$http.get(`${this.environmentsURL}/${envId}/identities`);
+    return this.$http.get(`${this.Constants.org.baseURL}/environments/${envId}/identities`);
   }
 
   updateEnvironmentIdentities(envId: string, updatedIPA: IdentityProviderActivation[]) {
-    return this.$http.put(`${this.environmentsURL}/${envId}/identities`, updatedIPA);
+    return this.$http.put(`${this.Constants.org.baseURL}/environments/${envId}/identities`, updatedIPA);
   }
 
   getPermissions(envId: string): ng.IPromise<IHttpResponse<IEnvironmentPermissions[]>> {
-    return this.$http.get(`${this.environmentsURL}/permissions?idOrHrid=${envId}`);
+    return this.$http.get(`${this.Constants.org.baseURL}/environments/permissions?idOrHrid=${envId}`);
   }
 
   getFirstHridOrElseId(environment): string {
-    return environment.hrids && environment.hrids.length > 0 ? environment.hrids[0] : environment.id;
+    return environment && environment.hrids && environment.hrids.length > 0 ? environment.hrids[0] : environment && environment.id;
   }
 
   isSameEnvironment(environment, otherEnvId) {