connect-form: break out components (#432)

* connect-form: break out components

* fix import order

* lint

* more lint

* more linting

Author: calebdoxsey

package.json

@@ -187,6 +187,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.1",
     "@types/enzyme": "^3.10.18",
     "@types/enzyme-adapter-react-16": "^1.0.9",
     "@types/history": "5.0.0",
@@ -311,7 +312,14 @@
         }
       }
     ],
-    "singleQuote": true
+    "singleQuote": true,
+    "plugins": [
+      "@trivago/prettier-plugin-sort-imports"
+    ],
+    "importOrder": [
+      "^[./]"
+    ],
+    "importOrderSeparation": true
   },
   "renovate": {
     "extends": [

src/App.tsx

@@ -1,4 +1,13 @@
+import {
+  CssBaseline,
+  ThemeProvider,
+  StyledEngineProvider,
+} from '@mui/material';
+import StylesProvider from '@mui/styles/StylesProvider';
+import jssPreset from '@mui/styles/jssPreset';
 import { ipcRenderer } from 'electron';
+import { create } from 'jss';
+import { SnackbarProvider } from 'notistack';
 import React, { FC, useEffect } from 'react';
 import {
   HashRouter,
@@ -9,22 +18,13 @@ import {
   Navigate,
 } from 'react-router-dom';
 
-import {
-  CssBaseline,
-  ThemeProvider,
-  StyledEngineProvider,
-} from '@mui/material';
-import jssPreset from '@mui/styles/jssPreset';
-import StylesProvider from '@mui/styles/StylesProvider';
-import { create } from 'jss';
-import { SnackbarProvider } from 'notistack';
+import SnackbarCloseButton from './renderer/components/SnackbarCloseButton';
 import ConnectForm from './renderer/pages/ConnectForm';
-import ManageConnections from './renderer/pages/ManageConnections';
 import ConnectionView from './renderer/pages/ConnectionView';
-import SnackbarCloseButton from './renderer/components/SnackbarCloseButton';
+import Layout from './renderer/pages/Layout';
+import ManageConnections from './renderer/pages/ManageConnections';
 import { THEMES } from './shared/constants';
 import createCustomTheme, { ThemeConfig } from './shared/theme';
-import Layout from './renderer/pages/Layout';
 
 const RouteListener: FC = () => {
   const navigate = useNavigate();

src/cli.ts

@@ -1,6 +1,6 @@
-import { ChildProcessWithoutNullStreams, spawn } from 'child_process';
-import * as Sentry from '@sentry/electron/main';
 import { ChannelCredentials } from '@grpc/grpc-js';
+import * as Sentry from '@sentry/electron/main';
+import { ChildProcessWithoutNullStreams, spawn } from 'child_process';
 import { createServer } from 'net';
 
 import { pomeriumCli } from './main/binaries';

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+
 import App from './App';
 import './App.global.css';
 

src/main.dev.ts

@@ -1,5 +1,4 @@
 /* eslint global-require: off, no-console: off */
-
 /**
  * This module executes inside of electron's main process. You can start
  * electron renderer process from here and communicate with the other processes
@@ -8,22 +7,24 @@
  * When running `yarn build` or `yarn build-main`, this file is compiled to
  * `./src/main.prod.js` using webpack. This gives us some performance wins.
  */
+import * as grpc from '@grpc/grpc-js';
+import * as Sentry from '@sentry/electron/main';
 import {
   app,
   BrowserWindow,
   dialog,
   ipcMain,
   MessageBoxOptions,
 } from 'electron';
-import * as grpc from '@grpc/grpc-js';
-import * as Sentry from '@sentry/electron/main';
+import contextMenu from 'electron-context-menu';
 import log from 'electron-log';
 import { autoUpdater } from 'electron-updater';
+import fs from 'fs';
 import { menubar } from 'menubar';
-import * as url from 'url';
 import path from 'path';
-import fs from 'fs';
-import contextMenu from 'electron-context-menu';
+import * as url from 'url';
+
+import { start } from './cli';
 import createWindow from './renderer/window';
 import {
   isDev,
@@ -47,7 +48,6 @@ import {
   LISTENER_LOG,
   GET_ALL_RECORDS,
 } from './shared/constants';
-import Helper from './trayMenu/helper';
 import {
   ConnectionStatusUpdate,
   ExportRequest,
@@ -58,7 +58,7 @@ import {
   Selector,
   StatusUpdatesRequest,
 } from './shared/pb/api';
-import { start } from './cli';
+import Helper from './trayMenu/helper';
 
 const SentryDSN =
   'https://[email protected]/6146413';
@@ -279,7 +279,7 @@ async function init(): Promise<void> {
             const bytes = fs.readFileSync(response.filePaths[0], null);
             configClient.import(
               {
-                data: bytes,
+                data: bytes as unknown as Uint8Array,
               } as ImportRequest,
               (err, res) => {
                 evt?.sender?.send(IMPORT, { err, res });

src/renderer/components/AdvancedConnectionSettings.tsx

@@ -0,0 +1,77 @@
+import {
+  FormControlLabel,
+  FormHelperText,
+  Grid,
+  Switch,
+  Typography,
+} from '@mui/material';
+import React, { FC } from 'react';
+
+import { Connection } from '../../shared/pb/api';
+import ClientCertSelection from './ClientCertSelection';
+import TextField from './TextField';
+
+export type AdvancedConnectionSettingsProps = {
+  connection: Connection;
+  onChangeConnection: (connection: Connection) => void;
+};
+const AdvancedConnectionSettings: FC<AdvancedConnectionSettingsProps> = ({
+  connection,
+  onChangeConnection,
+}) => {
+  const onToggleDisableTlsVerification = () => {
+    onChangeConnection({
+      ...connection,
+      disableTlsVerification: !connection?.disableTlsVerification,
+    });
+  };
+  const onChangeUrl = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    onChangeConnection({
+      ...connection,
+      pomeriumUrl: evt.target.value.trim() || undefined,
+    });
+  };
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <TextField
+          fullWidth
+          required
+          label="Pomerium URL"
+          value={connection?.pomeriumUrl || ''}
+          onChange={onChangeUrl}
+          variant="outlined"
+          autoFocus
+          helperText="URL of a Bastion host to use for the initial TLS connection"
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={connection?.disableTlsVerification}
+              name="disable-tls-verification"
+              color="primary"
+              onChange={onToggleDisableTlsVerification}
+            />
+          }
+          label="Disable TLS Verification"
+        />
+        <FormHelperText sx={{ pl: 2 }}>
+          Skips TLS verification. No Cert Authority Needed.
+        </FormHelperText>
+      </Grid>
+      <Grid item xs={12}>
+        <Typography sx={{ fontWeight: 500, pt: 1 }}>
+          Client certificates
+        </Typography>
+      </Grid>
+      <ClientCertSelection
+        connection={connection}
+        onChangeConnection={onChangeConnection}
+      />
+    </Grid>
+  );
+};
+export default AdvancedConnectionSettings;

src/renderer/components/BeforeBackActionDialog.tsx

@@ -5,8 +5,9 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
-import React, { ReactElement } from 'react';
 import { ipcRenderer } from 'electron';
+import React, { ReactElement } from 'react';
+
 import { VIEW_CONNECTION_LIST } from '../../shared/constants';
 
 interface Props {

src/renderer/components/CertDetails.tsx

@@ -1,5 +1,7 @@
+import Button from '@mui/material/Button';
 import Container from '@mui/material/Container';
 import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
@@ -10,8 +12,6 @@ import Typography from '@mui/material/Typography';
 import moment from 'moment';
 import React, { ReactElement } from 'react';
 
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
 import { Certificate } from '../../shared/pb/api';
 
 interface DetailViewDialogProps {

src/renderer/components/CertFilter.tsx

@@ -6,6 +6,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
 import Typography from '@mui/material/Typography';
 import React, { useEffect, useId, useRef } from 'react';
+
 import TextField from './TextField';
 
 interface Props {
@@ -30,7 +31,7 @@ const CertFilter: React.FC<Props> = ({ label, data, onChange, disabled }) => {
     onChange(attribute + '=' + newValue);
   };
 
-  const valueInputRef = useRef(null);
+  const valueInputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     valueInputRef.current?.focus();
   }, [attribute]);