feat: Add confirmations when removing features, segments and environm…

…ents (#4210)
Flagsmith · Jun 24, 2024 · cdc3410 · cdc3410
1 parent 318fb85
commit cdc3410
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 8 deletions.
diff --git a/frontend/common/providers/FeatureListProvider.js b/frontend/common/providers/FeatureListProvider.js
@@ -30,6 +30,9 @@ const FeatureListProvider = class extends React.Component {
         usageData: FeatureListStore.getFeatureUsage(),
       })
     })
+    this.listenTo(FeatureListStore, 'removed', (data) => {
+      this.props.onRemove?.(data)
+    })
 
     this.listenTo(FeatureListStore, 'saved', (data) => {
       this.props.onSave && this.props.onSave(data)

diff --git a/frontend/common/providers/ProjectProvider.js b/frontend/common/providers/ProjectProvider.js
@@ -32,8 +32,8 @@ const ProjectProvider = class extends React.Component {
         ),
       )
     })
-    this.listenTo(ProjectStore, 'removed', () => {
-      this.props.onRemoveEnvironment && this.props.onRemoveEnvironment()
+    this.listenTo(ProjectStore, 'removed', (data) => {
+      this.props.onRemoveEnvironment && this.props.onRemoveEnvironment(data)
     })
     this.listenTo(OrganisationStore, 'removed', () => {
       this.props.onRemove && this.props.onRemove()

diff --git a/frontend/common/stores/feature-list-store.ts b/frontend/common/stores/feature-list-store.ts
@@ -851,6 +851,7 @@ const controller = {
         )
         store.model.lastSaved = new Date().valueOf()
         store.saved({})
+        store.trigger('removed', flag)
       })
   },
   searchFeatures: _.throttle(

diff --git a/frontend/common/stores/project-store.js b/frontend/common/stores/project-store.js
@@ -76,7 +76,7 @@ const controller = {
       getStore().dispatch(
         environmentService.util.invalidateTags(['Environment']),
       )
-      store.trigger('removed')
+      store.trigger('removed', env)
       store.saved()
       AppActions.refreshOrganisation()
     })

diff --git a/frontend/global.d.ts b/frontend/global.d.ts
@@ -27,7 +27,7 @@ declare global {
   ) => void
   const openConfirm: (data: OpenConfirm) => void
   const Row: typeof Component
-  const toast: (value: string, theme?: string, expiry?: number) => void
+  const toast: (value: ReactNode, theme?: string, expiry?: number) => void
   const Flex: typeof Component
   const isMobile: boolean
   const FormGroup: typeof Component

diff --git a/frontend/web/components/pages/EnvironmentSettingsPage.js b/frontend/web/components/pages/EnvironmentSettingsPage.js
@@ -127,7 +127,7 @@ const EnvironmentSettingsPage = class extends Component {
     )
   }
 
-  onRemoveEnvironment = () => {
+  onRemoveEnvironment = (environment) => {
     const envs = ProjectStore.getEnvs()
     if (envs && envs.length) {
       this.context.router.history.replace(
@@ -139,6 +139,11 @@ const EnvironmentSettingsPage = class extends Component {
         `/project/${this.props.match.params.projectId}/environment/create`,
       )
     }
+    toast(
+      <div>
+        Removed Environment: <strong>{environment.name}</strong>
+      </div>,
+    )
   }
 
   saveEnv = (e) => {

diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js
@@ -23,6 +23,7 @@ import EnvironmentDocumentCodeHelp from 'components/EnvironmentDocumentCodeHelp'
 import TableOwnerFilter from 'components/tables/TableOwnerFilter'
 import TableGroupsFilter from 'components/tables/TableGroupsFilter'
 import TableValueFilter from 'components/tables/TableValueFilter'
+import classNames from 'classnames'
 
 const FeaturesPage = class extends Component {
   static displayName = 'FeaturesPage'
@@ -226,7 +227,17 @@ const FeaturesPage = class extends Component {
         id='features-page'
         className='app-container container'
       >
-        <FeatureListProvider onSave={this.onSave} onError={this.onError}>
+        <FeatureListProvider
+          onRemove={(feature) =>
+            toast(
+              <div>
+                Removed feature: <strong>{feature.name}</strong>
+              </div>,
+            )
+          }
+          onSave={this.onSave}
+          onError={this.onError}
+        >
           {(
             {
               environmentFlags,
@@ -237,6 +248,7 @@ const FeaturesPage = class extends Component {
             { removeFlag, toggleFlag },
           ) => {
             const isLoading = !FeatureListStore.hasLoaded
+            const isSaving = FeatureListStore.isSaving
             const featureLimitAlert = Utils.calculateRemainingLimitsPercentage(
               totalFeatures,
               maxFeaturesAllowed,
@@ -327,7 +339,11 @@ const FeaturesPage = class extends Component {
                           id={this.props.match.params.environmentId}
                         >
                           {({ permission }) => (
-                            <FormGroup className='mb-4'>
+                            <FormGroup
+                              className={classNames('mb-4', {
+                                'opacity-50': isSaving,
+                              })}
+                            >
                               <PanelSearch
                                 className='no-pad overflow-visible'
                                 id='features-list'

diff --git a/frontend/web/components/pages/SegmentsPage.tsx b/frontend/web/components/pages/SegmentsPage.tsx
@@ -303,7 +303,16 @@ const SegmentsPage: FC<SegmentsPageType> = (props) => {
                                 const segment = find(segments, { id })
                                 if (segment) {
                                   confirmRemove(segment, () => {
-                                    removeSegment({ id, projectId })
+                                    removeSegment({ id, projectId }).then(
+                                      (res) => {
+                                        toast(
+                                          <div>
+                                            Removed Segment:{' '}
+                                            <strong>{segment.name}</strong>
+                                          </div>,
+                                        )
+                                      },
+                                    )
                                   })
                                 }
                               }}