refactor: actived the rule react/jsx-no-literals

.eslintrc

@@ -86,7 +86,7 @@
     "react/jsx-no-bind": ["error"],
     "react/jsx-no-comment-textnodes": ["warn"],
     "react/jsx-no-duplicate-props": ["warn"],
-    "react/jsx-no-literals": ["warn"],
+    "react/jsx-no-literals": ["error"],
     "react/jsx-no-undef": ["error"],
     "react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}],
     "react/jsx-curly-brace-presence": ["error", { "props": "always", "children": "ignore" }],

src/webui/components/Header/index.js

@@ -155,7 +155,7 @@ class Header extends Component<IProps, IState> {
           this.renderMenu()
         ) : (
           <Button color={'inherit'} id={'header--button-login'} onClick={this.handleToggleLogin}>
-            Login
+            {'Login'}
           </Button>
         )}
       </RightSide>
@@ -192,7 +192,7 @@ class Header extends Component<IProps, IState> {
             <Label capitalize={true} limit={140} text={username} weight={'bold'} />
           </MenuItem>
           <MenuItem id={'header--button-logout'} onClick={onLogout}>
-            Logout
+            {'Logout'}
           </MenuItem>
         </Menu>
       </React.Fragment>
@@ -231,7 +231,7 @@ class Header extends Component<IProps, IState> {
                 <Search />
               </InnerMobileNavBar>
               <Button color={'inherit'} onClick={this.handleDismissMNav}>
-                Cancel
+                {'Cancel'}
               </Button>
             </MobileNavBar>
           )}

src/webui/components/Help/index.js

@@ -30,18 +30,18 @@ const Help = (): Node => {
     <Card id={'help-card'}>
       <CardContent>
         <Typography component={'h2'} gutterBottom={true} id={'help-card__title'} variant={'headline'}>
-          No Package Published Yet.
+          {'No Package Published Yet.'}
         </Typography>
         <HelpTitle color={'textSecondary'} gutterBottom={true}>
-          To publish your first package just:
+          {'To publish your first package just:'}
         </HelpTitle>
         {renderHeadingClipboardSegments('1. Login', `$ npm adduser --registry ${registryUrl}`)}
         {renderHeadingClipboardSegments('2. Publish', `$ npm publish --registry ${registryUrl}`)}
-        <Typography variant={'body2'}>3. Refresh this page.</Typography>
+        <Typography variant={'body2'}>{'3. Refresh this page.'}</Typography>
       </CardContent>
       <CardActions>
         <Button color={'primary'} href={'https://verdaccio.org/docs/en/installation'} size={'small'} target={'_blank'}>
-          Learn More
+          {'Learn More'}
         </Button>
       </CardActions>
     </Card>

src/webui/components/Login/index.js

@@ -148,7 +148,7 @@ export default class LoginModal extends Component {
         fullWidth={true}
         required={username.required}
       >
-        <InputLabel htmlFor={"username"}>Username</InputLabel>
+        <InputLabel htmlFor={"username"}>{'Username'}</InputLabel>
         <Input
           id={"login--form-username"}
           onChange={this.setUsername}
@@ -173,7 +173,7 @@ export default class LoginModal extends Component {
         required={password.required}
         style={{ marginTop: '8px' }}
       >
-        <InputLabel htmlFor={"password"}>Password</InputLabel>
+        <InputLabel htmlFor={"password"}>{'Password'}</InputLabel>
         <Input
           id={"login--form-password"}
           onChange={this.setPassword}
@@ -202,7 +202,7 @@ export default class LoginModal extends Component {
         open={visibility}
         >
         <form noValidate={true} onSubmit={this.validateCredentials}>
-          <DialogTitle>Login</DialogTitle>
+          <DialogTitle>{'Login'}</DialogTitle>
           <DialogContent>
             {this.renderLoginError(error)}
             {this.renderNameField()}
@@ -215,7 +215,7 @@ export default class LoginModal extends Component {
               onClick={onCancel}
               type={"button"}
             >
-              Cancel
+              {'Cancel'}
             </Button>
             <Button
               color={"inherit"}
@@ -223,7 +223,7 @@ export default class LoginModal extends Component {
               id={"login--form-submit"}
               type={"submit"}
             >
-              Login
+              {'Login'}
             </Button>
           </DialogActions>
         </form>

src/webui/components/NotFound/index.js

@@ -10,12 +10,11 @@ import { IProps } from './types';
 const NotFound = ({ pkg }: IProps) => (
   <Wrapper>
     <h1>
-      // TODO. Resolved the rule react/jsx-one-expression-per-line for now, but in the future we are going to use i18n here
       {'Error 404 -'}
       {pkg}
     </h1>
     <hr />
-    <p>Oops, The package you are trying to access does not exist.</p>
+    <p>{'Oops, The package you are trying to access does not exist.'}</p>
   </Wrapper>
 );
 

src/webui/components/PackageList/index.js

@@ -18,7 +18,7 @@ export default class PackageList extends React.Component {
     return (
       packages.length > 0 ? (
         <Fragment>
-          <h1 className={classes.listTitle}>Available Packages</h1>
+          <h1 className={classes.listTitle}>{'Available Packages'}</h1>
           {this.renderList()}
         </Fragment>
       ) : null

src/webui/components/RegistryInfoDialog/index.js

@@ -15,11 +15,11 @@ import { IProps } from './types';
 
 const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
   <Dialog id={'registryInfo--dialog-container'} onClose={onClose} open={open}>
-    <Title disableTypography={true}>Register Info</Title>
+    <Title disableTypography={true}>{'Register Info'}</Title>
     <Content>{children}</Content>
     <DialogActions>
       <Button color={'inherit'} id={'registryInfo--dialog-close'} onClick={onClose}>
-        CLOSE
+        {'CLOSE'}
       </Button>
     </DialogActions>
   </Dialog>

test/unit/webui/components/PackageSidebar/module.spec.js

@@ -21,7 +21,7 @@ describe('<PackageSidebar /> : <Module />', () => {
     };
     const wrapper = shallow(
       <Module {...props}>
-        <p>test children</p>
+        <p>{'test children'}</p>
       </Module>
     );
     expect(wrapper.html()).toMatchSnapshot();