refactor(console): update icon buttons in the language editor (#2127)

packages/console/src/assets/images/clear.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.48984 7.00451C2.65057 6.04014 3.48495 5.33331 4.46263 5.33331L11.537 5.33331C12.5146 5.33331 13.349 6.04014 13.5097 7.00452L14.3986 12.3378C14.6018 13.5569 13.6617 14.6666 12.4258 14.6666H3.57374C2.33786 14.6666 1.39777 13.5569 1.60095 12.3378L2.48984 7.00451ZM4.46263 6.66665C4.13673 6.66665 3.85861 6.90225 3.80503 7.22371L2.91614 12.557C2.84842 12.9634 3.16178 13.3333 3.57374 13.3333H12.4258C12.8378 13.3333 13.1512 12.9634 13.0834 12.557L12.1945 7.22371C12.141 6.90225 11.8628 6.66665 11.537 6.66665H4.46263Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.33331C6 2.22874 6.89543 1.33331 8 1.33331C9.10457 1.33331 10 2.22874 10 3.33331V5.33331H8.66667V3.33331C8.66667 2.96512 8.36819 2.66665 8 2.66665C7.63181 2.66665 7.33333 2.96512 7.33333 3.33331V5.33331H6V3.33331Z" fill="currentColor"/>
+<path d="M4 12.0002C4 11.632 4.29848 11.3336 4.66667 11.3336C5.03486 11.3336 5.33333 11.632 5.33333 12.0002V13.3336C5.33333 13.7017 5.03486 14.0002 4.66667 14.0002C4.29848 14.0002 4 13.7017 4 13.3336V12.0002Z" fill="currentColor"/>
+<path d="M6.6665 12C6.6665 11.6318 6.96498 11.3333 7.33317 11.3333C7.70136 11.3333 7.99984 11.6318 7.99984 12V13.3333C7.99984 13.7015 7.70136 14 7.33317 14C6.96498 14 6.6665 13.7015 6.6665 13.3333V12Z" fill="currentColor"/>
+<rect x="2.6665" y="8" width="10.6667" height="1.33333" rx="0.666667" fill="currentColor"/>
+</svg>

packages/console/src/components/IconButton/index.tsx

@@ -1,18 +1,49 @@
+import { AdminConsoleKey } from '@logto/phrases';
+import { Nullable } from '@silverhand/essentials';
 import classNames from 'classnames';
-import { HTMLProps } from 'react';
+import { ForwardedRef, forwardRef, HTMLProps, useImperativeHandle, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
+import Tooltip from '../Tooltip';
 import * as styles from './index.module.scss';
 
 export type Props = Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'> & {
   size?: 'small' | 'medium' | 'large';
+  tooltip?: AdminConsoleKey;
 };
 
-const IconButton = ({ size = 'medium', children, className, ...rest }: Props) => {
+const IconButton = (
+  { size = 'medium', children, className, tooltip, ...rest }: Props,
+  reference: ForwardedRef<HTMLButtonElement>
+) => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const innerReference = useRef<HTMLButtonElement>(null);
+
+  useImperativeHandle<Nullable<HTMLButtonElement>, Nullable<HTMLButtonElement>>(
+    reference,
+    () => innerReference.current
+  );
+
   return (
-    <button type="button" className={classNames(styles.button, styles[size], className)} {...rest}>
+    <>
-      {children}
+      <button
-    </button>
+        ref={innerReference}
+        type="button"
+        className={classNames(styles.button, styles[size], className)}
+        {...rest}
+      >
+        {children}
+      </button>
+      {tooltip && (
+        <Tooltip
+          anchorRef={innerReference}
+          content={t(tooltip)}
+          horizontalAlign="center"
+          verticalAlign="top"
+        />
+      )}
+    </>
   );
 };
 
-export default IconButton;
+export default forwardRef(IconButton);

packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/LanguageDetails.module.scss

@@ -71,9 +71,7 @@
     }
 
     .clearButton {
-      display: flex;
+      margin-left: _.unit(1);
-      margin-left: _.unit(2);
-      flex-direction: row-reverse;
     }
 
     .sectionTitle {

packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx

@@ -10,6 +10,7 @@ import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 import useSWR, { useSWRConfig } from 'swr';
 
+import Clear from '@/assets/images/clear.svg';
 import Delete from '@/assets/images/delete.svg';
 import Button from '@/components/Button';
 import ConfirmModal from '@/components/ConfirmModal';
@@ -158,6 +159,7 @@ const LanguageDetails = () => {
         </div>
         {!isBuiltIn && (
           <IconButton
+            tooltip="general.delete"
             onClick={() => {
               setIsDeletionAlertOpen(true);
             }}
@@ -183,11 +185,9 @@ const LanguageDetails = () => {
                 <th>
                   <span className={style.customValuesColumn}>
                     {t('sign_in_exp.others.manage_language.custom_values')}
-                    <Button
+                    <IconButton
-                      type="plain"
-                      title="sign_in_exp.others.manage_language.clear_all"
                       className={style.clearButton}
-                      icon={<Delete />}
+                      tooltip="sign_in_exp.others.manage_language.clear_all"
                       onClick={() => {
                         for (const [key, value] of Object.entries(
                           flattenTranslation(emptyUiTranslation)
@@ -195,7 +195,9 @@ const LanguageDetails = () => {
                           setValue(key, value, { shouldDirty: true });
                         }
                       }}
-                    />
+                    >
+                      <Clear />
+                    </IconButton>
                   </span>
                 </th>
               </tr>