Merge pull request #57 from Zextras/account-name-in-dropdown

feat: account name in  topbar dropdown

carbonio.webpack.js

@@ -60,7 +60,7 @@ module.exports = (conf, pkg, options, mode) => {
 		})
 	);
 	conf.devServer = {
-		port: 9000,
+		port: options.port,
 		historyApiFallback: {
 			index: `${baseStaticPath}/index.html`,
 			rewrites: [
@@ -79,7 +79,7 @@ module.exports = (conf, pkg, options, mode) => {
 				secure: false,
 				cookieDomainRewrite: {
 					'*': server,
-					[server]: 'localhost:9000'
+					[server]: `localhost:${options.port}`
 				}
 			},
 			{
@@ -89,7 +89,7 @@ module.exports = (conf, pkg, options, mode) => {
 				logLevel: 'debug',
 				cookieDomainRewrite: {
 					'*': server,
-					[server]: 'localhost:9000'
+					[server]: `localhost:${options.port}`
 				}
 			}
 		]

package.json

@@ -64,7 +64,7 @@
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/webpack-env": "1.16.3",
 		"@zextras/carbonio-ui-configs": "^0.1.11",
-		"@zextras/carbonio-ui-sdk": "github:Zextras/carbonio-ui-sdk#v1.1.0",
+		"@zextras/carbonio-ui-sdk": "github:Zextras/carbonio-ui-sdk#port",
 		"autoprefixer": "10.4.2",
 		"babel-jest": "27.3.1",
 		"babel-loader": "8.2.3",

src/utility-bar/bar.tsx

@@ -13,6 +13,7 @@ import { useUtilityViews } from './utils';
 import { logout } from '../network/logout';
 import { useContextBridge } from '../store/context-bridge';
 import { noOp } from '../network/fetch';
+import { useUserAccount } from '../store/account';
 
 const UtilityBarItem: FC<{ view: UtilityView }> = ({ view }) => {
 	const { mode, setMode, current, setCurrent } = useUtilityBarStore();
@@ -39,8 +40,19 @@ const UtilityBarItem: FC<{ view: UtilityView }> = ({ view }) => {
 export const ShellUtilityBar: FC = () => {
 	const views = useUtilityViews();
 	const [t] = useTranslation();
+	const account = useUserAccount();
 	const accountItems = useMemo(
 		() => [
+			{
+				id: 'account',
+				label: account?.displayName ?? account?.name,
+				disabled: true
+			},
+			{
+				type: 'divider',
+				id: 'divider',
+				label: 'divider'
+			},
 			{
 				id: 'feedback',
 				label: t('label.feedback', 'Feedback'),
@@ -73,15 +85,15 @@ export const ShellUtilityBar: FC = () => {
 				icon: 'LogOut'
 			}
 		],
-		[t]
+		[account, t]
 	);
 	return (
 		<Container orientation="horizontal" width="fit">
 			{map(views, (view) => (
 				<UtilityBarItem view={view} key={view.id} />
 			))}
-			<Tooltip label={t('label.account_menu', 'Account menu')} placement="left-end">
-				<Dropdown items={accountItems}>
+			<Tooltip label={account?.displayName ?? account?.name} placement="bottom-end">
+				<Dropdown items={accountItems} maxWidth="200px" disableAutoFocus>
 					<IconButton icon="PersonOutline" size="large" />
 				</Dropdown>
 			</Tooltip>