refactor: added user's greetings (#1027)

* fix: normalize contributors field #1022 (#1024)

* refactor: added user's greetings

feat: added component Label.WIP

refactor: added user's greetings.WIP

fix: fixed lint erros

* chore: fix e2e test

* test(e2e): better approach for logout

src/webui/app.js

@@ -151,10 +151,14 @@ export default class App extends Component {
     const { isUserLoggedIn } = this.state;
     return (
       <div className="page-full-height">
-        {this.renderHeader()}
+        <div id="header">
+          {this.renderHeader()}
+        </div>
         {this.renderLoginModal()}
         <Route isUserLoggedIn={isUserLoggedIn} />
-        <Footer />
+        <div id="footer">
+          <Footer />
+        </div>
       </div>
     );
   }

src/webui/components/Header/index.js

@@ -16,12 +16,13 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
 import { getRegistryURL } from '../../utils/url';
 import Link from '../Link';
 import Logo from '../Logo';
+import Label from '../Label';
 import CopyToClipBoard from '../CopyToClipBoard/index';
 import RegistryInfoDialog from '../RegistryInfoDialog';
 
 import type { Node } from 'react';
 import { IProps, IState } from './interfaces';
-import { Wrapper, InnerWrapper } from './styles';
+import { Wrapper, InnerWrapper, Greetings } from './styles';
 
 class Header extends Component<IProps, IState> {
   handleLoggedInMenu: Function;
@@ -138,7 +139,7 @@ class Header extends Component<IProps, IState> {
    * render popover menu
    */
   renderMenu(): Node {
-    const { handleLogout } = this.props;
+    const { handleLogout, username = '' } = this.props;
     const { anchorEl } = this.state;
     const open = Boolean(anchorEl);
     return (
@@ -160,6 +161,10 @@ class Header extends Component<IProps, IState> {
           open={open}
           onClose={this.handleLoggedInMenuClose}
         >
+          <MenuItem disabled>
+            <Greetings>{`Hi,`}</Greetings>
+            <Label text={username} limit={140} weight="bold" capitalize />
+          </MenuItem>
           <MenuItem onClick={handleLogout} id="header--button-logout">
             Logout
           </MenuItem>

src/webui/components/Header/styles.js

@@ -32,3 +32,7 @@ export const InnerWrapper = styled(Toolbar)`
     `)};
   }
 `;
+
+export const Greetings = styled.span`
+  margin: 0 5px 0 0;
+`;

src/webui/components/Label/index.js

@@ -0,0 +1,26 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import styled from 'react-emotion';
+import { fontWeight } from '../../utils/styles/sizes';
+import ellipsis from '../../utils/styles/ellipsis';
+
+import type { Node } from 'react';
+import { IProps } from './interfaces';
+
+const Wrapper = styled.span`
+  font-weight: ${({ weight }) => fontWeight[weight]};
+  text-transform: ${({ capitalize }) => (capitalize ? 'capitalize' : 'none')};
+  ${props => props.limit && ellipsis(props.limit)};
+`;
+
+const Label = ({ text = '', capitalize = false, weight = 'regular', ...props }: IProps): Node => (
+  <Wrapper weight={weight} capitalize={capitalize} {...props}>
+    {text}
+  </Wrapper>
+);
+
+export default Label;

src/webui/components/Label/interfaces.js

@@ -0,0 +1,11 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  text: string;
+  capitalize?: boolean;
+  weight?: string;
+  limit?: number;
+}

src/webui/utils/styles/ellipsis.js

@@ -0,0 +1,15 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import { css } from 'react-emotion';
+
+const ellipsis = (maxWidth: number) => css`
+  white-space: nowrap;
+  max-width: ${maxWidth}px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export default ellipsis;

src/webui/utils/styles/spacings.js

@@ -1,8 +1,6 @@
 // Spacings
 // -------------------------
 
-const spacings = {
+export const spacings = {
     lg: '30px'
 };
-
-export default spacings;

test/e2e/e2e.spec.js

@@ -100,8 +100,9 @@ describe('/ (Verdaccio Page)', () => {
 
   it('should logout an user', async () => {
     // we assume the user is logged already
-    await clickElement('#header--button-account', { clickCount: 1, delay: 2000 });
-    await clickElement('#header--button-logout', { clickCount: 1, delay: 200 });
+    await clickElement('#header--button-account', { clickCount: 1, delay: 500 });
+    await page.waitFor(1000);
+    await clickElement('#header--button-logout > span', { clickCount: 1, delay: 500 });
     await page.waitFor(1000);
     await evaluateSignIn();
   });