<commit_before>/* @flow */
/*eslint-disable react/prop-types */ // Since we're using flow types for props

import React, {Component} from 'react'
import {shell} from 'electron'
import {resolveImageAsURL} from '../../desktop/resolve-root'

import {intersperseFn} from '../util/arrays'
import {parseFolderNameToUsers, canonicalizeUsernames, stripPublicTag} from '../util/kbfs'

import {globalStyles, globalColors} from '../styles/style-guide'
import {Button, Text, Input, Terminal, Icon, ProgressIndicator} from '../common-adapters/index'

import {cleanup} from '../util/kbfs'

// This is the only data that the renderer cares about for a folder
import type {FolderInfo, FolderEntry, RenderProps} from './index.render'

import flags from '../util/feature-flags'

function iconPath (isPublic, isEmpty) {
  const pubPart = isPublic ? 'public' : 'private'
  const emptyPart = isEmpty ? 'empty' : 'full'
  return resolveImageAsURL('folders', `kb-folder-${pubPart}-${emptyPart}.svg`)
}

const Header = props => {
  const openKBFS: () => void = props.openKBFS
  const showUser: () => void = props.showUser

  const version = __VERSION__ // eslint-disable-line no-undef

  return (
    <div style={stylesHeader}>
      <Icon hint='Open KBFS folder' type='fa-folder' style={{marginRight: 10}} onClick={openKBFS}/>
      <Icon hint='Open keybase.io web' type='fa-globe' onClick={showUser}/>
      <div style={{flex: 1}}/>
      <Icon hint={`Report a bug for version: ${version}`} type='fa-bug' onClick={() => {
        shell.openExternal(`https://github.com/keybase/client/issues/new?body=Keybase%20GUI%20Version:%20${encodeURIComponent(version)}`)
      }}/>
    </div>
  )
}

const Footer = props => {
  const showHelp: () => void = props.showHelp
  const quit: () => void = props.quit

  return (
    <div style={stylesFooter}>
      <Text type='Body' small onClick={showHelp}>Help</Text>
      <Text type='Body' small onClick={quit}>Quit</Text>
    </div>
  )
}

const LogInTerminalMessage = props => {
  return (
    <div style={{...globalStyles.flexBoxColumn, backgroundColor: globalColors.white}}>
      <Icon type='fa-exclamation-triangle' style={{alignSelf: 'center', color: globalColors.red, marginTop: 12}} />
      <Text type='Body' small style={{alignSelf: 'center', marginTop: 6}}>You're logged out!</Text>
      <Text type='Body' small style={{marginTop: 10, marginBottom: 5, marginLeft: 10}}>From the terminal:</Text>
      <Terminal>
        <Text type='TerminalCommand'>keybase login</Text>
        <Text type='TerminalEmpty'/>
        <Text type='TerminalComment'>or if you're new to Keybase:</Text>
        <Text type='TerminalCommand'>keybase signup</Text>
      </Terminal>
    </div>
  )
}

const LogInPrompt = props => {
  const logIn: () => void = props.logIn
  return (
    <div style={{...globalStyles.flexBoxColumn, backgroundColor: globalColors.white}}>
      <Icon type='fa-exclamation-triangle' style={{alignSelf: 'center', color: globalColors.yellow, marginTop: 12}} />
      <Text type='Body' small style={{alignSelf: 'center', marginTop: 6}}>You're logged out!</Text>
      <Button type='Primary' label='Log In' onClick={logIn} style={{alignSelf: 'center', minWidth: 160, marginTop: 12, marginRight: 0}}/>
    </div>
  )
}

export default class Render extends Component {
  props: RenderProps;

  render () {
    const {openKBFS, openKBFSPublic, openKBFSPrivate, showMain,
      showHelp, showUser, logIn, quit, username, loggedIn} = this.props

    return (
      <div style={stylesContainer}>
        <div style={stylesBody}>
          <Header openKBFS={openKBFS} showUser={() => showUser(username)}/>
          {!loggedIn && (flags.login ? <LogInPrompt logIn={logIn} /> : <LogInTerminalMessage />)}
          <FolderList loading={this.props.loading} username={this.props.username} openKBFSPublic={openKBFSPublic} openKBFSPrivate={openKBFSPrivate} folders={this.props.folders} loggedIn={loggedIn}/>
          <Footer showHelp={showHelp} quit={quit} showMain={showMain}/>
        </div>
      </div>
    )
  }
}

const Row = props => {
  const wrapStyle = props.allowWrap ? {flexWrap: 'wrap'} : {}
  const containerStyle = {
    ...globalStyles.flexBoxRow,
    alignItems: 'flex-start',
    marginTop: 1,
    marginBottom: 1,
    minHeight: 25,
    ...props.style,
    ...wrapStyle
  }

  return (
    <div style={containerStyle} onClick={props.onClick}>
      <div style={{...globalStyles.clickable, marginRight: 2, ...props.iconStyle}}/>
      <Text type='Body' link small style={{marginTop: 4, overflowWrap: 'break-word', flex: 1, ...props.textStyle}}>{props.text}</Text>
      {props.children}
    </div>
  )
}

const FolderRow = props => {
  const divider = idx => <span key={'div' + idx}>,<wbr/></span> // word break on the commas
  const {username, folder: {isPublic, isEmpty, openFolder, folderName}} = props
  let text = intersperseFn(divider, canonicalizeUsernames(username, parseFolderNameToUsers(folderName)))

  return <Row
    onClick={openFolder}
    text={text}
    allowWrap
    iconStyle={SVGFolderIcon(iconPath(isPublic, isEmpty))}
    textStyle={{color: globalColors.blue}}
    key={isPublic + text.join('')}/>
}

const FolderEntryRow = props => {
  const {entry} = props
  let inputRef = null

  const openFolder = () => {
    if (inputRef) {
      entry.openFolder(cleanup(inputRef.getValue()))
      inputRef.clearValue()
      inputRef.blur()
    }
  }

  return (
    <Row
      style={{height: 25, position: 'relative'}}
      onClick={() => {}}
      text={entry.prefix}
      iconStyle={SVGFolderIcon(iconPath(entry.isPublic, false))}
      textStyle={{color: globalColors.blue}} >
      <Input<commit_msg>Cursor pointer on folder row (#2690)<commit_after>/* @flow */
/*eslint-disable react/prop-types */ // Since we're using flow types for props

import React, {Component} from 'react'
import {shell} from 'electron'
import {resolveImageAsURL} from '../../desktop/resolve-root'

import {intersperseFn} from '../util/arrays'
import {parseFolderNameToUsers, canonicalizeUsernames, stripPublicTag} from '../util/kbfs'

import {globalStyles, globalColors} from '../styles/style-guide'
import {Button, Text, Input, Terminal, Icon, ProgressIndicator} from '../common-adapters/index'

import {cleanup} from '../util/kbfs'

// This is the only data that the renderer cares about for a folder
import type {FolderInfo, FolderEntry, RenderProps} from './index.render'

import flags from '../util/feature-flags'

function iconPath (isPublic, isEmpty) {
  const pubPart = isPublic ? 'public' : 'private'
  const emptyPart = isEmpty ? 'empty' : 'full'
  return resolveImageAsURL('folders', `kb-folder-${pubPart}-${emptyPart}.svg`)
}

const Header = props => {
  const openKBFS: () => void = props.openKBFS
  const showUser: () => void = props.showUser

  const version = __VERSION__ // eslint-disable-line no-undef

  return (
    <div style={stylesHeader}>
      <Icon hint='Open KBFS folder' type='fa-folder' style={{marginRight: 10}} onClick={openKBFS}/>
      <Icon hint='Open keybase.io web' type='fa-globe' onClick={showUser}/>
      <div style={{flex: 1}}/>
      <Icon hint={`Report a bug for version: ${version}`} type='fa-bug' onClick={() => {
        shell.openExternal(`https://github.com/keybase/client/issues/new?body=Keybase%20GUI%20Version:%20${encodeURIComponent(version)}`)
      }}/>
    </div>
  )
}

const Footer = props => {
  const showHelp: () => void = props.showHelp
  const quit: () => void = props.quit

  return (
    <div style={stylesFooter}>
      <Text type='Body' small onClick={showHelp}>Help</Text>
      <Text type='Body' small onClick={quit}>Quit</Text>
    </div>
  )
}

const LogInTerminalMessage = props => {
  return (
    <div style={{...globalStyles.flexBoxColumn, backgroundColor: globalColors.white}}>
      <Icon type='fa-exclamation-triangle' style={{alignSelf: 'center', color: globalColors.red, marginTop: 12}} />
      <Text type='Body' small style={{alignSelf: 'center', marginTop: 6}}>You're logged out!</Text>
      <Text type='Body' small style={{marginTop: 10, marginBottom: 5, marginLeft: 10}}>From the terminal:</Text>
      <Terminal>
        <Text type='TerminalCommand'>keybase login</Text>
        <Text type='TerminalEmpty'/>
        <Text type='TerminalComment'>or if you're new to Keybase:</Text>
        <Text type='TerminalCommand'>keybase signup</Text>
      </Terminal>
    </div>
  )
}

const LogInPrompt = props => {
  const logIn: () => void = props.logIn
  return (
    <div style={{...globalStyles.flexBoxColumn, backgroundColor: globalColors.white}}>
      <Icon type='fa-exclamation-triangle' style={{alignSelf: 'center', color: globalColors.yellow, marginTop: 12}} />
      <Text type='Body' small style={{alignSelf: 'center', marginTop: 6}}>You're logged out!</Text>
      <Button type='Primary' label='Log In' onClick={logIn} style={{alignSelf: 'center', minWidth: 160, marginTop: 12, marginRight: 0}}/>
    </div>
  )
}

export default class Render extends Component {
  props: RenderProps;

  render () {
    const {openKBFS, openKBFSPublic, openKBFSPrivate, showMain,
      showHelp, showUser, logIn, quit, username, loggedIn} = this.props

    return (
      <div style={stylesContainer}>
        <div style={stylesBody}>
          <Header openKBFS={openKBFS} showUser={() => showUser(username)}/>
          {!loggedIn && (flags.login ? <LogInPrompt logIn={logIn} /> : <LogInTerminalMessage />)}
          <FolderList loading={this.props.loading} username={this.props.username} openKBFSPublic={openKBFSPublic} openKBFSPrivate={openKBFSPrivate} folders={this.props.folders} loggedIn={loggedIn}/>
          <Footer showHelp={showHelp} quit={quit} showMain={showMain}/>
        </div>
      </div>
    )
  }
}

const Row = props => {
  const wrapStyle = props.allowWrap ? {flexWrap: 'wrap'} : {}
  const containerStyle = {
    ...globalStyles.flexBoxRow,
    alignItems: 'flex-start',
    marginTop: 1,
    marginBottom: 1,
    minHeight: 25,
    ...props.style,
    ...wrapStyle
  }

  return (
    <div style={containerStyle} onClick={props.onClick}>
      <div style={{...globalStyles.clickable, marginRight: 2, ...props.iconStyle}}/>
      <Text type='Body' link small style={{marginTop: 4, overflowWrap: 'break-word', flex: 1, ...props.textStyle}}>{props.text}</Text>
      {props.children}
    </div>
  )
}

const FolderRow = props => {
  const divider = idx => <span key={'div' + idx}>,<wbr/></span> // word break on the commas
  const {username, folder: {isPublic, isEmpty, openFolder, folderName}} = props
  let text = intersperseFn(divider, canonicalizeUsernames(username, parseFolderNameToUsers(folderName)))

  return <Row
    onClick={openFolder}
    text={text}
    allowWrap
    iconStyle={SVGFolderIcon(iconPath(isPublic, isEmpty))}
    textStyle={{color: globalColors.blue, cursor: 'pointer'}}
    key={isPublic + text.join('')}/>
}

const FolderEntryRow = props => {
  const {entry} = props
  let inputRef = null

  const openFolder = () => {
    if (inputRef) {
      entry.openFolder(cleanup(inputRef.getValue()))
      inputRef.clearValue()
      inputRef.blur()
    }
  }

  return (
    <Row
      style={{height: 25, position: 'relative'}}
      onClick={() => {}}
      text={entry.prefix}
      iconStyle={SVGFolderIcon(iconPath(entry.isPublic, false))}
      textStyle={{color: globalColors.blue}} >
      <Input
{'fraction_non_alphanumeric': 0.16120795914773728, 'fraction_numerical': 0.0065152315548512064, 'mean_word_length': 3.772689075630252, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 143, 'https://': 2, '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': '115859', 'n_tokens_mistral': 3668, 'n_tokens_neox': 3609, 'n_words': 842}