Add ESLint naming convention rule

12 files changed, 75 insertions, 41 deletions

diff --git a/gui/.eslintrc.js b/gui/.eslintrc.js
index 183c260886..bc8cf62f1f 100644
--- a/gui/.eslintrc.js
+++ b/gui/.eslintrc.js
@@ -1,3 +1,38 @@
+const namingConvention = [
+  {
+    selector: 'default',
+    format: ['camelCase'],
+  },
+  {
+    selector: 'variable',
+    modifiers: ['const'],
+    format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+    leadingUnderscore: 'allow',
+  },
+  {
+    selector: 'variableLike',
+    format: ['camelCase'],
+    leadingUnderscore: 'allow',
+  },
+  {
+    selector: 'parameter',
+    format: ['camelCase', 'PascalCase'],
+    leadingUnderscore: 'allow',
+  },
+  {
+    selector: 'function',
+    format: ['camelCase', 'PascalCase'],
+  },
+  {
+    selector: 'memberLike',
+    format: ['camelCase'],
+  },
+  {
+    selector: 'typeLike',
+    format: ['PascalCase'],
+  },
+];
+
 module.exports = {
   env: {
     es6: true,
@@ -36,14 +71,11 @@ module.exports = {
     '@typescript-eslint/no-floating-promises': 'error',
     '@typescript-eslint/no-unused-expressions': 'error',
     'no-return-await': 'error',
+    '@typescript-eslint/naming-convention': ['error', ...namingConvention],
 
     '@typescript-eslint/no-use-before-define': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/interface-name-prefix': 'off',
-
-    // TODO: The rules below should be enabled when move from ReactXP is completed.
-    '@typescript-eslint/camelcase': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
     'react/no-find-dom-node': 'off',
   },
diff --git a/gui/src/main/daemon-rpc.ts b/gui/src/main/daemon-rpc.ts
index 006dd12866..78dae947a0 100644
--- a/gui/src/main/daemon-rpc.ts
+++ b/gui/src/main/daemon-rpc.ts
@@ -210,12 +210,14 @@ export class DaemonRpc {
   }
 
   private channelOptions(): grpc.ClientOptions {
+    /* eslint-disable @typescript-eslint/naming-convention */
     return {
       'grpc.max_reconnect_backoff_ms': 3000,
       'grpc.initial_reconnect_backoff_ms': 3000,
       'grpc.keepalive_time_ms': Math.pow(2, 30),
       'grpc.keepalive_timeout_ms': Math.pow(2, 30),
     };
+    /* eslint-enable @typescript-eslint/naming-convention */
   }
 
   private connectivityChangeCallback(timeoutErr?: Error) {
diff --git a/gui/src/main/linux-split-tunneling.ts b/gui/src/main/linux-split-tunneling.ts
index b2b8c54de8..71f9f76eba 100644
--- a/gui/src/main/linux-split-tunneling.ts
+++ b/gui/src/main/linux-split-tunneling.ts
@@ -133,6 +133,7 @@ function getGtkThemeDirectories(): Promise<DirectoryDescription[]> {
       process.env.ORIGINAL_XDG_CURRENT_DESKTOP ?? process.env.XDG_CURRENT_DESKTOP ?? '';
     child_process.exec(
       'gsettings get org.gnome.desktop.interface icon-theme',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       { env: { XDG_CURRENT_DESKTOP: xdgCurrentDesktop } },
       (error, stdout) => {
         if (error) {
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 33b8424f80..b044226634 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -451,7 +451,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
   private renderConfirmBlockWhenDisconnectedAlert = () => {
     return (
       <ModalAlert
-        type={ModalAlertType.Info}
+        type={ModalAlertType.info}
         buttons={[
           <AppButton.RedButton key="confirm" onClick={this.confirmEnableBlockWhenDisconnected}>
             {messages.pgettext('advanced-settings-view', 'Enable anyway')}
diff --git a/gui/src/renderer/components/ExpiredAccountErrorView.tsx b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
index 2a2af26e54..f60ed38dca 100644
--- a/gui/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/gui/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -199,7 +199,7 @@ export default class ExpiredAccountErrorView extends React.Component<
   private renderBlockWhenDisconnectedAlert() {
     return (
       <ModalAlert
-        type={ModalAlertType.Info}
+        type={ModalAlertType.info}
         buttons={[
           <AppButton.BlueButton
             key="cancel"
diff --git a/gui/src/renderer/components/ImageView.tsx b/gui/src/renderer/components/ImageView.tsx
index 368b72cd9e..fd6588b1fb 100644
--- a/gui/src/renderer/components/ImageView.tsx
+++ b/gui/src/renderer/components/ImageView.tsx
@@ -44,6 +44,7 @@ export default function ImageView(props: IImageViewProps) {
     ? props.source
     : `../../assets/images/${props.source}.svg`;
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   const style = useMemo(() => ({ WebkitMaskImage: `url('${url}')` }), [url]);
 
   if (props.tintColor) {
diff --git a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
index c5b5521f05..5fe43e85e0 100644
--- a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
@@ -270,7 +270,7 @@ function ApplicationRow(props: IApplicationRowProps) {
       </StyledCellButton>
       {showWarning && (
         <ModalAlert
-          type={ModalAlertType.Warning}
+          type={ModalAlertType.warning}
           iconColor={warningColor}
           message={warningMessage}
           buttons={warningDialogButtons}
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index b1303ad45f..4c449e8cf2 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -91,8 +91,8 @@ export function ModalContainer(props: IModalContainerProps) {
 }
 
 export enum ModalAlertType {
-  Info = 1,
-  Warning,
+  info = 1,
+  warning,
 }
 
 const ModalAlertContainer = styled.div({
@@ -203,11 +203,11 @@ class ModalAlertWithContext extends React.Component<IModalAlertProps & IModalCon
     let source = '';
     let color = '';
     switch (type) {
-      case ModalAlertType.Info:
+      case ModalAlertType.info:
         source = 'icon-alert';
         color = colors.white;
         break;
-      case ModalAlertType.Warning:
+      case ModalAlertType.warning:
         source = 'icon-alert';
         color = colors.red;
         break;
diff --git a/gui/src/renderer/components/Support.tsx b/gui/src/renderer/components/Support.tsx
index 5cb9adcba6..448cbccbdb 100644
--- a/gui/src/renderer/components/Support.tsx
+++ b/gui/src/renderer/components/Support.tsx
@@ -30,11 +30,11 @@ import { AccountToken } from '../../shared/daemon-rpc-types';
 import { ISupportReportForm } from '../redux/support/actions';
 
 enum SendState {
-  Initial,
-  Confirm,
-  Sending,
-  Success,
-  Failed,
+  initial,
+  confirm,
+  sending,
+  success,
+  failed,
 }
 
 interface ISupportState {
@@ -66,7 +66,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
     email: '',
     message: '',
     savedReport: undefined,
-    sendState: SendState.Initial,
+    sendState: SendState.initial,
     disableActions: false,
     showOutdatedVersionWarning: false,
   };
@@ -111,12 +111,12 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
 
   public onSend = async (): Promise<void> => {
     const sendState = this.state.sendState;
-    if (sendState === SendState.Initial && this.state.email.length === 0) {
-      this.setState({ sendState: SendState.Confirm });
+    if (sendState === SendState.initial && this.state.email.length === 0) {
+      this.setState({ sendState: SendState.confirm });
     } else if (
-      sendState === SendState.Initial ||
-      sendState === SendState.Confirm ||
-      sendState === SendState.Failed
+      sendState === SendState.initial ||
+      sendState === SendState.confirm ||
+      sendState === SendState.failed
     ) {
       try {
         await this.sendReport();
@@ -127,7 +127,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
   };
 
   public onCancelNoEmailDialog = () => {
-    this.setState({ sendState: SendState.Initial });
+    this.setState({ sendState: SendState.initial });
   };
 
   public render() {
@@ -135,7 +135,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
     const header = (
       <SettingsHeader>
         <HeaderTitle>{messages.pgettext('support-view', 'Report a problem')}</HeaderTitle>
-        {(sendState === SendState.Initial || sendState === SendState.Confirm) && (
+        {(sendState === SendState.initial || sendState === SendState.confirm) && (
           <HeaderSubTitle>
             {messages.pgettext(
               'support-view',
@@ -173,7 +173,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
               {content}
             </StyledContentContainer>
 
-            {sendState === SendState.Confirm && this.renderNoEmailDialog()}
+            {sendState === SendState.confirm && this.renderNoEmailDialog()}
             {showOutdatedVersionWarning && this.renderOutdateVersionWarningDialog()}
           </StyledContainer>
         </Layout>
@@ -212,17 +212,17 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
 
   private sendReport(): Promise<void> {
     return new Promise((resolve, reject) => {
-      this.setState({ sendState: SendState.Sending }, async () => {
+      this.setState({ sendState: SendState.sending }, async () => {
         try {
           const { email, message } = this.state;
           const reportPath = await this.collectLog();
           await this.props.sendProblemReport(email, message, reportPath);
           this.props.clearReportForm();
-          this.setState({ sendState: SendState.Success }, () => {
+          this.setState({ sendState: SendState.success }, () => {
             resolve();
           });
         } catch (error) {
-          this.setState({ sendState: SendState.Failed }, () => {
+          this.setState({ sendState: SendState.failed }, () => {
             reject(error);
           });
         }
@@ -232,14 +232,14 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
 
   private renderContent() {
     switch (this.state.sendState) {
-      case SendState.Initial:
-      case SendState.Confirm:
+      case SendState.initial:
+      case SendState.confirm:
         return this.renderForm();
-      case SendState.Sending:
+      case SendState.sending:
         return this.renderSending();
-      case SendState.Success:
+      case SendState.success:
         return this.renderSent();
-      case SendState.Failed:
+      case SendState.failed:
         return this.renderFailed();
       default:
         return null;
@@ -253,7 +253,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
     );
     return (
       <ModalAlert
-        type={ModalAlertType.Warning}
+        type={ModalAlertType.warning}
         message={message}
         buttons={[
           <AppButton.RedButton key="proceed" onClick={this.onSend}>
@@ -281,7 +281,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
     );
     return (
       <ModalAlert
-        type={ModalAlertType.Warning}
+        type={ModalAlertType.warning}
         message={message}
         buttons={[
           <AriaDescriptionGroup key="upgrade">
@@ -433,7 +433,7 @@ export default class Support extends React.Component<ISupportProps, ISupportStat
   }
 
   private handleEditMessage = () => {
-    this.setState({ sendState: SendState.Initial });
+    this.setState({ sendState: SendState.initial });
   };
 
   private performWithActionsDisabled(work: () => Promise<void>) {
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index ce7efc7fc0..c6b9300f5c 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -86,6 +86,7 @@ export default class TransitionContainer extends React.Component<IProps, IState>
   private currentContentRef = React.createRef<HTMLDivElement>();
   private nextContentRef = React.createRef<HTMLDivElement>();
 
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   public UNSAFE_componentWillReceiveProps(nextProps: IProps) {
     const candidate = nextProps.children;
 
diff --git a/gui/src/shared/daemon-rpc-types.ts b/gui/src/shared/daemon-rpc-types.ts
index 78b6f60c17..ecc04eddb6 100644
--- a/gui/src/shared/daemon-rpc-types.ts
+++ b/gui/src/shared/daemon-rpc-types.ts
@@ -333,11 +333,6 @@ export type VoucherResponse =
   | { type: 'success'; newExpiry: string; secondsAdded: number }
   | { type: 'invalid' | 'already_used' | 'error' };
 
-export enum VoucherErrorCode {
-  Invalid = -400,
-  AlreadyUsed = -401,
-}
-
 export function parseSocketAddress(socketAddrStr: string): ISocketAddress {
   const re = new RegExp(/(.+):(\d+)$/);
   const matches = socketAddrStr.match(re);
diff --git a/gui/types/linux-app-list/index.d.ts b/gui/types/linux-app-list/index.d.ts
index 80ad1ebac0..07a744fff1 100644
--- a/gui/types/linux-app-list/index.d.ts
+++ b/gui/types/linux-app-list/index.d.ts
@@ -1,6 +1,7 @@
 // Implemented in accordance with this specification:
 // https://specifications.freedesktop.org/desktop-entry-spec/desktop-entry-spec-latest.html
 declare module 'linux-app-list' {
+  /* eslint-disable @typescript-eslint/naming-convention */
   export interface AppData {
     absolutepath: string;
     Name: string;
@@ -15,6 +16,7 @@ declare module 'linux-app-list' {
     NotShowIn?: string | string[];
     TryExec?: string;
   }
+  /* eslint-enable @typescript-eslint/naming-convention */
 
   export interface AppList {
     list(): string[];