add more linting (#982)

Add linting for dashboard and add import order linting

Signed-off-by: Teo Koon Peng <[email protected]>

.github/workflows/dashboard.yml

@@ -36,6 +36,8 @@ jobs:
         with:
           package: rmf-dashboard
           skip-build: true
+      - name: lint
+        run: pnpm lint
       - name: unit test
         run: pnpm run test:coverage
       - name: Upload coverage to Codecov

eslint.config.mjs

@@ -2,6 +2,7 @@ import { FlatCompat } from '@eslint/eslintrc';
 import eslint from '@eslint/js';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import storybook from 'eslint-plugin-storybook';
 import tseslint from 'typescript-eslint';
 
@@ -22,7 +23,15 @@ export default tseslint.config(
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/ban-types': ['error', { types: { '{}': false }, extendDefaults: true }],
       '@typescript-eslint/no-loss-of-precision': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
     },
   },
   ...compat.config(storybook.configs.recommended),
+  {
+    plugins: { 'simple-import-sort': simpleImportSort },
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
+  },
 );

package.json

@@ -11,8 +11,9 @@
   },
   "devDependencies": {
     "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",

packages/dashboard/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "vite build",
     "build-storybook": "storybook build",
+    "lint": "tsc --build && eslint --max-warnings 0 src",
     "start": "concurrently npm:start:rmf-server npm:start:react",
     "start:airport": "RMF_DASHBOARD_DEMO_MAP=airport_terminal.launch.xml pnpm run start:sim",
     "start:clinic": "RMF_DASHBOARD_DEMO_MAP=clinic.launch.xml pnpm run start:sim",

packages/dashboard/src/app-config.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TaskDefinition, getDefaultTaskDefinition } from 'react-components';
+import { getDefaultTaskDefinition, TaskDefinition } from 'react-components';
 import { Authenticator, KeycloakAuthenticator, StubAuthenticator } from 'rmf-auth';
+
 import appConfigJson from '../app-config.json';
 import { BasePath } from './util/url';
 

packages/dashboard/src/components/admin/add-permission-dialog.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
+
 import { AddPermissionDialog, AddPermissionDialogProps } from './add-permission-dialog';
 
 export default {

packages/dashboard/src/components/admin/add-permission-dialog.tsx

@@ -2,6 +2,7 @@ import { MenuItem, TextField } from '@mui/material';
 import { Permission } from 'api-client';
 import React from 'react';
 import { ConfirmationDialog, useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 import { getActionText, RmfAction } from '../permissions';
 

packages/dashboard/src/components/admin/create-role-dialog.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
+
 import { CreateRoleDialog, CreateRoleDialogProps } from './create-role-dialog';
 
 export default {

packages/dashboard/src/components/admin/create-role-dialog.tsx

@@ -1,6 +1,7 @@
 import { TextField } from '@mui/material';
 import React from 'react';
 import { ConfirmationDialog, useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 
 export interface CreateRoleDialogProps {

packages/dashboard/src/components/admin/create-user-dialog.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
+
 import { CreateUserDialog, CreateUserDialogProps } from './create-user-dialog';
 
 export default {

packages/dashboard/src/components/admin/create-user-dialog.tsx

@@ -1,6 +1,7 @@
 import { TextField } from '@mui/material';
 import React from 'react';
 import { ConfirmationDialog, useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 
 export interface CreateUserDialogProps {

packages/dashboard/src/components/admin/drawer.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
+
 import { AdminDrawer } from './drawer';
 
 export default {

packages/dashboard/src/components/admin/drawer.tsx

@@ -1,18 +1,18 @@
+import { SvgIconComponent } from '@mui/icons-material';
+import AccountIcon from '@mui/icons-material/AccountCircle';
+import SecurityIcon from '@mui/icons-material/Security';
 import {
   Drawer,
   DrawerProps,
   List,
   ListItem,
   ListItemIcon,
   ListItemText,
-  Toolbar,
   styled,
+  Toolbar,
 } from '@mui/material';
-import { SvgIconComponent } from '@mui/icons-material';
-import AccountIcon from '@mui/icons-material/AccountCircle';
-import SecurityIcon from '@mui/icons-material/Security';
 import React from 'react';
-import { RouteProps, useNavigate, useLocation } from 'react-router';
+import { RouteProps, useLocation, useNavigate } from 'react-router';
 
 export type AdminDrawerValues = 'Users' | 'Roles';
 

packages/dashboard/src/components/admin/manage-roles-dialog.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
+
 import { ManageRolesCard } from './manage-roles-dialog';
 import { RoleListCardProps } from './role-list-card';
 

packages/dashboard/src/components/admin/manage-roles-dialog.tsx

@@ -1,3 +1,4 @@
+import SecurityIcon from '@mui/icons-material/Security';
 import {
   Button,
   Card,
@@ -14,9 +15,9 @@ import {
   ListItemText,
   styled,
 } from '@mui/material';
-import SecurityIcon from '@mui/icons-material/Security';
 import React from 'react';
 import { Loading, TransferList, useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 
 const prefix = 'manage-roles-dialog';

packages/dashboard/src/components/admin/permissions-card.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { Permission } from 'api-client';
+
 import { PermissionsCard, PermissionsCardProps } from './permissions-card';
 
 export default {

packages/dashboard/src/components/admin/permissions-card.tsx

@@ -1,3 +1,5 @@
+import AddIcon from '@mui/icons-material/AddCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
 import {
   Button,
   IconButton,
@@ -12,12 +14,11 @@ import {
   Toolbar,
   Typography,
 } from '@mui/material';
-import AddIcon from '@mui/icons-material/AddCircle';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { styled } from '@mui/material';
 import { Permission } from 'api-client';
 import React from 'react';
-import { styled } from '@mui/material';
 import { Loading, useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 import { getActionText } from '../permissions';
 import { AddPermissionDialog, AddPermissionDialogProps } from './add-permission-dialog';

packages/dashboard/src/components/admin/role-list-card.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
-import { RoleListCard, RoleListCardProps } from './role-list-card';
+
 import { RmfAction } from '../permissions';
+import { RoleListCard, RoleListCardProps } from './role-list-card';
 
 export default {
   title: 'Admin/Role List Card',

packages/dashboard/src/components/admin/role-list-card.tsx

@@ -1,3 +1,7 @@
+import AddIcon from '@mui/icons-material/AddCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SecurityIcon from '@mui/icons-material/Security';
 import {
   Accordion,
   AccordionDetails,
@@ -9,16 +13,13 @@ import {
   Divider,
   Grid,
   IconButton,
-  Typography,
   styled,
+  Typography,
 } from '@mui/material';
-import AddIcon from '@mui/icons-material/AddCircle';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import SecurityIcon from '@mui/icons-material/Security';
 import { Permission } from 'api-client';
 import React from 'react';
 import { ConfirmationDialog, Loading, useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 import { CreateRoleDialog, CreateRoleDialogProps } from './create-role-dialog';
 import { PermissionsCard, PermissionsCardProps } from './permissions-card';

packages/dashboard/src/components/admin/role-list-page.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { RmfAppContext } from '../rmf-app';
 import { getApiErrorMessage } from '../utils';
 import { adminPageClasses, AdminPageContainer } from './page-css';

packages/dashboard/src/components/admin/router.tsx

@@ -1,4 +1,5 @@
-import { Route, Routes, Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
+
 import { AdminDrawer } from './drawer';
 import { RoleListPage } from './role-list-page';
 import { UserListPage } from './user-list-page';

packages/dashboard/src/components/admin/tests/add-permission-dialog.test.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
+
 import { RmfAction } from '../../permissions';
 import { AddPermissionDialog } from '../add-permission-dialog';
 

packages/dashboard/src/components/admin/tests/create-role-dialog.test.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
+
 import { CreateRoleDialog } from '../create-role-dialog';
 
 describe('CreateRoleDialog', () => {

packages/dashboard/src/components/admin/tests/create-user-dialog.test.tsx

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
+
 import { CreateUserDialog } from '../create-user-dialog';
 
 describe('CreateUserDialog', () => {

packages/dashboard/src/components/admin/tests/drawer.test.tsx

@@ -1,4 +1,5 @@
 import { describe, it } from 'vitest';
+
 import { render } from '../../tests/test-utils';
 import { AdminDrawer } from '../drawer';
 

packages/dashboard/src/components/admin/tests/manage-roles-dialog.test.tsx

@@ -1,6 +1,7 @@
 import { render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
+
 import { ManageRolesCard, ManageRolesDialog } from '../manage-roles-dialog';
 
 describe('ManageRolesCard', () => {

packages/dashboard/src/components/admin/tests/permissions-card.test.tsx

@@ -1,7 +1,8 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
-import { RmfAction, getActionText } from '../../permissions';
+
+import { getActionText, RmfAction } from '../../permissions';
 import { PermissionsCard } from '../permissions-card';
 
 // TODO(AA): To remove after

packages/dashboard/src/components/admin/tests/role-list-card.test.tsx

@@ -1,6 +1,7 @@
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it } from 'vitest';
+
 import { RoleListCard } from '../role-list-card';
 
 describe('Role List', () => {

packages/dashboard/src/components/admin/tests/user-list-card.test.tsx

@@ -2,6 +2,7 @@ import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
+
 import { UserListCard } from '../user-list-card';
 
 describe('UserListCard', () => {

packages/dashboard/src/components/admin/tests/user-profile.test.tsx

@@ -1,6 +1,7 @@
 import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
+
 import { UserProfileCard } from '../user-profile';
 
 describe('UserProfileCard', () => {

packages/dashboard/src/components/admin/user-list-card.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router';
+
 import { UserListCard, UserListCardProps } from './user-list-card';
 
 export default {

packages/dashboard/src/components/admin/user-list-card.tsx

@@ -1,10 +1,15 @@
+import AccountIcon from '@mui/icons-material/AccountCircle';
+import AddIcon from '@mui/icons-material/AddCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SearchIcon from '@mui/icons-material/Search';
 import {
   Button,
   Card,
   CardHeader,
   CardProps,
   IconButton,
   InputAdornment,
+  styled,
   Table,
   TableBody,
   TableCell,
@@ -14,15 +19,11 @@ import {
   TableRow,
   TextField,
   Typography,
-  styled,
 } from '@mui/material';
-import AccountIcon from '@mui/icons-material/AccountCircle';
-import AddIcon from '@mui/icons-material/AddCircle';
-import DeleteIcon from '@mui/icons-material/Delete';
-import SearchIcon from '@mui/icons-material/Search';
 import React from 'react';
 import { ConfirmationDialog, Loading, useAsync } from 'react-components';
 import { useNavigate } from 'react-router';
+
 import { AppControllerContext } from '../app-contexts';
 import { CreateUserDialog, CreateUserDialogProps } from './create-user-dialog';
 

packages/dashboard/src/components/admin/user-list-page.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { RmfAppContext } from '../rmf-app';
 import { getApiErrorMessage } from '../utils';
 import { adminPageClasses, AdminPageContainer } from './page-css';

packages/dashboard/src/components/admin/user-profile-page.tsx

@@ -4,6 +4,7 @@ import { AxiosError } from 'axios';
 import React from 'react';
 import { useAsync } from 'react-components';
 import { useParams } from 'react-router';
+
 import { RmfAppContext } from '../rmf-app';
 import { getApiErrorMessage } from '../utils';
 import { ManageRolesCard } from './manage-roles-dialog';

packages/dashboard/src/components/admin/user-profile.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { User } from 'api-client';
 import React from 'react';
+
 import { UserProfileCard, UserProfileCardProps } from './user-profile';
 
 export default {

packages/dashboard/src/components/admin/user-profile.tsx

@@ -1,19 +1,20 @@
+import AccountIcon from '@mui/icons-material/AccountCircle';
+import MoreIcon from '@mui/icons-material/MoreVert';
 import {
   Card,
-  CardProps,
   CardHeader,
+  CardProps,
   Checkbox,
   FormControlLabel,
   IconButton,
   Menu,
   MenuItem,
   styled,
 } from '@mui/material';
-import AccountIcon from '@mui/icons-material/AccountCircle';
-import MoreIcon from '@mui/icons-material/MoreVert';
 import { User } from 'api-client';
 import React from 'react';
 import { useAsync } from 'react-components';
+
 import { AppControllerContext } from '../app-contexts';
 
 const classes = {