EPMRPP-114403 || Change display of disabled options in organization settings and project settings dropdowns (#288)

* EPMRPP-114403 || Change the display of disabled options in Organization settings and Project settings dropdowns

* fix: change background-color

* EPMRPP-114403 || Change the display of disabled options in Organization settings and Project settings dropdowns

* fix: fix AI message

* fix: show tooltip only for disabled keep-period options

---------

Co-authored-by: Diana Abdykassenova <diana_abdykassenova@epam.com>

Author: Diana2886

src/components/dropdown/dropdown.tsx

@@ -661,7 +661,7 @@ export const Dropdown: FC<DropdownProps> = ({
     const { keyCode } = event;
     if (keyCode === KeyCodes.ENTER_KEY_CODE || keyCode === KeyCodes.SPACE_KEY_CODE) {
       const option = selectableOptions[highlightedIndex];
-      if (!option) {
+      if (!option || option.disabled) {
         return;
       }
       if (multiSelect) {

src/components/dropdown/dropdownOption/dropdownOption.tsx

@@ -23,6 +23,9 @@ export const DropdownOption: FC<DropdownOptionProps> = forwardRef(
 
     const onChangeHandler: MouseEventHandler<HTMLDivElement | HTMLInputElement> = (e) => {
       const target = e.target as HTMLElement;
+      if (disabled) {
+        return;
+      }
       if (
         target.closest('label') &&
         !(target instanceof HTMLInputElement || target instanceof HTMLDivElement)
@@ -32,7 +35,7 @@ export const DropdownOption: FC<DropdownOptionProps> = forwardRef(
       onChange?.(value);
     };
 
-    return (
+    const optionElement = (
       <div
         className={cx('dropdown-option', {
           selected,
@@ -43,7 +46,7 @@ export const DropdownOption: FC<DropdownOptionProps> = forwardRef(
           'has-children': hasChildren,
           [`depth-${depth}`]: depth > 0,
         })}
-        title={title}
+        title={!disabled ? title : undefined}
         onClick={onChangeHandler}
         ref={ref}
         onMouseEnter={onMouseEnter}
@@ -58,5 +61,12 @@ export const DropdownOption: FC<DropdownOptionProps> = forwardRef(
         </div>
       </div>
     );
+
+    if (disabled && title) {
+      // Disabled option root has pointer-events: none; wrapper keeps native title tooltip available.
+      return <div title={title}>{optionElement}</div>;
+    }
+
+    return optionElement;
   },
 );