Port to new Slot property passthrough

client/coral-embed-stream/src/components/Embed.js

@@ -63,6 +63,7 @@ export default class Embed extends React.Component {
     } = this.props;
     const hasHighlightedComment = !!commentId;
     const popupUrl = `login?parentUrl=${encodeURIComponent(parentUrl)}`;
+    const slotPassthrough = { data, root };
 
     return (
       <div
@@ -84,7 +85,7 @@ export default class Embed extends React.Component {
           />
         </IfSlotIsNotEmpty>
 
-        <Slot data={data} queryData={{ root }} fill="embed" />
+        <Slot passthrough={slotPassthrough} fill="embed" />
 
         <ExtendableTabPanel
           className="talk-embed-stream-tab-bar"
@@ -94,8 +95,7 @@ export default class Embed extends React.Component {
           tabSlot="embedStreamTabs"
           tabSlotPrepend="embedStreamTabsPrepend"
           tabPaneSlot="embedStreamTabPanes"
-          slotProps={{ data }}
-          queryData={{ root }}
+          slotPassthrough={slotPassthrough}
           tabs={this.getTabs()}
           tabPanes={[
             <TabPane

client/coral-embed-stream/src/containers/ExtendableTabPanel.js

@@ -53,8 +53,7 @@ class ExtendableTabPanelContainer extends React.Component {
     return plugins.getSlotElements(
       slot,
       props.reduxState,
-      props.slotProps,
-      props.queryData
+      props.slotPassthrough
     );
   }
 
@@ -132,8 +131,7 @@ ExtendableTabPanelContainer.propTypes = {
   tabSlot: PropTypes.string.isRequired,
   tabSlotPrepend: PropTypes.string.isRequired,
   tabPaneSlot: PropTypes.string.isRequired,
-  slotProps: PropTypes.object.isRequired,
-  queryData: PropTypes.object,
+  slotPassthrough: PropTypes.object,
   className: PropTypes.string,
   sub: PropTypes.bool,
   loading: PropTypes.bool,

client/coral-embed-stream/src/tabs/configure/components/Settings.js

@@ -25,9 +25,9 @@ class Settings extends React.Component {
       onQuestionBoxContentChange,
       canSave,
       onApply,
-      slotProps,
-      queryData,
+      slotPassthrough,
     } = this.props;
+
     return (
       <div className={styles.wrapper}>
         <div className={styles.container}>
@@ -77,7 +77,7 @@ class Settings extends React.Component {
               </div>
             )}
           </Configuration>
-          <Slot fill="streamSettings" queryData={queryData} {...slotProps} />
+          <Slot fill="streamSettings" passthrough={slotPassthrough} />
         </div>
       </div>
     );
@@ -85,8 +85,7 @@ class Settings extends React.Component {
 }
 
 Settings.propTypes = {
-  queryData: PropTypes.object.isRequired,
-  slotProps: PropTypes.object.isRequired,
+  slotPassthrough: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   onToggleModeration: PropTypes.func.isRequired,

client/coral-embed-stream/src/tabs/configure/containers/Settings.js

@@ -63,11 +63,20 @@ class SettingsContainer extends React.Component {
       errors,
       updatePending,
     } = this.props;
+
+    const slotPassthrough = {
+      root,
+      asset,
+      settings: mergedSettings,
+      data,
+      updatePending,
+      errors,
+    };
+
     return (
       <Settings
         settings={mergedSettings}
-        queryData={{ root, asset, settings: mergedSettings }}
-        slotProps={{ data, updatePending, errors }}
+        slotPassthrough={slotPassthrough}
         savePending={this.savePending}
         onToggleModeration={this.toggleModeration}
         onTogglePremodLinks={this.togglePremodLinks}

client/coral-embed-stream/src/tabs/profile/components/Comment.js

@@ -24,7 +24,7 @@ class Comment extends React.Component {
   render() {
     const { comment, data, root } = this.props;
     const reactionCount = getTotalReactionsCount(comment.action_summaries);
-    const queryData = { root, comment, asset: comment.asset };
+    const slotPassthrough = { data, root, comment, asset: comment.asset };
 
     return (
       <div className={styles.myComment}>
@@ -33,8 +33,7 @@ class Comment extends React.Component {
             fill="commentContent"
             defaultComponent={CommentContent}
             className={cn(styles.commentBody, 'my-comment-body')}
-            data={data}
-            queryData={queryData}
+            passthrough={slotPassthrough}
           />
           <div className={cn(styles.commentSummary, 'comment-summary')}>
             <span
@@ -98,9 +97,10 @@ class Comment extends React.Component {
                 fill="historyCommentTimestamp"
                 defaultComponent={CommentTimestamp}
                 className={'talk-history-comment-published-date'}
-                created_at={comment.created_at}
-                data={data}
-                queryData={queryData}
+                passthrough={{
+                  created_at: comment.created_at,
+                  ...slotPassthrough,
+                }}
                 inline
               />
             </li>

client/coral-embed-stream/src/tabs/profile/components/Profile.js

@@ -14,36 +14,41 @@ const Profile = ({
   root,
   activeTab,
   setActiveTab,
-}) => (
-  <div className="talk-my-profile talk-profile-container">
-    <div className={styles.userInfo}>
-      <h2 className={styles.username}>{username}</h2>
-      {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
+}) => {
+  const slotPassthrough = {
+    data,
+    root,
+  };
+  return (
+    <div className="talk-my-profile talk-profile-container">
+      <div className={styles.userInfo}>
+        <h2 className={styles.username}>{username}</h2>
+        {emailAddress ? <p className={styles.email}>{emailAddress}</p> : null}
+      </div>
+      <Slot fill="profileSections" passthrough={slotPassthrough} />
+      <ExtendableTabPanel
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        fallbackTab="comments"
+        tabSlot="profileTabs"
+        tabSlotPrepend="profileTabsPrepend"
+        tabPaneSlot="profileTabPanes"
+        slotPassthrough={slotPassthrough}
+        tabs={[
+          <Tab key="comments" tabId="comments">
+            {t('framework.my_comments')}
+          </Tab>,
+        ]}
+        tabPanes={[
+          <TabPane key="comments" tabId="comments">
+            <CommentHistory data={data} root={root} />
+          </TabPane>,
+        ]}
+        sub
+      />
     </div>
-    <Slot fill="profileSections" data={data} queryData={{ root }} />
-    <ExtendableTabPanel
-      activeTab={activeTab}
-      setActiveTab={setActiveTab}
-      fallbackTab="comments"
-      tabSlot="profileTabs"
-      tabSlotPrepend="profileTabsPrepend"
-      tabPaneSlot="profileTabPanes"
-      slotProps={{ data }}
-      queryData={{ root }}
-      tabs={[
-        <Tab key="comments" tabId="comments">
-          {t('framework.my_comments')}
-        </Tab>,
-      ]}
-      tabPanes={[
-        <TabPane key="comments" tabId="comments">
-          <CommentHistory data={data} root={root} />
-        </TabPane>,
-      ]}
-      sub
-    />
-  </div>
-);
+  );
+};
 
 Profile.propTypes = {
   username: PropTypes.string,

client/coral-embed-stream/src/tabs/stream/components/Comment.js

@@ -535,12 +535,9 @@ export default class Comment extends React.Component {
     );
 
     // props that are passed down the slots.
-    const slotProps = {
+    const slotPassthrough = {
       data,
       depth,
-    };
-
-    const queryData = {
       root,
       asset,
       comment,
@@ -551,8 +548,7 @@ export default class Comment extends React.Component {
         <Slot
           className={cn(styles.commentAvatar, 'talk-stream-comment-avatar')}
           fill="commentAvatar"
-          {...slotProps}
-          queryData={queryData}
+          passthrough={slotPassthrough}
           inline
         />
 
@@ -573,8 +569,7 @@ export default class Comment extends React.Component {
                 className={cn(styles.username, 'talk-stream-comment-user-name')}
                 fill="commentAuthorName"
                 defaultComponent={CommentAuthorName}
-                queryData={queryData}
-                {...slotProps}
+                passthrough={slotPassthrough}
               />
 
               <div
@@ -591,8 +586,7 @@ export default class Comment extends React.Component {
                     'talk-stream-comment-author-tags'
                   )}
                   fill="commentAuthorTags"
-                  queryData={queryData}
-                  {...slotProps}
+                  passthrough={slotPassthrough}
                   inline
                 />
               </div>
@@ -607,9 +601,10 @@ export default class Comment extends React.Component {
                   fill="commentTimestamp"
                   defaultComponent={CommentTimestamp}
                   className={'talk-stream-comment-published-date'}
-                  created_at={comment.created_at}
-                  queryData={queryData}
-                  {...slotProps}
+                  passthrough={{
+                    created_at: comment.created_at,
+                    ...slotPassthrough,
+                  }}
                 />
                 {comment.editing && comment.editing.edited ? (
                   <span>
@@ -624,8 +619,7 @@ export default class Comment extends React.Component {
             <Slot
               className={styles.commentInfoBar}
               fill="commentInfoBar"
-              {...slotProps}
-              queryData={queryData}
+              passthrough={slotPassthrough}
             />
 
             {isActive &&
@@ -665,9 +659,8 @@ export default class Comment extends React.Component {
                   fill="commentContent"
                   className="talk-stream-comment-content"
                   defaultComponent={CommentContent}
-                  {...slotProps}
-                  queryData={queryData}
                   size={1}
+                  passthrough={slotPassthrough}
                 />
               </div>
             )}
@@ -678,8 +671,7 @@ export default class Comment extends React.Component {
                 <div className="talk-embed-stream-comment-actions-container-left commentActionsLeft comment__action-container">
                   <Slot
                     fill="commentReactions"
-                    {...slotProps}
-                    queryData={queryData}
+                    passthrough={slotPassthrough}
                     inline
                   />
 
@@ -696,9 +688,7 @@ export default class Comment extends React.Component {
                 <div className="talk-embed-stream-comment-actions-container-right commentActionsRight comment__action-container">
                   <Slot
                     fill="commentActions"
-                    wrapperComponent={ActionButton}
-                    {...slotProps}
-                    queryData={queryData}
+                    passthrough={slotPassthrough}
                     inline
                   />
                   <ActionButton>

client/coral-embed-stream/src/tabs/stream/components/DraftArea.js

@@ -43,20 +43,13 @@ export default class DraftArea extends React.Component {
       charCountEnable,
       maxCharCount,
       onChange,
-      queryData,
       isReply,
+      registerHook,
+      unregisterHook,
+      root,
+      comment,
     } = this.props;
 
-    const tASettings = {
-      value,
-      placeholder,
-      id,
-      onChange,
-      rows,
-      disabled,
-      isReply,
-    };
-
     return (
       <div>
         <div
@@ -69,10 +62,19 @@ export default class DraftArea extends React.Component {
             fill="draftArea"
             defaultComponent={DraftAreaContent}
             className={styles.content}
-            queryData={queryData}
-            registerHook={this.props.registerHook}
-            unregisterHook={this.props.unregisterHook}
-            {...tASettings}
+            passthrough={{
+              root,
+              comment,
+              registerHook,
+              unregisterHook,
+              value,
+              placeholder,
+              id,
+              onChange,
+              rows,
+              disabled,
+              isReply,
+            }}
           />
           <Slot fill="commentInputArea" />
         </div>
@@ -96,7 +98,8 @@ DraftArea.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
   rows: PropTypes.number,
-  queryData: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  comment: PropTypes.object,
   registerHook: PropTypes.func,
   unregisterHook: PropTypes.func,
   isReply: PropTypes.bool,

client/coral-embed-stream/src/tabs/stream/components/Stream.js

@@ -147,15 +147,14 @@ class Stream extends React.Component {
       loading,
     } = this.props;
 
-    const slotProps = { data };
-    const slotQueryData = { root, asset };
+    const slotPassthrough = { data, root, asset };
 
     // `key` of `ExtendableTabPanel` depends on sorting so that we always reset
     // the state when changing sorting.
     return (
       <div className={cn('talk-stream-tab-container', styles.tabContainer)}>
         <div className={cn('talk-stream-filter-wrapper', styles.filterWrapper)}>
-          <Slot fill="streamFilter" queryData={slotQueryData} {...slotProps} />
+          <Slot fill="streamFilter" passthrough={slotPassthrough} />
         </div>
 
         <ExtendableTabPanel
@@ -166,8 +165,7 @@ class Stream extends React.Component {
           tabSlot="streamTabs"
           tabSlotPrepend="streamTabsPrepend"
           tabPaneSlot="streamTabPanes"
-          slotProps={slotProps}
-          queryData={slotQueryData}
+          slotPassthrough={slotPassthrough}
           loading={loading}
           tabs={
             <Tab tabId={'all'} key="all">
@@ -243,13 +241,13 @@ class Stream extends React.Component {
         !changedUsername &&
         !highlightedComment) ||
         keepCommentBox);
-    const slotProps = { data };
-    const slotQueryData = { root, asset };
 
     if (highlightedComment === null) {
       return <StreamError>{t('stream.comment_not_found')}</StreamError>;
     }
 
+    const slotPassthrough = { data, root, asset };
+
     return (
       <div id="stream" className={styles.root}>
         {open ? (
@@ -263,11 +261,7 @@ class Stream extends React.Component {
                 content={asset.settings.questionBoxContent}
                 icon={asset.settings.questionBoxIcon}
               >
-                <Slot
-                  fill="streamQuestionArea"
-                  queryData={slotQueryData}
-                  {...slotProps}
-                />
+                <Slot fill="streamQuestionArea" passthrough={slotPassthrough} />
               </QuestionBox>
             )}
             {!banned &&
@@ -304,7 +298,7 @@ class Stream extends React.Component {
           <p>{asset.settings.closedMessage}</p>
         )}
 
-        <Slot fill="stream" queryData={slotQueryData} {...slotProps} />
+        <Slot fill="stream" passthrough={slotPassthrough} />
 
         {currentUser && (
           <ModerationLink

client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js

@@ -190,9 +190,11 @@ class CommentBox extends React.Component {
           buttonContainerStart={
             <Slot
               fill="commentInputDetailArea"
-              registerHook={this.registerHook}
-              unregisterHook={this.unregisterHook}
-              isReply={isReply}
+              passthrough={{
+                registerHook: this.registerHook,
+                unregisterHook: this.unregisterHook,
+                isReply,
+              }}
               inline
             />
           }

client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js

@@ -42,11 +42,10 @@ class DraftAreaContainer extends React.Component {
   }
 
   render() {
-    const queryData = { comment: this.props.comment, root: this.props.root };
-
     return (
       <DraftArea
-        queryData={queryData}
+        root={this.props.root}
+        comment={this.props.comment}
         value={this.props.value}
         placeholder={this.props.placeholder}
         id={this.props.id}