feat-mobile: add feature to add nodes to settings (#5625)

Co-authored-by: paul-boegelsack <paul.boegelsack@iota.org>

packages/mobile/lib/routers/index.ts

@@ -1,5 +1,5 @@
-export * from './actions'
 export * from './enums'
 export * from './interfaces'
+export * from './actions'
 export * from './routers'
 export * from './utils'

packages/mobile/lib/routers/routers/settings/network-configuration-settings-router.ts

@@ -5,19 +5,25 @@ import { INode } from '@core/network'
 import { Subrouter } from '@core/router'
 
 import { settingsRouter } from '..'
+import { NetworkConfigurationSettingsAction } from '../../../contexts/settings'
 import { NetworkConfigurationSettingsRoute } from '../../enums'
 
 export const networkConfigurationSettingsRoute = writable<NetworkConfigurationSettingsRoute>(null)
 export const networkConfigurationSettingsRouter = writable<NetworkConfigurationSettingsRouter>(null)
 
-const selectedNodeStore = writable<INode>(null)
+const selectedNodeStore = writable<INode>(undefined)
+const unsubscribeRouteObserver = networkConfigurationSettingsRoute.subscribe((route) => {
+    if (route === NetworkConfigurationSettingsRoute.Init) {
+        selectedNodeStore.set(undefined)
+    }
+})
 
 export class NetworkConfigurationSettingsRouter extends Subrouter<NetworkConfigurationSettingsRoute> {
     constructor() {
         super(NetworkConfigurationSettingsRoute.Init, networkConfigurationSettingsRoute, get(settingsRouter))
     }
     next(event: INetworkConfigurationSettingsRouterEvent = {}): void {
-        const { node } = event
+        const { node, action } = event
 
         let nextRoute: NetworkConfigurationSettingsRoute
         const currentRoute = get(this.routeStore)
@@ -27,6 +33,12 @@ export class NetworkConfigurationSettingsRouter extends Subrouter<NetworkConfigu
                 if (node) {
                     selectedNodeStore.set(node)
                     nextRoute = NetworkConfigurationSettingsRoute.NodeDetails
+                } else if (action) {
+                    switch (action) {
+                        case NetworkConfigurationSettingsAction?.AddNode:
+                            nextRoute = NetworkConfigurationSettingsRoute.AddNode
+                            break
+                    }
                 }
         }
 
@@ -37,6 +49,7 @@ export class NetworkConfigurationSettingsRouter extends Subrouter<NetworkConfigu
     }
     reset(): void {
         super.reset()
-        selectedNodeStore.set(null)
+        unsubscribeRouteObserver()
+        selectedNodeStore.set(undefined)
     }
 }

packages/mobile/views/dashboard/drawers/profile/views/settings/views/networkConfiguration/NetworkConfigurationRouter.svelte

@@ -4,13 +4,25 @@
         networkConfigurationSettingsRoute,
         networkConfigurationSettingsRouter,
     } from '../../../../../../../../lib/routers'
-    import { NetworkConfigurationInitNodeInfoView, NetworkConfigurationInitView } from './views'
+    import {
+        NetworkConfigurationAddUpdateNodeView,
+        NetworkConfigurationInitView,
+        NetworkConfigurationNodeInfoView,
+    } from './views'
 
     $: selectedNode = $networkConfigurationSettingsRouter.getSelectedNodeStore()
+
+    function onAddNodeSuccess(): void {
+        if ($networkConfigurationSettingsRoute === NetworkConfigurationSettingsRoute.AddNode) {
+            $networkConfigurationSettingsRouter.previous()
+        }
+    }
 </script>
 
 {#if $networkConfigurationSettingsRoute === NetworkConfigurationSettingsRoute.Init}
     <NetworkConfigurationInitView />
 {:else if $networkConfigurationSettingsRoute === NetworkConfigurationSettingsRoute.NodeDetails}
-    <NetworkConfigurationInitNodeInfoView node={$selectedNode} />
+    <NetworkConfigurationNodeInfoView node={$selectedNode} />
+{:else if $networkConfigurationSettingsRoute === NetworkConfigurationSettingsRoute.AddNode}
+    <NetworkConfigurationAddUpdateNodeView node={$selectedNode} onSuccess={onAddNodeSuccess} />
 {/if}

packages/mobile/views/dashboard/drawers/profile/views/settings/views/networkConfiguration/views/NetworkConfigurationAddUpdateNodeView.svelte

@@ -0,0 +1,67 @@
+<script lang="typescript">
+    import { showAppNotification } from '@auxiliary/notification'
+    import { localize } from '@core/i18n'
+    import { addNodeToClientOptions, editNodeInClientOptions, INode } from '@core/network'
+    import { activeProfile } from '@core/profile'
+    import { Button, HTMLButtonType, NodeConfigurationForm } from 'shared/components'
+
+    const DEFAULT_EMPTY_NODE: INode = { url: '', auth: { username: '', password: '', jwt: '' } }
+
+    export let node: INode = DEFAULT_EMPTY_NODE
+    export let isEditingNode: boolean = false
+    export let onSuccess: (..._: any[]) => void
+
+    const currentNode = node
+
+    let nodeConfigurationForm: NodeConfigurationForm
+    let isBusy = false
+
+    async function handleSubmit(): Promise<void> {
+        try {
+            isBusy = true
+            await nodeConfigurationForm.validate({
+                validateUrl: true,
+                checkSameNetwork: true,
+                uniqueCheck: !isEditingNode,
+                checkNodeInfo: true,
+                validateClientOptions: true,
+            })
+            if (isEditingNode) {
+                await editNodeInClientOptions(currentNode, node)
+            } else {
+                await addNodeToClientOptions(node)
+            }
+            node = DEFAULT_EMPTY_NODE
+            onSuccess()
+        } catch (err) {
+            if (err.type !== 'validationError') {
+                showAppNotification({
+                    type: 'error',
+                    message: localize(err?.error ?? 'error.global.generic'),
+                })
+            }
+        } finally {
+            isBusy = false
+        }
+    }
+</script>
+
+<div class="flex flex-col justify-between space-y-4 h-full">
+    <NodeConfigurationForm
+        bind:this={nodeConfigurationForm}
+        bind:node
+        onSubmit={handleSubmit}
+        {isBusy}
+        isDeveloperProfile={$activeProfile.isDeveloperProfile}
+    />
+    <Button
+        disabled={!node.url || isBusy}
+        type={HTMLButtonType.Submit}
+        form="node-configuration-form"
+        classes="w-full"
+        {isBusy}
+        busyMessage={localize(`popups.node.${isEditingNode ? 'updatingNode' : 'addingNode'}`)}
+    >
+        {localize(`actions.${isEditingNode ? 'updateNode' : 'addNode'}`)}
+    </Button>
+</div>

packages/mobile/views/dashboard/drawers/profile/views/settings/views/networkConfiguration/views/NetworkConfigurationInitView.svelte

@@ -13,11 +13,14 @@
     import { activeProfile } from '@core/profile'
     import { Button, ButtonSize, HR, Text, TextType } from 'shared/components'
     import { NodeListTable } from '../../../../../../../../../components'
+    import { NetworkConfigurationSettingsAction } from '../../../../../../../../../lib/contexts/settings'
     import { networkConfigurationSettingsRouter } from '../../../../../../../../../lib/routers'
 
     const { networkType } = $activeProfile
 
-    function handleAddNodeClick(): void {}
+    function handleAddNodeClick(): void {
+        $networkConfigurationSettingsRouter.next({ action: NetworkConfigurationSettingsAction.AddNode })
+    }
 
     function handleNodeClick(node: INode) {
         $networkConfigurationSettingsRouter.next({ node })

packages/mobile/views/dashboard/drawers/profile/views/settings/views/networkConfiguration/views/NetworkConfigurationInitNodeInfoView.svelte → packages/mobile/views/dashboard/drawers/profile/views/settings/views/networkConfiguration/views/NetworkConfigurationNodeInfoView.svelte

@@ -106,8 +106,8 @@
     })
 </script>
 
-{#if nodeInfo && nodeInfoTab}
-    <div class="flex flex-auto flex-col justify-between space-y-4">
+<div class="flex flex-auto flex-col justify-between space-y-4">
+    {#if nodeInfo && nodeInfoTab}
         <div class="flex flex-col space-y-4">
             <div class="flex flex-row">
                 {#key nodeInfoTab}
@@ -152,18 +152,22 @@
                 {/each}
             </div>
         </div>
-        <Button
-            busyMessage={localize('popups.node.loadingNodeInfo')}
-            isBusy={!nodeInfo || !nodeInfoTab}
-            disabled={!nodeInfo}
-            classes="w-full"
-            size={ButtonSize.Medium}
-            outline
-            onClick={handleCopyAllInformationClick}
-        >
-            {localize('actions.copyAllInformation')}
-        </Button>
+    {:else}
+        <Spinner busy message={localize('popups.node.loadingNodeInfo')} classes="my-12 justify-center" />
+    {/if}
+    <div class="flex flex-col space-y-4 w-full">
+        {#if nodeInfo && nodeInfoTab}
+            <Button
+                busyMessage={localize('popups.node.loadingNodeInfo')}
+                isBusy={!nodeInfo || !nodeInfoTab}
+                disabled={!nodeInfo}
+                classes="w-full"
+                size={ButtonSize.Medium}
+                outline
+                onClick={handleCopyAllInformationClick}
+            >
+                {localize('actions.copyAllInformation')}
+            </Button>
+        {/if}
     </div>
-{:else}
-    <Spinner busy message={localize('popups.node.loadingNodeInfo')} classes="my-12 justify-center" />
-{/if}
+</div>

packages/mobile/views/dashboard/drawers/profile/views/settings/views/networkConfiguration/views/index.js

@@ -1,2 +1,3 @@
-export { default as NetworkConfigurationInitNodeInfoView } from './NetworkConfigurationInitNodeInfoView.svelte'
+export { default as NetworkConfigurationAddUpdateNodeView } from './NetworkConfigurationAddUpdateNodeView.svelte'
 export { default as NetworkConfigurationInitView } from './NetworkConfigurationInitView.svelte'
+export { default as NetworkConfigurationNodeInfoView } from './NetworkConfigurationNodeInfoView.svelte'