Migrted from deprecated views API to appViews

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudux-starter-kit",
-  "version": "2.1.18",
+  "version": "2.2.2",
   "description": "Starter kit for UI developers in CloudUX",
   "main": "build/index.js",
   "scripts": {
@@ -24,14 +24,12 @@
     "base64-img": "1.0.4",
     "cloudux-bootstrap": "0.0.5",
     "request": "^2.88.0",
-    "cloudux-starter-kit": "2.1.18",
-    "mediacentral-publish": "^0.3.2",
-    "mediacentral-sign": "^0.1.1"
+    "cloudux-starter-kit": "2.2.2"
   },
   "devDependencies": {
     "autoprefixer": "9.6.1",
     "babel-core": "6.26.3",
-    "babel-eslint": "8.2.6",
+    "babel-eslint": "9.x",
     "babel-loader": "7.1.5",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-decorators": "6.24.1",
@@ -50,7 +48,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "file-loader": "6.2.0",
     "html-loader": "0.5.5",
-    "http-proxy-middleware": "0.18.0",
+    "http-proxy-middleware": "^2.0.6",
     "mini-css-extract-plugin": "0.4.4",
     "node-fetch": "^2.6.1",
     "postcss-loader": "3.0.0",

postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
     plugins: [
         require('autoprefixer')({
-            browsers: [
+            overrideBrowserslist: [
                 'last 5 Chrome versions',
                 'last 5 Safari versions',
                 'last 2 Firefox versions',

src/app/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2017 by Avid Technology, Inc.
+ * Copyright 2022 by Avid Technology, Inc.
  */
 import getAsset from './services/data-providers';
 import spinner from './Spinner/Spinner';
@@ -9,16 +9,22 @@ import * as styles from './index.scss';
 import 'cloudux-bootstrap/dist/css/cloudux.min.css';
 
 export default class ApplicationContainer {
-    constructor() {
-        this.handleDrop = this.handleDrop.bind(this);
+    render(element) {
+        const container = document.createElement('div');
+        container.id = 'clip-info';
+        container.classList.add(styles['clip-info']);
+        container.addEventListener('dragover', (event) => {
+            event.preventDefault();
+        });
+        container.addEventListener('drop', (event) => {
+            this.handleDrop(event, event.target);
+        });
+
         const welcomeMsg = document.createElement('span');
         welcomeMsg.innerHTML = getLocalization(l10nData)('welcome-info');
-        this.content = document.createElement('div');
-        this.content.id = 'clip-info';
-        this.content.appendChild(welcomeMsg);
-        this.content.className = styles['clip-info'];
-        this.content.ondragover = event => event.preventDefault();
-        this.content.ondrop = event => this.handleDrop(event, this.content);
+
+        element.appendChild(container);
+        container.appendChild(welcomeMsg);
     }
 
     handleDrop(event, element) {
@@ -39,7 +45,7 @@ export default class ApplicationContainer {
                 separator.className = styles.separator;
                 const footer = document.createElement('div');
                 footer.className = styles.footer;
-                
+
                 if (data.hasOwnProperty('thumbnail') && data.thumbnail) {
                     const wrapper = document.createElement('div');
                     wrapper.className = styles.imageWrapper;
@@ -55,7 +61,7 @@ export default class ApplicationContainer {
                 container.appendChild(footer);
                 element.appendChild(container);
             })
-            .catch(error => {
+            .catch((error) => {
                 const errorSpan = document.createElement('span');
                 errorSpan.innerHTML = 'Error wrong asset or server unavailable';
 
@@ -121,7 +127,7 @@ export default class ApplicationContainer {
         const td2 = document.createElement('div');
 
         td1.className = 'cux-table-cell';
-        td1.style.paddingLeft= '8px';
+        td1.style.paddingLeft = '8px';
         td1.style.width = '20%';
         td2.className = 'cux-table-cell';
         td1.innerHTML = name;
@@ -132,8 +138,4 @@ export default class ApplicationContainer {
 
         return tr;
     }
-
-    returnElement() {
-        return this.content;
-    }
 }

src/avid_api/entry/EntryWrapper.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2017 by Avid Technology, Inc.
+ * Copyright 2022 by Avid Technology, Inc.
  */
 import appConfig from '../../package.json';
 
@@ -36,10 +36,6 @@ export default class EntryApp {
         console.log('[ExamplePlugin] onHide');
     }
 
-    onUnrender() {
-        console.log('[ExamplePlugin] onUnrender');
-    }
-
     onBeforeUnrender() {
         console.log('[ExamplePlugin] onBeforeUnrender');
     }
@@ -52,6 +48,10 @@ export default class EntryApp {
         console.log('[ExamplePlugin] context', context);
     }
 
+    getTitle() {
+        return this.innerView.getTitle();
+    }
+
     get publicScope() {
         return {};
     }

src/avid_api/view/ViewWrapper.js

@@ -1,28 +1,23 @@
 /**
- * Copyright 2017 by Avid Technology, Inc.
+ * Copyright 2022 by Avid Technology, Inc.
  */
 /* eslint-disable */
 
 import ApplicationContainer from '../../app/index';
 
 // Need to be bcs it is used in main App :
 export default class ViewWrapper {
-    createElement() {
-        this.el = document.createElement('div');
-        this.el.style.cssText = 'width: 100%; height: 100%;';
-        return Promise.resolve(this.el);
-    }
-
-    onInit() {
-        this.pane = new ApplicationContainer({
-            contextCallback: function (context) {
-                this.trigger('contextChange', context);
-            }.bind(this),
-        });
+    onInit(config, { dispatch }) {
+        this.trigger = dispatch;
+        this.state = config.state;
     }
 
-    onRender() {
-        this.el.appendChild(this.pane.returnElement());
+    onRender({ domElement }) {
+        this.el = document.createElement('div');
+        this.el.style.cssText = 'width: 100%; height: 100%;';
+        this.pane = new ApplicationContainer();
+        this.pane.render(this.el);
+        domElement.appendChild(this.el);
     }
 
     onDestroy(data) {}
@@ -61,7 +56,13 @@ export default class ViewWrapper {
         return 50;
     }
 
+    getTitle() {
+        return this.pane && this.pane.getTitle();
+    }
+
     get publicScope() {
-        return {};
+        return {
+            getTitle: this.getTitle.bind(this),
+        };
     }
 }

src/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2018 by Avid Technology, Inc.
+ * Copyright 2022 by Avid Technology, Inc.
  */
 
 import appConfig from './package.json';
@@ -12,7 +12,7 @@ const providing = isAdminApp ? 'adminApps' : 'apps';
 export const avid = [
     {
         name: `${appConfig.identity.appName}-view`,
-        provides: ['views'],
+        provides: ['appViews'],
         create: () => ViewConfig,
     },
     {

src/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "avid": {
     "format": "amd",
-    "autoload": true,
+    "autoload": false,
     "alias": "your-avid-app-id",
     "secret": "your-app-secred-from-myavid-com",
     "features": {