TASK: Update dependencies and apply prettier

.eslintrc

@@ -1,7 +1,9 @@
 {
     "extends": [
         "@neos-project/eslint-config-neos",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
+        "prettier/@typescript-eslint"
     ],
     "parser": "@typescript-eslint/parser",
     "plugins": [
@@ -23,6 +25,13 @@
         "semi": 0,
         "no-alert": 0,
         "no-await-in-loop": 0,
-        "react/jsx-indent-props": [2, "first"]
+        "react/jsx-indent-props": [2, "first"],
+        "prettier/prettier": ["error", {
+            "semi": true,
+            "trailingComma": "all",
+            "singleQuote": true,
+            "printWidth": 120,
+            "tabWidth": 4
+        }]
     }
 }

.stylelintrc

@@ -0,0 +1,3 @@
+{
+    "extends": "stylelint-config-recommended-scss"
+}

Resources/Private/JavaScript/components/RedirectListItem.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import Redirect from '../interfaces/Redirect';
-import {highlight, shortenPath, escapeHtml} from '../util/helpers';
+import { highlight, shortenPath, escapeHtml } from '../util/helpers';
+import { FormEvent } from 'react';
 
 const EMPTY_VALUE = '–';
 const URI_PATH_MAX_LENGTH = 80;
 
 export interface RedirectListItemProps {
     redirect: Redirect;
-    translate: Function;
-    rowClassNames: Array<string>;
+    translate: (id: string, label: string, args?: any[]) => string;
+    rowClassNames: string[];
     showHitCount: boolean;
     searchValue: string;
-    handleEditAction: Function;
-    handleDeleteAction: Function;
-    handleCopyPathAction: Function;
+    handleEditAction: (event: FormEvent, editedRedirect: Redirect) => void;
+    handleDeleteAction: (event: FormEvent, redirect: Redirect) => void;
+    handleCopyPathAction: (text: string) => void;
 }
 
 export class RedirectListItem extends React.PureComponent<RedirectListItemProps, {}> {
@@ -30,21 +31,23 @@ export class RedirectListItem extends React.PureComponent<RedirectListItemProps,
      * Highlights the comment
      */
     private renderComment = (): string => {
-        const {searchValue, redirect} = this.props;
+        const { searchValue, redirect } = this.props;
         if (redirect.comment) {
             const comment = highlight(escapeHtml(redirect.comment.trim()), searchValue);
             return comment.replace(/(?:\r\n|\r|\n)/g, '<br/>');
         }
         return EMPTY_VALUE;
     };
 
-    render(): React.ReactElement {
+    public render(): React.ReactElement {
         const {
             redirect,
             translate,
             rowClassNames,
             showHitCount,
-            handleDeleteAction, handleEditAction, handleCopyPathAction
+            handleDeleteAction,
+            handleEditAction,
+            handleCopyPathAction,
         } = this.props;
         const identifier = redirect.host + '/' + redirect.sourceUriPath;
         const parsedStartDateTime = redirect.startDateTime ? Date.parse(redirect.startDateTime) : null;
@@ -58,51 +61,82 @@ export class RedirectListItem extends React.PureComponent<RedirectListItemProps,
 
         return (
             <tr className={rowClassNames.join(' ')}>
-                <td className={rowBaseClass + '__column-status-code'}
-                    title={translate('statusCodes.' + redirect.statusCode + '.tooltip')}>{redirect.statusCode}</td>
+                <td
+                    className={rowBaseClass + '__column-status-code'}
+                    title={translate('statusCodes.' + redirect.statusCode + '.tooltip', 'Code: ' + redirect.statusCode)}
+                >
+                    {redirect.statusCode}
+                </td>
                 <td>{redirect.host || '*'}</td>
                 <td title={redirect.sourceUriPath} className={rowBaseClass + '__column-source-uri-path'}>
-                    <span dangerouslySetInnerHTML={{__html: this.renderPath(redirect.sourceUriPath)}}/>
-                    {redirect.sourceUriPath && <i role="button" className="copy-path fas fa-clipboard"
-                                                  onClick={() => handleCopyPathAction(redirect.sourceUriPath)}/>}
+                    <span dangerouslySetInnerHTML={{ __html: this.renderPath(redirect.sourceUriPath) }} />
+                    {redirect.sourceUriPath && (
+                        <i
+                            role="button"
+                            className="copy-path fas fa-clipboard"
+                            onClick={() => handleCopyPathAction(redirect.sourceUriPath)}
+                        />
+                    )}
                 </td>
                 <td title={redirect.targetUriPath} className={rowBaseClass + '__column-target-uri-path'}>
-                    <span dangerouslySetInnerHTML={{__html: this.renderPath(redirect.targetUriPath || '/')}}/>
-                    {redirect.targetUriPath && <i role="button" className="copy-path fas fa-clipboard"
-                                                  onClick={() => handleCopyPathAction(redirect.targetUriPath)}/>}
+                    <span dangerouslySetInnerHTML={{ __html: this.renderPath(redirect.targetUriPath || '/') }} />
+                    {redirect.targetUriPath && (
+                        <i
+                            role="button"
+                            className="copy-path fas fa-clipboard"
+                            onClick={() => handleCopyPathAction(redirect.targetUriPath)}
+                        />
+                    )}
                 </td>
                 <td className={rowBaseClass + '__column-start'}>
                     {redirect.startDateTime ? new Date(redirect.startDateTime).toLocaleString() : EMPTY_VALUE}
                 </td>
                 <td className={rowBaseClass + '__column-end'}>
                     {redirect.endDateTime ? new Date(redirect.endDateTime).toLocaleString() : EMPTY_VALUE}
                 </td>
-                <td className={rowBaseClass + '__column-comment'} title={redirect.comment}
-                    dangerouslySetInnerHTML={{__html: this.renderComment()}}/>
+                <td
+                    className={rowBaseClass + '__column-comment'}
+                    title={redirect.comment}
+                    dangerouslySetInnerHTML={{ __html: this.renderComment() }}
+                />
                 {showHitCount && (
-                    <td className={rowBaseClass + '__column-hit-count'}
-                        title={redirect.lastHit ? translate('list.lastHit', 'Last hit at {0}', [new Date(redirect.lastHit).toLocaleString()]) : translate('list.neverHit', 'Never hit')}>
+                    <td
+                        className={rowBaseClass + '__column-hit-count'}
+                        title={
+                            redirect.lastHit
+                                ? translate('list.lastHit', 'Last hit at {0}', [
+                                      new Date(redirect.lastHit).toLocaleString(),
+                                  ])
+                                : translate('list.neverHit', 'Never hit')
+                        }
+                    >
                         {redirect.hitCounter}
                     </td>
                 )}
                 <td className={rowBaseClass + '__column-creation-date-time'} title={redirect.creationDateTime}>
                     {redirect.creationDateTime ? new Date(redirect.creationDateTime).toLocaleDateString() : EMPTY_VALUE}
                 </td>
                 <td>
-                    {redirect.creator} {redirect.type !== 'manual' &&
-                    <span className="redirect__type">({redirect.type})</span>}
+                    {redirect.creator}{' '}
+                    {redirect.type !== 'manual' && <span className="redirect__type">({redirect.type})</span>}
                 </td>
                 <td className="neos-action">
-                    <button type="button" className="neos-button"
-                            onClick={e => handleEditAction(e, redirect)}
-                            title={translate('list.action.edit', 'Edit')}
-                            data-edit-redirect-id={identifier}>
-                        <i className="fa fa-pencil-alt icon-pencil icon-white"/>
+                    <button
+                        type="button"
+                        className="neos-button"
+                        onClick={e => handleEditAction(e, redirect)}
+                        title={translate('list.action.edit', 'Edit')}
+                        data-edit-redirect-id={identifier}
+                    >
+                        <i className="fa fa-pencil-alt icon-pencil icon-white" />
                     </button>
-                    <button type="submit" className="neos-button neos-button-danger"
-                            onClick={e => handleDeleteAction(e, redirect)}
-                            title={translate('list.action.delete', 'Delete')}>
-                        <i className="fa fa-trash-alt icon-trash icon-white"/>
+                    <button
+                        type="submit"
+                        className="neos-button neos-button-danger"
+                        onClick={e => handleDeleteAction(e, redirect)}
+                        title={translate('list.action.delete', 'Delete')}
+                    >
+                        <i className="fa fa-trash-alt icon-trash icon-white" />
                     </button>
                 </td>
             </tr>

Resources/Private/JavaScript/index.tsx

@@ -3,25 +3,17 @@ import * as ReactDOM from 'react-dom';
 
 import {RedirectList} from './components/RedirectList';
 import Redirect from './interfaces/Redirect';
+import NeosNotification from './interfaces/NeosNotification';
+import NeosI18n from './interfaces/NeosI18n';
 
 import '../Styles/styles.scss';
 
 // Declare interface for Neos backend API
 declare global {
     interface Window {
         Typo3Neos: {
-            I18n: {
-                translate: Function;
-                addObserver: Function;
-                initialized: boolean;
-            };
-            Notification: {
-                notice: Function;
-                ok: Function;
-                error: Function;
-                warning: Function;
-                info: Function;
-            };
+            I18n: NeosI18n;
+            Notification: NeosNotification;
         };
     }
 }
@@ -37,7 +29,7 @@ window.onload = async (): Promise<void> => {
         return;
     }
 
-    const redirects: Array<Redirect> = JSON.parse(redirectsList.dataset.redirectsJson);
+    const redirects: Redirect[] = JSON.parse(redirectsList.dataset.redirectsJson);
     const showHitCount: boolean = JSON.parse(redirectsList.dataset.showHitCount || 'false');
     const actions: {
         delete: string;
@@ -65,7 +57,7 @@ window.onload = async (): Promise<void> => {
      * @param label
      * @param args
      */
-    const translate = (id: string, label = '', args: Array<any> = []): string => {
+    const translate = (id: string, label: string = '', args: any[] = []): string => {
         return I18n.translate(id, label, 'Neos.RedirectHandler.Ui', 'Modules', args);
     };
 

Resources/Private/JavaScript/interfaces/NeosI18n.ts

@@ -0,0 +1,4 @@
+export default interface NeosI18n {
+    translate: (id: string, fallback: string, packageKey: string, source: string, parameters: any[]) => string;
+    initialized: boolean;
+}

Resources/Private/JavaScript/interfaces/NeosNotification.ts

@@ -1,7 +1,7 @@
 export default interface NeosNotification {
-    notice: Function;
-    ok: Function;
-    error: Function;
-    warning: Function;
-    info: Function;
+    notice: (title: string) => void;
+    ok: (title: string) => void;
+    error: (title: string, message?: string) => void;
+    warning: (title: string, message?: string) => void;
+    info: (title: string) => void;
 }

Resources/Private/JavaScript/util/datetime.ts

@@ -1,51 +1,51 @@
 export function formatReadable(date: Date): string {
-    const year: number|string = date.getFullYear();
-    let month: number|string = date.getMonth();
+    const year: number | string = date.getFullYear();
+    let month: number | string = date.getMonth();
     month++;
     if (month < 10) {
         month = '0' + month;
     }
-    let day: number|string = date.getDate();
+    let day: number | string = date.getDate();
     if (day < 10) {
         day = '0' + day;
     }
-    let hours: number|string = date.getHours();
+    let hours: number | string = date.getHours();
     if (hours < 10) {
         hours = '0' + hours;
     }
-    let minutes: number|string = date.getMinutes();
+    let minutes: number | string = date.getMinutes();
     if (minutes < 10) {
         minutes = '0' + minutes;
     }
     return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
 }
 
 export function formatW3CString(date: Date): string {
-    const year: number|string = date.getFullYear();
-    let month: number|string = date.getMonth();
+    const year: number | string = date.getFullYear();
+    let month: number | string = date.getMonth();
     month++;
     if (month < 10) {
         month = '0' + month;
     }
-    let day: number|string = date.getDate();
+    let day: number | string = date.getDate();
     if (day < 10) {
         day = '0' + day;
     }
-    let hours: number|string = date.getHours();
+    let hours: number | string = date.getHours();
     if (hours < 10) {
         hours = '0' + hours;
     }
-    let minutes: number|string = date.getMinutes();
+    let minutes: number | string = date.getMinutes();
     if (minutes < 10) {
         minutes = '0' + minutes;
     }
-    let seconds: number|string = date.getSeconds();
+    let seconds: number | string = date.getSeconds();
     if (seconds < 10) {
         seconds = '0' + seconds;
     }
     const offset = -date.getTimezoneOffset();
-    let offsetHours: number|string = Math.abs(Math.floor(offset / 60));
-    let offsetMinutes: number|string = Math.abs(offset) - (offsetHours * 60);
+    let offsetHours: number | string = Math.abs(Math.floor(offset / 60));
+    let offsetMinutes: number | string = Math.abs(offset) - offsetHours * 60;
     if (offsetHours < 10) {
         offsetHours = '0' + offsetHours;
     }
@@ -56,7 +56,21 @@ export function formatW3CString(date: Date): string {
     if (offset < 0) {
         offsetSign = '-';
     }
-    return year + '-' + month + '-' + day +
-        'T' + hours + ':' + minutes + ':' + seconds +
-        offsetSign + offsetHours + ':' + offsetMinutes;
+    return (
+        year +
+        '-' +
+        month +
+        '-' +
+        day +
+        'T' +
+        hours +
+        ':' +
+        minutes +
+        ':' +
+        seconds +
+        offsetSign +
+        offsetHours +
+        ':' +
+        offsetMinutes
+    );
 }

Resources/Private/JavaScript/util/helpers.ts

@@ -5,7 +5,7 @@ const HTML_ESCAPE_MAP: { [index: string]: string } = {
     '<': '&lt;',
     '>': '&gt;',
     '"': '&quot;',
-    '\'': '&#039;'
+    "'": '&#039;',
 };
 
 /**
@@ -39,7 +39,12 @@ export function shortenPath(path: string, maxLength: number): string {
     }
     const pathParts = path.split('/');
     if (pathParts.length > 3) {
-        return pathParts[0] + (pathParts[0].length <= 6 ? '/' + pathParts[1] : '') + '/…/' + pathParts[pathParts.length - 1];
+        return (
+            pathParts[0] +
+            (pathParts[0].length <= 6 ? '/' + pathParts[1] : '') +
+            '/…/' +
+            pathParts[pathParts.length - 1]
+        );
     }
     return path;
 }
@@ -52,8 +57,8 @@ export function shortenPath(path: string, maxLength: number): string {
  */
 export function highlight(text: string, keyword: string): string {
     if (keyword) {
-        keyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const searchRegExp = new RegExp('(' + keyword + ')', 'ig');
+        const cleanKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const searchRegExp = new RegExp('(' + cleanKeyword + ')', 'ig');
         return text.replace(searchRegExp, '<mark>$1</mark>');
     }
     return text;
@@ -85,8 +90,8 @@ function fallbackCopyTextToClipboard(text: string): void {
 
     try {
         document.execCommand('copy');
-    } catch {
-    }
+        // tslint:disable-next-line:no-empty
+    } catch {}
 
     document.body.removeChild(textArea);
 }