From a1fc55ec89673f577edcd704c23835662fdd7bbc Mon Sep 17 00:00:00 2001 From: Nicolas Inchauspe Date: Wed, 3 Aug 2022 14:38:18 +0200 Subject: [PATCH] console: React bootstrap tooltip migration PR-URL: https://github.com/hasura/graphql-engine-mono/pull/4959 GitOrigin-RevId: b8c8a620baeaa3228e92d058a917dbf3350d48ec --- console/exports/main.js | 1 + .../CollapsibleToggle/CollapsibleToggle.tsx | 8 +- .../components/Common/LabeledInput/index.tsx | 4 +- .../Common/OverlayMessage/index.tsx | 12 +- .../src/components/Common/Tooltip/Tooltip.tsx | 10 +- .../Common/WarningSymbol/WarningSymbol.tsx | 10 +- console/src/components/Main/Main.js | 13 +- .../components/Services/Actions/Add/Add.tsx | 6 +- .../Services/Actions/Codegen/DerivedFrom.js | 27 ++- .../Common/components/ActionEditor.tsx | 14 +- .../Common/components/CloneTypeModal.js | 102 -------- .../Common/components/GraphQLEditor.tsx | 8 +- .../Actions/Common/components/NameEditor.js | 27 --- .../Actions/Common/components/Tooltip.js | 15 -- .../Services/Actions/Modify/Modify.tsx | 2 +- .../Data/DataSources/ConnectDBForm.tsx | 8 +- .../DataSources/ConnectionSettingsForm.tsx | 8 +- .../GraphQLFieldCustomization.tsx | 6 +- .../NamingConvention.tsx | 4 +- .../Data/TablePermissions/Permissions.js | 129 +++------- .../Services/Data/TablePermissions/utils.tsx | 6 +- .../Common/Components/RetryConfEditor.tsx | 47 ++-- .../Events/EventTriggers/Add/FormLabel.tsx | 4 +- .../EventTriggers/Common/Operations.tsx | 4 +- .../Services/RemoteSchema/Common/Common.js | 110 ++++----- .../GraphQLCustomization/FieldNames.tsx | 16 +- .../GraphQLCustomizationEdit.tsx | 29 +-- .../docs/dev/ComponentDocTemplate.stories.mdx | 19 -- .../Form/components/AdvancedSettings.tsx | 8 +- .../Form/components/CronScheduleSelector.tsx | 4 +- .../components/IncludeInMetadataSwitch.tsx | 4 +- .../Form/components/RetryConfiguration.tsx | 8 +- .../components/RowPermissions.tsx | 4 +- .../components/SubFieldTitle.tsx | 4 +- .../RemoteSchema/components/Create/Create.tsx | 14 +- .../components/Create/GraphQLServiceUrl.tsx | 4 +- .../src/new-components/Collapse/Collapse.tsx | 4 +- .../Form/CodeEditorField.stories.mdx | 19 -- .../src/new-components/Form/FieldWrapper.tsx | 4 +- .../Tooltip/IconTooltip.stories.mdx | 163 +++++++++++++ .../new-components/Tooltip/IconTooltip.tsx | 32 +++ .../Tooltip/Tooltip.stories.mdx | 228 ++++++++++++++++++ .../Tooltip/Tooltip.stories.tsx | 24 -- .../src/new-components/Tooltip/Tooltip.tsx | 46 ++-- console/src/new-components/Tooltip/index.ts | 1 + console/src/utils/StoryUtils.tsx | 7 +- 46 files changed, 647 insertions(+), 580 deletions(-) delete mode 100644 console/src/components/Services/Actions/Common/components/CloneTypeModal.js delete mode 100644 console/src/components/Services/Actions/Common/components/NameEditor.js delete mode 100644 console/src/components/Services/Actions/Common/components/Tooltip.js create mode 100644 console/src/new-components/Tooltip/IconTooltip.stories.mdx create mode 100644 console/src/new-components/Tooltip/IconTooltip.tsx create mode 100644 console/src/new-components/Tooltip/Tooltip.stories.mdx delete mode 100644 console/src/new-components/Tooltip/Tooltip.stories.tsx diff --git a/console/exports/main.js b/console/exports/main.js index 19b6ae29ca0..65682ccbf24 100644 --- a/console/exports/main.js +++ b/console/exports/main.js @@ -12,6 +12,7 @@ export { fetchConsoleNotifications } from '../src/components/Main/Actions'; export { default as NotificationSection } from '../src/components/Main/NotificationSection'; export { default as Onboarding } from '../src/components/Common/Onboarding'; export { default as PageNotFound } from '../src/components/Error/PageNotFound'; +export * from '../src/new-components/Tooltip/'; export { CONSOLE_ADMIN_SECRET } from '../src/components/AppState'; export { default as dataHeaders } from '../src/components/Services/Data/Common/Headers'; export { handleMigrationErrors } from '../src/components/Services/Data/TableModify/ModifyActions'; diff --git a/console/src/components/Common/CollapsibleToggle/CollapsibleToggle.tsx b/console/src/components/Common/CollapsibleToggle/CollapsibleToggle.tsx index 082119fcf9e..d9a6b209b74 100644 --- a/console/src/components/Common/CollapsibleToggle/CollapsibleToggle.tsx +++ b/console/src/components/Common/CollapsibleToggle/CollapsibleToggle.tsx @@ -75,14 +75,10 @@ class CollapsibleToggle extends React.Component< }} open={isOpen} > - - + + - {getTitle()}
{children}
diff --git a/console/src/components/Common/LabeledInput/index.tsx b/console/src/components/Common/LabeledInput/index.tsx index 5e5e12db60a..f87a652f3c0 100644 --- a/console/src/components/Common/LabeledInput/index.tsx +++ b/console/src/components/Common/LabeledInput/index.tsx @@ -1,5 +1,5 @@ import React, { InputHTMLAttributes } from 'react'; -import { ToolTip } from '@/new-components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; interface LabeledInputProps extends InputHTMLAttributes { label: string; @@ -16,7 +16,7 @@ export const LabeledInput: React.FC = props => ( }`} > {props?.boldlabel ? {props.label} : props.label} - {props.tooltipText && } + {props.tooltipText && } = ({ @@ -14,12 +13,9 @@ const OverlayMessage: React.FC = ({ placement = 'left', }) => message ? ( - {message}} - > + {children} - + ) : ( children ); diff --git a/console/src/components/Common/Tooltip/Tooltip.tsx b/console/src/components/Common/Tooltip/Tooltip.tsx index 5080de88151..53d1aa8d2a9 100644 --- a/console/src/components/Common/Tooltip/Tooltip.tsx +++ b/console/src/components/Common/Tooltip/Tooltip.tsx @@ -1,12 +1,8 @@ import React from 'react'; import { FaInfoCircle } from 'react-icons/fa'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; -import Tooltip from 'react-bootstrap/lib/Tooltip'; +import { Tooltip } from '@/new-components/Tooltip'; import styles from './Tooltip.scss'; -const tooltipGen = (message: string) => { - return {message}; -}; export interface TooltipProps extends React.ComponentProps<'i'> { message: string; placement?: 'right' | 'left' | 'top' | 'bottom'; @@ -20,14 +16,14 @@ const ToolTip: React.FC = ({ tooltipStyle = '', children, }) => ( - + {children || ( + ); export default ToolTip; diff --git a/console/src/components/Common/WarningSymbol/WarningSymbol.tsx b/console/src/components/Common/WarningSymbol/WarningSymbol.tsx index c626ada071a..62e93409634 100644 --- a/console/src/components/Common/WarningSymbol/WarningSymbol.tsx +++ b/console/src/components/Common/WarningSymbol/WarningSymbol.tsx @@ -1,9 +1,7 @@ import React from 'react'; -import Tooltip from 'react-bootstrap/lib/Tooltip'; +import { Tooltip } from '@/new-components/Tooltip'; import { FaExclamationTriangle } from 'react-icons/fa'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; - import styles from './WarningSymbol.scss'; export interface WarningSymbolProps { @@ -17,15 +15,13 @@ const WarningSymbol: React.FC = ({ tooltipPlacement = 'right', customStyle = '', }) => { - const tooltip = {tooltipText}; - return (
- + - +
); }; diff --git a/console/src/components/Main/Main.js b/console/src/components/Main/Main.js index 46c6c59b8b9..98a7ba1a9d7 100644 --- a/console/src/components/Main/Main.js +++ b/console/src/components/Main/Main.js @@ -1,7 +1,6 @@ import React from 'react'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; -import Tooltip from 'react-bootstrap/lib/Tooltip'; +import { Tooltip } from '@/new-components/Tooltip'; import { FaCloud, FaCog, @@ -111,8 +110,8 @@ const getSidebarItem = ( const className = isCurrentBlockActive ? styles.navSideBarActive : ''; return ( - -
  • +
  • + -

    {title}

    +

    {title}

    -
    • -     + + ); }; diff --git a/console/src/components/Services/Actions/Add/Add.tsx b/console/src/components/Services/Actions/Add/Add.tsx index 145f1bd3d3d..6d7dd12d2d3 100644 --- a/console/src/components/Services/Actions/Add/Add.tsx +++ b/console/src/components/Services/Actions/Add/Add.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useReducer } from 'react'; import { GraphQLError } from 'graphql'; import { connect, ConnectedProps } from 'react-redux'; import Helmet from 'react-helmet'; -import { Tooltip } from 'react-bootstrap'; +import { IconTooltip } from '@/new-components/Tooltip'; import requestAction from '@/utils/requestAction'; import { parseValidateApiData, @@ -382,9 +382,7 @@ const AddAction: React.FC = ({ Create Action {readOnlyMode && ( - - Adding new action is not allowed in Read only mode! - + )} diff --git a/console/src/components/Services/Actions/Codegen/DerivedFrom.js b/console/src/components/Services/Actions/Codegen/DerivedFrom.js index d15571caa88..69ec9dfff35 100644 --- a/console/src/components/Services/Actions/Codegen/DerivedFrom.js +++ b/console/src/components/Services/Actions/Codegen/DerivedFrom.js @@ -1,6 +1,6 @@ import React from 'react'; import AceEditor from '../../../Common/AceEditor/BaseEditor'; -import Tooltip from '../Common/components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; const DerivedFrom = ({ shouldDerive, parentMutation, toggleDerivation }) => { if (!parentMutation) return null; @@ -9,17 +9,26 @@ const DerivedFrom = ({ shouldDerive, parentMutation, toggleDerivation }) => { 'This code is generated based on the assumption that operation was derived from another operation. If the assumption is wrong, you can disable the derivation.'; return (
    -

    +

    Derived operation - +

    -
    diff --git a/console/src/components/Services/Actions/Common/components/ActionEditor.tsx b/console/src/components/Services/Actions/Common/components/ActionEditor.tsx index a2eb347a513..cca658a147e 100644 --- a/console/src/components/Services/Actions/Common/components/ActionEditor.tsx +++ b/console/src/components/Services/Actions/Common/components/ActionEditor.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { GraphQLError } from 'graphql'; -import { Tooltip, OverlayTrigger } from 'react-bootstrap'; -import { FaQuestionCircle } from 'react-icons/fa'; +import { IconTooltip } from '@/new-components/Tooltip'; import HandlerEditor from './HandlerEditor'; import ExecutionEditor from './ExecutionEditor'; import HeaderConfEditor from './HeaderConfEditor'; @@ -189,16 +188,7 @@ const ActionEditor: React.FC = ({

    Action custom timeout - - Configure timeout for Action. Defaults to 30 seconds. - - } - > - +

    { - const [prefix, setPrefix] = React.useState('_'); - const prefixOnChange = e => setPrefix(e.target.value); - - const { schema, loading, error, introspect } = useIntrospectionSchema( - headers, - dispatch - ); - - if (loading) return ; - - if (error) { - return ( -
    - Error introspecting schema.  - Try again -
    - ); - } - - const cloneableTypes = Object.keys(schema._typeMap) - .filter(t => { - if (t.startsWith('__')) return false; - return ( - isInputObjectType(schema._typeMap[t]) || - isObjectType(schema._typeMap[t]) || - isEnumType(schema._typeMap[t]) - ); - }) - .sort((t1, t2) => { - const _t1 = t1.toLowerCase(); - const _t2 = t2.toLowerCase(); - if (_t1 > _t2) return 1; - if (_t1 < _t2) return -1; - return 0; - }); - - const onSelection = e => { - const selectedType = e.target.value; - if (selectedType === '') return; - const newTypes = deriveExistingType(selectedType, schema._typeMap, prefix); - handleClonedTypes(newTypes); - toggleModal(); - }; - - const dropdownTitle = prefix ? null : 'Please provide a prefix first.'; - - const prefixTooltipText = - 'Prefix is required so that the type you are cloning does not collide with the existing type in Hasura.'; - - return ( -
    -
    -
    - Prefix -
    - -
    -
    -
    Type to clone
    - -
    -
    - ); -}; - -const mapStateToprops = state => { - return { - headers: state.tables.dataHeaders, - }; -}; - -export default connect(mapStateToprops)(CloneType); diff --git a/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx b/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx index b521fd5a28f..5acff3e8b8b 100644 --- a/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx +++ b/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { parse as sdlParser } from 'graphql/language/parser'; import { GraphQLError } from 'graphql'; -import Tooltip from './Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import CrossIcon from '../../../../Common/Icons/Cross'; import AceEditor from '../../../../Common/AceEditor/BaseEditor'; import { Nullable } from '../../../../Common/utils/tsUtils'; @@ -78,11 +78,7 @@ const GraphQLEditor: React.FC = ({ {label ? (

    {label} - {tooltip ? ( - - ) : ( - <> - )} + {tooltip ? : <>}

    ) : null}
    diff --git a/console/src/components/Services/Actions/Common/components/NameEditor.js b/console/src/components/Services/Actions/Common/components/NameEditor.js deleted file mode 100644 index 8c186dd96d9..00000000000 --- a/console/src/components/Services/Actions/Common/components/NameEditor.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { inputStyles } from '../../constants'; -import Tooltip from './Tooltip'; - -const editorLabel = 'Name'; -const editorTooltip = - 'Set a name for your action. This will be a root field in your GraphQL schema'; - -const NameEditor = ({ value, onChange, className, placeholder }) => { - return ( -
    -

    - {editorLabel} - -

    - -
    - ); -}; - -export default NameEditor; diff --git a/console/src/components/Services/Actions/Common/components/Tooltip.js b/console/src/components/Services/Actions/Common/components/Tooltip.js deleted file mode 100644 index b2b31c42028..00000000000 --- a/console/src/components/Services/Actions/Common/components/Tooltip.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; -import TooltipElement from 'react-bootstrap/lib/Tooltip'; -import { FaQuestionCircle } from 'react-icons/fa'; - -const Tooltip = ({ text, id, className }) => { - const tooltip = {text}; - return ( - - - ); -}; - -export default Tooltip; diff --git a/console/src/components/Services/Actions/Modify/Modify.tsx b/console/src/components/Services/Actions/Modify/Modify.tsx index 303fe319222..9f0f686eb52 100644 --- a/console/src/components/Services/Actions/Modify/Modify.tsx +++ b/console/src/components/Services/Actions/Modify/Modify.tsx @@ -413,7 +413,7 @@ const ModifyAction: React.FC = ({ requestPayloadTransformOnChange={requestPayloadTransformOnChange} /> -
    +
    {!readOnlyMode && ( <>
    = ({ connectionDBState={connectionDBState} connectionDBStateDispatch={connectionDBStateDispatch} /> - {/* + {/* TODO: remove the edit state condition when the BE issue is solved https://github.com/hasura/graphql-engine-mono/issues/4700 */} diff --git a/console/src/components/Services/Data/DataSources/ConnectionSettingsForm.tsx b/console/src/components/Services/Data/DataSources/ConnectionSettingsForm.tsx index 37905e0a868..b5e97ce20b1 100644 --- a/console/src/components/Services/Data/DataSources/ConnectionSettingsForm.tsx +++ b/console/src/components/Services/Data/DataSources/ConnectionSettingsForm.tsx @@ -1,6 +1,6 @@ import React, { Dispatch, useState } from 'react'; import { Collapse } from '@/new-components/Collapse'; -import { ToolTip } from '@/new-components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import { FaCaretDown, FaCaretRight } from 'react-icons/fa'; @@ -166,7 +166,7 @@ const ConnectionSettingsForm: React.FC = ({
    Root Fields - +
    Type Names - +
    = ({

    Naming Convention - + {text} - - + {tooltip} ); }; @@ -789,18 +781,10 @@ class Permissions extends Component { const isSelected = permissionsState.custom_checked[filterType] || isUniqueFilter; - const customCheckToolTip = ( - - Create custom check using permissions builder - - ); - const customChecklabel = ( - With custom check: - - + With custom check: + ); @@ -849,9 +833,7 @@ class Permissions extends Component { let _limitSection; const rowLimitTooltip = ( - - Set limit on number of rows fetched per request - + ); if (query === 'select') { @@ -883,9 +865,11 @@ class Permissions extends Component { }; const rowPermissionTooltip = ( - - Set permission rule for {getIngForm(permissionsState.query)} rows - + ); const getUpdateFilterOptions = (filterType, disabled = false) => { @@ -1086,9 +1070,11 @@ class Permissions extends Component { }; const colPermissionTooltip = ( - - Choose columns allowed to be {getEdForm(permissionsState.query)} - + ); const colSectionTitle = 'Column ' + query + ' permissions'; @@ -1139,60 +1125,6 @@ class Permissions extends Component { return _columnSection; }; - // const getUpsertSection = () => { - // if (query !== 'insert') { - // return; - // } - // - // const dispatchToggleAllowUpsert = checked => { - // dispatch(permToggleAllowUpsert(checked)); - // }; - // - // const upsertAllowed = permissionsState.insert - // ? permissionsState.insert.allow_upsert - // : false; - // - // const upsertToolTip = ( - // - // Allow upsert queries. Upsert lets you update a row if it already - // exists, otherwise insert it - // - // ); - // - // const upsertStatus = upsertAllowed ? 'enabled' : 'disabled'; - // - // return ( - // - //

    - // - // ); - // }; - const getPresetsSection = action => { if (query !== action) { return; @@ -1489,10 +1421,11 @@ class Permissions extends Component { }; const presetTooltip = ( - - Set static values or session variables as pre-determined values for - columns while {getIngForm(query)} - + ); const presetStatus = !isEmpty(presets) @@ -1541,10 +1474,7 @@ class Permissions extends Component { : false; const aggregationToolTip = ( - - Allow queries with aggregate functions like sum, count, avg, max, - min, etc - + ); const aggregationStatus = aggregationAllowed ? 'enabled' : 'disabled'; @@ -1640,7 +1570,7 @@ class Permissions extends Component { styles.fkInEdit + ' ' + styles.add_mar_right + - ' input-sm form-control' + ' form-control' } value={applyTo[type] || value || ''} onChange={setApplyTo} @@ -1707,9 +1637,7 @@ class Permissions extends Component { let clonePermissionsHtml = null; if (applyToListHtml.length) { const cloneToolTip = ( - - Apply same permissions to other tables/roles/actions - + ); const validApplyToList = permissionsState.applySamePermissions.filter( @@ -1759,10 +1687,11 @@ class Permissions extends Component { return null; } const tooltip = ( - - When enabled, this {permissionsState.query} mutation is accessible - only via "trusted backends" - + ); const isBackendOnly = !!( permissionsState[permissionsState.query] && diff --git a/console/src/components/Services/Data/TablePermissions/utils.tsx b/console/src/components/Services/Data/TablePermissions/utils.tsx index 0f58124f2fb..fd90b5c6593 100644 --- a/console/src/components/Services/Data/TablePermissions/utils.tsx +++ b/console/src/components/Services/Data/TablePermissions/utils.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Tooltip from 'react-bootstrap/lib/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import { getPermissionFilterString } from '../PermissionsSummary/utils'; import { getLegacyOperator, allOperators } from './PermissionBuilder/utils'; @@ -44,9 +44,7 @@ const tooltipMsg: Record = { }; export const getUpdateTooltip = (filterType: FilterType) => ( - - {tooltipMsg[filterType]} - + ); const getOptionsForUpdate = ( diff --git a/console/src/components/Services/Events/Common/Components/RetryConfEditor.tsx b/console/src/components/Services/Events/Common/Components/RetryConfEditor.tsx index b9f964862e7..c1236e5ec9d 100644 --- a/console/src/components/Services/Events/Common/Components/RetryConfEditor.tsx +++ b/console/src/components/Services/Events/Common/Components/RetryConfEditor.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import { ToolTip } from '@/new-components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import { RetryConf } from '../../types'; -import Tooltip from '../../../../Common/Tooltip/Tooltip'; import { inputStyles } from '../../constants'; type Props = { @@ -14,7 +13,6 @@ type RetryInputRowType = { label: string; tooltipProps?: | { - id: string; message: string; } | undefined; @@ -38,9 +36,9 @@ const RetryInputRow = ({
    @@ -57,7 +55,7 @@ const RetryInputRow = ({ }; const RetryConfEditor: React.FC = props => { - const { retryConf, setRetryConf, legacyTooltip = true } = props; + const { retryConf, setRetryConf } = props; const handleRetryConfChange = (e: React.ChangeEvent) => { const label = e.target.name; const value = e.target.value; @@ -78,15 +76,10 @@ const RetryConfEditor: React.FC = props => { placeholder: 'number of retries (default: 0)', onChange: handleRetryConfChange, }} - tooltipProps={ - legacyTooltip - ? { - id: 'retry-conf-num-retries', - message: - 'Number of retries that Hasura makes to the webhook in case of failure', - } - : undefined - } + tooltipProps={{ + message: + 'Number of retries that Hasura makes to the webhook in case of failure', + }} /> = props => { placeholder: 'interval time in seconds (default: 10)', onChange: handleRetryConfChange, }} - tooltipProps={ - legacyTooltip - ? { - id: 'retry-conf-interval-sec', - message: 'Interval (in seconds) between each retry', - } - : undefined - } + tooltipProps={{ + message: 'Interval (in seconds) between each retry"', + }} /> = props => { placeholder: 'timeout in seconds (default: 60)', onChange: handleRetryConfChange, }} - tooltipProps={ - legacyTooltip - ? { - id: 'retry-conf-timeout-sec', - message: 'Request timeout for the webhook', - } - : undefined - } + tooltipProps={{ + message: 'Request timeout for the webhook', + }} /> {/* exists(retryConf.tolerance_sec) ? ( @@ -133,7 +116,7 @@ const RetryConfEditor: React.FC = props => {
    +
    GraphQL server timeout - - + {tooltips.timeoutConf}
    - Remote Schema name * - - +
    + Remote Schema name *{tooltips.schema}
    -
    - GraphQL server URL * - - +
    + GraphQL server URL *{tooltips.graphqlurl}
    Headers for the remote GraphQL server
    -
    -
    +
    Additional headers: - - + {tooltips.additionalHeaders}
    {getTimeoutSection()}
    -
    +
    Comment - - + {tooltips.comment}
    - Remap Field Names{' '} - - + Remap Field Names {tooltip} x.typeName === fieldNameInput?.parentType) diff --git a/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/GraphQLCustomizationEdit.tsx b/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/GraphQLCustomizationEdit.tsx index bc2bbbcbbe8..c6343c8e096 100644 --- a/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/GraphQLCustomizationEdit.tsx +++ b/console/src/components/Services/RemoteSchema/Common/GraphQLCustomization/GraphQLCustomizationEdit.tsx @@ -1,8 +1,6 @@ import React, { useState, useEffect } from 'react'; -import { OverlayTrigger } from 'react-bootstrap'; -import Tooltip from 'react-bootstrap/lib/Tooltip'; import { GraphQLSchema } from 'graphql'; -import { FaQuestionCircle } from 'react-icons/fa'; +import { IconTooltip } from '@/new-components/Tooltip'; import { Button } from '../../../../Common'; import { graphQLCustomization as GType } from '../../types'; import TypeMapping from './TypeMapping'; @@ -156,16 +154,7 @@ const GraphQLCustomizationEdit = ({
    Rename Type Names{' '} - - Type remapping takes precedence to prefixes and suffixes. - - } - > - +
    ; -export const TemplateStories = stories => { - return ( -
    - {Object.entries(stories).map(([storyName, story]) => ( -
    -
    - {storyName} -
    -
    {Template(story)}
    -
    - ))} -
    - ); -}; - export const stories = { 'States - Disabled': { prop1: 'text-gray-400', diff --git a/console/src/features/CronTriggers/components/Form/components/AdvancedSettings.tsx b/console/src/features/CronTriggers/components/Form/components/AdvancedSettings.tsx index 5a565c6c0b2..d59733947d1 100644 --- a/console/src/features/CronTriggers/components/Form/components/AdvancedSettings.tsx +++ b/console/src/features/CronTriggers/components/Form/components/AdvancedSettings.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ToolTip } from '@/new-components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import { InputField, Radio } from '@/new-components/Form'; import { Collapse } from '@/new-components/Collapse'; import { RequestHeadersSelector } from '@/new-components/RequestHeadersSelector'; @@ -21,7 +21,7 @@ export const AdvancedSettings = () => {
    {
    {
    { <>
    - + { <>
    {
    - +
    {/* TODO: This is a horizontal/inline input field, currently we do not have it in common so this component implements its own, @@ -36,7 +36,7 @@ export const RetryConfiguration = () => {
    - +
    {
    - +
    ( const CustomLabel = () => ( With custom check: - + ); diff --git a/console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaTree/components/SubFieldTitle.tsx b/console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaTree/components/SubFieldTitle.tsx index b9b364414ca..9b9c3e035e9 100644 --- a/console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaTree/components/SubFieldTitle.tsx +++ b/console/src/features/RemoteRelationships/RemoteSchemaRelationships/components/RemoteSchemaTree/components/SubFieldTitle.tsx @@ -1,4 +1,4 @@ -import { ToolTip } from '@/new-components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import React from 'react'; type SubFieldTitleProps = { @@ -17,7 +17,7 @@ export const SubFieldTitle = ({
    {!enabled ? ( <> - diff --git a/console/src/features/RemoteSchema/components/Create/Create.tsx b/console/src/features/RemoteSchema/components/Create/Create.tsx index 61780824236..d89d895162d 100644 --- a/console/src/features/RemoteSchema/components/Create/Create.tsx +++ b/console/src/features/RemoteSchema/components/Create/Create.tsx @@ -3,7 +3,7 @@ import { Button } from '@/new-components/Button'; import { FieldError } from 'react-hook-form'; import { Form, InputField } from '@/new-components/Form'; import { useFireNotification } from '@/new-components/Notifications'; -import { ToolTip } from '@/new-components/Tooltip'; +import { IconTooltip } from '@/new-components/Tooltip'; import get from 'lodash.get'; import { APIError } from '@/hooks/error'; import React, { useState } from 'react'; @@ -116,7 +116,7 @@ export const Create = ({ onSuccess }: Props) => {
    { />