1528 Add tooltip to WfoInlineText edit, fix bug showing empty tooltip

workfloworchestrator · Nov 12, 2024 · c3ba367 · c3ba367
1 parent d0e2b12
commit c3ba367
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 55 deletions.
diff --git a/.changeset/mighty-oranges-swim.md b/.changeset/mighty-oranges-swim.md
@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1528 Add tooltip to WfoInlineText edit, fix bug showing empty tooltip
diff --git a/apps/wfo-ui b/apps/wfo-ui
diff --git a/packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx b/packages/orchestrator-ui-components/src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx
@@ -3,22 +3,27 @@ import type { ChangeEvent, FC } from 'react';
 
 import { EuiInlineEditText } from '@elastic/eui';
 
+import { WfoToolTip } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
 import type { Subscription } from '@/types';
 
 interface WfoInlineNoteEditProps {
     value: Subscription['note'];
     subscriptionId?: Subscription['subscriptionId'];
     onlyShowOnHover?: boolean;
+    onNoteUpdate?: (note: string) => void;
 }
 
 export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
     value,
     subscriptionId,
     onlyShowOnHover = false,
 }) => {
+    const { theme } = useOrchestratorTheme();
     const initialNote = useMemo(() => value || '', [value]);
     const [note, setNote] = useState<string>(initialNote);
+    const [isTooltipVisible, setIsTooltipVisible] = useState<boolean>(true);
 
     const [startProcess] = useStartProcessMutation();
     const triggerNoteModifyWorkflow = () => {
@@ -32,6 +37,16 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
         });
     };
 
+    const handleSave = () => {
+        triggerNoteModifyWorkflow();
+        setIsTooltipVisible(true);
+    };
+
+    const handleCancel = () => {
+        setNote(initialNote);
+        setIsTooltipVisible(true);
+    };
+
     // This useEffect makes sure the note is updated when a new value property is passed in
     // for example by a parent component that is update through a websocket event
     useEffect(() => {
@@ -49,57 +64,74 @@ export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
                 },
             }}
         >
-            <EuiInlineEditText
-                inputAriaLabel="Edit note"
-                value={note}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                    setNote(e.target.value);
-                }}
-                onCancel={() => setNote(initialNote)}
-                onSave={() => triggerNoteModifyWorkflow()}
-                size={'s'}
-                css={{
-                    '.euiFlexItem:nth-of-type(2)': { justifyContent: 'center' },
-                }}
-                readModeProps={{
-                    css: {
-                        '.euiIcon': {
-                            visibility: onlyShowOnHover ? 'hidden' : 'visible',
+            <WfoToolTip
+                css={{ visibility: isTooltipVisible ? 'visible' : 'hidden' }}
+                tooltipContent={note}
+            >
+                <EuiInlineEditText
+                    inputAriaLabel="Edit note"
+                    value={note}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        setNote(e.target.value);
+                    }}
+                    onCancel={handleCancel}
+                    onSave={handleSave}
+                    size={'s'}
+                    css={{
+                        width: theme.base * 16,
+                        '.euiFlexItem:nth-of-type(2)': {
+                            justifyContent: 'center',
                         },
-                    },
-                }}
-                editModeProps={{
-                    saveButtonProps: {
-                        color: 'primary',
-                        size: 'xs',
-                    },
-                    cancelButtonProps: {
-                        color: 'danger',
-                        size: 'xs',
-                    },
-                    inputProps: {
-                        css: {
-                            height: '32px',
-                            paddingLeft: '4px',
-                            margin: '0',
-                            width: '98%',
+                        '.euiButtonEmpty__content': {
+                            justifyContent: 'left',
                         },
-                    },
-                    formRowProps: {
+                    }}
+                    readModeProps={{
+                        onClick: () => setIsTooltipVisible(false),
+                        title: '',
                         css: {
-                            padding: 0,
-                            margin: 0,
-                            height: '32px',
-                            '.euiFormRow__fieldWrapper': {
-                                minHeight: '32px',
+                            minWidth: '100%',
+                            '.euiIcon': {
+                                visibility: onlyShowOnHover
+                                    ? 'hidden'
+                                    : 'visible',
+                            },
+                        },
+                    }}
+                    editModeProps={{
+                        saveButtonProps: {
+                            color: 'primary',
+                            size: 'xs',
+                        },
+                        cancelButtonProps: {
+                            color: 'danger',
+                            size: 'xs',
+                        },
+                        inputProps: {
+                            css: {
+                                justifyContent: 'left',
                                 height: '32px',
+                                paddingLeft: '4px',
+                                margin: '0',
+                                width: '98%',
+                            },
+                        },
+                        formRowProps: {
+                            css: {
                                 padding: 0,
                                 margin: 0,
+                                height: '32px',
+                                '.euiFormRow__fieldWrapper': {
+                                    minHeight: '32px',
+                                    height: '32px',
+                                    padding: 0,
+                                    margin: 0,
+                                },
                             },
                         },
-                    },
-                }}
-            />
+                    }}
+                />
+            </WfoToolTip>
         </div>
     );
 };
diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDataCell.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDataCell.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 
-import { EuiToolTip } from '@elastic/eui';
+import { WfoToolTip } from '@/components';
 
 interface WfoDataCellProps {
     customTooltip: ReactNode;
@@ -12,19 +12,11 @@ export const WfoDataCell: FC<WfoDataCellProps> = ({
     children,
 }) => {
     const tooltipContent =
-        customTooltip || (typeof children === 'string' ? children : <></>);
+        customTooltip || (typeof children === 'string' ? children : null);
 
     if (tooltipContent) {
         return (
-            <EuiToolTip
-                position="bottom"
-                delay="long"
-                content={tooltipContent}
-                css={{ maxWidth: 'fit-content' }}
-                repositionOnScroll
-            >
-                <>{children}</>
-            </EuiToolTip>
+            <WfoToolTip tooltipContent={tooltipContent}>{children}</WfoToolTip>
         );
     }
     return <>{children}</>;

diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoToolTip.tsx b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoToolTip.tsx
@@ -0,0 +1,28 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiToolTip } from '@elastic/eui';
+
+interface WfoToolTipProps {
+    tooltipContent: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+
+export const WfoToolTip: FC<WfoToolTipProps> = ({
+    tooltipContent,
+    children,
+    className,
+}) => {
+    return (
+        <EuiToolTip
+            className={className}
+            position="bottom"
+            delay="long"
+            content={tooltipContent}
+            css={{ maxWidth: 'fit-content' }}
+            repositionOnScroll
+        >
+            <div>{children}</div>
+        </EuiToolTip>
+    );
+};
diff --git a/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/index.ts b/packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/index.ts
@@ -13,3 +13,4 @@ export * from './WfoTableHeaderCell';
 
 export * from './WfoTruncateCell';
 export * from './WfoDataCell';
+export * from './WfoToolTip';
+5 −5		package-lock.json
+1 −1		package.json
+27 −0		translations/README.md
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,3 +13,4 @@ export * from './WfoTableHeaderCell';

		export * from './WfoTruncateCell';
		export * from './WfoDataCell';
		export * from './WfoToolTip';