Revert "[WIFI-10810] React 18, Vite and Chakra v2 migration"

Signed-off-by: Charles <charles.bourque96@gmail.com>

.env

@@ -1 +1,2 @@
-VITE_UCENTRALSEC_URL="https://ucentral.dpaas.arilia.com:16001"
+REACT_APP_VERSION=$npm_package_version
+REACT_APP_UCENTRALSEC_URL="https://ucentral.dpaas.arilia.com:16001"

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "airbnb",
+    "airbnb-typescript",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "allowImportExportEverywhere": false,
+    "codeFrame": false,
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "@typescript-eslint/ban-ts-comment": ["off"],
+    "max-len": ["error", { "code": 150 }],
+    "prefer-promise-reject-errors": ["off"],
+    "react/jsx-filename-extension": ["off"],
+    "react/prop-types": ["warn"],
+    "no-return-assign": ["off"],
+    "react/jsx-props-no-spreading": ["off"],
+    "react/destructuring-assignment": ["off"],
+    "no-restricted-syntax": ["error", "ForInStatement", "LabeledStatement", "WithStatement"],
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-wrap-multilines": "off",
+    "react/require-default-props": "off",
+    "react/jsx-curly-newline": "off",
+    "no-underscore-dangle": "off",
+    "react/function-component-definition": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["src"]
+      }
+    }
+  }
+}

.eslintrc.js

@@ -1,86 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 12,
-    sourceType: 'module',
-    allowImportExportEverywhere: false,
-    codeFrame: false,
-    project: './tsconfig.json',
-  },
-  ignorePatterns: ['build/', 'dist/'],
-  plugins: ['import'],
-  extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'airbnb',
-    'airbnb-typescript',
-    'prettier',
-    'plugin:import/errors',
-    'plugin:import/warnings',
-    'plugin:import/typescript',
-  ],
-  plugins: ['react', '@typescript-eslint', 'prettier'],
-  rules: {
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-        jsx: 'never',
-        ts: 'never',
-        tsx: 'never',
-      },
-    ],
-    '@typescript-eslint/naming-convention': [
-      'error',
-      {
-        selector: 'function',
-        format: ['PascalCase', 'camelCase'],
-        leadingUnderscore: 'allowSingleOrDouble',
-      },
-    ],
-    'no-restricted-syntax': ['error', 'ForInStatement', 'LabeledStatement', 'WithStatement'],
-    'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
-    'import/order': [
-      'error',
-      {
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: true,
-        },
-        'newlines-between': 'never',
-        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
-        pathGroups: [
-          {
-            pattern: 'react',
-            group: 'external',
-            position: 'before',
-          },
-        ],
-        pathGroupsExcludedImportTypes: ['builtin'],
-      },
-    ],
-    'max-len': ['error', { code: 150 }],
-    '@typescript-eslint/ban-ts-comment': ['off'],
-    'react/prop-types': ['warn'],
-    'react/require-default-props': 'off',
-    'react/jsx-props-no-spreading': ['off'],
-    'react/jsx-curly-newline': 'off',
-    'no-underscore-dangle': 'off',
-  },
-  settings: {
-    'import/resolver': {
-      node: {
-        paths: ['src'],
-      },
-    },
-  },
-};

.npmrc

@@ -1 +0,0 @@
-legacy-peer-deps=true

package.json

@@ -1,31 +1,27 @@
 {
   "name": "wlan-cloud-owprov-ui",
-  "version": "2.7.0(14)",
+  "version": "2.7.0(13)",
   "description": "",
   "main": "index.tsx",
   "scripts": {
-    "start": "vite",
+    "start": "react-scripts start",
-    "build": "vite build",
+    "build": "react-scripts build",
     "format": "prettier --write \"src/**/*.js\"",
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
-    "lint": "TIMING=1 eslint \"src/**/*.{ts,tsx,js,jsx}\" --fix",
-    "clean": "rm -rf node_modules && rm -rf build"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.8",
+    "@chakra-ui/icons": "^1.1.1",
-    "@chakra-ui/react": "^2.2.3",
+    "@chakra-ui/react": "^1.7.3",
-    "@chakra-ui/theme-tools": "^2.0.9",
+    "@chakra-ui/theme-tools": "^1.3.1",
-    "@chakra-ui/utils": "^2.0.8",
+    "@chakra-ui/utils": "^1.10.4",
     "@fontsource/inter": "^4.5.1",
     "@nivo/circle-packing": "^0.79.1",
     "@nivo/core": "^0.79.0",
     "@react-spring/web": "^9.4.4",
     "cronstrue": "2.11.0",
     "axios": "^0.24.0",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.6.0",
     "buffer": "^6.0.3",
     "chakra-react-select": "^3.0.0",
     "currency-codes": "^2.1.0",
@@ -37,9 +33,8 @@
     "libphonenumber-js": "^1.9.49",
     "papaparse": "^5.3.1",
     "phosphor-react": "^1.3.1",
-    "framer-motion": "^6.3.6",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
+    "react": "^17.0.2",
     "react-app-polyfill": "^3.0.0",
     "react-country-flag": "^3.0.2",
     "react-csv": "^2.2.2",
@@ -52,26 +47,24 @@
     "react-papaparse": "^4.0.2",
     "react-query": "^3.35.0",
     "react-router-dom": "^6.2.1",
-    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
     "react-table": "^7.7.0",
     "react-tooltip": "^4.2.21",
     "source-map-explorer": "^2.5.2",
     "typescript": "^4.6.3",
     "uuid": "^8.3.2",
-    "vite": "^3.0.4",
     "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/node": "^17.0.27",
-    "@types/react": "^18.0.17",
+    "@types/react": "^17.0.44",
     "@types/react-csv": "^1.1.2",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^18.0.0",
-    "@types/react-table": "^7.7.12",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
     "@typescript-eslint/parser": "^5.21.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "8.15.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-airbnb-typescript-prettier": "^5.0.0",
@@ -79,14 +72,12 @@
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-babel": "^5.3.1",
-    "vite-tsconfig-paths": "^3.5.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-no-inline-styles": "^1.0.5",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "@vitejs/plugin-react": "^2.0.1",
     "lint-staged": "^12.1.3",
     "prettier": "^2.5.1"
   },

public/index.html

@@ -11,6 +11,5 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

src/App.tsx

@@ -1,10 +1,11 @@
 import React, { Suspense } from 'react';
-import { Spinner } from '@chakra-ui/react';
-import { QueryClientProvider, QueryClient } from 'react-query';
 import { HashRouter } from 'react-router-dom';
+import { ChakraProvider, Spinner } from '@chakra-ui/react';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import theme from 'theme/theme';
 import { AuthProvider } from 'contexts/AuthProvider';
-import { WebSocketProvider } from 'contexts/WebSocketProvider';
 import Router from 'router';
+import { WebSocketProvider } from 'contexts/WebSocketProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -21,13 +22,15 @@ const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <HashRouter>
-        <Suspense fallback={<Spinner />}>
+        <ChakraProvider portalZIndex={40} theme={theme}>
-          <AuthProvider token={storageToken !== null ? storageToken : undefined}>
+          <Suspense fallback={<Spinner />}>
-            <WebSocketProvider>
+            <AuthProvider token={storageToken !== null ? storageToken : undefined}>
-              <Router />
+              <WebSocketProvider>
-            </WebSocketProvider>
+                <Router />
-          </AuthProvider>
+              </WebSocketProvider>
-        </Suspense>
+            </AuthProvider>
+          </Suspense>
+        </ChakraProvider>
       </HashRouter>
     </QueryClientProvider>
   );

src/components/Buttons/AlertButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { Warning } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 import { ThemeProps } from 'models/Theme';
 
 interface Props extends ThemeProps {

src/components/Buttons/CloseButton/index.tsx

@@ -1,28 +1,40 @@
 import React from 'react';
-import { IconButton, SpaceProps } from '@chakra-ui/react';
-import { X } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { X } from 'phosphor-react';
 
-interface CloseButtonProps extends SpaceProps {
+interface Props {
   onClick: () => void;
   isDisabled?: boolean;
   isLoading?: boolean;
+  ml?: string | number;
 }
 
-const CloseButton: React.FC<CloseButtonProps> = ({ onClick, isDisabled, isLoading, ...props }) => {
+const defaultProps = {
+  isDisabled: false,
+  isLoading: false,
+  ml: undefined,
+};
+
+const CloseButton: React.FC<Props> = ({ onClick, isDisabled, isLoading, ml, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <IconButton
+    <Tooltip label={t('common.close')}>
-      aria-label={t('common.close')}
+      <IconButton
-      colorScheme="gray"
+        aria-label="close"
-      onClick={onClick}
+        colorScheme="gray"
-      icon={<X size={20} />}
+        onClick={onClick}
-      isLoading={isLoading}
+        icon={<X size={20} />}
-      isDisabled={isDisabled}
+        isLoading={isLoading}
-      {...props}
+        isDisabled={isDisabled}
-    />
+        ml={ml}
+        {...props}
+      />
+    </Tooltip>
   );
 };
 
-export default React.memo(CloseButton);
+CloseButton.defaultProps = defaultProps;
+
+export default CloseButton;

src/components/Buttons/CreateButton/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Button, IconButton, Tooltip, useBreakpoint, SpaceProps } from '@chakra-ui/react';
-import { Plus } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
+import { Button, IconButton, Tooltip, useBreakpoint, LayoutProps, SpaceProps } from '@chakra-ui/react';
+import { Plus } from 'phosphor-react';
 
-interface CreateButtonProps extends SpaceProps {
+interface Props extends LayoutProps, SpaceProps {
   onClick?: () => void;
   isDisabled?: boolean;
   isLoading?: boolean;
@@ -11,7 +11,15 @@ interface CreateButtonProps extends SpaceProps {
   label?: string;
 }
 
-const CreateButton: React.FC<CreateButtonProps> = ({ onClick, isDisabled, isLoading, isCompact, label, ...props }) => {
+const defaultProps = {
+  onClick: () => {},
+  isDisabled: false,
+  isLoading: false,
+  isCompact: false,
+  label: undefined,
+};
+
+const CreateButton: React.FC<Props> = ({ onClick, isDisabled, isLoading, isCompact, label, ...props }) => {
   const { t } = useTranslation();
   const breakpoint = useBreakpoint();
 
@@ -46,4 +54,6 @@ const CreateButton: React.FC<CreateButtonProps> = ({ onClick, isDisabled, isLoad
   );
 };
 
+CreateButton.defaultProps = defaultProps;
+
 export default React.memo(CreateButton);

src/components/Buttons/DeleteButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { Trash } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 
 interface Props {
   onClick: () => void;

src/components/Buttons/RefreshButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { ArrowsClockwise } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 
 interface Props {
   onClick: () => void;

src/components/Buttons/ResponsiveButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Button, IconButton, SpaceProps, Tooltip, useBreakpoint } from '@chakra-ui/react';
+import { Button, IconButton, LayoutProps, SpaceProps, Tooltip, useBreakpoint } from '@chakra-ui/react';
 
-interface ResponsiveButtonProps extends SpaceProps {
+interface ResponsiveButtonProps extends LayoutProps, SpaceProps {
   onClick: () => void;
   isDisabled?: boolean;
   isLoading?: boolean;

src/components/Buttons/SaveButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { FloppyDisk } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 
 interface Props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   onClick: () => void;

src/components/Buttons/StepButton/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { ArrowRight, FloppyDisk } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 
 interface Props {
   onNext: () => void;

src/components/Buttons/ToggleEditButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint, useDisclosure } from '@chakra-ui/react';
 import { Pencil, X } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
 
 interface Props {

src/components/Buttons/WarningButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
 import { Warning } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 import { ThemeProps } from 'models/Theme';
 
 interface Props extends ThemeProps {

src/components/ColumnPicker/index.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
-import { Button, Checkbox, IconButton, Menu, MenuButton, MenuItem, MenuList, useBreakpoint } from '@chakra-ui/react';
-import { FunnelSimple } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, IconButton, Menu, MenuButton, MenuItem, MenuList, useBreakpoint } from '@chakra-ui/react';
 import { useAuth } from 'contexts/AuthProvider';
+import { FunnelSimple } from 'phosphor-react';
 import { Column } from 'models/Table';
 
 interface Props {

src/components/CreateObjectsForms/LocationPickerCreator/Form.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { SimpleGrid, Box } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { SimpleGrid, Box } from '@chakra-ui/react';
-import AddressSearchField from 'components/CustomFields/AddressSearchField';
-import CreatableSelectField from 'components/FormFields/CreatableSelectField';
-import SelectField from 'components/FormFields/SelectField';
 import StringField from 'components/FormFields/StringField';
 import COUNTRY_LIST from 'constants/countryList';
+import AddressSearchField from 'components/CustomFields/AddressSearchField';
+import { useTranslation } from 'react-i18next';
+import SelectField from 'components/FormFields/SelectField';
+import CreatableSelectField from 'components/FormFields/CreatableSelectField';
 
 const propTypes = {
   name: PropTypes.string.isRequired,

src/components/CreateObjectsForms/LocationPickerCreator/Modal.js

@@ -1,17 +1,17 @@
 import React, { useEffect } from 'react';
-import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, SimpleGrid, useDisclosure } from '@chakra-ui/react';
-import { Form, Formik } from 'formik';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { CloseButton, Modal, ModalBody, ModalContent, ModalOverlay, SimpleGrid, useDisclosure } from '@chakra-ui/react';
-import SaveButton from 'components/Buttons/SaveButton';
-import AddressSearchField from 'components/CustomFields/AddressSearchField';
-import CreatableSelectField from 'components/FormFields/CreatableSelectField';
-import SelectField from 'components/FormFields/SelectField';
-import StringField from 'components/FormFields/StringField';
-import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
 import ModalHeader from 'components/Modals/ModalHeader';
-import COUNTRY_LIST from 'constants/countryList';
+import SaveButton from 'components/Buttons/SaveButton';
+import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
+import { Form, Formik } from 'formik';
 import { CreateLocationSchema } from 'constants/formSchemas';
+import { useTranslation } from 'react-i18next';
+import StringField from 'components/FormFields/StringField';
+import SelectField from 'components/FormFields/SelectField';
+import CreatableSelectField from 'components/FormFields/CreatableSelectField';
+import AddressSearchField from 'components/CustomFields/AddressSearchField';
+import COUNTRY_LIST from 'constants/countryList';
 import useFormRef from 'hooks/useFormRef';
 
 const propTypes = {

src/components/CreateObjectsForms/LocationPickerCreator/index.js

@@ -1,13 +1,13 @@
 import React, { useEffect } from 'react';
-import { useToast } from '@chakra-ui/react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import { useGetAllLocations, useGetSelectLocations } from 'hooks/Network/Locations';
 import { useTranslation } from 'react-i18next';
+import SelectField from 'components/FormFields/SelectField';
+import { useToast } from '@chakra-ui/react';
+import { useGetEntity } from 'hooks/Network/Entity';
 import Form from './Form';
 import LocationPickerCreatorModal from './Modal';
-import SelectField from 'components/FormFields/SelectField';
-import { useGetEntity } from 'hooks/Network/Entity';
-import { useGetAllLocations, useGetSelectLocations } from 'hooks/Network/Locations';
 
 const propTypes = {
   locationName: PropTypes.string.isRequired,

src/components/CustomFields/AddressSearchField/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, FormControl, LayoutProps, SpaceProps } from '@chakra-ui/react';
-import { useFormikContext } from 'formik';
 import AddressSearchBar from 'components/SearchBars/AddressSearchBar';
+import { useFormikContext } from 'formik';
 import { AddressObject } from 'models/Location';
 
 const defaultProps = {

src/components/CustomFields/AnalyticsBoardForm/index.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Box, Button, Center, SimpleGrid } from '@chakra-ui/react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { Box, Button, Center, SimpleGrid } from '@chakra-ui/react';
-import DeleteButton from 'components/Buttons/DeleteButton';
-import NumberField from 'components/FormFields/NumberField';
 import StringField from 'components/FormFields/StringField';
 import ToggleField from 'components/FormFields/ToggleField';
+import NumberField from 'components/FormFields/NumberField';
+import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
+import DeleteButton from 'components/Buttons/DeleteButton';
 
 const propTypes = {
   editing: PropTypes.bool.isRequired,

src/components/CustomFields/ConfigurationResourcePicker/ResourcePicker.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Select } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
-import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
+import isEqual from 'react-fast-compare';
+import { Select } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
 
 const propTypes = {
   value: PropTypes.string.isRequired,

src/components/CustomFields/ConfigurationResourcePicker/index.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
-import { useToast } from '@chakra-ui/react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
+import { useField } from 'formik';
-import ResourcePicker from './ResourcePicker';
 import { useGetAllResources } from 'hooks/Network/Resources';
+import { useTranslation } from 'react-i18next';
+import { useToast } from '@chakra-ui/react';
+import ResourcePicker from './ResourcePicker';
 
 const propTypes = {
   name: PropTypes.string.isRequired,

src/components/CustomFields/ConfigurationSelectPortsField/index.tsx

@@ -1,6 +1,6 @@
+import useFastField from 'hooks/useFastField';
 import React, { useMemo } from 'react';
 import MultiSelectInput from './Input';
-import useFastField from 'hooks/useFastField';
 
 interface Props {
   isDisabled?: boolean;

src/components/CustomFields/ConfigurationSubSection/FastToggleInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormControl, FormLabel, Switch } from '@chakra-ui/react';
-import ConfigurationFieldExplanation from 'components/FormFields/ConfigurationFieldExplanation';
 import { FieldInputProps } from 'models/Form';
+import ConfigurationFieldExplanation from 'components/FormFields/ConfigurationFieldExplanation';
 
 interface Props extends FieldInputProps<boolean> {
   element?: React.ReactNode;

src/components/CustomFields/ConfigurationSubSection/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
-import Field from './FastToggleInput';
 import useFastField from 'hooks/useFastField';
 import { FieldProps } from 'models/Form';
+import Field from './FastToggleInput';
 
 interface Props extends FieldProps {
   defaultValue: object;

src/components/CustomFields/CustomNumberAsStringField/FastNumberInput.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   FormControl,
   FormErrorMessage,
@@ -11,7 +12,6 @@ import {
   InputGroup,
   InputRightAddon,
 } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
 
 const propTypes = {
   value: PropTypes.number.isRequired,

src/components/CustomFields/CustomNumberAsStringField/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
 import Field from './FastNumberInput';
 
 const parseToInt = (val) => {

src/components/CustomFields/DeviceConfigurationsModalField/Modal.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import {
   Button,
   useDisclosure,
@@ -14,14 +15,13 @@ import {
   IconButton,
   Box,
 } from '@chakra-ui/react';
-import { ArrowDown, ArrowUp, Plus, Trash } from 'phosphor-react';
+import ModalHeader from 'components/Modals/ModalHeader';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import CloseButton from 'components/Buttons/CloseButton';
 import SaveButton from 'components/Buttons/SaveButton';
-import DataTable from 'components/DataTable';
-import ModalHeader from 'components/Modals/ModalHeader';
 import { useGetConfigurations } from 'hooks/Network/Configurations';
+import { ArrowDown, ArrowUp, Plus, Trash } from 'phosphor-react';
+import DataTable from 'components/DataTable';
 
 const propTypes = {
   initialValue: PropTypes.arrayOf(PropTypes.string).isRequired,

src/components/CustomFields/DeviceConfigurationsModalField/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Field } from 'formik';
 import PropTypes from 'prop-types';
+import { Field } from 'formik';
 import DeviceConfigurationsModal from './Modal';
 
 const propTypes = {

src/components/CustomFields/DeviceRulesField/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import RrmFormField from '../RrmFormField';
 import SelectField from 'components/FormFields/SelectField';
+import RrmFormField from '../RrmFormField';
 
 interface Props {
   isDisabled?: boolean;

src/components/CustomFields/IpDetectionModalField/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Box, ListItem, UnorderedList } from '@chakra-ui/react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 import ListInputModalField from 'components/FormFields/ListInputModalField';
+import { useField } from 'formik';
+import { useTranslation } from 'react-i18next';
+import { Box, ListItem, UnorderedList } from '@chakra-ui/react';
 import IP_REGEX from 'constants/IP_REGEX';
 
 const propTypes = {

src/components/CustomFields/MultiPhoneNumberField/MultiPhoneNumberFieldInput.js

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { isValidNumber, isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
 import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
 import { CreatableSelect } from 'chakra-react-select';
-import { isValidNumber, isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import ConfigurationFieldExplanation from 'components/FormFields/ConfigurationFieldExplanation';
 

src/components/CustomFields/MultiPhoneNumberField/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
 import MultiPhoneNumberFieldInput from './MultiPhoneNumberFieldInput';
 
 const propTypes = {

src/components/CustomFields/NotesTable/index.js

@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { AddIcon } from '@chakra-ui/icons';
-import { IconButton, Input, InputGroup, InputRightElement, Tooltip } from '@chakra-ui/react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuid } from 'uuid';
+import { IconButton, Input, InputGroup, InputRightElement, Tooltip } from '@chakra-ui/react';
-import DataTable from 'components/DataTable';
+import { AddIcon } from '@chakra-ui/icons';
-import FormattedDate from 'components/FormattedDate';
 import { useAuth } from 'contexts/AuthProvider';
+import DataTable from 'components/DataTable';
+import { v4 as uuid } from 'uuid';
+import FormattedDate from 'components/FormattedDate';
+import { useField } from 'formik';
 
 const propTypes = {
   name: PropTypes.string,

src/components/CustomFields/NumberCurrencyField/CurrencySelect.js

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import { Select } from '@chakra-ui/react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import useCurrency from 'hooks/useCurrency';
 import useSelectOptions from 'hooks/useSelectOptions';
+import { Select } from '@chakra-ui/react';
+import { useField } from 'formik';
 
 const propTypes = {
   name: PropTypes.string.isRequired,

src/components/CustomFields/NumberCurrencyField/Input.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   FormControl,
   FormErrorMessage,
@@ -11,9 +12,8 @@ import {
   InputGroup,
   InputRightAddon,
 } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-import CurrencySelect from './CurrencySelect';
 import ConfigurationFieldExplanation from 'components/FormFields/ConfigurationFieldExplanation';
+import CurrencySelect from './CurrencySelect';
 
 const propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

src/components/CustomFields/NumberCurrencyField/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
 import Field from './Input';
 
 const parseToInt = (e, acceptEmptyValue) => {

src/components/CustomFields/RrmFormField/AlgorithmPicker.tsx

@@ -14,9 +14,9 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import { areRrmParamsValid } from './helper';
 import { InfoPopover } from 'components/InfoPopover';
 import { RrmAlgorithm } from 'hooks/Network/Rrm';
+import { areRrmParamsValid } from './helper';
 
 type Props = {
   algorithms?: RrmAlgorithm[];

src/components/CustomFields/RrmFormField/Form.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { Alert, Box, Flex, FormControl, FormLabel, Select, UseDisclosureReturn } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
+import { RrmAlgorithm, RrmProvider } from 'hooks/Network/Rrm';
+import { Modal } from 'components/Modals/Modal';
+import SaveButton from 'components/Buttons/SaveButton';
 import AlgorithmPicker from './AlgorithmPicker';
 import { CUSTOM_RRM, DEFAULT_RRM_CRON, isCustomRrm, isValidCustomRrm, RRM_VALUE } from './helper';
 import RrmProviderPicker from './ProviderPicker';
 import RrmScheduler from './Scheduler';
-import SaveButton from 'components/Buttons/SaveButton';
-import { Modal } from 'components/Modals/Modal';
-import { RrmAlgorithm, RrmProvider } from 'hooks/Network/Rrm';
 
 const extractValueFromProps: (value: unknown) => RRM_VALUE = (value: unknown) => {
   try {

src/components/CustomFields/RrmFormField/Parameters.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { FormControl, FormErrorMessage, FormHelperText, FormLabel, Textarea } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import { areRrmParamsValid } from './helper';
 import { RrmAlgorithm } from 'hooks/Network/Rrm';
+import { areRrmParamsValid } from './helper';
 
 type Props = {
   algorithm?: RrmAlgorithm;

src/components/CustomFields/RrmFormField/index.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Button, FormControl, FormErrorMessage, FormLabel, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import EditRrmForm from './Form';
-import { isCustomRrm } from './helper';
 import { useGetRrmAlgorithms, useGetRrmProvider } from 'hooks/Network/Rrm';
 import useFastField from 'hooks/useFastField';
+import EditRrmForm from './Form';
+import { isCustomRrm } from './helper';
 
 type Props = {
   namePrefix?: string;

src/components/CustomFields/SpecialConfigurationManager/SpecialConfigurationForm.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { SimpleGrid } from '@chakra-ui/react';
-import { Formik } from 'formik';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
+import { Formik } from 'formik';
+import { SimpleGrid } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
 import SelectField from 'components/FormFields/SelectField';
 import ToggleField from 'components/FormFields/ToggleField';
 

src/components/CustomFields/SpecialConfigurationManager/index.js

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Center, Heading, Spacer } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
 import { useTranslation } from 'react-i18next';
-import SpecialConfigurationForm from './SpecialConfigurationForm';
+import isEqual from 'react-fast-compare';
-import DeleteButton from 'components/Buttons/DeleteButton';
+import { Button, Center, Heading, Spacer } from '@chakra-ui/react';
-import { BASE_SECTIONS } from 'constants/configuration';
 import { useGetConfiguration } from 'hooks/Network/Configurations';
 import ConfigurationSectionsCard from 'pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard';
+import { BASE_SECTIONS } from 'constants/configuration';
+import DeleteButton from 'components/Buttons/DeleteButton';
+import SpecialConfigurationForm from './SpecialConfigurationForm';
 
 const convertConfigManagerData = (form, sections) => {
   if (form === null || sections === null) return null;

src/components/CustomFields/SubscriberDeviceConfigurationManager/index.js

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, Center } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
 import { useTranslation } from 'react-i18next';
-import { BASE_SECTIONS } from 'constants/configuration';
+import isEqual from 'react-fast-compare';
+import { Button, Center } from '@chakra-ui/react';
 import ConfigurationSectionsCard from 'pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard';
+import { BASE_SECTIONS } from 'constants/configuration';
 
 const convertConfigManagerData = (sections) => {
   if (sections === null) return null;

src/components/DataTable/SortIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Icon } from '@chakra-ui/react';
 import { ArrowDown, ArrowUp, Circle } from 'phosphor-react';
+import { Icon } from '@chakra-ui/react';
 
 interface Props {
   isSorted: boolean;

src/components/DataTable/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ArrowRightIcon, ArrowLeftIcon, ChevronRightIcon, ChevronLeftIcon } from '@chakra-ui/icons';
+import { v4 as uuid } from 'uuid';
 import {
   Table,
   Tbody,
@@ -24,13 +24,13 @@ import {
   Heading,
   useBreakpoint,
 } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
+import { ArrowRightIcon, ArrowLeftIcon, ChevronRightIcon, ChevronLeftIcon } from '@chakra-ui/icons';
-import { useTable, usePagination, useSortBy, Row } from 'react-table';
-import { v4 as uuid } from 'uuid';
 // @ts-ignore
-import SortIcon from './SortIcon';
+import { useTable, usePagination, useSortBy, Row } from 'react-table';
+import { useTranslation } from 'react-i18next';
 import LoadingOverlay from 'components/LoadingOverlay';
 import { Column, PageInfo } from 'models/Table';
+import SortIcon from './SortIcon';
 
 interface Props {
   columns: Column[];

src/components/DatePickers/DatePickerInput/index.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
-import { Button } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Button } from '@chakra-ui/react';
 
 const propTypes = {
   value: PropTypes.string,

src/components/DisplayFields/DisplayObjectArrayField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormControl, FormLabel, LayoutProps, SpaceProps } from '@chakra-ui/react';
-import { ObjectArrayFieldInput } from 'components/FormFields/ObjectArrayFieldModal/Input';
+import ObjectArrayFieldInput from 'components/FormFields/ObjectArrayFieldModal/Input';
 import { Column } from 'models/Table';
 
 interface ObjectArrayFieldModalOptions {

src/components/DisplayFields/DisplaySelectField.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FormControl, FormLabel, LayoutProps, Select, SpaceProps } from '@chakra-ui/react';
 import { v4 as uuid } from 'uuid';
+import { FormControl, FormLabel, LayoutProps, Select, SpaceProps } from '@chakra-ui/react';
 
 interface Props extends LayoutProps, SpaceProps {
   label: string;

src/components/FormFields/ConfigurationFieldExplanation/index.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import { InfoIcon } from '@chakra-ui/icons';
-import { Tooltip } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Tooltip } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
 import { useAuth } from 'contexts/AuthProvider';
 
 const findDefinition = (definitionKey, CONFIGURATION_DESCRIPTIONS) => {

src/components/FormFields/CreatableSelectField/FastCreatableSelectInput.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
 import { CreatableSelect } from 'chakra-react-select';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 

src/components/FormFields/CreatableSelectField/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
 import Field from './FastCreatableSelectInput';
 
 const propTypes = {

src/components/FormFields/FileInputFieldModal/FileInputModal.js

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import {
   Box,
   CloseButton,
@@ -16,14 +18,12 @@ import {
   Tooltip,
   useDisclosure,
 } from '@chakra-ui/react';
-import { UploadSimple } from 'phosphor-react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { v4 as uuid } from 'uuid';
-import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
-import FileInputButton from 'components/Buttons/FileInputButton';
-import SaveButton from 'components/Buttons/SaveButton';
 import ModalHeader from 'components/Modals/ModalHeader';
+import FileInputButton from 'components/Buttons/FileInputButton';
+import { useTranslation } from 'react-i18next';
+import { UploadSimple } from 'phosphor-react';
+import SaveButton from 'components/Buttons/SaveButton';
+import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
 const propTypes = {
   value: PropTypes.string,

src/components/FormFields/FileInputFieldModal/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
 import FileInputModal from './FileInputModal';
 
 const propTypes = {

src/components/FormFields/ListInputModalField/index.js

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import {
   Button,
   useDisclosure,
@@ -18,13 +20,11 @@ import {
   IconButton,
   Tooltip,
 } from '@chakra-ui/react';
-import { Trash } from 'phosphor-react';
+import ModalHeader from 'components/Modals/ModalHeader';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuid } from 'uuid';
 import CloseButton from 'components/Buttons/CloseButton';
 import SaveButton from 'components/Buttons/SaveButton';
-import ModalHeader from 'components/Modals/ModalHeader';
+import { Trash } from 'phosphor-react';
 
 const propTypes = {
   initialValue: PropTypes.arrayOf(PropTypes.string).isRequired,

src/components/FormFields/MultiSelectField/FastMultiSelectInput.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
 import { Select } from 'chakra-react-select';
-import PropTypes from 'prop-types';
-import isEqual from 'react-fast-compare';
 import { useTranslation } from 'react-i18next';
+import isEqual from 'react-fast-compare';
 import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
 const propTypes = {

src/components/FormFields/MultiSelectField/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { useField } from 'formik';
 import PropTypes from 'prop-types';
+import { useField } from 'formik';
 import Field from './FastMultiSelectInput';
 
 const propTypes = {

src/components/FormFields/NotesField/index.tsx

@@ -1,14 +1,15 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import React, { useCallback, useMemo, useState } from 'react';
-import { AddIcon } from '@chakra-ui/icons';
-import { IconButton, Input, InputGroup, InputRightElement, Tooltip } from '@chakra-ui/react';
-import { Trash } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
+import { IconButton, Input, InputGroup, InputRightElement, Tooltip } from '@chakra-ui/react';
+import { AddIcon } from '@chakra-ui/icons';
+import { Trash } from 'phosphor-react';
 import { v4 as uuid } from 'uuid';
-import DataTable from 'components/DataTable';
-import FormattedDate from 'components/FormattedDate';
 import { useAuth } from 'contexts/AuthProvider';
-import useFastField from 'hooks/useFastField';
 import { Note } from 'models/Note';
+import DataTable from 'components/DataTable';
+import useFastField from 'hooks/useFastField';
+import FormattedDate from 'components/FormattedDate';
 
 export interface NotesFieldProps {
   name?: string;
@@ -16,10 +17,10 @@ export interface NotesFieldProps {
   hasDeleteButton?: boolean;
 }
 
-const _NotesField: React.FC<NotesFieldProps> = ({ name, isDisabled, hasDeleteButton }) => {
+const _NotesField: React.FC<NotesFieldProps> = ({ name = 'notes', isDisabled, hasDeleteButton }) => {
   const { t } = useTranslation();
   const { user } = useAuth();
-  const { value: notes, onChange: setNotes } = useFastField({ name: name ?? 'notes' });
+  const { value: notes, onChange: setNotes } = useFastField({ name });
   const [newNote, setNewNote] = useState('');
 
   const addNoteToForm = () => {
@@ -42,11 +43,9 @@ const _NotesField: React.FC<NotesFieldProps> = ({ name, isDisabled, hasDeleteBut
     setNotes(newArr);
   };
 
-  // @ts-ignore
   const memoizedDate = useCallback((cell) => <FormattedDate date={cell.row.values.created} key={uuid()} />, []);
 
   const removeAction = useCallback(
-    // @ts-ignore
     (cell) => (
       <Tooltip hasArrow label={t('common.remove')} placement="top">
         <IconButton
@@ -96,7 +95,7 @@ const _NotesField: React.FC<NotesFieldProps> = ({ name, isDisabled, hasDeleteBut
         Cell: ({ cell }) => removeAction(cell),
       });
     return cols;
-  }, [memoizedDate, removeAction]);
+  }, [notes]);
 
   return (
     <>

src/components/FormFields/NumberField/NumberInput.tsx

@@ -11,8 +11,8 @@ import {
   InputGroup,
   InputRightAddon,
 } from '@chakra-ui/react';
-import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 import { FieldInputProps } from 'models/Form';
+import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
 interface Props extends FieldInputProps<string | undefined | string[]> {
   onChange: (v: string) => void;

src/components/FormFields/NumberField/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
-import Field from './NumberInput';
 import useFastField from 'hooks/useFastField';
 import { FieldProps } from 'models/Form';
+import Field from './NumberInput';
 
 const parseToInt = (val: string, acceptEmptyValue: boolean) => {
   if (acceptEmptyValue && val === '') return undefined;

src/components/FormFields/ObjectArrayFieldModal/Input.tsx

@@ -14,21 +14,17 @@ import {
   Tooltip,
   IconButton,
 } from '@chakra-ui/react';
-import { Formik } from 'formik';
-import { Trash } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import CloseButton from 'components/Buttons/CloseButton';
-import SaveButton from 'components/Buttons/SaveButton';
-import DataTable from 'components/DataTable';
-import ModalHeader from 'components/Modals/ModalHeader';
 import { FieldInputProps } from 'models/Form';
+import { Trash } from 'phosphor-react';
+import { Formik } from 'formik';
+import ModalHeader from 'components/Modals/ModalHeader';
+import SaveButton from 'components/Buttons/SaveButton';
+import CloseButton from 'components/Buttons/CloseButton';
+import DataTable from 'components/DataTable';
 import { Column } from 'models/Table';
 // eslint-disable-next-line import/no-cycle
-
+import { ObjectArrayFieldModalOptions } from '.';
-export interface ObjectArrayFieldModalOptions {
-  buttonLabel?: string;
-  modalTitle?: string;
-}
 
 interface Props extends FieldInputProps<object[]> {
   name: string;
@@ -42,7 +38,7 @@ interface Props extends FieldInputProps<object[]> {
   schema: (t: (e: string) => string, useDefault?: boolean) => object;
 }
 
-const _ObjectArrayFieldInput: React.FC<Props> = ({
+const ObjectArrayFieldInput: React.FC<Props> = ({
   name,
   label,
   value,
@@ -179,4 +175,4 @@ const _ObjectArrayFieldInput: React.FC<Props> = ({
   );
 };
 
-export const ObjectArrayFieldInput = React.memo(_ObjectArrayFieldInput);
+export default React.memo(ObjectArrayFieldInput);

src/components/FormFields/ObjectArrayFieldModal/index.tsx

@@ -1,8 +1,14 @@
 import React, { useCallback } from 'react';
-import { ObjectArrayFieldInput, ObjectArrayFieldModalOptions } from './Input';
 import useFastField from 'hooks/useFastField';
 import { FieldProps } from 'models/Form';
 import { Column } from 'models/Table';
+// eslint-disable-next-line import/no-cycle
+import ObjectArrayFieldInput from './Input';
+
+export interface ObjectArrayFieldModalOptions {
+  buttonLabel?: string;
+  modalTitle?: string;
+}
 
 interface Props extends FieldProps {
   fields: React.ReactNode;

src/components/FormFields/PortRangeField/index.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { LayoutProps } from '@chakra-ui/react';
-import Input from './Input';
 import useFastField from 'hooks/useFastField';
 import { FieldProps } from 'models/Form';
+import Input from './Input';
 
 const parseToInt = (val: string, acceptEmptyValue: boolean) => {
   if (acceptEmptyValue && val === '') return undefined;

src/components/FormFields/SelectField/FastSelectInput.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { FormControl, FormErrorMessage, FormLabel, Select } from '@chakra-ui/react';
-import isEqual from 'react-fast-compare';
 import { v4 as uuid } from 'uuid';
-import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
+import isEqual from 'react-fast-compare';
 import { defaultFormInput, FormInputProps } from 'models/FormField';
+import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
 interface Props extends FormInputProps {
   value?: string;

src/components/FormFields/SelectField/index.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react';
 import { useField } from 'formik';
-import SelectInput from './FastSelectInput';
+import { defaultFormField, FormFieldProps } from 'models/FormField';
-import { FormFieldProps } from 'models/FormField';
+import Field from './FastSelectInput';
 
-interface SelectFieldProps extends FormFieldProps {
+interface Props extends FormFieldProps {
   options: { label: string; value: string | number }[];
 }
+const defaultProps = defaultFormField;
 
-const SelectField = ({
+const SelectField: React.FC<Props> = ({
   options,
   name,
   isDisabled,
@@ -21,11 +22,11 @@ const SelectField = ({
   isInt,
   w,
   definitionKey,
-}: SelectFieldProps) => {
+}) => {
   const [{ value }, { touched, error }, { setValue, setTouched }] = useField(name);
 
   const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
+    (e) => {
       if (onCustomChange) {
         onCustomChange(e);
       } else {
@@ -48,7 +49,7 @@ const SelectField = ({
   }, []);
 
   return (
-    <SelectInput
+    <Field
       label={label}
       value={value}
       onChange={onChange}
@@ -66,4 +67,6 @@ const SelectField = ({
   );
 };
 
+SelectField.defaultProps = defaultProps;
+
 export default React.memo(SelectField);

src/components/FormFields/SelectWithSearchField/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
-import { Select } from 'chakra-react-select';
-import { Field, useFormikContext } from 'formik';
 import PropTypes from 'prop-types';
+import { FormControl, FormErrorMessage, FormLabel } from '@chakra-ui/react';
+import { Field, useFormikContext } from 'formik';
+import { Select } from 'chakra-react-select';
 
 const propTypes = {
   name: PropTypes.string.isRequired,

src/components/FormFields/StringField/StringInput.tsx

@@ -11,8 +11,8 @@ import {
   useBoolean,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 import { FieldInputProps } from 'models/Form';
+import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
 interface Props extends FieldInputProps<string | undefined | string[]> {
   isError: boolean;

src/components/FormFields/StringField/index.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
-import { LayoutProps } from '@chakra-ui/react';
-import StringInput from './StringInput';
 import useFastField from 'hooks/useFastField';
 import { FieldProps } from 'models/Form';
+import { LayoutProps } from '@chakra-ui/react';
+import StringInput from './StringInput';
 
 interface Props extends FieldProps, LayoutProps {
   hideButton?: boolean;

src/components/FormFields/ToggleField/FastToggleInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormControl, FormErrorMessage, FormLabel, Switch } from '@chakra-ui/react';
-import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 import { FieldInputProps } from 'models/Form';
+import ConfigurationFieldExplanation from '../ConfigurationFieldExplanation';
 
 interface Props extends FieldInputProps<boolean> {
   element?: React.ReactNode;

src/components/FormFields/ToggleField/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
-import Field from './FastToggleInput';
 import useFastField from 'hooks/useFastField';
 import { FieldProps } from 'models/Form';
+import Field from './FastToggleInput';
 
 interface Props extends FieldProps {
   falseIsUndefined?: boolean;

src/components/FormattedDate/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Tooltip } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Tooltip } from '@chakra-ui/react';
 import { compactDate, formatDaysAgo } from 'utils/dateFormatting';
 
 const propTypes = {

src/components/LanguageSwitcher/index.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
 import { IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip } from '@chakra-ui/react';
+import React, { useMemo } from 'react';
 import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
 

src/components/LoadingOverlay/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Spinner, useColorMode } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Spinner, useColorMode } from '@chakra-ui/react';
 
 const propTypes = {
   isLoading: PropTypes.bool.isRequired,

src/components/Modals/Actions/ConfirmCloseAlert/index.js

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -8,7 +9,6 @@ import {
   AlertDialogOverlay,
   Button,
 } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 const propTypes = {

src/components/Modals/Configuration/ConfigurationInUseModal/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {
   Modal,
   ModalOverlay,
@@ -10,14 +11,13 @@ import {
   ListItem,
   Heading,
 } from '@chakra-ui/react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
+import { useTranslation } from 'react-i18next';
 import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/Modals/ModalHeader';
+import { useGetConfigurationInUse } from 'hooks/Network/Configurations';
 import EntityCell from 'components/TableCells/EntityCell';
 import VenueCell from 'components/TableCells/VenueCell';
-import { useGetConfigurationInUse } from 'hooks/Network/Configurations';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/components/Modals/Entity/CreateRootModal/Form.js

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { useToast, SimpleGrid, Heading } from '@chakra-ui/react';
-import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { useQueryClient } from 'react-query';
-import { useNavigate } from 'react-router-dom';
 import { v4 as uuid } from 'uuid';
-import SelectField from 'components/FormFields/SelectField';
+import { useToast, SimpleGrid, Heading } from '@chakra-ui/react';
-import StringField from 'components/FormFields/StringField';
+import { Formik, Form } from 'formik';
 import { EntitySchema } from 'constants/formSchemas';
+import StringField from 'components/FormFields/StringField';
 import { useCreateEntity } from 'hooks/Network/Entity';
+import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from 'react-query';
+import SelectField from 'components/FormFields/SelectField';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/components/Modals/Entity/CreateRootModal/index.js

@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
 import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-import { useTranslation } from 'react-i18next';
-import CreateRootForm from './Form';
 import SaveButton from 'components/Buttons/SaveButton';
-import ModalHeader from 'components/Modals/ModalHeader';
 import { useAuth } from 'contexts/AuthProvider';
 import { useGetRoot } from 'hooks/Network/Entity';
+import { useTranslation } from 'react-i18next';
+import ModalHeader from 'components/Modals/ModalHeader';
 import useFormRef from 'hooks/useFormRef';
+import CreateRootForm from './Form';
 
 const CreateRootModal = () => {
   const { t } = useTranslation();

src/components/Modals/Modal/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modal as ChakraModal, ModalBody, ModalContent, ModalOverlay } from '@chakra-ui/react';
-import ModalHeader from '../ModalHeader';
 import CloseButton from 'components/Buttons/CloseButton';
+import ModalHeader from '../ModalHeader';
 
 export type ModalProps = {
   isOpen: boolean;

src/components/Modals/ModalHeader/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Flex, ModalHeader as Header, Spacer } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Flex, ModalHeader as Header, Spacer } from '@chakra-ui/react';
 
 const propTypes = {
   title: PropTypes.string.isRequired,

src/components/Modals/Operator/CreateOperatorModal/Form.js

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { SimpleGrid } from '@chakra-ui/react';
-import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import DeviceRulesField from 'components/CustomFields/DeviceRulesField';
+import { SimpleGrid } from '@chakra-ui/react';
-import IpDetectionModalField from 'components/CustomFields/IpDetectionModalField';
+import { Formik, Form } from 'formik';
-import StringField from 'components/FormFields/StringField';
 import { CreateOperatorSchema } from 'constants/formSchemas';
+import StringField from 'components/FormFields/StringField';
 import { useCreateOperator } from 'hooks/Network/Operators';
 import useMutationResult from 'hooks/useMutationResult';
+import IpDetectionModalField from 'components/CustomFields/IpDetectionModalField';
+import DeviceRulesField from 'components/CustomFields/DeviceRulesField';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/components/Modals/Operator/CreateOperatorModal/index.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import CreateOperatorForm from './Form';
-import CloseButton from 'components/Buttons/CloseButton';
-import CreateButton from 'components/Buttons/CreateButton';
-import SaveButton from 'components/Buttons/SaveButton';
 import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
+import SaveButton from 'components/Buttons/SaveButton';
+import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/Modals/ModalHeader';
+import CreateButton from 'components/Buttons/CreateButton';
 import useFormModal from 'hooks/useFormModal';
 import useFormRef from 'hooks/useFormRef';
+import CreateOperatorForm from './Form';
 
 const propTypes = {
   refresh: PropTypes.func.isRequired,

src/components/Modals/Resources/CreateModal/index.tsx

@@ -10,15 +10,15 @@ import {
   Select,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
+import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
+import SaveButton from 'components/Buttons/SaveButton';
+import CloseButton from 'components/Buttons/CloseButton';
+import ModalHeader from 'components/Modals/ModalHeader';
+import CreateButton from 'components/Buttons/CreateButton';
+import useFormRef from 'hooks/useFormRef';
 import InterfaceSsidResource from '../Sections/InterfaceSsid';
 import InterfaceSsidRadiusResource from '../Sections/InterfaceSsidRadius';
 import InterfaceVlanResource from '../Sections/InterfaceVlan';
-import CloseButton from 'components/Buttons/CloseButton';
-import CreateButton from 'components/Buttons/CreateButton';
-import SaveButton from 'components/Buttons/SaveButton';
-import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
-import ModalHeader from 'components/Modals/ModalHeader';
-import useFormRef from 'hooks/useFormRef';
 
 interface Props {
   refresh: () => void;

src/components/Modals/Resources/EditModal/index.tsx

@@ -10,17 +10,17 @@ import {
   useBoolean,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import InterfaceSsidResource from '../Sections/InterfaceSsid';
-import InterfaceSsidRadiusResource from '../Sections/InterfaceSsidRadius';
-import InterfaceVlanResource from '../Sections/InterfaceVlan';
-import CloseButton from 'components/Buttons/CloseButton';
-import EditButton from 'components/Buttons/EditButton';
-import SaveButton from 'components/Buttons/SaveButton';
 import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
+import SaveButton from 'components/Buttons/SaveButton';
+import EditButton from 'components/Buttons/EditButton';
+import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/Modals/ModalHeader';
+import { Resource } from 'models/Resource';
 import { useGetResource } from 'hooks/Network/Resources';
 import useFormRef from 'hooks/useFormRef';
-import { Resource } from 'models/Resource';
+import InterfaceSsidRadiusResource from '../Sections/InterfaceSsidRadius';
+import InterfaceVlanResource from '../Sections/InterfaceVlan';
+import InterfaceSsidResource from '../Sections/InterfaceSsid';
 
 interface Props {
   isOpen: boolean;

src/components/Modals/Resources/Sections/InterfaceSsid/index.tsx

@@ -5,13 +5,13 @@ import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { object, string } from 'yup';
-import InterfaceSsidForm from './Form';
 import NotesTable from 'components/CustomFields/NotesTable';
 import StringField from 'components/FormFields/StringField';
 import { useCreateResource, useUpdateResource } from 'hooks/Network/Resources';
 import { Note } from 'models/Note';
 import { Resource } from 'models/Resource';
 import { INTERFACE_SSID_SCHEMA } from 'pages/ConfigurationPage/ConfigurationCard/ConfigurationSectionsCard/InterfaceSection/interfacesConstants';
+import InterfaceSsidForm from './Form';
 
 export const EDIT_SCHEMA = (t: (str: string) => string) =>
   object().shape({

src/components/Modals/Resources/Sections/InterfaceSsidRadius/Form.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
-import { FormControl, FormLabel, Heading, SimpleGrid, Switch } from '@chakra-ui/react';
-import { useFormikContext, getIn } from 'formik';
 import { useTranslation } from 'react-i18next';
-import { INTERFACE_SSID_RADIUS_LOCAL_SCHEMA, INTERFACE_SSID_RADIUS_LOCAL_USER_SCHEMA } from './schemas';
+import { useFormikContext, getIn } from 'formik';
-import NumberField from 'components/FormFields/NumberField';
-import ObjectArrayFieldModal from 'components/FormFields/ObjectArrayFieldModal';
 import StringField from 'components/FormFields/StringField';
+import NumberField from 'components/FormFields/NumberField';
+import { FormControl, FormLabel, Heading, SimpleGrid, Switch } from '@chakra-ui/react';
 import ToggleField from 'components/FormFields/ToggleField';
+import ObjectArrayFieldModal from 'components/FormFields/ObjectArrayFieldModal';
+import { INTERFACE_SSID_RADIUS_LOCAL_SCHEMA, INTERFACE_SSID_RADIUS_LOCAL_USER_SCHEMA } from './schemas';
 
 const InterfaceSsidRadiusResourceForm = ({ isDisabled }: { isDisabled: boolean }) => {
   const { t } = useTranslation();

src/components/Modals/Resources/Sections/InterfaceSsidRadius/index.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@chakra-ui/react';
-import { AxiosError } from 'axios';
-import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
+import { AxiosError } from 'axios';
+import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@chakra-ui/react';
+import { Formik, FormikProps } from 'formik';
+import { useCreateResource, useUpdateResource } from 'hooks/Network/Resources';
+import StringField from 'components/FormFields/StringField';
+import NotesTable from 'components/CustomFields/NotesTable';
+import { Resource } from 'models/Resource';
+import { Note } from 'models/Note';
 import InterfaceSsidRadiusForm from './Form';
 import { EDIT_SCHEMA, RADIUS_SCHEMA } from './schemas';
-import NotesTable from 'components/CustomFields/NotesTable';
-import StringField from 'components/FormFields/StringField';
-import { useCreateResource, useUpdateResource } from 'hooks/Network/Resources';
-import { Note } from 'models/Note';
-import { Resource } from 'models/Resource';
 
 interface Props {
   isOpen: boolean;

src/components/Modals/Resources/Sections/InterfaceVlan/Form.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Heading, SimpleGrid } from '@chakra-ui/react';
 import NumberField from 'components/FormFields/NumberField';
+import { Heading, SimpleGrid } from '@chakra-ui/react';
 
 const InterfaceVlanForm = ({ isDisabled }: { isDisabled: boolean }) => (
   <>

src/components/Modals/Resources/Sections/InterfaceVlan/index.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@chakra-ui/react';
-import { AxiosError } from 'axios';
-import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
+import { AxiosError } from 'axios';
 import { v4 as uuid } from 'uuid';
+import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs, useToast } from '@chakra-ui/react';
+import { Formik, FormikProps } from 'formik';
+import { useCreateResource, useUpdateResource } from 'hooks/Network/Resources';
+import StringField from 'components/FormFields/StringField';
+import NotesTable from 'components/CustomFields/NotesTable';
+import { Resource } from 'models/Resource';
+import { Note } from 'models/Note';
 import InterfaceVlanForm from './Form';
 import EDIT_SCHEMA from './schemas';
-import NotesTable from 'components/CustomFields/NotesTable';
-import StringField from 'components/FormFields/StringField';
-import { useCreateResource, useUpdateResource } from 'hooks/Network/Resources';
-import { Note } from 'models/Note';
-import { Resource } from 'models/Resource';
 
 interface Props {
   isOpen: boolean;

src/components/Modals/ServiceClass/CreateServiceModal/Form.js

@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { SimpleGrid } from '@chakra-ui/react';
-import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import NumberCurrencyField from 'components/CustomFields/NumberCurrencyField';
+import { SimpleGrid } from '@chakra-ui/react';
-import SelectField from 'components/FormFields/SelectField';
+import { Formik, Form } from 'formik';
-import StringField from 'components/FormFields/StringField';
 import { ServiceClassSchema } from 'constants/formSchemas';
-import { useCreateServiceClass } from 'hooks/Network/ServiceClasses';
+import StringField from 'components/FormFields/StringField';
 import useMutationResult from 'hooks/useMutationResult';
+import SelectField from 'components/FormFields/SelectField';
+import { useCreateServiceClass } from 'hooks/Network/ServiceClasses';
+import NumberCurrencyField from 'components/CustomFields/NumberCurrencyField';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/components/Modals/ServiceClass/CreateServiceModal/index.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Modal, ModalOverlay, ModalContent, ModalBody } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import CreateServiceClassForm from './Form';
-import CloseButton from 'components/Buttons/CloseButton';
-import CreateButton from 'components/Buttons/CreateButton';
-import SaveButton from 'components/Buttons/SaveButton';
 import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
+import SaveButton from 'components/Buttons/SaveButton';
+import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/Modals/ModalHeader';
+import CreateButton from 'components/Buttons/CreateButton';
 import useFormModal from 'hooks/useFormModal';
 import useFormRef from 'hooks/useFormRef';
+import CreateServiceClassForm from './Form';
 
 const propTypes = {
   refresh: PropTypes.func.isRequired,

src/components/Modals/ServiceClass/EditServiceClassModal/Form.js

@@ -1,16 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
-import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
-import NotesTable from 'components/CustomFields/NotesTable';
+import { SimpleGrid, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
-import NumberCurrencyField from 'components/CustomFields/NumberCurrencyField';
+import { Formik, Form } from 'formik';
-import SelectField from 'components/FormFields/SelectField';
-import StringField from 'components/FormFields/StringField';
 import { ServiceClassSchema } from 'constants/formSchemas';
-import { useUpdateServiceClass } from 'hooks/Network/ServiceClasses';
+import StringField from 'components/FormFields/StringField';
+import SelectField from 'components/FormFields/SelectField';
 import useMutationResult from 'hooks/useMutationResult';
+import { useUpdateServiceClass } from 'hooks/Network/ServiceClasses';
+import NumberCurrencyField from 'components/CustomFields/NumberCurrencyField';
+import NotesTable from 'components/CustomFields/NotesTable';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/components/Modals/ServiceClass/EditServiceClassModal/index.js

@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react';
-import { Modal, ModalOverlay, ModalContent, ModalBody, useBoolean, Center, Spinner } from '@chakra-ui/react';
 import PropTypes from 'prop-types';
+import { Modal, ModalOverlay, ModalContent, ModalBody, useBoolean, Center, Spinner } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
-import EditServiceClassForm from './Form';
-import CloseButton from 'components/Buttons/CloseButton';
-import EditButton from 'components/Buttons/EditButton';
-import SaveButton from 'components/Buttons/SaveButton';
 import ConfirmCloseAlert from 'components/Modals/Actions/ConfirmCloseAlert';
+import SaveButton from 'components/Buttons/SaveButton';
+import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/Modals/ModalHeader';
-import { useGetServiceClass } from 'hooks/Network/ServiceClasses';
-import useFormModal from 'hooks/useFormModal';
 import useFormRef from 'hooks/useFormRef';
+import useFormModal from 'hooks/useFormModal';
+import { useGetServiceClass } from 'hooks/Network/ServiceClasses';
+import EditButton from 'components/Buttons/EditButton';
+import EditServiceClassForm from './Form';
 
 const propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/components/Modals/Subscriber/SearchModal/Table.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useMemo } from 'react';
 import { Flex, IconButton, Tooltip } from '@chakra-ui/react';
-import { MagnifyingGlass } from 'phosphor-react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import DataTable from 'components/DataTable';
 import { Subscriber } from 'models/Subscriber';
+import { MagnifyingGlass } from 'phosphor-react';
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 interface Props {
   subscribers: Subscriber[];

src/components/Modals/Subscriber/SearchModal/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { Button, Modal, ModalOverlay, ModalContent, ModalBody, useDisclosure, Flex } from '@chakra-ui/react';
-import { MagnifyingGlass } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
-import SubscriberSearchDisplayTable from './Table';
 import CloseButton from 'components/Buttons/CloseButton';
 import ModalHeader from 'components/Modals/ModalHeader';
 import SubscriberSearch from 'components/SearchBars/SubscriberSearch';
+import { MagnifyingGlass } from 'phosphor-react';
 import { Subscriber } from 'models/Subscriber';
+import SubscriberSearchDisplayTable from './Table';
 
 interface Props {
   operatorId: string;