Formatting.

packages/console-app/src/containers/panels/registry/Registry.js

@@ -14,8 +14,8 @@ import Panel from '../../../components/Panel';
 import Toolbar from '../../../components/Toolbar';
 
 import RegistryRecords, { RecordType } from './RegistryRecords';
+import RegistryLookup, { LookupType } from './RegistryLookup';
 import RegistryStatus from './RegistryStatus';
-import RegistryLookup from './RegistryLookup';
 
 const TAB_RECORDS = 'records';
 const TAB_STATUS = 'status';
@@ -44,6 +44,7 @@ const Registry = () => {
   const classes = useStyles();
   const [tab, setTab] = useState(TAB_RECORDS);
   const [type, setType] = useState();
+  const [scope, setScope] = useState(LookupType.default);
 
   return (
     <Panel
@@ -57,7 +58,10 @@ const Registry = () => {
           </Tabs>
 
           {tab === TAB_RECORDS && (
-            <RecordType type={type} onChanged={setType} />
+            <RecordType type={type} onChange={setType} />
+          )}
+          {tab === TAB_LOOKUP && (
+            <LookupType scope={scope} onChange={setScope} />
           )}
         </Toolbar>
       }
@@ -71,7 +75,7 @@ const Registry = () => {
 
         {tab === TAB_LOOKUP && (
           <div className={classes.panel}>
-            <RegistryLookup />
+            <RegistryLookup scope={scope} />
           </div>
         )}
 

packages/console-app/src/containers/panels/registry/RegistryLookup.js

@@ -4,11 +4,7 @@
 
 import React, { useContext, useState } from 'react';
 import Autocomplete from '@material-ui/lab/Autocomplete';
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
 import TextField from '@material-ui/core/TextField';
-import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core';
 
 import { useQuery } from '@apollo/react-hooks';
@@ -18,6 +14,8 @@ import Json from '../../../components/Json';
 import { ConsoleContext, useQueryStatusReducer, useRegistry } from '../../../hooks';
 
 import WNS_RECORDS from '../../../gql/wns_records.graphql';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@material-ui/core/Button';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -25,22 +23,56 @@ const useStyles = makeStyles(theme => ({
     flexDirection: 'column',
     flex: 1
   },
-  select: {
-    width: 160,
-    marginRight: theme.spacing(2)
+  search: {
+    display: 'flex',
+    padding: '2px 8px'
   },
   button: {
     marginLeft: theme.spacing(2)
+  },
+  selected: {
+    color: theme.palette.text.primary
   }
 }));
 
-const RegistryLookup = () => {
+const types = [
+  { key: 'authority', label: 'Authority' },
+  { key: 'wrn', label: 'WRN' }
+];
+
+export const LookupType = ({ scope = types[0].key, onChange }) => {
+  const classes = useStyles();
+
+  return (
+    <ButtonGroup
+      disableRipple
+      disableFocusRipple
+      variant='outlined'
+      color='primary'
+      size='small'
+      aria-label='text primary button group'
+    >
+      {types.map(t => (
+        <Button
+          key={t.key}
+          className={t.key === scope && classes.selected}
+          onClick={() => onChange(t.key)}
+        >
+          {t.label}
+        </Button>
+      ))}
+    </ButtonGroup>
+  );
+};
+
+LookupType.default = types[0].key;
+
+const RegistryLookup = ({ scope }) => {
   const classes = useStyles();
   const { config } = useContext(ConsoleContext);
   const { registry } = useRegistry(config);
   const [result, setResult] = useState({});
   const [inputValue, setInputValue] = useState('');
-  const [lookupType, setLookupType] = useState('wrn');
 
   const data = useQueryStatusReducer(useQuery(WNS_RECORDS, {
     pollInterval: config.api.intervalQuery
@@ -54,7 +86,7 @@ const RegistryLookup = () => {
 
   const getNames = () => {
     let ret;
-    switch (lookupType) {
+    switch (scope) {
       case 'wrn': {
         ret = [];
         records.forEach(item => ret.push(...item.names));
@@ -74,42 +106,27 @@ const RegistryLookup = () => {
         ret = Array.from(names.values());
         break;
       }
-
-      default:
-        throw new Error(`Unrecognized lookup type: ${lookupType}`);
     }
 
     ret.sort();
     return ret;
   };
 
-  const handleSelect = (evt) => {
-    evt.preventDefault();
-
-    // TODO(burdon): Change to controlled component.
-    setLookupType(evt.target.value);
-  };
-
-  const handleSubmit = async (evt) => {
-    evt.preventDefault();
-
-    if (!inputValue) {
+  const handleSubmit = async (newInputValue = inputValue) => {
+    if (!newInputValue) {
       setResult('');
       return;
     }
 
     let result;
-    switch (lookupType) {
+    switch (scope) {
       case 'wrn':
-        result = await registry.lookupNames([inputValue], true);
+        result = await registry.lookupNames([newInputValue], true);
         break;
 
       case 'authority':
-        result = await registry.lookupAuthorities([inputValue]);
+        result = await registry.lookupAuthorities([newInputValue]);
         break;
-
-      default:
-        throw new Error(`Unrecognized lookup type: ${lookupType}`);
     }
 
     setResult(result);
@@ -117,30 +134,25 @@ const RegistryLookup = () => {
 
   return (
     <div className={classes.root}>
-      <Toolbar>
-        <Select id='lookupType' className={classes.select} name='lookupType' defaultValue='wrn' onChange={handleSelect}>
-          <MenuItem value='authority'>Authority</MenuItem>
-          <MenuItem value='wrn'>WRN</MenuItem>
-        </Select>
-
+      <div className={classes.search}>
         <Autocomplete
           options={getNames()}
           autoFocus
-          name='value'
           id='value'
+          name='value'
           fullWidth
-          freeSolo
           inputValue={inputValue}
-          onInputChange={(event, newInputValue) => {
-            setInputValue(newInputValue);
-          }}
           renderInput={(params) => <TextField {...params} variant='outlined' />}
+          onInputChange={async (event, newInputValue) => {
+            setInputValue(newInputValue);
+            await handleSubmit(newInputValue);
+          }}
         />
+      </div>
 
-        <Button className={classes.button} variant='contained' color='primary' onClick={handleSubmit}>Search</Button>
-      </Toolbar>
-
-      <Json data={result} />
+      <div>
+        <Json data={result} />
+      </div>
     </div>
   );
 };

packages/console-app/src/containers/panels/registry/RegistryRecords.js

@@ -23,6 +23,12 @@ import PackageLink from '../../../components/PackageLink';
 import QueryLink from '../../../components/QueryLink';
 import AppLink from '../../../components/AppLink';
 
+const useStyles = makeStyles(theme => ({
+  selected: {
+    color: theme.palette.text.primary
+  }
+}));
+
 const types = [
   { key: null, label: 'ALL' },
   { key: 'wrn:kube', label: 'Kube' },
@@ -33,13 +39,7 @@ const types = [
   { key: 'wrn:type', label: 'Type' }
 ];
 
-const useStyles = makeStyles(theme => ({
-  selected: {
-    color: theme.palette.text.primary
-  }
-}));
-
-export const RecordType = ({ type = types[0].key, onChanged }) => {
+export const RecordType = ({ type = types[0].key, onChange }) => {
   const classes = useStyles();
 
   return (
@@ -55,7 +55,7 @@ export const RecordType = ({ type = types[0].key, onChanged }) => {
         <Button
           key={t.key}
           className={t.key === type && classes.selected}
-          onClick={() => onChanged(t.key)}
+          onClick={() => onChange(t.key)}
         >
           {t.label}
         </Button>

packages/console-app/src/version.json

@@ -1,7 +1,7 @@
 {
   "build": {
     "name":      "@dxos/console-app",
-    "buildDate": "2020-10-30T19:35:04.535Z",
-    "version":   "1.1.0-beta.11"
+    "buildDate": "2020-10-30T22:38:24.913Z",
+    "version":   "1.1.0-beta.12"
   }
 }