fix: lint errors

fixes lint errors

Contributes to: #368

Signed-off-by: Athira Sreekumar <[email protected]>

Author: Athira Sreekumar

ui/e2e/testEnvironment.js

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 const { mkdir } = require('fs').promises;
-const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment')
-  .default;
+const PlaywrightEnvironment =
+  require('jest-playwright-preset/lib/PlaywrightEnvironment').default;
 const { saveVideo } = require('playwright-video');
 
 class CustomEnvironment extends PlaywrightEnvironment {

ui/src/Bootstrap/App/App.view.js

@@ -11,7 +11,7 @@ import { NO_OP } from 'Utils';
 import { Grid, Column, Row } from 'carbon-components-react';
 import translations from './i18n.json';
 import { PropTypes } from 'prop-types';
-import clsx from 'clsx';
+import cx from 'clsx';
 
 import es_logo from 'Images/es_logo.svg';
 
@@ -24,7 +24,7 @@ const App = (props) => {
   };
 
   return (
-    <main className={clsx('App', className)}>
+    <main className={cx('App', className)}>
       <Grid>
         <ConfigContextConsumer>
           {({ topic, producerPath, consumerPath }) => (

ui/src/DevUtils/MockVertx/MockVertxServer.js

@@ -26,17 +26,19 @@ const ERROR_CHANCE = -1; // -1 = no errors, 0 -> 100 % chance of an error occuri
 // Private helper functions
 
 // maps an object of event/handler pairs (config) to the websocket server
-const handleWebsocketEvents = (config = {}) => (ws, { url }) => {
-  Object.entries(config).forEach(([event, handler]) => {
-    ws.on(event, (...args) =>
-      handler({
-        calledWith: args,
-        url,
-        ws,
-      })
-    );
-  });
-};
+const handleWebsocketEvents =
+  (config = {}) =>
+  (ws, { url }) => {
+    Object.entries(config).forEach(([event, handler]) => {
+      ws.on(event, (...args) =>
+        handler({
+          calledWith: args,
+          url,
+          ws,
+        })
+      );
+    });
+  };
 
 // generator for a simple logger
 const generateLogger = (enabled = false) =>
@@ -181,10 +183,9 @@ const generateHandlers = (
   { produceEndpoint, consumeEndpoint, ...modelConfigs },
   otherEventHandlers = {}
 ) => {
-  const {
-    handleProduceMessage,
-    handleConsumeMessage,
-  } = generateModelForConfig({ ...modelConfigs });
+  const { handleProduceMessage, handleConsumeMessage } = generateModelForConfig(
+    { ...modelConfigs }
+  );
   return handleWebsocketEvents({
     ...otherEventHandlers,
     message: ({ calledWith, url, ws }) => {

ui/src/DevUtils/MockWebsocket/index.js

@@ -27,10 +27,12 @@ const consumerMetadata = {
   consumerStarted: true,
 };
 
-// eslint-disable-next-line no-console
-const sendMessage = (sendFn = () => console.error('No message function!')) => (
-  content
-) => sendFn({ data: JSON.stringify(content) });
+const sendMessage =
+  (
+    sendFn = () => console.error('No message function!') // eslint-disable-line no-console
+  ) =>
+  (content) =>
+    sendFn({ data: JSON.stringify(content) });
 
 export const storybookWebsocket = (
   responseType = CONSTANTS.PRODUCER,

ui/src/Elements/Message/Message.view.js

@@ -17,7 +17,7 @@ import {
 } from 'carbon-components-react';
 import { CheckmarkFilled16, ErrorFilled16 } from '@carbon/icons-react';
 import { isEmpty, isFunction } from 'lodash-es';
-import clsx from 'clsx';
+import cx from 'clsx';
 
 import { Label } from 'Elements';
 import { useTranslate } from 'ReactCustomHooks';
@@ -36,7 +36,7 @@ const Message = (props) => {
     ...others
   } = props;
 
-  const classesToApply = clsx('Message', `Message--${usage}`, {
+  const classesToApply = cx('Message', `Message--${usage}`, {
     [`Message--${usage}-first`]: isFirst,
     [`Message--${usage}-selected`]: isSelected,
     [`Message--${usage}-error`]: error,
@@ -98,7 +98,7 @@ const renderConsumerMessageTile = (
     <ExpandableTile
       expanded={isFirst}
       {...getInteractionHandler(onInteraction, CONSUMER, message)}
-      className={clsx('Message__tile--consumer', {
+      className={cx('Message__tile--consumer', {
         [`Message__tile--consumer--selected`]: isSelected,
       })}
       {...idAttributeGenerator('consumed_message_tile')}
@@ -154,18 +154,13 @@ const renderProducerMessageTile = (
   return (
     <ClickableTile
       {...getInteractionHandler(onInteraction, PRODUCER, message)}
-      className={clsx(
-        'Message',
-        'Message__producer',
-        'Message__tile--producer',
-        {
-          [`Message__tile--producer--selected`]: isSelected,
-        }
-      )}
+      className={cx('Message', 'Message__producer', 'Message__tile--producer', {
+        [`Message__tile--producer--selected`]: isSelected,
+      })}
       {...idAttributeGenerator('produced_message_tile')}
     >
       <CheckmarkFilled16
-        className={clsx('Message__icon', 'Message__icon--checkmark')}
+        className={cx('Message__icon', 'Message__icon--checkmark')}
       />
       {renderValueWithLabel(translate('PARTITION'), partition, 'partition')}
       {renderValueWithLabel(translate('OFFSET'), offset, 'offset')}
@@ -177,9 +172,7 @@ const renderErrorTile = (error) => {
   const { message } = error;
   return (
     <Tile className={'Message__tile--error'}>
-      <ErrorFilled16
-        className={clsx('Message__icon', 'Message__icon--error')}
-      />
+      <ErrorFilled16 className={cx('Message__icon', 'Message__icon--error')} />
       <div>
         <Label className={'Message__error-message'}>{message}</Label>
       </div>
@@ -189,7 +182,7 @@ const renderErrorTile = (error) => {
 
 const renderValueWithLabel = (label, value, idAttribute, additionalClasses) => {
   return (
-    <div className={clsx('Message__labelled-value', additionalClasses)}>
+    <div className={cx('Message__labelled-value', additionalClasses)}>
       <div>
         <Label className={'Message__label'}>{label}</Label>
       </div>

ui/src/Elements/Text/Text.spec.js

@@ -29,13 +29,11 @@ describe('Text Element component', () => {
   const text = 'test text here';
   const testClassName = 'testCssClass';
 
-  const confirmHasTextAndClassName = (contentExpected, classNameExpected) => (
-    content,
-    node
-  ) =>
-    content === contentExpected && // has the expected content
-    node.classList.contains('Text') && // has correct Block class
-    node.classList.contains(classNameExpected); // has the expected classname
+  const confirmHasTextAndClassName =
+    (contentExpected, classNameExpected) => (content, node) =>
+      content === contentExpected && // has the expected content
+      node.classList.contains('Text') && // has correct Block class
+      node.classList.contains(classNameExpected); // has the expected classname
 
   it('renders the expected default type if none provided', () => {
     const { getByText } = render(<Text>{text}</Text>);

ui/src/Elements/Text/Text.view.js

@@ -5,7 +5,7 @@
 /* eslint-disable react/no-multi-comp */ // disabled as we have a hoc funtion in file
 import React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import cx from 'clsx';
 
 import { HEADING, SUBHEADING, BODY, CODE, LABEL } from './Text.assets.js';
 
@@ -33,7 +33,7 @@ const Text = (props) => {
       break;
   }
 
-  const classesToApply = clsx('Text', `Text--${typeModifier}`, {
+  const classesToApply = cx('Text', `Text--${typeModifier}`, {
     [className]: className,
   });
 

ui/src/Groups/Counter/Counter.view.js

@@ -4,13 +4,13 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import cx from 'clsx';
 
 import { Body, Subheading } from 'Elements';
 
 const Counter = (props) => {
   const { title, subtitle, count, countLimit, className, ...others } = props;
-  const classesToApply = clsx('Counter', { [className]: className });
+  const classesToApply = cx('Counter', { [className]: className });
 
   let countValue = count;
   if (count < 0) {

ui/src/Groups/Messages/Messages.view.js

@@ -5,7 +5,7 @@
 /* eslint-disable react/no-multi-comp */ // disabled as we have a hoc funtion in file
 import React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import cx from 'clsx';
 import { idAttributeGenerator } from 'Utils';
 
 import { useTranslate } from 'ReactCustomHooks';
@@ -16,7 +16,7 @@ const Messages = (props) => {
   const { usage, className, children, ...others } = props;
   // check if we have any child elements. If not, empty state
   const hasChildren = React.Children.count(children) > 0;
-  const classesToApply = clsx('Messages', `Messages--${usage}`, {
+  const classesToApply = cx('Messages', `Messages--${usage}`, {
     [className]: className,
     [`Messages--${usage}-empty`]: !hasChildren,
   });
@@ -36,7 +36,7 @@ const Messages = (props) => {
       ) : (
         <div
           {...idAttributeGenerator('messages_empty')}
-          className={clsx('Messages__empty', `Messages__empty--${usage}`)}
+          className={cx('Messages__empty', `Messages__empty--${usage}`)}
         >
           <div className={'Messages__empty-title-container'}>
             <Subheading className={'Messages__empty-title'}>

ui/src/Groups/index.js

@@ -2,5 +2,5 @@
  * (C) Copyright IBM Corp. 2020  All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-export * from './Counter';
-export * from './Messages';
+export * from './Counter'; // eslint-disable-line import/extensions
+export * from './Messages'; // eslint-disable-line import/extensions