diff --git a/packages/console-app/src/containers/panels/registry/Registry.js b/packages/console-app/src/containers/panels/registry/Registry.js index 72a226a..2702aa5 100644 --- a/packages/console-app/src/containers/panels/registry/Registry.js +++ b/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 ( { {tab === TAB_RECORDS && ( - + + )} + {tab === TAB_LOOKUP && ( + )} } @@ -71,7 +75,7 @@ const Registry = () => { {tab === TAB_LOOKUP && (
- +
)} diff --git a/packages/console-app/src/containers/panels/registry/RegistryLookup.js b/packages/console-app/src/containers/panels/registry/RegistryLookup.js index ee78c80..a14ae51 100644 --- a/packages/console-app/src/containers/panels/registry/RegistryLookup.js +++ b/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 ( + + {types.map(t => ( + + ))} + + ); +}; + +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 (
- - - +
{ - setInputValue(newInputValue); - }} renderInput={(params) => } + onInputChange={async (event, newInputValue) => { + setInputValue(newInputValue); + await handleSubmit(newInputValue); + }} /> +
- -
- - +
+ +
); }; diff --git a/packages/console-app/src/containers/panels/registry/RegistryRecords.js b/packages/console-app/src/containers/panels/registry/RegistryRecords.js index e2b6cf3..a3c0cbd 100644 --- a/packages/console-app/src/containers/panels/registry/RegistryRecords.js +++ b/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 }) => { diff --git a/packages/console-app/src/version.json b/packages/console-app/src/version.json index 40779bb..96fec0e 100644 --- a/packages/console-app/src/version.json +++ b/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" } }