feat(frontend): add more tooltips (#2961)

* feat(frontend): add more tooltips

* fix: remove styling from Tooltip

* refactor: tooltip expects a single child

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -1,7 +1,7 @@
-import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
+import SettingsBadge from '@app/components/Settings/SettingsBadge';
 import globalMessages from '@app/i18n/globalMessages';
 import { BeakerIcon, SaveIcon } from '@heroicons/react/outline';
 import axios from 'axios';
@@ -382,9 +382,7 @@ const NotificationsEmail = () => {
                 <span className="mr-2">
                   {intl.formatMessage(messages.pgpPrivateKey)}
                 </span>
-                <Badge badgeType="danger">
-                  {intl.formatMessage(globalMessages.advanced)}
-                </Badge>
+                <SettingsBadge badgeType="advanced" />
                 <span className="label-tip">
                   {intl.formatMessage(messages.pgpPrivateKeyTip, {
                     OpenPgpLink: OpenPgpLink,
@@ -414,9 +412,7 @@ const NotificationsEmail = () => {
                 <span className="mr-2">
                   {intl.formatMessage(messages.pgpPassword)}
                 </span>
-                <Badge badgeType="danger">
-                  {intl.formatMessage(globalMessages.advanced)}
-                </Badge>
+                <SettingsBadge badgeType="advanced" />
                 <span className="label-tip">
                   {intl.formatMessage(messages.pgpPasswordTip, {
                     OpenPgpLink: OpenPgpLink,

src/components/Settings/SettingsBadge.tsx

@@ -0,0 +1,54 @@
+import Badge from '@app/components/Common/Badge';
+import Tooltip from '@app/components/Common/Tooltip';
+import globalMessages from '@app/i18n/globalMessages';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  advancedTooltip:
+    'Incorrectly configuring this setting may result in broken functionality',
+  experimentalTooltip:
+    'Enabling this setting may result in unexpected application behavior',
+  restartrequiredTooltip:
+    'Overseerr must be restarted for changes to this setting to take effect',
+});
+
+const SettingsBadge = ({
+  badgeType,
+  className,
+}: {
+  badgeType: 'advanced' | 'experimental' | 'restartRequired';
+  className?: string;
+}) => {
+  const intl = useIntl();
+
+  switch (badgeType) {
+    case 'advanced':
+      return (
+        <Tooltip content={intl.formatMessage(messages.advancedTooltip)}>
+          <Badge badgeType="danger" className={className}>
+            {intl.formatMessage(globalMessages.advanced)}
+          </Badge>
+        </Tooltip>
+      );
+    case 'experimental':
+      return (
+        <Tooltip content={intl.formatMessage(messages.experimentalTooltip)}>
+          <Badge badgeType="warning">
+            {intl.formatMessage(globalMessages.experimental)}
+          </Badge>
+        </Tooltip>
+      );
+    case 'restartRequired':
+      return (
+        <Tooltip content={intl.formatMessage(messages.restartrequiredTooltip)}>
+          <Badge badgeType="primary" className={className}>
+            {intl.formatMessage(globalMessages.restartRequired)}
+          </Badge>
+        </Tooltip>
+      );
+    default:
+      return null;
+  }
+};
+
+export default SettingsBadge;

src/components/Settings/SettingsLogs/index.tsx

@@ -4,6 +4,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import Table from '@app/components/Common/Table';
+import Tooltip from '@app/components/Common/Tooltip';
 import Transition from '@app/components/Transition';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import globalMessages from '@app/i18n/globalMessages';
@@ -47,6 +48,7 @@ const messages = defineMessages({
   logDetails: 'Log Details',
   extraData: 'Additional Data',
   copiedLogMessage: 'Copied log message to clipboard.',
+  viewdetails: 'View Details',
 });
 
 type Filter = 'debug' | 'info' | 'warn' | 'error';
@@ -327,23 +329,31 @@ const SettingsLogs = () => {
                   <Table.TD className="text-gray-300">{row.message}</Table.TD>
                   <Table.TD className="-m-1 flex flex-wrap items-center justify-end">
                     {row.data && (
+                      <Tooltip
+                        content={intl.formatMessage(messages.viewdetails)}
+                      >
+                        <Button
+                          buttonType="primary"
+                          buttonSize="sm"
+                          onClick={() => setActiveLog(row)}
+                          className="m-1"
+                        >
+                          <DocumentSearchIcon className="icon-md" />
+                        </Button>
+                      </Tooltip>
+                    )}
+                    <Tooltip
+                      content={intl.formatMessage(messages.copyToClipboard)}
+                    >
                       <Button
                         buttonType="primary"
                         buttonSize="sm"
-                        onClick={() => setActiveLog(row)}
+                        onClick={() => copyLogString(row)}
                         className="m-1"
                       >
-                        <DocumentSearchIcon className="icon-md" />
+                        <ClipboardCopyIcon className="icon-md" />
                       </Button>
-                    )}
-                    <Button
-                      buttonType="primary"
-                      buttonSize="sm"
-                      onClick={() => copyLogString(row)}
-                      className="m-1"
-                    >
-                      <ClipboardCopyIcon className="icon-md" />
-                    </Button>
+                    </Tooltip>
                   </Table.TD>
                 </tr>
               );

src/components/Settings/SettingsMain.tsx

@@ -1,11 +1,12 @@
-import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
+import Tooltip from '@app/components/Common/Tooltip';
 import LanguageSelector from '@app/components/LanguageSelector';
 import RegionSelector from '@app/components/RegionSelector';
 import CopyButton from '@app/components/Settings/CopyButton';
+import SettingsBadge from '@app/components/Settings/SettingsBadge';
 import type { AvailableLocale } from '@app/context/LanguageContext';
 import { availableLanguages } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
@@ -258,9 +259,7 @@ const SettingsMain = () => {
                     <span className="mr-2">
                       {intl.formatMessage(messages.trustProxy)}
                     </span>
-                    <Badge badgeType="primary">
-                      {intl.formatMessage(globalMessages.restartRequired)}
-                    </Badge>
+                    <SettingsBadge badgeType="restartRequired" />
                     <span className="label-tip">
                       {intl.formatMessage(messages.trustProxyTip)}
                     </span>
@@ -281,28 +280,30 @@ const SettingsMain = () => {
                     <span className="mr-2">
                       {intl.formatMessage(messages.csrfProtection)}
                     </span>
-                    <Badge badgeType="danger" className="mr-2">
-                      {intl.formatMessage(globalMessages.advanced)}
-                    </Badge>
-                    <Badge badgeType="primary">
-                      {intl.formatMessage(globalMessages.restartRequired)}
-                    </Badge>
+                    <SettingsBadge badgeType="advanced" className="mr-2" />
+                    <SettingsBadge badgeType="restartRequired" />
                     <span className="label-tip">
                       {intl.formatMessage(messages.csrfProtectionTip)}
                     </span>
                   </label>
                   <div className="form-input-area">
-                    <Field
-                      type="checkbox"
-                      id="csrfProtection"
-                      name="csrfProtection"
-                      title={intl.formatMessage(
+                    <Tooltip
+                      content={intl.formatMessage(
                         messages.csrfProtectionHoverTip
                       )}
-                      onChange={() => {
-                        setFieldValue('csrfProtection', !values.csrfProtection);
-                      }}
-                    />
+                    >
+                      <Field
+                        type="checkbox"
+                        id="csrfProtection"
+                        name="csrfProtection"
+                        onChange={() => {
+                          setFieldValue(
+                            'csrfProtection',
+                            !values.csrfProtection
+                          );
+                        }}
+                      />
+                    </Tooltip>
                   </div>
                 </div>
                 <div className="form-row">
@@ -367,9 +368,7 @@ const SettingsMain = () => {
                     <span className="mr-2">
                       {intl.formatMessage(messages.hideAvailable)}
                     </span>
-                    <Badge badgeType="warning">
-                      {intl.formatMessage(globalMessages.experimental)}
-                    </Badge>
+                    <SettingsBadge badgeType="experimental" />
                   </label>
                   <div className="form-input-area">
                     <Field

src/components/Settings/SettingsPlex.tsx

@@ -5,6 +5,7 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
 import LibraryItem from '@app/components/Settings/LibraryItem';
+import SettingsBadge from '@app/components/Settings/SettingsBadge';
 import globalMessages from '@app/i18n/globalMessages';
 import { SaveIcon } from '@heroicons/react/outline';
 import { RefreshIcon, SearchIcon, XIcon } from '@heroicons/react/solid';
@@ -567,9 +568,7 @@ const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
                       </a>
                     ),
                   })}
-                  <Badge badgeType="danger" className="ml-2">
-                    {intl.formatMessage(globalMessages.advanced)}
-                  </Badge>
+                  <SettingsBadge badgeType="advanced" className="ml-2" />
                   <span className="label-tip">
                     {intl.formatMessage(messages.webAppUrlTip)}
                   </span>