Merge pull request #4201 from RedisInsight/fe/feature/RI-6443_Change_color

#RI-6443 - Change button colors and add a default value

Author: vlad-dargel

redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.spec.tsx

@@ -83,7 +83,7 @@ describe('ConnectionUrl', () => {
         password: undefined,
         port: 6322,
         tls: false,
-        username: undefined
+        username: 'default'
       }
     )
   })

redisinsight/ui/src/pages/home/components/connection-url/ConnectionUrl.tsx

@@ -42,7 +42,7 @@ const getPayload = (connectionUrl: string, returnOnError = false) => {
     name: details?.hostname || '127.0.0.1:6379',
     host: details?.host || '127.0.0.1',
     port: details?.port || 6379,
-    username: details?.username || undefined,
+    username: details?.username || 'default',
     password: details?.password || undefined,
     tls: details?.protocol === 'rediss',
     db: details?.dbNumber,
@@ -91,7 +91,7 @@ const ConnectionUrl = (props: Props) => {
 
   const formik = useFormik({
     initialValues: {
-      connectionURL: ''
+      connectionURL: 'redis://[email protected]:6379'
     },
     validate,
     enableReinitialize: true,
@@ -134,7 +134,7 @@ const ConnectionUrl = (props: Props) => {
                 value={formik.values.connectionURL}
                 onChange={formik.handleChange}
                 fullWidth
-                placeholder="redis://127.0.0.1:6379"
+                placeholder="redis://default@127.0.0.1:6379"
                 resize="none"
                 style={{ height: 88 }}
                 data-testid="connection-url"

redisinsight/ui/src/pages/home/components/connection-url/components/connectivity-options/ConnectivityOptions.tsx

@@ -28,7 +28,6 @@ const ConnectivityOptions = (props: Props) => {
         <EuiTitle size="xs" className={styles.sectionTitle}>
           <span>
             <CloudIcon className={styles.cloudIcon} />Get started with Redis Cloud account
-            <div className={styles.recommendedBox}><StarIcon />Recommended</div>
           </span>
         </EuiTitle>
         <EuiSpacer />
@@ -40,7 +39,7 @@ const ConnectivityOptions = (props: Props) => {
               onClick={() => onClickOption(AddDbType.cloud)}
               data-testid="discover-cloud-btn"
             >
-              Discover Cloud dbs
+              Add Cloud databases
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={1}>
@@ -62,6 +61,7 @@ const ConnectivityOptions = (props: Props) => {
                   }}
                   data-testid="create-free-db-btn"
                 >
+                  <StarIcon className={styles.star} />
                   Create free database
                 </EuiButton>
               )}

redisinsight/ui/src/pages/home/components/connection-url/components/connectivity-options/styles.module.scss

@@ -8,26 +8,6 @@
   }
 }
 
-.recommendedBox {
-  display: flex;
-  align-items: center;
-
-  border: 1px solid var(--euiColorSecondary);
-  background-color: var(--tableRowSelectedColor);
-
-  margin-left: 8px;
-
-  font-size: 10px;
-  padding: 5px 8px;
-  line-height: 1;
-
-  > svg {
-    width: 10px;
-    height: 10px;
-    margin-right: 4px;
-  }
-}
-
 .typeBtn {
   width: 100%;
   height: 76px !important;
@@ -44,3 +24,7 @@
     background-color: transparent !important;
   }
 }
+
+.star {
+  margin-right: 4px;
+}