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

src/components/Layer/DownloadControl/DownloadControl.tsx

@@ -1,13 +1,14 @@
 import { Download16 } from '@konturio/default-icons';
-import s from './DownloadControl.module.css';
+import { i18n } from '~core/localization';
+import { LayerActionIcon } from '~components/LayerActionIcon/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('layer_actions.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/LayerActionIcon/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('layer_actions.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/LayerActionIcon/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('layer_actions.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/LayerActionIcon/LayerActionIcon.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/LayerActionIcon/LayerActionIcon.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import { useState } from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent } from '~core/tooltips';
+import style from './LayerActionIcon.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/LayerActionIcon/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('layer_actions.tooltips.hide')}>
         <Eye16 />
-      </div>
+      </LayerActionIcon>
     );
   }
 
   return (
-    <div onClick={unhideLayer} className={s.unhideLogo}>
+    <LayerActionIcon onClick={unhideLayer} hint={i18n.t('layer_actions.tooltips.show')}>
       <EyeOff16 />
-    </div>
+    </LayerActionIcon>
   );
 }

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

@@ -31,6 +31,15 @@
     "selected_area_label": "Selected area",
     "upload_mcda": "Upload MCDA"
   },
+  "layer_actions": {
+    "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.module.css

@@ -128,6 +128,7 @@
   cursor: pointer;
   color: var(--accent-strong);
   visibility: hidden;
+  align-items: flex-start;
 }
 
 .layer:hover .editButton {

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

@@ -7,6 +7,7 @@ import { i18n } from '~core/localization';
 import { LAYERS_PANEL_FEATURE_ID } from '~features/layers_panel/constants';
 import { isNumber } from '~utils/common';
 import { bivariateStatisticsResourceAtom } from '~core/resources/bivariateStatisticsResource';
+import { LayerActionIcon } from '~components/LayerActionIcon/LayerActionIcon';
 import { LayerInfo } from '~components/LayerInfo/LayerInfo';
 import { Sentiments } from '../Sentiments';
 import { MCDALayerParameterRow } from './MCDALayerParameterRow/MCDALayerParameterRow';
@@ -224,21 +225,24 @@ export function MCDALayerParameters({ layer, onLayerEdited }: MCDALayerLegendPro
     }
   }, [axes.loading, axisDefaultRange, layer]);
 
+  const editLayer = useCallback(() => {
+    setEditMode(true);
+  }, []);
+
   return (
     <div className={s.editor}>
       <div key={layer.id} className={s.layer}>
         <div className={s.layerHeader}>
           <div>{layer.name}</div>
           <div className={s.layerButtons}>
             {!editMode && (
-              <div
+              <LayerActionIcon
+                onClick={editLayer}
+                hint={i18n.t('layer_actions.tooltips.edit')}
                 className={s.editButton}
-                onClick={() => {
-                  setEditMode(true);
-                }}
               >
                 <Edit16 />
-              </div>
+              </LayerActionIcon>
             )}
             <LayerInfo
               className={s.infoButton}