From c89e5f974a86fb28ed9aa033529d555bc7722834 Mon Sep 17 00:00:00 2001 From: sudhanshu dasgupta Date: Mon, 5 Feb 2024 10:08:47 +0530 Subject: [PATCH 1/3] add info and replace tooltips Signed-off-by: sudhanshu dasgupta --- ui/assets/icons/InfoOutlined.js | 3 ++- ui/components/Header.js | 9 ++++--- .../PatternService/CustomTextTooltip.js | 2 +- ui/components/Navigator.js | 26 ++++++++++++++----- ui/components/UserPreferences/index.js | 24 ++++++++++++----- ui/components/connections/index.js | 18 ++++++++----- 6 files changed, 56 insertions(+), 26 deletions(-) diff --git a/ui/assets/icons/InfoOutlined.js b/ui/assets/icons/InfoOutlined.js index b25ea14328e..a0d9086cc00 100644 --- a/ui/assets/icons/InfoOutlined.js +++ b/ui/assets/icons/InfoOutlined.js @@ -1,6 +1,6 @@ import React from "react"; -const InfoOutlinedIcon = ({ height, width, style = {}, className={} }) => { +const InfoOutlinedIcon = ({ height, width, style = {}, className={}, fill }) => { return ( { width={width} style={style} className={className} + fill="currentColor" > diff --git a/ui/components/Header.js b/ui/components/Header.js index 45b9239a671..ab397cd57ed 100644 --- a/ui/components/Header.js +++ b/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 (
-
- + ); })} diff --git a/ui/components/MesheryMeshInterface/PatternService/CustomTextTooltip.js b/ui/components/MesheryMeshInterface/PatternService/CustomTextTooltip.js index 4698732deab..7d0d1f3c454 100644 --- a/ui/components/MesheryMeshInterface/PatternService/CustomTextTooltip.js +++ b/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 {showAftertext} diff --git a/ui/components/Navigator.js b/ui/components/Navigator.js index bf66cd819d4..5ea317f95c5 100644 --- a/ui/components/Navigator.js +++ b/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' }} > - + - + ); @@ -1288,11 +1294,15 @@ class Navigator extends React.Component { isDrawerCollapsed ? classes.extraPadding : '', )} > - + {icon} - + @@ -1302,7 +1312,11 @@ class Navigator extends React.Component { className={classes.rightMargin} style={!isDrawerCollapsed ? { display: 'none' } : { marginLeft: '4px' }} > - + - + ); diff --git a/ui/components/UserPreferences/index.js b/ui/components/UserPreferences/index.js index 5732a67ebcc..79d21bcc0f7 100644 --- a/ui/components/UserPreferences/index.js +++ b/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} > - + } label={General} /> - - + + } label={Performance} /> - + {/* 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' && ( - + } label={Remote Provider} /> - + )} diff --git a/ui/components/connections/index.js b/ui/components/connections/index.js index f9313019ade..e9e706a0ef2 100644 --- a/ui/components/connections/index.js +++ b/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={ - } 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={ - } 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', })} /> ); From 35a81fae95f32e466de30fcc7eae8c2b58a89a9c Mon Sep 17 00:00:00 2001 From: sudhanshu dasgupta Date: Mon, 5 Feb 2024 10:40:48 +0530 Subject: [PATCH 2/3] add info to categories tooltip Signed-off-by: sudhanshu dasgupta --- .../DashboardComponent/charts/DashboardMeshModelGraph.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/components/DashboardComponent/charts/DashboardMeshModelGraph.js b/ui/components/DashboardComponent/charts/DashboardMeshModelGraph.js index 2d093e126e4..c7782c13934 100644 --- a/ui/components/DashboardComponent/charts/DashboardMeshModelGraph.js +++ b/ui/components/DashboardComponent/charts/DashboardMeshModelGraph.js @@ -203,6 +203,8 @@ function MeshModelCategories({ classes }) { Date: Mon, 5 Feb 2024 12:03:56 +0530 Subject: [PATCH 3/3] fix lint Signed-off-by: sudhanshu dasgupta --- ui/assets/icons/InfoOutlined.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/assets/icons/InfoOutlined.js b/ui/assets/icons/InfoOutlined.js index a0d9086cc00..cd183e8dcee 100644 --- a/ui/assets/icons/InfoOutlined.js +++ b/ui/assets/icons/InfoOutlined.js @@ -1,6 +1,6 @@ import React from "react"; -const InfoOutlinedIcon = ({ height, width, style = {}, className={}, fill }) => { +const InfoOutlinedIcon = ({ height, width, style = {}, className={} }) => { return (