fix styles

packages/app/public/static/locales/en_US/admin.json

@@ -754,7 +754,7 @@
     "invite": "Invite",
     "invited": "User was invited",
     "back_to_user_management": "Back to User Management",
-    "authentication_provider": "Authentication provider",
+    "authentication_provider": "Auth provider",
     "manage": "Manage",
     "password_setting": "Password setting",
     "password_setting_help": "Is password set?",
@@ -1028,5 +1028,8 @@
     "ADMIN_SEARCH_CONNECTION": "Attempting to reconnect to Elasticsearch",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "Normalize of Elasticsearch indexes",
     "ADMIN_SEARCH_INDICES_REBUILD": "Rebuild Elasticsearch indexes"
+  },
+  "toaster": {
+    "remove_external_user_success": "Succeeded to remove {{accountId}}"
   }
 }

packages/app/public/static/locales/en_US/translation.json

@@ -535,7 +535,6 @@
     "activate_user_success": "Succeeded to activating {{username}}",
     "deactivate_user_success": "Succeeded to deactivate {{username}}",
     "remove_user_success": "Succeeded to removing {{username}}",
-    "remove_external_user_success": "Succeeded to remove {{accountId}}",
     "remove_share_link_success": "Succeeded to remove {{shareLinkId}}",
     "issue_share_link": "Succeeded to issue new share link",
     "remove_share_link": "Succeeded to remove {{count}} share links",

packages/app/public/static/locales/ja_JP/admin.json

@@ -1040,5 +1040,8 @@
     "ADMIN_SEARCH_CONNECTION": "Elasticsearch の再接続の試行",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "Elasticsearch のインデックスの正規化",
     "ADMIN_SEARCH_INDICES_REBUILD": "Elasticsearch のインデックスのリビルド"
+  },
+  "toaster": {
+    "remove_external_user_success": "{{accountId}}を削除しました"
   }
 }

packages/app/public/static/locales/ja_JP/translation.json

@@ -526,7 +526,6 @@
     "activate_user_success": "{{username}}を有効化しました",
     "deactivate_user_success": "{{username}}を無効化しました",
     "remove_user_success": "{{username}}を削除しました",
-    "remove_external_user_success": "{{accountId}}を削除しました",
     "remove_share_link_success": "{{shareLinkId}}を削除しました",
     "issue_share_link": "共有リンクを作成しました",
     "remove_share_link": "共有リンクを{{count}}件削除しました",

packages/app/public/static/locales/zh_CN/admin.json

@@ -1006,5 +1006,8 @@
     "ADMIN_SEARCH_CONNECTION": "重试Elasticsearch连接",
     "ADMIN_SEARCH_INDICES_NORMALIZE": "试图重新连接Elasticsearch",
     "ADMIN_SEARCH_INDICES_REBUILD": "重建 Elasticsearch 索引"
+  },
+  "toaster": {
+    "remove_external_user_success": "Succeeded to remove {{accountId}}"
   }
 }

packages/app/public/static/locales/zh_CN/translation.json

@@ -508,7 +508,6 @@
 		"activate_user_success": "Succeeded to activating {{username}}",
 		"deactivate_user_success": "Succeeded to deactivate {{username}}",
 		"remove_user_success": "Succeeded to removing {{username}} ",
-    "remove_external_user_success": "Succeeded to remove {{accountId}} ",
     "switch_disable_link_sharing_success": "成功更新分享链接设置",
     "failed_to_reset_password":"Failed to reset password"
   },

packages/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 
+import { IAdminExternalAccount } from '@growi/core';
 import dateFnsFormat from 'date-fns/format';
 import { useTranslation } from 'next-i18next';
 
@@ -8,6 +9,7 @@ import { toastSuccess, toastError } from '~/client/util/apiNotification';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
+
 type ExternalAccountTableProps = {
   adminExternalAccountsContainer: any,
 }
@@ -21,7 +23,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
   const removeExtenalAccount = useCallback(async(externalAccountId) => {
     try {
       const accountId = await adminExternalAccountsContainer.removeExternalAccountById(externalAccountId);
-      toastSuccess(t('toaster.remove_external_user_success', { accountId }));
+      toastSuccess(t('admin:toaster.remove_external_user_success', { accountId }));
     }
     catch (err) {
       toastError(err);
@@ -33,55 +35,51 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
       <table className="table table-bordered table-user-list">
         <thead>
           <tr>
-            <th style={{ width: '120px' }}>{ t('admin:user_management.authentication_provider') }</th>
+            <th style={{ width: '10rem' }}>{ t('admin:user_management.authentication_provider') }</th>
             <th><code>accountId</code></th>
             <th>{ t('admin:user_management.related_username') }<code>username</code></th>
             <th>
               { t('admin:user_management.password_setting') }
-              <div
-                className="text-muted"
-                data-toggle="popover"
-                data-placement="top"
-                data-trigger="hover focus"
-                tabIndex={0}
+              {/* TODO: Enable popper */}
+              <span
                 role="button"
-                data-animation="false"
+                className="text-muted px-2"
+                data-toggle="tooltip"
+                data-placement="top"
+                data-trigger="hover"
                 data-html="true"
-                data-content={t('admin:user_management.password_setting_help')}
+                title={t('admin:user_management.password_setting_help')}
               >
-                <small>
-                  <i className="icon-question" aria-hidden="true"></i>
-                </small>
-              </div>
+                <small><i className="icon-question" aria-hidden="true"></i></small>
+              </span>
             </th>
-            <th style={{ width: '100px' }}>{ t('Created') }</th>
-            <th style={{ width: '70px' }}></th>
+            <th style={{ width: '8rem' }}>{ t('Created') }</th>
+            <th style={{ width: '3rem' }}></th>
           </tr>
         </thead>
         <tbody>
-          { adminExternalAccountsContainer.state.externalAccounts.map((ea) => {
-
+          { adminExternalAccountsContainer.state.externalAccounts.map((ea: IAdminExternalAccount) => {
             return (
               <tr key={ea._id}>
-                <td>{ea.providerType}</td>
-                <td>
+                <td style={{ verticalAlign: 'middle' }}>
+                  <span>{ea.providerType}</span>
+                </td>
+                <td style={{ verticalAlign: 'middle' }}>
                   <strong>{ea.accountId}</strong>
                 </td>
-                <td>
+                <td style={{ verticalAlign: 'middle' }}>
                   <strong>{ea.user.username}</strong>
                 </td>
-                <td>
+                <td style={{ verticalAlign: 'middle' }}>
                   {ea.user.password
-                    ? (
-                      <span className="badge badge-info">{ t('admin:user_management.set') }</span>
-                    )
-                    : (
-                      <span className="badge badge-warning">{ t('admin:user_management.unset') }</span>
-                    )
+                    ? (<span className="badge badge-info">{ t('admin:user_management.set') }</span>)
+                    : (<span className="badge badge-warning">{ t('admin:user_management.unset') }</span>)
                   }
                 </td>
-                <td>{dateFnsFormat(new Date(ea.createdAt), 'yyyy-MM-dd')}</td>
-                <td>
+                <td style={{ whiteSpace: 'nowrap', verticalAlign: 'middle' }}>
+                  <span>{dateFnsFormat(new Date(ea.createdAt), 'yyyy-MM-dd')}</span>
+                </td>
+                <td style={{ verticalAlign: 'middle' }}>
                   <div className="btn-group admin-user-menu">
                     <button type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
                       <i className="icon-settings"></i> <span className="caret"></span>
@@ -92,7 +90,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                         className="dropdown-item"
                         type="button"
                         role="button"
-                        onClick={() => { return removeExtenalAccount(ea._id) }}
+                        onClick={() => removeExtenalAccount(ea._id)}
                       >
                         <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
                       </button>
@@ -101,7 +99,6 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                 </td>
               </tr>
             );
-
           }) }
         </tbody>
       </table>
@@ -109,10 +106,6 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
   );
 };
 
-const ExternalAccountTableWrapperFC = (props: any) => {
-  return <ExternalAccountTable {...props} />;
-};
-
-const ExternalAccountTableWrapper = withUnstatedContainers(ExternalAccountTableWrapperFC, [AdminExternalAccountsContainer]);
+const ExternalAccountTableWrapper = withUnstatedContainers(ExternalAccountTable, [AdminExternalAccountsContainer]);
 
 export default ExternalAccountTableWrapper;