Managed gateway #7178
Managed gateway #7178
Conversation
| width: 100% | ||
| display: flex |
There was a problem hiding this comment.
Can we use utility classes for this?
| {accessPoints.map(a => ( | ||
| <AccessPointListItem | ||
| key={a.ssid} | ||
| accessPoint={{ ...a, _type: 'all' }} | ||
| onClick={handleSelectAccessPoint} | ||
| isActive={value.ssid === a.ssid} | ||
| /> | ||
| ))} | ||
| <AccessPointListItem | ||
| accessPoint={{ ssid: '', password: '', _type: 'other' }} | ||
| onClick={handleSelectAccessPoint} | ||
| isActive={value._type === 'other'} | ||
| /> |
There was a problem hiding this comment.
There is a FetchSelect component, can we use that one?
There was a problem hiding this comment.
I tried that at first but seems like we cannot have custom styling of the options in a select component. (Cannot add additional divs, paragraphs, icons etc.)
| {managedGateway.result.system_metrics.temperature} °C | ||
| </div> | ||
| <Link.Anchor primary href="/gateways/adding-gateways"> | ||
| {m.officialDocumentation.defaultMessage} |
There was a problem hiding this comment.
This should then be a <Message />
| {m.officialDocumentation.defaultMessage} | |
| <Message content={m.officialDocumentation} /> |
| )} | ||
| </div> | ||
| <div> | ||
| <Message content={m.macAddress} />: {managedGateway.result.entity.ethernet_mac_address} |
There was a problem hiding this comment.
ethernet_mac_adress can be a value of the message
| const valuesNormalized = useMemo(() => { | ||
| if (!namePrefix) return values | ||
| const nameSplitted = namePrefix.split('.') | ||
|
|
||
| return values[nameSplitted[0]][parseInt(nameSplitted[1])] | ||
| }, [namePrefix, values]) |
There was a problem hiding this comment.
Can you use the encoders/decoders or the valueSetter() for these values manipulations?
| // Register hidden fields so they don't get cleaned. | ||
| useEffect(() => { | ||
| const hiddenFields = ['target_gateway_server_address', 'cups_redirection'] | ||
| addToFieldRegistry(...hiddenFields) | ||
| return () => removeFromFieldRegistry(...hiddenFields) | ||
| }, [addToFieldRegistry, removeFromFieldRegistry]) |
There was a problem hiding this comment.
In the submit function you have access to the cleaned values:
const handleSubmit = useCallback(
async (values, { }, cleanedValues) => { },
[]
)
So, I think this useEffect() shoudn't be necessary.
There was a problem hiding this comment.
I copy pasted most of the registration/claiming code from ENT repo and looks like this code is that these fields are added to the fieldRegistry so that they will be present in the cleanedValues in the handleSubmit function. Once I remove the useEffect, target_gateway_server_address and cups_redirection are not present in the clean values. This is the submit function that his form is using:
const handleSubmit = useCallback(
({ _inputMethod, ...values }, _, cleanValues) => {
if (_inputMethod !== 'register') {
return handleClaimSubmit(values, cleanValues)
}
return handleRegistrationSubmit(values, cleanValues)
},
[handleClaimSubmit, handleRegistrationSubmit],
)
const downloadLns = useCallback(() => {
if (lnsKey) {
const content = composeDataUri(`Authorization: Bearer ${lnsKey}\r\n`)
downloadDataUriAsFile(content, 'tc.key')
}
}, [lnsKey])
| // Register hidden fields so they don't get cleaned. | ||
| useEffect(() => { | ||
| const hiddenField = ['gateway_server_address', 'enforce_duty_cycle', 'schedule_anytime_delay'] | ||
| addToFieldRegistry(...hiddenField) | ||
| return () => removeFromFieldRegistry(...hiddenField) | ||
| }, [addToFieldRegistry, removeFromFieldRegistry]) |
There was a problem hiding this comment.
same as the other comment.
|
Great suggestions @ryaplots, I will address these comments in the integration branch! |
Summary
Implementation of managed gateway functionality.
Changes
Testing
Steps
Results
Notes for Reviewers
This is still WIP and needs backend integration. Just to have perception of how the UI turned out so far. Also some of the icons will be changed in the UI(i couldn't find related icon on the google material icons library from the wireframes).
Checklist
README.mdfor the chosen target branch.CHANGELOG.md.CONTRIBUTING.md, there are no fixup commits left.