Repository: epam/ai-dial-chat
Pull request #3743: feat(chat): remove unnecessary tooltips from modals (Issues #3713, #1689)
Author: login: Derikyan
Labels: name: enhancement
description: New feature or request
Created: 2025-04-29T11:11:14Z | Merged: 2025-04-30T11:48:06Z

**Description:**

Remove tooltip for titles of modal forms if do not contain any content's name.
An unnecessary tooltip appears on the confirmation pop-up when deleting chats, prompts, or messages.

Issues:

- Issue #1689 
- Issue #3713 

**Checklist:**

- [x] the pull request name complies with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
- [x] the pull request name starts with `fix(<scope>):`, `feat(<scope>):`, `feature(<scope>):`, `chore(<scope>):`, `hotfix(<scope>):` or `e2e(<scope>):`. If contains breaking changes then the pull request name must start with `fix(<scope>)!:`, `feat(<scope>)!:`, `feature(<scope>)!:`, `chore(<scope>)!:`, `hotfix(<scope>)!:` or `e2e(<scope>)!:` where `<scope>` is name of affected project: `chat`, `chat-e2e`, `overlay`, `shared`, `sandbox-overlay`, etc.
- [x] the pull request name ends with `(Issue #<TICKET_ID>)` (comma-separated list of issues)
- [x] I confirm that do not share any confidential information like API keys or any other secrets and private URLs



Diff:
diff --git a/apps/chat-e2e/src/tests/sharedChatIcons.test.ts b/apps/chat-e2e/src/tests/sharedChatIcons.test.ts
index ea26609f7c..6bcc5f4048 100644
--- a/apps/chat-e2e/src/tests/sharedChatIcons.test.ts
+++ b/apps/chat-e2e/src/tests/sharedChatIcons.test.ts
@@ -826,7 +826,6 @@ dialTest(
     page,
     localStorageManager,
     confirmationDialogAssertion,
-    tooltipAssertion,
     chatBarFolderAssertion,
     shareApiAssertion,
   }) => {
@@ -915,11 +914,6 @@ dialTest(
         expect
           .soft(chatNameOverflowProp[0], ExpectedMessages.entityNameIsTruncated)
           .toBe(Overflow.breakWord);
-
-        await confirmationDialog.entityName.hoverOver();
-        await tooltipAssertion.assertTooltipContent(
-          ExpectedConstants.removeAccessTitle,
-        );
       },
     );
 
diff --git a/apps/chat/src/components/Chat/ChatMessage/MessageSchema/FormSchema.tsx b/apps/chat/src/components/Chat/ChatMessage/MessageSchema/FormSchema.tsx
index d65e889d15..8c09765d42 100644
--- a/apps/chat/src/components/Chat/ChatMessage/MessageSchema/FormSchema.tsx
+++ b/apps/chat/src/components/Chat/ChatMessage/MessageSchema/FormSchema.tsx
@@ -314,6 +314,7 @@ const ButtonsProperty = ({
 
       <ConfirmDialog
         isOpen={!!confirmation}
+        showHeadingTooltip
         heading={t(
           confirmation?.[DialSchemaProperties.DialWidgetOptions]
             ?.confirmationMessage ?? '',
diff --git a/apps/chat/src/components/Common/ConfirmDialog.tsx b/apps/chat/src/components/Common/ConfirmDialog.tsx
index 84e5253bc7..83d552aa82 100644
--- a/apps/chat/src/components/Common/ConfirmDialog.tsx
+++ b/apps/chat/src/components/Common/ConfirmDialog.tsx
@@ -13,6 +13,7 @@ interface Props {
   confirmLabel: string;
   cancelLabel?: string | null;
   headingClassName?: string;
+  showHeadingTooltip?: boolean;
   onClose: (isConfirmed: boolean) => void;
 }
 
@@ -24,6 +25,7 @@ export const ConfirmDialog = ({
   cancelLabel,
   isOpen,
   onClose,
+  showHeadingTooltip,
 }: Props) => {
   const confirmLabelRef = useRef<HTMLButtonElement>(null);
 
@@ -56,6 +58,7 @@ export const ConfirmDialog = ({
       hideClose
       heading={heading}
       headingClassName={headingClassName}
+      showHeadingTooltip={showHeadingTooltip}
     >
       <div className="flex flex-col justify-between gap-4">
         <div className="flex w-full flex-col gap-2 text-start">
diff --git a/apps/chat/src/components/Common/Modal.tsx b/apps/chat/src/components/Common/Modal.tsx
index c8e4a9d396..8128ead7ca 100644
--- a/apps/chat/src/components/Common/Modal.tsx
+++ b/apps/chat/src/components/Common/Modal.tsx
@@ -39,6 +39,7 @@ export interface Props extends FormHTMLAttributes<HTMLFormElement> {
   containerClassName: string;
   lockScroll?: boolean;
   hideClose?: boolean;
+  showHeadingTooltip?: boolean;
   dismissProps?: UseDismissProps;
   form?: {
     noValidate: boolean;
@@ -65,6 +66,7 @@ function ModalView({
   onKeyDownOverlay,
   dismissProps,
   form,
+  showHeadingTooltip = false,
 }: Props) {
   const { refs, context } = useFloating({
     open: state !== ModalState.CLOSED && !!state,
@@ -133,6 +135,7 @@ function ModalView({
                   <Tooltip
                     contentClassName="max-w-[400px] break-words"
                     tooltip={heading}
+                    hideTooltip={!showHeadingTooltip}
                   >
                     <div
                       className="line-clamp-2 w-full break-words"
diff --git a/apps/chat/src/components/Common/OptionsDialog.tsx b/apps/chat/src/components/Common/OptionsDialog.tsx
deleted file mode 100644
index ffb4f4b663..0000000000
--- a/apps/chat/src/components/Common/OptionsDialog.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useId } from 'react';
-
-import classNames from 'classnames';
-
-import { ModalState } from '@/src/types/modal';
-
-import { OUTSIDE_PRESS_AND_MOUSE_EVENT } from '@/src/constants/modal';
-
-import { Modal } from '@/src/components/Common/Modal';
-
-const fakeCloseHandler = () => undefined;
-
-interface Props {
-  isOpen: boolean;
-  heading: string;
-  options: {
-    label: string;
-    dataQa: string;
-    className?: string;
-    onClick: () => void;
-  }[];
-  description?: string;
-  headingClassName?: string;
-  onClose?: () => void;
-}
-
-export const OptionsDialog = ({
-  heading,
-  headingClassName,
-  description,
-  isOpen,
-  onClose,
-  options,
-}: Props) => {
-  const descriptionId = useId();
-
-  return (
-    <Modal
-      portalId="theme-main"
-      state={isOpen ? ModalState.OPENED : ModalState.CLOSED}
-      onClose={onClose ?? fakeCloseHandler}
-      dataQa="options-dialog"
-      containerClassName="inline-block w-full min-w-[90%] px-3 py-4 md:p-6 text-center md:min-w-[300px] md:max-w-[500px]"
-      dismissProps={OUTSIDE_PRESS_AND_MOUSE_EVENT}
-      hideClose={!onClose}
-      heading={heading}
-      headingClassName={headingClassName}
-    >
-      <div className="flex flex-col justify-between gap-4">
-        <div className="flex w-full flex-col gap-2 text-start">
-          <div>
-            {description && (
-              <p
-                id={descriptionId}
-                data-qa="confirm-message"
-                className="whitespace-pre-wrap break-words text-secondary"
-              >
-                {description}
-              </p>
-            )}
-          </div>
-        </div>
-        <div className="flex w-full items-center justify-end gap-3">
-          {options.map((option) => (
-            <button
-              key={option.label}
-              className={classNames('button button-primary', option.className)}
-              onClick={option.onClick}
-              data-qa={option.dataQa}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    </Modal>
-  );
-};
diff --git a/apps/chat/src/components/Files/FileItem.tsx b/apps/chat/src/components/Files/FileItem.tsx
index 17562353d1..63e6d7b9d9 100644
--- a/apps/chat/src/components/Files/FileItem.tsx
+++ b/apps/chat/src/components/Files/FileItem.tsx
@@ -291,6 +291,7 @@ export const FileItem = ({
       {isRemoveAccessConfirmOpened && (
         <ConfirmDialog
           isOpen={isRemoveAccessConfirmOpened}
+          showHeadingTooltip
           heading={t('Confirm removing access: {{fileName}}', {
             fileName: item.name,
           })}
diff --git a/apps/chat/src/components/Folder/Folder.tsx b/apps/chat/src/components/Folder/Folder.tsx
index 5c9f884b3d..2b92f78699 100644
--- a/apps/chat/src/components/Folder/Folder.tsx
+++ b/apps/chat/src/components/Folder/Folder.tsx
@@ -1358,6 +1358,7 @@ const Folder = <T extends ConversationInfo | PromptInfo | DialFile>({
       {onUnshareFolder && (
         <ConfirmDialog
           isOpen={isUnshareConfirmDialog}
+          showHeadingTooltip
           heading={t('Confirm unsharing: {{folderName}}', {
             folderName: currentFolder.name,
           })}


Reviews:
user: login: nartovm
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T15:46:12Z
user: login: irinakartun
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T15:47:39Z
user: login: IlyaBondar
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:08:48Z
user: login: IlyaBondar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:19:10Z
user: login: IlyaBondar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:21:25Z
user: login: IlyaBondar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:28:41Z
user: login: IlyaBondar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:30:40Z
user: login: IlyaBondar
body: How many `ConfirmDialog` or `Modal` have to have the tooltip?
It looks like instead of `hideHeadingTooltip` we need to `showHeaderTooltip`(=false by default) - because we have only small count of dialogs where we need a tooltip.
Please, refactor it to descrease complexity and code lines
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T17:32:50Z
user: login: IlyaBondar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T10:34:49Z
user: login: IlyaBondar
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T10:39:27Z
user: login: IlyaBondar
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T11:04:28Z
user: login: nartovm
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T11:48:04Z

Review comments:
diff_hunk: @@ -102,6 +102,7 @@ export const UserDesktop = Inversify.register('UserDesktop', () => {
       </Menu>
       <ConfirmDialog
         isOpen={isLogoutConfirmationOpened}
+        hideHeadingTooltip
path: apps/chat/src/components/Header/User/UserDesktop.tsx
user: login: IlyaBondar
body: How many `ConfirmDialog` have to have the tooltip?
It looks like instead of `hideHeadingTooltip` we need to `showHeaderTooltip`(=false by default) - because we have only small count of dialogs where we need a tooltip
created_at: 2025-04-29T17:19:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -102,6 +102,7 @@ export const UserDesktop = Inversify.register('UserDesktop', () => {
       </Menu>
       <ConfirmDialog
         isOpen={isLogoutConfirmationOpened}
+        hideHeadingTooltip
path: apps/chat/src/components/Header/User/UserDesktop.tsx
user: login: IlyaBondar
body: e.g. `Confirm deleting ${deleteTerm} prompts` also should be without tooltip
created_at: 2025-04-29T17:21:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -102,6 +102,7 @@ export const UserDesktop = Inversify.register('UserDesktop', () => {
       </Menu>
       <ConfirmDialog
         isOpen={isLogoutConfirmationOpened}
+        hideHeadingTooltip
path: apps/chat/src/components/Header/User/UserDesktop.tsx
user: login: IlyaBondar
body: I found only 3 `ConfirmDialog` which should be with tooltip. It's much better enable it obviosly only for these 3 instead disabling it for a lot of others (decrease complexity and code lines)
created_at: 2025-04-29T17:28:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -102,6 +102,7 @@ export const UserDesktop = Inversify.register('UserDesktop', () => {
       </Menu>
       <ConfirmDialog
         isOpen={isLogoutConfirmationOpened}
+        hideHeadingTooltip
path: apps/chat/src/components/Header/User/UserDesktop.tsx
user: login: IlyaBondar
body: The same question about `Modal`
created_at: 2025-04-29T17:30:40Z
author_association: CONTRIBUTOR
diff_hunk: @@ -235,6 +235,7 @@ export const ChatbarSettings = () => {
 
       <ConfirmDialog
         isOpen={isClearModalOpen}
+        hasHeadingTooltip
path: apps/chat/src/components/Chatbar/ChatbarSettings.tsx
user: login: IlyaBondar
body: don't need tooltip here. `deleteTerm` is `all` or `selected` i.e. short phrase
created_at: 2025-04-30T10:32:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -137,6 +137,7 @@ export function PromptbarSettings() {
 
       <ConfirmDialog
         isOpen={isClearModalOpen}
+        hasHeadingTooltip
path: apps/chat/src/components/Promptbar/components/PromptbarSettings.tsx
user: login: IlyaBondar
body: don't need tooltip here. `deleteTerm` is `all` or `selected` i.e. short phrase
created_at: 2025-04-30T10:33:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -456,6 +456,7 @@ export const TabRenderer = () => {
       {!!deleteModel && (
         <ConfirmDialog
           isOpen
+          hasHeadingTooltip
path: apps/chat/src/components/Marketplace/TabRenderer.tsx
user: login: IlyaBondar
body: there is very short `heading` and don't need tooltip
created_at: 2025-04-30T10:39:24Z
author_association: CONTRIBUTOR

PR comments:
user: login: Derikyan
created_at: 2025-04-29T11:11:30Z
body: /deploy-review
>Environment: [review-environment](https://chat-ai-dial-chat-pr-3743.nightly-test.deltixhub.io) | [pipeline](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/pipelines/603214)
>Overlay E2E tests status: [success](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/jobs/1814338)
>Chat E2E tests status: [failed](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/jobs/1814337)
author_association: CONTRIBUTOR
user: login: nartovm
created_at: 2025-04-29T15:40:10Z
body: /deploy-review
>- **Deployment failed**: [canceled](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/pipelines/603383)
author_association: CONTRIBUTOR
user: login: nartovm
created_at: 2025-04-29T15:45:58Z
body: /deploy-review
>Environment: [review-environment](https://chat-ai-dial-chat-pr-3743.nightly-test.deltixhub.io) | [pipeline](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/pipelines/603388)
>Overlay E2E tests status: [success](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/jobs/1815268)
>Chat E2E tests status: [success](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/jobs/1815267)
author_association: CONTRIBUTOR
user: login: Derikyan
created_at: 2025-04-30T10:56:52Z
body: /deploy-review
>Environment: [review-environment](https://chat-ai-dial-chat-pr-3743.nightly-test.deltixhub.io) | [pipeline](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/pipelines/603645)
>Overlay E2E tests status: [success](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/jobs/1816923)
>Chat E2E tests status: [success](https://gitlab.deltixhub.com/Clients/deltix/nightly-test/dial/review/-/jobs/1816922)
author_association: CONTRIBUTOR