<commit_before>import React from 'react'
import PropTypes from 'prop-types'

import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { getByPage, getConsoleOptions, selectVmDetail } from '../../actions/index'
import InfiniteScroll from 'react-infinite-scroller'
import naturalCompare from 'string-natural-compare'

import style from './style.css'

const VmsListNavigation = ({ selectedVm, vms, expanded, toggleExpansion, onUpdate, loadConsoleOptions, getVms }) => {
  const linkClick = (vmId) => {
    loadConsoleOptions(vmId)
    getVms(vmId)
  }

  const idPrefix = `vmslistnav`
  const toggleExpandButton = (
    <div className={`${style['toggle-expand-button']} ${expanded ? style['toggle-expand-button-expanded'] : ''}`}>
      <a href='#' onClick={toggleExpansion} id={`${idPrefix}-button-expand`}>
        <span className={`fa ${expanded ? 'fa-angle-double-left' : 'fa-angle-double-right'}`} />
      </a>
    </div>
  )

  const loadMore = () => {
    if (vms.get('notAllPagesLoaded')) {
      onUpdate(vms.get('page') + 1)
    }
  }

  const emptyList = (<div />)
  let list = null
  if (expanded) {
    const sortedVms = vms.get('vms')
      .sort((vmA, vmB) => naturalCompare.caseInsensitive(vmA.get('name'), vmB.get('name')))
    list = (
      <ul className={`menu ${style['ul-menu-cust']}`} role='menu' aria-labelledby='dropdownMenu1'>
        {sortedVms.map(vm => {
          if (vm.get('id') === selectedVm.get('id')) { // is selected
            return (
              <li role='presentation' className={`${style['item']} ${style['item-selected']}`} key={vm.get('id')}>
                <span className={style['item-text']} id={`${idPrefix}-item-${vm.get('name')}`}>{vm.get('name')}</span>
              </li>
            )
          }

          return (
            <li role='presentation' className={style['item']} key={vm.get('id')}>
              <Link to={`/vm/${vm.get('id')}`} className={style['item-link']} onClick={() => { linkClick(vm.get('id')) }}>
                <span className={style['item-text']} id={`${idPrefix}-item-${vm.get('name')}`}>{vm.get('name')}</span>
              </Link>
            </li>
          )
        })}
      </ul>
    )
  }

  return (
    <div className={`${style['main-container']} ${expanded ? style['expanded'] : ''}`}>
      {toggleExpandButton}
      <div className={style['scrolling-viewport']}>
        <InfiniteScroll
          loadMore={loadMore}<commit_msg>Fix: AVoid VM IDs in VMS navigation item list<commit_after>import React from 'react'
import PropTypes from 'prop-types'

import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { getByPage, getConsoleOptions, selectVmDetail } from '../../actions/index'
import InfiniteScroll from 'react-infinite-scroller'
import naturalCompare from 'string-natural-compare'

import style from './style.css'

const VmsListNavigation = ({ selectedVm, vms, expanded, toggleExpansion, onUpdate, loadConsoleOptions, getVms }) => {
  const linkClick = (vmId) => {
    loadConsoleOptions(vmId)
    getVms(vmId)
  }

  const idPrefix = `vmslistnav`
  const toggleExpandButton = (
    <div className={`${style['toggle-expand-button']} ${expanded ? style['toggle-expand-button-expanded'] : ''}`}>
      <a href='#' onClick={toggleExpansion} id={`${idPrefix}-button-expand`}>
        <span className={`fa ${expanded ? 'fa-angle-double-left' : 'fa-angle-double-right'}`} />
      </a>
    </div>
  )

  const loadMore = () => {
    if (vms.get('notAllPagesLoaded')) {
      onUpdate(vms.get('page') + 1)
    }
  }

  const emptyList = (<div />)
  let list = null
  if (expanded) {
    const sortedVms = vms.get('vms')
      .sort((vmA, vmB) => naturalCompare.caseInsensitive(vmA.get('name'), vmB.get('name')))

    const items = sortedVms.map(vm => {
      if (vm.get('id') === selectedVm.get('id')) { // is selected
        return (
          <li role='presentation' className={`${style['item']} ${style['item-selected']}`} key={vm.get('id')}>
            <span className={style['item-text']} id={`${idPrefix}-item-${vm.get('name')}`}>{vm.get('name')}</span>
          </li>
        )
      }

      return (
        <li role='presentation' className={style['item']} key={vm.get('id')}>
          <Link to={`/vm/${vm.get('id')}`} className={style['item-link']} onClick={() => { linkClick(vm.get('id')) }}>
            <span className={style['item-text']} id={`${idPrefix}-item-${vm.get('name')}`}>{vm.get('name')}</span>
          </Link>
        </li>
      )
    }) // ImmutableJS OrderedMap

    list = (
      <ul className={`menu ${style['ul-menu-cust']}`} role='menu' aria-labelledby='dropdownMenu1'>
        {items.toArray()}
      </ul>
    )
  }

  return (
    <div className={`${style['main-container']} ${expanded ? style['expanded'] : ''}`}>
      {toggleExpandButton}
      <div className={style['scrolling-viewport']}>
        <InfiniteScroll
          loadMore={loadMore}
{'fraction_non_alphanumeric': 0.20368122977346279, 'fraction_numerical': 0.0008090614886731392, 'mean_word_length': 3.1659646166807076, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 55, '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': '5095877', 'n_tokens_mistral': 1646, 'n_tokens_neox': 1639, 'n_words': 286}