v0.1.15 (#38)

RELEASE.md

@@ -2,9 +2,9 @@
 
 - Release the service at keys-pub/keys-ext.
 - Update package.json version.
+- Test updater: `VERSION=0.0.0 KEYS_BIN=~/go/bin/keys UPDATER_BIN=~/go/bin/updater UPDATER_APPLY=/Applications/Keys.app yarn start-prod` to ensure this version is updateable. (On Windows, `VERSION=0.0.0 KEYS_BIN=~/go/bin/keys.exe UPDATER_BIN=~/go/bin/updater.exe yarn start-prod`)
 - Create branch with version v1.2.3, the github action will build the apps.
 - Save app release as prerelease (from draft).
-- Test updater with `VERSION=0.0.0 KEYS_BIN=~/go/bin/keys UPDATER_BIN=~/go/bin/updater UPDATER_APPLY=/Applications/Keys.app yarn start-prod` to ensure this version is updateable. (On both windows and macOS.)
 
 ## Prerelease to Release
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "keys",
   "productName": "Keys",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "Key management, signing and encryption.",
   "scripts": {
     "dev": "rimraf build && yarn webpack --env.NODE_ENV=development --env.target=render && yarn webpack --env.NODE_ENV=development --env.target=main",

src/renderer/components/dialog.tsx

@@ -23,14 +23,16 @@ type DialogTitleProps = {
 
 const DialogTitle = (props: DialogTitleProps) => {
   return (
-    <Box display="flex" flexDirection="column" className="drag">
+    <Box display="flex" flexDirection="column">
       <Box display="flex" flexGrow={1} flexDirection="row">
-        <Typography
-          style={{paddingBottom: 3, paddingLeft: 20, paddingTop: 10, fontSize: 19, fontWeight: 500}}
-        >
-          {props.children}
-        </Typography>
-        <Box display="flex" flex={1} flexGrow={1} flexDirection="row" />
+        <Box className="drag">
+          <Typography
+            style={{paddingBottom: 3, paddingLeft: 20, paddingTop: 10, fontSize: 20, fontWeight: 500}}
+          >
+            {props.children}
+          </Typography>
+        </Box>
+        <Box display="flex" flex={1} flexGrow={1} flexDirection="row" className="drag" />
         {props.onClose && (
           <Box style={{marginTop: 12, marginRight: 10}}>
             <IconButton size="small" aria-label="close" color="inherit" onClick={props.onClose}>

src/renderer/views/export/index.tsx

@@ -14,7 +14,7 @@ import {
   Typography,
 } from '@material-ui/core'
 
-import KeyDescription from '../key/description'
+import {KeyLabel} from '../key/label'
 
 import {styles, DialogTitle} from '../../components'
 import {Key, ExportType, KeyExportRequest, KeyExportResponse} from '../../rpc/keys.d'
@@ -92,11 +92,10 @@ export default class KeyExportDialog extends React.Component<Props, State> {
   }
 
   renderExport() {
-    // TODO: Export type
     return (
       <Box display="flex" flexDirection="column" style={{height: 200}}>
         <Box style={{paddingBottom: 20}}>
-          <KeyDescription k={this.props.k} />
+          <KeyLabel k={this.props.k} full />
         </Box>
         <FormControl error={!!this.state.error}>
           <TextField

src/renderer/views/key/content.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
-import {CSSProperties} from 'react'
 
 import {Box, Button, Table, TableBody, TableCell, TableRow, Typography} from '@material-ui/core'
 
-import {Skeleton} from '@material-ui/lab'
+import {IDLabel} from './label'
 
 import {shell} from 'electron'
 
@@ -15,26 +14,19 @@ import UserLabel from '../user/label'
 
 import {keyDescription, dateString} from '../helper'
 
-export const IDView = (props: {id: string; owner?: boolean}) => {
-  const style: CSSProperties = {}
-  if (props.owner) style.fontWeight = 600
-  // width: 520, wordWrap: 'break-word', wordBreak: 'break-all'
-  return <Typography style={{...styles.mono, ...style}}>{props.id}</Typography>
-}
-
 export const KeyDescriptionView = (props: {value: Key}) => {
   return <Typography>{keyDescription(props.value)}</Typography>
 }
 
-type UserProps = {
+type UserRowProps = {
   k: Key
   revoke: () => void
   userSign: (service: string) => void
   update: () => void
   openURL: (url: string) => void
 }
 
-export const UserRow = (props: UserProps) => {
+const UserRow = (props: UserRowProps) => {
   const key = props.k
   const user = key.user
   const signable = key.type == KeyType.EDX25519
@@ -144,7 +136,7 @@ export default (props: Props) => {
             </TableCell>
             <TableCell style={{...cstyles.cell, paddingBottom: 10}}>
               <Box display="flex" flexDirection="column">
-                <IDView id={kid} />
+                <IDLabel k={key} />
               </Box>
             </TableCell>
           </TableRow>

src/renderer/views/key/label.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import {CSSProperties} from 'react'
+import {Box, Typography} from '@material-ui/core'
+
+import {styles, Link} from '../../components'
+import UserLabel from '../user/label'
+
+import {Key, KeyType, User} from '../../rpc/keys.d'
+
+export const IDLabel = (props: {k: Key; owner?: boolean}) => {
+  const key = props.k
+  const isPrivate = key.type == KeyType.X25519 || key.type === KeyType.EDX25519
+  const style: CSSProperties = {}
+  if (props.owner && isPrivate) style.fontWeight = 500
+  // width: 520, wordWrap: 'break-word', wordBreak: 'break-all'
+  return <Typography style={{...styles.mono, ...style}}>{key.id}</Typography>
+}
+
+export const KeyLabel = (props: {k: Key; full?: boolean}) => {
+  if (props.full) {
+    return (
+      <Box>
+        {props.k.user && <UserLabel user={props.k.user} />}
+        <IDLabel k={props.k} />
+      </Box>
+    )
+  }
+
+  if (props.k.user) {
+    return <UserLabel user={props.k.user} />
+  }
+  return <IDLabel k={props.k} />
+}

src/renderer/views/key/remove.tsx

@@ -5,7 +5,7 @@ import {Box, Button, Typography} from '@material-ui/core'
 import {styles} from '../../components'
 import Dialog from '../../components/dialog'
 import Snack, {SnackProps} from '../../components/snack'
-import KeyDescription from './description'
+import {KeyLabel} from './label'
 
 import {keyRemove} from '../../rpc/keys'
 import {Key, KeyType, KeyRemoveRequest, KeyRemoveResponse} from '../../rpc/keys.d'
@@ -55,7 +55,7 @@ const PrivateKey = (props: {k: Key}) => {
         Are you really sure you want to delete this <span style={{fontWeight: 600}}>private</span> key?
       </Typography>
       <Box style={{paddingBottom: 10}}>
-        <KeyDescription k={props.k} />
+        <KeyLabel k={props.k} full />
       </Box>
       <Typography>
         <span style={{fontWeight: 600}}>
@@ -70,7 +70,7 @@ const PublicKey = (props: {k: Key}) => {
   return (
     <Box style={{paddingBottom: 10}}>
       <Typography style={{paddingBottom: 10}}>Do you want to delete this public key?</Typography>
-      <KeyDescription k={props.k} />
+      <KeyLabel k={props.k} />
     </Box>
   )
 }

src/renderer/views/keys/autocomplete.tsx

@@ -10,7 +10,7 @@ import Autocomplete, {
   AutocompleteInputChangeReason,
 } from '@material-ui/lab/Autocomplete'
 
-import UserLabel from '../user/label'
+import {KeyLabel} from '../key/label'
 import matchSorter from 'match-sorter'
 
 import {keys} from '../../rpc/keys'
@@ -142,7 +142,7 @@ export default class AutocompleteView extends React.Component<Props, State> {
 
     return (
       <React.Fragment>
-        <UserLabel kid={option.id!} user={option.user} />
+        <KeyLabel k={option} />
       </React.Fragment>
     )
   }
@@ -197,7 +197,7 @@ export default class AutocompleteView extends React.Component<Props, State> {
             />
           )}
         />
-        <SearchDialog open={this.state.openSearch} close={this.closeSearch} />
+        <SearchDialog open={this.state.openSearch} close={this.closeSearch} reload={() => this.search('')} />
         <KeyImportDialog open={this.state.openImport} close={this.closeImport} />
       </Box>
     )

src/renderer/views/keys/autocompletes.tsx

@@ -5,7 +5,7 @@ import {Box, TextField, TextFieldProps, Typography} from '@material-ui/core'
 
 import Autocomplete from '@material-ui/lab/Autocomplete'
 
-import UserLabel from '../user/label'
+import {KeyLabel} from '../key/label'
 import matchSorter, {rankings} from 'match-sorter'
 
 import SearchDialog from '../search/dialog'
@@ -46,7 +46,7 @@ const renderOption = (option: Key) => {
   }
   return (
     <React.Fragment>
-      <UserLabel kid={option.id!} user={option.user} />
+      <KeyLabel k={option} />
     </React.Fragment>
   )
 }
@@ -59,7 +59,7 @@ const getOptionLabel = (option: Key): string => {
   if (option.id == 'search' || option.id == 'import') {
     return ''
   }
-  return ((<UserLabel kid={option.id!} user={option.user} />) as unknown) as string
+  return ((<KeyLabel k={option} />) as unknown) as string
 }
 
 export default (props: Props) => {

src/renderer/views/keys/index.tsx

@@ -30,7 +30,7 @@ import {
 import {styles} from '../../components'
 import Snack, {SnackProps} from '../../components/snack'
 import UserLabel from '../user/label'
-import {IDView} from '../key/content'
+import {IDLabel} from '../key/label'
 
 import Header from '../header'
 
@@ -403,10 +403,7 @@ export default (_: {}) => {
                     {key.user && <UserLabel user={key.user} />}
                   </TableCell>
                   <TableCell style={{verticalAlign: 'top'}}>
-                    <IDView
-                      id={key.id!}
-                      owner={key.type == KeyType.X25519 || key.type === KeyType.EDX25519}
-                    />
+                    <IDLabel k={key} owner />
                   </TableCell>
                 </TableRow>
               )

src/renderer/views/keys/select.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 
 import {Box, Divider, FormControl, InputLabel, MenuItem, Select, Typography} from '@material-ui/core'
 
-import UserLabel from '../user/label'
+import {KeyLabel} from '../key/label'
 
 import {keys} from '../../rpc/keys'
 import {KeysRequest, KeysResponse, Key, KeyType, SortDirection} from '../../rpc/keys.d'
@@ -79,7 +79,7 @@ export default (props: Props) => {
                   {props.itemLabel} 
                 </Typography>
               )}
-              <UserLabel kid={k.id!} user={k.user} />
+              <KeyLabel k={k} />
             </Box>
           </MenuItem>
         ))}

src/renderer/views/search/view.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
 } from '@material-ui/core'
 
-import {IDView} from '../key/content'
+import {IDLabel} from '../key/label'
 
 import UserLabel from '../user/label'
 import {styles} from '../../components'
@@ -134,10 +134,10 @@ export default class SearchView extends React.Component<Props, State> {
               {this.state.keys.map((k: Key, index: number): any => (
                 <TableRow hover onClick={(event) => this.select(k)} key={k.id} style={{cursor: 'pointer'}}>
                   <TableCell component="th" scope="row">
-                    <UserLabel kid={k.id!} user={k.user} />
+                    {k.user && <UserLabel user={k.user} />}
                   </TableCell>
                   <TableCell style={{verticalAlign: 'top'}}>
-                    <IDView id={k.id!} />
+                    <IDLabel k={k} />
                   </TableCell>
                 </TableRow>
               ))}

src/renderer/views/textinput/index.tsx

@@ -71,7 +71,7 @@ export default class MessageInputView extends React.Component<Props, State> {
         }}
       >
         <Input
-          style={styles.messageInput}
+          style={styles.regular}
           autoFocus
           disableUnderline
           fullWidth

src/renderer/views/user/label.tsx

@@ -6,7 +6,11 @@ import styles, {serviceColor} from '../../components/styles'
 
 import {User, UserStatus} from '../../rpc/keys.d'
 
-export default (props: {user: User}) => {
+type Props = {
+  user: User
+}
+
+export default (props: Props) => {
   const {user} = props
 
   let textColor = ''

src/renderer/views/verify/signer.tsx

@@ -9,6 +9,7 @@ import Snack, {SnackProps} from '../../components/snack'
 import KeyDialog from '../key'
 
 import {Key, EncryptMode} from '../../rpc/keys.d'
+import {KeyLabel} from '../key/label'
 
 type Props = {
   signer?: Key
@@ -94,7 +95,7 @@ const SignerUser = (props: {signer: Key; mode?: EncryptMode}) => {
       <Typography display="inline" style={{...styles.mono}}>
         Verified&nbsp;
       </Typography>
-      <UserLabel kid={signer.id!} user={signer.user} />
+      <KeyLabel k={signer} />
       <Typography display="inline" style={{...styles.mono}}>
         {encryptModeDescription(mode)}
       </Typography>
@@ -113,7 +114,7 @@ const SignerUserUnknown = (props: {signer: Key; lookup: () => void}) => {
       <Typography display="inline" style={{...styles.mono}}>
         Signed by&nbsp;
       </Typography>
-      <UserLabel kid={signer.id!} user={signer.user} />
+      <KeyLabel k={signer} />
       <Button
         size="small"
         variant="outlined"