#RI-4833 - fixes related to oath api keys settings

redisinsight/ui/src/pages/browser/components/popover-delete/PopoverDelete.tsx

@@ -5,7 +5,7 @@ import { RedisString } from 'uiSrc/slices/interfaces'
 import styles from './styles.module.scss'
 
 export interface Props {
-  header?: string
+  header?: JSX.Element | string
   text: JSX.Element | string
   item: string
   itemRaw?: RedisString

redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx

@@ -55,14 +55,14 @@ const CloudSettings = () => {
           <EuiText size="s" className={styles.smallText} color="subdued">
             The list of API user keys that are stored locally in RedisInsight. <br />
             API user keys grant programmatic access to Redis Enterprise Cloud. <br />
-            {'To delete API keys from Redis Enterprise Cloud, sign in to '}
+            {'To delete API keys from Redis Enterprise Cloud, '}
             <EuiLink
               target="_blank"
               color="text"
               external={false}
               href="https://redis.com/redis-enterprise-cloud/overview/?utm_source=redisinsight&utm_medium=settings&utm_campaign=clear_keys"
             >
-              Redis Enterprise Cloud
+              sign in to Redis Enterprise Cloud
             </EuiLink>
             {' and delete them manually.'}
           </EuiText>
@@ -91,7 +91,7 @@ const CloudSettings = () => {
             <div className={styles.popoverDeleteContainer}>
               <EuiText size="m">
                 <h4>
-                  All API user keys <br /> will be removed from RedisInsight.
+                  All API user keys will be removed from RedisInsight.
                 </h4>
                 {'To delete API keys from Redis Enterprise Cloud, '}
                 <EuiLink
@@ -116,7 +116,7 @@ const CloudSettings = () => {
                   className={styles.popoverDeleteBtn}
                   data-testid="delete-key-confirm-btn"
                 >
-                  Remove All keys
+                  Remove all API keys
                 </EuiButton>
               </div>
             </div>

redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx

@@ -98,12 +98,13 @@ const UserApiKeysTable = ({ items, loading }: Props) => {
             {!valid && (
               <EuiToolTip
                 content="This API key is invalid. Remove it from RedisInsight and Redis Enterprise Cloud and create a new one instead."
+                anchorClassName={styles.invalidIconAnchor}
               >
                 <EuiIcon className={styles.invalidIcon} type="alert" color="danger" />
               </EuiToolTip>
             )}
             <EuiToolTip
-              title="CAPI Name"
+              title="API Key Name"
               content={tooltipContent}
             >
               <>{value}</>
@@ -161,7 +162,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => {
             />
           </EuiToolTip>
           <PopoverDelete
-            header={`${formatLongName(name)} will be removed from RedisInsight.`}
+            header={(<>{formatLongName(name)} <br /> will be removed from RedisInsight.</>)}
             text={(
               <>
                 {'To delete this API key from Redis Enterprise Cloud, '}

redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/styles.module.scss

@@ -21,6 +21,10 @@
   }
 }
 
+.invalidIconAnchor {
+  flex-shrink: 0;
+}
+
 .invalidIcon {
   width: 14px !important;
   height: 14px !important;