feat: apply xxChannel.input.enableDocument dashboard config (#613)

AhyoungRyu · web-flow · commit cf87853e600a · 2023-06-09T12:14:35.000+09:00
Applied `enable_document`  configs to MessageInput component
- [x] group_channel.channel.input.enable_document
- [x] open_channel.channel.input.enable_document
diff --git a/scripts/index_d_ts b/scripts/index_d_ts
@@ -2077,6 +2077,8 @@ declare module '@sendbird/uikit-react/ui/MessageContent' {
 }
 
 declare module '@sendbird/uikit-react/ui/MessageInput' {
+  import type { GroupChannel } from '@sendbird/chat/groupChannel';
+  import type { OpenChannel } from '@sendbird/chat/openChannel';
   import type { User } from '@sendbird/chat';
 
   interface MessageInputProps {
@@ -2095,6 +2097,7 @@ declare module '@sendbird/uikit-react/ui/MessageInput' {
     onCancelEdit?: () => void,
     onStartTyping?: () => void,
     channelUrl: string,
+    channel?: OpenChannel | GroupChannel,
     mentionSelectedUser?: Array<User>,
     onUserMentioned?: (user: User) => void,
     onMentionStringChange?: (str: string) => void,
diff --git a/src/lib/Sendbird.tsx b/src/lib/Sendbird.tsx
@@ -306,10 +306,12 @@ const SendbirdSDK = ({
           groupChannel: {
             enableOgtag: configs.groupChannel.channel.enableOgtag,
             enableTypingIndicator: configs.groupChannel.channel.enableTypingIndicator,
+            enableDocument: configs.groupChannel.channel.input.enableDocument,
             threadReplySelectType: getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).upperCase,
           },
           openChannel: {
             enableOgtag: configs.openChannel.channel.enableOgtag,
+            enableDocument: configs.openChannel.channel.input.enableDocument,
           },
         },
       }}
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -108,10 +108,12 @@ export interface SendBirdStateConfig {
   groupChannel: {
     enableOgtag: SBUConfig['groupChannel']['channel']['enableOgtag'];
     enableTypingIndicator: SBUConfig['groupChannel']['channel']['enableTypingIndicator'];
+    enableDocument: SBUConfig['groupChannel']['channel']['input']['enableDocument'];
     threadReplySelectType: SBUConfig['groupChannel']['channel']['threadReplySelectType'];
   },
   openChannel: {
     enableOgtag: SBUConfig['openChannel']['channel']['enableOgtag'];
+    enableDocument: SBUConfig['openChannel']['channel']['input']['enableDocument'];
   },
 }
 export interface SdkStore {
diff --git a/src/modules/Channel/components/Message/index.tsx b/src/modules/Channel/components/Message/index.tsx
@@ -266,6 +266,7 @@ const Message = ({
         }
         <MessageInput
           isEdit
+          channel={currentGroupChannel}
           disabled={disabled}
           ref={editMessageInputRef}
           mentionSelectedUser={selectedUser}
diff --git a/src/modules/OpenChannel/components/OpenChannelInput/index.tsx b/src/modules/OpenChannel/components/OpenChannelInput/index.tsx
@@ -37,6 +37,7 @@ const MessageInputWrapper = (props: MessageInputWrapperProps, ref: React.RefObje
   return (
     <div className="sendbird-openchannel-footer">
       <MessageInput
+        channel={currentOpenChannel}
         ref={ref}
         value={value}
         disabled={disabled}
diff --git a/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx b/src/modules/OpenChannel/components/OpenChannelMessage/index.tsx
@@ -105,6 +105,7 @@ export default function MessagOpenChannelMessageeHoc(props: OpenChannelMessagePr
     return (
       <MessageInput
         isEdit
+        channel={currentOpenChannel}
         disabled={editDisabled}
         ref={editMessageInputRef}
         message={message as UserMessage}
diff --git a/src/modules/Thread/components/ParentMessageInfo/index.tsx b/src/modules/Thread/components/ParentMessageInfo/index.tsx
@@ -157,6 +157,7 @@ export default function ParentMessageInfo({
           )
         }
         <MessageInput
+          channel={currentChannel}
           isEdit
           disabled={disabled}
           ref={editMessageInputRef}
diff --git a/src/modules/Thread/components/ThreadList/ThreadListItem.tsx b/src/modules/Thread/components/ThreadList/ThreadListItem.tsx
@@ -159,6 +159,7 @@ export default function ThreadListItem({
         }
         <MessageInput
           isEdit
+          channel={currentChannel}
           disabled={disabled}
           ref={editMessageInputRef}
           mentionSelectedUser={selectedUser}
diff --git a/src/ui/MessageInput/__tests__/MessageInput.spec.js b/src/ui/MessageInput/__tests__/MessageInput.spec.js
@@ -1,12 +1,100 @@
-import React, { useRef } from 'react';
-import { render, screen,fireEvent, waitFor } from '@testing-library/react';
+import React, { useContext } from 'react';
+import { render, renderHook, screen,fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import useSendbirdStateContext from '../../../hooks/useSendbirdStateContext';
+import { useLocalization } from '../../../lib/LocalizationContext';
 import MessageInput from "../index";
 
 const noop = () => {};
 
+// to mock useSendbirdStateContext
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(),
+}));
+jest.mock('../../../lib/LocalizationContext', () => ({
+  ...jest.requireActual('../../../lib/LocalizationContext'),
+  useLocalization: jest.fn(),
+}));
+
 describe('ui/MessageInput', () => {
+  /** Mocking necessary hooks */
+  beforeEach(() => {
+    const stateContextValue = {
+      config: {
+        groupChannel: {
+          enableDocument: true,
+        }
+      }
+    };
+    const localeContextValue = {
+      stringSet: {},
+    };
+
+    useContext.mockReturnValue(stateContextValue);
+    useLocalization.mockReturnValue(localeContextValue);
+
+    renderHook(() => useSendbirdStateContext());
+    renderHook(() => useLocalization());
+  })
+
+  describe('Dashboard enableDocument config', () => {
+    it('should not render file upload icon if groupChannel.enableDocument: false', () => {
+      const stateContextValue = {
+        config: {
+          groupChannel: {
+            enableDocument: false,
+          }
+        }
+      };
+
+      useContext.mockReturnValue(stateContextValue);
+      renderHook(() => useSendbirdStateContext());
+
+      const { container } = render(<MessageInput onSendMessage={noop} value=""  channel={{channelType: 'group'}} />);
+      expect(
+        container.getElementsByClassName('sendbird-message-input--attach').length
+      ).toBe(0);
+    });
+
+    it('should not render file upload icon if openChannel.enableDocument: false', () => {
+      const stateContextValue = {
+        config: {
+          openChannel: {
+            enableDocument: false,
+          }
+        }
+      };
+
+      useContext.mockReturnValue(stateContextValue);
+      renderHook(() => useSendbirdStateContext());
+
+      const { container } = render(<MessageInput onSendMessage={noop} value="" channel={{channelType: 'open'}} />);
+      expect(
+        container.getElementsByClassName('sendbird-message-input--attach').length
+      ).toBe(0);
+    });
+
+    it('should not render file upload icon if openChannel.enableDocument: true', () => {
+      const stateContextValue = {
+        config: {
+          openChannel: {
+            enableDocument: true,
+          }
+        }
+      };
+
+      useContext.mockReturnValue(stateContextValue);
+      renderHook(() => useSendbirdStateContext());
+
+      const { container } = render(<MessageInput onSendMessage={noop} value="" channel={{channelType: 'open'}} />);
+      expect(
+        container.getElementsByClassName('sendbird-message-input--attach').length
+      ).toBe(1);
+    });
+  })
+
   it('should render upload icon if no text is present', () => {
     const { container } = render(<MessageInput onSendMessage={noop} value="" />);
     expect(
diff --git a/src/ui/MessageInput/index.jsx b/src/ui/MessageInput/index.jsx
@@ -4,7 +4,6 @@ import React, {
   useState,
   useEffect,
   useCallback,
-  useContext,
 } from 'react';
 import PropTypes from 'prop-types';
 
@@ -17,7 +16,9 @@ import Button, { ButtonTypes, ButtonSizes } from '../Button';
 import renderMentionLabelToString from '../MentionUserLabel/renderToString';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import Label, { LabelTypography, LabelColors } from '../Label';
-import { LocalizationContext } from '../../lib/LocalizationContext';
+import { useLocalization } from '../../lib/LocalizationContext';
+import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
+
 import { nodeListToArray, sanitizeString } from './utils';
 import {
   arrayEqual,
@@ -27,6 +28,7 @@ import usePaste from './hooks/usePaste';
 import { tokenizeMessage } from '../../modules/Message/utils/tokens/tokenize';
 import { USER_MENTION_PREFIX } from '../../modules/Message/consts';
 import { TOKEN_TYPES } from '../../modules/Message/utils/tokens/types';
+import { checkIfFileUploadEnabled } from './messageInputUtils';
 
 const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
 const LINE_HEIGHT = 76;
@@ -97,7 +99,14 @@ const MessageInput = React.forwardRef((props, ref) => {
     setMentionedUsers,
   } = props;
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
-  const { stringSet } = useContext(LocalizationContext);
+  const { stringSet } = useLocalization();
+  const { config } = useSendbirdStateContext();
+
+  const isFileUploadEnabled = checkIfFileUploadEnabled({
+    channel,
+    config,
+  });
+
   const fileInputRef = useRef(null);
   const [isInput, setIsInput] = useState(false);
   const [mentionedUserIds, setMentionedUserIds] = useState([]);
@@ -489,7 +498,10 @@ const MessageInput = React.forwardRef((props, ref) => {
         {/* file upload icon */}
         {
           (!isEdit && !isInput) && (
-            (renderFileUploadIcon?.() || (
+            (renderFileUploadIcon?.()
+              // UIKit Dashboard configuration should have lower priority than
+              // renderFileUploadIcon which is set in code level
+              || (isFileUploadEnabled && (
               <IconButton
                 className={`sendbird-message-input--attach ${isVoiceMessageEnabled ? 'is-voice-message-enabled' : ''}`}
                 height="32px"
@@ -512,7 +524,8 @@ const MessageInput = React.forwardRef((props, ref) => {
                   onChange={handleUploadFile(onFileUpload)}
                 />
               </IconButton>
-            ))
+              )
+              ))
           )
         }
         {/* voice message input trigger */}
@@ -606,7 +619,9 @@ MessageInput.propTypes = {
   renderVoiceMessageIcon: PropTypes.func,
   renderSendMessageIcon: PropTypes.func,
   renderFileUploadIcon: PropTypes.func,
-  channel: PropTypes.shape({}),
+  channel: PropTypes.shape({
+    channelType: PropTypes.string,
+  }).isRequired,
 };
 
 MessageInput.defaultProps = {
@@ -637,7 +652,6 @@ MessageInput.defaultProps = {
   renderVoiceMessageIcon: noop,
   renderFileUploadIcon: noop,
   renderSendMessageIcon: noop,
-  channel: {},
 };
 
 export default MessageInput;
diff --git a/src/ui/MessageInput/messageInputUtils.ts b/src/ui/MessageInput/messageInputUtils.ts
@@ -0,0 +1,42 @@
+/**
+ * Write new utils here
+ * Migrate old utils as needed, and delete utils.js
+ */
+// import { ChannelType } from '@sendbird/chat';
+import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import type { OpenChannel } from '@sendbird/chat/openChannel';
+import { match } from 'ts-pattern';
+
+import type { SendBirdStateConfig } from '../../lib/types';
+
+/**
+ * FIXME:
+ * Import this ChannelType enum from @sendbird/chat
+ * once MessageInput.spec unit tests can be run \wo jest <-> ESM issue
+ */
+enum ChannelType {
+  BASE = 'base',
+  GROUP = 'group',
+  OPEN = 'open',
+}
+/**
+ * FIXME: Simplify this in UIKit@v4
+ * If customer is using MessageInput inside our modules(ie: Channel, Thread, etc),
+ * we should use the config from the module.
+ * If customer is using MessageInput outside our modules(ie: custom UI),
+ * we expect Channel to be undefined and customer gets control to show/hide file-upload.
+ * @param {*} channel GroupChannel | OpenChannel
+ * @param {*} config SendBirdStateConfig
+ * @returns boolean
+ */
+export const checkIfFileUploadEnabled = ({ channel, config }: {
+  channel?: GroupChannel | OpenChannel,
+  config?: SendBirdStateConfig,
+}) => {
+  const isEnabled = match(channel?.channelType)
+    .with(ChannelType.GROUP, () => config?.groupChannel?.enableDocument)
+    .with(ChannelType.OPEN, () => config?.openChannel?.enableDocument)
+    .otherwise(() => true);
+
+  return isEnabled;
+};

Original file line number	Diff line number	Diff line change
`@@ -266,6 +266,7 @@ const Message = ({`
`266`	`266`	`}`
`267`	`267`	`<MessageInput`
`268`	`268`	`isEdit`
	`269`	`+ channel={currentGroupChannel}`
`269`	`270`	`disabled={disabled}`
`270`	`271`	`ref={editMessageInputRef}`
`271`	`272`	`mentionSelectedUser={selectedUser}`
Original file line number	Diff line number	Diff line change
`@@ -157,6 +157,7 @@ export default function ParentMessageInfo({`
`157`	`157`	`)`
`158`	`158`	`}`
`159`	`159`	`<MessageInput`
	`160`	`+ channel={currentChannel}`
`160`	`161`	`isEdit`
`161`	`162`	`disabled={disabled}`
`162`	`163`	`ref={editMessageInputRef}`
Original file line number	Diff line number	Diff line change
`@@ -159,6 +159,7 @@ export default function ThreadListItem({`
`159`	`159`	`}`
`160`	`160`	`<MessageInput`
`161`	`161`	`isEdit`
	`162`	`+ channel={currentChannel}`
`162`	`163`	`disabled={disabled}`
`163`	`164`	`ref={editMessageInputRef}`
`164`	`165`	`mentionSelectedUser={selectedUser}`