fix(ui): for server default options, display "All" region/language option instead of empty string (#1042)

This commit is contained in:
TheCatLady
2021-02-27 22:34:56 -05:00
committed by GitHub
parent 3f9a116b17
commit 3fed26cfbe
3 changed files with 51 additions and 28 deletions

View File

@@ -9,7 +9,7 @@ import 'country-flag-icons/3x2/flags.css';
const messages = defineMessages({
regionDefault: 'All Regions',
regionServerDefault: '{applicationTitle} Default ({region})',
regionServerDefault: 'Default ({region})',
});
interface RegionSelectorProps {
@@ -38,6 +38,10 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
[]
);
const defaultRegionNameFallback =
regions?.find((region) => region.iso_3166_1 === currentSettings.region)
?.english_name ?? currentSettings.region;
useEffect(() => {
if (regions && value) {
if (value === 'all') {
@@ -65,15 +69,21 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
<div className="relative">
<span className="inline-block w-full rounded-md shadow-sm">
<Listbox.Button className="relative flex items-center w-full py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
{selectedRegion &&
selectedRegion.iso_3166_1 !== 'all' &&
hasFlag(selectedRegion?.iso_3166_1) && (
<span className="h-4 mr-2 overflow-hidden text-base leading-4">
<span
className={`flag:${selectedRegion?.iso_3166_1}`}
/>
</span>
)}
{((selectedRegion && hasFlag(selectedRegion?.iso_3166_1)) ||
(isUserSetting &&
!selectedRegion &&
currentSettings.region &&
hasFlag(currentSettings.region))) && (
<span className="h-4 mr-2 overflow-hidden text-base leading-4">
<span
className={`flag:${
selectedRegion
? selectedRegion.iso_3166_1
: currentSettings.region
}`}
/>
</span>
)}
<span className="block truncate">
{selectedRegion && selectedRegion.iso_3166_1 !== 'all'
? intl.formatDisplayName(selectedRegion.iso_3166_1, {
@@ -82,12 +92,11 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
}) ?? selectedRegion.english_name
: isUserSetting && selectedRegion?.iso_3166_1 !== 'all'
? intl.formatMessage(messages.regionServerDefault, {
applicationTitle: currentSettings.applicationTitle,
region: currentSettings.region
? intl.formatDisplayName(currentSettings.region, {
type: 'region',
fallback: 'none',
}) ?? currentSettings.region
}) ?? defaultRegionNameFallback
: intl.formatMessage(messages.regionDefault),
})
: intl.formatMessage(messages.regionDefault)}
@@ -130,16 +139,23 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
active
? 'text-white bg-indigo-600'
: 'text-gray-300'
} cursor-default select-none relative py-2 pl-8 pr-4`}
} cursor-default select-none relative py-2 pl-8 pr-4 flex items-center`}
>
<span className="mr-2 text-base">
<span
className={
hasFlag(currentSettings.region)
? `flag:${currentSettings.region}`
: 'pr-6'
}
/>
</span>
<span
className={`${
selected ? 'font-semibold' : 'font-normal'
} block truncate`}
>
{intl.formatMessage(messages.regionServerDefault, {
applicationTitle:
currentSettings.applicationTitle,
region: currentSettings.region
? intl.formatDisplayName(
currentSettings.region,
@@ -147,7 +163,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
type: 'region',
fallback: 'none',
}
) ?? currentSettings.region
) ?? defaultRegionNameFallback
: intl.formatMessage(messages.regionDefault),
})}
</span>