feat: global markdown template pages

gravitee-io · Feb 24, 2021 · 6e55f52 · 6e55f52
1 parent ef0cf58
commit 6e55f52
Show file tree

Hide file tree

Showing 17 changed files with 240 additions and 57 deletions.
diff --git a/src/assets/logo_markdown_template.svg b/src/assets/logo_markdown_template.svg
diff --git a/src/assets/logo_markdown_template_old2.svg b/src/assets/logo_markdown_template_old2.svg
diff --git a/src/assets/logo_markdown_templateold.svg b/src/assets/logo_markdown_templateold.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)