[OGUI-1608] Refactor to update FrameworkInfo to AboutView

QualityControl/public/Model.js

@@ -22,11 +22,11 @@ import Layout from './layout/Layout.js';
 import QCObject from './object/QCObject.js';
 import LayoutService from './services/Layout.service.js';
 import Folder from './folder/Folder.js';
-import FrameworkInfo from './frameworkInfo/FrameworkInfo.js';
 import QCObjectService from './services/QCObject.service.js';
 import ObjectViewModel from './pages/objectView/ObjectViewModel.js';
 import { setBrowserTabTitle } from './common/utils.js';
 import { buildQueryParametersString } from './common/buildQueryParametersString.js';
+import AboutViewModel from './pages/aboutView/AboutViewModel.js';
 
 /**
  * Represents the application's state and actions as a class
@@ -63,8 +63,8 @@ export default class Model extends Observable {
     this.notification = new Notification(this);
     this.notification.bubbleTo(this);
 
-    this.frameworkInfo = new FrameworkInfo(this);
-    this.frameworkInfo.bubbleTo(this);
+    this.aboutViewModel = new AboutViewModel(this);
+    this.aboutViewModel.bubbleTo(this);
 
     this.isOnlineModeConnectionAlive = false;
     this.isOnlineModeEnabled = false; // Show only online objects or all (offline)
@@ -261,7 +261,7 @@ export default class Model extends Observable {
       case 'about':
         this.page = 'about';
         setBrowserTabTitle('QCG-About');
-        this.frameworkInfo.getFrameworkInfo();
+        this.aboutViewModel.getAboutViewModel();
         this.notify();
         break;
       default:

QualityControl/public/common/header.js

@@ -18,7 +18,7 @@ import { spinner } from './spinner.js';
 import layoutViewHeader from '../layout/view/header.js';
 import layoutListHeader from '../layout/list/header.js';
 import objectTreeHeader from '../object/objectTreeHeader.js';
-import frameworkInfoHeader from '../frameworkInfo/frameworkInfoHeader.js';
+import aboutViewHeader from '../pages/aboutView/components/aboutViewHeader.js';
 
 /**
  * Shows header of the application, split with 3 parts:
@@ -46,7 +46,7 @@ const headerSpecific = (model) => {
     case 'layoutList': return layoutListHeader(model);
     case 'layoutShow': return layoutViewHeader(model);
     case 'objectTree': return objectTreeHeader(model);
-    case 'about': return frameworkInfoHeader();
+    case 'about': return aboutViewHeader();
     default: return null;
   }
 };

QualityControl/public/frameworkInfo/FrameworkInfo.js → QualityControl/public/pages/aboutView/AboutViewModel.js

@@ -15,9 +15,9 @@
 import { Observable, RemoteData } from '/js/src/index.js';
 
 /**
- * Model representing FrameworkInfo
+ * Model representing About View
  */
-export default class FrameworkInfo extends Observable {
+export default class AboutViewModel extends Observable {
   /**
    * Initialize `item` to NotAsked
    * @param {Model} model - root model of the application
@@ -30,10 +30,10 @@ export default class FrameworkInfo extends Observable {
   }
 
   /**
-   * Load FrameworkInfo into `item`
+   * Load About Model into `item`
    * @returns {undefined}
    */
-  async getFrameworkInfo() {
+  async getAboutViewModel() {
     this.item = RemoteData.loading();
     this.notify();
 

QualityControl/public/frameworkInfo/frameworkInfoPage.js → QualityControl/public/pages/aboutView/AboutViewPage.js

@@ -21,7 +21,7 @@ import { h } from '/js/src/index.js';
  */
 export default (model) => h(
   '.p2.absolute-fill.text-center',
-  model.frameworkInfo.item.match({
+  model.aboutViewModel.item.match({
     NotAsked: () => null,
     Loading: () => null,
     Success: (data) => showContent(data),

QualityControl/public/view.js

@@ -24,7 +24,7 @@ import layoutEditModal from './layout/panels/editModal.js';
 
 import objectTreePage from './object/objectTreePage.js';
 import ObjectViewPage from './pages/objectView/ObjectViewPage.js';
-import frameworkInfoPage from './frameworkInfo/frameworkInfoPage.js';
+import AboutViewPage from './pages/aboutView/AboutViewPage.js';
 
 /**
  * Entry point to generate view of QCG as a tree of function calls
@@ -56,7 +56,7 @@ function page(model) {
     case 'layoutShow': return layoutViewPage(model);
     case 'objectTree': return objectTreePage(model);
     case 'objectView': return ObjectViewPage(model);
-    case 'about': return frameworkInfoPage(model);
+    case 'about': return AboutViewPage(model);
 
     // Should be seen only at the first start when the view is not yet really to be shown (data loading)
     default: return null;

QualityControl/test/public/pages/about-page.test.js

@@ -10,7 +10,6 @@
  * granted to it by virtue of its status as an Intergovernmental Organization
  * or submit itself to any jurisdiction.
  */
-/* eslint-disable max-len */
 
 import { strictEqual, deepStrictEqual } from 'assert';
 import test from '../index';
@@ -27,14 +26,19 @@ describe('about page test suite', async () => {
     strictEqual(location.search, '?page=about');
   });
 
-  it('should have a frameworkInfo item with config fields', async () => {
+  it('should have an About View Model item with config fields', async () => {
     const expConfig = {
       qcg: { port: 8181, hostname: 'localhost', status: { ok: true } },
       consul: { hostname: 'localhost', port: 8500, status: { ok: false, message: 'Live Mode was not configured' } },
-      ccdb: { hostname: 'ccdb', port: 8500, prefix: 'test', status: { ok: false, message: 'Data connector was not configured' } },
+      ccdb: {
+        hostname: 'ccdb',
+        port: 8500,
+        prefix: 'test',
+        status: { ok: false, message: 'Data connector was not configured' },
+      },
       quality_control: { version: '0.19.5-1' },
     };
-    const config = await page.evaluate(() => window.model.frameworkInfo.item);
+    const config = await page.evaluate(() => window.model.aboutViewModel.item);
     delete config.payload.qcg.version;
     deepStrictEqual(config.payload, expConfig);
   });