refactor: replace global lodash with direct per-file imports

frontend/common/ES6Component.js

@@ -1,3 +1,6 @@
+import each from 'lodash/each'
+import partial from 'lodash/partial'
+
 function es6Component(context, onUnmount) {
   context._listeners = []
 
@@ -31,23 +34,23 @@ function es6Component(context, onUnmount) {
   }
 
   context.setPathState = function setPathState(path, e) {
-    return _.partial(() => {
+    return partial(() => {
       const newState = {}
       newState[path] = Utils.safeParseEventValue(e)
       this.setState(newState)
     })
   }
 
   context.toggleState = function toggleState(path) {
-    return _.partial(() => {
+    return partial(() => {
       const newState = {}
       newState[path] = !this.state[path]
       this.setState(newState)
     })
   }
 
   context.componentWillUnmount = function componentWillUnmount() {
-    _.each(this._listeners, (listener, index) => {
+    each(this._listeners, (listener, index) => {
       if (listener) this.stopListening(index)
     })
     if (onUnmount) {

frontend/common/providers/withSegmentOverrides.js

@@ -1,3 +1,6 @@
+import cloneDeep from 'lodash/cloneDeep'
+import each from 'lodash/each'
+import findIndex from 'lodash/findIndex'
 import data from 'common/data/base/_data'
 import ProjectStore from 'common/stores/project-store'
 import FeatureListStore from 'common/stores/feature-list-store'
@@ -56,9 +59,9 @@ export default (WrappedComponent) => {
           const environmentOverride = res2.results.find(
             (v) => !v.feature_segment && !v.identity,
           )
-          _.each(featureStates, (f) => {
+          each(featureStates, (f) => {
             if (f.feature_segment) {
-              const index = _.findIndex(results, { id: f.feature_segment })
+              const index = findIndex(results, { id: f.feature_segment })
               if (index !== -1) {
                 results[index].value = Utils.featureStateToValue(
                   f.feature_state_value,
@@ -188,7 +191,7 @@ export default (WrappedComponent) => {
             priority: i,
           }))
 
-          const originalSegmentOverrides = _.cloneDeep(segmentOverrides)
+          const originalSegmentOverrides = cloneDeep(segmentOverrides)
           this.setState({
             environmentVariations:
               environmentOverride &&

frontend/common/stores/account-store.js

@@ -1,4 +1,8 @@
 import { matchPath } from 'react-router-dom'
+import filter from 'lodash/filter'
+import find from 'lodash/find'
+import findIndex from 'lodash/findIndex'
+import get from 'lodash/get'
 import { storageGet, storageSet } from 'common/safeLocalStorage'
 import Dispatcher from 'common/dispatcher/dispatcher'
 import BaseStore from './base/_store'
@@ -125,7 +129,7 @@ const controller = {
     data
       .delete(`${Project.api}organisations/${store.organisation.id}/`)
       .then(() => {
-        store.model.organisations = _.filter(
+        store.model.organisations = filter(
           store.model.organisations,
           (org) => org.id !== store.organisation.id,
         )
@@ -149,7 +153,7 @@ const controller = {
     data
       .put(`${Project.api}organisations/${store.organisation.id}/`, org)
       .then((res) => {
-        const idx = _.findIndex(store.model.organisations, {
+        const idx = findIndex(store.model.organisations, {
           id: store.organisation.id,
         })
         if (idx !== -1) {
@@ -304,7 +308,7 @@ const controller = {
 
   selectOrganisation: (id) => {
     API.setCookie('organisation', `${id}`)
-    store.organisation = _.find(store.model.organisations, { id })
+    store.organisation = find(store.model.organisations, { id })
     store.changed()
   },
 
@@ -459,8 +463,8 @@ const store = Object.assign({}, BaseStore, {
     return (
       store.model &&
       store.model.organisations &&
-      _.get(
-        _.find(store.model.organisations, (org) =>
+      get(
+        find(store.model.organisations, (org) =>
           id
             ? org.id === id
             : org.id === (store.organisation && store.organisation.id),
@@ -477,7 +481,7 @@ const store = Object.assign({}, BaseStore, {
   },
   getPlans() {
     if (!store.model) return []
-    return _.filter(
+    return filter(
       store.model.organisations.map(
         (org) => org.subscription && org.subscription.plan,
       ),

frontend/common/stores/feature-list-store.ts

@@ -1,3 +1,8 @@
+import find from 'lodash/find'
+import findIndex from 'lodash/findIndex'
+import keyBy from 'lodash/keyBy'
+import map from 'lodash/map'
+import throttle from 'lodash/throttle'
 import Constants from 'common/constants'
 import ProjectStore from './project-store'
 import {
@@ -149,7 +154,7 @@ const controller = {
           store.model = {
             features: features.results,
             keyedEnvironmentFeatures:
-              environmentFeatures && _.keyBy(environmentFeatures, 'feature'),
+              environmentFeatures && keyBy(environmentFeatures, 'feature'),
           }
           store.model.lastSaved = new Date().valueOf()
           getStore().dispatch(
@@ -185,7 +190,7 @@ const controller = {
           onComplete(res)
         }
         if (store.model?.features) {
-          const index = _.findIndex(store.model.features, { id: flag.id })
+          const index = findIndex(store.model.features, { id: flag.id })
           store.model.features[index] = controller.parseFlag(flag)
           store.model.lastSaved = new Date().valueOf()
           getStore().dispatch(
@@ -457,12 +462,12 @@ const controller = {
             if (store.model?.keyedEnvironmentFeatures) {
               store.model.keyedEnvironmentFeatures[projectFlag.id] = res
               if (segmentRes) {
-                const feature = _.find(
+                const feature = find(
                   store.model.features,
                   (f) => f.id === projectFlag.id,
                 )
                 if (feature) {
-                  feature.feature_segments = _.map(
+                  feature.feature_segments = map(
                     segmentRes.feature_segments,
                     (segment) => ({
                       ...segment,
@@ -929,7 +934,7 @@ const controller = {
 
               store.model = {
                 features: features.results.map(controller.parseFlag),
-                keyedEnvironmentFeatures: _.keyBy(
+                keyedEnvironmentFeatures: keyBy(
                   environmentFeatures,
                   'feature',
                 ),
@@ -955,7 +960,7 @@ const controller = {
         })),
     }
   },
-  searchFeatures: _.throttle(
+  searchFeatures: throttle(
     (search, environmentId, projectId, filter, pageSize) => {
       store.search = encodeURIComponent(search || '')
       controller.getFeatures(

frontend/common/stores/identity-store.js

@@ -1,3 +1,5 @@
+import cloneDeep from 'lodash/cloneDeep'
+import keyBy from 'lodash/keyBy'
 import Constants from 'common/constants'
 import Utils from 'common/utils/utils'
 
@@ -98,7 +100,7 @@ const controller = {
         const features = (flags && flags.results) || flags
 
         store.model = store.model || {}
-        store.model.features = features && _.keyBy(features, (f) => f.feature)
+        store.model.features = features && keyBy(features, (f) => f.feature)
         store.model.identity = identity
         store.loaded()
       })
@@ -178,7 +180,7 @@ const store = Object.assign({}, BaseStore, {
     return store.model && store.model.features
   },
   getIdentityForEditing() {
-    return store.model && _.cloneDeep(store.model) // immutable
+    return store.model && cloneDeep(store.model) // immutable
   },
   id: 'identity',
 })

frontend/common/stores/organisation-store.js

@@ -7,7 +7,10 @@ import { getSubscriptionMetadata } from 'common/services/useSubscriptionMetadata
 import Dispatcher from 'common/dispatcher/dispatcher'
 import BaseStore from './base/_store'
 import data from 'common/data/base/_data'
-import _ from 'lodash'
+import filter from 'lodash/filter'
+import find from 'lodash/find'
+import findIndex from 'lodash/findIndex'
+import keyBy from 'lodash/keyBy'
 
 const controller = {
   createProject: (name) => {
@@ -75,7 +78,7 @@ const controller = {
       .then(() => {
         API.trackEvent(Constants.events.DELETE_INVITE)
         if (store.model) {
-          store.model.invites = _.filter(
+          store.model.invites = filter(
             store.model.invites,
             (i) => i.id !== id,
           )
@@ -89,11 +92,11 @@ const controller = {
     const idInt = parseInt(id)
     store.saving()
     if (store.model) {
-      store.model.projects = _.filter(
+      store.model.projects = filter(
         store.model.projects,
         (p) => p.id !== idInt,
       )
-      store.model.keyedProjects = _.keyBy(store.model.projects, 'id')
+      store.model.keyedProjects = keyBy(store.model.projects, 'id')
     }
     API.trackEvent(Constants.events.REMOVE_PROJECT)
     data.delete(`${Project.api}projects/${id}/`).then(() => {
@@ -110,7 +113,7 @@ const controller = {
       .then(() => {
         API.trackEvent(Constants.events.DELETE_USER)
         if (store.model) {
-          store.model.users = _.filter(store.model.users, (u) => u.id !== id)
+          store.model.users = filter(store.model.users, (u) => u.id !== id)
         }
         store.saved()
       })
@@ -121,7 +124,7 @@ const controller = {
     data
       .put(`${Project.api}organisations/${store.id}/`, { name })
       .then((res) => {
-        const idx = _.findIndex(store.model.organisations, {
+        const idx = findIndex(store.model.organisations, {
           id: store.organisation.id,
         })
         if (idx !== -1) {
@@ -154,7 +157,7 @@ const controller = {
         if (`${id}` === `${store.id}`) {
           // eslint-disable-next-line prefer-const
           let [_projects, users, invites, subscriptionMeta] = res
-          let projects = _.sortBy(_projects, 'name')
+          let projects = sortBy(_projects, 'name')
 
           store.model = {
             ...store.model,
@@ -215,7 +218,7 @@ const controller = {
               data
                 .get(`${Project.api}environments/?project=${project.id}`)
                 .then((res) => {
-                  projects[i].environments = _.sortBy(res.results, 'name')
+                  projects[i].environments = sortBy(res.results, 'name')
                 })
                 .catch(() => {
                   projects[i].environments = []
@@ -228,7 +231,7 @@ const controller = {
               return textA < textB ? -1 : textA > textB ? 1 : 0
             })
             store.model.projects = projects
-            store.model.keyedProjects = _.keyBy(store.model.projects, 'id')
+            store.model.keyedProjects = keyBy(store.model.projects, 'id')
             store.loaded()
           })
         }
@@ -278,7 +281,7 @@ const controller = {
       )
       .then(() => {
         API.trackEvent(Constants.events.UPDATE_USER_ROLE)
-        const index = _.findIndex(store.model.users, (user) => user.id === id)
+        const index = findIndex(store.model.users, (user) => user.id === id)
         if (index !== -1) {
           store.model.users[index].role = role
           store.saved()

frontend/common/stores/project-store.js

@@ -1,4 +1,8 @@
 import OrganisationStore from './organisation-store'
+import filter from 'lodash/filter'
+import find from 'lodash/find'
+import findIndex from 'lodash/findIndex'
+import sortBy from 'lodash/sortBy'
 
 import Constants from 'common/constants'
 import Utils from 'common/utils/utils'
@@ -77,7 +81,7 @@ const controller = {
   deleteEnv: (env) => {
     API.trackEvent(Constants.events.REMOVE_ENVIRONMENT)
     data.delete(`${Project.api}environments/${env.api_key}/`).then(() => {
-      store.model.environments = _.filter(
+      store.model.environments = filter(
         store.model.environments,
         (e) => e.id !== env.id,
       )
@@ -95,7 +99,7 @@ const controller = {
     data
       .put(`${Project.api}environments/${env.api_key}/`, env)
       .then((res) => {
-        const index = _.findIndex(store.model.environments, { id: env.id })
+        const index = findIndex(store.model.environments, { id: env.id })
         store.model.environments[index] = res
         store.saved()
         getStore().dispatch(
@@ -147,7 +151,7 @@ const controller = {
         project.total_features = project.total_features || 0
         project.total_segments = project.total_segments || 0
         store.model = Object.assign(project, {
-          environments: _.sortBy(environments.results, 'name'),
+          environments: sortBy(environments.results, 'name'),
         })
         if (project.organisation !== OrganisationStore.id) {
           AppActions.selectOrganisation(project.organisation)
@@ -174,11 +178,11 @@ const controller = {
 
 const store = Object.assign({}, BaseStore, {
   getEnvironment: (api_key) =>
-    store.model && _.find(store.model.environments, { api_key }),
+    store.model && find(store.model.environments, { api_key }),
   getEnvironmentById: (id) =>
-    store.model && _.find(store.model.environments, { id }),
+    store.model && find(store.model.environments, { id }),
   getEnvironmentIdFromKey: (api_key) => {
-    const env = _.find(store.model.environments, { api_key })
+    const env = find(store.model.environments, { api_key })
     return env && env.id
   },
   getEnvironmentIdFromKeyAsync: async (projectId, apiKey) => {
@@ -191,7 +195,7 @@ const store = Object.assign({}, BaseStore, {
   },
   getEnvs: () => store.model && store.model.environments,
   getIsVersioned: (api_key) => {
-    const env = _.find(store.model.environments, { api_key })
+    const env = find(store.model.environments, { api_key })
     return env && env.use_v2_feature_versioning
   },
   getMaxFeaturesAllowed: () => {

frontend/common/utils/base/_utils.js

@@ -1,3 +1,5 @@
+import range from 'lodash/range'
+
 const Utils = {
   GUID(append) {
     let d = new Date().getTime()
@@ -439,7 +441,7 @@ emailRegex: /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|
       prevTruncated: startPage > 2,
 
       // can go forward a page
-      range: _.range(startPage, endPage),
+      range: range(startPage, endPage),
 
       showFirstPage: startPage > 1,
 

frontend/common/utils/utils.tsx

@@ -17,7 +17,7 @@ import {
 } from 'common/types/responses'
 import flagsmith from '@flagsmith/flagsmith'
 import { ReactNode } from 'react'
-import _ from 'lodash'
+import find from 'lodash/find'
 import ErrorMessage from 'components/ErrorMessage'
 import WarningMessage from 'components/WarningMessage'
 import Constants from 'common/constants'
@@ -500,7 +500,7 @@ const Utils = Object.assign({}, BaseUtils, {
     if (!plans || !plans.length) {
       return false
     }
-    const found = _.find(
+    const found = find(
       plans.map((plan: string) => Utils.getPlanPermission(plan, feature)),
       (perm) => !!perm,
     )