Import sorting via eslint

clients/admin-ui/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

clients/admin-ui/.eslintrc.json

@@ -5,20 +5,24 @@
     "prettier",
     "next/core-web-vitals"
   ],
+  "plugins": ["simple-import-sort"],
+  "root": true,
   "parserOptions": {
     "project": "./tsconfig.json"
   },
   "rules": {
-    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
-    "react/jsx-props-no-spreading": [0],
+    // causes bug in re-exporting default exports, see
+    // https://github.com/eslint/eslint/issues/15617
+    "no-restricted-exports": [0],
     "react/function-component-definition": [
       2,
       {
         "namedComponents": "arrow-function"
       }
     ],
-    // causes bug in re-exporting default exports, see
-    // https://github.com/eslint/eslint/issues/15617
-    "no-restricted-exports": [0]
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
+    "react/jsx-props-no-spreading": [0],
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
   }
 }

clients/admin-ui/__tests__/index.test.tsx

@@ -1,7 +1,8 @@
 // __tests__/index.test.tsx
 import { render, screen } from '@testing-library/react';
 import { SessionProvider } from 'next-auth/react';
-import Home from '../pages/index';
+
+import Home from '../src/pages/index';
 
 describe('Home', () => {
   it('renders a logged out notification when no session is present', () => {

clients/admin-ui/package.json

@@ -6,7 +6,7 @@
     "dev:mock": "echo '🚨 Running with mock API'; NEXT_PUBLIC_MOCK_API=true next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx",
     "test": "jest --watch",
     "analyze": "cross-env ANALYZE=true next build",
     "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
@@ -55,6 +55,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "typescript": "4.5.5"

clients/admin-ui/src/app/hooks.ts

@@ -1,4 +1,5 @@
 import { TypedUseSelectorHook, useSelector } from 'react-redux';
+
 import type { AppState } from './store';
 
 // eslint-disable-next-line import/prefer-default-export

clients/admin-ui/src/app/store.ts

@@ -1,10 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
+import { setupListeners } from '@reduxjs/toolkit/query/react';
 import { createWrapper } from 'next-redux-wrapper';
 
-import { setupListeners } from '@reduxjs/toolkit/query/react';
 import {
-  reducer as privacyRequestsReducer,
   privacyRequestApi,
+  reducer as privacyRequestsReducer,
 } from '../features/privacy-requests';
 import { reducer as userReducer } from '../features/user';
 

clients/admin-ui/src/features/common/Header.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
 import {
+  Button,
   Flex,
   Link,
-  Button,
   Menu,
   MenuButton,
-  MenuList,
-  MenuItem,
-  Text,
   MenuDivider,
+  MenuItem,
+  MenuList,
   Stack,
+  Text,
 } from '@fidesui/react';
-import { signOut } from 'next-auth/react';
-import NextLink from 'next/link';
 import Image from 'next/image';
+import NextLink from 'next/link';
+import { signOut } from 'next-auth/react';
+import React from 'react';
 
 import { UserIcon } from './Icon';
 

clients/admin-ui/src/features/common/Icon/index.tsx

@@ -2,6 +2,6 @@ export { default as ArrowDownLineIcon } from './ArrowDownLine';
 export { default as CloseSolidIcon } from './CloseSolid';
 export { default as DownloadSolidIcon } from './DownloadSolid';
 export { default as GearIcon } from './Gear';
-export { default as UserIcon } from './User';
 export { default as MoreIcon } from './More';
 export { default as SearchLineIcon } from './SearchLine';
+export { default as UserIcon } from './User';

clients/admin-ui/src/features/privacy-requests/PIIToggle.tsx

@@ -1,7 +1,7 @@
+import { Switch } from '@fidesui/react';
 import React, { ChangeEvent } from 'react';
-
 import { useDispatch } from 'react-redux';
-import { Switch } from '@fidesui/react';
+
 import { setRevealPII } from './privacy-requests.slice';
 
 const PIIToggle: React.FC = () => {

clients/admin-ui/src/features/privacy-requests/RequestBadge.tsx

@@ -1,5 +1,6 @@
-import { ComponentProps } from 'react';
 import { Badge } from '@fidesui/react';
+import { ComponentProps } from 'react';
+
 import { PrivacyRequestStatus } from './types';
 
 export const statusPropMap: {

clients/admin-ui/src/features/privacy-requests/RequestFilters.tsx

@@ -1,37 +1,36 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import {
-  Flex,
-  Text,
   Button,
-  Select,
+  Flex,
   Input,
   InputGroup,
-  InputLeftElement,
   InputLeftAddon,
+  InputLeftElement,
+  Select,
   Stack,
+  Text,
   useToast,
 } from '@fidesui/react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
-import PIIToggle from './PIIToggle';
 import {
-  DownloadSolidIcon,
   CloseSolidIcon,
+  DownloadSolidIcon,
   SearchLineIcon,
 } from '../common/Icon';
-import { statusPropMap } from './RequestBadge';
-
-import { PrivacyRequestStatus } from './types';
+import { selectUserToken } from '../user/user.slice';
+import PIIToggle from './PIIToggle';
 import {
-  setRequestStatus,
-  setRequestId,
-  setRequestFrom,
-  setRequestTo,
   clearAllFilters,
-  selectPrivacyRequestFilters,
   requestCSVDownload,
+  selectPrivacyRequestFilters,
+  setRequestFrom,
+  setRequestId,
+  setRequestStatus,
+  setRequestTo,
 } from './privacy-requests.slice';
-import { selectUserToken } from '../user/user.slice';
+import { statusPropMap } from './RequestBadge';
+import { PrivacyRequestStatus } from './types';
 
 const useRequestFilters = () => {
   const filters = useSelector(selectPrivacyRequestFilters);