Improve and Standardize Automated Linting Tests

.eslintrc.json

@@ -44,6 +44,53 @@
         "extensions": [".tsx"]
       }
     ],
+    "@typescript-eslint/ban-types": "error",
+    "@typescript-eslint/no-duplicate-enum-values": "error",
+    "@typescript-eslint/array-type": "error",
+    "@typescript-eslint/consistent-type-assertions": "error",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/explicit-function-return-type": "error",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      // Interfaces must begin with Interface or TestInterface followed by a PascalCase name
+      {
+        "selector": "interface",
+        "format": ["PascalCase"],
+        "prefix": ["Interface", "TestInterface"]
+      },
+      // Type Aliases must be in PascalCase
+      {
+        "selector": ["typeAlias", "typeLike", "enum"],
+        "format": ["PascalCase"]
+      },
+      {
+        "selector": "typeParameter",
+        "format": ["PascalCase"],
+        "prefix": ["T"]
+      },
+      {
+        "selector": "variable",
+        "format": ["camelCase", "UPPER_CASE"],
+        "leadingUnderscore": "allow"
+      },
+      {
+        "selector": "parameter",
+        "format": ["camelCase"],
+        "leadingUnderscore": "allow"
+      },
+      {
+        "selector": "function",
+        "format": ["camelCase"]
+      },
+      {
+        "selector": "memberLike",
+        "modifiers": ["private"],
+        "format": ["camelCase"],
+        "leadingUnderscore": "require"
+      },
+
+      { "selector": "variable", "modifiers": ["exported"], "format": null }
+    ],
     // Ensures that components are always written in PascalCase
     "react/jsx-pascal-case": [
       "error",

src/App.test.tsx

@@ -35,7 +35,7 @@ const MOCKS = [
 const link = new StaticMockLink(MOCKS, true);
 const link2 = new StaticMockLink([], true);
 
-async function wait(ms = 100) {
+async function wait(ms = 100): Promise<void> {
   await act(() => {
     return new Promise((resolve) => {
       setTimeout(resolve, ms);

src/App.tsx

@@ -22,7 +22,7 @@ import Requests from 'screens/Requests/Requests';
 import BlockUser from 'screens/BlockUser/BlockUser';
 import MemberDetail from 'screens/MemberDetail/MemberDetail';
 
-function App(): JSX.Element {
+function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
     actionCreators,
     dispatch
@@ -52,12 +52,12 @@ function App(): JSX.Element {
 
   const extraRoutes = Object.entries(installedPlugins).map(
     (plugin: any, index) => {
-      const ExtraComponent = plugin[1];
+      const extraComponent = plugin[1];
       return (
         <SecuredRoute
           key={index}
           path={`/plugin/${plugin[0].toLowerCase()}`}
-          component={ExtraComponent}
+          component={extraComponent}
         />
       );
     }
@@ -104,4 +104,4 @@ function App(): JSX.Element {
   );
 }
 
-export default App;
+export default app;

src/components/AddOn/AddOn.tsx

@@ -2,35 +2,35 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AdminNavbar from 'components/AdminNavbar/AdminNavbar';
 import { useSelector } from 'react-redux';
-import { RootState } from 'state/reducers';
+import type { RootState } from 'state/reducers';
 
-interface AddOnProps {
+interface InterfaceAddOnProps {
   extras: any;
   name: string;
   children: any;
 }
 
 // Validate Extras
-function AddOn({ children }: AddOnProps): JSX.Element {
+function addOn({ children }: InterfaceAddOnProps): JSX.Element {
   const appRoutes = useSelector((state: RootState) => state.appRoutes);
   const { targets, configUrl } = appRoutes;
   return (
     <>
-      <AdminNavbar targets={targets} url_1={configUrl} />
+      <AdminNavbar targets={targets} url1={configUrl} />
       <div className="plugin-container" data-testid="pluginContainer">
         {children}
       </div>
     </>
   );
 }
 
-AddOn.defaultProps = {
+addOn.defaultProps = {
   extras: {},
   name: '',
   children: null,
 };
 
-AddOn.propTypes = {
+addOn.propTypes = {
   extras: PropTypes.shape({
     components: PropTypes.shape({}),
     actions: PropTypes.shape({}),
@@ -39,4 +39,4 @@ AddOn.propTypes = {
   children: PropTypes.any,
 };
 
-export default AddOn;
+export default addOn;

src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx

@@ -4,12 +4,13 @@ import { BrowserRouter } from 'react-router-dom';
 import AddOnEntry from './AddOnEntry';
 import {
   ApolloClient,
-  NormalizedCacheObject,
   ApolloProvider,
   InMemoryCache,
   ApolloLink,
   HttpLink,
 } from '@apollo/client';
+
+import type { NormalizedCacheObject } from '@apollo/client';
 import { Provider } from 'react-redux';
 import { store } from 'state/store';
 import { BACKEND_URL } from 'Constant/constant';
@@ -40,7 +41,7 @@ describe('Testing AddOnEntry', () => {
     configurable: true,
     modified: true,
     isInstalled: true,
-    getInstalledPlugins: () => {
+    getInstalledPlugins: (): { sample: string } => {
       return { sample: 'sample' };
     },
   };

src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx

@@ -9,7 +9,7 @@ import {
 import { useMutation } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 
-interface AddOnEntryProps {
+interface InterfaceAddOnEntryProps {
   id: string;
   enabled: boolean;
   title: string;
@@ -23,7 +23,7 @@ interface AddOnEntryProps {
   getInstalledPlugins: () => any;
 }
 
-function AddOnEntry({
+function addOnEntry({
   id,
   enabled,
   title,
@@ -32,7 +32,7 @@ function AddOnEntry({
   installed,
   isInstalled,
   getInstalledPlugins,
-}: AddOnEntryProps): JSX.Element {
+}: InterfaceAddOnEntryProps): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'addOnEntry' });
 
   const [buttonLoading, setButtonLoading] = useState(false);
@@ -46,7 +46,7 @@ function AddOnEntry({
 
   const currentOrg = window.location.href.split('=')[1];
 
-  const updateOrgList = async () => {
+  const updateOrgList = async (): Promise<void> => {
     await updateOrgStatus({
       variables: {
         id: id.toString(),
@@ -56,7 +56,7 @@ function AddOnEntry({
     // console.log('orgs pushed', data);
   };
 
-  const updateInstallStatusFunc = async () => {
+  const updateInstallStatusFunc = async (): Promise<void> => {
     setButtonLoading(true);
     await updateInstallStatus({
       variables: {
@@ -150,7 +150,7 @@ function AddOnEntry({
             label={t('enable')}
             className={styles.entrytoggle}
             // eslint-disable-next-line @typescript-eslint/no-empty-function
-            onChange={() => {}}
+            onChange={(): void => {}}
             disabled={switchInProgress}
             checked={enabled}
           />
@@ -166,7 +166,7 @@ function AddOnEntry({
             variant="primary"
             // disabled={buttonLoading || !configurable}
             disabled={buttonLoading}
-            onClick={() => {
+            onClick={(): void => {
               updateOrgList();
               updateInstallStatusFunc();
               getInstalledPlugins();
@@ -190,20 +190,20 @@ function AddOnEntry({
   );
 }
 
-AddOnEntry.defaultProps = {
+addOnEntry.defaultProps = {
   enabled: false,
   configurable: true,
   title: '',
   description: '',
   isInstalled: false,
 };
 
-AddOnEntry.propTypes = {
+addOnEntry.propTypes = {
   enabled: PropTypes.bool,
   configurable: PropTypes.bool,
   title: PropTypes.string,
   description: PropTypes.string,
   isInstalled: PropTypes.bool,
 };
 
-export default AddOnEntry;
+export default addOnEntry;

src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx

@@ -4,12 +4,12 @@ import userEvent from '@testing-library/user-event';
 import AddOnRegister from './AddOnRegister';
 import {
   ApolloClient,
-  NormalizedCacheObject,
   ApolloProvider,
   InMemoryCache,
   ApolloLink,
   HttpLink,
 } from '@apollo/client';
+import type { NormalizedCacheObject } from '@apollo/client';
 import { Provider } from 'react-redux';
 import { store } from 'state/store';
 import { BrowserRouter } from 'react-router-dom';
@@ -24,7 +24,7 @@ const httpLink = new HttpLink({
   },
 });
 
-async function wait(ms = 500) {
+async function wait(ms = 500): Promise<void> {
   await act(() => {
     return new Promise((resolve) => {
       setTimeout(resolve, ms);

src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx

@@ -7,11 +7,11 @@ import { ADD_PLUGIN_MUTATION } from 'GraphQl/Mutations/mutations';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 
-interface AddOnRegisterProps {
+interface InterfaceAddOnRegisterProps {
   id?: string; // OrgId
   createdBy?: string; // User
 }
-interface formStateTypes {
+interface InterfaceFormStateTypes {
   pluginName: string;
   pluginCreatedBy: string;
   pluginDesc: string;
@@ -21,24 +21,27 @@ interface formStateTypes {
 
 const currentUrl = window.location.href.split('=')[1];
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function AddOnRegister({ createdBy }: AddOnRegisterProps): JSX.Element {
+function addOnRegister({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  createdBy,
+}: InterfaceAddOnRegisterProps): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'addOnRegister' });
 
   const [show, setShow] = useState(false);
 
-  const handleClose = () => setShow(false);
-  const handleShow = () => setShow(true);
+  const handleClose = (): void => setShow(false);
+  const handleShow = (): void => setShow(true);
   const [create] = useMutation(ADD_PLUGIN_MUTATION);
 
-  const [formState, setFormState] = useState<formStateTypes>({
+  const [formState, setFormState] = useState<InterfaceFormStateTypes>({
     pluginName: '',
     pluginCreatedBy: '',
     pluginDesc: '',
     pluginInstallStatus: false,
     installedOrgs: [currentUrl],
   });
 
-  const handleRegister = async () => {
+  const handleRegister = async (): Promise<void> => {
     const { data } = await create({
       variables: {
         $pluginName: formState.pluginName,
@@ -81,7 +84,7 @@ function AddOnRegister({ createdBy }: AddOnRegisterProps): JSX.Element {
                 autoComplete="off"
                 required
                 value={formState.pluginName}
-                onChange={(e) => {
+                onChange={(e): void => {
                   setFormState({
                     ...formState,
                     pluginName: e.target.value,
@@ -97,7 +100,7 @@ function AddOnRegister({ createdBy }: AddOnRegisterProps): JSX.Element {
                 autoComplete="off"
                 required
                 value={formState.pluginCreatedBy}
-                onChange={(e) => {
+                onChange={(e): void => {
                   setFormState({
                     ...formState,
                     pluginCreatedBy: e.target.value,
@@ -114,7 +117,7 @@ function AddOnRegister({ createdBy }: AddOnRegisterProps): JSX.Element {
                 placeholder={t('pDesc')}
                 required
                 value={formState.pluginDesc}
-                onChange={(e) => {
+                onChange={(e): void => {
                   setFormState({
                     ...formState,
                     pluginDesc: e.target.value,
@@ -145,12 +148,12 @@ function AddOnRegister({ createdBy }: AddOnRegisterProps): JSX.Element {
   );
 }
 
-AddOnRegister.defaultProps = {
+addOnRegister.defaultProps = {
   createdBy: 'Admin',
 };
 
-AddOnRegister.propTypes = {
+addOnRegister.propTypes = {
   createdBy: PropTypes.string,
 };
 
-export default AddOnRegister;
+export default addOnRegister;

src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx

@@ -8,12 +8,13 @@ import { render } from '@testing-library/react';
 // import { store } from 'state/store';
 import {
   ApolloClient,
-  NormalizedCacheObject,
   ApolloProvider,
   InMemoryCache,
   ApolloLink,
   HttpLink,
 } from '@apollo/client';
+
+import type { NormalizedCacheObject } from '@apollo/client';
 import { BrowserRouter } from 'react-router-dom';
 import AddOnStore from './AddOnStore';
 import { Provider } from 'react-redux';