#RI-2078 - close edit mode after db deletion

#RI-2103 - fix text of button
#RI-2110 - fix styles for callout for light theme

Author: Roman.Sergeenko

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}
                             />
                           </div>
                         </EuiResizablePanel>

redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx

@@ -39,12 +39,14 @@ export interface Props {
   dialogIsOpen: boolean;
   editedInstance: Nullable<Instance>;
   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) => (

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
   },

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(

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;

redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss

@@ -104,6 +104,7 @@
   --commandGroupBadgeColor: #{$commandGroupBadgeColor};
 
   --moduleBackgroundColor: #{$commandGroupBadgeColor};
+  --callOutBackgroundColor: #{$euiTooltipBackgroundColor};
 
   // KeyTypes
   --typeHashColor: #{$typeHashColor};

redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss

@@ -106,6 +106,7 @@
   --commandGroupBadgeColor: #{$commandGroupBadgeColor};
 
   --moduleBackgroundColor: #{$typeHashColor};
+  --callOutBackgroundColor: #{$callOutBackgroundColor};
 
   // KeyTypes
   --typeHashColor: #{$typeHashColor};

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;