Add bot to channel button (#22008)

* feat: create AddBotToChannel button

* feat: move addbottochannel to bot.tsx

* feat: make icon button component and use it

* chore: update snaps

* fix: Make add to channel props optional

shared/chat/conversation/info-panel/bot.tsx

@@ -1,14 +1,49 @@
 import * as React from 'react'
 import * as Kb from '../../../common-adapters'
 import * as Styles from '../../../styles'
+import * as Types from '../../../constants/types/chat2'
+import * as Container from '../../../util/container'
+import * as Chat2Gen from '../../../actions/chat2-gen'
 import {FeaturedBot} from 'constants/types/rpc-gen'
 
 type Props = FeaturedBot & {
+  conversationIDKey?: Types.ConversationIDKey
   description?: string
   onClick: (username: string) => void
+  showAddToChannel?: boolean
 }
 
-const Bot = ({botAlias, description, botUsername, onClick, ownerTeam, ownerUser}: Props) => {
+type AddButtonProps = {
+  conversationIDKey: Types.ConversationIDKey
+  username: string
+}
+
+const AddBotToChannel = ({conversationIDKey, username}: AddButtonProps) => {
+  const dispatch = Container.useDispatch()
+  const addToChannel = () =>
+    dispatch(Chat2Gen.createAddUsersToChannel({conversationIDKey, usernames: [username]}))
+  return (
+    <Kb.Button
+      type="Dim"
+      mode="Secondary"
+      onClick={addToChannel}
+      style={styles.addButton}
+      icon="iconfont-new"
+      tooltip="Add to this channel"
+    />
+  )
+}
+
+const Bot = ({
+  botAlias,
+  conversationIDKey,
+  description,
+  botUsername,
+  showAddToChannel,
+  onClick,
+  ownerTeam,
+  ownerUser,
+}: Props) => {
   const lower = (
     <Kb.Box2
       direction="horizontal"
@@ -55,6 +90,9 @@ const Bot = ({botAlias, description, botUsername, onClick, ownerTeam, ownerUser}
               {usernameDisplay}
               {lower}
             </Kb.Box2>
+            {showAddToChannel && conversationIDKey && (
+              <AddBotToChannel username={botUsername} conversationIDKey={conversationIDKey} />
+            )}
           </Kb.Box2>
         </Kb.Box2>
         <Kb.Divider style={styles.divider} />
@@ -66,6 +104,9 @@ const Bot = ({botAlias, description, botUsername, onClick, ownerTeam, ownerUser}
 const styles = Styles.styleSheetCreate(
   () =>
     ({
+      addButton: {
+        marginLeft: Styles.globalMargins.tiny,
+      },
       avatarStyle: Styles.platformStyles({
         isElectron: {marginRight: Styles.globalMargins.tiny},
         isMobile: {marginRight: Styles.globalMargins.small},

shared/chat/conversation/info-panel/index.tsx

@@ -492,7 +492,18 @@ class _InfoPanel extends React.PureComponent<InfoPanelProps> {
           if (!item.botUsername) {
             return null
           } else {
-            return <Bot {...item} onClick={this.props.onBotSelect} />
+            return (
+              <Bot
+                {...item}
+                conversationIDKey={this.props.selectedConversationIDKey}
+                onClick={this.props.onBotSelect}
+                showAddToChannel={
+                  this.props.installedBots.includes(item) &&
+                  !this.props.smallTeam &&
+                  !this.props.participants.find(p => p.username === item.botUsername)
+                }
+              />
+            )
           }
         }
         sections.push(tabsSection)

shared/common-adapters/button.stories.tsx

@@ -76,6 +76,36 @@ const load = () => {
             ))}
           </Box2>
         </Wrapper>
+        <Wrapper>
+          <Box2
+            direction="vertical"
+            gap="small"
+            gapStart={true}
+            gapEnd={true}
+            style={{alignSelf: 'flex-start'}}
+          >
+            <Text type="BodySemibold">Icon</Text>
+            {types.map(t => (
+              <Wrapper key={t}>
+                <Button
+                  {...commonProps}
+                  type={t}
+                  icon="iconfont-fire"
+                  tooltip="Icon button!"
+                  label={undefined}
+                />
+                <Button
+                  {...commonProps}
+                  type={t}
+                  icon="iconfont-fire"
+                  tooltip="Icon button!"
+                  label={undefined}
+                  mode="Secondary"
+                />
+              </Wrapper>
+            ))}
+          </Box2>
+        </Wrapper>
         <Wrapper>
           <Box2
             direction="vertical"

shared/common-adapters/button.tsx

@@ -3,10 +3,12 @@ import Badge from './badge'
 import {Box, Box2} from './box'
 import ClickableBox from './clickable-box'
 import Icon from './icon'
+import WithTooltip from './with-tooltip'
 import * as React from 'react'
 import Text, {StylesTextCrossPlatform} from './text'
 import * as Styles from '../styles'
 import './button.css'
+import {IconType} from './icon.constants-gen'
 
 const Kb = {
   Badge,
@@ -15,12 +17,25 @@ const Kb = {
   ClickableBox,
   Icon,
   Text,
+  WithTooltip,
 }
 
 export type ButtonType = 'Default' | 'Success' | 'Danger' | 'Wallet' | 'Dim'
 export type ButtonColor = 'blue' | 'red' | 'green' | 'purple' | 'black' | 'yellow'
+
+// if icon exists, tooltip MUST exist
+type WithIconProps =
+  | {
+      icon?: never
+      tooltip?: string
+    }
+  | {
+      icon: IconType
+      tooltip: string
+    }
+
 // Either type or backgroundColor must be set
-export type Props = {
+type DefaultProps = {
   badgeNumber?: number
   children?: React.ReactNode
   onClick?: (event: React.BaseSyntheticEvent) => void
@@ -43,6 +58,8 @@ export type Props = {
   className?: string
 }
 
+export type Props = DefaultProps & WithIconProps
+
 const Progress = ({small, white}: {small?: boolean; white: boolean}) => {
   const Animation = require('./animation').default
   return (
@@ -64,6 +81,10 @@ const Button = React.forwardRef<ClickableBox, Props>((props: Props, ref: React.R
     ? (backgroundColorLabelStyles[mode + (mode === 'Secondary' ? '' : props.backgroundColor)] as any)
     : labelStyles[mode + type]
 
+  if (props.icon) {
+    containerStyle = Styles.collapseStyles([containerStyle, styles.icon])
+  }
+
   if (props.fullWidth) {
     containerStyle = Styles.collapseStyles([containerStyle, styles.fullWidth])
   }
@@ -122,7 +143,7 @@ const Button = React.forwardRef<ClickableBox, Props>((props: Props, ref: React.R
       <Kb.Box className={Styles.classNames(underlayClassNames)} />
     ) : null
 
-  return (
+  const content = (
     <Kb.ClickableBox
       ref={ref}
       className={Styles.classNames(classNames)}
@@ -156,12 +177,24 @@ const Button = React.forwardRef<ClickableBox, Props>((props: Props, ref: React.R
               {props.subLabel}
             </Kb.Text>
           )}
+          {!!props.icon && (
+            <Kb.Icon
+              type={props.icon}
+              sizeType="Default"
+              style={Styles.collapseStyles([labelStyle, props.labelStyle])}
+            />
+          )}
         </Kb.Box2>
         {!!props.badgeNumber && <Kb.Badge badgeNumber={props.badgeNumber} badgeStyle={styles.badge} />}
         {!!props.waiting && <Progress small={props.small} white={whiteSpinner} />}
       </Kb.Box>
     </Kb.ClickableBox>
   )
+  if (props.tooltip) {
+    return <Kb.WithTooltip tooltip={props.tooltip}>{content}</Kb.WithTooltip>
+  }
+
+  return content
 })
 
 const typeToColorName = {
@@ -208,6 +241,14 @@ const styles = Styles.styleSheetCreate(() => ({
     maxWidth: 460,
     width: '100%',
   },
+  icon: {
+    borderRadius: Styles.borderRadius,
+    height: regularHeight,
+    minWidth: undefined,
+    paddingLeft: Styles.isMobile ? Styles.globalMargins.xtiny : Styles.globalMargins.tiny,
+    paddingRight: Styles.isMobile ? Styles.globalMargins.xtiny : Styles.globalMargins.tiny,
+    width: regularHeight,
+  },
   labelContainer: Styles.platformStyles({
     common: {height: '100%', position: 'relative'},
     isElectron: {pointerEvents: 'none'}, // need hover etc. to go through to underlay