Import lodash functions explicitily

client/src/components/Form/Form.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Joi from 'joi-browser';
-import _ from 'lodash';
+import camelCase from 'lodash/camelCase';
 
 import Input from './Input';
 import Select from './Select';
@@ -186,7 +186,7 @@ class Form extends Root {
     const items = [];
 
     for (let option of options) {
-      const value = _.camelCase(option.toString());
+      const value = camelCase(option.toString());
 
       items[items.length] = {
         name: name,
@@ -199,7 +199,7 @@ class Form extends Root {
     return <RadioGroup name={name} label={label} items={items} handleChange={onChange} />;
   };
 
-  renderDropdown = (name, options, searchValue, selectedKeySchema, onChange, renderResults) => {
+  renderDropdown = (name, searchValue, selectedKeySchema, onChange, renderResults) => {
     return (
       <React.Fragment>
         <div className="form-group row">

client/src/containers/Connect/ConnectCreate/ConnectCreate.jsx

@@ -7,7 +7,7 @@ import Header from '../../Header/Header';
 import constants from '../../../utils/constants';
 import Select from '../../../components/Form/Select';
 import AceEditor from 'react-ace';
-import _ from 'lodash';
+import chain from 'lodash/chain';
 import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
@@ -53,7 +53,7 @@ class ConnectCreate extends Root {
     });
   };
 
-  handleShema(definitions) {
+  handleSchema(definitions) {
     this.schema = {};
     let formData = {};
     formData.type = this.state.selectedType;
@@ -218,7 +218,7 @@ class ConnectCreate extends Root {
     let actualGroup = '';
     let sameGroup = [];
     let allOfIt = [];
-    _(plugin.definitions)
+    chain(plugin.definitions)
       .filter(plugin => plugin.name !== 'name' && plugin.name !== 'connector.class')
       .value()
       .forEach(definition => {
@@ -320,8 +320,8 @@ class ConnectCreate extends Root {
     let plugin = this.getPlugin();
     if (plugin.definitions) {
       this.setState({ plugin }, () => {
-        this.handleShema(
-          _(plugin.definitions)
+        this.handleSchema(
+          chain(plugin.definitions)
             .filter(plugin => plugin.name !== 'name' && plugin.name !== 'connector.class')
             .value()
         );

client/src/containers/Connect/ConnectDetail/ConnectConfigs/ConnectConfigs.jsx

@@ -9,7 +9,7 @@ import {
 import constants from '../../../../utils/constants';
 import Form from '../../../../components/Form/Form';
 import AceEditor from 'react-ace';
-import _ from 'lodash';
+import chain from 'lodash/chain';
 import 'ace-builds/webpack-resolver';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-merbivore_soft';
@@ -234,7 +234,7 @@ class ConnectConfigs extends Form {
     let actualGroup = '';
     let sameGroup = [];
     let allOfIt = [];
-    _(plugin.definitions)
+    chain(plugin.definitions)
       .filter(plugin => plugin.name !== 'name' && plugin.name !== 'connector.class')
       .value()
       .forEach(definition => {

client/src/containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate/ConsumerGroupUpdate.test.js

@@ -4,7 +4,6 @@ import Enzyme, { shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import ConsumerGroupUpdate from './ConsumerGroupUpdate';
 import { createMemoryHistory } from 'history';
-import _ from 'lodash';
 
 Enzyme.configure({ adapter: new Adapter() });
 

client/src/containers/SideBar/Sidebar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link, withRouter } from 'react-router-dom';
 import { matchPath } from 'react-router';
 import constants from '../../utils/constants';
-import _ from 'lodash';
+import chain from 'lodash/chain';
 import './styles.scss';
 import SideNav, { NavIcon, NavItem, NavText } from '@trendmicro/react-sidenav';
 import '@trendmicro/react-sidenav/dist/react-sidenav.css';
@@ -59,7 +59,7 @@ class Sidebar extends Component {
 
     const clusterId = match ? match.params.clusterId || '' : '';
     let allClusters =
-      _(clusters)
+      chain(clusters)
         .sortBy(cluster => cluster.id)
         .value() || [];
     const cluster = allClusters.find(cluster => cluster.id === clusterId);

client/src/containers/Tail/Tail.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
-import _ from 'lodash';
+import remove from 'lodash/remove';
 import Input from '../../components/Form/Input';
 import Header from '../Header';
 import { SETTINGS_VALUES } from '../../utils/constants';
@@ -133,17 +133,10 @@ class Tail extends Root {
 
   handleSelectedTopics = topic => {
     let selectedTopics = this.state.selectedTopics;
-    if (
-      selectedTopics.find(el => {
-        return el === topic;
-      })
-    ) {
-      let updatedSelected = _.remove(selectedTopics, el => {
-        return el !== topic;
-      });
-      this.setState({
-        selectedTopics: updatedSelected
-      });
+    if (selectedTopics.find(el => el === topic)) {
+      let updatedSelected = remove(selectedTopics, el => el !== topic);
+
+      this.setState({ selectedTopics: updatedSelected });
     } else {
       selectedTopics.push(topic);
       this.setState({ selectedTopics: selectedTopics });

client/src/containers/Topic/Topic/TopicData/TopicData.jsx

@@ -16,7 +16,7 @@ import {
 import Pagination from '../../../../components/Pagination/Pagination';
 import moment from 'moment';
 import DatePicker from '../../../../components/DatePicker';
-import _ from 'lodash';
+import camelCase from 'lodash/camelCase';
 import constants from '../../../../utils/constants';
 import AceEditor from 'react-ace';
 import ConfirmModal from '../../../../components/Modal/ConfirmModal';
@@ -607,10 +607,10 @@ class TopicData extends Root {
     let offsets = this.state.offsets;
     for (i = 0; i < offsetsOptions.length; i++) {
       const option = offsetsOptions[i];
-      const camelcaseOption = _.camelCase(option);
+      const camelCaseOption = camelCase(option);
 
-      if (offsets[camelcaseOption] === undefined) {
-        offsets[camelcaseOption] = '';
+      if (offsets[camelCaseOption] === undefined) {
+        offsets[camelCaseOption] = '';
         this.setState({ offsets });
       }
 
@@ -623,10 +623,10 @@ class TopicData extends Root {
               type="number"
               min="0"
               name={`${i}`}
-              value={offsets[camelcaseOption]}
+              value={offsets[camelCaseOption]}
               onChange={({ currentTarget: input }) => {
                 let { offsets } = this.state;
-                offsets[camelcaseOption] = input.value;
+                offsets[camelCaseOption] = input.value;
                 this.setState(offsets);
               }}
             />

client/src/utils/converters.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import lowerCase from 'lodash/lowerCase';
 import moment from 'moment';
 import { ROLE_TYPE } from './constants';
 
@@ -54,7 +54,7 @@ export function handleConvert(value, unit, exclude) {
 }
 
 export function handleType(value) {
-  return _.lowerCase(value.plural);
+  return lowerCase(value.plural);
 }
 
 export function showTime(milliseconds) {