WIP -- add new client cert UI

I thought I'd use a <Select> component for choosing the issuer/subject
name attribute, but I can't get it to recognize a click on any but the
first item in the dropdown list.

.erb/scripts/protoc

@@ -42,7 +42,7 @@ if [ ! -f "$_protoc_path/bin/protoc" ]; then
   rm protoc.zip
 fi
 
-if [ ! -x "$GOPATH/bin/protoc-gen-validate" ]; then
+if [ ! -x "$(go env GOPATH)/bin/protoc-gen-validate" ]; then
   echo "installing protoc-gen-validate"
   pushd $(pwd)
   cd "$_protoc_3pp_path/protoc-gen-validate" && make build

api.proto

@@ -202,6 +202,15 @@ message Certificate {
   optional CertificateInfo info = 3;
 }
 
+// ClientCertFromStore contains additional filters to apply when searching for
+// a client certificate in the system trust store. (This search will always
+// take into account any CA names from the TLS CertificateRequest message.)
+message ClientCertFromStore {
+  // filters based on a single name attribute (e.g. "CN=my cert" or "O=my org")
+  optional string issuer_filter = 1;
+  optional string subject_filter = 2;
+}
+
 // Connection
 message Connection {
   // name is a user friendly connection name that a user may define
@@ -217,4 +226,7 @@ message Connection {
     bytes ca_cert = 6;
   }
   optional Certificate client_cert = 7;
+  reserved 8; // unreleased client_cert_issuer_cn search criterion
+  // indicates to search the system trust store for a client certificate
+  optional ClientCertFromStore client_cert_from_store = 9;
 }

src/renderer/components/CertFilter.tsx

@@ -0,0 +1,76 @@
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import Grid from '@mui/material/Grid';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/ListItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import React, { useId, useState } from 'react';
+import TextField from '../components/TextField';
+
+interface Props {
+  label: string;
+  data: string | undefined;
+  onChange: (a: string | undefined) => void;
+  disabled: boolean;
+}
+
+const CertFilter: React.FC<Props> = ({ label, data, onChange, disabled }) => {
+  const [dataAttribute, dataValue] = (data || '').split('=', 2);
+  const attribute = dataAttribute || '';
+  const value = dataValue || '';
+
+  const selectLabelId = useId();
+  const selectId = useId();
+  const setAttribute = (newAttribute: string) => {
+    onChange(!!newAttribute ? (newAttribute + '=' + value) : undefined);
+  }
+  const setValue = (newValue: string) => {
+    onChange(attribute + '=' + newValue);
+  }
+
+  return (
+    <>
+      <Typography sx={{ pt: 1, pb: 0.5 }}>{label}</Typography>
+      <Grid container spacing={2}>
+        <Grid item xs={4}>
+          <FormControl size="small" fullWidth disabled={disabled}>
+            <InputLabel id={selectLabelId}>Attribute</InputLabel>
+            <Select
+              labelId={selectLabelId}
+              id={selectId}
+              label="Attribute"
+              renderValue={(selected) => selected}
+            >
+              <MenuItem value="" sx={{ fontStyle: 'italic'}}>None</MenuItem>
+              <MenuItem value="CN">CN (Common Name)</MenuItem>
+              <MenuItem value="O">O (Organization Name)</MenuItem>
+              <MenuItem value="OU">OU (Organizational Unit Name)</MenuItem>
+              <MenuItem value="C">C (Country Name)</MenuItem>
+              <MenuItem value="ST">ST (State or Province Name)</MenuItem>
+              <MenuItem value="L">L (Locality Name)</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={8}>
+          { attribute === ''
+            ? <Typography sx={{ py: 1, fontStyle: 'italic', color: 'text.secondary' }}>
+                No filter
+              </Typography>
+            : <TextField
+                fullWidth
+                label="Value"
+                value={value}
+                onChange={(evt): void => setValue(evt.target.value)}
+              /> }
+        </Grid>
+      </Grid>
+      <FormHelperText>
+        Limits the search to certificates where the {label} has a particular
+        attribute value (exact match).
+      </FormHelperText>
+    </>
+  );
+};
+
+export default CertFilter;