<commit_before>import React from 'react';
import { withRouter } from 'react-router';
import Reflux from 'reflux';
import Radium from 'radium';
import localStorage from 'local-storage-fallback';

import SessionStore from '../../apps/Session/SessionStore';
import SessionActions from '../../apps/Session/SessionActions';
import InstancesStore from '../../apps/Instances/InstancesStore';
import InstancesActions from '../../apps/Instances/InstancesActions';

import { FontIcon, IconMenu, List, ListItem, Subheader } from 'material-ui';
import { Color, ColumnList } from '../../common/';

const HeaderInstancesDropdown = Radium(React.createClass({
  mixins: [
    Reflux.connect(InstancesStore),
    Reflux.connectFilter(SessionStore, 'currentInstance', (sessionData) => sessionData.instance)
  ],

  componentDidMount() {
    InstancesActions.fetch();
  },

  getStyles() {
    return {
      root: {
        height: 56,
        paddingTop: 5,
        paddingBottom: 2,
        paddingLeft: 24,
        backgroundColor: '#040B1A',
        color: '#828A9E',
        position: 'fixed',
        width: 256,
        zIndex: 1,
        cursor: 'pointer'
      },
      dropdownInstanceIcon: {
        left: 20,
        minWidth: 32,
        height: 32,
        fontSize: 18,
        lineHeight: '18px',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '50%',
        color: '#fff',
        backgroundColor: 'green',
        margin: '8px 16px 8px 0'
      },
      dropdownMenu: {
        left: 0,
        top: 0,
        maxHeight: 'calc(100vh - 80px)',
        overflow: 'auto',
        boxShadow: '0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)'
      },
      list: {
        minWidth: 320,
        paddingBottom: 0
      },
      separator: {
        borderTop: '1px solid #BDBDBD',
        paddingLeft: 20
      },
      dropdownText: {
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        paddingLeft: 0,
        textOverflow: 'ellipsis',
        fontSize: 16,
        lineHeight: '24px'
      },
      noInstancesItem: {
        fontWeight: 500,
        color: '#BDBDBD'
      },
      dropdownIcon: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingRight: 10
      },
      iconMenu: {
        width: '100%'
      },
      currentInstanceListItem: {
        fontWeight: 700
      }
    };
  },

  handleDropdownItemClick(instanceName) {
    const { router } = this.props;

    // redirect to main instance screen
    this.refs.instancesDropdown.close();
    SessionActions.fetchInstance(instanceName);
    localStorage.setItem('lastInstanceName', instanceName);
    router.push(`/instances/${instanceName}/`);
  },

  renderListItems(instances) {
    const styles = this.getStyles();
    const { currentInstance } = this.state;
    const defaultIconBackground = ColumnList.ColumnListConstans.DEFAULT_BACKGROUND;
    const defaultIcon = ColumnList.ColumnListConstans.DEFAULT_ICON;
    const items = instances.map((instance) => {
      const iconName = instance.metadata.icon ? `synicon-${instance.metadata.icon}` : `synicon-${defaultIcon}`;
      const iconBackground = {
        backgroundColor: Color.getColorByName(instance.metadata.color, 'dark') || defaultIconBackground
      };
      const icon = (
        <FontIcon
          className={iconName}
          style={{ ...styles.dropdownInstanceIcon, ...iconBackground }}
        />
      );

      return (
        <ListItem
          key={instance.name}
          primaryText={instance.name}
          onTouchTap={() => this.handleDropdownItemClick(instance.name)}
          style={instance.name === currentInstance.name && styles.currentInstanceListItem}
          leftIcon={icon}
          data-e2e={instance.name}
        /><commit_msg>[SYN5-455] Add deprecated info in the instances dropdown<commit_after>import React from 'react';
import { withRouter } from 'react-router';
import Reflux from 'reflux';
import Radium from 'radium';
import localStorage from 'local-storage-fallback';

import SessionStore from '../../apps/Session/SessionStore';
import SessionActions from '../../apps/Session/SessionActions';
import InstancesStore from '../../apps/Instances/InstancesStore';
import InstancesActions from '../../apps/Instances/InstancesActions';

import { FontIcon, IconMenu, List, ListItem, Subheader } from 'material-ui';
import { Color, ColumnList } from '../../common/';

const HeaderInstancesDropdown = Radium(React.createClass({
  mixins: [
    Reflux.connect(InstancesStore),
    Reflux.connectFilter(SessionStore, 'currentInstance', (sessionData) => sessionData.instance)
  ],

  componentDidMount() {
    InstancesActions.fetch();
  },

  getStyles() {
    return {
      root: {
        height: 56,
        paddingTop: 5,
        paddingBottom: 2,
        paddingLeft: 24,
        backgroundColor: '#040B1A',
        color: '#828A9E',
        position: 'fixed',
        width: 256,
        zIndex: 1,
        cursor: 'pointer'
      },
      dropdownInstanceIcon: {
        left: 20,
        minWidth: 32,
        height: 32,
        fontSize: 18,
        lineHeight: '18px',
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '50%',
        color: '#fff',
        backgroundColor: 'green',
        margin: '8px 16px 8px 0'
      },
      dropdownMenu: {
        left: 0,
        top: 0,
        maxHeight: 'calc(100vh - 80px)',
        overflow: 'auto',
        boxShadow: '0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23)'
      },
      list: {
        minWidth: 320,
        paddingBottom: 0
      },
      separator: {
        borderTop: '1px solid #BDBDBD',
        paddingLeft: 20
      },
      dropdownText: {
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        paddingLeft: 0,
        textOverflow: 'ellipsis',
        fontSize: 16,
        lineHeight: '24px'
      },
      tooltipContent: {
        fontSize: 14,
        lineHeight: '16px',
        height: 'auto',
        letterSpacing: '0.4px',
        display: 'flex',
        fontWeight: 400
      },
      noInstancesItem: {
        fontWeight: 500,
        color: '#BDBDBD'
      },
      dropdownIcon: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingRight: 10
      },
      iconMenu: {
        width: '100%'
      },
      currentInstanceListItem: {
        fontWeight: 700
      }
    };
  },

  handleDropdownItemClick(instanceName) {
    const { router } = this.props;

    // redirect to main instance screen
    this.refs.instancesDropdown.close();
    SessionActions.fetchInstance(instanceName);
    localStorage.setItem('lastInstanceName', instanceName);
    router.push(`/instances/${instanceName}/`);
  },

  maintenanceInfo() {
    const styles = this.getStyles();

    return (
      <div style={styles.tooltipContent}>
        <FontIcon
          color="rgb(255, 204, 1)"
          style={{ fontSize: 16, marginRight: 5, display: 'inline-flex' }}
          className="synicon-alert"
        />
        <span style={{ color: 'rgb(201, 162, 6)' }}>deprecated</span>
      </div>
    );
  },

  renderListItems(instances) {
    const styles = this.getStyles();
    const { currentInstance } = this.state;
    const defaultIconBackground = ColumnList.ColumnListConstans.DEFAULT_BACKGROUND;
    const defaultIcon = ColumnList.ColumnListConstans.DEFAULT_ICON;
    const items = instances.map((instance) => {
      const iconName = instance.metadata.icon ? `synicon-${instance.metadata.icon}` : `synicon-${defaultIcon}`;
      const instanceCreatedAt = Date.parse(instance.created_at);
      const releaseDate = Number(APP_CONFIG.SYNCANO5_RELEASE_DATE);
      const iconBackground = {
        backgroundColor: Color.getColorByName(instance.metadata.color, 'dark') || defaultIconBackground
      };
      const icon = (
        <FontIcon
          className={iconName}
          style={{ ...styles.dropdownInstanceIcon, ...iconBackground }}
        />
      );

      return (
        <ListItem
          key={instance.name}
          primaryText={instance.name}
          secondaryText={instanceCreatedAt < releaseDate && this.maintenanceInfo()}
          onTouchTap={() => this.handleDropdownItemClick(instance.name)}
          style={instance.name === currentInstance.name && styles.currentInstanceListItem}
          leftIcon={icon}
          data-e2e={instance.name}
        />
{'fraction_non_alphanumeric': 0.1293002574303768, 'fraction_numerical': 0.023753802948747953, 'mean_word_length': 2.393013100436681, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 18, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2358515', 'n_tokens_mistral': 2646, 'n_tokens_neox': 2472, 'n_words': 536}