[FIX] Directory default tab (#17283)

app/ui/client/views/app/components/Directory/DirectoryTable.js

@@ -27,23 +27,23 @@ export function Markdown({ children, ...props }) {
 
 const LoadingRow = ({ cols }) => <Table.Row>
 	<Table.Cell>
-		<Flex.Container>
-			<Box>
-				<Flex.Item>
-					<Skeleton variant='rect' height={40} width={40} />
-				</Flex.Item>
-				<Box mi='x8' grow={1}>
-					<Skeleton width='100%' />
-					<Skeleton width='100%' />
-				</Box>
+		<Box display='flex'>
+			<Flex.Item>
+				<Skeleton variant='rect' height={40} width={40} />
+			</Flex.Item>
+			<Box mi='x8' flexGrow={1}>
+				<Skeleton width='100%' />
+				<Skeleton width='100%' />
 			</Box>
-		</Flex.Container>
+		</Box>
 	</Table.Cell>
 	{ Array.from({ length: cols - 1 }, (_, i) => <Table.Cell key={i}>
 		<Skeleton width='100%' />
 	</Table.Cell>)}
 </Table.Row>;
 
+const style = { minHeight: '40px' };
+
 export function DirectoryTable({
 	data = {},
 	renderRow,
@@ -79,7 +79,7 @@ export function DirectoryTable({
 	return <>
 		<Flex.Container direction='column'>
 			<Box>
-				<Box mb='x16' display='flex' flexDirection='column'>
+				<Box mb='x16' display='flex' flexDirection='column' style={style}>
 					<TextInput placeholder={searchPlaceholder} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 				</Box>
 				{channels && !channels.length

app/ui/client/views/app/components/Directory/index.js

@@ -13,6 +13,8 @@ const avatarBase = { baseUrl: '/avatar/' };
 export function DirectoryPage() {
 	const t = useTranslation();
 
+	const defaultTab = useSetting('Accounts_Directory_DefaultView');
+
 	const federationEnabled = useSetting('FEDERATION_Enabled');
 
 	const tab = useRouteParameter('tab');
@@ -22,13 +24,13 @@ export function DirectoryPage() {
 
 	useEffect(() => {
 		if (!tab || (tab === 'external' && !federationEnabled)) {
-			return goToDirectory.replacingState({ tab: 'channels' });
+			return goToDirectory.replacingState({ tab: defaultTab });
 		}
-	}, [tab, federationEnabled]);
+	}, [tab, federationEnabled, defaultTab]);
 
 	return <Avatar.Context.Provider value={avatarBase}><Page>
 		<Page.Header title={t('Directory')} />
-		<Tabs>
+		<Tabs flexShrink={0} >
 			<Tabs.Item selected={tab === 'channels'} onClick={handleTabClick('channels')}>{t('Channels')}</Tabs.Item>
 			<Tabs.Item selected={tab === 'users'} onClick={handleTabClick('users')}>{t('Users')}</Tabs.Item>
 			{ federationEnabled && <Tabs.Item selected={tab === 'external'} onClick={handleTabClick('external')}>{t('External_Users')}</Tabs.Item> }