chore: keep packages below esm versions, fix some package issues, lint pipeline (#6069)

* chore: keep packages below esm versions

* fix: use correct directory to link binaries on deb install (#6070)

* fix: use correct directory to link binaries on deb install

* use sanitizedProductName

* feat: update linter

* chore: add uuidjs

* feat: add lint action

* chore: remove duplicate windowUtil

* chore: fix failing lib check

* chore: switch package versions to latest

---------

Co-authored-by: Sven Jost <[email protected]>

Author: tlebon

.eslintrc.json

@@ -3,6 +3,7 @@
     "jasmine": true
   },
   "extends": "@wireapp/eslint-config",
+  "ignorePatterns": ["**/*.js", "**/*.jsx"], // Ignore JS files until we migrate to TS
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],

.github/dependabot.yml

@@ -19,6 +19,16 @@ updates:
       - dependency-name: husky
         versions:
           - '> 4.x'
+      # these are being updated to esm modules after these versions and electron doesn't currently natively support it
+      - dependency-name: image-type
+        versions:
+          - '> 4.x'
+      - dependency-name: globby
+        versions:
+          - '> 11.x'
+      - dependency-name: uuidjs
+        versions:
+          - '> 4.x'
       # when building, we receive this error with winstaller 5.0:
       # Error: no such file or directory, copyfile 'vendor/7z-ia32.exe' -> 'vendor/7z.exe'
       - dependency-name: electron-winstaller

.github/workflows/lint.yml

@@ -0,0 +1,31 @@
+name: Lint
+
+on:
+  push:
+    branches: [main, dev, staging]
+  pull_request:
+    branches: [main, dev, staging]
+
+concurrency:
+  group: lint-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: 'yarn'
+
+      - name: Install JS dependencies
+        run: yarn --immutable
+
+      - name: Lint
+        run: yarn lint

babel.config.js

@@ -1,5 +1,21 @@
-// @ts-check
-/* eslint-disable valid-jsdoc */
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
 
 const plugins = ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'];
 

electron/renderer/src/actions/AccountAction.js

@@ -17,11 +17,12 @@
  *
  */
 
-import {ActionType, initiateSSO} from './';
-import {config} from '../../../dist/settings/config';
 import {EVENT_TYPE} from '../../../dist/lib/eventType';
+import {config} from '../../../dist/settings/config';
 import {AccountSelector} from '../selector/AccountSelector';
 
+import {ActionType, initiateSSO} from './';
+
 /**
  * Don't use this method directly, use `switchWebview` instead.
  *

electron/renderer/src/actions/__tests__/actions.spec.js

@@ -17,8 +17,8 @@
  *
  */
 
-import {generateUUID} from '../../lib/util';
 import {ActionType, addAccount, deleteAccount, updateAccount, updateAccountBadge} from '../';
+import {generateUUID} from '../../lib/util';
 import {switchAccount} from '../AccountAction';
 
 describe('action creators', () => {

electron/renderer/src/actions/index.js

@@ -18,11 +18,13 @@
  */
 
 import * as Joi from '@hapi/joi';
+
 import {Availability} from '@wireapp/protocol-messaging';
 
 import {accountAction} from './AccountAction';
-import {AccountSelector} from '../selector/AccountSelector';
+
 import {generateUUID} from '../lib/util';
+import {AccountSelector} from '../selector/AccountSelector';
 
 export const ActionType = {
   ADD_ACCOUNT: 'ADD_ACCOUNT',

electron/renderer/src/components/AccountIcon.jsx

@@ -17,10 +17,11 @@
  *
  */
 
-import './AccountIcon.css';
+import React from 'react';
 
 import PropTypes from 'prop-types';
-import React from 'react';
+
+import './AccountIcon.css';
 
 import {colorFromId} from '../lib/accentColor';
 
@@ -49,7 +50,11 @@ const AccountIcon = ({account, ...props}) => {
         />
       )}
       <div className="AccountIcon-inner">
-        {account.picture ? <img src={account.picture} /> : <div>{account.name && [...account.name][0]}</div>}
+        {account.picture ? (
+          <img src={account.picture} alt="Account Icon" />
+        ) : (
+          <div>{account.name && [...account.name][0]}</div>
+        )}
       </div>
     </div>
   );

electron/renderer/src/components/App.jsx

@@ -18,13 +18,16 @@
  */
 
 import React from 'react';
+
 import {connect} from 'react-redux';
+
 import {StyledApp} from '@wireapp/react-ui-kit';
 
-import actionRoot from '../actions';
 import IsOnline from './IsOnline';
 import Sidebar from './Sidebar';
 import WebviewList from './WebviewList';
+
+import actionRoot from '../actions';
 import {AccountSelector} from '../selector/AccountSelector';
 
 const App = () => {

electron/renderer/src/components/IsOnline.jsx

@@ -18,7 +18,9 @@
  */
 
 import React, {useEffect, useState} from 'react';
+
 import {Text, ContainerSM} from '@wireapp/react-ui-kit';
+
 import {getText} from '../lib/locale';
 
 const IsOnline = ({children}) => {

electron/renderer/src/components/LoadingSpinner.jsx

@@ -18,6 +18,7 @@
  */
 
 import React, {useEffect, useState} from 'react';
+
 import {FlexBox, Loading, COLOR} from '@wireapp/react-ui-kit';
 
 import './LoadingSpinner.css';

electron/renderer/src/components/Sidebar.jsx

@@ -18,21 +18,22 @@
  */
 
 import React from 'react';
+
 import {connect} from 'react-redux';
 
+import AccountIcon from './AccountIcon';
+import AddAccountTrigger from './context/AddAccountTrigger';
+import EditAccountMenu from './context/EditAccountMenu';
+import './Sidebar.css';
+
 import {EVENT_TYPE} from '../../../dist/lib/eventType';
 import {addAccountWithSession, setAccountContextHidden, toggleEditAccountMenuVisibility} from '../actions';
 import {colorFromId} from '../lib/accentColor';
 import {isEnterKey} from '../lib/keyboardUtil';
 import {preventFocus} from '../lib/util';
-import AccountIcon from './AccountIcon';
-import AddAccountTrigger from './context/AddAccountTrigger';
-import EditAccountMenu from './context/EditAccountMenu';
 import {AccountSelector} from '../selector/AccountSelector';
 import {ContextMenuSelector} from '../selector/ContextMenuSelector';
 
-import './Sidebar.css';
-
 const centerOfEventTarget = event => {
   const clientRectangle = event.currentTarget.getBoundingClientRect();
   const centerX = clientRectangle.left + clientRectangle.width / 2;

electron/renderer/src/components/Webview.jsx

@@ -18,13 +18,16 @@
  */
 
 import React, {useEffect, useRef, useState} from 'react';
-import {ContainerSM, COLOR, H1, Logo, Text, TextLink} from '@wireapp/react-ui-kit';
+
 import {SVGIcon} from '@wireapp/react-ui-kit/src/Icon/SVGIcon';
 import {connect} from 'react-redux';
 
+import {ContainerSM, COLOR, H1, Logo, Text, TextLink} from '@wireapp/react-ui-kit';
+
 import LoadingSpinner from './LoadingSpinner';
+import './Webview.css';
+
 import {EVENT_TYPE} from '../../../src/lib/eventType';
-import {WindowUrl} from '../lib/WindowUrl';
 import {
   abortAccountCreation,
   resetIdentity,
@@ -34,10 +37,10 @@ import {
   updateAccountLifecycle,
   updateAccountDarkMode,
 } from '../actions';
+import {accountAction} from '../actions/AccountAction';
 import {getText, wrapperLocale} from '../lib/locale';
+import {WindowUrl} from '../lib/WindowUrl';
 import {AccountSelector} from '../selector/AccountSelector';
-import './Webview.css';
-import {accountAction} from '../actions/AccountAction';
 /* eslint-disable react/no-unknown-property */
 
 const getEnvironmentUrl = account => {

electron/renderer/src/components/WebviewList.jsx

@@ -18,9 +18,11 @@
  */
 
 import React from 'react';
+
 import {connect} from 'react-redux';
 
 import Webview from './Webview';
+
 import {updateAccountBadgeCount} from '../actions';
 import {AccountSelector} from '../selector/AccountSelector';
 

electron/renderer/src/components/context/ContextMenu.jsx

@@ -18,6 +18,7 @@
  */
 
 import React, {useEffect, useRef} from 'react';
+
 import {connect} from 'react-redux';
 
 import {setAccountContextHidden} from '../../actions';

electron/renderer/src/components/context/ContextMenuItem.jsx

@@ -17,9 +17,10 @@
  *
  */
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
+import PropTypes from 'prop-types';
+
 const ContextMenuItem = ({onClick, children}) => (
   <div data-uie-name="item-context-menu" className="ContextMenu-item" onClick={onClick}>
     {children}

electron/renderer/src/components/context/EditAccountMenu.jsx

@@ -18,16 +18,18 @@
  */
 
 import React from 'react';
+
 import {connect} from 'react-redux';
 
-import {abortAccountCreation} from '../../actions';
-import {EVENT_TYPE} from '../../../../dist/lib/eventType';
-import {getText} from '../../lib/locale';
 import ContextMenu from './ContextMenu';
 import ContextMenuItem from './ContextMenuItem';
-import {ContextMenuSelector} from '../../selector/ContextMenuSelector';
+
+import {EVENT_TYPE} from '../../../../dist/lib/eventType';
+import {abortAccountCreation} from '../../actions';
 import {accountAction} from '../../actions/AccountAction';
+import {getText} from '../../lib/locale';
 import {AccountSelector} from '../../selector/AccountSelector';
+import {ContextMenuSelector} from '../../selector/ContextMenuSelector';
 
 const EditAccountMenu = ({accountId, accountIndex, isAtLeastAdmin, lifecycle, sessionId, ...connected}) => {
   return (

electron/renderer/src/configureStore.js

@@ -17,10 +17,10 @@
  *
  */
 
+import throttle from 'lodash/throttle';
 import {applyMiddleware, createStore} from 'redux';
 import {createLogger} from 'redux-logger';
 import thunk from 'redux-thunk';
-import throttle from 'lodash/throttle';
 
 import {loadState, saveState} from './lib/localStorage';
 import reducers from './reducers';

electron/renderer/src/index.jsx

@@ -18,14 +18,15 @@
  */
 
 import React from 'react';
-import {Provider} from 'react-redux';
+
 import {createRoot} from 'react-dom/client';
+import {Provider} from 'react-redux';
+
 import {EVENT_TYPE} from '../../dist/lib/eventType';
+
+import actionRoot, {addAccountWithSession} from './actions';
 import App from './components/App';
 import configureStore from './configureStore';
-import actionRoot from './actions';
-import {addAccountWithSession} from './actions/index';
-
 import './Index.css';
 
 const store = configureStore({actions: actionRoot});

electron/renderer/src/reducers/__tests__/accountReducer.spec.js

@@ -20,8 +20,8 @@
 /* eslint-disable no-magic-numbers */
 
 import {addAccount, deleteAccount, updateAccount, updateAccountBadge} from '../../actions';
-import accountReducer from '../accountReducer';
 import {switchAccount} from '../../actions/AccountAction';
+import accountReducer from '../accountReducer';
 
 describe('accounts reducer', () => {
   it('should return the initial state with one account', () => {

electron/renderer/src/reducers/accountReducer.js

@@ -17,8 +17,8 @@
  *
  */
 
-import {generateUUID} from '../lib/util';
 import {ActionType} from '../actions';
+import {generateUUID} from '../lib/util';
 
 const createAccount = (sessionID, ssoCode = undefined) => ({
   accentID: undefined,

electron/src/after.test.ts

@@ -18,6 +18,7 @@
  */
 
 import * as fs from 'fs-extra';
+
 import * as path from 'path';
 
 declare global {

electron/src/auth/ProxyAuth.test.main.ts

@@ -17,9 +17,10 @@
  *
  */
 
-import * as assert from 'assert';
 import {Protocol} from 'get-proxy-settings';
 
+import * as assert from 'assert';
+
 import * as ProxyAuth from './ProxyAuth';
 
 describe('ProxyAuth', () => {

electron/src/global.ts

@@ -17,13 +17,13 @@
  *
  */
 
-import type {DesktopCapturer} from 'electron';
-import type {WebAppEvents} from '@wireapp/webapp-events';
-import type {Data as OpenGraphResult} from 'open-graph';
 import type {Static as amplify} from 'amplify';
+import type {Data as OpenGraphResult} from 'open-graph';
+
+import type {WebAppEvents} from '@wireapp/webapp-events';
 
-import type * as EnvironmentUtil from './runtime/EnvironmentUtil';
 import type {i18nStrings, SupportedI18nLanguage} from './locale';
+import type * as EnvironmentUtil from './runtime/EnvironmentUtil';
 
 declare global {
   interface Window {