RI-6890: UI enhancements (#4422)

* remove the sm console component
* rename Upgrade -> Upgrade plan; remove the background in the whole section
* rename admin console -> Redis Cloud Admin

Author: dantovska

redisinsight/ui/src/components/database-overview/DatabaseOverview.spec.tsx

@@ -48,7 +48,7 @@ describe('DatabaseOverview', () => {
     expect(container.querySelector('[data-test-subj="overview-total-memory"]')).toHaveTextContent('45 MB')
     expect(container.querySelector('[data-test-subj="overview-total-keys"]')).toBeInTheDocument()
     expect(container.querySelector('[data-test-subj="overview-connected-clients"]')).toBeInTheDocument()
-    expect(queryByRole('button', { name: 'Upgrade' })).not.toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Upgrade plan' })).not.toBeInTheDocument()
   })
 
   it('should render auto-refresh component', () => {
@@ -73,7 +73,7 @@ describe('DatabaseOverview', () => {
     const { container, queryByRole } = render(<DatabaseOverview />, { store: mockedStore })
 
     expect(container.querySelector('[data-test-subj="overview-total-memory"]')).toHaveTextContent('45 MB / 75 MB (60.3%)')
-    expect(queryByRole('button', { name: 'Upgrade' })).toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Upgrade plan' })).toBeInTheDocument()
   })
 
   it('should show not show upgrade button for flexible subscriptions', () => {
@@ -92,7 +92,7 @@ describe('DatabaseOverview', () => {
     const { container, queryByRole } = render(<DatabaseOverview />, { store: mockedStore })
 
     expect(container.querySelector('[data-test-subj="overview-total-memory"]')).toHaveTextContent('45 MB / 75 MB (60.3%)')
-    expect(queryByRole('button', { name: 'Upgrade' })).not.toBeInTheDocument()
+    expect(queryByRole('button', { name: 'Upgrade plan' })).not.toBeInTheDocument()
   })
 
   test.each([
@@ -117,7 +117,7 @@ describe('DatabaseOverview', () => {
     const { container, queryByRole } = render(<DatabaseOverview />, { store: mockedStore })
 
     expect(container.querySelector('[data-test-subj="overview-total-memory"]')).toHaveTextContent('45 MB / 75 MB (60.3%)')
-    const upgradeBtn = queryByRole('button', { name: 'Upgrade' })
+    const upgradeBtn = queryByRole('button', { name: 'Upgrade plan' })
     expect(upgradeBtn).toBeInTheDocument()
 
     upgradeBtn?.click()

redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx

@@ -141,7 +141,7 @@ const DatabaseOverview = () => {
                   }}
                   data-testid="upgrade-ri-db-button"
                 >
-                  Upgrade
+                  Upgrade plan
                 </EuiButton>
               </EuiFlexItem>
             )}

redisinsight/ui/src/components/database-overview/styles.module.scss

@@ -17,7 +17,6 @@
 .itemContainer {
   height: 42px;
   border-radius: 8px;
-  background: var(--euiColorEmptyShade);
   align-items: center;
   justify-content: center;
   margin-left: 6px;

redisinsight/ui/src/components/instance-header/InstanceHeader.spec.tsx

@@ -164,7 +164,6 @@ describe('InstanceHeader', () => {
     })
 
     expect(screen.queryByTestId('my-redis-db-btn')).not.toBeInTheDocument()
-    expect(screen.queryByTestId('admin-console-breadcrumb-btn')).toBeInTheDocument()
   })
 
   it('should show cloud user profile if env dependant flag is off and cloud profile is present', async () => {

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -29,7 +29,6 @@ import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { isAnyFeatureEnabled } from 'uiSrc/utils/features'
 import { getConfig } from 'uiSrc/config'
 import { appReturnUrlSelector } from 'uiSrc/slices/app/url-handling'
-import { SmConsoleLink } from 'uiSrc/components/instance-header/components/SmConsoleLink'
 import { CloudUserProfile } from 'uiSrc/components/instance-header/components/CloudUserProfile'
 import InstancesNavigationPopover from './components/instances-navigation-popover'
 import styles from './styles.module.scss'
@@ -117,7 +116,7 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
         <EuiFlexItem style={{ overflow: 'hidden' }} grow={false}>
           <div className={styles.breadcrumbsContainer} data-testid="breadcrumbs-container">
             <div>
-              <FeatureFlagComponent name={FeatureFlags.envDependent} otherwise={<SmConsoleLink />}>
+              <FeatureFlagComponent name={FeatureFlags.envDependent}>
                 <EuiToolTip
                   position="bottom"
                   content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'Redis Databases'}
@@ -137,9 +136,11 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
             <div style={{ flex: 1, overflow: 'hidden' }}>
               <div style={{ maxWidth: '100%' }}>
                 <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
-                  <EuiFlexItem grow={false}>
-                    <EuiText className={styles.divider}>/</EuiText>
-                  </EuiFlexItem>
+                  <FeatureFlagComponent name={FeatureFlags.envDependent}>
+                    <EuiFlexItem grow={false}>
+                      <EuiText className={styles.divider}>/</EuiText>
+                    </EuiFlexItem>
+                  </FeatureFlagComponent>
                   {returnUrlBase && returnUrl && (
                   <FeatureFlagComponent
                     name={FeatureFlags.envDependent}

redisinsight/ui/src/components/instance-header/components/SmConsoleLink.tsx

@@ -158,7 +158,7 @@ const UserProfile = (props: Props) => {
                 href={riConfig.app.smConsoleRedirect}
                 data-testid="cloud-admin-console-link"
               >
-                <EuiText>Back to admin console</EuiText>
+                <EuiText>Back to Redis Cloud Admin console</EuiText>
                 <EuiIcon type={CloudIcon} style={{ fill: 'none' }} viewBox="-1 0 30 20" strokeWidth={1.8} />
               </EuiLink>
             )}