Verified Commit ef6674fd authored by Marek Veselý's avatar Marek Veselý
Browse files

feat: add usernames to team tabs

parent ac702841

analyst/src/components/TeamSelector/TeamButton.tsx

+38 −8
Original line number Diff line number Diff line 
import { Classes } from '@blueprintjs/core'

import { css, cx } from '@emotion/css'

import type { Team } from '@inject/graphql'

import { TabButton } from '@inject/shared'

import type { FC } from 'react'
@@ -12,11 +14,39 @@ export const TeamButton: FC<TeamButtonProps> = ({ 
  team,

  selectedTeamId,

  onClick,

}) => (

}) => {

  const users = team?.users || []

  const usersTextFull = users

    .map(user => {

      const { firstName, lastName, username } = user

      return firstName && lastName

        ? `${lastName}, ${firstName} (${username})`

        : username

    })

    .join('; ')

  const usersText =

    usersTextFull.length <= 12

      ? usersTextFull

      : `${usersTextFull.slice(0, 9)}...`



  return (

    <TabButton

      active={selectedTeamId === team?.id || (!team && !selectedTeamId)}

      onClick={onClick}

    >

      <div

        className={css`

          display: flex;

          flex-direction: column;

        `}

      >

        {team?.name || 'All teams'}

        {usersText && (

          <div className={cx(Classes.TEXT_MUTED, Classes.TEXT_SMALL)}>

            {usersText}

          </div>

        )}

      </div>

    </TabButton>

  )

}

analyst/src/components/TeamSelector/index.tsx

+2 −1
Original line number Diff line number Diff line
@@ -23,6 +23,7 @@ export const TeamSelector: FC<TeamSelectorProps> = ({ 
    <div

      className={css`

        margin-left: auto;

        align-self: center;

      `}

    >

      <Popover
@@ -73,7 +74,7 @@ export const TeamSelector: FC<TeamSelectorProps> = ({ 
  return (

    <OverflowList

      className={css`

        align-items: center;

        align-items: stretch;

      `}

      collapseFrom={Boundary.END}

      items={items}

shared/components/TabButton/index.tsx

+1 −0
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ export const TabButton: FC<TabButtonProps> = ({ 
    minimal

    style={{

      minWidth: 'fit-content',

      height: '100%',

    }}

    active={active}

    onClick={onClick}