Add a tooltip to the disabled Rich Text toggle (#11843)

GitOrigin-RevId: e7be96c68d87ab1f1ed40c8e9784160689ee8e96

services/web/frontend/extracted-translations.json

@@ -636,6 +636,7 @@
   "review": "",
   "revoke": "",
   "revoke_invite": "",
+  "rich_text_is_only_available_for_tex_files": "",
   "role": "",
   "save_money_groups_companies_research_organizations_can_save_money": "",
   "save_or_cancel-cancel": "",

services/web/frontend/js/features/source-editor/components/editor-switch.tsx

@@ -1,10 +1,11 @@
-import { memo, useCallback } from 'react'
+import { ChangeEvent, FC, memo, useCallback } from 'react'
 import useScopeValue from '../../../shared/hooks/use-scope-value'
 import Tooltip from '../../../shared/components/tooltip'
 import { sendMB } from '../../../infrastructure/event-tracking'
 import getMeta from '../../../utils/meta'
 import SplitTestBadge from '../../../shared/components/split-test-badge'
 import isValidTeXFile from '../../../main/is-valid-tex-file'
+import { useTranslation } from 'react-i18next'
 
 function Badge() {
   const content = (
@@ -130,22 +131,11 @@ function EditorSwitch() {
           </>
         ) : null}
 
-        <input
-          type="radio"
-          name="editor"
-          value="rich-text"
-          id="editor-switch-rich-text"
-          className="toggle-switch-input"
+        <RichTextToggle
           checked={!!richTextOrVisual}
-          onChange={handleChange}
           disabled={!richTextAvailable}
+          handleChange={handleChange}
         />
-        <label
-          htmlFor="editor-switch-rich-text"
-          className="toggle-switch-label"
-        >
-          <span>Rich Text</span>
-        </label>
       </fieldset>
 
       {!!richTextOrVisual && (
@@ -155,4 +145,45 @@ function EditorSwitch() {
   )
 }
 
+const RichTextToggle: FC<{
+  checked: boolean
+  disabled: boolean
+  handleChange: (event: ChangeEvent<HTMLInputElement>) => void
+}> = ({ checked, disabled, handleChange }) => {
+  const { t } = useTranslation()
+
+  const toggle = (
+    <span>
+      <input
+        type="radio"
+        name="editor"
+        value="rich-text"
+        id="editor-switch-rich-text"
+        className="toggle-switch-input"
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      <label htmlFor="editor-switch-rich-text" className="toggle-switch-label">
+        <span>Rich Text</span>
+      </label>
+    </span>
+  )
+
+  if (disabled) {
+    return (
+      <Tooltip
+        description={t('rich_text_is_only_available_for_tex_files')}
+        id="rich-text-toggle-tooltip"
+        overlayProps={{ placement: 'bottom' }}
+        tooltipProps={{ className: 'tooltip-wide' }}
+      >
+        {toggle}
+      </Tooltip>
+    )
+  }
+
+  return toggle
+}
+
 export default memo(EditorSwitch)

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -283,7 +283,6 @@
 }
 
 .toggle-switch-input:disabled + .toggle-switch-label {
-  color: @gray-lighter;
   cursor: not-allowed;
 }
 

services/web/locales/en.json

@@ -1250,6 +1250,7 @@
   "review_your_peers_work": "Review your peers’ work",
   "revoke": "Revoke",
   "revoke_invite": "Revoke Invite",
+  "rich_text_is_only_available_for_tex_files": "Rich Text is only available for TeX files",
   "ro": "Romanian",
   "role": "Role",
   "ru": "Russian",