493: fixed issue with oe formatting, updated project formatting and s…

…ettings, updated imports

.eslintrc.json

@@ -20,7 +20,8 @@
         "curly": "warn",
         "eqeqeq": "warn",
         "no-throw-literal": "warn",
-        "semi": "off"
+        "semi": "off",
+        "quotes": [1, "single", { "avoidEscape": true }]
     },
     "ignorePatterns": [
         "out",

.prettierrc

@@ -1,8 +1,11 @@
 {
-  "editor.formatOnSave": true,
-  "prettier.singleQuote": true,
-  "prettier.printWidth": 70,
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+    "editor.formatOnSave": true,
+    "prettier.singleQuote": true,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "tabWidth": 4,
+    "prettier.printWidth": 70,
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

.vscode/settings.json

@@ -20,7 +20,14 @@
     // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
     "typescript.tsc.autoDetect": "off",
     "editor.formatOnSave": true,
+    "editor.tabSize": 4,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }

jest.config.js

@@ -1,13 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-const path = require("path");
+const path = require('path');
 /** @type {import('jest').Config} */
 const config = {
-    roots: [
-        "<rootDir>/src/test/nodeTest"
-    ],
+    roots: ['<rootDir>/src/test/nodeTest', '<rootDir>/src/test/viewTest'],
     globals: {
-        __DEV__: true
-      },
-    };
+        __DEV__: true,
+    },
+};
 
-    module.exports = config;
+module.exports = config;

package.json

@@ -329,6 +329,7 @@
         "jest": "^29.4.3",
         "mocha": "^9.2.2",
         "npm-run-all": "^4.1.5",
+        "resolve-ts-aliases": "^1.0.1",
         "style-loader": "^3.3.1",
         "ts-loader": "^9.3.0",
         "typescript": "^4.6.4",

src/test/viewTest/utils/oe/format/oeFormat.test.ts

@@ -0,0 +1,57 @@
+import { expect } from "@jest/globals";
+import { getOEFormatLength } from "../../../../../view/app/utils/oe/format/oeFormat";
+
+describe("getOEFormatLength", () => {
+    it('should return the correct length for "xxx"', () => {
+        expect(getOEFormatLength("xxx")).toBe(3);
+    });
+
+    it('should return the correct length for "x(40)"', () => {
+        expect(getOEFormatLength("x(40)")).toBe(40);
+    });
+
+    it('should return the correct length for "$>>.>>>"', () => {
+        expect(getOEFormatLength("$>>.>>>")).toBe(6);
+    });
+
+    it('should return the correct length for "99.>>>"', () => {
+        expect(getOEFormatLength("99.>>>")).toBe(5);
+    });
+
+    it('should return the correct length for "9(7)"', () => {
+        expect(getOEFormatLength("9(7)")).toBe(7);
+    });
+
+    it('should return the correct length for "99"', () => {
+        expect(getOEFormatLength("99")).toBe(2);
+    });
+
+    it('should return the correct length for "ABBBBEEEE"', () => {
+        expect(getOEFormatLength("ABBBBEEEE")).toBe(9);
+    });
+
+    it('should return the correct length for "99KKTB"', () => {
+        expect(getOEFormatLength("99KKTB")).toBe(6);
+    });
+
+    it('should return the correct length for "zzz,zzz,zz"', () => {
+        expect(getOEFormatLength("zzz,zzz,zz")).toBe(8);
+    });
+
+    it('should return the correct length for "z"', () => {
+        expect(getOEFormatLength("z")).toBe(1);
+    });
+
+    it('should return the correct length for ""', () => {
+        expect(getOEFormatLength("")).toBe(6);
+    });
+
+    it("should return 100 if the calculated length is greater than 100", () => {
+        const longFormat = "X".repeat(200);
+        expect(getOEFormatLength(longFormat)).toBe(100);
+    });
+
+    it("should return 6 if the calculated length is less than or equal to 0", () => {
+        expect(getOEFormatLength("")).toBe(6);
+    });
+});

src/view/app/Connection/index.tsx

@@ -1,26 +1,25 @@
-import * as React from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot } from 'react-dom/client';
 
-import "./connection.css";
-import ConnectionForm from "./connectionForm";
-import { IConfig } from "../model";
-import { ISettings } from "../../../common/IExtensionSettings";
+import './connection.css';
+import ConnectionForm from './connectionForm';
+import { IConfig } from '@app/model';
+import { ISettings } from '@src/common/IExtensionSettings';
 
 declare global {
-  interface Window {
-    acquireVsCodeApi(): any;
-    initialData: IConfig;
-    configuration: ISettings;
-  }
+    interface Window {
+        acquireVsCodeApi(): any;
+        initialData: IConfig;
+        configuration: ISettings;
+    }
 }
 
 const vscode = window.acquireVsCodeApi();
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById('root'));
 root.render(
-  <ConnectionForm
-    initialData={window.initialData}
-    configuration={window.configuration}
-    vscode={vscode}
-  />
+    <ConnectionForm
+        initialData={window.initialData}
+        configuration={window.configuration}
+        vscode={vscode}
+    />
 );

src/view/app/Fields/index.tsx

@@ -1,25 +1,24 @@
-import * as React from "react";
-import { createRoot } from "react-dom/client";
-import "./fields.css";
-import Fields from "./fields";
-import { TableDetails } from "../model";
-import { ISettings } from "../../../common/IExtensionSettings";
+import { createRoot } from 'react-dom/client';
+import './fields.css';
+import Fields from './fields';
+import { TableDetails } from '@app/model';
+import { ISettings } from '@src/common/IExtensionSettings';
 
 declare global {
-  interface Window {
-    acquireVsCodeApi(): any;
-    tableDetails: TableDetails;
-    configuration: ISettings;
-  }
+    interface Window {
+        acquireVsCodeApi(): any;
+        tableDetails: TableDetails;
+        configuration: ISettings;
+    }
 }
 
 const vscode = window.acquireVsCodeApi();
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById('root'));
 root.render(
-  <Fields
-    tableDetails={window.tableDetails}
-    configuration={window.configuration}
-    vscode={vscode}
-  />
+    <Fields
+        tableDetails={window.tableDetails}
+        configuration={window.configuration}
+        vscode={vscode}
+    />
 );

src/view/app/Indexes/index.tsx

@@ -1,19 +1,23 @@
-import * as React from "react";
-
-import { createRoot } from "react-dom/client";
-import { TableDetails } from "../model";
-import "./indexes.css";
-import Indexes from "./indexes";
-import { ISettings } from "../../../common/IExtensionSettings";
+import { createRoot } from 'react-dom/client';
+import { TableDetails } from '@app/model';
+import './indexes.css';
+import Indexes from './indexes';
+import { ISettings } from '@src/common/IExtensionSettings';
 
 declare global {
-  interface Window {
-    acquireVsCodeApi(): any;
-    tableDetails: TableDetails;
-    configuration: ISettings;
-  }
+    interface Window {
+        acquireVsCodeApi(): any;
+        tableDetails: TableDetails;
+        configuration: ISettings;
+    }
 }
 const vscode = window.acquireVsCodeApi();
 
-const root = createRoot(document.getElementById("root"));
-root.render(<Indexes tableDetails={window.tableDetails} configuration={window.configuration} vscode={vscode}/>);
+const root = createRoot(document.getElementById('root'));
+root.render(
+    <Indexes
+        tableDetails={window.tableDetails}
+        configuration={window.configuration}
+        vscode={vscode}
+    />
+);