House cleaning (#4021)

* Fix formatting

* Remove unused imports

* Remove unused assignments

* Fix linter ignore

This was ignored before already, but it didn’t apply because the comment wasn’t actually placed on the preceding line. It would be better to fix this properly, but that’s not possible without backend changes.

* Use strict type comparisons

* Fix typo (Ctl/Ctrl)

I think `Ctl` is occasionally used as well, but `Ctrl` is much more common and what you’ll find on most keyboards

* Use strict comparisons in table editor

* Use `forEach` instead of `map`

This caused a linter warning. `map` is only used here to iterate over the arrays, so `forEach` is the proper replacement.

* Remove unused files

These are leftovers from the time when react-ftm was a separate package

* Remove useless constructors

* Remove unused network diagram layout helper

The code in this file has been commented out for a long time, the file isn’t imported anywhere else, so I assume it’s safe to remove.

* Configure ESLint to fail if there are warnings

Now that all linter warnings are resolved, let’s make sure we don’t introduce any new ones.

ui/package.json

@@ -60,7 +60,7 @@
   "scripts": {
     "start": "craco start",
     "build": "craco build",
-    "lint": "eslint --ext js,jsx,ts,tsx src",
+    "lint": "eslint --ext js,jsx,ts,tsx src --max-warnings 0",
     "test": "craco test",
     "eject": "craco eject",
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss}'",
@@ -72,13 +72,7 @@
   },
   "proxy": "http://api:5000/",
   "eslintConfig": {
-    "extends": "react-app",
-    "rules": {
-      "no-console": "error",
-      "no-debugger": "error",
-      "react/no-unknown-property": "error",
-      "react/jsx-key": "error"
-    }
+    "extends": "react-app"
   },
   "jest": {
     "transformIgnorePatterns": []

ui/src/actions/entitySetActions.js

@@ -35,7 +35,10 @@ export const createEntitySetNoMutate = asyncActionCreator(createEntitySet, {
 
 export const updateEntitySet = asyncActionCreator(
   (entitySetId, entitySet) => async () => {
-    const response = await endpoint.post(`entitysets/${entitySetId}`, entitySet);
+    const response = await endpoint.post(
+      `entitysets/${entitySetId}`,
+      entitySet
+    );
     return { entitySetId, data: response.data };
   },
   { name: 'UPDATE_ENTITYSET' }

ui/src/components/Entity/EntityViews.jsx

@@ -348,7 +348,7 @@ class EntityViews extends React.Component {
   }
 
   renderPdfSearchMode() {
-    const { entity, isPreview, activeMode } = this.props;
+    const { entity, isPreview } = this.props;
 
     if (!this.hasPdfSearchMode()) {
       return;
@@ -364,7 +364,7 @@ class EntityViews extends React.Component {
   }
 
   renderPdfSearchForm() {
-    const { location, isPreview, activeMode } = this.props;
+    const { location, isPreview } = this.props;
 
     if (!this.hasPdfSearchMode()) {
       return;

ui/src/components/common/BookmarksDrawer.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 import { Classes, Drawer, DrawerSize } from '@blueprintjs/core';
 import BookmarksList from './BookmarksList';
 

ui/src/react-ftm/components/EntityTable/TableEditor.tsx

@@ -248,7 +248,7 @@ class TableEditorBase extends React.Component<
       this.getHeaderCell(property)
     );
     const entityLinkPlaceholder =
-      visitEntity != undefined ? [this.getEntityLinkCell()] : [];
+      visitEntity !== undefined ? [this.getEntityLinkCell()] : [];
 
     if (writeable) {
       const addEntityCell = this.getAddEntityCell();
@@ -288,7 +288,7 @@ class TableEditorBase extends React.Component<
     });
 
     const entityLinkCell =
-      visitEntity != undefined ? [this.getEntityLinkCell(entity)] : [];
+      visitEntity !== undefined ? [this.getEntityLinkCell(entity)] : [];
 
     if (!writeable) {
       return [...entityLinkCell, ...propCells];
@@ -335,7 +335,7 @@ class TableEditorBase extends React.Component<
 
     const skeletonRowCount = 8;
     const entityLinkPlaceholder =
-      visitEntity != undefined ? [this.getEntityLinkCell()] : [];
+      visitEntity !== undefined ? [this.getEntityLinkCell()] : [];
     const actionCellPlaceholder = writeable
       ? [{ ...getCellBase('checkbox') }]
       : [];
@@ -356,7 +356,7 @@ class TableEditorBase extends React.Component<
     const { visibleProps } = this.state;
 
     const entityLinkPlaceholder =
-      visitEntity != undefined ? [this.getEntityLinkCell()] : [];
+      visitEntity !== undefined ? [this.getEntityLinkCell()] : [];
 
     const addRowCells = visibleProps.map((property) => ({
       ...getCellBase('property'),
@@ -591,7 +591,7 @@ class TableEditorBase extends React.Component<
 
   renderEntityLinkButton = ({ entity }: { entity: FTMEntity }) => {
     const { visitEntity } = this.props;
-    if (visitEntity == undefined) return null;
+    if (visitEntity === undefined) return null;
 
     return (
       <Button

ui/src/react-ftm/components/NetworkDiagram/layout/tools/getForceData.ts

@@ -39,8 +39,8 @@ const getForceData = ({
   let groupingLinks: Array<any> = [];
   groupings.forEach((grouping) => {
     const gVerts = grouping.getVertexIds();
-    gVerts.map((v1) => {
-      gVerts.map((v2) => {
+    gVerts.forEach((v1) => {
+      gVerts.forEach((v2) => {
         groupingLinks.push({
           source: nodes.find((n) => n.id === v1),
           target: nodes.find((n) => n.id === v2),

ui/src/react-ftm/components/NetworkDiagram/toolbox/ToolbarButtonGroup.tsx

@@ -30,10 +30,6 @@ interface IToolbarButtonGroupProps {
 }
 
 export class ToolbarButtonGroup extends React.PureComponent<IToolbarButtonGroupProps> {
-  constructor(props: Readonly<IToolbarButtonGroupProps>) {
-    super(props);
-  }
-
   renderVisible(items: any) {
     const { editorTheme } = this.props;
 

ui/src/react-ftm/editors/EdgeTypeSelect.tsx

@@ -27,10 +27,6 @@ interface IEdgeTypeSelectProps {
 }
 
 class EdgeTypeSelect extends React.PureComponent<IEdgeTypeSelectProps> {
-  constructor(props: any) {
-    super(props);
-  }
-
   getEdgeTypeIcon(type?: EdgeType) {
     if (type?.schema) {
       return <Schema.Icon schema={type.schema} />;

ui/src/react-ftm/types/Transliterate.tsx

@@ -44,7 +44,8 @@ class Transliterate extends React.PureComponent<ITransliterateProps> {
     if (!lookup || !lookup[value]) {
       return truncate ? truncateText(value, truncate) : value;
     }
-    const symbol = navigator.userAgent.indexOf('Mac OS X') != -1 ? '⌘' : 'Ctl';
+    const symbol =
+      navigator.userAgent.indexOf('Mac OS X') !== -1 ? '⌘' : 'Ctrl';
 
     return (
       <>

ui/src/screens/GroupScreen/GroupScreen.jsx

@@ -101,8 +101,8 @@ export class GroupScreen extends Component {
                 id="group.page.search.description"
                 defaultMessage="If you would like to search for specific entities or documents within the datasets that this group has access to, <link>click here</link> instead."
                 values={{
-                  // eslint-disable-next-line
                   link: (chunks) => (
+                    // eslint-disable-next-line
                     <a role="button" onClick={this.goToEntitySearch}>
                       {chunks}
                     </a>

ui/src/screens/OAuthScreen/OAuthScreen.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { loginWithToken } from 'actions/sessionActions';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { Dialog, DialogBody, AnchorButton, Intent } from '@blueprintjs/core';
+import { Dialog, DialogBody } from '@blueprintjs/core';
 import { RoleBlockedMessage } from 'components/common';
 
 import withRouter from 'app/withRouter';

ui/src/viewers/PdfViewer.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import { throttle } from 'lodash';
 import queryString from 'query-string';
 import { compose } from 'redux';
@@ -12,19 +12,11 @@ import { SectionLoading, Skeleton } from 'components/common';
 import { queryEntities } from 'actions';
 import { selectEntitiesResult } from 'selectors';
 import normalizeDegreeValue from 'util/normalizeDegreeValue';
-import EntityActionBar from 'components/Entity/EntityActionBar';
 import PdfViewerPage from 'viewers/PdfViewerPage';
 
 import './PdfViewer.scss';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 
-const messages = defineMessages({
-  placeholder: {
-    id: 'entity.viewer.search_placeholder',
-    defaultMessage: 'Search in {label}',
-  },
-});
-
 export class PdfViewer extends Component {
   constructor(props) {
     super(props);
@@ -220,17 +212,7 @@ export class PdfViewer extends Component {
   }
 
   render() {
-    const {
-      document,
-      dir,
-      activeMode,
-      pageQuery,
-      searchQuery,
-      intl,
-      page,
-      numPages,
-      shouldRenderSearch,
-    } = this.props;
+    const { document, dir, activeMode, pageQuery, page, numPages } = this.props;
 
     if (document.isPending || numPages === undefined || numPages === null) {
       return <SectionLoading />;

ui/src/viewers/PdfViewerSearch.jsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import queryString from 'query-string';
@@ -38,7 +36,7 @@ class PdfViewerSearch extends Component {
   }
 
   getResultLink(result) {
-    const { query, document, location, isPreview } = this.props;
+    const { query, location, isPreview } = this.props;
     const parsedHash = queryString.parse(location.hash);
 
     if (isPreview) {