From 600940226c36d5d8ea196c137b60a74501c974f9 Mon Sep 17 00:00:00 2001 From: Pragadesh-45 <54320162+Pragadesh-45@users.noreply.github.com> Date: Tue, 27 Aug 2024 18:36:59 +0530 Subject: [PATCH] Feat/icon tooltip (#2812) * comp-rename Tooltip to InfoTip (fbu) * fix: additional func InfoTip * ToolHint component * toolhint intg collectiontoolbar * toolhint intg notifications * toolhint intg sidebar * chore: update infotip for path params * chore: update infotip for path params --- .../CollectionSettings/ProxySettings/index.js | 6 +-- .../FolderSettings/Vars/VarsTable/index.js | 6 +-- .../components/{Tooltip => InfoTip}/index.js | 10 ++-- .../src/components/Notifications/index.js | 37 ++++++++------- .../RequestPane/QueryParams/index.js | 6 +-- .../RequestPane/QueryUrl/StyledWrapper.js | 8 ++-- .../components/RequestPane/QueryUrl/index.js | 4 +- .../RequestPane/Vars/VarsTable/index.js | 6 +-- .../CollectionToolBar/StyledWrapper.js | 2 +- .../RequestTabs/CollectionToolBar/index.js | 15 ++++-- .../QueryResult/QueryResultFilter/index.js | 6 +-- .../Collection/CloneCollection/index.js | 6 +-- .../Sidebar/CreateCollection/index.js | 6 +-- .../bruno-app/src/components/Sidebar/index.js | 33 +++++++------ .../src/components/ToolHint/StyledWrapper.js | 8 ++++ .../src/components/ToolHint/index.js | 47 +++++++++++++++++++ 16 files changed, 136 insertions(+), 70 deletions(-) rename packages/bruno-app/src/components/{Tooltip => InfoTip}/index.js (81%) create mode 100644 packages/bruno-app/src/components/ToolHint/StyledWrapper.js create mode 100644 packages/bruno-app/src/components/ToolHint/index.js diff --git a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js index 3df200e88..8a433e73e 100644 --- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import { useFormik } from 'formik'; -import Tooltip from 'components/Tooltip'; +import InfoTip from 'components/InfoTip'; import StyledWrapper from './StyledWrapper'; import * as Yup from 'yup'; import toast from 'react-hot-toast'; @@ -104,7 +104,7 @@ const ProxySettings = ({ proxyConfig, onUpdate }) => {
`} - tooltipId="request-var" + infotipId="request-var" />
diff --git a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js index dcd84d73c..c3414170e 100644 --- a/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js +++ b/packages/bruno-app/src/components/FolderSettings/Vars/VarsTable/index.js @@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux'; import { useTheme } from 'providers/Theme'; import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions'; import SingleLineEditor from 'components/SingleLineEditor'; -import Tooltip from 'components/Tooltip'; +import InfoTip from 'components/InfoTip'; import StyledWrapper from './StyledWrapper'; import toast from 'react-hot-toast'; import { variableNameRegex } from 'utils/common/regex'; @@ -82,14 +82,14 @@ const VarsTable = ({ folder, collection, vars, varType }) => {
Value - +
) : (
Expr - +
)} diff --git a/packages/bruno-app/src/components/Tooltip/index.js b/packages/bruno-app/src/components/InfoTip/index.js similarity index 81% rename from packages/bruno-app/src/components/Tooltip/index.js rename to packages/bruno-app/src/components/InfoTip/index.js index 6622a9e72..97eb63d4d 100644 --- a/packages/bruno-app/src/components/Tooltip/index.js +++ b/packages/bruno-app/src/components/InfoTip/index.js @@ -1,12 +1,12 @@ import React from 'react'; -import { Tooltip as ReactTooltip } from 'react-tooltip'; +import { Tooltip as ReactInfoTip } from 'react-tooltip'; -const Tooltip = ({ text, tooltipId }) => { +const InfoTip = ({ text, infotipId }) => { return ( <> { - + ); }; -export default Tooltip; +export default InfoTip; diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js index 15a055c76..245538541 100644 --- a/packages/bruno-app/src/components/Notifications/index.js +++ b/packages/bruno-app/src/components/Notifications/index.js @@ -10,6 +10,8 @@ import { } from 'providers/ReduxStore/slices/notifications'; import { useDispatch, useSelector } from 'react-redux'; import { humanizeDate, relativeDate } from 'utils/common'; +import ToolHint from 'components/ToolHint'; +import { useTheme } from 'providers/Theme'; const PAGE_SIZE = 5; @@ -20,6 +22,7 @@ const Notifications = () => { const [showNotificationsModal, setShowNotificationsModal] = useState(false); const [selectedNotification, setSelectedNotification] = useState(null); const [pageNumber, setPageNumber] = useState(1); + const { storedTheme } = useTheme(); const notificationsStartIndex = (pageNumber - 1) * PAGE_SIZE; const notificationsEndIndex = pageNumber * PAGE_SIZE; @@ -85,21 +88,22 @@ const Notifications = () => { return ( { dispatch(fetchNotifications()); setShowNotificationsModal(true); }} > - 0 ? 'bell' : ''}`} - /> - {unreadNotifications.length > 0 && ( - {unreadNotifications.length} - )} + + 0 ? 'bell' : ''}`} + /> + {unreadNotifications.length > 0 && ( + {unreadNotifications.length} + )} + {showNotificationsModal && ( @@ -129,9 +133,8 @@ const Notifications = () => { {notifications?.slice(notificationsStartIndex, notificationsEndIndex)?.map((notification) => (
  • {notification?.title}
    @@ -141,9 +144,8 @@ const Notifications = () => {
    • Path - Path variables are automatically added whenever the @@ -186,7 +186,7 @@ const QueryParams = ({ item, collection }) => {
    `} - tooltipId="path-param-tooltip" + infotipId="path-param-InfoTip" /> diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js index 2308dec4f..cca562025 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js @@ -33,18 +33,18 @@ const Wrapper = styled.div` top: 1px; } - .tooltip { + .infotip { position: relative; display: inline-block; cursor: pointer; } - .tooltip:hover .tooltiptext { + .infotip:hover .infotiptext { visibility: visible; opacity: 1; } - .tooltiptext { + .infotiptext { visibility: hidden; width: auto; background-color: ${(props) => props.theme.requestTabs.active.bg}; @@ -62,7 +62,7 @@ const Wrapper = styled.div` white-space: nowrap; } - .tooltiptext::after { + .infotiptext::after { content: ''; position: absolute; top: 100%; diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js index 0c2707ac8..bcbf55c91 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js @@ -74,7 +74,7 @@ const QueryUrl = ({ item, collection, handleRun }) => { />
    { e.stopPropagation(); if (!item.draft) return; @@ -87,7 +87,7 @@ const QueryUrl = ({ item, collection, handleRun }) => { size={22} className={`${item.draft ? 'cursor-pointer' : 'cursor-default'}`} /> - + Save ({saveShortcut})
    diff --git a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js index 01cf0f340..1ed01da24 100644 --- a/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js +++ b/packages/bruno-app/src/components/RequestPane/Vars/VarsTable/index.js @@ -6,7 +6,7 @@ import { useTheme } from 'providers/Theme'; import { addVar, updateVar, deleteVar } from 'providers/ReduxStore/slices/collections'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import SingleLineEditor from 'components/SingleLineEditor'; -import Tooltip from 'components/Tooltip'; +import InfoTip from 'components/InfoTip'; import StyledWrapper from './StyledWrapper'; import toast from 'react-hot-toast'; import { variableNameRegex } from 'utils/common/regex'; @@ -83,14 +83,14 @@ const VarsTable = ({ item, collection, vars, varType }) => {
    ) : ( )} diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/StyledWrapper.js index ec278887d..39cd89e4c 100644 --- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/StyledWrapper.js @@ -2,4 +2,4 @@ import styled from 'styled-components'; const StyledWrapper = styled.div``; -export default StyledWrapper; +export default StyledWrapper; \ No newline at end of file diff --git a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js index 5f6257bc4..26ec31545 100644 --- a/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js +++ b/packages/bruno-app/src/components/RequestTabs/CollectionToolBar/index.js @@ -4,6 +4,7 @@ import { IconFiles, IconRun, IconEye, IconSettings } from '@tabler/icons'; import EnvironmentSelector from 'components/Environments/EnvironmentSelector'; import { addTab } from 'providers/ReduxStore/slices/tabs'; import { useDispatch } from 'react-redux'; +import ToolHint from 'components/ToolHint'; import StyledWrapper from './StyledWrapper'; import JsSandboxMode from 'components/SecuritySettings/JsSandboxMode'; @@ -51,14 +52,20 @@ const CollectionToolBar = ({ collection }) => { - - + + + + - + + + - + + + diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js index 172a3047b..bd52c410a 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultFilter/index.js @@ -2,7 +2,7 @@ import { IconFilter, IconX } from '@tabler/icons'; import React, { useMemo } from 'react'; import { useRef } from 'react'; import { useState } from 'react'; -import { Tooltip as ReactTooltip } from 'react-tooltip'; +import { Tooltip as ReactInfotip } from 'react-tooltip'; const QueryResultFilter = ({ filter, onChange, mode }) => { const inputRef = useRef(null); @@ -19,7 +19,7 @@ const QueryResultFilter = ({ filter, onChange, mode }) => { } }; - const tooltipText = useMemo(() => { + const infotipText = useMemo(() => { if (mode.includes('json')) { return 'Filter with JSONPath'; } @@ -49,7 +49,7 @@ const QueryResultFilter = ({ filter, onChange, mode }) => { 'response-filter absolute bottom-2 w-full justify-end right-0 flex flex-row items-center gap-2 py-4 px-2 pointer-events-none' } > - {tooltipText && !isExpanded && } + {infotipText && !isExpanded && } { @@ -126,9 +126,9 @@ const CloneCollection = ({ onClose, collection }) => { { @@ -119,9 +119,9 @@ const CreateCollection = ({ onClose }) => { {
    {/* This will get moved to home page */} @@ -126,7 +129,7 @@ const Sidebar = () => { data-show-count="true" aria-label="Star usebruno/bruno on GitHub" > - Star + Star */}
    v1.26.2
    @@ -137,7 +140,7 @@ const Sidebar = () => {
    - + ); }; diff --git a/packages/bruno-app/src/components/ToolHint/StyledWrapper.js b/packages/bruno-app/src/components/ToolHint/StyledWrapper.js new file mode 100644 index 000000000..8cbe85f38 --- /dev/null +++ b/packages/bruno-app/src/components/ToolHint/StyledWrapper.js @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + background-color: ${(props) => props.theme.sidebar.badge}; + color: ${(props) => props.theme.text}; +`; + +export default Wrapper; diff --git a/packages/bruno-app/src/components/ToolHint/index.js b/packages/bruno-app/src/components/ToolHint/index.js new file mode 100644 index 000000000..5ca7af233 --- /dev/null +++ b/packages/bruno-app/src/components/ToolHint/index.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { Tooltip as ReactToolHint } from 'react-tooltip'; +import StyledWrapper from './StyledWrapper'; +import { useTheme } from 'providers/Theme'; + +const ToolHint = ({ + text, + toolhintId, + children, + tooltipStyle = {}, + place = 'top', + offset, + theme = null +}) => { + const { theme: contextTheme } = useTheme(); + const appliedTheme = theme || contextTheme; + + const toolhintBackgroundColor = appliedTheme?.sidebar.badge.bg || 'black'; + const toolhintTextColor = appliedTheme?.text || 'white'; + + const combinedToolhintStyle = { + ...tooltipStyle, + fontSize: '0.75rem', + padding: '0.25rem 0.5rem', + backgroundColor: toolhintBackgroundColor, + color: toolhintTextColor + }; + + return ( + <> + {children} + + + + + ); +}; + +export default ToolHint;
    Value - +
    Expr - +