auto fix eslint errors where possible (#4673)

dashboard/react-table.d.ts

@@ -1,121 +1,71 @@
 import {
-  UseColumnOrderInstanceProps,
-  UseColumnOrderState,
-  UseExpandedHooks,
-  UseExpandedInstanceProps,
-  UseExpandedOptions,
-  UseExpandedRowProps,
-  UseExpandedState,
-  UseFiltersColumnOptions,
-  UseFiltersColumnProps,
-  UseFiltersInstanceProps,
-  UseFiltersOptions,
-  UseFiltersState,
-  UseGlobalFiltersColumnOptions,
-  UseGlobalFiltersInstanceProps,
-  UseGlobalFiltersOptions,
-  UseGlobalFiltersState,
-  UseGroupByCellProps,
-  UseGroupByColumnOptions,
-  UseGroupByColumnProps,
-  UseGroupByHooks,
-  UseGroupByInstanceProps,
-  UseGroupByOptions,
-  UseGroupByRowProps,
-  UseGroupByState,
-  UsePaginationInstanceProps,
-  UsePaginationOptions,
-  UsePaginationState,
-  UseResizeColumnsColumnOptions,
-  UseResizeColumnsColumnProps,
-  UseResizeColumnsOptions,
-  UseResizeColumnsState,
-  UseRowSelectHooks,
-  UseRowSelectInstanceProps,
-  UseRowSelectOptions,
-  UseRowSelectRowProps,
-  UseRowSelectState,
-  UseRowStateCellProps,
-  UseRowStateInstanceProps,
-  UseRowStateOptions,
-  UseRowStateRowProps,
-  UseRowStateState,
-  UseSortByColumnOptions,
-  UseSortByColumnProps,
-  UseSortByHooks,
-  UseSortByInstanceProps,
-  UseSortByOptions,
-  UseSortByState,
+  type UseColumnOrderInstanceProps,
+  type UseColumnOrderState,
+  type UseExpandedHooks,
+  type UseExpandedInstanceProps,
+  type UseExpandedOptions,
+  type UseExpandedRowProps,
+  type UseExpandedState,
+  type UseFiltersColumnOptions,
+  type UseFiltersColumnProps,
+  type UseFiltersInstanceProps,
+  type UseFiltersOptions,
+  type UseFiltersState,
+  type UseGlobalFiltersColumnOptions,
+  type UseGlobalFiltersInstanceProps,
+  type UseGlobalFiltersOptions,
+  type UseGlobalFiltersState,
+  type UseGroupByCellProps,
+  type UseGroupByColumnOptions,
+  type UseGroupByColumnProps,
+  type UseGroupByHooks,
+  type UseGroupByInstanceProps,
+  type UseGroupByOptions,
+  type UseGroupByRowProps,
+  type UseGroupByState,
+  type UsePaginationInstanceProps,
+  type UsePaginationOptions,
+  type UsePaginationState,
+  type UseResizeColumnsColumnOptions,
+  type UseResizeColumnsColumnProps,
+  type UseResizeColumnsOptions,
+  type UseResizeColumnsState,
+  type UseRowSelectHooks,
+  type UseRowSelectInstanceProps,
+  type UseRowSelectOptions,
+  type UseRowSelectRowProps,
+  type UseRowSelectState,
+  type UseRowStateCellProps,
+  type UseRowStateInstanceProps,
+  type UseRowStateOptions,
+  type UseRowStateRowProps,
+  type UseRowStateState,
+  type UseSortByColumnOptions,
+  type UseSortByColumnProps,
+  type UseSortByHooks,
+  type UseSortByInstanceProps,
+  type UseSortByOptions,
+  type UseSortByState,
 } from "react-table";
 
 declare module "react-table" {
   // take this file as-is, or comment out the sections that don't apply to your plugin configuration
 
-  export interface TableOptions<
+  export type TableOptions<
     D extends object = {}
-  > extends UseExpandedOptions<D>,
-      UseFiltersOptions<D>,
-      UseGlobalFiltersOptions<D>,
-      UseGroupByOptions<D>,
-      UsePaginationOptions<D>,
-      UseResizeColumnsOptions<D>,
-      UseRowSelectOptions<D>,
-      UseRowStateOptions<D>,
-      UseSortByOptions<D>,
-      // note that having Record here allows you to add anything to the options, this matches the spirit of the
-      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
-      // feature set, this is a safe default.
-      Record<string, any> {}
+  > = {} & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & Record<string, any>
 
-  export interface Hooks<D extends object = {}>
-    extends UseExpandedHooks<D>,
-      UseGroupByHooks<D>,
-      UseRowSelectHooks<D>,
-      UseSortByHooks<D> {}
+  export type Hooks<D extends object = {}> = {} & UseExpandedHooks<D> & UseGroupByHooks<D> & UseRowSelectHooks<D> & UseSortByHooks<D>
 
-  export interface TableInstance<D extends object = {}>
-    extends UseColumnOrderInstanceProps<D>,
-      UseExpandedInstanceProps<D>,
-      UseFiltersInstanceProps<D>,
-      UseGlobalFiltersInstanceProps<D>,
-      UseGroupByInstanceProps<D>,
-      UsePaginationInstanceProps<D>,
-      UseRowSelectInstanceProps<D>,
-      UseRowStateInstanceProps<D>,
-      UseSortByInstanceProps<D> {}
+  export type TableInstance<D extends object = {}> = {} & UseColumnOrderInstanceProps<D> & UseExpandedInstanceProps<D> & UseFiltersInstanceProps<D> & UseGlobalFiltersInstanceProps<D> & UseGroupByInstanceProps<D> & UsePaginationInstanceProps<D> & UseRowSelectInstanceProps<D> & UseRowStateInstanceProps<D> & UseSortByInstanceProps<D>
 
-  export interface TableState<D extends object = {}>
-    extends UseColumnOrderState<D>,
-      UseExpandedState<D>,
-      UseFiltersState<D>,
-      UseGlobalFiltersState<D>,
-      UseGroupByState<D>,
-      UsePaginationState<D>,
-      UseResizeColumnsState<D>,
-      UseRowSelectState<D>,
-      UseRowStateState<D>,
-      UseSortByState<D> {}
+  export type TableState<D extends object = {}> = {} & UseColumnOrderState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseGroupByState<D> & UsePaginationState<D> & UseResizeColumnsState<D> & UseRowSelectState<D> & UseRowStateState<D> & UseSortByState<D>
 
-  export interface ColumnInterface<D extends object = {}>
-    extends UseFiltersColumnOptions<D>,
-      UseGlobalFiltersColumnOptions<D>,
-      UseGroupByColumnOptions<D>,
-      UseResizeColumnsColumnOptions<D>,
-      UseSortByColumnOptions<D> {}
+  export type ColumnInterface<D extends object = {}> = {} & UseFiltersColumnOptions<D> & UseGlobalFiltersColumnOptions<D> & UseGroupByColumnOptions<D> & UseResizeColumnsColumnOptions<D> & UseSortByColumnOptions<D>
 
-  export interface ColumnInstance<D extends object = {}>
-    extends UseFiltersColumnProps<D>,
-      UseGroupByColumnProps<D>,
-      UseResizeColumnsColumnProps<D>,
-      UseSortByColumnProps<D> {}
+  export type ColumnInstance<D extends object = {}> = {} & UseFiltersColumnProps<D> & UseGroupByColumnProps<D> & UseResizeColumnsColumnProps<D> & UseSortByColumnProps<D>
 
-  export interface Cell<D extends object = {}, V = any>
-    extends UseGroupByCellProps<D>,
-      UseRowStateCellProps<D> {}
+  export type Cell<D extends object = {}, V = any> = {} & UseGroupByCellProps<D> & UseRowStateCellProps<D>
 
-  export interface Row<D extends object = {}>
-    extends UseExpandedRowProps<D>,
-      UseGroupByRowProps<D>,
-      UseRowSelectRowProps<D>,
-      UseRowStateRowProps<D> {}
+  export type Row<D extends object = {}> = {} & UseExpandedRowProps<D> & UseGroupByRowProps<D> & UseRowSelectRowProps<D> & UseRowStateRowProps<D>
 }

dashboard/src/assets/GoogleIcon.tsx

@@ -65,9 +65,9 @@ export default class GHIcon extends Component<PropsType, StateType> {
         <g
           id="Google-Button"
           stroke="none"
-          stroke-width="1"
+          strokeWidth="1"
           fill="none"
-          fill-rule="evenodd"
+          fillRule="evenodd"
         >
           <g id="9-PATCH" transform="translate(-608.000000, -160.000000)"></g>
           <g
@@ -80,7 +80,7 @@ export default class GHIcon extends Component<PropsType, StateType> {
               filter="url(#filter-1)"
             >
               <g id="button-bg">
-                <use fill="#FFFFFF" fill-rule="evenodd"></use>
+                <use fill="#FFFFFF" fillRule="evenodd"></use>
                 <use fill="none"></use>
                 <use fill="none"></use>
                 <use fill="none"></use>

dashboard/src/components/AzureCredentialForm.tsx

@@ -106,7 +106,7 @@ const AzureCredentialForm: React.FC<Props> = ({ goBack, proceed }) => {
                 Follow our <Link to="https://docs.porter.run/provision/provisioning-on-azure" target="_blank">documentation</Link> to create your service principal and prepare your subscription for use with Porter.
               </Text>
               <Spacer y={1} />
-              <Button onClick={() => setCurrentStep(1)}>
+              <Button onClick={() => { setCurrentStep(1); }}>
                 Continue
               </Button>
             </>,
@@ -162,7 +162,7 @@ const AzureCredentialForm: React.FC<Props> = ({ goBack, proceed }) => {
                 />
               <Spacer y={1} />
               <Container row>
-                  <Button onClick={() => setCurrentStep(0)} color="#222222">Back</Button>
+                  <Button onClick={() => { setCurrentStep(0); }} color="#222222">Back</Button>
                   <Spacer inline x={0.5} />
                   <Button
                     onClick={saveCredentials}

dashboard/src/components/Breadcrumb.tsx

@@ -5,7 +5,7 @@ import styled from "styled-components";
 
 type Props = {
   currentStep: string;
-  steps: { value: string; label: string }[];
+  steps: Array<{ value: string; label: string }>;
   onClickStep?: (step: string) => void;
 };
 
@@ -17,7 +17,7 @@ const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
           <Fragment key={i}>
             <Crumb
               bold={currentStep === step.value}
-              onClick={() => onClickStep && onClickStep(step.value)}
+              onClick={() => { onClickStep && onClickStep(step.value); }}
             >
               {step.label}
             </Crumb>

dashboard/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-interface Props {
+type Props = {
   disabled?: boolean;
   children: React.ReactNode;
   onClick: () => void;

dashboard/src/components/CopyToClipboard.tsx

@@ -1,6 +1,6 @@
 // import ClipboardJS from "clipboard";
 import ClipboardJS from "clipboard";
-import React, { Component, RefObject } from "react";
+import React, { Component, type RefObject } from "react";
 import Tooltip from "@material-ui/core/Tooltip";
 import styled from "styled-components";
 
@@ -72,7 +72,7 @@ export default class CopyToClipboard extends Component<PropsType, StateType> {
   }
 
   componentWillUnmount() {
-    if (this.state.clipboard && this.state.clipboard.destroy) {
+    if (this.state.clipboard?.destroy) {
       this.state.clipboard.destroy();
     }
   }

dashboard/src/components/CredentialsForm.tsx

@@ -131,7 +131,7 @@ const CredentialsForm: React.FC<Props> = ({
           <Br height="34px" />
           <SaveButton
             disabled={!selectedCredentials && true}
-            onClick={() => proceed(selectedCredentials.aws_arn)}
+            onClick={() => { proceed(selectedCredentials.aws_arn); }}
             clearPosition
             text="Continue"
           />
@@ -143,15 +143,15 @@ const CredentialsForm: React.FC<Props> = ({
         <StyledForm>
           {
             awsCredentials.length > 0 && (
-              <CloseButton onClick={() => setShowCreateForm(false)}>
+              <CloseButton onClick={() => { setShowCreateForm(false); }}>
                 <i className="material-icons">close</i>
               </CloseButton>
             )
           }
           <InputRow
             type="string"
             value={awsAccessKeyID}
-            setValue={(e: string) => setAWSAccessKeyID(e)}
+            setValue={(e: string) => { setAWSAccessKeyID(e); }}
             label="👤 AWS access ID"
             placeholder="ex: AKIAIOSFODNN7EXAMPLE"
             isRequired

dashboard/src/components/DynamicLink.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, LinkProps } from "react-router-dom";
+import { Link, type LinkProps } from "react-router-dom";
 
 const DynamicLink: React.FC<LinkProps> = ({ to, children, hasunderline, ...props }) => {
   // It is a simple element with nothing to link to

dashboard/src/components/ExpandableResource.tsx

@@ -20,12 +20,12 @@ const ExpandableResource: React.FC<Props> = (props) => {
   const { currentCluster, currentProject } = useContext(Context);
 
   const onSave = () => {
-    let projID = currentProject.id;
-    let clusterID = currentCluster.id;
-    let config = button.actions[0].delete.context.config;
+    const projID = currentProject.id;
+    const clusterID = currentCluster.id;
+    const config = button.actions[0].delete.context.config;
 
     // TODO: construct the endpoint scope, right now we're just using release scope
-    let uri = `/api/projects/${projID}/clusters/${clusterID}/namespaces/${resource.metadata.namespace}${button.actions[0].delete.relative_uri}`;
+    const uri = `/api/projects/${projID}/clusters/${clusterID}/namespaces/${resource.metadata.namespace}${button.actions[0].delete.relative_uri}`;
 
     // compute the endpoint using button and target context
     baseApi<
@@ -49,7 +49,7 @@ const ExpandableResource: React.FC<Props> = (props) => {
       {}
     )
       .then((res) => {})
-      .catch((err) => console.log(err));
+      .catch((err) => { console.log(err); });
   };
 
   return (

dashboard/src/components/GCPCredentialsForm.tsx

@@ -41,7 +41,7 @@ const GCPCredentialsForm: React.FC<Props> = ({ goBack, proceed }) => {
     gcpIntegration()
 
   }, [detected])
-  interface FailureState {
+  type FailureState = {
     condition: boolean;
     errorMessage: string;
   }
@@ -167,7 +167,7 @@ const GCPCredentialsForm: React.FC<Props> = ({ goBack, proceed }) => {
             <Text size={16}>Upload service account credentials</Text>
             <Spacer y={1} />
             <UploadArea
-              setValue={(x: string) => handleLoadJSON(x)}
+              setValue={(x: string) => { handleLoadJSON(x); }}
               label="🔒 GCP Key Data (JSON)"
               placeholder="Drag a GCP Service Account JSON here, or click to browse."
               width="100%"