fix: Improve the Channel Settings Accordion Stability (#1040)

[CLNP-2679](https://sendbird.atlassian.net/browse/CLNP-2679)

### ChangeLog & Fix
* Add a logger to the `GroupChannelProvider` for failing get channel
* Reduce the `OGTag` height in the mobile layout
* Prevent force refreshing of the `ChannelSettings`
* Keep context menu when failing the member operations
(register/unregister operator, mute/unmute)
* Keep profile image during member operations on the `MembersModal`

Author: HoonBaek

.storybook/preview-head.html

@@ -1,16 +1,3 @@
-<script>
-  setTimeout(() => {
-    // workaround to add light theme to storybook
-    // todo: create a plugin/decorator
-    const body = document.querySelector('body');
-    body.classList.add('sendbird-theme--light');
-
-    const modalRoot = document.createElement('div');
-    modalRoot.setAttribute('id', 'sendbird-modal-root');
-    modalRoot.style.position = 'fixed';
-    modalRoot.style.zIndex = '99999999999';
-    body.appendChild(modalRoot);
-  });
-</script>
+<script></script>
 <!-- for disable ios zoom https://stackoverflow.com/questions/5119090/iphone-keyboard-is-changing-zoom-scale-of-my-web-site -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>

src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx

@@ -18,7 +18,7 @@ import InviteUsers from './InviteUsersModal';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
-import uuidv4 from '../../../../utils/uuid';
+import { noop } from '../../../../utils/utils';
 
 export const MemberList = (): ReactElement => {
   const [members, setMembers] = useState<Array<Member>>([]);
@@ -29,7 +29,6 @@ export const MemberList = (): ReactElement => {
   const state = useSendbirdStateContext();
   const {
     channel,
-    setChannelUpdateId,
   } = useChannelSettingsContext();
   const { stringSet } = useContext(LocalizationContext);
 
@@ -58,12 +57,11 @@ export const MemberList = (): ReactElement => {
     memberUserListQuery.next().then((members) => {
       setMembers(members);
       setHasNext(memberUserListQuery.hasNext);
-      setChannelUpdateId(uuidv4());
     });
   }, [channel]);
 
   return (
-    <div className="sendbird-channel-settings-member-list sendbird-accordion">
+    <div className="sendbird-channel-settings-member-list">
       {
         members.map((member) => (
           <UserListItem
@@ -103,10 +101,7 @@ export const MemberList = (): ReactElement => {
                             refreshList();
                             closeDropdown();
                           }}
-                          onError={() => {
-                            // FIXME: handle error later
-                            closeDropdown();
-                          }}
+                          onError={noop} // TODO: We will handle error
                           dataSbId={`channel_setting_member_context_menu_${(
                             member.role !== 'operator'
                           ) ? 'register_as_operator' : 'unregister_operator'}`}
@@ -127,10 +122,7 @@ export const MemberList = (): ReactElement => {
                                 refreshList();
                                 closeDropdown();
                               }}
-                              onError={() => {
-                                // FIXME: handle error later
-                                closeDropdown();
-                              }}
+                              onError={noop} // TODO: We will handle error
                               dataSbId={`channel_setting_member_context_menu_${member.isMuted ? 'unmute' : 'mute'}`}
                             >
                               {

src/modules/ChannelSettings/components/ModerationPanel/index.tsx

@@ -24,13 +24,13 @@ import MutedMemberList from './MutedMemberList';
 
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 
-const kFormatter = (num: number): string|number => {
+const kFormatter = (num: number): string | number => {
   return Math.abs(num) > 999
     ? `${(Math.abs(num) / 1000).toFixed(1)}K`
     : num;
 };
 
-export default function AdminPannel(): ReactElement {
+export default function ModerationPanel(): ReactElement {
   const [frozen, setFrozen] = useState(false);
 
   const { stringSet } = useContext(LocalizationContext);

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -142,7 +142,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const { config, stores } = useSendbirdStateContext();
 
   const { sdkStore } = stores;
-  const { markAsReadScheduler } = config;
+  const { markAsReadScheduler, logger } = config;
 
   // State
   const [quoteMessage, setQuoteMessage] = useState<SendableMessageType>(null);
@@ -154,7 +154,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const { scrollRef, scrollPubSub, scrollDistanceFromBottomRef, isScrollBottomReached, setIsScrollBottomReached } = useMessageListScroll(scrollBehavior);
   const messageInputRef = useRef(null);
 
-  const toggleReaction = useToggleReactionCallback(currentChannel, config.logger);
+  const toggleReaction = useToggleReactionCallback(currentChannel, logger);
   const replyType = getCaseResolvedReplyType(moduleReplyType ?? config.groupChannel.replyType).upperCase;
   const threadReplySelectType = getCaseResolvedThreadReplySelectType(
     moduleThreadReplySelectType ?? config.groupChannel.threadReplySelectType,
@@ -198,7 +198,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       setFetchChannelError(null);
     },
     onChannelUpdated: (channel) => setCurrentChannel(channel),
-    logger: config.logger,
+    logger,
   });
 
   useOnScrollPositionChangeDetectorWithRef(scrollRef, {
@@ -263,6 +263,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
       } catch (error) {
         setCurrentChannel(null);
         setFetchChannelError(error);
+        logger?.error?.('GroupChannelProvider: error when fetching channel', error);
       } finally {
         // Reset states when channel changes
         setQuoteMessage(null);

src/ui/Accordion/Accordion.tsx

@@ -0,0 +1,77 @@
+import React, { type ReactElement, useMemo } from 'react';
+import './index.scss';
+
+import Icon, { IconTypes } from '../Icon';
+import { useAccordionGroupContext } from './AccordionGroup';
+
+export interface AccordionProps {
+  className?: string;
+  id: string;
+  renderTitle?: () => ReactElement;
+  renderContent?: () => ReactElement;
+  renderFooter?: () => ReactElement;
+}
+
+export const Accordion = ({
+  className,
+  id,
+  renderTitle,
+  renderContent,
+  renderFooter,
+}:AccordionProps) => {
+  const {
+    openedListKeys,
+    addOpenedListKey,
+    removeOpenedListKey,
+  } = useAccordionGroupContext();
+  const isOpened = useMemo(() => openedListKeys.includes(id), [openedListKeys]);
+  const handleClick = () => {
+    if (isOpened) {
+      removeOpenedListKey(id);
+    } else {
+      addOpenedListKey(id);
+    }
+  };
+
+  return (
+    <div className={`sendbird-accordion ${className} ${isOpened ? 'sendbird-accordion--opened' : 'sendbird-accordion--closed'}`}>
+      <div
+        className="sendbird-accordion__panel-header"
+        id={id}
+        role="switch"
+        aria-checked={false}
+        onClick={handleClick}
+        onKeyDown={handleClick}
+        tabIndex={0}
+      >
+        {renderTitle()}
+        <Icon
+          type={IconTypes.CHEVRON_RIGHT}
+          className={[
+            'sendbird-accordion__panel-icon-right',
+            'sendbird-accordion__panel-icon--chevron',
+            (isOpened ? 'sendbird-accordion__panel-icon--open' : ''),
+          ].join(' ')}
+          height="24px"
+          width="24px"
+        />
+      </div>
+      {
+        isOpened && (
+          <div className="sendbird-accordion-opened-list">
+            <div className="sendbird-accordion__list">
+              {renderContent()}
+            </div>
+            {
+              renderFooter && (
+                <div className="sendbird-accordion__footer">
+                  {renderFooter()}
+                </div>
+              )
+            }
+          </div>
+        )
+      }
+    </div>
+  );
+};

src/ui/Accordion/AccordionGroup.tsx

@@ -1,22 +1,72 @@
-// Wraps all the accordions in an accordion set
-// keep one accordion open at a time
-import React, { ReactElement, useState } from 'react';
+import React, { type ReactElement, createContext, useState, useContext } from 'react';
+import { noop } from '../../utils/utils';
 
-import { Provider } from './context';
+// # Context
+export interface AccordionGroupContextType {
+  openedListKeys: Array<string>;
+  addOpenedListKey: (key: string) => void;
+  removeOpenedListKey: (key: string) => void;
+  clearOpenedListKeys: () => void;
+  allowMultipleOpen: boolean;
+}
+type AGCType = AccordionGroupContextType;
+export const AccordionGroupContext = createContext<AccordionGroupContextType>({
+  openedListKeys: [],
+  addOpenedListKey: noop,
+  removeOpenedListKey: noop,
+  clearOpenedListKeys: noop,
+  allowMultipleOpen: false,
+});
 
-interface Props {
-  children: Array<ReactElement> | ReactElement;
+// # Provider Component
+export interface AccordionGroupProps {
   className?: string;
+  children: ReactElement | Array<ReactElement>;
+  allowMultipleOpen?: boolean;
 }
-
-export default function AccordionGroup({
+export const AccordionGroupProvider = ({
+  className,
   children,
-  className = '',
-}: Props): ReactElement {
-  const [opened, setOpened] = useState('');
+  allowMultipleOpen = false,
+}: AccordionGroupProps) => {
+  const [openedListKeys, setOpenedListKeys] = useState([]);
+
+  const addOpenedListKey: AGCType['addOpenedListKey'] = (key) => {
+    setOpenedListKeys((prevList) => {
+      if (!allowMultipleOpen) {
+        return [key];
+      }
+      prevList.push(key);
+      return prevList;
+    });
+  };
+  const removeOpenedListKey: AGCType['removeOpenedListKey'] = (key) => {
+    setOpenedListKeys((prevList) => prevList.filter((k) => k !== key));
+  };
+  const clearOpenedListKeys: AGCType['clearOpenedListKeys'] = () => {
+    setOpenedListKeys([]);
+  };
+
   return (
-    <Provider value={{ opened, setOpened }}>
-      <div className={className}>{ children }</div>
-    </Provider>
+    <div className={`sendbird-accordion-group-provider ${className}`}>
+      <AccordionGroupContext.Provider
+        value={{
+          openedListKeys,
+          addOpenedListKey,
+          removeOpenedListKey,
+          clearOpenedListKeys,
+          allowMultipleOpen,
+        }}
+      >
+        {children}
+      </AccordionGroupContext.Provider>
+    </div>
   );
-}
+};
+export const useAccordionGroupContext = () => {
+  const context = useContext(AccordionGroupContext);
+  if (!context) throw new Error('No accordion group context available. Make sure you are rending <AccordionGroupContext />.');
+  return context;
+};
+
+export default AccordionGroupProvider;

src/ui/Accordion/index.scss

@@ -1,7 +1,11 @@
 @import '../../styles/variables';
 
+.sendbird-accordion.sendbird-accordion--closed {
+  @include themed() {
+    border-bottom: 0px;
+  }
+}
 .sendbird-accordion {
-  padding: 8px 0px 16px 0px;
   position: relative;
   box-sizing: border-box;
   @include themed() {
@@ -23,6 +27,11 @@
   }
 }
 
+.sendbird-accordion__list {
+  padding-top: 8px;
+  padding-bottom: 16px;
+}
+
 .sendbird-accordion__panel-header {
   cursor: pointer;
   position: relative;