PresetSearchBox: Add warning and different cursor

zbycz · Feb 20, 2025 · 8c13f10 · 8c13f10
1 parent 93cd065
commit 8c13f10
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSearchBox.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSearchBox.tsx
@@ -6,6 +6,7 @@ import {
   ListSubheader,
   MenuItem,
   Select,
+  Tooltip,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import styled from '@emotion/styled';
@@ -190,30 +191,40 @@ export const PresetSearchBox = ({ value, setValue, options }: Props) => {
 
   return (
     <>
-      <Select
-        disabled={!enabled}
-        MenuProps={{
-          autoFocus: false,
-          slotProps: { paper: getPaperMaxHeight(selectRef) },
-        }}
-        value={value}
-        onChange={onChange}
-        onClose={() => setSearchText('')}
-        renderValue={() =>
-          renderOption(options.find((o) => o.presetKey === value))
-        }
-        variant="outlined"
-        fullWidth
-        displayEmpty
-        ref={selectRef}
+      <Tooltip
+        title={enabled ? '' : t('editdialog.preset_select.change_type_warning')}
+        arrow
       >
-        <SearchRow onChange={(e) => setSearchText(e.target.value)} />
-        {displayedOptions.map((option) => (
-          <MenuItem key={option} component="li" value={option}>
-            {renderOption(options.find((o) => o.presetKey === option))}
-          </MenuItem>
-        ))}
-      </Select>
+        <Select
+          disabled={!enabled}
+          sx={{
+            '.Mui-disabled': {
+              cursor: 'not-allowed !important',
+            },
+          }}
+          MenuProps={{
+            autoFocus: false,
+            slotProps: { paper: getPaperMaxHeight(selectRef) },
+          }}
+          value={value}
+          onChange={onChange}
+          onClose={() => setSearchText('')}
+          renderValue={() =>
+            renderOption(options.find((o) => o.presetKey === value))
+          }
+          variant="outlined"
+          fullWidth
+          displayEmpty
+          ref={selectRef}
+        >
+          <SearchRow onChange={(e) => setSearchText(e.target.value)} />
+          {displayedOptions.map((option) => (
+            <MenuItem key={option} component="li" value={option}>
+              {renderOption(options.find((o) => o.presetKey === option))}
+            </MenuItem>
+          ))}
+        </Select>
+      </Tooltip>
       {!enabled && (
         // TODO we may warn users that this is not usual operation, if this becomes an issue
         <Box ml={1}>

diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -231,6 +231,7 @@ export default {
   'editdialog.preset_select.placeholder': 'Vyberte typ',
   'editdialog.preset_select.search_placeholder': 'Zadejte hledaný výraz...',
   'editdialog.preset_select.edit_button': 'Upravit',
+  'editdialog.preset_select.change_type_warning': 'Změna typu není obvyklá operace. Pokud tato změna dává smysl, můžete změnit typ tlačítkem vpravo.',
 
   'tags.name': 'Název',
   'tags.description': 'Popis',

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -272,6 +272,8 @@ export default {
   'editdialog.preset_select.placeholder': 'Select the type',
   'editdialog.preset_select.search_placeholder': 'Type to search...',
   'editdialog.preset_select.edit_button': 'Edit',
+  'editdialog.preset_select.change_type_warning':
+    'Changing the type is not usual operation. Consider if this change makes sense and use button on the right to enable.',
 
   'tags.name': 'Name',
   'tags.description': 'Description',