refactor: migrate remove feature (#7094)

Author: kyle-ssg

frontend/common/dispatcher/action-constants.js

@@ -33,7 +33,6 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
   'MIGRATE_PROJECT': 'MIGRATE_PROJECT',
   'OAUTH': 'OAUTH',
   'REFRESH_FEATURES': 'REFRESH_FEATURES',
-  'REMOVE_FLAG': 'REMOVE_FLAG',
   'REMOVE_USER_FLAG': 'REMOVE_USER_FLAG',
   'RESEND_INVITE': 'RESEND_INVITE',
   'SELECT_ENVIRONMENT': 'SELECT_ENVIRONMENT',

frontend/common/dispatcher/app-actions.js

@@ -250,13 +250,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       force: true,
     })
   },
-  removeFlag(projectId, flag) {
-    Dispatcher.handleViewAction({
-      actionType: Actions.REMOVE_FLAG,
-      flag,
-      projectId,
-    })
-  },
   removeUserFlag({ cb, environmentId, identity, identityFlag }) {
     Dispatcher.handleViewAction({
       actionType: Actions.REMOVE_USER_FLAG,

frontend/common/providers/FeatureListProvider.js

@@ -29,10 +29,6 @@ const FeatureListProvider = class extends React.Component {
         totalFeatures: ProjectStore.getTotalFeatures(),
       })
     })
-    this.listenTo(FeatureListStore, 'removed', (data) => {
-      this.props.onRemove?.(data)
-    })
-
     this.listenTo(FeatureListStore, 'saved', (data) => {
       this.props.onSave && this.props.onSave(data)
     })
@@ -235,10 +231,6 @@ const FeatureListProvider = class extends React.Component {
     )
   }
 
-  removeFlag = (projectId, flag) => {
-    AppActions.removeFlag(projectId, flag)
-  }
-
   render() {
     return this.props.children(
       {
@@ -251,7 +243,6 @@ const FeatureListProvider = class extends React.Component {
         editFeatureSettings: this.editFeatureSettings,
         editFeatureValue: this.editFeatureValue,
         environmentHasFlag: FeatureListStore.hasFlagInEnvironment,
-        removeFlag: this.removeFlag,
         toggleFlag: this.toggleFlag,
       },
     )

frontend/common/services/useProjectFlag.ts

@@ -253,6 +253,17 @@ export async function createProjectFlag(
     projectFlagService.endpoints.createProjectFlag.initiate(data, options),
   )
 }
+export async function removeProjectFlag(
+  store: any,
+  data: Req['removeProjectFlag'],
+  options?: Parameters<
+    typeof projectFlagService.endpoints.removeProjectFlag.initiate
+  >[1],
+) {
+  return store.dispatch(
+    projectFlagService.endpoints.removeProjectFlag.initiate(data, options),
+  )
+}
 
 export const {
   useAddFlagGroupOwnersMutation,

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

@@ -952,24 +952,6 @@ const controller = {
         })),
     }
   },
-  removeFlag: (projectId, flag) => {
-    store.saving()
-    API.trackEvent(Constants.events.REMOVE_FEATURE)
-    return data
-      .delete(`${Project.api}projects/${projectId}/features/${flag.id}/`)
-      .then(() => {
-        store.model.features = _.filter(
-          store.model.features,
-          (f) => f.id !== flag.id,
-        )
-        store.model.lastSaved = new Date().valueOf()
-        getStore().dispatch(
-          projectFlagService.util.invalidateTags(['ProjectFlag']),
-        )
-        store.saved({})
-        store.trigger('removed', flag)
-      })
-  },
   searchFeatures: _.throttle(
     (search, environmentId, projectId, filter, pageSize) => {
       store.search = encodeURIComponent(search || '')
@@ -1064,9 +1046,6 @@ store.dispatcherIndex = Dispatcher.register(store, (payload) => {
     case Actions.EDIT_FEATURE_MV:
       controller.editFeatureMv(projectId, action.flag, action.onComplete)
       break
-    case Actions.REMOVE_FLAG:
-      controller.removeFlag(projectId, action.flag)
-      break
     default:
   }
 })

frontend/common/types/responses.ts

@@ -652,7 +652,6 @@ export type FeatureListProviderActions = {
     projectFlag: ProjectFlag,
     environmentFlags: FeatureState | undefined,
   ) => void
-  removeFlag: (projectId: number, projectFlag: ProjectFlag) => void
 }
 
 export type AuthType = 'EMAIL' | 'GITHUB' | 'GOOGLE'

frontend/web/components/CompareEnvironments.js

@@ -14,6 +14,8 @@ import Button from './base/forms/Button'
 import Tooltip from './Tooltip'
 import { withRouter } from 'react-router-dom'
 import { getDarkMode } from 'project/darkMode'
+import { getStore } from 'common/store'
+import { removeProjectFlag } from 'common/services/useProjectFlag'
 
 const featureNameWidth = 300
 
@@ -207,7 +209,7 @@ class CompareEnvironments extends Component {
 
         {this.state.environmentLeft && this.state.environmentRight ? (
           <FeatureListProvider onSave={this.onSave} onError={this.onError}>
-            {({}, { removeFlag, toggleFlag }) => {
+            {({}, { toggleFlag }) => {
               // Adapt old FeatureListProvider signatures to new FeatureRow signatures
               const adaptedToggleFlag =
                 (environmentId) => (projectFlag, environmentFlag, onError) => {
@@ -220,7 +222,10 @@ class CompareEnvironments extends Component {
                   )
                 }
               const adaptedRemoveFlag = (projectFlag) => {
-                removeFlag(this.props.projectId, projectFlag)
+                removeProjectFlag(getStore(), {
+                  flag_id: projectFlag.id,
+                  project_id: this.props.projectId,
+                })
               }
               const renderRow = (p, i, fadeEnabled, fadeValue) => {
                 const environmentLeft = ProjectStore.getEnvironment(

frontend/web/components/CompareFeatures.js

@@ -7,6 +7,8 @@ import FeatureRow from './feature-summary/FeatureRow'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import { withRouter } from 'react-router-dom'
+import { getStore } from 'common/store'
+import { removeProjectFlag } from 'common/services/useProjectFlag'
 
 const featureNameWidth = 300
 
@@ -89,7 +91,7 @@ class CompareFeatures extends Component {
         {this.state.flagId && (
           <div>
             <FeatureListProvider onSave={this.onSave} onError={this.onError}>
-              {({}, { removeFlag, toggleFlag }) => {
+              {({}, { toggleFlag }) => {
                 // Adapt old FeatureListProvider signatures to new FeatureRow signatures
                 const adaptedToggleFlag =
                   (environmentId) =>
@@ -103,7 +105,10 @@ class CompareFeatures extends Component {
                     )
                   }
                 const adaptedRemoveFlag = (projectFlag) => {
-                  removeFlag(this.props.projectId, projectFlag)
+                  removeProjectFlag(getStore(), {
+                    flag_id: projectFlag.id,
+                    project_id: this.props.projectId,
+                  })
                 }
                 const renderRow = (data, i) => {
                   const flagValues = this.state.environmentResults[i]