Refactor extension-starter-kit and fix fundamental-styles import for …

…all extensions

README.md

@@ -45,7 +45,7 @@ Here is an overview of the extension samples sorted by architecture:
   <td><a href="samples/download-test-extension/">Download Test (extension attributes example)</a></td>
  </tr>
  <tr>
-  <td><a href="samples/extenstion-starter-kit/">Extension Starter Kit</a></td>
+  <td><a href="samples/extension-starter-kit/">Extension Starter Kit</a></td>
  </tr>
  <tr>
   <td><a href="samples/parameter-showcase-extension/">Parameter Showcase</a></td>

samples/extenstion-starter-kit/package.json → samples/extension-starter-kit/package.json

@@ -8,21 +8,21 @@
     "build:watch": "npm run build -- --watch",
     "start": "npx browser-sync public --no-open --serveStatic --port 3003",
     "start:watch": "npm run start -- --watch",
-    "start:dev": "npx npm-run-all --parallel build:watch start:watch",
+    "start:dev": "concurrently \"npm run build:watch\" \"npm run start:watch\"",
     "tunnel": "npx ngrok http 3003"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "fsm-shell": "^1.12.1"
+    "fsm-shell": "^1.19.0"
   },
   "devDependencies": {
-    "browser-sync": "^2.27.5",
-    "ngrok": "^4.1.0",
-    "npm-run-all": "^4.1.5",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.3.5",
-    "webpack": "^5.49.0",
-    "webpack-cli": "^4.7.2"
+    "browser-sync": "^3.0.2",
+    "concurrently": "^8.2.2",
+    "ngrok": "^4.3.3",
+    "ts-loader": "^9.5.1",
+    "typescript": "^4.9.5",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   }
 }

samples/extension-starter-kit/src/index.ts

@@ -0,0 +1,59 @@
+import { ShellSdkHelper } from './shell-sdk-helper';
+import { AuthResponse, ShellSdk } from 'fsm-shell';
+
+
+const updateUI = (text: string) => {
+  (document.querySelectorAll('#info')[0] as any).innerHTML = text;
+};
+
+const createUIContextList = (context: any) => {
+  let UIContextList = '<ul>';
+  for (const [key, value] of Object.entries(context)) {
+      UIContextList = UIContextList + (typeof value === 'object' ?
+          '<li>' + `${key}: ${JSON.stringify(value)}` + '</li>' :
+          '<li>' + `${key}: ${value}` + '</li>');
+  }
+  UIContextList = UIContextList + '</ul>';
+
+  return UIContextList;
+}
+
+window.addEventListener('load', async () => {
+
+  let UIContextList: string = '';
+  let currentContext: any;
+
+  if (ShellSdk.isInsideShell()) {
+    // Initialize ShellSDK to connect with parent shell library
+    let shellSdk = ShellSdk.init(parent, '*');
+
+    let shellSdkHelper = ShellSdkHelper.getInstance(shellSdk);
+    const initialContext = await shellSdkHelper.getContext();
+    currentContext = initialContext;
+    UIContextList = createUIContextList(initialContext);
+
+    /**
+     * Update context in case new token is received. A token is only valid for five minutes.
+     * With the help of shell-sdk-helper.ts a new token is fetched, before the current token
+     * becomes invalid.
+     * 
+     * IMPORTANT: You only receive a new token in case the current token's validation period
+     * is less than one minute. If a new token is requested and the validation period is one
+     * minute or more, you receive the current token again with an updated validation period.
+     * A token's validation period is provided via the property expires_in, which contains
+     * the time left in seconds.
+     */
+    shellSdkHelper.getNewTokenEmitter().on('newToken', (event: AuthResponse) => {
+      let updatedContext = {
+        ...currentContext,
+        auth: event
+      };
+
+      let updatedUIContextList = createUIContextList(updatedContext);
+
+      updateUI(updatedUIContextList);
+    });
+  }
+
+  updateUI(UIContextList);
+});

samples/extension-starter-kit/src/shell-sdk-helper.ts

@@ -0,0 +1,64 @@
+
+import { ShellSdk, SHELL_EVENTS, AuthResponse } from 'fsm-shell';
+import { EventEmitter } from 'events';
+
+
+export class ShellSdkHelper {
+  private static instance: ShellSdkHelper;
+  private shellSdk: ShellSdk;
+  private newTokenEmitter = new EventEmitter();
+
+  private constructor(shellSdk: ShellSdk) {
+    this.shellSdk = shellSdk;
+  }
+
+  public static getInstance(shellSdk: ShellSdk): ShellSdkHelper {
+    if (!ShellSdkHelper.instance) {
+      ShellSdkHelper.instance = new ShellSdkHelper(shellSdk);
+    }
+
+    return ShellSdkHelper.instance;
+  }
+
+  public getContext = () => new Promise<{[x: string]: any}>((resolve, reject) => {
+
+    // Initialize the extension by requesting the fsm context
+    this.shellSdk.emit(SHELL_EVENTS.Version1.REQUIRE_CONTEXT, {
+      auth: {
+        response_type: 'token'  // request a user token within the context
+      }
+    });
+
+    // Callback on fsm context response
+    this.shellSdk.on(SHELL_EVENTS.Version1.REQUIRE_CONTEXT, (event: string) => {
+      const context = JSON.parse(event);
+
+      // Access_token has a short life span and needs to be refreshed before expiring
+      // Each extension needs to implement its own strategy to fresh it.
+      this.initializeRefreshTokenStrategy(context.auth);
+
+      resolve(context);
+    });
+
+  });
+
+  public getNewTokenEmitter() {
+    return this.newTokenEmitter;
+  }
+
+  private fetchToken() {  
+    this.shellSdk.emit(SHELL_EVENTS.Version1.REQUIRE_AUTHENTICATION, {
+      response_type: 'token'  // request a user token within the context
+    });
+  }
+
+  // Loop before a token expire to fetch a new one
+  private initializeRefreshTokenStrategy = (auth: AuthResponse) => {
+    this.shellSdk.on(SHELL_EVENTS.Version1.REQUIRE_AUTHENTICATION, (event: AuthResponse) => {
+      this.newTokenEmitter.emit('newToken', event);
+      setTimeout(() => this.fetchToken(), (event.expires_in * 1000) - 5000);
+    });
+
+    setTimeout(() => this.fetchToken(), (auth.expires_in * 1000) - 5000);
+  }
+}