run npm lint when open PR (#6375)

* 01 fix code warnings

* 02 change test.yml

.github/workflows/test.yml

@@ -3,10 +3,18 @@ name: Seahub Test CI
 on:
   pull_request:
 
+env:
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
 jobs:
   build:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [20.x]
+
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-python@v1
@@ -40,3 +48,13 @@ jobs:
           cd $GITHUB_WORKSPACE
           export CCNET_CONF_DIR=/tmp/ccnet SEAFILE_CONF_DIR=/tmp/seafile-data TRAVIS=1
           if ./tests/test_seahub_changes.sh; then ./tests/seahubtests.sh init && ./tests/seahubtests.sh runserver && ./tests/seahubtests.sh test; else true; fi
+      
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: run npm lint
+        run: |
+          cd $GITHUB_WORKSPACE/tests/
+          chmod +x github_actions_npm_lint.sh
+          ./github_actions_npm_lint.sh

frontend/src/components/dialog/about-dialog.js

@@ -28,7 +28,7 @@ class AboutDialog extends React.Component {
         <Modal isOpen={true} toggle={toggleDialog}>
           <ModalBody>
             <button type="button" className="close" onClick={toggleDialog}><span aria-hidden="true">×</span></button>
-            <div className="about-content" dangerouslySetInnerHTML={{__html: aboutDialogCustomHtml}}></div>
+            <div className="about-content" dangerouslySetInnerHTML={{ __html: aboutDialogCustomHtml }}></div>
           </ModalBody>
         </Modal>
       );

frontend/src/components/dialog/create-department-repo-dialog.js

@@ -20,9 +20,9 @@ class CreateDepartmentRepoDialog extends React.Component {
 
   handleChange = (e) => {
     if (!e.target.value.trim()) {
-      this.setState({isSubmitBtnActive: false});
+      this.setState({ isSubmitBtnActive: false });
     } else {
-      this.setState({isSubmitBtnActive: true});
+      this.setState({ isSubmitBtnActive: true });
     }
 
     this.setState({
@@ -54,12 +54,12 @@ class CreateDepartmentRepoDialog extends React.Component {
     let repoName = this.state.repoName.trim();
     if (!repoName.length) {
       errMessage = gettext('Name is required');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
     if (repoName.indexOf('/') > -1) {
       errMessage = gettext('Name should not include \'/\'.');
-      this.setState({errMessage: errMessage});
+      this.setState({ errMessage: errMessage });
       return false;
     }
 

frontend/src/components/dialog/insert-repo-image-dialog.js

@@ -37,12 +37,12 @@ class InsertRepoImageDialog extends React.Component {
       });
     }
     else {
-      this.setState({repo: null, selectedPath: ''});
+      this.setState({ repo: null, selectedPath: '' });
     }
   };
 
   onRepoItemClick = () => {
-    this.setState({repo: null, selectedPath: ''});
+    this.setState({ repo: null, selectedPath: '' });
   };
 
   render() {

frontend/src/components/dialog/sysadmin-dialog/sysadmin-repo-transfer-dialog.js

@@ -20,7 +20,7 @@ class SysAdminRepoTransferDialog extends React.Component {
   }
 
   handleSelectChange = (option) => {
-    this.setState({selectedOption: option});
+    this.setState({ selectedOption: option });
   };
 
   submit = () => {
@@ -30,13 +30,13 @@ class SysAdminRepoTransferDialog extends React.Component {
 
   render() {
     const repoName = this.props.repoName;
-    const innerSpan = '<span class="op-target" title=' + repoName + '>' + repoName +'</span>';
+    const innerSpan = '<span class="op-target" title=' + repoName + '>' + repoName + '</span>';
     let msg = gettext('Transfer Library {library_name}');
     let message = msg.replace('{library_name}', innerSpan);
     return (
       <Modal isOpen={true} toggle={this.props.toggle}>
         <ModalHeader toggle={this.props.toggle}>
-          <div dangerouslySetInnerHTML={{__html:message}} />
+          <div dangerouslySetInnerHTML={{ __html: message }} />
         </ModalHeader>
         <ModalBody>
           <UserSelect

frontend/src/components/search/constant.js

@@ -3,7 +3,7 @@ const getValueLength = (str) => {
   let len = 0;
   for (let i = 0; i < str.length; i++) {
     code = str.charCodeAt(i);
-    if (code == 10) { //solve enter problem
+    if (code == 10) { // solve enter problem
       len += 2;
     } else if (code < 0x007f) {
       len += 1;

frontend/src/components/search/wiki-search.js

@@ -55,7 +55,7 @@ class Search extends Component {
 
   onChangeHandler = (event) => {
     let _this = this;
-    this.setState({value: event.target.value});
+    this.setState({ value: event.target.value });
     let newValue = event.target.value;
     if (this.inputValue === newValue.trim()) {
       return false;
@@ -124,7 +124,7 @@ class Search extends Component {
 
   sendRequest(queryData) {
     // 'page=1' for this first request
-    this.setState({page: 1}, () => {
+    this.setState({ page: 1 }, () => {
       const { search_repo, q } = queryData;
       const { page, perPage } = this.state;
       this.searchWiki(search_repo, q, page, perPage);
@@ -220,7 +220,7 @@ class Search extends Component {
 
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
-    let style = {'width': width};
+    let style = { 'width': width };
     return (
       <Fragment>
         <MediaQuery query="(min-width: 768px)">

frontend/src/pages/repo-wiki-mode/side-panel.js

@@ -45,15 +45,15 @@ class SidePanel extends Component {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({opNode: nextProps.currentNode});
+    this.setState({ opNode: nextProps.currentNode });
   }
 
   onMouseEnter = () => {
-    this.setState({isMenuIconShow: true});
+    this.setState({ isMenuIconShow: true });
   };
 
   onMouseLeave = () => {
-    this.setState({isMenuIconShow: false});
+    this.setState({ isMenuIconShow: false });
   };
 
   onDropdownToggleClick = (e) => {
@@ -62,16 +62,16 @@ class SidePanel extends Component {
   };
 
   toggleOperationMenu = () => {
-    this.setState({isHeaderMenuShow: !this.state.isHeaderMenuShow});
+    this.setState({ isHeaderMenuShow: !this.state.isHeaderMenuShow });
   };
 
   onNodeClick = (node) => {
-    this.setState({opNode: node});
+    this.setState({ opNode: node });
     this.props.onNodeClick(node);
   };
 
   onMenuItemClick = (operation, node) => {
-    this.setState({opNode: node});
+    this.setState({ opNode: node });
     switch (operation) {
       case 'New Folder':
         this.onAddFolderToggle();
@@ -96,7 +96,7 @@ class SidePanel extends Component {
         opNode: root,
       });
     } else {
-      this.setState({isAddFileDialogShow: !this.state.isAddFileDialogShow});
+      this.setState({ isAddFileDialogShow: !this.state.isAddFileDialogShow });
     }
   };
 
@@ -108,31 +108,31 @@ class SidePanel extends Component {
         opNode: root,
       });
     } else {
-      this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
+      this.setState({ isAddFolderDialogShow: !this.state.isAddFolderDialogShow });
     }
   };
 
   onRenameToggle = () => {
-    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
+    this.setState({ isRenameDialogShow: !this.state.isRenameDialogShow });
   };
 
   onDeleteToggle = () => {
-    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
+    this.setState({ isDeleteDialogShow: !this.state.isDeleteDialogShow });
   };
 
   onAddFolderNode = (dirPath) => {
-    this.setState({isAddFolderDialogShow: !this.state.isAddFolderDialogShow});
+    this.setState({ isAddFolderDialogShow: !this.state.isAddFolderDialogShow });
     this.props.onAddFolderNode(dirPath);
   };
 
   onRenameNode = (newName) => {
-    this.setState({isRenameDialogShow: !this.state.isRenameDialogShow});
+    this.setState({ isRenameDialogShow: !this.state.isRenameDialogShow });
     let node = this.state.opNode;
     this.props.onRenameNode(node, newName);
   };
 
   onDeleteNode = () => {
-    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
+    this.setState({ isDeleteDialogShow: !this.state.isDeleteDialogShow });
     let node = this.state.opNode;
     this.props.onDeleteNode(node);
   };
@@ -152,7 +152,7 @@ class SidePanel extends Component {
 
   render() {
     return (
-      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '': 'left-zero'}`}>
+      <div className={`side-panel wiki-side-panel ${this.props.closeSideBar ? '' : 'left-zero'}`}>
         <div className="side-panel-top panel-top">
           <Logo onCloseSidePanel={this.props.onCloseSide} />
         </div>

frontend/src/pages/wiki2/utils/generate-navs.js

@@ -87,5 +87,3 @@ export const generateNavItems = (slateNodes) => {
   return treeRoot;
 };
 
-
-

tests/github_actions_npm_lint.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+set -e
+set -x
+
+if test $GITHUB_EVENT_NAME = "pull_request"; then
+    branch=$GITHUB_HEAD_REF
+else
+    branch=${GITHUB_REF##*/}
+fi
+
+export GITHUB_BRANCH=$branch
+
+echo "GITHUB_BRANCH: $GITHUB_BRANCH"
+
+export PYTHONPATH="${PYTHONPATH}:/tmp/site-packages"
+
+echo "PYTHONPATH: $PYTHONPATH"
+
+echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >~/.npmrc
+
+cd $GITHUB_WORKSPACE
+
+echo "npm run lint on frontend/src files..."
+
+cd ./frontend && npm install && npm run lint