diff --git a/redisinsight/ui/src/pages/home/HomePage.tsx b/redisinsight/ui/src/pages/home/HomePage.tsx index b70c064807..73b5ab90e5 100644 --- a/redisinsight/ui/src/pages/home/HomePage.tsx +++ b/redisinsight/ui/src/pages/home/HomePage.tsx @@ -159,6 +159,13 @@ const HomePage = () => { setAddDialogIsOpen(false) } + const handleDeleteInstances = (instances: Instance[]) => { + if (instances.find((instance) => instance.id === editedInstance?.id)) { + setEditedInstance(null) + setEditDialogIsOpen(false) + } + } + const onResize = ({ width: innerWidth }: { width: number }) => { setWidth(innerWidth) } @@ -200,6 +207,7 @@ const HomePage = () => { dialogIsOpen={dialogIsOpen} editedInstance={editedInstance} onEditInstance={handleEditInstance} + onDeleteInstances={handleDeleteInstances} /> diff --git a/redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx b/redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx index bfc14eef6a..3ff229fd85 100644 --- a/redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx +++ b/redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx @@ -39,12 +39,14 @@ export interface Props { dialogIsOpen: boolean; editedInstance: Nullable; onEditInstance: (instance: Instance) => void; + onDeleteInstances: (instances: Instance[]) => void; } const DatabasesListWrapper = ({ width, dialogIsOpen, onEditInstance, editedInstance, + onDeleteInstances }: Props) => { const dispatch = useDispatch() const history = useHistory() @@ -145,11 +147,11 @@ const DatabasesListWrapper = ({ } const handleDeleteInstance = (instance: Instance) => { - dispatch(deleteInstancesAction([instance])) + dispatch(deleteInstancesAction([instance], () => onDeleteInstances([instance]))) } const handleDeleteInstances = (instances: Instance[]) => { - dispatch(deleteInstancesAction(instances)) + dispatch(deleteInstancesAction(instances, () => onDeleteInstances(instances))) } const PopoverDelete = ({ id, ...instance }: Instance) => ( diff --git a/redisinsight/ui/src/pages/home/constants/help-links.ts b/redisinsight/ui/src/pages/home/constants/help-links.ts index ebc58b7c99..8cd422eed2 100644 --- a/redisinsight/ui/src/pages/home/constants/help-links.ts +++ b/redisinsight/ui/src/pages/home/constants/help-links.ts @@ -9,7 +9,7 @@ export enum HelpLink { export const HELP_LINKS = { [HelpLink.CreateRedisCloud]: { - label: 'Create a FREE on Redis Cloud', + label: 'Create a free Redis Database on Redis Cloud', link: 'https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight', event: TelemetryEvent.CONFIG_DATABASES_GET_REDIS_CLOUD_ACCOUNT_CLICKED }, diff --git a/redisinsight/ui/src/slices/instances.ts b/redisinsight/ui/src/slices/instances.ts index 72b02b9436..b987b9da33 100644 --- a/redisinsight/ui/src/slices/instances.ts +++ b/redisinsight/ui/src/slices/instances.ts @@ -270,7 +270,7 @@ export function updateInstanceAction({ id, ...payload }: Instance) { } // Asynchronous thunk action -export function deleteInstancesAction(instances: Instance[]) { +export function deleteInstancesAction(instances: Instance[], onSuccess?: () => void) { return async (dispatch: AppDispatch, stateInit: () => RootState) => { dispatch(setDefaultInstance()) @@ -289,6 +289,7 @@ export function deleteInstancesAction(instances: Instance[]) { dispatch(resetConnectedInstance()) dispatch(setAppContextInitialState()) } + onSuccess?.() if (instances.length === 1) { dispatch( diff --git a/redisinsight/ui/src/styles/components/_callout.scss b/redisinsight/ui/src/styles/components/_callout.scss index c617c6f61e..fbc4ee6930 100644 --- a/redisinsight/ui/src/styles/components/_callout.scss +++ b/redisinsight/ui/src/styles/components/_callout.scss @@ -1,7 +1,7 @@ .euiCallOut { padding: 12px 24px !important; &--primary { - background-color: var(--euiTooltipBackgroundColor) !important; + background-color: var(--callOutBackgroundColor) !important; border-color: var(--euiColorPrimary) !important; .euiText { color: var(--euiTooltipTextColor) !important; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index ac4fb8cfad..841e9e07c3 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss @@ -104,6 +104,7 @@ --commandGroupBadgeColor: #{$commandGroupBadgeColor}; --moduleBackgroundColor: #{$commandGroupBadgeColor}; + --callOutBackgroundColor: #{$euiTooltipBackgroundColor}; // KeyTypes --typeHashColor: #{$typeHashColor}; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index b78da01e4c..905d9a4e91 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -106,6 +106,7 @@ --commandGroupBadgeColor: #{$commandGroupBadgeColor}; --moduleBackgroundColor: #{$typeHashColor}; + --callOutBackgroundColor: #{$callOutBackgroundColor}; // KeyTypes --typeHashColor: #{$typeHashColor}; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss index 24273e75de..0978abf376 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -64,6 +64,7 @@ $cliOutputResponseFailColor: #AA131F; $badgeBackgroundColor: #E8EFFF; $commandGroupBadgeColor: #B8C5DB; +$callOutBackgroundColor: #E9EDFA; // Types colors $typeHashColor: #CDDDF8;