Migrate public/main to Typescript

package.json

@@ -21,6 +21,8 @@
   "dependencies": {
     "@babel/core": "^7.10.2",
     "@hapi/joi": "15.1.1",
+    "@elastic/eui": "^26.0.0",
+    "@types/reach__router": "^1.3.5",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^10.2.1",
     "@types/jest": "^26.0.0",

public/components/main/main.js → public/components/main/main.tsx

@@ -16,31 +16,29 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import {
-  EuiFieldText,
-  EuiCheckbox,
-  EuiComboBox,
-  EuiSuperSelect,
   EuiFlexGroup,
   EuiFlexItem,
   EuiButton,
+  // @ts-ignore
   EuiPage,
-  EuiPageHeader,
   EuiTitle,
+  // @ts-ignore
   EuiPageBody,
+  // @ts-ignore
   EuiPageContent,
-  EuiPageContentBody,
+  // @ts-ignore
   EuiInMemoryTable,
   EuiHorizontalRule,
   EuiSpacer,
+  // @ts-ignore
   EuiEmptyPrompt
 } from '@elastic/eui';
 import {reports_list_columns, reports_list_users, reports_list_search, reports_list_selection_value} from './reports_table'
 import {scheduled_report_columns, scheduled_reports} from './scheduled_reports_table'
-import { Fragment } from 'react';
 
-let httpClientGlobal;
+let httpClientGlobal: { post: (arg0: string, arg1: string) => Promise<any>; };
 
-function fetchDownloadApi(url) {
+function fetchDownloadApi(url: string) {
     console.log("fetch download api")
     var data = {
       url: url
@@ -50,19 +48,6 @@ function fetchDownloadApi(url) {
     });
 }
 
-function getDashboardList(data) {
-  var hits = data.hits["hits"];
-  var dashboardList = new Array(hits.length);
-  for (var i = 0; i < hits.length; ++i) {
-    var dashboardDict = {};
-    dashboardDict["name"] = hits[i]["_source"]["dashboard"]["title"];
-    dashboardDict["id"] = hits[i]["_id"];
-    dashboardDict["id"] = dashboardDict["id"].replace("dashboard:", "");
-    dashboardList[i] = dashboardDict;
-  }
-  return dashboardList;
-}
-
 const emptyMessageReports = (
   <EuiEmptyPrompt
     title={<h3>You Have No Reports</h3>}
@@ -74,6 +59,10 @@ const emptyMessageReports = (
   />
 )
 
+interface RouterHomeProps {
+  httpClient?: any
+}
+
 const emptyMessageScheduledReports = (
   <div>
     <h3>You have no scheduled reports</h3>
@@ -84,8 +73,10 @@ const emptyMessageScheduledReports = (
   </div>
 )
 
-export class Main extends React.Component {
-  constructor(props) {
+const error = "Error: Unable to load table";
+
+export class Main extends React.Component<RouterHomeProps> {
+  constructor(props: any) {
     super(props);
     this.state = {
       dashboardList: [],
@@ -96,22 +87,7 @@ export class Main extends React.Component {
       scheduledReportFileName: [],
       pagination: this.pagination,
       renderCreateReport: false,
-      selectedOptions: this.selectedOptions,
-      setSelected: this.setSelected,
     };
-    this.renderDashboardTable = this.renderDashboardTable.bind(this);
-  }
-
-  renderDashboardTable() {
-    return this.state.dashboardList.map((dashboard, index) => {
-      const { name, id } = dashboard;
-      return (
-        <tr key={id}>
-           <EuiButton type="primary" 
-           onClick={() => fetchDownloadApi("http://localhost:5601/app/kibana#/dashboard/" + id)}>{name}</EuiButton>
-        </tr>
-      )
-    })
   }
 
   pagination = {
@@ -122,16 +98,6 @@ export class Main extends React.Component {
   componentDidMount() {
     const { httpClient } = this.props;
     httpClientGlobal = httpClient;
-    httpClient.get('../api/reporting/get_dashboards').then((resp) => {
-      // this.setState({ dashboardList: getDashboardList(resp.data) });
-      console.log(resp.data);
-      let dropdownDashboardList = resp.map(dashboard => {
-        return {value: dashboard, display: dashboard}
-      });
-      this.setState({
-        dropdownDashboardList: [{value: '', display: '(Select a dashboard to download)'}].concat(dropdownDashboardList)
-      });
-    });
   }
 
   render() {
@@ -155,7 +121,6 @@ export class Main extends React.Component {
             <EuiInMemoryTable
               items={reports_list_users}
               itemId="id"
-              error={this.error}
               loading={false}
               message={emptyMessageReports}
               columns={reports_list_columns}
@@ -167,7 +132,7 @@ export class Main extends React.Component {
               />
           </EuiPageContent>
           <EuiSpacer/>
-          <EuiPageContent panelPaddingSize={"l"} component="div" width="50px">
+          <EuiPageContent panelPaddingSize={"l"}>
             <EuiFlexGroup justifyContent="spaceEvenly">
               <EuiFlexItem>
                 <EuiTitle>
@@ -197,7 +162,6 @@ export class Main extends React.Component {
             <EuiInMemoryTable
               items={scheduled_reports}
               itemId="id"
-              error={this.error}
               loading={false}
               message={emptyMessageScheduledReports}
               columns={scheduled_report_columns}

public/components/main/report_details.js → public/components/main/report_details.tsx

@@ -40,7 +40,11 @@ import {
     EuiRadioGroup,
   } from '@elastic/eui';
 
-  export class ReportDetails extends React.Component {
+  interface RouterHomeProps {
+    httpClient?: any,
+  }
+
+  export class ReportDetails extends React.Component<RouterHomeProps> {
     constructor(props) {
       super(props);
       this.state = {};

public/components/main/reports_table.js → public/components/main/reports_table.tsx

@@ -16,6 +16,7 @@
 import React from 'react';
 import {
   EuiButton,
+  // @ts-ignore
   EuiLink
 } from '@elastic/eui';
 
@@ -34,7 +35,7 @@ export const reports_list_columns = [
   {
     field: 'reportSource',
     name: 'Source',
-    render: username => (
+    render: (username: string) => (
       <EuiLink href={`https://github.com/${username}`} target="_blank">
         {username}
       </EuiLink>
@@ -70,15 +71,11 @@ export const reports_list_users = [
     reportPDF: 'daily_sales_report_2020-04-23_17-44cf47ed1283jd.pdf'
   },
 ]
-
-export const reports_list_search = {
-  toolsLeft: renderToolsLeft,
-  toolsRight: renderToolsRight,
-  box: {
-    incremental: true,
-  },
-  filters: [],
-};
+  const loadUsers = () => {};
+  const loadUsersWithError = () => {};
+  const loading = false;
+  const selection = [];
+  const onSelectionChange = () => {};
 
 const renderToolsRight = () => {
   return [
@@ -106,21 +103,27 @@ const renderToolsLeft = () => {
     return;
   }
 
-  const onClick = () => {
-    store.deleteUsers(...selection.map(user => user.id));
-    setSelection([]);
-  };
+  const onClick = () => {};
 
   return (
     <EuiButton color="danger" iconType="trash" onClick={onClick}>
-      Delete {selection.length} Users
+      Delete Users
     </EuiButton>
   );
 };
 
+export const reports_list_search = {
+  toolsLeft: renderToolsLeft,
+  toolsRight: renderToolsRight,
+  box: {
+    incremental: true,
+  },
+  filters: [],
+};
+
 export const reports_list_selection_value = {
-  selectable: user => user.online,
-  selectableMessage: selectable =>
-      !selectable ? 'User is currently offline' : undefined,
-  onSelectionChange: selection => setSelection(selection),
+  selectable: (user: { online: boolean; }) => user.online,
+  selectableMessage: (selectable: boolean) =>
+    !selectable ? 'User is currently offline' : undefined,
+  onSelectionChange: (selection: string[]) => onSelectionChange,
 };

public/components/main/router_home.tsx

@@ -28,10 +28,10 @@ import { CreateReport } from '../create_report/create_report';
 import { ReportDetails } from './report_details';
 
 interface RouterHomeProps {
-  httpClient?: any
+  httpClient?: any,
 }
 
-export class RouterHome extends React.Component<RouterHomeProps> {
+export class RouterHome extends React.Component<RouterHomeProps, any> {
   constructor(props: any) {
     super(props);
     this.state = {};

public/components/main/scheduled_reports_table.js → public/components/main/scheduled_reports_table.tsx

@@ -15,6 +15,7 @@
 
 import React from 'react';
 import {
+  // @ts-ignore
   EuiLink
 } from '@elastic/eui';
 
@@ -33,7 +34,7 @@ export const scheduled_report_columns = [
   {
     field: 'reportSource',
     name: 'Source',
-    render: username => (
+    render: (username: any) => (
       <EuiLink href={`https://github.com/${username}`} target="_blank">
         {username}
       </EuiLink>