Move context registration to own file, revert AmazonS3Resource.js

Author: vej-ananas

ui/src/AmazonS3Resource.js

@@ -0,0 +1,66 @@
+import {getSignedUrl} from '@aws-sdk/s3-request-presigner';
+import {S3Client, GetObjectCommand} from '@aws-sdk/client-s3';
+import {Resource, defer} from 'cesium';
+
+
+function keyFromUrl(val) {
+  try {
+    const url = new URL(val);
+    // remove the first '/' from the path
+    return url.pathname.slice(1);
+  } catch (err) {
+    return val;
+  }
+}
+
+export default class AmazonS3Resource extends Resource {
+  bucket;
+  region;
+
+  constructor(options, authService) {
+    super(options);
+
+    this.bucket = options.bucket;
+    this.region = options.region || 'eu-west-1';
+  }
+
+  clone(result) {
+    if (!result) {
+      result = new AmazonS3Resource({
+        url: this.url,
+        bucket: this.bucket,
+      });
+    }
+    return result;
+  }
+
+  getSignedUrl(credentials) {
+    const client = new S3Client({
+      region: this.region,
+      credentials: credentials,
+    });
+    const options = {
+      Bucket: this.bucket,
+      Key: keyFromUrl(this.url),
+    };
+    const command = new GetObjectCommand(options);
+    return getSignedUrl(client, command);
+  }
+
+  _makeRequest(options) {
+    const credentialsPromise = this.authService.getCredentialsPromise();
+    if (credentialsPromise) {
+      const deferred = defer();
+      credentialsPromise.then(credentials => {
+        this.getSignedUrl(credentials).then(url => {
+          this.url = url;
+          const request = super._makeRequest(options);
+          if (request) {
+            request.then(value => deferred.resolve(value));
+          }
+        });
+      });
+      return deferred.promise;
+    }
+  }
+}

ui/src/AmazonS3Resource.ts

@@ -1 +1,2 @@
 export * from './client-config.context';
+export * from './register-context';

ui/src/context/index.ts

@@ -0,0 +1,22 @@
+import {LitElement} from 'lit';
+import {Context, ContextProvider} from '@lit/context';
+import {ClientConfig} from '../api/client-config';
+import {apiClientContext, authServiceContext, clientConfigContext} from './client-config.context';
+import {ApiClient} from '../api/api-client';
+import AuthService from '../authService';
+
+
+export const registerAppContext: (element: LitElement, clientConfig: ClientConfig) => ContextProvider<Context<unknown, unknown>, LitElement>[]
+  = (element: LitElement, clientConfig: ClientConfig) => {
+
+  const authService = new AuthService();
+  authService.clientConfig = clientConfig;
+  authService.initialize();
+  const apiClient = new ApiClient(authService);
+
+  return [
+    new ContextProvider(element, {context: clientConfigContext, initialValue: clientConfig}),
+    new ContextProvider(element, {context: apiClientContext, initialValue: apiClient}),
+    new ContextProvider(element, {context: authServiceContext, initialValue: authService}),
+  ];
+};

ui/src/context/register-context.ts

@@ -2,49 +2,37 @@ import {LitElement, html} from 'lit';
 import {customElement} from 'lit/decorators.js';
 import './ngm-app';
 import {Task} from '@lit/task';
-import {provide} from '@lit/context';
 
 import {ClientConfig} from './api/client-config';
-import {apiClientContext, authServiceContext, clientConfigContext} from './context';
+import {registerAppContext} from './context';
 import {ConfigService} from './api/config.service';
-import AuthService from './authService';
-import {ApiClient} from './api/api-client';
 
 
 @customElement('ngm-app-boot')
 export class NgmAppBoot extends LitElement {
-  @provide({context: clientConfigContext})
-  private accessor clientConfig!: ClientConfig;
-  @provide({context: authServiceContext})
-  accessor authService = new AuthService();
-  @provide({context: apiClientContext})
-  accessor apiClient: ApiClient = null!;
-
-
   private viewerInitialization = new Task(this, {
     task: async () => {
-      this.clientConfig = await new ConfigService().getConfig() as ClientConfig;
-      if (!this.clientConfig) {
+      const clientConfig = await new ConfigService().getConfig() as ClientConfig;
+      if (!clientConfig) {
         console.error('Failed to load client config');
         return;
       }
 
-      this.authService.clientConfig = this.clientConfig;
-      this.authService.initialize();
-      this.apiClient = new ApiClient(this.authService);
+      registerAppContext(this, clientConfig);
     },
     args: () => [],
   });
 
   render() {
     return this.viewerInitialization.render({
       pending: () => html`<p>Loading</p>`,
-      complete: () => html`<ngm-app></ngm-app>`,
+      complete: () => html`
+        <ngm-app></ngm-app>`,
       error: (e) => html`<p>Error: ${e}</p>`
     });
   }
 
-  // This deactivates shadow DOM. Because this is done for all other components, we have to add in for the time being.
+  // This deactivates shadow DOM. Because this is done for all other components, we have to add it for the time being.
   createRenderRoot() {
     return this;
   }