From cdc3410ccb6941e22ab1c3529ebc7d0330e4eb22 Mon Sep 17 00:00:00 2001 From: Kyle Johnson Date: Mon, 24 Jun 2024 16:27:34 +0100 Subject: [PATCH] feat: Add confirmations when removing features, segments and environments (#4210) --- .../common/providers/FeatureListProvider.js | 3 +++ frontend/common/providers/ProjectProvider.js | 4 ++-- frontend/common/stores/feature-list-store.ts | 1 + frontend/common/stores/project-store.js | 2 +- frontend/global.d.ts | 2 +- .../pages/EnvironmentSettingsPage.js | 7 ++++++- frontend/web/components/pages/FeaturesPage.js | 20 +++++++++++++++++-- .../web/components/pages/SegmentsPage.tsx | 11 +++++++++- 8 files changed, 42 insertions(+), 8 deletions(-) diff --git a/frontend/common/providers/FeatureListProvider.js b/frontend/common/providers/FeatureListProvider.js index 038c8f47d990..9d0edcce9782 100644 --- 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 index cf91d54a0c1a..48effb2c160a 100644 --- 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 index 22325753c37d..4e24d2a0322c 100644 --- 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 index a174fd7a77eb..1747bc10de6c 100644 --- 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 index fcbd2ee93343..9ca8cbfeb70d 100644 --- 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 index b7b009444bf9..582b586125aa 100644 --- 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( +
+ Removed Environment: {environment.name} +
, + ) } saveEnv = (e) => { diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js index cd61e877d7fb..fb20e7820ddb 100644 --- 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' > - + + toast( +
+ Removed feature: {feature.name} +
, + ) + } + 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 }) => ( - + = (props) => { const segment = find(segments, { id }) if (segment) { confirmRemove(segment, () => { - removeSegment({ id, projectId }) + removeSegment({ id, projectId }).then( + (res) => { + toast( +
+ Removed Segment:{' '} + {segment.name} +
, + ) + }, + ) }) } }}