Upgrade all dependencies

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/[email protected]
         with:
-          version: 10.x
+          version: 14.x
       - name: build and unit test
         run: |
           yarn

.github/workflows/snapshot.yml

@@ -14,7 +14,7 @@ jobs:
           token: ${{ secrets.WORKFLOW_PAT }}
       - uses: actions/[email protected]
         with:
-          version: 10.x
+          version: 14.x
       - name: build and unit test
         run: |
           yarn

README.md

@@ -31,15 +31,13 @@ This repo uses NPM scripts in order to run all tests and linting. You can run bo
 
 ### Unit Testing
 
-This repo uses [Karma](https://karma-runner.github.io/latest/index.html) and [Jasmine](https://jasmine.github.io/) for all unit testing. The unit tests are run using a headless version of Chrome to verify that all tests work in a browser-based environment.
+This repo uses [jest](https://jestjs.io/) and [nightwatch](https://nightwatchjs.org/) for all unit testing. The unit tests are run using a headless version of Chrome to verify that all tests work in a browser-based environment.
 
 `yarn run unit`
 
 To run a subset of the tests you can use the `-t` option of Jest to only run tests whose name matches the provided value
 
-`yarn run unit --filter GroupCrypto`
+`yarn run unit GroupCrypto`
 
-This library also has minimums for unit test code coverage in order to pass. These coverage minimums are configured within the `karma.conf.js` file and determine what the minimum % of code coverage is for various metrics before the unit tests will pass.
-
-Copyright (c) 2020 IronCore Labs, Inc.
+Copyright (c) 2022 IronCore Labs, Inc.
 All rights reserved.

globals.d.ts

@@ -4,12 +4,9 @@
 interface Window {
     Promise: PromiseConstructor;
     msCrypto: Crypto;
-    User: {
-        id: string;
-        name: string;
-    };
 }
 
+
 /*
  * Declare types for modules without build in types
  */

integration/clientHost.webpack.js

@@ -82,20 +82,26 @@ function serveJWT(req, res) {
 
 module.exports = {
     devServer: {
+        client: {
+            overlay: true,
+        },
         hot: true,
         compress: true,
         port: SB_PORT,
         host: SB_HOST,
-        overlay: true,
-        https: {
-            key: fs.readFileSync(path.join(__dirname, "certs/sb/privkey.pem")),
-            cert: fs.readFileSync(path.join(__dirname, "certs/sb/cert.pem")),
-            ca: fs.readFileSync(path.join(__dirname, "certs/sb/chain.pem")),
+        server: {
+            type: "https",
+            options: {
+                key: fs.readFileSync(path.join(__dirname, "certs/sb/privkey.pem")),
+                cert: fs.readFileSync(path.join(__dirname, "certs/sb/cert.pem")),
+                ca: fs.readFileSync(path.join(__dirname, "certs/sb/chain.pem")),
+            },
         },
-        before(app) {
-            app.use(cookieParser());
-            app.get("/", serveIndex);
-            app.get("/generateJWT/:userID", serveJWT);
+        setupMiddlewares: (middlewares, devServer) => {
+            devServer.app.use(cookieParser());
+            devServer.app.get("/", serveIndex);
+            devServer.app.get("/generateJWT/:userID", serveJWT);
+            return middlewares;
         },
     },
     mode: "development",
@@ -114,7 +120,7 @@ module.exports = {
             {
                 test: /\.tsx?$/,
                 exclude: /node_modules/,
-                use: ["awesome-typescript-loader"],
+                use: ["ts-loader"],
             },
         ],
     },
@@ -123,10 +129,8 @@ module.exports = {
         emitOnErrors: false,
     },
     plugins: [
-        new webpack.HotModuleReplacementPlugin(),
         new webpack.DefinePlugin({
-            NODE_ENV: JSON.stringify(runtimeEnvironment),
-            "process.env.NODE_ENV": JSON.stringify(runtimeEnvironment),
+            //"process.env.NODE_ENV": JSON.stringify(runtimeEnvironment), not sure why this conflicting problem comes up
             SDK_NPM_VERSION_PLACEHOLDER: JSON.stringify(process.env.HOSTED_VERSION || "SDK_NPM_VERSION_PLACEHOLDER"),
             _ICL_FRAME_DOMAIN_REPLACEMENT_: JSON.stringify(getFrameDomain()),
         }),

integration/components/InitializeApi.tsx

@@ -14,10 +14,19 @@ interface InitializeApiState {
     passcode: string;
 }
 
+declare global {
+    interface Window {
+        User: {
+            id: string;
+            name: string;
+        };
+    }
+}
+
 const tabStyle = {
     marginTop: "15px",
     padding: "25px",
-    textAlign: "center" as "center",
+    textAlign: "center" as const,
 };
 
 export default class InitializeApi extends React.Component<InitializeApiProps, InitializeApiState> {
@@ -99,11 +108,11 @@ export default class InitializeApi extends React.Component<InitializeApiProps, I
             });
     };
 
-    getPasscodeInput() {
+    getPasscodeInput(key: string) {
         return (
             <TextField
                 key="passcode"
-                id="api-passcode"
+                id={`api-passcode-${key}`}
                 autoFocus
                 type="text"
                 onKeyPress={this.handleEnter}
@@ -137,7 +146,7 @@ export default class InitializeApi extends React.Component<InitializeApiProps, I
     getInitUIElement() {
         if (this.state.showSetPasscode) {
             return [
-                this.getPasscodeInput(),
+                this.getPasscodeInput("initialize"),
                 <RaisedButton className="set-passcode" key="set-passcode" secondary onClick={this.setPasscode} label="Set Passcode" />,
             ];
         }
@@ -152,7 +161,7 @@ export default class InitializeApi extends React.Component<InitializeApiProps, I
                 </Tab>
                 <Tab label="Manual" onActive={() => this.setState({passcode: ""})}>
                     <div style={{...tabStyle}}>
-                        {this.getPasscodeInput()}
+                        {this.getPasscodeInput("manual")}
                         <RaisedButton className="initialize-create-user" secondary onClick={this.createUser} label="Create User" />
                         <br />
                         <br />

integration/components/StatusConsole.tsx

@@ -35,10 +35,10 @@ interface StatusConsoleState {
     logList: LogItem[];
 }
 
-export default class StatusConsole extends React.Component<{}, StatusConsoleState> {
+export default class StatusConsole extends React.Component<Record<string, never>, StatusConsoleState> {
     logContainer!: HTMLDivElement;
 
-    constructor(props: {}) {
+    constructor(props: Record<string, never>) {
         super(props);
         this.state = {
             logList: [],

integration/components/TabWrapper.tsx

@@ -13,8 +13,8 @@ interface TabWrapperState {
     selectedGroup: null | GroupMetaResponse | "new";
 }
 
-export default class TabWrapper extends React.Component<{}, TabWrapperState> {
-    constructor(props: {}) {
+export default class TabWrapper extends React.Component<Record<string, never>, TabWrapperState> {
+    constructor(props: Record<string, never>) {
         super(props);
         this.state = {
             selectedList: null,

integration/components/TodoApp.tsx

@@ -27,8 +27,8 @@ interface TodoAppState {
     selectedList: null | DocumentIDNameResponse;
 }
 
-export default class TodoApp extends React.Component<{}, TodoAppState> {
-    constructor(props: {}) {
+export default class TodoApp extends React.Component<Record<string, never>, TodoAppState> {
+    constructor(props: Record<string, never>) {
         super(props);
         this.state = {
             initComplete: false,

integration/components/UserInfo.tsx

@@ -22,17 +22,26 @@ const buttonStyle: React.CSSProperties = {
     margin: "5px",
 };
 
+declare global {
+    interface Window {
+        User: {
+            id: string;
+            name: string;
+        };
+    }
+}
+
 interface UserInfoState {
     showingDialog: boolean;
     changingPasscode: boolean;
     passcodeError: boolean;
 }
 
-export default class UserInfo extends React.Component<{}, UserInfoState> {
+export default class UserInfo extends React.Component<Record<string, never>, UserInfoState> {
     currentPasscodeInput!: TextField;
     newPasscodeInput!: TextField;
 
-    constructor(props: {}) {
+    constructor(props: Record<string, never>) {
         super(props);
         this.state = {
             showingDialog: false,
@@ -66,9 +75,11 @@ export default class UserInfo extends React.Component<{}, UserInfoState> {
                     },
                     () => {
                         if (error.code === IronWeb.ErrorCodes.USER_PASSCODE_INCORRECT) {
-                            this.currentPasscodeInput.getInputNode().value = "";
-                            this.newPasscodeInput.getInputNode().value = "";
-                            this.currentPasscodeInput.focus();
+                            if (this.currentPasscodeInput && this.newPasscodeInput) {
+                                this.currentPasscodeInput.getInputNode().value = "";
+                                this.newPasscodeInput.getInputNode().value = "";
+                                this.currentPasscodeInput.focus();
+                            }
                         }
                     }
                 );
@@ -82,7 +93,7 @@ export default class UserInfo extends React.Component<{}, UserInfoState> {
                 logAction(`User device successfully deauthorized. Deleted transform key: ${result.transformKeyDeleted}`);
                 window.location.reload();
             });
-        } catch (e) {
+        } catch (e: any) {
             logAction(`User device deauthorize error: ${e.message}. Error Code: ${e.code}`, "error");
         }
     }

integration/components/documents/DocumentDetail.tsx

@@ -9,7 +9,7 @@ interface DocumentDetailProps {
     backToList: () => void;
 }
 
-export default class DocumentDetail extends React.Component<DocumentDetailProps, {}> {
+export default class DocumentDetail extends React.Component<DocumentDetailProps> {
     render() {
         if (isLocalDocument(this.props.document.documentID)) {
             return <LocalDocument document={this.props.document} backToDocumentList={this.props.backToList} />;

integration/components/documents/DocumentList.tsx

@@ -4,7 +4,6 @@ import Divider from "material-ui/Divider";
 import FloatingActionButton from "material-ui/FloatingActionButton";
 import {List, ListItem} from "material-ui/List";
 import {brown200, brown400, cyan500, lightGreen200, lightGreen400, lightGreenA700, orange200, orange400} from "material-ui/styles/colors";
-import Subheader from "material-ui/Subheader";
 import Assignment from "material-ui/svg-icons/action/assignment";
 import Add from "material-ui/svg-icons/content/add";
 import Cloud from "material-ui/svg-icons/file/cloud";
@@ -156,12 +155,7 @@ export default class DocumentList extends React.Component<DocumentListProps, Doc
                         <Refresh />
                     </FloatingActionButton>
                 </div>
-                <List style={{backgroundColor: "#f5f5f5", padding: 0, maxHeight: "350px", overflowY: "auto"}}>
-                    <Subheader>My Documents</Subheader>
-                    {this.getDocumentsMarkup(this.state.lists.filter((list) => list.association === "owner"))}
-                    <Subheader>Shared With Me</Subheader>
-                    {this.getDocumentsMarkup(this.state.lists.filter((list) => list.association !== "owner"))}
-                </List>
+                <List style={{backgroundColor: "#f5f5f5", padding: 0, maxHeight: "350px", overflowY: "auto"}}>{this.getDocumentsMarkup(this.state.lists)}</List>
                 <div style={{display: "flex", justifyContent: "flex-end", margin: "10px 0"}}>
                     <FloatingActionButton className="new-document" onClick={this.props.onListSelect.bind(null, "new")} mini backgroundColor={cyan500}>
                         <Add />

integration/components/documents/DocumentVisibility.tsx

@@ -18,7 +18,7 @@ interface DocumentVisibilityProps {
     loadDocumentMetadata(): void;
 }
 
-export default class DocumentVisibility extends React.Component<DocumentVisibilityProps, {}> {
+export default class DocumentVisibility extends React.Component<DocumentVisibilityProps> {
     revokeDocumentAccess(id: string, type: string) {
         const unshareList = {
             [type === "user" ? "users" : "groups"]: [{id}],

integration/components/documents/FileDocument.tsx

@@ -9,7 +9,7 @@ interface FileDocumentProps {
     fileName: string;
 }
 
-export default class FileDocument extends React.Component<FileDocumentProps, {}> {
+export default class FileDocument extends React.Component<FileDocumentProps> {
     getImageDocumentMarkup() {
         return <img src={`data:${this.props.mimeType};base64, ${this.props.content}`} style={{maxWidth: "100%", maxHeight: "100%"}} />;
     }

integration/iclHost.webpack.js

@@ -63,14 +63,13 @@ const sharedConfig = {
     module: {
         rules: [
             {
-                test: /\.ts$/,
+                test: /\.tsx?$/,
                 exclude: /node_modules/,
-                use: ["awesome-typescript-loader"],
+                use: ["ts-loader"],
             },
         ],
     },
     plugins: [
-        new webpack.HotModuleReplacementPlugin(),
         new webpack.DefinePlugin({
             SDK_NPM_VERSION_PLACEHOLDER: JSON.stringify("SDK_NPM_VERSION_PLACEHOLDER"),
             _WORKER_PATH_LOCATION_: JSON.stringify("./webpack/dist/worker.js"),
@@ -84,23 +83,29 @@ const sharedConfig = {
 const frameConfig = {
     ...sharedConfig,
     devServer: {
+        client: {
+            overlay: true,
+        },
         hot: true,
         compress: true,
         port: IRONCORE_PORT,
         host: IRONCORE_HOST,
-        overlay: true,
-        https: {
-            key: fs.readFileSync(path.join(__dirname, "certs/icl/privkey.pem")),
-            cert: fs.readFileSync(path.join(__dirname, "certs/icl/cert.pem")),
-            ca: fs.readFileSync(path.join(__dirname, "certs/icl/chain.pem")),
+        server: {
+            type: "https",
+            options: {
+                key: fs.readFileSync(path.join(__dirname, "certs/icl/privkey.pem")),
+                cert: fs.readFileSync(path.join(__dirname, "certs/icl/cert.pem")),
+                ca: fs.readFileSync(path.join(__dirname, "certs/icl/chain.pem")),
+            },
         },
-        before(app) {
-            app.get("/ironweb-frame", serveFrame);
+        setupMiddlewares: (middlewares, devServer) => {
+            devServer.app.get("/ironweb-frame", serveFrame);
             //Setup endpoint for optionally serving production files for both the frame and the worker script. The path here is defined
             //both above in the frame HTMl as well as the build config in build.js for when we define the webpack public path for the worker.
-            app.use("/static/:version/:file", (req, res) => {
+            devServer.app.use("/static/:version/:file", (req, res) => {
                 res.sendFile(path.join(__dirname, "../dist/frame/", req.params.file));
             });
+            return middlewares;
         },
         proxy: {
             //Proxy through API requests through webpack. We're doing this because the API is hosted locally over port 9090 over

integration/nightwatch/pageObjects/documentCreateScreen.js

@@ -21,9 +21,9 @@ const documentCreateActions = {
         return this.setValue('@userGrantInput', id);
     },
     clickOnGroupGrantAccessCheckbox(groupID){
-        this.api.element(this.client.locateStrategy, `#${groupID}`, (element) => {
-            this.api.elementIdClick(element.value.ELEMENT);
-        })
+        browser.element(this.client.locateStrategy, `#${groupID}`, (element) => {
+            this.api.elementIdClick(Object.values(element.value)[0]);
+        });
         return this;
     },
 }