API tiles & Github service (documentation) (#8)

* Fixed token setting issue. (Azure#1108) * Fixed refresh logic for shared access signature tokens. Fixed time formatting. (Azure#1112) * Hide the product subscription name on delegation (Azure#1113) closes Azure#787 * Cleaned up authentication logic. Fixed issue with read-only props in schema. Fixes Map widget issue. (Azure#1115) * Added headers in operation response docs (Azure#1117) close Azure#693 * Operation list improvements (Azure#1116) * Added toggle to manage operation name wrap * Added a toggle to manage to show operation urlTemplate or name * added search operation by urlTemplate * changed wrap mode to break-word close Azure#1019 * Added api products widgets (grid and tiles) (Azure#1126) * Added API products widgets (grid and tiles) * added style class for tiles closes Azure#1072 * Fixed tabs for representation contentType (Azure#1127) closes Azure#1119 * Fixed signout on close user account (Azure#1129) Fixed signout on close user account added notification parameter to send an email for the developer portal * Added basic XSD schema support in API documentation. (Azure#1137) * Fix for migration between subscription-to-subscription apim developer portal (Azure#1145) * Fix for migration between subscription to subscription apim dev portal by passing the az login details in parameters * updated description of parameter * Fixed PR comments - updated optional description in parameters * Added header to trace get mapi requests (Azure#1147) * Process for migration scripts will return error code when scrip fails (Azure#1149) * Added notification parameter for create user with AAD (Azure#1150) * Fixed notification parameter for create user with OAuth (Azure#1152) * Temporarily added supplying state parameter to the client. (Azure#1153) * Added token retrieve from user activate MAPI request (Azure#1158) * Added token retrive from user activate MAPI request close Azure#1157 * Added logic to prevent DOM changes on request to prevent error (Azure#1160) * Changed variable requestUrl to url (Azure#1159) Co-authored-by: Erik Mogensen <erik.mogensen@hm.com> * Added tiles widgets for api products and products list (Azure#1162) * Changed conflict destToken -> destKey (Azure#1164) Co-authored-by: Erik Mogensen <erik.mogensen@hm.com> * Accessibility fix 8954122: removed action from operation name (Azure#1167) * Upgraded paperbits libraries to 0.1.382. (Azure#1174) * Fixed several bugs (Azure#1185) * Bump elliptic from 6.5.3 to 6.5.4 (Azure#1178) Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.3 to 6.5.4. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](indutny/elliptic@v6.5.3...v6.5.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump prismjs from 1.22.0 to 1.23.0 (Azure#1169) Bumps [prismjs](https://github.com/PrismJS/prism) from 1.22.0 to 1.23.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](PrismJS/prism@v1.22.0...v1.23.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Rolled back azure libraries due to discovered bugs. Upraded node-sass and sass-loader packages. (Azure#1188) * Added support for tags as a refrence in url for apis and operations (Azure#1189) * Fixed layout for blocks and inline-blocks. (Azure#1190) * Fixed layout for navigation items. Fixed bug with "Open in new window" option. (Azure#1193) * Fixed several accessibility issues. (Azure#1195) * Added asterisks to required form fields. * Fixed luminosity contrast ratio for the form group toggle button. * Unified hyperlink selector controls across components. Fixed tooltip binding. * Added setting the aria-selected tag to code samples tabs. * Fixed some issues with hyperlink and anchor resolution. (Azure#1197) * Increase apiversion to handle minimum apiversion set (Azure#1215) Co-authored-by: Erik Mogensen <erik.mogensen@hm.com> * Fixed issues with menu and hyperlink rendering. (Azure#1222) * Fixed dropdown styles and functionality. Fixed report widgets. (Azure#1223) * Extended "Operation details" widget with "Use CORS proxy" option. (Azure#1233) * Fixed delegation actions names (Azure#1234) Fixed delegation actions names * Uncommented /portalRevisions endpoint to enable publishing. (Azure#1236) * Contrast colors fix for try button and focus selection (Azure#1239) * [scripts.v3] fix: http request fails when response code is 202, which means Accepted (Azure#1242) Co-authored-by: Benas Taurosevicius <Benas.Taurosevicius@centric.eu> * Fixes for token refresh logic. (Azure#1252) * Removed devops scripts v1. (Azure#1259) * Revise readme.md to point to new documentation (Azure#1263) * Added support for "resource owner password" grant flow. (Azure#1219) * Added missing hamburger icon style. (Azure#1270) * Fixed close account. Reuse sign-out on account close. (Azure#1285) * Fixed close account. Reuse signout on account close. * use update instead of init in markdown bindingHandler (Azure#1279) * Upgraded dependency libraries. Added new widget icons. (Azure#1288) * Fixed several accessibility issues (Azure#1292) * Fixed accessibility issues with tab controls. * Fixed syntax highlight colors to comply with luminosity requirements. * Added dialog-like behavior to Test console panel. * Added capture/generate scripts metadata operations. (Azure#1295) * Removed direct dependency of node-sass module. (Azure#1317) * Fixed form controls focus highlight. (Azure#1318) * Fixed serveal accessibility and security issues. Fixed build issues with sass-loader. (Azure#1324) * Added support sso token in hash (Azure#1339) * WebSocket APIs (Azure#1297) Added code templates for ws Added API type in API list Improved WebSockets examples Improved WebSockets support in test console Merged changes from managed version * Leveraged B2C signout. Moved AAD/B2C configuration publishing into config.json. Added option to override reply URL(s). (Azure#1346) * Fixed minor issues with B2C configuration. Switched publishing functionality to portal revisions API. (Azure#1349) * Added support for setting folders and timestamp (Azure#1365) Co-authored-by: Erik Mogensen <erik.mogensen@users.noreply.github.com> * Added support for multipart request body in Test console (Azure#1359) Co-authored-by: Igor O <igo@microsoft.com> * Added basic mulitpart form data support to API documentation. (Azure#1381) * Azure Devops pipeline to migrate APIM dev portal from one instance to another instance of APIM (Azure#1362) * Revert "Azure Devops pipeline to migrate APIM dev portal from one instance to another instance of APIM (Azure#1362)" (Azure#1390) This reverts commit 0c618f7. * Upgraded dependencies. Replaced deprecated awesome-typescript-loader with ts-loader. Fixed Terser build configuration. (Azure#1391) * Fixed minor issue with AAD signout. Rolled back terser-webpack-plugin version to mitigate build issues. (Azure#1392) * feat: ignore .DS_Store files (Azure#1397) * fix aadB2CClientConfig casing (Azure#1395) * Disabled scrolling to operation name by default. (Azure#1402) * Fixed widget selection issue in layout editor. (Azure#1418) * Added functionality to show legal text by default on product page load (Azure#1414) * script to add GTM to developer portal (Azure#1405) * Added npm dependencies * Specify npm dependencies version * Navigation menu for default layout update * Import for icons fix * Material icons import - Added sass logic * Authentication - Navigation menu through the widget designer - Removed icon from B2C button * Merge branch 'master' into feature/auth * Testing Sign-in AD B2C * Redirect to home when unauthorized * Avatar menu when authenticated * Fixed config modelBinder * Custom widget config * Custom avatar menu * Fixing widget contract * Basic widget contract and view model binder * Removed widget editor "Visible to" logic is directly set in the code not through the editor * Code clean-up * API custom tiles * Seperating style for API tiles * Same folder for custom style * Include custom style in already existing file * Custom documentation service - Service to get markdowns from github repository * API tiles & Github service (documentation) - Avatar menu - Service for Github documentation - API list Co-authored-by: Alexander Zaslonov <zaslonov.alexander@gmail.com> Co-authored-by: Igor O <ygrik@hotmail.com> Co-authored-by: Sanjeevi Subramani <ssanjeevi.ss@gmail.com> Co-authored-by: Marcin Dudek <manekd@gmail.com> Co-authored-by: Erik Mogensen <ErikMogensen@users.noreply.github.com> Co-authored-by: Erik Mogensen <erik.mogensen@hm.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Benas Taurosevičius <b.taurosevicius@gmail.com> Co-authored-by: Benas Taurosevicius <Benas.Taurosevicius@centric.eu> Co-authored-by: Mike Budzynski <40186513+mikebudzynski@users.noreply.github.com> Co-authored-by: patst <patrick.steinig@googlemail.com> Co-authored-by: Erik Mogensen <erik.mogensen@users.noreply.github.com> Co-authored-by: Igor O <igo@microsoft.com> Co-authored-by: Bernhard Rode <mail@bernhardrode.de> Co-authored-by: Travis Whipps <88871562+traviswhipps@users.noreply.github.com> Co-authored-by: Nik Osvalds <60047271+nosvalds@users.noreply.github.com>
BeMoTech · Oct 26, 2021 · aa5ea89 · aa5ea89
1 parent 35596a5
commit aa5ea89
Show file tree

Hide file tree

Showing 19 changed files with 615 additions and 270 deletions.
diff --git a/community/widgets/bemo-documentation/ko/runtime/bemo-documentation-runtime.html b/community/widgets/bemo-documentation/ko/runtime/bemo-documentation-runtime.html
@@ -1,20 +1,3 @@
 <h1><span data-bind="text: api"></span></h1>
 
-<table>
-    <thead>
-        <tr>
-            <th>Path</th>
-            <th>File name</th>
-            <th>URL</th>
-        </tr>
-    </thead>
-    <tbody data-bind="foreach: repoStructure">
-        <tr>
-            <td data-bind="text: path"></td>
-            <td data-bind="text: fileName"></td>
-            <td data-bind="text: url"></td>
-        </tr>
-    </tbody>
-</table>
-
 <p data-bind="html: sessionDescription"></p>
diff --git a/community/widgets/bemo-documentation/ko/runtime/bemo-documentation-runtime.ts b/community/widgets/bemo-documentation/ko/runtime/bemo-documentation-runtime.ts
@@ -1,12 +1,12 @@
-
 import * as ko from "knockout";
 import template from "./bemo-documentation-runtime.html";
 import { Component, RuntimeComponent, Param, OnMounted } from "@paperbits/common/ko/decorators";
 import { widgetRuntimeSelector } from "../..";
 import { RouteHelper } from "../../../../../src/routing/routeHelper";
 import { GithubService } from "../../../../../src/services/githubService";
-import { GithubFile } from "../../../../../src/models/githubFile";
-import { cpuUsage } from "process";
+import { GithubType, StoredDocumentation } from "../../../../../src/constants";
+import { Menu } from "../../../../../src/models/menu";
+import { MenuItem } from "../../../../../src/models/menuItem";
 
 @RuntimeComponent({
     selector: widgetRuntimeSelector
@@ -21,22 +21,79 @@ export class BemoDocumentationRuntime {
     public readonly api: ko.Observable<string>;
 
     public readonly sessionDescription: ko.Observable<string>;
-    public readonly repoStructure: ko.ObservableArray<GithubFile>;
+    public structure: ko.Observable<Menu>;
 
     constructor(private readonly routeHelper: RouteHelper, private readonly githubService: GithubService) {
         this.api = ko.observable();
-        this.repoStructure = ko.observableArray();
         this.sessionDescription = ko.observable();
+        this.structure = ko.observable<Menu>();
     }
 
     @OnMounted()
     public async initialize(): Promise<void> {
         const fileName = this.routeHelper.getHashParameter("fileName");
         const api = this.routeHelper.getApiName();
-        await this.githubService.getRepositoryStructure().then(resp => {
-            this.repoStructure(resp);
-        });
-
+        const storedStructure = localStorage.getItem(StoredDocumentation);
+
+        if (storedStructure) {
+            // Structure from localStorage
+            this.structure(JSON.parse(storedStructure));
+        } else {
+            // No stored Github repository structure, get structure from Github API
+            const response = await this.githubService.getRepositoryTree();
+
+            if (response.status === 200) {
+                const repoStructure = this.getRepositoryStructure(response.data['tree']);
+
+                if (repoStructure !== null) {
+                    this.structure(repoStructure);
+                    localStorage.setItem(StoredDocumentation, JSON.stringify(repoStructure));
+                }
+            }
+        }
+
         this.api(api);
     }
+
+    public getRepositoryStructure(data) {
+        const navMenu = new Menu();
+
+        data.forEach(datum => {
+            const pathSplitted = datum['path'].split('/');
+            let datumPath = pathSplitted.length > 1 ? datum['path'].replace(pathSplitted[pathSplitted.length - 1], '').substring(0, datum['path'].replace(pathSplitted[pathSplitted.length - 1], '').length - 1) : datum['path'];
+            const menu = this.searchMenu(navMenu, datumPath);
+
+            if (datum['type'] === GithubType.blob) {
+                if (menu === undefined || pathSplitted.length === 1) {
+                    navMenu.menuItems.push(new MenuItem(datum['path'], datum['url']));
+                } else {
+                    menu.menuItems.push(new MenuItem(datum['path'], datum['url']));
+                }
+            }
+            else if (datum['type'] === GithubType.tree) {
+                if (menu === undefined || pathSplitted.length === 1) {
+                    navMenu.menus.push(new Menu(datum['path']));
+                } else {
+                    menu.menus.push(new Menu(datum['path']));
+                }
+            }
+        });
+
+        return navMenu;
+    }
+
+    public searchMenu(element, matchingPath) {
+        if (element.path == matchingPath) {
+            return element;
+        } else if (element.menus !== null) {
+            let result = null;
+
+            for (let i = 0; result == null && i < element.menus.length; i++) {
+                result = this.searchMenu(element.menus[i], matchingPath);
+            }
+
+            return result;
+        }
+        return null;
+    }
 }
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.html b/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.html
@@ -61,7 +61,7 @@ <h3>
             <div class="card item-tile">
                 <!-- Illustration of the api -->
                 <div class="card-illustration">
-                    <span>lol</span>
+                    <span data-bind="class: item.displayName"></span>
                 </div>
                 <!-- Content and information about the api -->
                 <div class="card-content">

diff --git a/src/constants.ts b/src/constants.ts
@@ -150,7 +150,16 @@ export const releaseNameFormat = "YYYYMMDDHHmm";
 
 export const genericHttpRequestError = "Server error. Unable to send request. Please try again later.";
 
+export const GithubRepository = {
+    owner: 'phfrc',
+    repo: 'documentation-test'
+};
+
 export enum GithubType {
     file = "file",
-    directory = "dir"
-}
+    directory = "dir",
+    blob = 'blob',
+    tree = 'tree'
+}
+
+export const StoredDocumentation = 'github-documentation';
diff --git a/src/models/menu.ts b/src/models/menu.ts
@@ -0,0 +1,15 @@
+import { MenuItem } from "./menuItem";
+
+export class Menu {
+    public menuItems?: Array<MenuItem>;
+    public menus?: Array<Menu>;
+    public path?: string;  // Parameter to send in url to dynamically render
+    public url?: string;
+
+    public constructor(path?: string, url?: string, menuItems?: Array<MenuItem>, menus?: Array<Menu>) {
+        this.path = path || '';
+        this.url = url || '';
+        this.menuItems = menuItems || new Array<MenuItem>();
+        this.menus = menus || new Array<Menu>();
+    }
+}
diff --git a/src/models/menuItem.ts b/src/models/menuItem.ts
@@ -0,0 +1,9 @@
+export class MenuItem {
+    public path?: string;
+    public url?: string;
+
+    public constructor(path?: string, url?: string) {
+        this.path = path || '';
+        this.url = url || '';
+    }
+}
diff --git a/src/services/githubService.ts b/src/services/githubService.ts
@@ -1,68 +1,44 @@
-import * as ko from "knockout";
 import { Octokit } from "octokit";
-import { GithubType } from "../constants";
+import { GithubRepository } from "../constants";
 import { MapiError } from "../errors/mapiError";
-import { GithubFile } from "../models/githubFile";
 
 /**
  * Service to get data from Github repository for documentation
  */
 export class GithubService {
     private octokit: Octokit;
-    private repoStructure: Array<GithubFile> = new Array<GithubFile>();
-    private github = {
-        owner: 'phfrc',
-        repo: 'documentation-test',
-        baseUrl: 'https://api.github.com'
-    };
 
     constructor() {
-        this.octokit = new Octokit({
-            baseUrl: this.github.baseUrl
-        });
+        this.octokit = new Octokit();
     }
 
-    public async getRepositoryStructure(): Promise<Array<GithubFile>> {
-       const repositoryLoop = async (data: Array<GithubFile>) => {
-            for (const datum of data) {
-                // File: Add to repository structure
-                if (datum['type'] === GithubType.file) {
-                    this.repoStructure.push(new GithubFile({
-                        fileName: datum['name'],
-                        path: datum['path'],
-                        url: datum['url']
-                    }));
-                } else if (datum['type'] === GithubType.directory) {    // Folder: Request content of folder and store in structure
-                    await this.octokit.request("GET /repos/{owner}/{repo}/contents/{path}/", {
-                        owner: this.github.owner,
-                        repo: this.github.repo,
-                        path: datum['path']
-                    }).then(async response => {
-                        await repositoryLoop(response.data);
-                    }).catch(error => {
-                        throw new MapiError(error.status, '[Documentation Service] Getting (sub) folder structure failed: ' + error.message);
-                    });
-                }
+    public async getRepositoryTree() {
+        try {
+            const commitResponse = await this.octokit.request('GET /repos/{owner}/{repo}/branches/main', {
+                owner: GithubRepository.owner,
+                repo: GithubRepository.repo
+            });
+
+            if (commitResponse.status === 200) {
+                console.log('COMMIT sha: ', commitResponse.data['commit']['sha']);
+                return await this.octokit.request('GET /repos/{owner}/{repo}/git/trees/{tree_sha}', {
+                    owner: GithubRepository.owner,
+                    repo: GithubRepository.repo,
+                    tree_sha: commitResponse.data['commit']['sha'],
+                    recursive: 'true'
+                });
             }
+        } catch (error) {
+            throw new Error('[Documentation service] Getting data from Github API failed: ' + error.message);
         }
-
-        await this.octokit.request("GET /repos/{owner}/{repo}/contents", {
-            owner: this.github.owner,
-            repo: this.github.repo
-        }).then(async response => {
-            await repositoryLoop(response.data);
-        }).catch(error => {
-            throw new MapiError(error.status, '[Documentation Service] getRepositoryStructure failed: ' + error.message);
-        });
-
-        return this.repoStructure;
     }
 
     // Request: Get markdown content (base64)
     public async getMarkdown(path: string): Promise<void> {
         await this.octokit.request("GET /repos/{owner}/{repo}/contents/{path}?ref=main", {
-            owner: this.github.owner,
-            repo: this.github.repo,
+            owner: GithubRepository.owner,
+            repo: GithubRepository.repo,
+
             path: path
         }).then(async response => {
             await this.renderMarkdown(atob(response.data['content']));