feat: replace qlik/sdk with qlik/api (#1665)

* feat: replace sdk in mashup template

* chore: tweak template

* fix: imports

---------

Co-authored-by: caele <tsm@qlik.com>

commands/create/templates/mashup/_package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@nebula.js/stardust": "<%= nebulaVersion %>",
     "@nebula.js/sn-bar-chart": "^1.x",
-    "@qlik/sdk": "^0.12.0",
+    "@qlik/api": "^1.17.0",
     "enigma.js": "^2.6.3",
     "parcel": "2.13.3"
   }

commands/create/templates/mashup/src/Authenticator.js

@@ -1,86 +0,0 @@
-import enigma from 'enigma.js';
-import schema from 'enigma.js/schemas/12.2015.0.json';
-import { Auth, AuthType } from '@qlik/sdk';
-
-export default class Authenticator {
-  /**
-   *
-   * @param {String} appId  - application id from sense client
-   * @param {Strign} url    - tenant url
-   */
-  constructor({ appId, url }) {
-    this.authInstance = null;
-    this.appId = appId;
-    this.host = url.replace(/^https?:\/\//, '').replace(/\/?/, '');
-  }
-
-  /**
-   * gets you the promise of enigma instance for your app
-   * based on webIntegrationId
-   * @param {Strign} webIntegrationId - your web Integration Id from managment console
-   * @returns {Promise<IEnigmaClass>} enigma app promise
-   */
-  async AuthenticateWithWebIntegrationId({ webIntegrationId }) {
-    this.authInstance = new Auth({
-      authType: AuthType.WebIntegration,
-      autoRedirect: true,
-      host: this.host,
-      webIntegrationId,
-    });
-
-    if (!this.authInstance.isAuthenticated()) {
-      this.authInstance.authenticate();
-    } else return this.getEnigmaApp();
-
-    return null;
-  }
-
-  /**
-   * gets you the promise of enigma instance for your app
-   * based on clientId
-   * @param {Strign} clientId     - your client Id from managment console
-   * @param {Strign} redirectUri  - the redirect url while bringing you the code + state, default is `window.location.origin`
-   * @returns {Promise<IEnigmaClass>} enigma app promise
-   */
-  async AuthenticateWithOAuth({ clientId, redirectUri }) {
-    this.authInstance = new Auth({
-      authType: AuthType.OAuth2,
-      host: this.host,
-      redirectUri: redirectUri || window.location.origin,
-      clientId,
-    });
-
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.get('code')) {
-      try {
-        await this.authInstance.authorize(window.location.href);
-        const url = new URL(window.location);
-        url.searchParams.delete('code');
-        url.searchParams.delete('state');
-        window.history.replaceState(null, null, url);
-      } catch (error) {
-        console.error({ error });
-      }
-
-      return this.getEnigmaApp();
-    }
-
-    if (!(await this.authInstance.isAuthorized())) {
-      const { url } = await this.authInstance.generateAuthorizationUrl();
-      const protocol = url.includes('https://') ? 'https' : 'http';
-      window.location = `${protocol}://${url}`;
-    }
-
-    return null;
-  }
-
-  /**
-   * returns a promise of enigma instance
-   * @returns {Promise<IEnigmaClass>} enigma app instance promise
-   */
-  async getEnigmaApp() {
-    const url = await this.authInstance.generateWebsocketUrl(this.appId);
-    const enigmaGlobal = await enigma.create({ schema, url }).open();
-    return enigmaGlobal.openDoc(this.appId);
-  }
-}

commands/create/templates/mashup/src/configure.js

@@ -1,18 +0,0 @@
-import { embed } from '@nebula.js/stardust';
-
-import barchart from '@nebula.js/sn-bar-chart';
-
-const n = embed.createConfiguration({
-  context: {
-    theme: 'light',
-    language: 'en-US',
-  },
-  types: [
-    {
-      name: 'barchart',
-      load: () => Promise.resolve(barchart),
-    },
-  ],
-});
-
-export default n;

commands/create/templates/mashup/src/connect.js

@@ -1,26 +0,0 @@
-import { AuthType } from '@qlik/sdk';
-import Authenticator from './Authenticator';
-
-async function connect({ connectionType, url, appId, ...rest }) {
-  const AuthenticatorInstance = new Authenticator({
-    url,
-    appId,
-  });
-
-  switch (connectionType) {
-    case AuthType.WebIntegration: {
-      return AuthenticatorInstance.AuthenticateWithWebIntegrationId({
-        ...rest,
-      });
-    }
-
-    case AuthType.OAuth2: {
-      return AuthenticatorInstance.AuthenticateWithOAuth({ ...rest });
-    }
-
-    default:
-      throw new Error('Please Provide a `connectionType` to proceed!');
-  }
-}
-
-export default connect;

commands/create/templates/mashup/src/index.js

@@ -1,25 +1,40 @@
 /* eslint-disable */
-import { AuthType } from '@qlik/sdk';
+import { auth, qix } from '@qlik/api';
-import embed from './configure';
+import { embed } from '@nebula.js/stardust';
-import connect from './connect';
+import barchart from '@nebula.js/sn-bar-chart';
 
 async function run() {
-  const app = await connect({
+  const appId = '<App id>';
-    connectionType: '<AuthType.SOME_CONNECTION_TYPE>',
+  // https://github.com/qlik-oss/qlik-api-ts/blob/main/docs/authentication.md
-    url: '<URL>',
+  const hostConfig = {
-    appId: '<App id>',
+    authType: '<AuthenticationType: ex "oauth2" or "cookie"',
+    host: '<URL>',
+    // connection config based on authType
+    webIntegrationId: '<Qlik web integration id>', // cookie
+    clientId: '<Qlik OAuth client id>', // oauth2
+    accessTokenStorage: 'session', // for oauth2
+  };
 
-    // you should use only one of below keys
+  auth.setDefaultHostConfig(hostConfig);
-    // based on your `connectionType`
+  const appSession = qix.openAppSession(appId);
-    clientId: '<Qlik OAuth client id>',
+  const app = await appSession.getDoc();
-    webIntegrationId: '<Qlik web integration id>',
+
+  const nebula = embed(app, {
+    context: {
+      theme: 'light',
+      language: 'en-US',
+    },
+    types: [
+      {
+        name: 'barchart',
+        load: () => Promise.resolve(barchart),
+      },
+    ],
   });
 
-  const n = embed(app);
+  (await nebula.selections()).mount(document.querySelector('.toolbar'));
 
-  (await n.selections()).mount(document.querySelector('.toolbar'));
+  // nebula.render({ element: document.querySelector('.object'), id: "" });
-
-  // n.render({});
 }
 
 run();