ts fc

packages/app/src/client/interfaces/global-notification.ts

@@ -25,3 +25,9 @@ export type IGlobalNotification = {
   slackChannelToSend: string,
   triggerEvents: TriggerEventType[],
 };
+
+export type IGlobalNotificationType = {
+  __t: NotifyType
+  _id: string
+  provider: any
+}

packages/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -11,8 +11,8 @@ import loggerFactory from '~/utils/logger';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
+import { GlobalNotificationTypeIcon } from './GlobalNotificationTypeIcon';
 import NotificationDeleteModal from './NotificationDeleteModal';
-import NotificationTypeIcon from './NotificationTypeIcon';
 
 
 const logger = loggerFactory('growi:GolobalNotificationList');
@@ -129,7 +129,7 @@ class GlobalNotificationList extends React.Component {
                 </ul>
               </td>
               <td>
-                <NotificationTypeIcon notification={notification} />
+                <GlobalNotificationTypeIcon notification={notification} />
                 { notification.__t === 'mail' && notification.toEmail }
                 { notification.__t === 'slack' && notification.slackChannels }
               </td>

packages/app/src/components/Admin/Notification/GlobalNotificationTypeIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { UncontrolledTooltip } from 'reactstrap';
+
+import type { IGlobalNotificationType } from '~/client/interfaces/global-notification';
+
+
+type GlobalNotificationTypeIconProps = {
+  // supports 2 types:
+  //   User trigger notification -> has 'provider: slack'
+  //   Global notification -> has '__t: slack|mail'
+  notification: IGlobalNotificationType
+}
+
+export const GlobalNotificationTypeIcon = (props: GlobalNotificationTypeIconProps): JSX.Element => {
+  const { __t, _id, provider } = props.notification;
+
+  // User trigger notification
+  if (provider != null) {
+    // only slack type
+  }
+
+  // Global notification
+  const type = (__t != null && __t === 'mail') ? 'mail' : 'slack';
+
+  const elemId = `notification-${type}-${_id}`;
+
+  return (
+    <>
+      { type === 'mail' ? (
+        <><i id={elemId} className='icon-fw fa fa-envelope-o'></i><UncontrolledTooltip target={elemId}>Mail</UncontrolledTooltip></>
+      ) : (
+        <><i id={elemId} className='icon-fw fa fa-hashtag'></i><UncontrolledTooltip target={elemId}>Slack</UncontrolledTooltip></>
+      ) }
+    </>
+  );
+};

packages/app/src/components/Admin/Notification/NotificationTypeIcon.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { UncontrolledTooltip } from 'reactstrap';
-
-const SlackIcon = (props) => {
-  const { __t, _id, provider } = props.notification;
-
-  let type = 'slack';
-
-  // User trigger notification
-  if (provider != null) {
-    // only slack type
-  }
-
-  // Global notification
-  if (__t != null) {
-    if (__t === 'mail') {
-      type = 'mail';
-    }
-  }
-
-  const elemId = `notification-${type}-${_id}`;
-  const className = type === 'mail'
-    ? 'icon-fw fa fa-envelope-o'
-    : 'icon-fw fa fa-hashtag';
-
-  return (
-    <>
-      <i id={elemId} className={className}></i>
-      <UncontrolledTooltip target={elemId}>Slack</UncontrolledTooltip>
-    </>
-  );
-};
-
-SlackIcon.propTypes = {
-  // supports 2 types:
-  //   User trigger notification -> has 'provider: slack'
-  //   Global notification -> has '__t: slack|mail'
-  notification: PropTypes.object.isRequired,
-};
-
-export default SlackIcon;

packages/app/src/components/Admin/Notification/UserNotificationRow.jsx

@@ -7,7 +7,7 @@ import AdminNotificationContainer from '~/client/services/AdminNotificationConta
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
-import NotificationTypeIcon from './NotificationTypeIcon';
+import { GlobalNotificationTypeIcon } from './GlobalNotificationTypeIcon';
 
 class UserNotificationRow extends React.PureComponent {
 
@@ -22,7 +22,7 @@ class UserNotificationRow extends React.PureComponent {
             {notification.pathPattern}
           </td>
           <td className="px-4">
-            <NotificationTypeIcon notification={notification} />{notification.channel}
+            <GlobalNotificationTypeIcon notification={notification} />{notification.channel}
           </td>
           <td>
             <button type="submit" className="btn btn-outline-danger" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>