feat(12618): add tooltips for layers panel buttons on kontur apps

src/components/Layer/DownloadControl/DownloadControl.tsx

@@ -1,13 +1,11 @@
 import { Download16 } from '@konturio/default-icons';
-import s from './DownloadControl.module.css';
+import { i18n } from '~core/localization';
+import { LayerActionIcon } from '~components/LayerActionButton/LayerActionIcon';
 
-export function DownloadControl({ startDownload }: { startDownload: () => any }) {
-  function downloadLayer() {
-    startDownload();
-  }
+export function DownloadControl({ startDownload }: { startDownload: () => void }) {
   return (
-    <div className={s.download} onClick={downloadLayer}>
+    <LayerActionIcon onClick={startDownload} hint={i18n.t('tooltips.download')}>
       <Download16 />
-    </div>
+    </LayerActionIcon>
   );
 }

src/components/Layer/EditControl/EditControl.tsx

@@ -1,7 +1,9 @@
 import { Edit16 } from '@konturio/default-icons';
 import { useAtom } from '@reatom/react-v2';
+import { useCallback } from 'react';
 import { FeatureFlag, featureFlagsAtom } from '~core/shared_state';
-import style from './EditControl.module.css';
+import { i18n } from '~core/localization';
+import { LayerActionIcon } from '~components/LayerActionButton/LayerActionIcon';
 import type {
   LogicalLayerActions,
   LogicalLayerState,
@@ -15,16 +17,18 @@ export function EditControl({
   layerActions: LogicalLayerActions;
 }) {
   const [featureFlags] = useAtom(featureFlagsAtom);
-  async function editLayer() {
+
+  const editLayer = useCallback(async () => {
     if (layerState.style?.type === 'mcda' && featureFlags[FeatureFlag.MCDA]) {
       import('~features/mcda').then(async ({ editMCDA }) => {
         editMCDA(layerState, layerActions);
       });
     }
-  }
+  }, [featureFlags, layerActions, layerState]);
+
   return (
-    <div className={style.edit} onClick={editLayer}>
+    <LayerActionIcon onClick={editLayer} hint={i18n.t('tooltips.edit')}>
       <Edit16 />
-    </div>
+    </LayerActionIcon>
   );
 }

src/components/Layer/EraseControl/CleanControl.tsx

@@ -1,18 +1,13 @@
 import { Rubber16 } from '@konturio/default-icons';
 import { useCallback } from 'react';
-import style from './CleanControl.module.css';
+import { i18n } from '~core/localization';
+import { LayerActionIcon } from '~components/LayerActionButton/LayerActionIcon';
 import type {
   LogicalLayerActions,
   LogicalLayerState,
 } from '~core/logical_layers/types/logicalLayer';
 
-export function CleanControl({
-  layerState,
-  layerActions,
-}: {
-  layerState: LogicalLayerState;
-  layerActions: LogicalLayerActions;
-}) {
+export function CleanControl({ layerActions }: { layerActions: LogicalLayerActions }) {
   const cleanLayer = useCallback(
     async function () {
       if (layerActions?.clean) {
@@ -23,8 +18,8 @@ export function CleanControl({
   );
 
   return (
-    <div className={style.clean} onClick={cleanLayer}>
+    <LayerActionIcon onClick={cleanLayer} hint={i18n.t('tooltips.erase')}>
       <Rubber16 />
-    </div>
+    </LayerActionIcon>
   );
 }

src/components/Layer/useControlElements.tsx

@@ -55,11 +55,7 @@ export function useControlElements({
       layerState?.id === REFERENCE_AREA_LOGICAL_LAYER_ID
     ) {
       elements.push(
-        <CleanControl
-          layerState={layerState}
-          layerActions={layerActions}
-          key={layerState.id + 'clean'}
-        />,
+        <CleanControl layerActions={layerActions} key={layerState.id + 'clean'} />,
       );
     }
     if (

src/components/LayerHideControl/LayerHideControl.module.css → src/components/LayerActionButton/LayerActionButton.module.css

@@ -1,7 +1,6 @@
-.hideLogo,
-.unhideLogo {
-  color: var(--faint-strong);
+.actionButton {
+  cursor: pointer;
   display: flex;
   align-items: center;
-  cursor: pointer;
+  color: var(--faint-strong);
 }

src/components/LayerActionButton/LayerActionIcon.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent } from '~core/tooltips';
+import style from './LayerActionButton.module.css';
+import type { PropsWithChildren } from 'react';
+
+interface LayerActionButtonProps {
+  onClick: () => void;
+  hint: string;
+  className?: string;
+}
+
+export function LayerActionIcon({
+  onClick,
+  hint,
+  children,
+  className,
+}: PropsWithChildren<LayerActionButtonProps>) {
+  const [isOpen, setIsOpen] = useState<boolean>();
+
+  function onKeyUp(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (event.key === 'Enter') {
+      onClick();
+    }
+  }
+
+  return (
+    <Tooltip placement="top" open={isOpen}>
+      <TooltipTrigger asChild>
+        <div
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setIsOpen(false)}
+          onMouseEnter={() => setIsOpen(true)}
+          onMouseLeave={() => setIsOpen(false)}
+          onKeyUp={onKeyUp}
+          className={clsx(style.actionButton, className)}
+          onClick={onClick}
+          tabIndex={0}
+        >
+          {children}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{hint}</TooltipContent>
+    </Tooltip>
+  );
+}

src/components/LayerHideControl/LayerHideControl.tsx

@@ -1,5 +1,6 @@
 import { Eye16, EyeOff16 } from '@konturio/default-icons';
-import s from './LayerHideControl.module.css';
+import { i18n } from '~core/localization';
+import { LayerActionIcon } from '~components/LayerActionButton/LayerActionIcon';
 
 type LayerHideControlType = {
   isVisible: boolean;
@@ -14,15 +15,15 @@ export function LayerHideControl({
 }: LayerHideControlType) {
   if (isVisible) {
     return (
-      <div onClick={hideLayer} className={s.hideLogo}>
+      <LayerActionIcon onClick={hideLayer} hint={i18n.t('tooltips.hide')}>
         <Eye16 />
-      </div>
+      </LayerActionIcon>
     );
   }
 
   return (
-    <div onClick={unhideLayer} className={s.unhideLogo}>
+    <LayerActionIcon onClick={unhideLayer} hint={i18n.t('tooltips.show')}>
       <EyeOff16 />
-    </div>
+    </LayerActionIcon>
   );
 }

src/core/localization/translations/en/common.json

@@ -31,6 +31,13 @@
     "selected_area_label": "Selected area",
     "upload_mcda": "Upload MCDA"
   },
+  "tooltips": {
+    "erase": "Erase",
+    "download": "Download",
+    "edit": "Edit",
+    "hide": "Hide",
+    "show": "Show"
+  },
   "feed": "Feed",
   "deselect": "Deselect",
   "spinner_text": "Gathering data",

src/features/mcda/components/MCDALayerEditor/MCDALayerParameters/MCDALayerParameters.tsx

@@ -8,6 +8,11 @@ import { TooltipTrigger } from '~components/TooltipTrigger';
 import { LAYERS_PANEL_FEATURE_ID } from '~features/layers_panel/constants';
 import { isNumber } from '~utils/common';
 import { bivariateStatisticsResourceAtom } from '~core/resources/bivariateStatisticsResource';
+import {
+  Tooltip,
+  TooltipTrigger as TooltipTriggerV2,
+  TooltipContent,
+} from '~core/tooltips';
 import { Sentiments } from '../Sentiments';
 import { MCDALayerParameterRow } from './MCDALayerParameterRow/MCDALayerParameterRow';
 import s from './MCDALayerParameters.module.css';
@@ -218,14 +223,19 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
           <div>{layer.name}</div>
           <div className={s.layerButtons}>
             {!editMode && (
-              <div
-                className={s.editButton}
-                onClick={() => {
-                  setEditMode(true);
-                }}
-              >
-                <Edit16 />
-              </div>
+              <Tooltip placement="top">
+                <TooltipTriggerV2 asChild>
+                  <div
+                    className={s.editButton}
+                    onClick={() => {
+                      setEditMode(true);
+                    }}
+                  >
+                    <Edit16 />
+                  </div>
+                </TooltipTriggerV2>
+                <TooltipContent>{i18n.t('tooltips.edit')}</TooltipContent>
+              </Tooltip>
             )}
             <TooltipTrigger
               className={s.infoButton}