feat: tooltip for non-translatable terms

Author: Anty0

webapp/src/ee/glossary/components/GlossaryListTranslationCell.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Button, styled } from '@mui/material';
+import { Button, styled, Tooltip } from '@mui/material';
 import React from 'react';
 import { GlossaryListStyledRowCell } from 'tg.ee.module/glossary/components/GlossaryListStyledRowCell';
 import { components } from 'tg.service/apiSchema.generated';
@@ -51,6 +51,7 @@ type Props = {
   translation?: GlossaryTermTranslationModel;
   languageTag: string;
   editEnabled: boolean;
+  editDisabledReason?: React.ReactNode;
   isEditing?: boolean;
   onEdit?: () => void;
   onCancel?: () => void;
@@ -64,6 +65,7 @@ export const GlossaryListTranslationCell: React.VFC<Props> = ({
   translation,
   languageTag,
   editEnabled,
+  editDisabledReason,
   isEditing,
   onEdit,
   onCancel,
@@ -109,51 +111,53 @@ export const GlossaryListTranslationCell: React.VFC<Props> = ({
   const onHandleEdit = editEnabled && !isEditing ? handleEdit : undefined;
 
   return (
-    <StyledRowTranslationCell
-      className={clsx({
-        clickable: editEnabled,
-        editing: isEditing,
-      })}
-      onClick={onHandleEdit}
-    >
-      {!isEditing ? (
-        <Box overflow="hidden" gridArea="text">
-          <LimitedHeightText maxLines={3}>
-            {translation?.text}
-          </LimitedHeightText>
-        </Box>
-      ) : (
-        <StyledEditBox>
-          <TextField
-            onChange={(e) => {
-              setValue(e.target.value);
-            }}
-            value={value}
-            multiline
-            minRows={3}
-            autoFocus
-          />
-          <StyledControls>
-            <Button
-              onClick={onCancel}
-              color="primary"
-              variant="outlined"
-              size="small"
-            >
-              <T keyName="translate_glossary_term_cell_cancel" />
-            </Button>
-            <LoadingButton
-              onClick={save}
-              color="primary"
-              size="small"
-              variant="contained"
-              loading={isSaveLoading}
-            >
-              <T keyName="translate_glossary_term_cell_save" />
-            </LoadingButton>
-          </StyledControls>
-        </StyledEditBox>
-      )}
-    </StyledRowTranslationCell>
+    <Tooltip title={!editEnabled && editDisabledReason} placement="bottom">
+      <StyledRowTranslationCell
+        className={clsx({
+          clickable: editEnabled,
+          editing: isEditing,
+        })}
+        onClick={onHandleEdit}
+      >
+        {!isEditing ? (
+          <Box overflow="hidden" gridArea="text">
+            <LimitedHeightText maxLines={3}>
+              {translation?.text}
+            </LimitedHeightText>
+          </Box>
+        ) : (
+          <StyledEditBox>
+            <TextField
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              value={value}
+              multiline
+              minRows={3}
+              autoFocus
+            />
+            <StyledControls>
+              <Button
+                onClick={onCancel}
+                color="primary"
+                variant="outlined"
+                size="small"
+              >
+                <T keyName="translate_glossary_term_cell_cancel" />
+              </Button>
+              <LoadingButton
+                onClick={save}
+                color="primary"
+                size="small"
+                variant="contained"
+                loading={isSaveLoading}
+              >
+                <T keyName="translate_glossary_term_cell_save" />
+              </LoadingButton>
+            </StyledControls>
+          </StyledEditBox>
+        )}
+      </StyledRowTranslationCell>
+    </Tooltip>
   );
 };

webapp/src/ee/glossary/components/GlossaryViewListRow.tsx

@@ -4,6 +4,7 @@ import { components } from 'tg.service/apiSchema.generated';
 import { GlossaryListTranslationCell } from 'tg.ee.module/glossary/components/GlossaryListTranslationCell';
 import { GlossaryListTermCell } from 'tg.ee.module/glossary/components/GlossaryListTermCell';
 import { SelectionService } from 'tg.service/useSelectionService';
+import { T } from '@tolgee/react';
 
 type GlossaryTermWithTranslationsModel =
   components['schemas']['GlossaryTermWithTranslationsModel'];
@@ -68,6 +69,11 @@ export const GlossaryViewListRow: React.VFC<Props> = ({
             translation={translation}
             languageTag={tag}
             editEnabled={editEnabled && !item.flagNonTranslatable}
+            editDisabledReason={
+              item.flagNonTranslatable && (
+                <T keyName="glossary_term_edit_disabled_non_translatable_tooltip" />
+              )
+            }
             isEditing={editingTermId === item.id && editingLanguageTag === tag}
             onEdit={() => onEditTranslation(item.id, tag)}
             onCancel={() => onEditTranslation(item.id, undefined)}