ci: add eslint rule for sorting imports (#3858)

The [ignoreDeclarationSort](https://eslint.org/docs/latest/rules/sort-imports#ignoredeclarationsort) and [memberSyntaxSortOrder](https://eslint.org/docs/latest/rules/sort-imports#membersyntaxsortorder) options have been turned on and omitted respective to not conflict with the existing import/order rules.

web/.eslintrc.js

@@ -30,5 +30,14 @@ module.exports = {
                 },
             },
         ],
+        "sort-imports": [
+            "error",
+            {
+                ignoreCase: false,
+                ignoreDeclarationSort: true,
+                ignoreMemberSort: false,
+                allowSeparatedGroups: false,
+            },
+        ],
     },
 };

web/src/App.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, Suspense } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import { config as faConfig } from "@fortawesome/fontawesome-svg-core";
 import { CssBaseline, ThemeProvider } from "@mui/material";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 
 import NotificationBar from "@components/NotificationBar";
 import {
@@ -13,8 +13,8 @@ import {
     LogoutRoute,
     RegisterOneTimePasswordRoute,
     RegisterWebauthnRoute,
-    ResetPasswordStep2Route,
     ResetPasswordStep1Route,
+    ResetPasswordStep2Route,
 } from "@constants/Routes";
 import NotificationsContext from "@hooks/NotificationsContext";
 import { Notification } from "@models/Notifications";

web/src/components/NotificationBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Alert, Slide, SlideProps, Snackbar } from "@mui/material";
 

web/src/components/TimerIcon.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import PieChartIcon from "@components/PieChartIcon";
 

web/src/hooks/IntermittentClass.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export function useIntermittentClass(
     classname: string,

web/src/hooks/Mounted.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function useIsMountedRef() {
     const isMountedRef = useRef(false);

web/src/hooks/RemoteCall.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, DependencyList } from "react";
+import { DependencyList, useCallback, useState } from "react";
 
 type PromisifiedFunction<Ret> = (...args: any) => Promise<Ret>;
 

web/src/hooks/Timer.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export function useTimer(timeoutMs: number): [number, () => void, () => void] {
     const Interval = 100;

web/src/layouts/LoginLayout.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect } from "react";
 
-import { Grid, Container, Link, Theme } from "@mui/material";
+import { Container, Grid, Link, Theme } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";

web/src/services/Configuration.ts

@@ -1,7 +1,7 @@
 import { Configuration } from "@models/Configuration";
 import { ConfigurationPath } from "@services/Api";
 import { Get } from "@services/Client";
-import { toEnum, Method2FA } from "@services/UserInfo";
+import { Method2FA, toEnum } from "@services/UserInfo";
 
 interface ConfigurationPayload {
     available_methods: Method2FA[];

web/src/services/Consent.ts

@@ -1,5 +1,5 @@
 import { ConsentPath } from "@services/Api";
-import { Post, Get } from "@services/Client";
+import { Get, Post } from "@services/Client";
 
 interface ConsentPostRequestBody {
     client_id: string;

web/src/services/PushNotification.ts

@@ -1,7 +1,7 @@
 import {
+    CompleteDuoDeviceSelectionPath,
     CompletePushNotificationSignInPath,
     InitiateDuoDeviceSelectionPath,
-    CompleteDuoDeviceSelectionPath,
 } from "@services/Api";
 import { Get, PostWithOptionalResponse } from "@services/Client";
 

web/src/services/RegisterDevice.ts

@@ -1,4 +1,4 @@
-import { InitiateTOTPRegistrationPath, CompleteTOTPRegistrationPath, WebauthnIdentityStartPath } from "@services/Api";
+import { CompleteTOTPRegistrationPath, InitiateTOTPRegistrationPath, WebauthnIdentityStartPath } from "@services/Api";
 import { Post, PostWithOptionalResponse } from "@services/Client";
 
 export async function initiateTOTPRegistrationProcess() {

web/src/services/ResetPassword.ts

@@ -1,4 +1,4 @@
-import { InitiateResetPasswordPath, CompleteResetPasswordPath, ResetPasswordPath } from "@services/Api";
+import { CompleteResetPasswordPath, InitiateResetPasswordPath, ResetPasswordPath } from "@services/Api";
 import { PostWithOptionalResponse } from "@services/Client";
 
 export async function initiateResetPasswordProcess(username: string) {

web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { IconDefinition, faCopy, faKey, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Typography, Button, IconButton, Link, CircularProgress, TextField, Theme } from "@mui/material";
+import { Button, CircularProgress, IconButton, Link, TextField, Theme, Typography } from "@mui/material";
 import { red } from "@mui/material/colors";
 import makeStyles from "@mui/styles/makeStyles";
 import classnames from "classnames";

web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Grid, Button, Theme } from "@mui/material";
+import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";

web/src/views/LoginPortal/ConsentView/ConsentView.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect, Fragment, ReactNode, useState } from "react";
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
 
 import { AccountBox, Autorenew, CheckBox, Contacts, Drafts, Group } from "@mui/icons-material";
 import {
     Button,
+    Checkbox,
+    FormControlLabel,
     Grid,
     List,
     ListItem,
     ListItemIcon,
     ListItemText,
+    Theme,
     Tooltip,
     Typography,
-    Checkbox,
-    FormControlLabel,
-    Theme,
 } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
@@ -24,7 +24,7 @@ import { useNotifications } from "@hooks/NotificationsContext";
 import { useRedirector } from "@hooks/Redirector";
 import { useUserInfoGET } from "@hooks/UserInfo";
 import LoginLayout from "@layouts/LoginLayout";
-import { acceptConsent, ConsentGetResponseBody, getConsentResponse, rejectConsent } from "@services/Consent";
+import { ConsentGetResponseBody, acceptConsent, getConsentResponse, rejectConsent } from "@services/Consent";
 import LoadingPage from "@views/LoadingPage/LoadingPage";
 
 export interface Props {}

web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx

@@ -1,6 +1,6 @@
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 
-import { Grid, Button, FormControlLabel, Checkbox, Link, Theme } from "@mui/material";
+import { Button, Checkbox, FormControlLabel, Grid, Link, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";

web/src/views/LoginPortal/SecondFactor/DeviceSelectionContainer.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 
-import { Typography, Grid, Button, Container, Theme } from "@mui/material";
+import { Button, Container, Grid, Theme, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 
 import PushNotificationIcon from "@components/PushNotificationIcon";

web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx

@@ -1,6 +1,6 @@
-import React, { ReactNode, Fragment } from "react";
+import React, { Fragment, ReactNode } from "react";
 
-import { Typography, Link, Theme, Box } from "@mui/material";
+import { Box, Link, Theme, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";

web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 
-import { Dialog, Grid, DialogContent, Button, DialogActions, Typography, useTheme, Theme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, Grid, Theme, Typography, useTheme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 

web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useRef, useState, ReactNode } from "react";
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 import { Button, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
@@ -10,15 +10,15 @@ import { useIsMountedRef } from "@hooks/Mounted";
 import { useRedirectionURL } from "@hooks/RedirectionURL";
 import { useWorkflow } from "@hooks/Workflow";
 import {
-    completePushNotificationSignIn,
-    completeDuoDeviceSelectionProcess,
     DuoDevicePostRequest,
+    completeDuoDeviceSelectionProcess,
+    completePushNotificationSignIn,
     initiateDuoDeviceSelectionProcess,
 } from "@services/PushNotification";
 import { AuthenticationLevel } from "@services/State";
 import DeviceSelectionContainer, {
-    SelectedDevice,
     SelectableDevice,
+    SelectedDevice,
 } from "@views/LoginPortal/SecondFactor/DeviceSelectionContainer";
 import MethodContainer, { State as MethodContainerState } from "@views/LoginPortal/SecondFactor/MethodContainer";
 

web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
-import { Grid, Button, Theme } from "@mui/material";
+import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
 import {
-    LogoutRoute as SignOutRoute,
     SecondFactorPushSubRoute,
     SecondFactorTOTPSubRoute,
     SecondFactorWebauthnSubRoute,
+    LogoutRoute as SignOutRoute,
 } from "@constants/Routes";
 import { useNotifications } from "@hooks/NotificationsContext";
 import LoginLayout from "@layouts/LoginLayout";

web/src/views/LoginPortal/SignOut/SignOut.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { Theme, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";

web/src/views/ResetPassword/ResetPasswordStep1.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { Grid, Button, Theme } from "@mui/material";
+import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";