Merge pull request meshery#10214 from sudhanshutech/replace/tooltip

add info and replace tooltips

ui/assets/icons/InfoOutlined.js

@@ -9,6 +9,7 @@ const InfoOutlinedIcon = ({ height, width, style = {}, className={} }) => {
       width={width}
       style={style}
       className={className}
+      fill="currentColor"
     >
       <path
       d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>

ui/components/DashboardComponent/charts/DashboardMeshModelGraph.js

@@ -203,6 +203,8 @@ function MeshModelCategories({ classes }) {
             <CustomTextTooltip
               backgroundColor="#3C494F"
               title={renderTooltipContent({
+                showPriortext:
+                  'Each Model corresponds to a category, so the category shows the high-level use case of that model, e.g., prometheus is under “Observability and Analysis category.',
                 showAftertext: 'to learn more about all Categories',
                 link: url,
               })}

ui/components/Header.js

@@ -6,7 +6,6 @@ import Hidden from '@material-ui/core/Hidden';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Toolbar from '@material-ui/core/Toolbar';
-import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import { connect, useSelector } from 'react-redux';
@@ -41,7 +40,8 @@ import useKubernetesHook, { useControllerStatus } from './hooks/useKubernetesHoo
 import { formatToTitleCase } from '../utils/utils';
 import { CONNECTION_KINDS } from '../utils/Enum';
 import { OutlinedSettingsIcon } from '@layer5/sistent-svg';
-import { WHITE } from '@layer5/sistent-components';
+import { CHARCOAL, WHITE } from '@layer5/sistent-components';
+import { CustomTextTooltip } from './MesheryMeshInterface/PatternService/CustomTextTooltip';
 
 const lightColor = 'rgba(255, 255, 255, 0.7)';
 const styles = (theme) => ({
@@ -399,7 +399,8 @@ function K8sContextMenu({
 
                   return (
                     <div key={`${ctx.uniqueID}-${idx}`} id={ctx.id} className={classes.chip}>
-                      <Tooltip
+                      <CustomTextTooltip
+                        backgroundColor={CHARCOAL}
                         title={`Server: ${ctx.server},  Operator: ${formatToTitleCase(
                           operatorState,
                         )}, MeshSync: ${formatToTitleCase(
@@ -430,7 +431,7 @@ function K8sContextMenu({
                             status={operatorState}
                           />
                         </div>
-                      </Tooltip>
+                      </CustomTextTooltip>
                     </div>
                   );
                 })}

ui/components/MesheryMeshInterface/PatternService/CustomTextTooltip.js

@@ -28,7 +28,7 @@ export const renderTooltipContent = ({ showPriortext, showAftertext, link }) =>
         target="_blank"
         rel="noopener noreferrer"
       >
-        Checkout docs
+        Read docs
       </a>
       <span style={{ marginLeft: '2px' }}>{showAftertext}</span>
     </div>

ui/components/Navigator.js

@@ -74,6 +74,8 @@ import {
 import { iconSmall } from '../css/icons.styles';
 import CAN from '@/utils/can';
 import { keys } from '@/utils/permission_constants';
+import { CustomTextTooltip } from './MesheryMeshInterface/PatternService/CustomTextTooltip';
+import { CHARCOAL } from '@layer5/sistent-components';
 
 const styles = (theme) => ({
   root: {
@@ -1069,9 +1071,13 @@ class Navigator extends React.Component {
             rel="noreferrer"
             style={{ color: 'white' }}
           >
-            <Tooltip title={`Newer version of Meshery available: ${latest}`} placement="right">
+            <CustomTextTooltip
+              backgroundColor={CHARCOAL}
+              title={`Newer version of Meshery available: ${latest}`}
+              placement="right"
+            >
               <OpenInNewIcon style={{ width: '0.85rem', verticalAlign: 'middle' }} />
-            </Tooltip>
+            </CustomTextTooltip>
           </a>
         </span>
       );
@@ -1288,11 +1294,15 @@ class Navigator extends React.Component {
                     isDrawerCollapsed ? classes.extraPadding : '',
                   )}
                 >
-                  <Tooltip title={title} placement={isDrawerCollapsed ? 'right' : 'top'}>
+                  <CustomTextTooltip
+                    backgroundColor={CHARCOAL}
+                    title={title}
+                    placement={isDrawerCollapsed ? 'right' : 'top'}
+                  >
                     <ListItemIcon className={classNames(classes.listIcon, classes.helpIcon)}>
                       {icon}
                     </ListItemIcon>
-                  </Tooltip>
+                  </CustomTextTooltip>
                 </a>
               </Grow>
             </ListItem>
@@ -1302,7 +1312,11 @@ class Navigator extends React.Component {
           className={classes.rightMargin}
           style={!isDrawerCollapsed ? { display: 'none' } : { marginLeft: '4px' }}
         >
-          <Tooltip title="Help" placement={isDrawerCollapsed ? 'right' : 'top'}>
+          <CustomTextTooltip
+            backgroundColor={CHARCOAL}
+            title="Help"
+            placement={isDrawerCollapsed ? 'right' : 'top'}
+          >
             <IconButton
               className={isDrawerCollapsed ? classes.collapsedHelpButton : classes.rightTranslate}
               onClick={this.toggleSpacing}
@@ -1312,7 +1326,7 @@ class Navigator extends React.Component {
                 style={{ fontSize: '1.45rem', ...iconSmall }}
               />
             </IconButton>
-          </Tooltip>
+          </CustomTextTooltip>
         </ListItem>
       </ButtonGroup>
     );

ui/components/UserPreferences/index.js

@@ -10,7 +10,7 @@ import dataFetch from '../../lib/data-fetch';
 import { updateUser, updateProgress, toggleCatalogContent } from '../../lib/store';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
-import { Paper, Tooltip } from '@material-ui/core';
+import { Paper } from '@material-ui/core';
 import SettingsRemoteIcon from '@material-ui/icons/SettingsRemote';
 import SettingsCellIcon from '@material-ui/icons/SettingsCell';
 import ExtensionSandbox from '../ExtensionSandbox';
@@ -26,6 +26,8 @@ import { isExtensionOpen } from '../../pages/_app';
 import { EVENT_TYPES } from '../../lib/event-types';
 import { useNotification } from '../../utils/hooks/useNotification';
 import SpacesPreferences from './spaces-preferences';
+import { CustomTextTooltip } from '../MesheryMeshInterface/PatternService/CustomTextTooltip';
+import { CHARCOAL } from '@layer5/sistent-components';
 
 const styles = (theme) => ({
   statsWrapper: {
@@ -292,29 +294,37 @@ const UserPreference = (props) => {
           textColor="primary"
           className={props.classes.tabs}
         >
-          <Tooltip title="General preferences" placement="top">
+          <CustomTextTooltip backgroundColor={CHARCOAL} title="General preferences" placement="top">
             <Tab
               className={props.classes.tab}
               icon={<SettingsCellIcon style={iconMedium} />}
               label={<span className={props.classes.tabLabel}>General</span>}
             />
-          </Tooltip>
-          <Tooltip title="Choose Performance Test Defaults" placement="top">
+          </CustomTextTooltip>
+          <CustomTextTooltip
+            backgroundColor={CHARCOAL}
+            title="Choose Performance Test Defaults"
+            placement="top"
+          >
             <Tab
               className={props.classes.tab}
               icon={<FontAwesomeIcon icon={faTachometerAlt} style={iconMedium} />}
               label={<span className={props.classes.tabLabel}>Performance</span>}
             />
-          </Tooltip>
+          </CustomTextTooltip>
           {/* NOTE: This tab's appearance is logical hence it must be put at last here! Otherwise added logic will need to be added for tab numbers!*/}
           {userPrefs && providerType != 'local' && (
-            <Tooltip title="Remote Provider preferences" placement="top">
+            <CustomTextTooltip
+              backgroundColor={CHARCOAL}
+              title="Remote Provider preferences"
+              placement="top"
+            >
               <Tab
                 className={props.classes.tab}
                 icon={<SettingsRemoteIcon style={iconMedium} />}
                 label={<span className={props.classes.tabLabel}>Remote Provider</span>}
               />
-            </Tooltip>
+            </CustomTextTooltip>
           )}
         </Tabs>
       </Paper>

ui/components/connections/index.js

@@ -63,7 +63,6 @@ import FormatConnectionMetadata from './metadata';
 import useKubernetesHook from '../hooks/useKubernetesHook';
 import theme from '../../themes/app';
 import { TootltipWrappedConnectionChip } from './ConnectionChip';
-import InfoIcon from '@material-ui/icons/Info';
 import { DefaultTableCell, SortableTableCell } from './common';
 import { getColumnValue, getVisibilityColums } from '../../utils/utils';
 import HandymanIcon from '@mui/icons-material/Handyman';
@@ -88,6 +87,7 @@ import DefaultError from '../General/error-404/index';
 import { useUpdateConnectionMutation } from '@/rtk-query/connection';
 import { useGetSchemaQuery } from '@/rtk-query/schema';
 import { renderTooltipContent } from '../MesheryMeshInterface/PatternService/CustomTextTooltip';
+import InfoOutlinedIcon from '@/assets/icons/InfoOutlined';
 
 const ACTION_TYPES = {
   FETCH_CONNECTIONS: {
@@ -437,8 +437,8 @@ function Connections(props) {
               columnData={column}
               icon={
                 <IconButton disableRipple={true} disableFocusRipple={true}>
-                  <InfoIcon
-                    color={theme.palette.secondary.iconMain}
+                  <InfoOutlinedIcon
+                    fill={theme.palette.secondary.iconMain}
                     style={{
                       cursor: 'pointer',
                       height: 20,
@@ -451,8 +451,10 @@ function Connections(props) {
                 </IconButton>
               }
               tooltip={renderTooltipContent({
-                showInfotext: 'about enviroments and about assigning resources',
+                showPriortext:
+                  'Meshery Environments allow you to logically group related Connections and their associated Credentials.',
                 link: envUrl,
+                showAftertext: 'to learn more about Environments',
               })}
             />
           );
@@ -635,8 +637,8 @@ function Connections(props) {
               onSort={() => sortColumn(index)}
               icon={
                 <IconButton disableRipple={true} disableFocusRipple={true}>
-                  <InfoIcon
-                    color={theme.palette.secondary.iconMain}
+                  <InfoOutlinedIcon
+                    fill={theme.palette.secondary.iconMain}
                     style={{
                       cursor: 'pointer',
                       height: 20,
@@ -649,8 +651,10 @@ function Connections(props) {
                 </IconButton>
               }
               tooltip={renderTooltipContent({
-                showInfotext: 'about connection and status',
+                showPriortext:
+                  'Every connection can be in one of the states at any given point of time. Eg: Connected, Registered, Discovered, etc. It allow users more control over whether the discovered infrastructure is to be managed or not (registered for use or not).',
                 link: url,
+                showAftertext: 'to learn more about Connection States',
               })}
             />
           );