feat: add uikitOptions prop to App & SendbirdProvider (#650)

AhyoungRyu · web-flow · commit 06bfe35b0bd4 · 2023-06-20T17:20:31.000+09:00
Addresses https://sendbird.atlassian.net/browse/UIKIT-4194 Added a new prop`uikitOptions` to Sendbird or App like root component, to make user can control the `UIKitConfig` related configs without dashboard config setting.
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -43,6 +43,7 @@ import {
 } from '@sendbird/chat/openChannel';
 import { UikitMessageHandler } from './lib/selectors';
 import { RenderCustomSeparatorProps } from './types';
+import { UIKitOptions } from './lib/types';
 
 type ReplyType = 'NONE' | 'QUOTE_REPLY' | 'THREAD';
 
@@ -123,6 +124,7 @@ interface SendBirdProviderProps {
   };
   isTypingIndicatorEnabledOnChannelList?: boolean;
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
+  uikitOptions?: UIKitOptions;
 }
 
 interface SendBirdStateConfig {
@@ -309,6 +311,7 @@ interface AppProps {
   isMentionEnabled?: boolean;
   isTypingIndicatorEnabledOnChannelList?: boolean;
   isMessageReceiptStatusEnabledOnChannelList?: boolean;
+  uikitOptions?: UIKitOptions;
 }
 
 interface ApplicationUserListQuery {
diff --git a/src/lib/Sendbird.tsx b/src/lib/Sendbird.tsx
@@ -27,12 +27,15 @@ import { LocalizationProvider } from './LocalizationContext';
 import { MediaQueryProvider } from './MediaQueryContext';
 import getStringSet from '../ui/Label/stringSet';
 import { VOICE_RECORDER_DEFAULT_MAX, VOICE_RECORDER_DEFAULT_MIN } from '../utils/consts';
+import { uikitConfigMapper } from './utils/uikitConfigMapper';
+
 import { useMarkAsReadScheduler } from './hooks/useMarkAsReadScheduler';
 import { ConfigureSessionTypes } from './hooks/useConnect/types';
 import { useMarkAsDeliveredScheduler } from './hooks/useMarkAsDeliveredScheduler';
 import { getCaseResolvedReplyType, getCaseResolvedThreadReplySelectType } from './utils/resolvedReplyType';
 import { useUnmount } from '../hooks/useUnmount';
 import { disconnectSdk } from './hooks/useConnect/disconnectSdk';
+import { UIKitOptions, CommonUIKitConfigProps } from './types';
 
 export type UserListQueryType = {
   hasNext?: boolean;
@@ -59,17 +62,6 @@ export interface SendbirdConfig {
   };
   isREMUnitEnabled?: boolean;
 }
-
-interface CommonUIKitConfigProps {
-  replyType?: 'NONE' | 'QUOTE_REPLY' | 'THREAD';
-  isMentionEnabled?: boolean;
-  isReactionEnabled?: boolean;
-  disableUserProfile?: boolean;
-  isVoiceMessageEnabled?: boolean;
-  isTypingIndicatorEnabledOnChannelList?: boolean;
-  isMessageReceiptStatusEnabledOnChannelList?: boolean;
-}
-
 export interface SendbirdProviderProps extends CommonUIKitConfigProps {
   appId: string;
   userId: string;
@@ -90,46 +82,40 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps {
   imageCompression?: ImageCompressionOptions;
   allowProfileEdit?: boolean;
   disableMarkAsDelivered?: boolean;
-  showSearchIcon?: boolean;
   breakpoint?: string | boolean;
   renderUserProfile?: () => React.ReactElement;
   onUserProfileMessage?: () => void;
+  uikitOptions?: UIKitOptions;
 }
 
 function Sendbird(props: SendbirdProviderProps) {
-  const {
-    replyType,
-    isMentionEnabled,
-    isReactionEnabled,
-    disableUserProfile,
-    isVoiceMessageEnabled,
-    isTypingIndicatorEnabledOnChannelList,
-    isMessageReceiptStatusEnabledOnChannelList,
-    showSearchIcon,
-  } = props;
+  const localConfigs = uikitConfigMapper({
+    legacyConfig: {
+      replyType: props.replyType,
+      isMentionEnabled: props.isMentionEnabled,
+      isReactionEnabled: props.isReactionEnabled,
+      disableUserProfile: props.disableUserProfile,
+      isVoiceMessageEnabled: props.isVoiceMessageEnabled,
+      isTypingIndicatorEnabledOnChannelList:
+        props.isTypingIndicatorEnabledOnChannelList,
+      isMessageReceiptStatusEnabledOnChannelList:
+        props.isMessageReceiptStatusEnabledOnChannelList,
+      showSearchIcon: props.showSearchIcon,
+    },
+    uikitOptions: props.uikitOptions,
+  });
 
   return (
     <UIKitConfigProvider
       localConfigs={{
-        common: {
-          enableUsingDefaultUserProfile: typeof disableUserProfile === 'boolean'
-            ? !disableUserProfile
-            : undefined,
-        },
+        common: localConfigs?.common,
         groupChannel: {
-          channel: {
-            enableReactions: isReactionEnabled,
-            enableMention: isMentionEnabled,
-            enableVoiceMessage: isVoiceMessageEnabled,
-            replyType: replyType != null ? getCaseResolvedReplyType(replyType).lowerCase : undefined,
-          },
-          channelList: {
-            enableTypingIndicator: isTypingIndicatorEnabledOnChannelList,
-            enableMessageReceiptStatus: isMessageReceiptStatusEnabledOnChannelList,
-          },
-          setting: {
-            enableMessageSearch: showSearchIcon,
-          },
+          channel: localConfigs?.groupChannel,
+          channelList: localConfigs?.groupChannelList,
+          setting: localConfigs?.groupChannelSettings,
+        },
+        openChannel: {
+          channel: localConfigs?.openChannel,
         },
       }}
     >
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -25,6 +25,7 @@ import { Logger } from './SendbirdState';
 import { ReplyType } from 'SendbirdUIKitGlobal';
 import { MarkAsReadSchedulerType } from './hooks/useMarkAsReadScheduler';
 import { MarkAsDeliveredSchedulerType } from './hooks/useMarkAsDeliveredScheduler';
+import { PartialDeep } from '../utils/typeHelpers/partialDeep';
 
 import { SBUConfig } from '@sendbird/uikit-tools';
 
@@ -224,3 +225,22 @@ export interface sendbirdSelectorsInterface {
   getResendUserMessage: (store: SendBirdState) => GetResendUserMessage;
   getResendFileMessage: (store: SendBirdState) => GetResendFileMessage;
 }
+
+export interface CommonUIKitConfigProps {
+  replyType?: 'NONE' | 'QUOTE_REPLY' | 'THREAD';
+  isMentionEnabled?: boolean;
+  isReactionEnabled?: boolean;
+  disableUserProfile?: boolean;
+  isVoiceMessageEnabled?: boolean;
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
+  showSearchIcon?: boolean;
+}
+
+export type UIKitOptions = PartialDeep<{
+  common: SBUConfig['common'];
+  groupChannel: SBUConfig['groupChannel']['channel'];
+  groupChannelList: SBUConfig['groupChannel']['channelList'];
+  groupChannelSettings: SBUConfig['groupChannel']['setting'];
+  openChannel: SBUConfig['openChannel']['channel'];
+}>;
diff --git a/src/lib/utils/__tests__/uikitConfigMapper.spec.ts b/src/lib/utils/__tests__/uikitConfigMapper.spec.ts
@@ -0,0 +1,77 @@
+import { getCaseResolvedReplyType } from '../resolvedReplyType';
+import { uikitConfigMapper } from '../uikitConfigMapper';
+import { CommonUIKitConfigProps, UIKitOptions } from '../../types';
+
+const mockLegacyConfig = {
+  // common related
+  disableUserProfile: false,
+  // group channel related
+  isMentionEnabled: true,
+  replyType: 'THREAD',
+  isReactionEnabled: true,
+  isVoiceMessageEnabled: true,
+  // group channel list related
+  isTypingIndicatorEnabledOnChannelList: true,
+  isMessageReceiptStatusEnabledOnChannelList: true,
+  // group channel setting related
+  showSearchIcon: true,
+} as CommonUIKitConfigProps;
+
+describe('uikitConfigMapper', () => {
+  it('should correctly map legacy configs to each corresponding uikitOptions', () => {
+    const result = uikitConfigMapper({ legacyConfig: mockLegacyConfig });
+
+    expect(result.common?.enableUsingDefaultUserProfile).toBe(true);
+    expect(result.groupChannel?.enableMention).toBe(true);
+    expect(result.groupChannel?.enableReactions).toBe(true);
+    expect(result.groupChannel?.replyType).toBe(getCaseResolvedReplyType('THREAD').lowerCase);
+    expect(result.groupChannel?.enableVoiceMessage).toBe(true);
+    expect(result.groupChannelList?.enableMessageReceiptStatus).toBe(true);
+    expect(result.groupChannelList?.enableTypingIndicator).toBe(true);
+    expect(result.groupChannelSettings?.enableMessageSearch).toBe(true);
+  });
+
+  it('should return new uikitOptions too whichs are not existing in legacy configs', () => {
+    const result = uikitConfigMapper({ legacyConfig: mockLegacyConfig });
+
+    expect(result).toHaveProperty('groupChannel.enableOgtag');
+    expect(result).toHaveProperty('groupChannel.enableTypingIndicator');
+    expect(result).toHaveProperty('groupChannel.threadReplySelectType');
+    expect(result).toHaveProperty('groupChannel.input.enableDocument');
+
+    expect(result).toHaveProperty('openChannel.enableOgtag');
+    expect(result).toHaveProperty('openChannel.input.enableDocument');
+  });
+  it('should return the correct result; uikitOptions takes predecence over legacy configs', () => {
+    const legacyConfig = {
+      isMentionEnabled: true,
+      showSearchIcon: true,
+    };
+    const uikitOptions = {
+      groupChannel: {
+        enableMention: false,
+      },
+      groupChannelSettings: {
+        enableMessageSearch: false,
+      },
+    } as UIKitOptions;
+    const result = uikitConfigMapper({ legacyConfig, uikitOptions });
+
+    expect(result.groupChannel?.enableMention).toBe(false);
+    expect(result.groupChannelSettings?.enableMessageSearch).toBe(false);
+  });
+  it('should return true <-> false flipped result for disableUserProfile when its converted into enableUsingDefaultUserProfile', () => {
+    expect(
+      uikitConfigMapper({ legacyConfig: { disableUserProfile: false } })
+        .common?.enableUsingDefaultUserProfile,
+    ).toBe(true);
+    expect(
+      uikitConfigMapper({ legacyConfig: { disableUserProfile: undefined } })
+        .common?.enableUsingDefaultUserProfile,
+    ).toBe(undefined);
+    expect(
+      uikitConfigMapper({ legacyConfig: { disableUserProfile: true } })
+        .common?.enableUsingDefaultUserProfile,
+    ).toBe(false);
+  });
+});
diff --git a/src/lib/utils/uikitConfigMapper.ts b/src/lib/utils/uikitConfigMapper.ts
@@ -0,0 +1,52 @@
+import { UIKitOptions, CommonUIKitConfigProps } from '../types';
+import { getCaseResolvedReplyType } from './resolvedReplyType';
+
+export function uikitConfigMapper({
+  legacyConfig,
+  uikitOptions = {},
+}: { legacyConfig: CommonUIKitConfigProps, uikitOptions?: UIKitOptions }): UIKitOptions {
+  const {
+    replyType,
+    isMentionEnabled,
+    isReactionEnabled,
+    disableUserProfile,
+    isVoiceMessageEnabled,
+    isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList,
+    showSearchIcon,
+  } = legacyConfig;
+  return {
+    common: {
+      enableUsingDefaultUserProfile: uikitOptions.common?.enableUsingDefaultUserProfile
+        ?? (typeof disableUserProfile === 'boolean'
+          ? !disableUserProfile
+          : undefined),
+    },
+    groupChannel: {
+      enableOgtag: uikitOptions.groupChannel?.enableOgtag,
+      enableMention: uikitOptions.groupChannel?.enableMention ?? isMentionEnabled,
+      enableReactions: uikitOptions.groupChannel?.enableReactions ?? isReactionEnabled,
+      enableTypingIndicator: uikitOptions.groupChannel?.enableTypingIndicator,
+      enableVoiceMessage: uikitOptions.groupChannel?.enableVoiceMessage ?? isVoiceMessageEnabled,
+      replyType: uikitOptions.groupChannel?.replyType
+        ?? (replyType != null ? getCaseResolvedReplyType(replyType).lowerCase : undefined),
+      threadReplySelectType: uikitOptions.groupChannel?.threadReplySelectType,
+      input: {
+        enableDocument: uikitOptions.groupChannel?.input?.enableDocument,
+      },
+    },
+    groupChannelList: {
+      enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,
+      enableMessageReceiptStatus: uikitOptions.groupChannelList?.enableMessageReceiptStatus ?? isMessageReceiptStatusEnabledOnChannelList,
+    },
+    groupChannelSettings: {
+      enableMessageSearch: uikitOptions.groupChannelSettings?.enableMessageSearch ?? showSearchIcon,
+    },
+    openChannel: {
+      enableOgtag: uikitOptions.openChannel?.enableOgtag,
+      input: {
+        enableDocument: uikitOptions.openChannel?.input?.enableDocument,
+      },
+    },
+  };
+}
diff --git a/src/modules/App/index.jsx b/src/modules/App/index.jsx
@@ -45,6 +45,7 @@ export default function App(props) {
     disableAutoSelect,
     isTypingIndicatorEnabledOnChannelList,
     isMessageReceiptStatusEnabledOnChannelList,
+    uikitOptions,
   } = props;
   const [currentChannel, setCurrentChannel] = useState(null);
   return (
@@ -78,13 +79,14 @@ export default function App(props) {
       isMessageReceiptStatusEnabledOnChannelList={isMessageReceiptStatusEnabledOnChannelList}
       replyType={replyType}
       showSearchIcon={showSearchIcon}
+      uikitOptions={uikitOptions}
     >
       <AppLayout
         isReactionEnabled={isReactionEnabled}
         replyType={replyType}
+        showSearchIcon={showSearchIcon}
         isMessageGroupingEnabled={isMessageGroupingEnabled}
         allowProfileEdit={allowProfileEdit}
-        showSearchIcon={showSearchIcon}
         onProfileEditSuccess={onProfileEditSuccess}
         disableAutoSelect={disableAutoSelect}
         currentChannel={currentChannel}
@@ -122,6 +124,7 @@ App.propTypes = {
     ]),
     isREMUnitEnabled: PropTypes.bool,
   }),
+  uikitOptions: PropTypes.shape({}),
   isReactionEnabled: PropTypes.bool,
   replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),
   showSearchIcon: PropTypes.bool,
@@ -174,6 +177,7 @@ App.defaultProps = {
   colorSet: null,
   imageCompression: {},
   disableAutoSelect: false,
+  uikitOptions: undefined,
 
   // The below configs are duplicates of the Dashboard UIKit Configs.
   // Since their default values will be set in the Sendbird component,
diff --git a/src/utils/typeHelpers/partialDeep.ts b/src/utils/typeHelpers/partialDeep.ts
@@ -0,0 +1,18 @@
+/**
+ * PartialDeep enables partial deep cloning of objects or nested objects.
+ * It recursively makes the properties of the given type optional,
+ * allowing partial modification at any level of nesting.
+ *
+ * Use case:
+ * When working with complex data structures, selectively modify properties of an object
+ * while maintaining the original structure and values.
+ *
+ * Brought the simplified idea from https://github.com/sindresorhus/type-fest/blob/main/source/partial-deep.d.ts
+ * */
+export type PartialDeep<T> = T extends object
+  ? T extends (...args: any[]) => any
+    ? T
+    : {
+        [P in keyof T]?: PartialDeep<T[P]>;
+      }
+  : T;
