MM-18213 - Implement Team Icon common component + storybook (mattermo…

…st#3626)

.eslintrc.json

@@ -79,6 +79,7 @@
  "rules": {
  "@typescript-eslint/no-var-requires": 0,
  "@typescript-eslint/prefer-interface": 0,
+ "@typescript-eslint/explicit-function-return-type": 0,
  "@typescript-eslint/indent": [
  2,
  4,

.gitignore

@@ -14,3 +14,4 @@ mattermost-webapp.iml
 e2e/node_modules
 e2e/cypress/videos
 e2e/results
+storybook-static

components/admin_console/permission_schemes_settings/permission_team_scheme_settings/team_in_list/team_in_list.jsx

@@ -5,7 +5,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {FormattedMessage} from 'react-intl';
 
-import TeamInfo from 'components/team_info';
+import TeamIcon from 'components/widgets/team_icon/team_icon';
+
+import {imageURLForTeam} from 'utils/utils';
 
 export default class TeamInList extends React.Component {
  static propTypes = {
@@ -20,7 +22,10 @@ export default class TeamInList extends React.Component {
  className='team'
  key={team.id}
  >
- <TeamInfo team={team}/>
+ <TeamIcon
+ name={team.display_name}
+ url={imageURLForTeam(team)}
+ />
  <a
  className='remove'
  onClick={() => this.props.onRemoveTeam(team.id)}

components/admin_console/team_channel_settings/team/details/__snapshots__/team_profile.test.jsx.snap

@@ -21,9 +21,10 @@ exports[`admin_console/team_channel_settings/team/TeamProfile should match snaps
  <div
  className="col-sm-2 large-team-image-col"
  >
- <TeamButton
- displayName="test"
- teamIconUrl={null}
+ <TeamIcon
+ name="test"
+ size="lg"
+ url={null}
  />
  </div>
  <div

components/admin_console/team_channel_settings/team/details/team_profile.jsx

@@ -11,7 +11,7 @@ import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx'
 
 import * as Utils from 'utils/utils';
 
-import TeamImage from './team_image.jsx';
+import TeamIcon from 'components/widgets/team_icon/team_icon';
 
 export function TeamProfile({team}) {
  const teamIconUrl = Utils.imageURLForTeam(team);
@@ -30,9 +30,10 @@ export function TeamProfile({team}) {
  <div className='group-teams-and-channels--body'>
  <div className='row'>
  <div className='col-sm-2 large-team-image-col'>
- <TeamImage
- displayName={team.display_name}
- teamIconUrl={teamIconUrl}
+ <TeamIcon
+ name={team.display_name}
+ size='lg'
+ url={teamIconUrl}
  />
  </div>
  <div className='col-sm-10'>

components/admin_console/team_channel_settings/team/list/__snapshots__/team_row.test.jsx.snap

@@ -11,13 +11,11 @@ exports[`admin_console/team_channel_settings/team/TeamRow should match snapshot
  <div
  className="group-name adjusted center-row row-content"
  >
- <div>
- <TeamButton
- displayName="team"
- small={true}
- teamIconUrl={null}
- />
- </div>
+ <TeamIcon
+ name="team"
+ size="sm"
+ url={null}
+ />
  <div>
  <b>
  team

components/admin_console/team_channel_settings/team/list/team_row.jsx

@@ -7,8 +7,7 @@ import {Link} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
 
 import * as Utils from 'utils/utils';
-
-import TeamImage from '../details/team_image.jsx';
+import TeamIcon from 'components/widgets/team_icon/team_icon';
 
 export default class TeamRow extends React.Component {
  static propTypes = {
@@ -30,14 +29,11 @@ export default class TeamRow extends React.Component {
  >
  <div className='group-row group-row-large'>
  <div className='group-name adjusted center-row row-content'>
- <div>
- <TeamImage
- small={true}
- teamIconUrl={teamIconUrl}
- displayName={team.display_name}
- />
-
- </div>
+ <TeamIcon
+ size='sm'
+ url={teamIconUrl}
+ name={team.display_name}
+ />
  <div>
  <b>{team.display_name}</b>
  {team.description && (

components/team_selector_modal/team_selector_modal.jsx

@@ -10,10 +10,11 @@ import Constants, {ModalIdentifiers} from 'utils/constants.jsx';
 import {localizeMessage} from 'utils/utils.jsx';
 
 import MultiSelect from 'components/multiselect/multiselect.jsx';
-import TeamInfo from 'components/team_info.jsx';
 import ConfirmModal from 'components/confirm_modal.jsx';
+import TeamIcon from 'components/widgets/team_icon/team_icon';
 
 import FormattedMarkdownMessage from 'components/formatted_markdown_message.jsx';
+import {imageURLForTeam} from 'utils/utils';
 
 const TEAMS_PER_PAGE = 50;
 
@@ -154,7 +155,10 @@ export default class TeamSelectorModal extends React.Component {
  <div
  className='more-modal__details'
  >
- <TeamInfo team={option}/>
+ <TeamIcon
+ name={option.display_name}
+ url={imageURLForTeam(option)}
+ />
  </div>
  <div className='more-modal__actions'>
  <div className='more-modal__actions--round'>