<commit_before>import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Picker, Padded, Text, Flex } from '@buffetjs/core';
import { Carret, useQueryParams } from 'strapi-helper-plugin';
import styled from 'styled-components';
import get from 'lodash/get';
import selectI18NLocales from '../../selectors/selectI18nLocales';
import getInitialLocale from '../../utils/getInitialLocale';

const List = styled.ul`
  list-style-type: none;
  padding: 3px 0;
  margin: 0;
`;

const ListItem = styled.li`
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  height: 36px;
  display: flex;
  justify-content: center;

  &:hover {
    background: ${props => props.theme.main.colors.mediumGrey};
  }
`;

const EllipsisParagraph = styled(Text)`
  width: ${props => props.width};
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
`;

const selectContentManagerListViewPluginOptions = state =>
  state.get('content-manager_listView').contentType.pluginOptions;

const LocalePicker = () => {
  const dispatch = useDispatch();
  const pluginOptions = useSelector(selectContentManagerListViewPluginOptions);
  const locales = useSelector(selectI18NLocales);
  const [{ query }, setQuery] = useQueryParams();

  const initialLocale = getInitialLocale(query, locales);
  const [selected, setSelected] = useState(initialLocale);

  const isFieldLocalized = get(pluginOptions, 'i18n.localized', false);

  if (!isFieldLocalized) {
    return null;
  }

  if (!locales || locales.length === 0) {
    return null;
  }

  return (
    <Picker
      position="right"
      renderButtonContent={isOpen => (
        <Flex>
          <EllipsisParagraph width="20ch">{selected.name}</EllipsisParagraph>

          <Padded left size="sm">
            <Carret fill={isOpen ? '#007eff' : '#292b2c'} isUp={isOpen} />
          </Padded>
        </Flex>
      )}
      renderSectionContent={onToggle => {
        const handleClick = locale => {
          dispatch({ type: 'ContentManager/RBACManager/RESET_PERMISSIONS' });
          setSelected(locale);

          setQuery({
            plugins: { ...query.plugins, i18n: { locale: locale.code } },
          });
          onToggle();
        };

        return (
          <Padded left right>
            <List>
              {locales.map(locale => {
                if (locale.id === selected.id) {
                  return null;
                }

                return (
                  <ListItem key={locale.id}>
                    <button onClick={() => handleClick(locale)} type="button">
                      <EllipsisParagraph width="200px">
                        {locale.name || locale.code}
                      </EllipsisParagraph>
                    </button>
                  </ListItem>
                );
              })}
            </List>
          </Padded>
        );
      }}
    />
  );
};

export default LocalePicker;
<commit_msg>Fix empty locale picker on listview (#9906)<commit_after>import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Picker, Padded, Text, Flex } from '@buffetjs/core';
import { Carret, useQueryParams } from 'strapi-helper-plugin';
import styled from 'styled-components';
import get from 'lodash/get';
import selectI18NLocales from '../../selectors/selectI18nLocales';
import getInitialLocale from '../../utils/getInitialLocale';

const List = styled.ul`
  list-style-type: none;
  padding: 3px 0;
  margin: 0;
`;

const ListItem = styled.li`
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  height: 36px;
  display: flex;
  justify-content: center;

  &:hover {
    background: ${props => props.theme.main.colors.mediumGrey};
  }
`;

const EllipsisParagraph = styled(Text)`
  width: ${props => props.width};
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
`;

const selectContentManagerListViewPluginOptions = state =>
  state.get('content-manager_listView').contentType.pluginOptions;

const LocalePicker = () => {
  const dispatch = useDispatch();
  const pluginOptions = useSelector(selectContentManagerListViewPluginOptions);
  const locales = useSelector(selectI18NLocales);
  const [{ query }, setQuery] = useQueryParams();

  const initialLocale = getInitialLocale(query, locales);
  const [selected, setSelected] = useState(initialLocale);

  const isFieldLocalized = get(pluginOptions, 'i18n.localized', false);

  if (!isFieldLocalized) {
    return null;
  }

  if (!locales || locales.length === 0) {
    return null;
  }

  return (
    <Picker
      position="right"
      renderButtonContent={isOpen => (
        <Flex>
          <EllipsisParagraph width="20ch">{selected.name}</EllipsisParagraph>

          <Padded left size="sm">
            <Carret fill={isOpen ? '#007eff' : '#292b2c'} isUp={isOpen} />
          </Padded>
        </Flex>
      )}
      renderSectionContent={onToggle => {
        const handleClick = locale => {
          dispatch({ type: 'ContentManager/RBACManager/RESET_PERMISSIONS' });
          setSelected(locale);

          setQuery({
            plugins: { ...query.plugins, i18n: { locale: locale.code } },
          });
          onToggle();
        };

        const hasMultipleLocales = locales.length > 1;

        return hasMultipleLocales ? (
          <Padded left right>
            <List>
              {locales.map(locale => {
                if (locale.id === selected.id) {
                  return null;
                }

                return (
                  <ListItem key={locale.id}>
                    <button onClick={() => handleClick(locale)} type="button">
                      <EllipsisParagraph width="200px">
                        {locale.name || locale.code}
                      </EllipsisParagraph>
                    </button>
                  </ListItem>
                );
              })}
            </List>
          </Padded>
        ) : null;
      }}
    />
  );
};

export default LocalePicker;

{'fraction_non_alphanumeric': 0.13280746941403734, 'fraction_numerical': 0.013039278815196394, 'mean_word_length': 2.3349436392914655, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 58, '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': '2893892', 'n_tokens_mistral': 1928, 'n_tokens_neox': 1811, 'n_words': 394}