chore: testing lint-staged

Signed-off-by: Antonette Caldwell <134739862+nebula-aac@users.noreply.github.com>
meshery · Sep 24, 2023 · 8ffded1 · 8ffded1
1 parent 387f713
commit 8ffded1
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 103 deletions.
diff --git a/ui/.lintstagedrc.js b/ui/.lintstagedrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   // Lint & Prettify TS and JS files
-  '**/*.(ts|tsx|js|jsx)': (filenames) => [`npm run lint`, `npm run format`],
+  '**/*.(ts|tsx|js|jsx)': (filenames) => [`npm run lint:fix`, `npm run format`],
 
   // Prettify only Markdown and JSON files
   '**/*.(md|json)': (filenames) => `npx prettier --write ${filenames.join(' ')}`,

diff --git a/ui/components/TypingFilter/README.md b/ui/components/TypingFilter/README.md
@@ -62,8 +62,7 @@ The `TypingFilter` component accepts the following props:
 
 - `handleFilter` (function, required): A callback function that is called when the user applies a filter. This function receives the filtered data as an argument.
 
-- `autoFilter` (boolean,optional) :  A boolean to indicate if the filter should be applied automatically (on user input) .
-
+- `autoFilter` (boolean,optional) : A boolean to indicate if the filter should be applied automatically (on user input) .
 
 # Finite State Machine (FSM) for `TypingFilter` Component
 

diff --git a/ui/cypress/e2e/e2e/service_mesh_lifecycle_settings_spec.js b/ui/cypress/e2e/e2e/service_mesh_lifecycle_settings_spec.js
@@ -1,35 +1,35 @@
 /// <reference types="cypress" />
 
-describe("Lifecycle Service Mesh", () => {
+describe('Lifecycle Service Mesh', () => {
   beforeEach(() => {
     cy.selectProviderNone();
   });
 
   const selectServiceMeshType = (adapterLocation) => {
     cy.get('[data-cy="lifecycle-service-mesh-type"]').click();
-      cy.get('[role="listbox"]').within(() => {
-        cy.contains(adapterLocation).click();
-      });
-  }
+    cy.get('[role="listbox"]').within(() => {
+      cy.contains(adapterLocation).click();
+    });
+  };
 
   const mesheryAdapters = [
-    { adapterName: "Istio", adapterPort: "10000", deploy: false },
-    { adapterName: "Consul", adapterPort: "10002", deploy: false },
+    { adapterName: 'Istio', adapterPort: '10000', deploy: false },
+    { adapterName: 'Consul', adapterPort: '10002', deploy: false },
     // { adapterName: "NGINX Service Mesh", adapterPort: "10010", deploy: true },
   ];
 
   mesheryAdapters.forEach(({ adapterName, adapterPort, deploy }, index) => {
     const ADAPTER_LOCATION = `localhost:${adapterPort}`;
     it(`User can Configure Existing ${adapterName} adapter through Mesh Adapter URL from Management page`, () => {
       // Settings > Adapters Page
-      cy.visit("/settings#service-mesh");
+      cy.visit('/settings#service-mesh');
 
-      if(!deploy) {
+      if (!deploy) {
         // "Mesh Adapter URL" Dropdown
         cy.get('[data-cy="mesh-adapter-url"]').type(`${ADAPTER_LOCATION}{enter}`);
         // "Connect" Button
         cy.get('[data-cy="btnSubmitMeshAdapter"]').click();
-        cy.contains("Adapter was configured!", { timeout: 10_000 }).should("exist");
+        cy.contains('Adapter was configured!', { timeout: 10_000 }).should('exist');
       } else {
         // TODO: Implement test code for Deploying from Settings > Adapters Page's "Available Mesh Adapter" Dropdown
       }
@@ -38,19 +38,22 @@ describe("Lifecycle Service Mesh", () => {
       cy.visit('/management');
       selectServiceMeshType(ADAPTER_LOCATION);
       // "Select Service Mesh Type" Dropdown
-      cy.get('[data-cy="lifecycle-service-mesh-type"]').should("contain.text", ADAPTER_LOCATION);
+      cy.get('[data-cy="lifecycle-service-mesh-type"]').should('contain.text', ADAPTER_LOCATION);
     });
 
     it(`User can ping ${adapterName} Adapter`, () => {
-      cy.visit("/");
+      cy.visit('/');
 
       // Lifecycle > Service Mesh Page
       cy.visit('/management');
       selectServiceMeshType(ADAPTER_LOCATION);
-      cy.get('[data-cy="lifecycle-service-mesh-type"]', { timeout: 10_000 }).should("contain.text", ADAPTER_LOCATION);
+      cy.get('[data-cy="lifecycle-service-mesh-type"]', { timeout: 10_000 }).should(
+        'contain.text',
+        ADAPTER_LOCATION,
+      );
       // "Manage Service Mesh" Card's Ping adapter chip
       cy.get('[data-cy="adapter-chip-ping"]').click();
-      cy.contains("Adapter pinged!").should("exist");
+      cy.contains('Adapter pinged!').should('exist');
     });
   });
 });
diff --git a/ui/lib/store.js b/ui/lib/store.js
@@ -73,33 +73,32 @@ const initialState = fromJS({
 });
 
 export const actionTypes = {
-  UPDATE_PAGE : 'UPDATE_PAGE',
-  UPDATE_TITLE : 'UPDATE_TITLE',
-  UPDATE_USER : 'UPDATE_USER',
-  UPDATE_BETA_BADGE : 'UPDATE_BETA_BADGE',
-  UPDATE_CLUSTER_CONFIG : 'UPDATE_CLUSTER_CONFIG',
-  SET_K8S_CONTEXT : 'SET_K8S_CONTEXT',
-  UPDATE_LOAD_TEST_DATA : 'UPDATE_LOAD_TEST_DATA',
-  UPDATE_ADAPTERS_INFO : 'UPDATE_ADAPTERS_INFO',
-  UPDATE_RESULTS_SELECTION : 'UPDATE_RESULTS_SELECTION',
-  CLEAR_RESULTS_SELECTION : 'CLEAR_RESULTS_SELECTION',
-  UPDATE_GRAFANA_CONFIG : 'UPDATE_GRAFANA_CONFIG',
-  UPDATE_PROMETHEUS_CONFIG : 'UPDATE_PROMETHEUS_CONFIG',
-  UPDATE_STATIC_BOARD_CONFIG : 'UPDATE_STATIC_BOARD_CONFIG',
-  UPDATE_LOAD_GEN_CONFIG : 'UPDATE_LOAD_GEN_CONFIG',
-  UPDATE_ANONYMOUS_USAGE_STATS : 'UPDATE_ANONYMOUS_USAGE_STATS',
-  UPDATE_ANONYMOUS_PERFORMANCE_RESULTS : 'UPDATE_ANONYMOUS_PERFORMANCE_RESULTS',
-  UPDATE_PROGRESS : 'UPDATE_PROGRESS',
-  TOOGLE_DRAWER : 'TOOGLE_DRAWER',
-  SET_ADAPTER : 'SET_ADAPTER',
-  SET_CATALOG_CONTENT : 'SET_CATALOG_CONTENT',
+  UPDATE_PAGE: 'UPDATE_PAGE',
+  UPDATE_TITLE: 'UPDATE_TITLE',
+  UPDATE_USER: 'UPDATE_USER',
+  UPDATE_BETA_BADGE: 'UPDATE_BETA_BADGE',
+  UPDATE_CLUSTER_CONFIG: 'UPDATE_CLUSTER_CONFIG',
+  SET_K8S_CONTEXT: 'SET_K8S_CONTEXT',
+  UPDATE_LOAD_TEST_DATA: 'UPDATE_LOAD_TEST_DATA',
+  UPDATE_ADAPTERS_INFO: 'UPDATE_ADAPTERS_INFO',
+  UPDATE_RESULTS_SELECTION: 'UPDATE_RESULTS_SELECTION',
+  CLEAR_RESULTS_SELECTION: 'CLEAR_RESULTS_SELECTION',
+  UPDATE_GRAFANA_CONFIG: 'UPDATE_GRAFANA_CONFIG',
+  UPDATE_PROMETHEUS_CONFIG: 'UPDATE_PROMETHEUS_CONFIG',
+  UPDATE_STATIC_BOARD_CONFIG: 'UPDATE_STATIC_BOARD_CONFIG',
+  UPDATE_LOAD_GEN_CONFIG: 'UPDATE_LOAD_GEN_CONFIG',
+  UPDATE_ANONYMOUS_USAGE_STATS: 'UPDATE_ANONYMOUS_USAGE_STATS',
+  UPDATE_ANONYMOUS_PERFORMANCE_RESULTS: 'UPDATE_ANONYMOUS_PERFORMANCE_RESULTS',
+  UPDATE_PROGRESS: 'UPDATE_PROGRESS',
+  TOOGLE_DRAWER: 'TOOGLE_DRAWER',
+  SET_ADAPTER: 'SET_ADAPTER',
+  SET_CATALOG_CONTENT: 'SET_CATALOG_CONTENT',
   SET_OPERATOR_SUBSCRIPTION: 'SET_OPERATOR_SUBSCRIPTION',
   SET_MESHSYNC_SUBSCRIPTION: 'SET_MESHSYNC_SUBSCRIPTION',
   // UPDATE_SMI_RESULT: 'UPDATE_SMI_RESULT',
   UPDATE_EXTENSION_TYPE: 'UPDATE_EXTENSION_TYPE',
   UPDATE_CAPABILITY_REGISTRY: 'UPDATE_CAPABILITY_REGISTRY',
   UPDATE_TELEMETRY_URLS: 'UPDATE_TELEMETRY_URLS',
-
 };
 
 // REDUCERS
@@ -172,7 +171,6 @@ export const reducer = (state = initialState, action) => {
     case actionTypes.SET_ADAPTER:
       return state.mergeDeep({ selectedAdapter: action.selectedAdapter });
 
-
     case actionTypes.SET_CATALOG_CONTENT:
       return state.mergeDeep({ catalogVisibility: action.catalogVisibility });
 
@@ -309,7 +307,6 @@ export const setAdapter =
     return dispatch({ type: actionTypes.SET_ADAPTER, selectedAdapter });
   };
 
-
 export const toggleCatalogContent =
   ({ catalogVisibility }) =>
   (dispatch) => {
@@ -355,7 +352,6 @@ export const openEventInNotificationCenter =
     });
   };
 
-
 export const makeStore = (initialState, options) => {
   return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)));
 };

diff --git a/ui/store/slices/events.js b/ui/store/slices/events.js
@@ -1,5 +1,5 @@
-import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'
-import { SEVERITY, STATUS, validateEvents } from '../../components/NotificationCenter/constants'
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
+import { SEVERITY, STATUS, validateEvents } from '../../components/NotificationCenter/constants';
 
 const initialState = {
   current_view: {
@@ -112,10 +112,10 @@ export const loadEvents = (fetch, page, filters) => async (dispatch, getState) =
       }),
     );
     if (page <= 1) {
-      dispatch(setEvents(validateEvents(data?.events || []) ))
-      return
+      dispatch(setEvents(validateEvents(data?.events || [])));
+      return;
     }
-    dispatch(pushEvents( validateEvents(data?.events || [])))
+    dispatch(pushEvents(validateEvents(data?.events || [])));
   } catch (e) {
     console.error('Error while setting events in store --loadEvents', e);
     return;

diff --git a/ui/utils/Elements.js b/ui/utils/Elements.js
@@ -1,23 +1,21 @@
 // Description: Contains functions related to DOM elements and react components.
 
-import React from "react"
-
+import React from 'react';
 
 // recursively check if element or any of its parent has the class
 export const hasClass = (element, className) => {
-
   try {
     if (typeof element?.className == 'string' && element?.className?.includes(className)) {
-      return true
+      return true;
     }
     if (element?.parentElement) {
-      return hasClass(element.parentElement, className)
+      return hasClass(element.parentElement, className);
     }
   } catch (e) {
-    console.error(`Error in hasClass while checking for ${className} in `, element, e)
+    console.error(`Error in hasClass while checking for ${className} in `, element, e);
   }
-  return false
-}
+  return false;
+};
 
 // recursively got throught component and its children and add the class to each of them
 // This is required to prevent the clickaway listner from blocking the click event
@@ -26,12 +24,12 @@ export const AddClassRecursively = ({ children, className }) => {
   return React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       return React.cloneElement(child, {
-        className : `${child.props.className} ${className}`,
-        children : AddClassRecursively({ children : child.props.children, className }),
+        className: `${child.props.className} ${className}`,
+        children: AddClassRecursively({ children: child.props.children, className }),
       });
     }
 
     // if child is a svg or animated svg string
     return child;
   });
-};
+};
diff --git a/ui/utils/hooks/useNotification.js b/ui/utils/hooks/useNotification.js
@@ -1,21 +1,20 @@
 /* eslint-disable no-unused-vars */
 //NOTE: This file is being refactored to use the new notification center
-import { IconButton } from "@material-ui/core"
-import { ToggleButtonGroup } from "@mui/material"
-import { useSnackbar } from "notistack"
-import { iconMedium } from "../../css/icons.styles"
-import CloseIcon from "@material-ui/icons/Close";
-import { useDispatch } from "react-redux";
-import moment from "moment";
-import { v4 } from "uuid";
-import { NOTIFICATION_STATUS } from "../../lib/event-types";
-import { store as rtkStore } from "../../store/index"
-import { toggleNotificationCenter } from "../../store/slices/events";
-import { NOTIFICATION_CENTER_TOGGLE_CLASS } from "../../components/NotificationCenter/constants";
-import React from "react";
-import BellIcon from "../../assets/icons/BellIcon";
-import { AddClassRecursively } from "../Elements";
-
+import { IconButton } from '@material-ui/core';
+import { ToggleButtonGroup } from '@mui/material';
+import { useSnackbar } from 'notistack';
+import { iconMedium } from '../../css/icons.styles';
+import CloseIcon from '@material-ui/icons/Close';
+import { useDispatch } from 'react-redux';
+import moment from 'moment';
+import { v4 } from 'uuid';
+import { NOTIFICATION_STATUS } from '../../lib/event-types';
+import { store as rtkStore } from '../../store/index';
+import { toggleNotificationCenter } from '../../store/slices/events';
+import { NOTIFICATION_CENTER_TOGGLE_CLASS } from '../../components/NotificationCenter/constants';
+import React from 'react';
+import BellIcon from '../../assets/icons/BellIcon';
+import { AddClassRecursively } from '../Elements';
 
 /**
  * A React hook to facilitate emitting events from the client.
@@ -58,35 +57,42 @@ export const useNotification = () => {
     timestamp = null,
     customEvent = null,
     showInNotificationCenter = false,
-    pushToServer = false }) => {
-
-    timestamp = timestamp ?? moment.utc().valueOf()
-    id = id || v4()
+    pushToServer = false,
+  }) => {
+    timestamp = timestamp ?? moment.utc().valueOf();
+    id = id || v4();
 
-
-    enqueueSnackbar(
-      message,
-      {
-        //NOTE: Need to Consolidate the variant and event_type
-        variant : typeof event_type === "string" ? event_type : event_type?.type,
-        action : function Action(key) {
-          return (
-            <ToggleButtonGroup>
-              {showInNotificationCenter &&
-                <AddClassRecursively className={NOTIFICATION_CENTER_TOGGLE_CLASS} >
-                  <IconButton key={`openevent-${id}`} aria-label="Open"   color="inherit" onClick={() => openEvent(id)}>
-                    <BellIcon {...iconMedium}  />
-                  </IconButton>
-                </AddClassRecursively>
-              }
-              <IconButton key={`closeevent-${id}`} aria-label="Close" color="inherit" onClick={() => closeSnackbar(key)}>
-                <CloseIcon style={iconMedium} />
-              </IconButton>
-            </ToggleButtonGroup>
-          );
-        },
-      })
-  }
+    enqueueSnackbar(message, {
+      //NOTE: Need to Consolidate the variant and event_type
+      variant: typeof event_type === 'string' ? event_type : event_type?.type,
+      action: function Action(key) {
+        return (
+          <ToggleButtonGroup>
+            {showInNotificationCenter && (
+              <AddClassRecursively className={NOTIFICATION_CENTER_TOGGLE_CLASS}>
+                <IconButton
+                  key={`openevent-${id}`}
+                  aria-label="Open"
+                  color="inherit"
+                  onClick={() => openEvent(id)}
+                >
+                  <BellIcon {...iconMedium} />
+                </IconButton>
+              </AddClassRecursively>
+            )}
+            <IconButton
+              key={`closeevent-${id}`}
+              aria-label="Close"
+              color="inherit"
+              onClick={() => closeSnackbar(key)}
+            >
+              <CloseIcon style={iconMedium} />
+            </IconButton>
+          </ToggleButtonGroup>
+        );
+      },
+    });
+  };
 
   return {
     notify,

diff --git a/ui/utils/multi-ctx.js b/ui/utils/multi-ctx.js
@@ -27,8 +27,8 @@ export const getK8sClusterIdsFromCtxId = (selectedContexts, k8sconfig) => {
     return [];
   }
 
-  if (selectedContexts.includes("all")){
-    return k8sconfig.map((cfg => cfg?.kubernetes_server_id))
+  if (selectedContexts.includes('all')) {
+    return k8sconfig.map((cfg) => cfg?.kubernetes_server_id);
   }
   const clusterIds = [];
   selectedContexts.forEach((context) => {